CIS385 Web Programming I

HTML

HyperText Markup Language

Objectives
Introduction
Basic Terms
HTML Elements
- DOCTYPE
- html
- head
- body
- title
- meta tags
- attributes
- headings
- paragraphs
- links
- Images
- Lists
- Tables
- Forms
Text Formatting
- Make Text Italic
- Create Small text
- Mark Text
- Add a Subscript
- Strong Tag
- Bold Text
- Highlight Text
- Show a Deleted Text
- How to Emphasize Text
- Add a Superscript

CSS

Cascade Style Sheets

JavaScript

JavaScript Scripting Language

HTML

HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.
Attributes are properties used to provide additional information about an element. The most common attributes include the id attribute

HTML Document

HTML Document
+-----------------------------------+
|                                   |
|   +----------------------------+  |
|   | Head Section               |  |
|   +----------------------------+  |
|                                   |
|   +----------------------------+  |
|   | Body Section               |  |
|   +----------------------------+  |
|                                   |
+-----------------------------------+

HTML Document Template

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
</head>

<body>

</body>

</html>

Elements

Elements are designators that define the structure and content of objects within a page.

HTML Elements parts

HTML ELement Parts

Block Type Elements vs. Inline Type Elements

Block Type Elements are those that take up the full width available on a web page, effectively blocking out any other elements from sitting next to it on the left or right.

Common block type elements: Paragraphs (<p>), Headers (<h1> through <h6>), Divisions (<div>), List and List Items (<ol>, <ul>, <li>), Forms (<form>)

Block Type Element Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Block Elements</title>
</head>
<body>
    <div>First</div><div>Second</div><div>Third</div>
</body>
</html>

Inline Type Elements are those who only take up as much width as is needed to display the contents of the element, thereby allowing other elements to be in line with the inline element.

Common inline type elements: Spans (<span>), Images (<img>), Anchors (<a>)

Inline Type Element Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline Element</title>
</head>
<body>
    <img src="http://placekitten.com/300/450" alt="Kitten 1">
    <img src="http://placekitten.com/300/500" alt="Kitten 2">
    <img src="http://placekitten.com/350/600" alt="Kitten 3">
</body>
</html>

HTML headings are used to define the titles and subtitles of sections within a webpage, creating a hierarchical structure for the content. There are six levels of headings, ranging from <h1> to <h6>, with <h1> representing the most important or main heading and <h6> representing the least important.

Key characteristics and uses of HTML headings:

Hierarchy and Structure: Headings establish a clear outline of the page's content, allowing users and search engines to understand the organization and relationships between different sections.
Semantic Meaning: Headings are not merely for visual styling; they convey semantic meaning about the importance and topic of the content they introduce.
Accessibility: Proper use of headings significantly improves accessibility, especially for users relying on screen readers, as they can navigate the page by heading structure.
Search Engine Optimization (SEO): Search engines utilize headings to index the structure and content of web pages, influencing how the page is understood and ranked.
Usage Guidelines::
- Typically, a page should have only one <h1> tag, representing the main title or topic of the page.
- Subsequent headings (<2> through <h6>) should be used to denote subtopics and further subdivisions, following a logical hierarchy (e.g., an <h3> should be a subtopic of an <h2>).
- Avoid skipping heading levels (e.g., going directly from <h1> to <h3> without an <h2>) as this can disrupt the semantic structure.
- The visual appearance of headings can be customized using CSS, but the choice of heading level should be based on content hierarchy, not just visual size.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Headings Example</title>
</head>
<body>
    <h1>Main Page Title</h1>
    <p>This is the introductory content of the page.</p>

    <h2>Section 1: Introduction</h2>
    <p>Details about the first section.</p>

    <h3>Subsection 1.1: Overview</h3>
    <p>More specific information within Subsection 1.1.</p>

    <h2>Section 2: Conclusion</h2>
    <p>Concluding remarks for the page.</p>
</body>
</html>

Main Page Title

This is the introductory content of the page.

Section 1: Introduction

Details about the first section.

