Course Title: HTML Essential Training

Description: Hypertext Markup Language (HTML) is the foundation of website and web
application development. It allows you to ensure that your content is understood by
both segments of your audience: the people who watch, read, or listen to your
content, and the computers that display it. In this course, learn how to craft
excellent HTML with the pieces that HTML itself has to offer. Instructor Jen
Simmons highlights all of the fundamental concepts you need to use HTML
thoughtfully. She focuses on semantic markup: tagging content as what it is, and
not just for formatting, convention, or convenience. This has far-reaching impact
for those who consume the web differently; it ensures that when a screen reader or
a system (like a search engine) consumes a page, it knows exactly what it contains
and how to categorize that information.

***********************************************
Chapter: 2. Formatting Text
***********************************************

-----------------------------------------------
Video: Bold and italics
-----------------------------------------------
Note Time: Note Text:

0:00:46 Italic Elements:

<i>: Used for visual italics without any semantic meaning. Example: Titles of works
like "Sesame Street".
<em>: Used for emphasis, conveying importance in the text. Example: Highlighting
the word "favorite" to show it's important.

Bold Elements:

<b>: Used for visual bolding without any semantic meaning. Example: Making a phrase
stand out visually.
<strong>: Used to convey strong importance or urgency. Example: Highlighting the
word "Warning" to show it's crucial.

-----------------------------------------------
Video: Quotes
-----------------------------------------------
Note Time: Note Text:

0:00:53 Types of Lists: HTML supports three types of lists: unordered

lists (<ul>), ordered lists (<ol>), and definition lists (<dl>).

Unordered Lists: Use <ul> tags and list items (<li>) to create bullet points.
Ordered Lists: Use <ol> tags and list items (<li>) to create numbered lists.
Definition Lists: Use <dl> for the list, <dt> for terms, and <dd> for descriptions
to create key-value pairs.

0:01:12 Block Quotes: Use the <blockquote> element to mark up large

sections of quoted text. Inside <blockquote>
Inline Quotes: For quotes within a sentence, use the <q> element. This lets the
browser automatically format the quote marks according to the language and region.

Citations: Use the <cite> element to credit the source of the quote.
-----------------------------------------------
Video: Dates and times
-----------------------------------------------
Note Time: Note Text:

0:03:51 The time Element: <time>May 8th</time>

specific format: YYYY-MM-DD for dates and HH:MM:SS for times.
Example: <time datetime="2025-05-08">May 8th, 2025</time>

-----------------------------------------------
Video: Code, pre, and br
-----------------------------------------------
Note Time: Note Text:

0:00:12 Combining Elements:

You can combine <code> and <pre> to display a block of code with proper indentation
and formatting.

0:00:12 The <code> Element: <code>let x = 10;</code>

The <br> Element: Used to insert a line break within text.
Line 1<br>Line 2 will display as:

Line 1
Line 2
The <pre> Element:

Preserves both spaces and line breaks in the text.

-----------------------------------------------
Video: Superscripts, subscripts, and small text
-----------------------------------------------
Note Time: Note Text:

0:00:03 Subscript Example: ₂ in H2O makes the "2" appear

lower.
Superscript Example: ² in 52 makes the "2" appear higher.
Small Text Example: <small>Copyright 2023</small> makes the text smaller to
indicate it's less important.

***********************************************
Chapter: 3. Understanding the Power of HTML
***********************************************

-----------------------------------------------
Video: Formatting HTML
-----------------------------------------------
Note Time: Note Text:

0:00:09 Comments:Syntax: <!-- Your comment here -->

-----------------------------------------------
Video: Weird characters
-----------------------------------------------
Note Time: Note Text:

0:00:03 What They Are: Special codes that represent characters.

Format: & followed by a code and a ;.
Examples:
< becomes <
> becomes >
& becomes &

0:00:03 A space that prevents text from breaking into a new line.
How to Use:
Example: Use between "Jen" and "Simmons" to keep the name on one line.

