Page |1
Formatting a Web Page – Basic HTML Tags and Their Attributes
Explanation of the Code
1. <!DOCTYPE html>
Declares the document as HTML5 to ensure proper rendering in web browsers.
2. <html> and </html>
The root of the HTML document containing all the code.
3. <head> and <title>
The <title> tag specifies the title displayed in the browser's tab, in this case, "Web Page
Formatting."
Example Code
4. <body>
Contains all visible content on the webpage.
5. Formatting Tags:
1. <h1 style="color: blue; text-align: center;">
1. <h1>: Creates the largest heading.
2. style: An attribute to customize the heading’s appearance (color and alignment).
2. <p style="font-size: 18px;">
1. <p>: Defines a paragraph.
2. style: Adjusts font size.
3. <p style="background-color: lightgray;">
1. background-color: Changes the background of the paragraph.
4. <hr style="border: 2px solid black;">
1. <hr>: Creates a horizontal line.
2. style: Customizes the line’s thickness and color.
@JamesTchouya
Page |2
How to Use
1. Copy the code into a text editor and save it as formatting_example.html.
2. Open the file in a browser to see the formatted webpage.
Character Formatting Tags
Example Code
Explanation of the Code
1. Basic Character Formatting Tags:
o <b>: Makes text bold.
o <i>: Italicizes text.
o <u>: Underlines text.
2. Subscript and Superscript:
o <sub>: Displays text slightly below the normal line (e.g., chemical formulas).
o <sup>: Displays text slightly above the normal line (e.g., exponents).
3. Size Adjustments:
o <small>: Reduces text size.
@JamesTchouya
Page |3
o <big>: Increases text size.
4. Color and Font Size:
o style="color: red; font-size: 24px;": Changes the color and size of the text.
How to Use
1. Copy the code into a text editor and save it as character_formatting.html.
2. Open it in a browser to view how the different tags work.
HTML Color Values
Example Code
Explanation
1. Color Specification in HTML:
HTML allows you to specify colors in multiple ways:
o Color Names: Simple names like red, green, blue, etc.
o Hexadecimal Codes: A 6-character code starting with # (e.g., #FF5733).
o RGB Values: Specify colors using Red, Green, and Blue components (e.g., rgb(100, 149,
237)).
2. Usage of style Attribute:
o The style attribute is used within tags to directly apply CSS properties.
o color: Changes the text color.
o background-color: Sets the background color for an element.
3. Examples:
o <h1 style="color: red;">: Sets the heading text to red.
o <p style="color: #FF5733;">: Uses a specific Hex color for the text.
o <p style="color: rgb(100, 149, 237);">: Applies the Cornflower Blue color using RGB.
@JamesTchouya
Page |4
How to Use
1. Copy the code into a text editor and save it as html_color_values.html.
2. Open it in a browser to see the different colors applied to headings and paragraphs.
HTML Backgrounds
Example Code
Explanation
1. Background Colors:
o background-color: Sets the background color of an element.
o Applied inline (using style attribute) or through <style> or external CSS.
o Example: <body style="background-color: lightblue;">.
2. Background Images:
o background-image: Adds an image as the background for an element.
o Example:
3. Examples in Code:
o The entire page background is set to light blue using CSS in the <style> section.
o Individual elements like the <h1> and <p> have their background colors set inline using
the style attribute.
o The last <p> demonstrates using an image as a background.
@JamesTchouya
Page |5
How to Use
1. Copy the code into a text editor and save it as html_backgrounds.html.
2. If you want to test the background image, place an image named background.jpg in the same
folder as the file.
3. Open it in a browser to see the backgrounds applied to the page and elements.
Special Characters in HTML
Example Code
Explanation
1. What Are Special Characters?
Special characters are symbols that HTML reserves for its syntax (e.g., <, >), or symbols that are
not present on a standard keyboard (e.g., ©, €).
2. How to Use Special Characters in HTML:
Special characters are written using HTML Entities. An entity starts with &, followed by a code,
and ends with ;.
3. Commonly Used HTML Entities:
o <: Displays <.
o >: Displays >.
o &: Displays &.
o ": Displays ".
o : Adds a non-breaking space.
4. Special Symbols:
o ©: Displays the copyright symbol (©).
o ®: Displays the registered trademark symbol (®).
o €: Displays the Euro symbol (€).
@JamesTchouya
Page |6
5. Code Examples:
o <p>To display a less-than sign (<), use &lt;</p>
This displays To display a less-than sign (<), use <.
6. Practical Usage:
Use HTML entities whenever you need to display reserved or uncommon characters in your
content.
How to Use
1. Copy the code into a text editor and save it as special_characters.html.
2. Open it in a browser to see how the special characters render.
HTML Lists
Example Code for Ordered List (Numbered List)
@JamesTchouya
Page |7
Example Code for Unordered List (Bulleted List)
Explanation
1. Ordered List (<ol> and <li>):
o <ol>: Defines an ordered list where items are numbered.
o <li>: Represents each item in the list.
Example: <ol><li>Boil water.</li></ol> creates a numbered list.
2. Unordered List (<ul> and <li>):
o <ul>: Defines an unordered list where items are displayed with bullets.
o <li>: Represents each item in the list.
Example: <ul><li>Apple</li></ul> creates a bulleted list.
@JamesTchouya
Page |8
3. List Nesting:
o You can nest lists (one list inside another). Example:
How to Use
1. Copy the respective code into a text editor and save it as ordered_list.html or
unordered_list.html.
2. Open in a browser to see the numbered or bulleted lists.
HTML Images
Explanation
1. Image Tag (<img>):
o src: Specifies the image file location. Example: src="example.jpg".
o alt: Provides alternative text for the image if it cannot be displayed. Example:
alt="Example Image".
o width and height: Adjust the dimensions of the image. Example: width="300"
height="200".
2. Clickable Images:
o Wrap the <img> tag inside an <a> tag to make the image clickable.
@JamesTchouya
Page |9
o Example:
3. Important Notes:
o Ensure the image file is in the same folder as your HTML file or provide a correct file
path.
o Use online URLs in the src attribute for images hosted on the internet.
Example Code
How to Use
1. Copy the code into a text editor and save it as html_image.html.
2. Place an image named example.jpg in the same folder as your HTML file.
3. Open it in a browser to see the image displayed and the clickable version.
@JamesTchouya
P a g e | 10
HTML Links
Example Code
Explanation
1. Basic Link (<a>):
o href: Specifies the URL or destination for the link.
Example: <a href="https://www.example.com">Visit Example</a>.
o target="_blank": Opens the link in a new tab or window.
2. Internal Links:
o Use href="#id" to create a link to a section within the same page.
o Add the id attribute to the target element.
Example:
3. Anchor Links:
o Links can be styled using CSS or default browser behavior.
@JamesTchouya
P a g e | 11
How to Use
1. Copy the code into a text editor and save it as html_links.html.
2. Open it in a browser to test the links.
Email Links
Example Code
Explanation
1. Basic Email Link (mailto:):
o Use the mailto: scheme in the href attribute to create an email link.
o Example: <a href="mailto:[email protected]">Send an Email</a>
2. Email with Subject and Body:
o Add a subject and body parameter to the mailto: link using ? and &.
o Use %20 for spaces in the subject or body.
o Example:
3. How It Works:
o Clicking the link opens the default email client on the user’s device with the specified
recipient, subject, and body pre-filled.
How to Use
1. Copy the code into a text editor and save it as email_links.html.
2. Open it in a browser. When you click the links, your default email client will open with the email
ready to send.
@JamesTchouya
P a g e | 12
HTML Tables
Example Code
@JamesTchouya
P a g e | 13
Explanation
1. Basic Table Structure:
o <table>: Defines a table.
o <tr>: Defines a table row.
o <th>: Defines a header cell, usually bold and centered.
o <td>: Defines a standard cell in the table.
2. Attributes:
o border: Adds a border around the table and its cells. Example: border="1".
o colspan: Allows a cell to span multiple columns.
@JamesTchouya
P a g e | 14
o rowspan: Allows a cell to span multiple rows.
3. Code Highlights:
o The first table has three rows and a header row.
o The second table shows merged cells using colspan and rowspan.
How to Use
1. Copy the code into a text editor and save it as html_table.html.
2. Open it in a browser to view the tables.
HTML Forms
Example Code
@JamesTchouya
P a g e | 15
Explanation
1. What Is an HTML Form?
o An HTML form collects user input and sends it to a server for processing.
2. Basic Form Elements:
o <form>: Wraps all the form elements.
▪ action: Specifies the URL to send the form data.
▪ method: Specifies the HTTP method (GET or POST).
o Input Fields:
▪ <input type="text">: For single-line text input.
▪ <input type="email">: For email input with validation.
▪ <input type="password">: Masks the entered text for passwords.
▪ <input type="number">: Accepts numeric input only.
o Dropdown (<select>):
▪ Creates a dropdown list. Options are defined using <option>.
o Checkboxes (<input type="checkbox">):
▪ Lets users select one or more options.
o Textarea (<textarea>):
▪ For multi-line text input.
3. Buttons:
o Submit Button (<button type="submit">): Sends form data to the server.
o Reset Button (<button type="reset">): Clears all input fields.
4. Additional Attributes:
o placeholder: Adds a hint inside input fields.
o id and for: Link a label to an input field for accessibility.
@JamesTchouya
P a g e | 16
How to Use
1. Copy the code into a text editor and save it as html_forms.html.
2. Open it in a browser to interact with the form.
Cascading Style Sheets (CSS)
Example Code
@JamesTchouya
P a g e | 17
@JamesTchouya
P a g e | 18
Explanation
1. What is CSS?
o CSS (Cascading Style Sheets) is used to style HTML elements.
o It separates content (HTML) from presentation (CSS).
@JamesTchouya
P a g e | 19
2. CSS Syntax:
o Selector: Targets the HTML element to style (e.g., body, h1).
o Property: Defines the style (e.g., color, font-size).
o Value: Sets the property’s value (e.g., red, 16px).
Example:
3. CSS Types:
o Inline CSS: Style added directly to an HTML element using the style attribute.
Example: <p style="color: red;">This is red text.</p>
o Internal CSS: Style added inside a <style> tag within the <head> section.
Example: Used in this lesson.
o External CSS: Style written in a separate .css file and linked to the HTML document using
<link>.
4. Key Properties:
o Text and Fonts: color, font-family, font-size, text-align.
o Box Model: margin, padding, border, width, height.
o Background: background-color, background-image.
5. CSS Selectors:
o Target specific elements (p), classes (.classname), or IDs (#id).
Example:
@JamesTchouya
P a g e | 20
How to Use
1. Copy the code into a text editor and save it as css_example.html.
2. Open it in a browser to see the styled webpage.
@JamesTchouya