Subsection 1.1: Overview

More specific information within Subsection 1.1.

Section 2: Conclusion

Concluding remarks for the page.

HTML paragraphs are fundamental elements used to structure and display text content on a web page. They are defined using the <p> tag, which is a block-level element.

The html <p> defines a paragraph. Note: Browsers automatically add some white space (a margin) before and after a paragraph.

The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening <p> and a closing </p> tag as shown below:

Example

<!DOCTYPE html>
<html>
<head>
    <title>Paragraphs Example</title>
</head>
<body>
    <h1>Paragraph Example</h1>
    <!-- Create 3 paragraphs -->
    Here is the first paragraph of text.
    Here is the second paragraph of text.
    Here is the third paragraph of text.

More paragraph Examples

<p>This is an example of an HTML paragraph.</p>

<p>This is a long paragraph. Lorem Ipsum is simply dummy text of the 
printing and typesetting industry. Lorem Ipsum has been the industry's 
standard dummy text ever since the 1500s, when an unknown printer took 
a galley of type and scrambled it to make a type specimen book. It has 
survived not only five centuries, but also the leap into electronic 
typesetting, remaining essentially unchanged. It was popularised in 
the 1960s with the release of Letraset sheets containing Lorem Ipsum 
passages, and more recently with desktop publishing software like Aldus 
PageMaker including versions of Lorem Ipsum.</p>

HTML Links, also known as hyperlinks, are defined by the <a> tag in HTML, which stands for "anchor." These links are essential for navigating between web pages and directing users to different sites, documents, or sections within the same page.

The basic attributes of the tag include href, title, and target, among others.

Example

<a href="https://www.company.com">Visit Company</a>

Note: A hyperlink can be represented by an image or any other HTML element, not just text.

By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue.
A visited link is underlined and purple.
An active link is underlined and red.

The Target Attribute of HTML Links

The target attribute in the tag specifies where to open the linked document. It controls whether the link opens in the same window, a new window, or a specific frame.

Attribute	Description
_blank	Opens the linked document in a new window or tab.
_self	Opens the linked document in the same frame or window as the link. (Default behavior)
_parent	Opens the linked document in the parent frame.
_top	Opens the linked document in the full body of the window.
framename	Opens the linked document in a specified frame. The frame’s name is specified in the attribute.

Different type of link HTML Elements

Element to Link	Source Code
Linking to an image	`<a href="my_image.jpg"><img src="my_image.jpg" alt="My Image"></a>`
Link to an Email Address	`<a href="mailto:someone@company.com">Send Email</a>`
Link to a Phone Number	`<a href="tel:+1234567890">Call Now</a>`
Using a button	`<a href="https://www.company.com"> <button>Visit Example</button> </a>`
Link to Download File	`<a href="file.pdf" download>Download File</a>`
Link Title	`<a href="https://www.company.com" title="Visit Example">Link Text</a>`

Relative URLs

A relative URL points to a file or directory in relation to the present file or directory.

A relative URL is a shorthand form of absolute URL. With this shorten version of the URL, various parts of the web site address such as the protocol, domain name, and directory is inferred by the browser based on the URL of the current document or through the location specified in the tag.

Different types of relative URLs are discussed for which a directory structure is considered:

Same Directory: To link or include, file from the same directory, the name of that file is used for example from ‘Application3’ directory to access ‘Page1.htm’ the URL will be: Page1.htm As the file is in the same folder so, no need to specify anything else.
Subdirectory: To link or include, file from sub directory, the name of sub directory and that file, separated by forward slash (‘/’) is used for example from ‘Application3’ directory to access ‘Picture1.gifd’ the URL will be: Media/Picture1.gif. For each additional subdirectory, the name of sub-directory followed by a forward slash is added so, in ‘Website’ directory to access ‘Picture1.gifd’ the URL will be: Application3/Media/Picture1.gif.
Parent Directory: To link to file in the parent directory, the ‘../’ or two dots followed by a forward slash character is used. For example from ‘Media’ directory to access ‘Page1.htm’ file the URL will be: ../page1.htm. For each parent directory, the '../' is added to go up another directory as illustrated.
From the Root: To access to file from the root directory then, the path starting with forward slash (‘/’) followed by the path to file is used. For example to access ‘Picture1.gif’ the URL is: /Website/Application3/Media/Picture1.gif

