HTML

Introduction to HTML

What is HTML?

HTML (HyperText Markup Language) is the standard language for creating web pages.
It structures content on the web using elements like headings, paragraphs, links, and images.

Setting up a development environment

Prepare your computer to write HTML by installing a code editor (e.g., Visual Studio Code) and a web browser for testing.

HTML syntax and structure

HTML uses opening and closing tags to define elements. Proper nesting and indentation are key to writing readable code.

Creating your first HTML file

Write your first HTML document with a basic structure, including <!DOCTYPE html>, <html>, <head>, and <body> tags.

HTML Document Structure

The html, head, and body tags:

The <html> tag wraps the document, <head> contains metadata, and <body> holds the visible content.

Metadata (meta):

Provide information about the page, like character encoding and viewport settings.

Setting the title of a webpage (title):

Use the <title> tag within <head> to define the title displayed on the browser tab.

Hierarchy and Comments

Hierarchy refers to the parent-child relationships between elements. This relationship defines how elements are structured and displayed on the page. Parent, Child, and Sibling Relationships: A parent element contains one or more child elements. Siblings are elements that share the same parent.

Basic HTML Elements

Common semantic tags:

Use <header>, <footer>, <section>, <article>, <aside>, <main>, and <nav> for structured layouts.

Using <div> and <span> for structure:

Leverage <div> for block containers and <span> for inline styling or grouping.

Headings (h1 to h6):

Define headings of different levels, with h1 being the largest and h6 the smallest.

Paragraphs (p):

Used to add blocks of text content.

Text formatting tags:

Modify text style with tags like <b> (bold), <i> (italic), <strong> (important), <em> (emphasis), <small> (smaller text), <mark> (highlight), <del> (deleted), and <ins> (inserted).

Line breaks (br) and horizontal rules (hr):

Insert a line break or a horizontal line to separate sections of content.

Images

Adding images (img):

Display images using the <img> tag with the src attribute to specify the file path.

Image attributes:

Use alt (alternative text), width, and height to define properties of the image.

Lists

Ordered lists (ol) and Unordered lists (ul):

Create numbered lists with <ol> and <li> tags. Create bulleted lists using <ul> and <li>.

Definition lists (dl, dt, dd):

Present terms and definitions with <dl> (definition list), <dt> (term), and <dd> (definition).

Links & Navigation

Navigation:

Use the <nav> element for navigation menus.

Anchor Tags & URL Types:

Create hyperlinks with the <a> tag and href attribute. Use absolute URLs for full web addresses and relative URLs for internal links.

Linking to Sections & New Tabs:

Link to sections of a page using id and href="#id". Use target="_blank" to open links in a new tab.

Email & Phone Links:

Create mailto: and tel: links for emails and phone numbers.

Tables

Creating tables (table, tr, td, th):

Use <table> to create tables, with rows (<tr>), data cells (<td>), and header cells (<th>).

Adding captions (caption):

Add a descriptive caption to a table using the <caption> tag.

Table headers and footers (thead, tfoot, tbody):

Structure tables with <thead> for headers, <tfoot> for footers, and <tbody> for the main content.

Table Attributes

Structural attributes in HTML tables help define how the table is organized. Like colspan, rowspan, border, cellspacing and others.

Project

Build a Student Profile Page using HTML to apply everything you’ve learned so far.

Step 1: Start the HTML Document

Create a new file named profile.html.
Begin with the basic structure using <!DOCTYPE html>, <html>, <head>, and <body>.
Inside the <head>, include a <title> tag and give your page a title like "Student Profile".

Step 2: Add a Header Section

Inside the <body>, add a <header> element.
Include a heading using <h1> with the student’s name.
Add a short introduction paragraph using <p>.

Step 3: Add a Navigation Bar

Create a <nav> section.
Use three <a> tags linking to #about, #hobbies, and #schedule.
Wrap them in bold using the <b> tag if desired.

Step 4: Add an About Section

