Sec S19W1 || Creation of an Interactive Website (Basic concepts of HTML5)

Greetings Everyone! I hope everyone is enjoying their life with family and friends by the Grace of Allah Almighty. Steemit team has announced new learning lessons with SEC contests which is really a good change on the platform. We have been taking part in the contests but nothing was changing but now we can learn different skills on Steemit which is a great initiative by the Steemit team.

So now let me share what I have learned from @kouba01 post which is on Creation of an Interactive Website (Basic concepts of HTML5). I am a student of IT and have a good knowledge about HTML and CSS. Lets do our homework now step by step.

1. Quiz

1. Which tag is used for the most important headings?

• a) < title>
• b) < h1>
• c) < p>

Answer:< h1> (Heading tag is from h1 to h6 and most important is h1 and least important is h6.)

2. Which tag is used to create a paragraph?

• a) < paragraph>
• b) < p>
• c) < para>

Answer:< p>(This tag represents paragraph mean blocks of texts are inside < p > </ p >.)

3. Which tag is used to insert an image?

• a) < image>
• b) < img>
• c) < src>

Answer:< img>(We use img tag with src to add source instead of image to embed image in HTML page.)

4. Which CSS property is used to change the text color?

• a) < font-color>
• b) < color>
• c) < text-color>

Answer:Color(We use color as a property to change whole html text color.)

5. How do you link a CSS file to an HTML file?

• a) < link rel="stylesheet" href="styles.css">
• b) < stylesheet>styles.css
• c) < css link="styles.css">

Answer:< link rel="stylesheet" href="styles.css">(we need to add relation and and hypertext reference)

2. Theoretical Questions

The function of < meta > element is to specify metadata about the web page. Metadata is information that describes content such as character set, keywords, author, description, and viewport settings of the web page. This information is very important for search engines to have in order to categorize and understand the web page.

While making a form (contact form, subscription form or any other form) < input> element is used in HTML to create various types of input fields such as text fields, radio buttons, checkboxes, search, and email input. Below I have mentioned the main attributes with example of each that are used with < input> element.

• 'type="text"': Specifies that input field is text field.
• 'name': Defines the name of input field which is used to reference the field when form is submitted.
• 'value': Sets the initial value of input field.
• 'placeholder': Provides hint to user that what can be entered in the field.

Output:

• 'type="radio"': Specifies that input field is radio button.
• 'name': Defines the group name for radio buttons. Same name radio buttons are part of same group.
• 'value': Sets the value that will be submitted after radio button is selected.
• 'checked': Optional that indicates radio button is selected by default.

Output:

I put checked attribute on blue so it will be selected by default. I will show complete form in last of my post.

• 'type="checkboxes"': It specifies that input field is a checkbox.
• 'name': Defines name of input field
• 'value': Sets the value that will be submitted after checkbox is checked.
• 'checked': Optional that indicates checkbox should be checked by default.

Output:

The elemenets < ul> and < ol> both are used to create list in HTML just like we do on Steemit posts as well. The difference between both is display style. Let me explain them with example code.

• Purpose: The < ul> element is used to create list of items where order doesnt matter.
• Display style: Items in unordered list are displayed with bullet points.

Output:

1. Purpose: The < ol> element is used to create list of items where order matters.
2. Display style: Items in unordered list are displayed with numbers or letters.

Output:

The < form> element in HTML is used to create forms that allow users to enter data and submit it to server. We on daily basis see multiple forms including signin, signup, submitting feedback etc. There are few important attributes of < form> element.

Attributes

1. 'action': Specifies the URL where the form data should be sent when form is submitted by user.
2. 'method': It defines teh HTTP method to be used when sending the form data. There are two methods of it:
   - 'GET': Attach the form data to the URL. Useful for simple forms like search boxes.
   -'POST': Sends the form data in the body of request. It is suitable for more secure and larger amount of data.

The < fieldset> tag in HTML form is used to group related elements within the form tag. This makes it easier to understand complex forms. It is useful when there are multiple sections in a form that makes it complex in code but with < fieldset> tag we can group related elements and make it organized and easy to understand.

Role of < fieldset> tag

• Grouping Related Elements: The < fieldset> tag helps to group related form controls like input fields, labels etc together to make it more organized and easier to read.

• Adding a Legend: Legend tag is used within < fieldset> tag that provides a caption for the group of elements so that for future use we can understand context about the form section.

Output

3. Practical Questions

I created form with the knowledge I have. My PC was not supporting VSCode so I used Onecompiler to compile my code. Issue on my side is of Windows. Please have a look at my form and it's design.

Form

Code:

This is all from me for the "Sec S19W1 || Creation of an Interactive Website (Basic concepts of HTML5)" I invite @steemdoctor1, @danish578, @malikusman1 to participate in this HTML5 Lesson.