***********************************************
Chapter: 4. Linking and Navigation
***********************************************

-----------------------------------------------
Video: Links
-----------------------------------------------
Note Time: Note Text:

0:00:12 Which code should you use to guarantee that the words "Hocus
Pocus" are not split by a line break after "Hocus"?

Hocus&nbsp;Pocus

Correct

The non-breaking space character entity (&nbsp;) ensures that "Hocus Pocus" will
always display on the same line

0:00:22 Use the <a> tag (stands for "anchor").

Add the href attribute to specify where the link goes.
Example: <a href="https://example.com">This is a link</a>
Example with an image: <a href="https://example.com"><img src="image.jpg"
alt="Image"></a>

-----------------------------------------------
Video: URL paths
-----------------------------------------------
Note Time: Note Text:

0:00:31 Why Use Relative URLs?:

They help the browser find files without needing the full web address.

0:00:31 bsolute vs. Relative URLs:

Absolute URL: The full web address (e.g., http://www.awesomedogs.com).

Relative URL: A shorter path used within the same site (e.g., /blog/March-9.html).

-----------------------------------------------
Video: Navigation
-----------------------------------------------
Note Time: Note Text:

0:02:57 <nav> tag to wrap your main navigation link

***********************************************
Chapter: 5. Images and Graphics
***********************************************

-----------------------------------------------
Video: Images
-----------------------------------------------
Note Time: Note Text:

0:02:21 Image Element (<img>):

<img src="image.jpg" alt="Description" width="400" height="300">

-----------------------------------------------
Video: Image formats
-----------------------------------------------
Note Time: Note Text:

0:01:50 PNG (Portable Network Graphics):

Best for: Images requiring transparency and high-quality photographs.

0:01:50 JPG (Joint Photographic Experts Group):

Best for: Photographs.

0:01:50 SVG (Scalable Vector Graphics):

Best for: Logos, icons, and illustrations. Special Note: SVG
is a programming language for graphics and can be exported from tools like
Illustrator or Sketch.

0:01:50 GIF (Graphics Interchange Format):

Best for: Illustrations with large areas of a single color.
Special Use: Commonly used for animated images.

-----------------------------------------------
Video: Responsive width
-----------------------------------------------
Note Time: Note Text:

0:00:01 Using srcset: Instead of just specifying resolutions (like 1x,

2x), you can tell the browser the width of each image file
<img
src="image-480.jpg"
srcset="image-480.jpg 480w,
image-960.jpg 960w,
image-1440.jpg 1440w,
image-1920.jpg 1920w"
sizes="(max-width: 600px) 50vw,
(min-width: 601px) 100vw"
alt="Description of image">

0:00:01 Why Responsive Images?

High-resolution images look fantastic on large screens but can be slow to load and
waste data on smaller devices. <img
src="image-480.jpg"
srcset="image-480.jpg 480w,
image-960.jpg 960w,
image-1440.jpg 1440w,
image-1920.jpg 1920w"
alt="Description of image"
width="480"
height="360">

-----------------------------------------------
Video: Responsive pictures
-----------------------------------------------
Note Time: Note Text:

0:00:01 The <picture> element lets you specify different images for
different screen sizes or conditions.
<picture>
<source
media="(max-width: 599px)"
srcset="mobile-cropped.jpg 320w">
<source
media="(min-width: 600px)"
srcset="desktop-wide.jpg 600w">
<img
src="fallback.jpg"
alt="Description of the image">
</picture>

-----------------------------------------------
Video: Figure and figcaption
-----------------------------------------------
Note Time: Note Text:

0:00:02 Use the <figure> element to wrap both the image and its caption.
Inside the <figure>, place the image using the <img> tag.
Follow it with the <figcaption> tag, which contains the caption text.
<figure>
<img src="maggie.jpg" alt="Maggie the dog resting in a field">
<figcaption>Maggie the dog enjoys resting in a field after a long day of chasing
squirrels.</figcaption>
</figure>

***********************************************
Chapter: 6. Media
***********************************************

-----------------------------------------------
Video: Audio
-----------------------------------------------
Note Time: Note Text:

0:00:54 <audio controls>

<source src="audio-file.mp3" type="audio/mpeg">
<source src="audio-file.ogg" type="audio/ogg">
 Your browser does not support the audio element.
</audio>
Multiple Formats: You can list different audio formats (like MP3 and OGG)
Fallback Text: You can include fallback text for browsers that do not support the
audio element.(Your browser does not support the audio)

-----------------------------------------------
Video: Video
-----------------------------------------------
Note Time: Note Text:

0:04:04 same as audio

<video controls>
<source src="video-file.mp4" type="video/mp4">
<source src="video-file.webm" type="video/webm">
Your browser does not support the video element.
</video>

-----------------------------------------------
Video: Captions and subtitles
-----------------------------------------------
Note Time: Note Text:

0:03:37 File Format: Use WebVTT (.vtt) format, which is a plain text
file containing time codes and corresponding text.
<video controls>
<source src="video-file.mp4" type="video/mp4">
<track src="captions.vtt" kind="captions" srclang="en" label="English" default>
</video>

***********************************************
Chapter: 7. More Ways to Identify Content
***********************************************

-----------------------------------------------
Video: Supporting languages
-----------------------------------------------
Note Time: Note Text:

0:04:35 Character Encoding:

To ensure your content is displayed correctly, set the character encoding using the
meta tag in the <head> section:<meta charset="UTF-8">

0:04:35 lang Attribute:

Use the lang attribute to specify the language of your content.
dir Attribute:
The dir attribute indicates the text direction (left-to-right or right-to-left).

-----------------------------------------------
Video: Generic elements: div and span
-----------------------------------------------
Note Time: Note Text:
0:03:00 <div>: This is a block-level element. Use it to group larger
sections of content. <span>: This is an inline
element. Use it to target smaller pieces of content, like a word or phrase.

***********************************************
Chapter: 8. Putting It All Together
***********************************************

-----------------------------------------------
Video: Examples of putting it all together
-----------------------------------------------
Note Time: Note Text:

0:00:30 <main>: The main article.

<header>: The newspaper's title and date at the top.
<footer>: The small print and extra info at the bottom.
<article>: Each individual news story.
<section>: Different sections like sports, weather, and news.
<aside>: Side notes or advertisements.

***********************************************
Chapter: 9. Forms and Interactive Elements
***********************************************

-----------------------------------------------
Video: More on forms
-----------------------------------------------
Note Time: Note Text:

0:00:01 <form>
<label>Name:</label>
<input type="text" placeholder="Your Name">

<br>

<label>Email:</label>
<input type="email" placeholder="[email protected]" required>

<br>

<button type="submit">Submit</button>
</form>
The placeholder attribute provides a short hint or example of what to enter in an
input field. It appears as light gray text inside the input box and disappears when
the user starts typing.

0:00:02 Name Field: <input type="text" placeholder="Enter your name">

Email Field: <input type="email" required placeholder="Enter your email">
Submit Button: <button type="submit">Sign Up</button>

-----------------------------------------------
Video: Additional form element types
-----------------------------------------------
Note Time: Note Text:
0:01:07 Password: <input type="password">
Search: <input type="search">
Phone: <input type="tel">
Text Area: <textarea></textarea>
Date: <input type="date">
Color: <input type="color">
File: <input type="file" accept="image/*" multiple>
Checkbox: <input type="checkbox">
Radio: <input type="radio">
Select List: <select><option>Option 1</option><option>Option 2</option></select>

***********************************************
Chapter: 10. Structuring Tabular Data
***********************************************

-----------------------------------------------
Video: Building table rows
-----------------------------------------------
Note Time: Note Text:

0:02:45 <table>
<tr>
<th>Bird</th>
<th>Color</th>
<th>Diet</th>
</tr>
<tr>
<td>American Goldfinch</td>
<td>Yellow</td>
<td>Seeds</td>
</tr>
</table>