HTML Course Notes

Module 1
Syntax

<p>. </p> tags

In between is element

DOM Tree
The DOM tree comes into play if you write CSS or JavaScript, or when your
developers do. The browser then uses the DOM
Use Codepen.io

Headlines
There are from h1 to H6. Each one has hirarcy and font size
<i> visual-only italics
<em> emphasis italics
Like <p> my <em> favorite </em> character from <i> sesame street </i> is Grover. </p>
Favorite streeting the meaning using <em> while seasom sttree <i> for name show

<storng> importance, seriousness, urgence.

<b> bold

Strong an em human language meaning

Lists
- Unordered lists
- Ordered lists
- Definition lists

<li>…… </li> and it puts a dot right before each item

<ul> element for unordered list

<ol> ordered list it has different wrapping element 1 item 2 item …..

To explain each item in the list ue

<dt> term </dt>
<dd>definition</dd>
<dd>additional definition</dd>
 <dt>second term </dt>
<dd>definition of second term</dd>

Quota
<blockquota>
<p> …… </p>

<cite>- jermey Keith</cite>

<blockquota>

Or
<p>
<q> </q> in to the text …. </p>

<p lang=”fr”>….. <q>……. </q></p>

- Inline elements. like q strong b I em

- Block- level elements like <blockquote , p, ul

If you want to highlight a short quote, <q> is great to use inside of a paragraph or other block-level element.
<blockquote> is for when you want something bigger, to really stand out.

Dates and times

<time>May 8</time
Or <time>may 8, 2025</time> or any format

<elementname attributename=” “ >

<time datetime=”2025-05-08”>may 8, 2025</time>

<time datetime=”7:00”>7:00 am</time>

Or <time datetime=”20:15”>8:15 pm</time>

<time datetime=”12:30”>half past noon</time>

We can include the fractions of seconds as well

 Time: hh-mm-ss.ddd+-hh:mm – can be used in different combinations

Codes:
<p>

We can write <code> {color:green;} </code> in our CSS, and it will apply to anything
marked up as an H4 element
<code>

</p>

Or using <code>&lt;H4></code> element …. It will not see it as H4 heading it is called HTML

entity

Html entities when type &lt; will get < sign when type &gt; will get > bigger than sign

Breaks

<br> line break, we can put it at the end of each line

<pre>

Subscripts, superscripts, and small texts

Subscripts : characters that are set below the text baseline like 2 in h2o.
<p>H₂O</p>
Superscripts like in mathematical formulas 5 2 =5 square <p>5²</p>

MathML is markup language for math

<small> 2019 fanacy company</small>. It will appear small text

3- Understanding the power of HTML

Using the developer tool to unders the codes and debug errors

Global attributes :
attributes that can be applied to any HTML element
 the class attribute: allow us to target all elements with that class in our CSS or javascript

<p class+”into>
This is the introduction.
</p>

Id is another popular one, it's similar to class but we're only allowed to use
unique names once in an entire HTML page. You can use an ID for targeting
CSS, but it's much more specific and that can be a problem.
<p class+”into” id+article-intro”> this is the introduction.
</p>

<blockquote contenteditable=”true”> edit this content to asdd your own quote.

</blockquote>

Lang the short code for the language

<p dir+”ltr”> this paragph is in English it flows from left to right. </p>

While <p dir+”rtl”‫ هذه الفقره‬............

</p>

There is a list of global attributes on MDM web docs

Like class, ID< land, DIR.

ARIA roles
Another type of attibutes
Html attributes that provide accessible information about that specific element

<he aria-label+”hello World”>

<div class=”grid” aria-hidden>
<span>H</span>
….
….

If it is used all thos loetter in separate containers are gone

Formatting HTML
 Add comments to code by typing less than,
<!—this is a comment that will be totally ignored

<h1> headline that’s ignored </h1>

-->

Writing elements in uppercase or lower case doesn’t matter

Some elements doesn’t have close tag

Weird characters

Entity. Character
&lt; <
&gt; >
Amp; &
&copy; cin circle
&trade. Tm
&star; star

<p> find out more on LinkedIn&nbsp;Learning.</p>

The beowser will know not to break the line

Links and Navigation

The anchor element

<a href=”page.html”>link</a>

Relative URL
Absolute URL
Whena website might be moved from a staging server to a production server

Navigation
<nav role=”navigation” aria-label+”main”>
<ul class+”navbar”>
<li><a href=”/”>home</a></li>
<li><a href=”/people”>people</a></li>
…..
</ul>
Or
<nav aria-label=”breadcrumb”>
<ol class=”breadcrumbs”>
<li><a href=”/”>home</a></li>
…..
…..

</ol>
</nav>

Or <footer>

</footer>

IMages
<img>
It attrbutes four
The source attribute shortned to SRC
<img src=”image.jpg”>
The alt attribute, ALT
<img src=”image.jpg”> alt=”black dog”> width=”400” height=”300”>

Image format
GIF
SVG – logos icons, etc it is vector
Jpg
Png

Different image size

Creating multiple image size and the browser decide which one is suitable

Srcset=”https://............2x,
Htttps://…… 3x,
………..4x”

To consider the width of viewport based on the size of the screen as well density
Use 480w = 480 px wide
960…
<picture>
 <source media=”(min-width:600px)”

<figure> for anything that appears as a figure illustrating something

<figcaption> for demonstration of a concept which needs a caption

MEDIA
Audio
<audio> controls src=”audio.mp3” loop autoplay> </audio>

Different formats

<Video> src=”….” controls</video>

h.264 codec currently has the widest support across the browsers looks like av1

ultimate codec attempte

real video, Sorenson, windows media, flv, h.263

switching bwetten different respolutions called adaptive bitrate streaming

captions: plain text file with a vtt extension

<track src=” …….”
Kind=”captions”>
Label=”englosh”>
To tell the broawesr that this is captions , label for the choice

Embedding
Like maps toolkit
Youtube

<iframe>

To add chapter divisions to videos

HTML doesn't have a chapter division mechanism built into it, but browsers recognize chapters from VTT
files.

Identity content

Lang=”en-us”
 The lang attributs:
Language
Script
Alphabet

Dir for direction

The charset attribute : it defines the alphabet or set of characters for the script language

ASCII limited to 128

Unicode over 137000

<div> or span. To divide

Div block-level element
Span inline element

Putting it all together

url
html file

- the doctype declaration it declare which era this html is from

- the head element to info the broswesr needs to know and it won’t be displayed on the
page

- the body element

- the meta element inside head

- - the link element
- The rel element
- The href attribute
- The script element

- Structuring content
Main
Header
Footer
Article
Section
Aside

Forms and interactive elements

<form action=”success.html”method=” “>

<label> name</label
<input>
Email
Input
Type
Placeholder
value
<button>sign up</button>

Text area element

Date
Color
File
Checkbox
Dropdown list
<fieldset>

Tabular data

<table>
Tr for table row
Th table header
Td for table data