HTML attributes are special words or phrases used within the opening tag of an HTML element to provide additional information or modify its behavior and appearance. They essentially define the characteristics of an HTML element.

Key characteristics of HTML attributes:

Placement: Attributes are always placed within the opening tag of an HTML element.
Name/Value Pairs: Most attributes consist of a name and a corresponding value, separated by an equals sign (=) and with the value enclosed in single or double quotation marks.

Example

<elementname attribute_name="attribute_value">Content</elementname>

The HTML <img> tag is used to embed an image in web pages by linking them. It creates a placeholder for the image, defined by attributes like src, width, height, and alt, and does not require a closing tag.

There are two ways to insert the images into a webpage:

- By providing a full path or address (URL) to access an internet file.

- By providing the file path relative to the location of the current web page file.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Images</title>
</head>
<body>
    <img src="https://images.freeimages.com/images/large-previews/cf1/internet-1237126.jpg?fmt=webp&h=350" alt="Office image">
</body>

</html>

In this example:

The <img> tag is used to embed an image into the webpage.
src attribute: Specifies the source URL of the image, which in this example is https://images.freeimages.com/images/large-previews/cf1/internet-1237126.jpg?fmt=webp&h=350. The image is loaded from this URL when the webpage is accessed.
alt attribute: Provides alternative text for the image, "Office image," which describes the image content. If, for any reason, the image cannot be displayed, the text "GFG image" will be shown instead.

Various HTML `<img>` Tag Attributes

Attribute	Description
`src`	Specifies the path to the image file.
`alt`	Provides alternate text for the image, useful for accessibility and when the image cannot be displayed.
`crossorigin`	Allows importing images from third-party sites with cross-origin access, typically used with canvas.
`height`	Specifies the height of the image.
`width`	Specifies the width of the image.
`ismap`	Specifies an image as a server-side image map.
`loading`	Specifies whether the browser should defer image loading or load it immediately.
`longdesc`	Specifies a URL to a detailed description of the image.
`referrerpolicy`	Specifies which referrer information to use when fetching the image.
`sizes`	Specifies image sizes for different page layouts.
`srcset`	Specifies a list of image files to use in different situations, allowing for responsive images.
`usemap`	Specifies an image as a client-side image map.

Common Image Formats

	Abbreviation	File Type	Extension
1.	PNG	Portable Network Graphics.	.png
2.	JPEG	Joint Photographic Expert Group image	.jpg, .jpeg, .jfif, .pjpeg, .pjp
3.	SVG	Scalable Vector Graphics	.svg
4.	GIF	Graphics Interchange Format	.gif
5.	ICO	Microsoft Icon	.ico, .cur
6.	APNG	Animated Portable Network Graphics	.apng

How to optimize HTML Images Effectively

Optimize Image Sizes: Large images can slow down page loading times. Always optimize images for the web by compressing them and using appropriate file formats (JPEG for photos, PNG for graphics with fewer than 16 colors, and SVG for vector images).
Use Descriptive Alt Text: The alt attribute should clearly describe the image's content and purpose. This improves accessibility for screen reader users and acts as anchor text for a text-only browser.
Responsive Images: Use the srcset attribute to specify different images for different screen sizes and resolutions, helping ensure that your site is mobile-friendly.
Aspect Ratios: Maintain the natural aspect ratio of images unless specific design criteria require otherwise. Distorting images can result in poor visual aesthetics.
Legal Considerations: Only use images that you have created, purchased, or have the right to use. Copyright infringement can lead to legal issues and fines.

HTML lists organize information clearly on your website. They're perfect for step-by-step instructions, lists of ingredients, or ranking items. This improves readability and helps users to understand your content.

Types of HTML Lists

There are three types of lists in HTML:

