Link Search Menu Expand Document
HTML&CSS

HTML Tags 1

Class Agenda

The class must not have a strict separation of theory and exercise. Instead the whole class must be one big exercise with theory in between.

At the end of the class students would need to have written their own HTML document which follows the example given in the HTML Checkpoint4 file.

  1. Headings
  2. HTML paragraphs
  3. HTML text styling tags
  4. HTML Header and Footer
  5. Maintainable HTML

1. Headings

  • What are the headings tags?
  • When do we use each heading and what are the differences between them?

ETA: 20min

2. HTML paragraphs

Following the HTML Paragraphs Tutorial on w3schools we need to learn about:

  • What HTML <p> tag is?
  • How do we add line breaks <br> and thematic breaks <hr>? What are Empty tags?
  • What is the preformatted text tag <pre>

ETA: 30min

3. HTML text styling tags

This section covers basic HTML tags used for styling text. These tags include. Students should practice with a couple of these tags.

<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text

ETA: 20min

4. HTML Header and Footer

We would introduce the semantic HTML tags <header> and <footer>.

ETA: 10 min

5. Maintainable HTML

This section explains the importance of using comments. It also gives students a good understanding of why a coder / developer needs to help his future self by writing readable and maintainable code. Moreover, the section should teach students:

  • How to add HTML comments

ETA: 10min

Exercise Description

The exercise should be done along presenting all tags. If there is time at the end of the session, students can also fill in content of inside their website following the structure of the HTML Checkpoint4 file.

Glossary & Terminology

  • Code Maintainability - This is a characteristic of the code and specifies the level of ease with which a developer can make changes to the code in future. If your code has bad maintainability then it would be very difficult for you or other people to change parts of the code in future. Code with bad maintainability often leads to hidden bugs.
  • Code Readability - This is a characteristic of the code and specifies the level of ease with which a developer can read the code. If your code has bad readability then it would be very difficult for you and other people to understand what your code is doing.
  • Empty tag - An empty html tag is a tag which has no closing tag and no content. It simply stands on its own. Examples include, <br>, <hr>, <meta>

Homework

  1. Prepare a nice photo of yourself to be used in the CV Project in next class.
  2. Write more content inside of the different sections of your website.
  3. Feel free to personalize the content in any way you want. You can take the following examples as inspiration source:

Resources