Create a <section id="about">.
Include a <h2> and a paragraph with more info about the student.
Embed an image of the student using the <img> tag and add alt text.
Add a width of 150 pexels to your image.

Step 5: Add a List of Hobbies

Create a <section id="hobbies">.
Use an unordered list <ul> to show the student’s hobbies.
Include at least 3 list items using <li>.

Step 6: Create a Class Schedule Table

Create a <section id="schedule">.
Add a heading using <h2>.
Inside it, build a <table> with at least 3 columns and 4 rows.
Use <thead> for headings and <tbody> for data.
Include <tr>, <th>, and <td> as needed.

Step 7: Add a Footer

Use the <footer> tag at the bottom of the page.
Add two useful links using <a> (e.g., a portfolio and a social profile).

Forms

Basic Structure & Input Fields:

Use the <form> tag for gathering input. Use <input> for single-line and <textarea> for multi-line fields.

Input Types

Use specific <input> types (e.g., text, email, password).

Labels & Grouping:

Link <label> tags to inputs using the for attribute for accessibility.
Group elements with <fieldset> and <legend>.

Select Elements:

Use the <select>, <option>, and <optgroup> elements to create dropdown menus.
To create radio buttons, use the <input> element with the type="radio".
Ensure that all options within a group have the same name attribute, which allows only one option to be selected at a time.

Using datalist for autocomplete functionality:

Enhance user input with suggestions using <datalist>.

Buttons:

Include <button> or <input type="submit"> for actions.

Multimedia

Adding audio:

Embed audio using the <audio> tag with supported sources.

Adding video:

Use the <video> tag to display videos, along with <source> and <track> tags for formats and subtitles.

Embedding external content:

Integrate external content with the <iframe> tag.

Attributes in Depth

Global Attributes (Can be used on most elements)

These attributes can be applied to most HTML elements to modify their behavior or appearance.

dir – Specifies text direction (ltr, rtl)
lang – Specifies language (en, es, etc.)
translate – Specifies if content should be translated
spellcheck – Enables spell checking (true, false)
contenteditable – Specifies if an element is editable
style – Inline CSS styles
title – Tooltip text on hover
hidden – Hides the element
tabindex – Defines tab order

Form Attributes (Used in `<input>`, `<textarea>`, `<form>`, etc.)

These attributes are used within form-related elements to control behavior, appearance, and functionality.

accept – Specifies allowed file types (.jpg, .png)
multiple – Allows multiple file selection
value – Defines default input value
autocomplete – Enables auto-fill (on, off)
autofocus – Focuses input on page load
checked – Pre-selects radio/checkbox
disabled – Disables input
readonly – Makes input non-editable
form – Associates input with a <form>
formaction – Defines action URL for <button> or <input type="submit">
maxlength – Limits input characters
min / max – Defines numeric or date range
pattern – Specifies a regex pattern for validation
placeholder – Shows hint text
required – Makes input mandatory
step – Defines number intervals for <input type="number">
type – Defines input type (text, email, password, etc.)

Media Attributes (Used in `<img>`, `<audio>`, `<video>`, etc.)

These attributes are used for embedding media content like images, audio, and videos.

loop – Makes audio/video replay
muted – Mutes audio/video
poster – Defines preview image for videos
preload – Specifies how media loads (auto, metadata, none)

Link Attributes (Used in `<a>` and `<link>`)

These attributes are used for defining hyperlinks and external resource links.

href – Defines the link URL
target – Specifies how to open a link (_blank, _self)
rel – Defines relationship (nofollow, stylesheet)
download – Enables file downloads
type – Specifies MIME type

HTML Graphics

Introduction to the <canvas> element:

Use <canvas> to create 2D graphics and animations programmatically.

Using SVG for vector graphics:

Utilize SVG for scalable and resolution-independent graphics.

Symbols and Icons

Using HTML Entities for Symbols:

HTML entities are a way to represent special characters in your HTML code. To add symbols like copyright (©), ampersand (&), and less-than (<) signs, you can use their respective HTML entities

Using Icon Fonts:

Icon fonts like Font Awesome or Material Icons provide pre-designed icons that you can embed directly into your HTML using a class attribute.

Add a Favicon to your Webpage

A favicon (short for "favorite icon") is the small icon displayed in the browser tab, bookmarks, and address bar of a website. It helps users visually identify your website. Favicons are usually square and typically 16x16 or 32x32 pixels, and it must be placed within the head tag.

Project

Create a portfolio website for a singer by following the step-by-step instructions below:

Step 1: Set Up the Project

Create a new folder for your project (e.g., singer_portfolio).
Inside the folder, create a file named index.html.
Open the file in a text editor such as VS Code.

Step 2: Build the Basic HTML Structure

Start with a complete HTML5 structure.
Include a proper document title.
Link to Font Awesome using a CDN inside the <head> section.

Step 3: Add a Header with SVG Graphics

Create a header element with a main heading (site title).
Add two simple SVG shapes on both sides of the heading to act as decorative stars.
Include a subtitle or description for the singer.
Use at least one icon from Font Awesome here.

Step 4: Write the About Section

Create a new section that introduces the singer.
Include a subheading and a paragraph about the artist’s background.
Add one or two icons for personality.

Step 5: Add Multimedia Content

Embed an audio element with a sample track (MP3).
Embed a video element showing a live performance.
Make sure the audio and video controls are visible to the user.
Include text descriptions for each media type.

Step 6: Create a Feedback Form

Add a form section that fans can use to leave feedback.
Include input fields for name and email.
Add a dropdown list asking how the user discovered the artist.
Use a datalist for favorite song suggestions.
Add a radio group to rate the music with stars.
Include a large text area for additional comments or requests.
Apply attributes like required, placeholder, maxlength, and autocomplete where needed.

Step 7: Add a Footer with Icons

Create a footer section at the end of the page.
Include copyright information.
Add three social media links (e.g., Instagram, YouTube, Spotify).
Use Font Awesome icons to represent each social platform.

Accessibility

Understanding ARIA (Accessible Rich Internet Applications):

ARIA is a specification that enhances accessibility of web content for people who use assistive technologies (like screen readers). It allows developers to add semantic meaning and behavioral information to elements that may not be natively accessible.

Common ARIA roles define the type of UI element, such as:

role="navigation" – Marks a navigation region
role="region" – Defines a perceivable section of the page
role="dialog" – Indicates a dialog box/modal

ARIA states and properties define behavior and visibility:

aria-expanded="true/false" – Indicates expandable elements like menus
aria-pressed="true/false" – Used on toggle buttons
aria-hidden="true" – Hides content from screen readers
aria-current="page" – Highlights current page in a navigation

Using aria-* attributes for accessibility:

ARIA attributes help users with screen readers understand your site better. Use them responsibly:

aria-label – Provides a readable label for elements that don’t have visible text
aria-labelledby – References another element that labels the current one
aria-describedby – Links to extra description text (often hidden)
aria-live="polite/assertive" – Announces dynamic content changes

Adding alt text for images:

The alt attribute on <img> tags describes the image for screen readers and improves SEO. Always provide meaningful alternative text unless the image is decorative (then use alt="").

Keyboard navigation and focus management:

Many users navigate using a keyboard (Tab, Shift+Tab, Enter, Space, Arrow keys). Make your interface keyboard-friendly by ensuring:

Every interactive element is reachable via tabindex="0"
Custom elements (like div buttons) use tabindex and keyboard events
Focus is managed when opening modals or navigating dynamic content
Use tabindex="-1" to focus elements programmatically

Using Lighthouse to Audit Accessibility:

Google Lighthouse is a powerful tool built into Chrome DevTools that helps analyze accessibility of your site. It checks for common issues like:

Missing alt text
Insufficient contrast
Missing labels on form elements
Improper use of ARIA attributes

To use Lighthouse:

Open your site in Chrome
Right-click and choose “Inspect” or press Ctrl+Shift+I
Go to the Lighthouse tab
Select "Accessibility" and click "Analyze"

Lighthouse provides a score from 0–100 and gives suggestions with links to documentation to improve your site.

Extra Best Practices:

Use semantic HTML tags: <header>, <nav>, <main>, <section>
Ensure forms have labels linked with for attributes
Use landmarks with role or HTML5 sections
Test with keyboard and screen readers (like NVDA or VoiceOver)

Responsive Design with HTML

Using the meta viewport tag:

Ensure your site scales well on mobile devices with the <meta name="viewport"> tag.

Using Flexible Layouts:

Instead of using fixed widths (like width: 500px), use relative units (like percentages, vw, vh, or em).

Picture element:

Use the <picture> and <source> tags for responsive images.

Internationalization (i18n)

Setting language attributes:

Specify the document language using the lang attribute.

Handling right-to-left (RTL) text:

Use the dir="rtl" attribute to support languages written right-to-left.

Using bdi and bdo for bidirectional text:

Manage text direction with <bdi> and <bdo> tags for multilingual content.

Uploading Files to the Web with a Domain

1. Install an FTP Software:

Download FileZilla Client from the official website and install it on your computer.

2. Create an FTP Account in Your Hosting Control Panel:

Log in to your hosting control panel (e.g., cPanel, Plesk, DirectAdmin).
Navigate to the FTP Accounts section, create a new FTP account by entering a username, password, and directory (usually public_html), then click create.
Note down the credentials.

3. Connect to Your Hosting Account Using FTPS:

Open FileZilla and go to File > Site Manager. Create a new site and enter the following:

Protocol: FTP - File Transfer Protocol
Encryption: Require explicit FTP over TLS
Host: Your domain name (e.g., ftp.yourwebsite.com) or server IP (find it under Server Information)
Port: 21
Logon Type: Normal
Username: The FTP username you created
Password: The FTP password you set

Click Connect. If prompted, accept the server certificate to proceed securely.

4. Navigate to Your Website's Directory:

After connecting successfully in FileZilla, look at the right panel — this shows the files and folders on your web hosting server.

Find and double-click the folder named public_html. This is the main directory where your website files should go — it's also called the "root" directory. Everything you upload here will be visible when someone visits your domain (e.g., https://yourwebsite.com).

In some hosting setups, the root folder might be called www or htdocs instead — they all serve the same purpose. Always upload your site files inside this folder.

5. Upload Files:

On the left panel (your local files), navigate to your website folder. Select all necessary files (HTML, CSS, JS, images) and drag them into the public_html folder on the right panel. FileZilla will begin transferring them.

6. Verify File Uploads:

Check the transfer status of FileZilla to ensure all files uploaded successfully. If any fail, right-click and choose "Requeue and Process." Also, check file permissions if necessary (644 for files, 755 for folders).

7. Access Your Website:

Open a web browser and enter your domain (e.g., https://yourwebsite.com). Your website should now be live! If not, clear your browser cache or double-check file placement.

Project

Create an Accessibility Blog by following the step-by-step instructions below:

Step 1: Set Up the Project

Create a new folder for your project (e.g., accessibility_blog).
Inside the folder, create a file named index.html.
Open the file in a text editor such as VS Code.

Step 2: Build the Basic HTML Structure

Start with a complete HTML5 structure.
Include a proper document title like "Accessibility Blog".
Use semantic tags like <header>, <nav>, <main>, <footer>.

Step 3: Add a Skip Link

At the very top of the page, add an anchor link that allows users to skip directly to the main content.
Example: <a href="#maincontent" tabindex="0">Skip to Main Content</a>.

Step 4: Create a Header with Navigation

Create a <header> element with a main heading for the blog title.
Add a <nav> with simple links like Home, About, and Contact.
Apply ARIA roles like role="banner" and role="navigation" for better accessibility.
Each link should have tabindex="0" for easier keyboard navigation.

Step 5: Write an Introduction Section

Add a small <section> that welcomes users to the site.
Include a heading and a paragraph introducing the purpose of the blog.
Use aria-labelledby for the section and tabindex="0" for important text elements.

Step 6: Add the Main Blog Content

Create a <main> element with id="maincontent" and role="main".
Add a heading and a paragraph about accessibility and why it matters.
Make sure important text elements have tabindex="0" for keyboard users.

Step 7: Insert a Responsive Image

Add an image that represents accessibility.
Use the <picture> element with <source> and srcset attributes to load different images depending on screen size.
The default image should have width="50%" so it doesn’t fill the whole screen.
Always include an alt description for the image.

Step 8: Add a Simple Contact Form

Add a <form> with aria-label="Contact Form".
Include fields for name, email, and message.
Each input should use aria-required="true" and required attributes.
Add a <button> with an aria-label describing its action (e.g., "Submit Form").
Place a <br> tag after each input since no CSS is used.

Step 9: Create a Footer

Create a <footer> element with role="contentinfo" and a copyright.
Add links to versions of the blog in Arabic and another language (e.g., Spanish).

Introduction to HTML

What is HTML?

Setting up a development environment

HTML syntax and structure

Creating your first HTML file

HTML Document Structure

The html, head, and body tags:

Metadata (meta):

Setting the title of a webpage (title):

Hierarchy and Comments

Basic HTML Elements

Common semantic tags:

Using <div> and <span> for structure:

Headings (h1 to h6):

Paragraphs (p):

Text formatting tags:

Line breaks (br) and horizontal rules (hr):

Images

Adding images (img):

Image attributes:

Lists

Ordered lists (ol) and Unordered lists (ul):

Definition lists (dl, dt, dd):

Links & Navigation

Navigation:

Anchor Tags & URL Types:

Linking to Sections & New Tabs:

Email & Phone Links:

Tables

Creating tables (table, tr, td, th):

Adding captions (caption):

Table headers and footers (thead, tfoot, tbody):

Table Attributes

Project

Step 1: Start the HTML Document

Step 2: Add a Header Section

Step 3: Add a Navigation Bar

Step 4: Add an About Section

Step 5: Add a List of Hobbies

Step 6: Create a Class Schedule Table

Step 7: Add a Footer

Forms

Basic Structure & Input Fields:

Input Types

Labels & Grouping:

Select Elements:

Using datalist for autocomplete functionality:

Buttons:

Multimedia

Adding audio:

Adding video:

Embedding external content:

Attributes in Depth

Global Attributes (Can be used on most elements)

Form Attributes (Used in <input>, <textarea>, <form>, etc.)

Media Attributes (Used in <img>, <audio>, <video>, etc.)

Link Attributes (Used in <a> and <link>)

HTML Graphics

Introduction to the <canvas> element:

Using SVG for vector graphics:

Symbols and Icons

Using HTML Entities for Symbols:

Using Icon Fonts:

Add a Favicon to your Webpage

Project

Step 1: Set Up the Project

Step 2: Build the Basic HTML Structure

Step 3: Add a Header with SVG Graphics

Step 4: Write the About Section

Step 5: Add Multimedia Content

Step 6: Create a Feedback Form

Step 7: Add a Footer with Icons

Accessibility

Understanding ARIA (Accessible Rich Internet Applications):

Using aria-* attributes for accessibility:

Adding alt text for images:

Keyboard navigation and focus management:

Using Lighthouse to Audit Accessibility:

Extra Best Practices:

Responsive Design with HTML

Form Attributes (Used in `<input>`, `<textarea>`, `<form>`, etc.)

Media Attributes (Used in `<img>`, `<audio>`, `<video>`, etc.)

Link Attributes (Used in `<a>` and `<link>`)