Unordered Lists (<ul>): These lists are used for items that do not need to be in any specific order. The list items are typically marked with bullets.
Ordered Lists (<ol>): These lists are used when the order of the items is important. Each item in an ordered list is typically marked with numbers or letters.
Description Lists (<dl>): These lists are used to contain terms and their corresponding descriptions.

1. HTML Unordered Lists

An unordered list in HTML is used to group a set of list items that don't need to be in a specific order. The items in an unordered list are usually displayed with bullet points by default.

Syntax

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

Item 1
Item 2

Different Type Attributes in HTML Unordered List

Type	Description
`type="circle"`	This type will list the items with a white circle.
`type="square"`	This type will list the items with a square.

Examples

<ul type="circle">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

Item 1
Item 2

<ul type="squate">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

Item 1
Item 2

Unordered Lists Style Types using CSS

Here are some common list-style-type values that you can apply to unordered lists to change the bullet style.

Square Bullet Style
```
<ul style="list-style-type: square">
```
Circle Bullet Style
```
<ul style="list-style-type: circle">
```
Removing Bullets
```
<ul style="list-style-type: none">
```

Nested Unordered List

A nested unordered list is simply an unordered list (<ul>) inside another list item (<li>) of an existing unordered list. This is useful for representing hierarchical or grouped information, like categories and subcategories.

<ul>
    <li>Bread</li>
    <li>
        Coffee
        <ul>
            <li>Americano</li>
            <li>Cappuccino</li>
            <li>Macchiato</li>
            <li>Espresso</li>
            <li>Latte</li>
        </ul>
    </li>
    <li>Tea & Non-Coffee
        <ul type="square">
            <li>Green Tea</li>
            <li>Hot Chocolate</li>
            <li>Iced Tea</li>
        </ul>
    </li>
</ul>

Bread
Coffee
- Americano
- Cappuccino
- Macchiato
- Espresso
- Latte
Tea & Non-Coffee
- Green Tea
- Hot Chocolate
- Iced Tea

Creating an Horizontal Unordered List

Sometimes the unordered list may required to be displayed horizontally, such as in a navigation menu. This can be accomplished with the help of CSS.

<html>
<head>
    <title>HTML Horizontal Unordered List</title>
    <style>
        body {
            text-align: center;
        }

        ul {
            overflow: hidden;
            background-color: #1d6b0d;
            list-style-type: none;
        }

        li {
            float: left;
        }

        li a {
            text-decoration: none;
            color: white;
            padding: 0.5rem;
        }
    </style>
</head>
<body>
    <h3>HTML Horizontal Unordered List</h3>

    <ul>
        <li><a href="#html">HTML</a></li>
        <li><a href="#css">CSS</a></li>
        <li><a href="#javascript">JavaScript</a></li>
    </ul>
</body>
</html>

How to use Unordered Lists for Navigation

Unordered lists are often used for creating navigation menus on websites. They are great for displaying a list of links where the order of the items doesn't matter.

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Menu</title>
    <style>
        ul {
            list-style-type: none; 
            padding: 0;
        }
        li {
            display: inline; 
            margin-right: 20px;
        }
    </style>
</head>
<body>
    <h1>Website Navigation
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</body>
</html>

Website Navigation

Home
About
Contact

2. HTML Ordered Lists

An HTML Ordered List is created using the <ol> tag to display items in a specific sequence, typically numbered or alphabetically ordered. Each list item is defined using the <li> (list item) tag. Ordered lists are widely used for instructions, rankings, and step-by-step guides

Syntax

<ol>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Breads</li>
    <li>Butter</li>
</ol>

Milk
Eggs
Breads
Butter

Different Type Attributes in HTML Ordered List

Type	Description
`type="1"`	This type will list the items with numbers (default)
`type="A"`	This type will list the items in uppercase letters.
`type="a"`	This type will list the items in lowercase letters.
`type="I"`	This type will list the items with uppercase Roman numbers.
`type="i"`	This type will list the items with lowercase Roman numbers.

