Lesson 1: Introduction to HTML

Lesson 2: Text Formatting and Structure

Headings and paragraphs
HTML provides six levels of headings, <h1> to <h6>, with <h1> being the highest
level and <h6> the lowest. Headings are used to structure the content and
indicate its hierarchy on the webpage
Paragraphs are created using the <p> tag. Text placed between <p> and </p>
tags is treated as a separate paragraph.
Comments in HTML
<!-- --> - HTML comments are used to add notes or explanations within the HTML
code that are not displayed in the browser. They are useful for documenting
your code or temporarily hiding sections during development.
Naming Convention

ID – specific id of each elements (should be no duplication)

Name – specific name of elements, (possible for duplication)
Class – group of elements
Text formatting tags (bold, italic, underline)
<strong> - This tag is used to give text strong importance or emphasis, typically
displayed as bold. (<b>)
<em> - This tag represents emphasized text, usually displayed as italic. (<i>)
<u> - This tag underlines the enclosed text.
<s> - This tag strikes through the enclosed text, indicating that it is no longer
relevant or valid.

Line breaks and horizontal rules

<br> - This tag inserts a line break within a paragraph, allowing text or elements
to appear on a new line.
<hr> - This tag creates a horizontal rule, a visible line that can be used to
separate different sections of content.
&nbsp; – use to have a white space.
 Lists (ordered and unordered)
<ul> and <ol>
<ul> - is used to create an unordered (bullet) list, while
<ol> - is used for an ordered (numbered) list.
<li> - This tag defines individual items within a list. Each list item is placed
between <li> and </li> tags.

Element Grouping
<div> - This tag defines a division or section of the webpage, allowing you to
group and style related elements.
<span> - This tag is an inline element used to apply styles to specific portions of
text or elements within a paragraph.

Block vs Inline ELEMENTS

BLOCK - always starts on a new line, and the browsers automatically add some space (a
margin) before and after the element.
Examples:
Inline - An inline element does not start on a new line and only takes up as much width as
necessary.

Examples:

Lesson 3: Anchors / links

Creating hyperlinks
<a> - The anchor tag is used to create hyperlinks in HTML. It requires an href
attribute that specifies the URL of the target webpage or resource. The content
between the opening and closing <a> tags serves as the clickable text or image
for the link.
Linking to external websites
To create a link to an external website, provide the full URL within the href attribute of
the anchor tag. For example: <a href="https://www.example.com">Visit Example</a>

Linking to different sections within the same page

HTML allows you to create internal links within the same page using anchor tags and the
id attribute. Assign an id to the target element you want to link to, and then use the href
attribute with a preceding # symbol to specify the target element's id. For example: <a
href="#section2">Go to Section 2</a>.
 Opening links in a new tab or window:

You can add the target attribute to an anchor tag and set it to _blank to open the link in
a new browser tab or window. For example: <a href="https://www.example.com"
target="_blank">Visit Example</a>.

Lesson 4: Images and Multimedia

Image formats

Common image formats supported in HTML include JPEG, PNG, and GIF. JPEG is suitable
for photographs, PNG for images with transparency or sharp edges, and GIF for simple
animations.

Adding images to a webpage

<img> - The image tag is used to insert images into an HTML document. It requires the
src attribute, which specifies the path or URL to the image file. For example: <img
src="image.jpg" alt="Description of the image">

Image attributes (size, alignment, alt text)

width and height attributes - These attributes define the width and height of the image
in pixels. Specifying the dimensions helps browsers allocate space for the image before
it loads.

align attribute - This attribute specifies the alignment of the image within the
surrounding text. Common values include "left", "right", .

alt attribute - As mentioned earlier, the alt attribute provides alternative text for the
image.

Embedding videos and audio:

<video> - The video tag is used to embed videos on a webpage. It supports various
attributes like src (the video file URL), controls (displays video controls), width, height,
and more.

<audio> - The audio tag is used to embed audio files. It also supports attributes such as
src, controls, autoplay, and loop.

ACTIVITY: CREATE A BIO-DATA PAGE

Lesson 5: Table
Tables in HTML are created using the <table> tag. Within the table element, you define rows
using the <tr> tag and columns using the <td> tag.

Adding rows and columns

To add a new row to a table, use the <tr> tag and include the desired number of cells
(<td>) within it. Each cell represents a column in the table.

To add additional columns to an existing row, simply add more <td> elements within the
corresponding <tr>.

Table headers and body

<th>: The table header tag is used to define header cells within the <thead> section of a
table. Header cells are typically displayed in bold and centered by default.

<caption>: The caption tag is used to add a caption or title to a table. It is placed
immediately after the opening <table> tag and before the <thead> or <tbody> section.

Formatting table elements

Attributes such as colspan and rowspan can be added to table cells (<td> or <th>) to
span multiple columns or rows, respectively.

Lesson 6: Forms and User Input

Form structure and elements

<form> - The form tag is used to create an interactive form on a webpage. It contains
various form elements that allow users to input data.

<input> - The input tag is the most commonly used form element. It provides a wide
range of input types, including text fields, checkboxes, radio buttons, and more.

Form fields

Text fields - <input type="text"> creates a single-line text input field

Password fields - <input type="password"> creates a text input field where the entered
text is masked (useful for password inputs).

Checkboxes - <input type="checkbox"> allows users to select multiple options.

Radio buttons - <input type="radio"> allows users to select a single option from a group
of choices.

Dropdown menus - <select> with <option> creates a dropdown menu for selecting a
single option from a list.
 Text areas - <textarea> creates a multi-line text input field for longer text entries.

Form accessibility

Ensuring form accessibility involves providing appropriate labels for form elements using
the <label> tag. Labels can be associated with input elements using the for attribute or
by nesting the input element within the label element.

Submitting forms and handling data

<button>: The button tag is used to create a submit button within a form. It triggers the
submission of form data to the server.

Readonly and Hidden

Readonly / disabled – the readonly is use to make an input element uneditable

Hidden – it is use to make element hidden
Value – use to set the value
Selected – Default select
Form validation and error messages

HTML5 introduces built-in form validation using attributes like, required, min, max, and
more. These attributes help enforce data entry rules and provide automatic validation
feedback.

Lesson 7: Semantic HTML

Semantic HTML refers to using HTML elements that carry meaning and provide context to the
content they enclose. By using semantic elements, you can enhance the structure and
accessibility of your web pages.

Common semantic HTML elements

<nav> - The nav tag is used to define a section containing navigation links.

<main> - This tag represents the main content of a webpage, excluding headers, footers, and
navigation

<footer>: This tag represents the footer of a document or a section, typically containing
information about the author, copyright notice, or contact details.
8. HTML5 Advanced Features

New input types and attributes

<input type="date"> - Allows users to select a date from a calendar widget.

<input type="email"> - Validates email addresses

<input type="color"> - Enables color selection through a color picker.

<input type="range"> - Creates a slider control for selecting a value within a specified
range.

ACTIVITY: MAKE AN ORDER MENU