More HTML

HTML
December 16, 2024

Working with HTML Lists

Unordered lists

Create unordered lists using the <ul> tags, then use <li> tags to populate the list with items.

				
					<ul>
    <li> Flour </li>
    <li> Baking Soda </li>	
    <li> Brown Sugar </li>
</ul>

This lists as bullet point as default

Ordered list

Create ordered lists using the <ol> tags, then use <li> tags to populate the list with items.

This lists as numbers as default. For nested list use

				
					<ol>
    <li> Flour </li>
    <li> Baking Soda </li>
    <li> Brown Sugar </li>
</ol>

The Em, Strong, B and I Elements

Emphasis

Use the elements for text that has a stressed emphasis relative to the surrounding text. Most browser will render it in italics, but you can change this via CSS.

				
					<p> “Just <em> do </em> it already!” </p>

“Just do it already!”

Idiomatic Text Element

It’s just like emphasis but simply code is change

				
					<p> “Just <i> do </i> it already!” </p>

“Just do it already!”

Strong

It’s just bolded the text. Use strong element for the text that has special significance.

Browser will display it as bold, but you can change this via CSS.

				
					<p> Whatever you do, <strong> do not let the cats out </strong></p>

Whatever you do, do not let the cats out.

Bold

Use the element to bring attention to text. Use it for text that is traditionally bolded. Only when there is not a more suitable element.

				
					<p> This is an <b> HTML </b> course. </p>

Nesting Elements

A tag has inside another tag is called nesting elements.

Superscript and Subscript

Superscript

For superscript we use “sup” and subscript we use “sub”

				
					<h1> 4<sup> th </sup> of July </h1>

4^th of July

Use the tags to designate text as superscript (raised baseline with smaller text)

Subscript

Use the tags to designate text as subscript (lowered baseline with smaller text)

				
					<p> Give Me Some H <sub> 2</sub> O</p>

Give Me Some H₂

Creating Links

Links have following points

Link text “what does the link say?”
Destination “where does the link take you do?”

				
					<a href = “https://ahmadwebx.com”?> Go to ahmadwebx </a>

Use the anchor element to create hyperlinks to other webpages and documents.

Attributes

Control an elements behavior
Go inside the opening tag
Attribute= “Value”
href=” google.com”
src=” dog.png”

Creating Images

Images

Create image elements using the <img> tag. Note that it does not have a closing tag.

The src attribute specifies the location of the image to be displayed

You can paste direct link in code.

				
					<img class="lazy lazy-hidden" src="//ahmadwebx.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src= “dog.png” alt = “cute puppy”><noscript><img src= “dog.png” alt = “cute puppy”></noscript>