Ordered Lists Examples

<ol type="A">
    <li>Item 1</li>
    <li>Item 2</li>
</ol>

Item 1
Item 2

<ol type="a">
    <li>Item 1</li>
    <li>Item 2</li>
</ol>

Item 1
Item 2

<ol type="I">
    <li>Item 1</li>
    <li>Item 2</li>
</ol>

Item 1
Item 2

<ol type="i">
    <li>Item 1</li>
    <li>Item 2</li>
</ol>

Item 1
Item 2

How to Control List Ordering

To control list counting, use the 'start' attribute in the <ol> tag to set the starting number for the ordered list.

Example

This example we showcase an ordered list starting from the number 5, controlled by the “start” attribute within the <ol> tag, customizing list counting

<ol start="5">
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
</ol>

Item 5
Item 6
Item 7
Item 8

Nested Ordered Lists

Nested ordered lists use <ol> inside <li> tags to create sublists, making content more organized.

Example

In this example we are creating nested ordered list, listing programming languages with their respective frameworks as subitems

<ol>
    <li>
        JavaScript
        <ol>
            <li>React</li>
            <li>Angular</li>
            <li>Vue.js</li>
        </ol>
    </li>
    <li>
        Python
        <ol>
            <li>Django</li>
            <li>Flask</li>
            <li>Pyramid</li>
        </ol>
    </li>
</ol>

JavaScript
1. React
2. Angular
3. Vue.js
Python
1. Django
2. Flask
3. Pyramid

Revrse Order of Ordered Lists

The boolean reversed attribute reverses the order of the numbers, going from the largest number to the lowest number. The start attribute sets the starting value.

<ol reversed start="6">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ol>

Item 1
Item 2
Item 3
Item 4

3. HTML Description Lists

An HTML Description List is not as commonly used as unordered or ordered lists but serves an important purpose for displaying name-value pairs. This type of list is marked up using three tags: <dl>, <dt>, and <dd>.

<dl> (Description List): This tag defines the description list itself and acts as a container for the list items.
<dt> (Description Term): Represents a term or a name within the list./li>
<dd> (Description Details): Provides the description or definition of the term.

Syntax

<dl>
    <dt>Coffee</dt>
    <dd>A hot drink made from roasted coffee beans.</dd>
    <dt>Espresso</dt>
    <dd>Strong coffee brewed with steam through ground beans.</dd>
</dl>

HTML Description List Example

HTML: HyperText Markup Language
CSS: Cascading Style Sheets
JavaScript: Scripting language for Web pages

Uses Description Lists

Description lists are useful for web pages that require definitions or detailed explanations of terms. They help in creating organized, easy-to-read content for:

FAQs
Glossaries
Product descriptions
Technical specifications
Any content where terms need definitions

Example Nested Description List

<!DOCTYPE html>
<html>
<head>
    <title>Nested Description List</title>
</head>
<body>
    <h3>Technology Overview</h3>
    <dl>
        <dt>Hardware<dt>
        <dd>Physical devices</dd>
        <dd>
            <dl> <!-- Nested Description List for Hardware Types -->
                <dt>CPUs</dt>
                <dd>Processors</dd>
                <dt>GPUs</dt>
                <dd>Graphics</dd>
            </dl>
        </dd>
        <dt>Software</dt>
        <dd>Programs/Apps</dd>
        <dd>
            <dl> <!-- Nested Description List for Software Types -->
                <dt>System</dt>
                <dd>OS</dd>
                <dt>Application</dt>
                <dd>Tools</dd>
            </dl>
        </dd>
    </dl>
</body>
</html>

Hardware

Physical devices

CPUs: Processors
GPUs: Graphics

Software

Programs/Apps

System: OS
Application: Tools

HTML tables provide a structured way to organize information into rows and columns, making it easy for users to understand and navigate.

The HTML tables allow web developers to arrange data like text, images, links, other tables, etc. into rows and columns of cells.

An HTML table is created using the <table> tag. Inside the table, we use:

<tr>: Table Row
<th>: Table Header
<td>: Table Data

Each <tr> represents a row, and within each row, <th> and <td> tags represent the cells in that row, which can contain text, images, lists, or even another table.

Table Example

<!-- tables1.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Tables</title>
</head>
<body>
    <table>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>John</td>
            <td>Smith</td>
            <td>24</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Martinez</td>
            <td>32</td>
        </tr>
        <tr>
            <td>Peter</td>
            <td>Cetera</td>
            <td>41</td>
        </tr>
    </table>
</body>
</html>

Firstname	Lastname	Age
John	Smith	24
Mary	Martinez	32
Peter	Cetera	41

HTML Tables Tags

HTML Tag	DEscription
`<table>`	Defines the structure for organizing data in rows and columns within a web page.
`<tr>`	Represents a row within an HTML table containing individual cells.
`<th>`	Shows a table header cell that typically holds titles or headings.
`<td>`	Represents a standard data cell, holding content or data.
`<caption>`	Provides a title or description for the entire table.
`<thead>`	Defines the header section of a table, often containing column labels.
`<tbody>`	Represents the main content area of a table, separating it from the header or footer.
`<tfoot>`	Specifies the footer section of a table, typically holding summaries or totals.
`<col>`	Defines attributes for table columns that can be applied to multiple columns simultaneously.
`<colgroup>`	Groups together a set of columns in a table to which you can apply formatting or properties collectively.

Example 2

<!-- tables2.html -->
<!DOCTYPE html>
<html>
<body>
    <table>
        <tr>
            <th>Book Name</th>
            <th>Author Name</th>
            <th>Genre</th>
        </tr>
        <tr>
            <td>The Book Thief</td>
            <td>Markus Zusak</td>
            <td>Historical Fiction</td>
        </tr>
        <tr>
            <td>The Cruel Prince</td>
            <td>Holly Black</td>
            <td>Fantasy</td>
        </tr>
        <tr>
            <td>The Silent Patient</td>
            <td>Alex Michaelides</td>
            <td>Psychological Fiction</td>
        </tr>
    </table>
</body>

</html>

Book Name	Author Name	Genre
The Book Thief	Markus Zusak	Historical Fiction
The Cruel Prince	Holly Black	Fantasy
The Silent Patient	Alex Michaelides	Psychological Fiction

CIS385 Web Programming I

HTML

HyperText Markup Language

CSS

Cascade Style Sheets

JavaScript

JavaScript Scripting Language

Introduction

HTML

HTML Document

HTML Document Template

Elements

HTML Elements parts

Block Type Elements vs. Inline Type Elements

Block Type Element Example

Inline Type Element Example

HTML Module Objectives

Objectives

The <!DOCTYPE> Declaration

Example

The html element

Example

The body element

Example

The head element

Example

The title Element

Example

HTML meta tags

HTML headings

Key characteristics and uses of HTML headings:

Example

Main Page Title

Section 1: Introduction

Subsection 1.1: Overview

Section 2: Conclusion

The paragraph element

Example

More paragraph Examples

The link element

Example

The Target Attribute of HTML Links

Different type of link HTML Elements

Relative URLs

The HTML attributes

Key characteristics of HTML attributes:

Example

HTML Images

Example

In this example:

Various HTML <img> Tag Attributes

Common Image Formats

How to optimize HTML Images Effectively

The HTML lists

Types of HTML Lists

1. HTML Unordered Lists

Syntax

Different Type Attributes in HTML Unordered List

Examples

Unordered Lists Style Types using CSS

Nested Unordered List

Creating an Horizontal Unordered List

How to use Unordered Lists for Navigation

Website Navigation

2. HTML Ordered Lists

Syntax

Different Type Attributes in HTML Ordered List

Ordered Lists Examples

How to Control List Ordering

Example

Nested Ordered Lists

Example

Revrse Order of Ordered Lists

3. HTML Description Lists

Syntax

HTML Description List Example

Uses Description Lists

Example Nested Description List

The HTML table elements

Table Example

Various HTML `<img>` Tag Attributes