Scribd
Upload
17 views91 pages

Introduction to HTML Basics

This document provides an overview of HTML, the standard markup language for creating web pages, including its elements, attributes, and structure. It covers various topics such as HTML headings, paragraphs, links, and text formatting, along with examples of how to implement them. Additionally, it explains how to view HTML source code and manage white spaces in HTML documents.

Uploaded by

10P2-16-បាន សុវណ្ណដា
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views91 pages

Introduction to HTML Basics

This document provides an overview of HTML, the standard markup language for creating web pages, including its elements, attributes, and structure. It covers various topics such as HTML headings, paragraphs, links, and text formatting, along with examples of how to implement them. Additionally, it explains how to view HTML source code and manage white spaces in HTML documents.

Uploaded by

10P2-16-បាន សុវណ្ណដា
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Basic HTML

Lecturer: SOK PISETH


Phone: 069 98 77 98
Content
• What is HTML • HTML tables
• HTML elements • HTML lists
• HTML attributes • HTML forms
• HTML heading • HTML iframe
• HTML paragraphs • HTML5 Audio
• HTML text formatting • HTML5 Video
• HTML links • Youtube
• HTML images • Google map
• PDF iframe
What is HTML?

• HTML is the standard markup language for creating Web pages.


• HTML stands for Hyper Text Markup Language
• 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 are represented by tags
• HTML tags label pieces of content such as "heading", "paragraph", "table", and so
on
• HTML is easy to learn
• Browsers do not display the HTML tags, but use them to render the content of
the page
Example: Creating First HTML Document
• 01 [Link]
• <!DOCTYPE html>
• <html>
• <head>
• <title>Page Title</title>
• </head>
• <body>
• <h1>This is a Heading</h1>
• <p>This is a paragraph.</p>
• </body>
• </html>
Explain
• The <!DOCTYPE html> declaration defines this document to be
HTML5
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the document
• The <title> element specifies a title for the document
• The <body> element contains the visible page content
• The <h1> element defines a large heading
• The <p> element defines a paragraph
How to View HTML Source
• View HTML Source Code:
• Right-click in an HTML page and select "View Page Source" (in Chrome)
or "View Source" (in Edge), or similar in other browsers. This will open a
window containing the HTML source code of the page.

• Inspect an HTML Element:


• Right-click on an element (or a blank area), and choose "Inspect" or
"Inspect Element" to see what elements are made up of (you will see
both the HTML and the CSS). You can also edit the HTML or CSS on-the-
fly in the Elements or Styles panel that opens.
What is an HTML Element?
• An HTML element is defined by a start tag, some content, and an end tag:
• <tagname>Content goes here...</tagname>
• The HTML element is everything from the start tag to the end tag:
• <h1>My First Heading</h1>
• <p>My first paragraph.</p>
Empty HTML Elements
• Empty elements (also called self-closing or void elements) are not
container tags — that means, you can not write <hr>some
content</hr> or <br>some content</br>.

• A typical example of an empty element, is the <br> element, which


represents a line break. Some other common empty elements are
<img>, <input>, <link>, <meta>, <hr>, etc.
Example : Empty HTML Elements
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <title>HTML Empty Elements</title>
• </head>
• <body>
• <p>This paragraph contains <br> a line break.</p>
• <img src="/examples/images/[Link]" alt="Cloudy Sky">
• <input type="text" name="username">
• </body>
• </html>
Writing Comments in HTML
• Comments are usually added with the purpose of making the source
code easier to understand. It may help other developer (or you in the
future when you edit the source code) to understand what you were
trying to do with the HTML. Comments are not displayed in the
browser.

• An HTML comment begins with <!--, and ends with -->, as shown in
the example below:
Example: HTML comment
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <title>Creating Horizontal Lines in HTML</title>
• </head>
• <body>
• <!-- This is an HTML comment -->
• <!-- This is a multi-line HTML comment
• that spans across more than one line -->
• <p>This is a normal piece of text.</p>
• <p><strong>Note:</strong> Comments are not displayed by the browsers.</p>
• </body>
• </html>
HTML Attributes
• All HTML elements can have attributes
• Attributes provide additional information about elements
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value"

• Example1
• <a href="[Link] Example</a>
• Example2
• <img src="img_girl.jpg">
Example: html attribute
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <title>Using HTML Attributes</title>
• </head>
• <body>
• <p><img src="/examples/images/[Link]" width="30" height="30" alt="Smiley"></p>
• <p><a href="[Link] title="Search Engine" target="_blank">Google</a></p>
• <p><abbr title="Hyper Text Markup Language">HTML</abbr></p>
• <p><input type="text" value="John Doe"></p>
• </body>
• </html>
HTML5 attribute
• There are several attributes in HTML5 that do not consist of
name/value pairs but consists of just name. Such attributes are called
Boolean attributes. Examples of some commonly used Boolean
attributes are checked, disabled, readonly, required, etc.
Example: html5 attribute
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <title>Using HTML Boolean Attributes</title>
• </head>
• <body>
• <p><input type="email" required></p>
• <p><input type="submit" value="Submit" disabled></p>
• <p><input type="checkbox" checked></p>
• <p><input type="text" value="Read only text" readonly></p>
• </body>
• </html>
General Purpose Attributes
• There are some attributes, such as id, title, class, style, etc. that you
can use on the majority of HTML elements. The following section
describes their usages.
• The id Attribute
• The id attribute is used to give a unique name or identifier to an
element within a document. This makes it easier to select the
element using CSS or JavaScript.
Example: id attribute
• <!DOCTYPE html>

• <html lang="en">

• <head>

• <title>HTML id Attribute</title>

• <style>

• #firstName{

• border: 1px solid red;

• }

• #container{

• background: #ccc;

• }

• #infoText{

• color: blue;

• }

• </style>

• </head>

• <body>

• <p><input type="text" id="firstName"></p>

• <div id="container">Some content</div>

• <p id="infoText">This is a paragraph.</p>

• </body>

• </html>
Html class attribute
• The class Attribute
• Like id attribute, the class attribute is also used to identify elements.
But unlike id, the class attribute does not have to be unique in the
document. This means you can apply the same class to multiple
elements in a document, as shown in the following example:
Example: class attribute
• <!DOCTYPE html>

• <html lang="en">

• <head>

• <title>HTML class Attribute</title>

• <style>

• .box{

• padding: 20px;

• border: 1px solid grey;

• }

• .highlight{

• background: yellow;

• }

• </style>

• </head>

• <body>

• <p><input type="text" class="highlight"></p>

• <div class="box highlight">Some content</div>

• <p class="highlight">This is a paragraph.</p>

• </body>

• </html>
The title Attribute
• The title attribute to is used to provide advisory text about an
element or its content. Try out the following example to understand
how this actually works.
Example: title attribute
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <title>HTML title Attribute</title>
• </head>
• <body>
• <p><abbr title="World Wide Web Consortium">W3C</abbr><p>
• <a href="/examples/images/[Link]" title="Click to view a larger image" target="_blank">
• <img src="/examples/images/[Link]" alt="kites">
• </a>
• <p><strong>Note:</strong> Place mouse pointer over the text and image to see how it works.</p>
• </body>
• </html>
The style Attribute
• The style attribute allows you to specify CSS styling rules such as
color, font, border, etc. directly within the element. Let's check out an
example to see how it works:
Example: style attribute
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <title>HTML style Attribute</title>
• </head>
• <body>
• <p style="color: blue;">This is a paragraph.</p>
• <p><img src="/examples/images/[Link]" style="width: 300px;" alt="Cloudy Sky"></p>
• <div style="border: 1px solid red;">Some content</div>
• </body>
• </html>
HTML headings
• Headings help in defining the hierarchy and the structure of the web page
content.
• HTML offers six levels of heading tags, <h1> through <h6>; the lower the heading
level number, the greater its importance — therefore <h1> tag defines the most
important heading, whereas the <h6> tag defines the least important heading in
the document.
• By default, browsers display headings in larger and bolder font than normal text.
Also, <h1> headings are displayed in largest font, whereas <h6> headings are
displayed in smallest font.
HTML Headings
• <!DOCTYPE html>
• <html>
• <body>

• <h1>This is heading 1</h1>


• <h2>This is heading 2</h2>
• <h3>This is heading 3</h3>
• <h4>This is heading 4</h4>
• <h5>This is heading 5</h5>
• <h6>This is heading 6</h6>

• </body>
• </html>
HTML Paragraphs
• Paragraph element is used to publish text on the web pages.

• Paragraphs are defined with the <p> tag. Paragraph tag is a very basic
and typically the first tag you will need to publish your text on the
web pages. Here's an example:
HTML Paragraphs
• <!DOCTYPE html>
• <html>
• <body>

• <p>This is a paragraph.</p>
• <p>This is another paragraph.</p>

• </body>
• </html>
Managing White Spaces
• Normally the browser will display the multiple spaces created inside
the HTML code by pressing the space-bar key or tab key on the
keyboard as a single space. Multiple line breaks created inside the
HTML code through pressing the enter key is also displayed as a single
space.

• The following paragraphs will be displayed in a single line without any


extra space:
Example: manage white space
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <title>White Space Collapsing in HTML</title>
• </head>
• <body>
• <p>This paragraph contains multiple spaces in the source code.</p>
• <p>
• This paragraph
• contains multiple tabs and line breaks
• in the source code.
• </p>
• </body>
• </html>
Example: manage white space
• Insert &nbsp; for creating extra consecutive spaces, while insert <br> tag for creating line breaks on
your web pages, as demonstrated in the following example:

• <!DOCTYPE html>
• <html lang="en">
• <head>
• <title>Preserving White Space in HTML</title>
• </head>
• <body>
• <p>This paragraph has multiple&nbsp;&nbsp;&nbsp;spaces.</p>
• <p>This paragraph has multiple<br><br>line<br><br><br>breaks.</p>
• </body>
• </html>
HTML Text Formatting
• HTML provides several tags that you can use to make some text on
your web pages to appear differently than normal text, for example,
you can use the tag <b> to make the text bold, tag <i> to make the
text italic, tag <mark> to highlight the text, tag <code> to display a
fragment of computer code, tags <ins> and <del> for marking
editorial insertions and deletions, and more.
• The following example demonstrates the most commonly used
formatting tags in action. Now, let's try this out to understand how
these tags basically work:
Example: html text formatting
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <title>Formatting Text in HTML</title>
• </head>
• <body>
• <p>This is <b>bold text</b>.</p>
• <p>This is <strong>strongly important text</strong>.</p>
• <p>This is <i>italic text</i>.</p>
• <p>This is <em>emphasized text</em>.</p>
• <p>This is <mark>highlighted text</mark>.</p>
• <p>This is <code>computer code</code>.</p>
• <p>This is <small>smaller text</small>.</p>
• <p>This is <sub>subscript</sub> and <sup>superscript</sup> text.</p>
• <p>This is <del>deleted text</del>.</p>
• <p>This is <ins>inserted text</ins>.</p><p>This is <b>bold text</b>.</p>
• </body>
• </html>
HTML Links
• A link or hyperlink is a connection from one web resource to another.
Links allow users to move seamlessly from one page to another, on
any server anywhere in the world.
• A link has two ends, called anchors. The link starts at the source
anchor and points to the destination anchor, which may be any web
resource, for example, an image, an audio or video clip, a PDF file, an
HTML document or an element within the document itself, and so on.
HTML links
Example: HTML Links
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <title>Creating Links in HTML</title>
• </head>
• <body>
• <p><a href="[Link] target="_blank">Google Search</a></p>
• <p>
• <a href="/examples/images/[Link]">
• <img src="/examples/images/[Link]" alt="kites">
• </a>
• </p>
• <p><a href="[Link]
• </body>
• </html>
Creating Bookmark Anchors
• You can also create bookmark anchors to allow users to jump to a
specific section of a web page. Bookmarks are especially helpful if you
have a very long web page.

• Creating bookmarks is a two-step process: first add the id attribute on


the element where you want to jump, then use that id attribute value
preceded by the hash sign (#) as the value of the href attribute of the
<a> tag, as shown in the following example:
Example: bookmark anchor
• <!DOCTYPE html>

• <html lang="en">

• <head>

• <title>Creating Bookmarks in HTML</title>

• <style>

• h2 + p{

• line-height: 75px; /* increase height between lines */

• }

• </style>

• </head>

• <body>

• <p><a href="#sectionA">Jump to Section A</a></p>

• <p><a href="#sectionB">Jump to Section B</a></p>

• <p><a href="#sectionC">Jump to Section C</a></p>

• <h2 id="sectionA">Section A</h2>

• <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula. Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit
tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>

• <h2 id="sectionB">Section B</h2>

• <p>Pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue in porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse tincidunt risus quis dolor fringilla blandit. Ut sed sapien at purus lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl semper tortor, vel sagittis lacus est consequat eros. Sed id pretium nisl. Curabitur
dolor nisl, laoreet vitae aliquam id. Fusce enim arcu, interdum vel metus dignissim, venenatis feugiat purus. Nulla posuere orci ut leo sodales, sed cursus dolor ornare. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam sit amet quam orci. Nulla sollicitudin lectus eget posuere venenatis. Sed vestibulum elementum sagittis. Quisque tristique tortor quis feugiat sollicitudin. Ut pellentesque luctus vulputate. Ut at odio ac erat blandit vehicula ut eget urna. In hac habitasse platea dictumst. Nullam ut iaculis nibh, eget eleifend elit.</p>

• <h2 id="sectionC">Section C</h2>

• <p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis dapibus orci. In dapibus velit blandit pharetra tincidunt. Quisque non sapien nec lacus condimentum facilisis ut iaculis enim. Sed viverra interdum bibendum. Donec ac sollicitudin dolor. Sed fringilla vitae lacus at rutrum. Phasellus congue vestibulum ligula sed [Link] arcu, interdum vel metus dignissim, venenatis feugiat purus. Nulla posuere orci ut leo sodales, sed cursus dolor ornare. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam sit amet quam orci. Nulla sollicitudin
lectus eget posuere venenatis. Sed vestibulum elementum sagittis. Quisque tristique tortor quis feugiat sollicitudin. Ut pellentesque luctus vulputate. Ut at odio ac erat blandit vehicula ut eget urna. In hac habitasse platea dictumst. Nullam ut iaculis nibh, eget eleifend elit. Curabitur ligula justo, dapibus non ligula tristique, dapibus tristique nulla. Aliquam pulvinar dapibus eros, rutrum pretium urna iaculis ut. Nam est est, tempus id egestas et, viverra in dui. Aliquam gravida orci tortor, sed congue justo ornare vel. Cras in quam consectetur eros varius scelerisque. Ut vel fermentum purus. Nullam interdum blandit turpis, id pellentesque massa feugiat at. Ut
sed lectus lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla rutrum, ante quis convallis ultricies, magna quam rhoncus erat, in lacinia libero magna a ipsum.</p>

• </body>

• </html>
Creating Download Links
• You can also create the file download link in exactly the same fashion
as placing text links. Just point the destination URL to the file you
want to be available for download.
• In the following example we've created the download links for ZIP,
PDF and JPG files.
• Note: When you click a link that points to a PDF or image file, the file
is not downloaded to your hard drive directly. It will only open the file
in your web browser. Further you can save or download it to your
hard drive on a permanent basis.
Example: download links
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <title>HTML Download Links</title>
• </head>
• <body>
• <p><a href="/examples/downloads/[Link]">Download Zip file</a></p>
• <p><a href="/examples/downloads/[Link]">Download PDF file</a></p>
• <p><a href="/examples/downloads/[Link]">Download Image file</a></p>
• </body>
• </html>
HTML Images
• Inserting Images into Web Pages
• Images enhance visual appearance of the web pages by making them
more interesting and colorful.

• The <img> tag is used to insert images in the HTML documents. It is


an empty element and contains attributes only. The syntax of the
<img> tag can be given with:
Example: image
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <title>Placing Images in HTML Documents</title>
• </head>
• <body>
• <img src="/examples/images/[Link]" alt="Flying Kites">
• <img src="/examples/images/[Link]" alt="Cloudy Sky">
• <img src="/examples/images/[Link]" alt="Hot Air Balloons">
• </body>
• </html>
Working with Image Maps
• The basic idea behind creating image map is to provide an easy way of
linking various parts of an image without dividing it into separate
image files. For example, a map of the world may have each country
hyperlinked to further information about that country.
Example: image map
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <title>Creating Image Maps in HTML</title>
• </head>
• <body>
• <img src="/examples/images/[Link]" usemap="#objects" alt="Objects">
• <map name="objects">
• <area shape="circle" coords="137,231,71" href="/examples/html/[Link]" alt="Clock">
• <area shape="poly" coords="363,146,273,302,452,300" href="/examples/html/[Link]" alt="Sign">
• <area shape="rect" coords="520,160,641,302" href="/examples/html/[Link]" alt="Book">
• </map>
• </body>
• </html>
Example: image map
HTML Tables
• HTML table allows you to arrange data into rows and columns. They
are commonly used to display tabular data like product listings,
customer's details, financial reports, and so on.
• You can create a table using the <table> element. Inside the <table>
element, you can use the <tr> elements to create rows, and to create
columns inside a row you can use the <td> elements. You can also
define a cell as a header for a group of table cells using the <th>
element.
Table: example
• <!DOCTYPE html>

• <html lang="en">

• <head>

• <title>Creating Tables in HTML</title>

• </head>

• <body>

• <h2>HTML Table (Default Style)</h2>

• <table>

• <tr>

• <th>No.</th>

• <th>Name</th>

• <th>Age</th>

• </tr>

• <tr>

• <td>1</td>

• <td>Peter Parker</td>

• <td>16</td>

• </tr>

• <tr>

• <td>2</td>

• <td>Clark Kent</td>

• <td>34</td>

• </tr>

• <tr>

• <td>3</td>

• <td>Harry Potter</td>

• <td>11</td>

• </tr>

• </table>

• </body>

• </html
Table: example2
• <!DOCTYPE html>

• <html lang="en">

• <head>

• <title>Adding Borders and Paddings to HTML Tables</title>

• <style>

• table, th, td {

• border: 1px solid black;

• }

• th, td {

• padding: 10px;

• }

• </style>

• </head>

• <body>

• <h2>Table with Separated Borders</h2>

• <table>

• <tr>

• <th>No.</th>

• <th>Name</th>

• <th>Age</th>

• </tr>

• <tr>

• <td>1</td>

• <td>Peter Parker</td>

• <td>16</td>

• </tr>

• <tr>

• <td>2</td>

• <td>Clark Kent</td>

• <td>34</td>

• </tr>

• <tr>

• <td>3</td>

• <td>Harry Potter</td>
Table: example3
• <!DOCTYPE html>

• <html lang="en">

• <head>

• <title>HTML Table with Collapsed Borders</title>

• <style>

• table {

• border-collapse: collapse;

• }

• table, th, td {

• border: 1px solid black;

• }

• th, td {

• padding: 10px;

• }

• th {

• text-align: left;

• }

• </style>

• </head>

• <body>

• <h2>Table with Collapsed Borders</h2>

• <table>

• <tr>

• <th>No.</th>

• <th>Name</th>

• <th>Age</th>

• </tr>

• <tr>

• <td>1</td>

• <td>Peter Parker</td>

• <td>16</td>

• </tr>

• <tr>

• <td>2</td>
Spanning Multiple Rows and Columns
• Spanning allow you to extend table rows and columns across multiple
other rows and columns.

• Normally, a table cell cannot pass over into the space below or above
another table cell. But, you can use the rowspan or colspan attributes
to span multiple rows or columns in a table.

• Let's try out the following example to understand how colspan


basically works:
Example: colspan
• <!DOCTYPE html>

• <html lang="en">

• <head>

• <title>Span Multiple Columns in an HTML Table</title>

• <style>

• table {

• width: 300px;

• border-collapse: collapse;

• }

• table, th, td {

• border: 1px solid black;

• }

• th, td {

• padding: 10px;

• }

• </style>

• </head>

• <body>

• <h2>Spanning Columns</h2>

• <table>

• <tr>

• <th>Name</th>

• <th colspan="2">Phone</th>

• </tr>

• <tr>

• <td>John Carter</td>

• <td>5550192</td>

• <td>5550152</td>

• </tr>

• </table>

• </body>

• </html>
Example: rowspan
• <!DOCTYPE html>

• <html lang="en">

• <head>

• <title>Span Multiple Rows in an HTML Table</title>

• <style>

• table {

• width: 300px;

• border-collapse: collapse;

• }

• table, th, td {

• border: 1px solid black;

• }

• th, td {

• padding: 10px;

• }

• </style>

• </head>

• <body>

• <h2>Spanning Rows</h2>

• <table>

• <tr>

• <th>Name:</th>

• <td>John Carter</td>

• </tr>

• <tr>

• <th rowspan="2">Phone:</th>

• <td>55577854</td>

• </tr>

• <tr>

• <td>55577855</td>

• </tr>

• </table>

• </body>

• </html>
HTML Lists
• HTML lists are used to present list of information in well formed and
semantic way. There are three different types of list in HTML and each
one has a specific purpose and meaning.
• Unordered list — Used to create a list of related items, in no
particular order.
• Ordered list — Used to create a list of related items, in a specific
order.
• Description list — Used to create a list of terms and their descriptions.
List
• Note: Inside a list item you can put text, images, links, line breaks, etc.
You can also place an entire list inside a list item to create the nested
list.
HTML Unordered Lists
• An unordered list created using the <ul> element, and each list item
starts with the <li> element.

• The list items in unordered lists are marked with bullets. Here's an
example:
Example: HTML Unordered List
• <!DOCTYPE html>

• <html lang="en">

• <head>

• <title>HTML Unordered List</title>

• </head>

• <body>

• <h2>HTML Unordered List</h2>

• <ul>

• <li>Chocolate Cake</li>

• <li>Black Forest Cake</li>

• <li>Pineapple Cake</li>

• </ul>

• <hr>

• <h2>HTML Nested Unordered List</h2>

• <ul>

• <li>Chocolate Cake

• <ul>

• <li>Chocolate Velvet Cake</li>

• <li>Chocolate Lava Cake</li>

• </ul>

• </li>

• <li>Black Forest Cake</li>

• <li>Pineapple Cake</li>

• </ul>

• </body>

• </html>
HTML Ordered Lists
• An ordered list created using the <ol> element, and each list item
starts with the <li> element. Ordered lists are used when the order of
the list's items is important.

• The list items in an ordered list are marked with numbers. Here's an
example:
Example: HTML Ordered List
• <!DOCTYPE html>

• <html lang="en">

• <head>

• <title>HTML Ordered List</title>

• </head>

• <body>

• <h2>HTML Ordered List</h2>

• <ol>

• <li>Fasten your seatbelt</li>

• <li>Starts the car's engine</li>

• <li>Look around and go</li>

• </ol>

• <hr>

• <h2>HTML Nested Ordered List</h2>

• <ol>

• <li>Fasten your seatbelt</li>

• <li>Starts the car's engine</li>

• <li>Look around and go

• <ol>

• <li>Check the blind spot</li>

• <li>Check surrounding for safety</li>

• </ol>

• </li>

• </ol>

• </body>

• </html>
HTML Description Lists
• A description list is a list of items with a description or definition of each item.

• The description list is created using <dl> element. The <dl> element is used in
conjunction with the <dt> element which specify a term, and the <dd> element
which specify the term's definition.

• Browsers usually render the definition lists by placing the terms and definitions in
separate lines, where the term's definitions are slightly indented. Here's an
example:
Example: Definition List
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <title>HTML Description or Definition List</title>
• </head>
• <body>
• <h2>HTML Definition List</h2>
• <dl>
• <dt>Bread</dt>
• <dd>A baked food made of flour.</dd>
• <dt>Coffee</dt>
• <dd>A drink made from roasted coffee beans.</dd>
• </dl>
• </body>
• </html>
HTML Forms
• What is HTML Form
• HTML Forms are required to collect different kinds of user inputs, such as contact
details like name, email address, phone numbers, or details like credit card
information, etc.
• Forms contain special elements called controls like input box, checkboxes, radio-
buttons, submit buttons, etc. Users generally complete a form by modifying its
controls e.g. entering text, selecting items, etc. and submitting this form to a web
server for further processing.

• The <form> tag is used to create an HTML form. Here's a simple example of a
login form:
Input Element
• This is the most commonly used element within HTML forms.
• It allows you to specify various types of user input fields, depending
on the type attribute. An input element can be of type text field,
password field, checkbox, radio button, submit button, reset button,
file select box, as well as several new input types introduced in
HTML5.
• The most frequently used input types are described below.
Text Fields
• Text fields are one line areas that allow the user to input text.

• Single-line text input controls are created using an <input> element,


whose type attribute has a value of text. Here's an example of a
single-line text input used to take username:
Example: input text
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <title>HTML Text Input Field</title>
• </head>
• <body>
• <form>
• <label for="user-name">Username:</label>
• <input type="text" name="username" id="user-name">
• </form>
• </body>
• </html>
Password Field
• Password fields are similar to text fields. The only difference is;
characters in a password field are masked, i.e. they are shown as
asterisks or dots. This is to prevent someone else from reading the
password on the screen. This is also a single-line text input controls
created using an <input> element whose type attribute has a value of
password.
• Here's an example of a single-line password input used to take user
password:
Example: password
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <title>HTML Password Input Field</title>
• </head>
• <body>
• <form>
• <label for="user-pwd">Password:</label>
• <input type="password" name="user-password" id="user-pwd">
• </form>
• </body>
• </html>
Radio Buttons
• Radio buttons are used to let the user select exactly one option from
a pre-defined set of options. It is created using an <input> element
whose type attribute has a value of radio.

• Here's an example of radio buttons that can be used to collect user's


gender information:
Example: radio button
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <title>HTML Radio Buttons</title>
• </head>
• <body>
• <form>
• <input type="radio" name="gender" value="male" id="male">
• <label for="male">Male</label>
• <input type="radio" name="gender" value="female" id="female">
• <label for="female">Female</label>
• </form>
• </body>
• </html>
Checkboxes
• Checkboxes allows the user to select one or more option from a pre-
defined set of options. It is created using an <input> element whose
type attribute has a value of checkbox.

• Here's an example of checkboxes that can be used to collect


information about user's hobbies:
Example: checkbox
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <title>HTML Checkboxes</title>
• </head>
• <body>
• <form>
• <input type="checkbox" name="sports" value="soccer" id="soccer">
• <label for="soccer">Soccer</label>
• <input type="checkbox" name="sports" value="cricket" id="cricket">
• <label for="cricket">Cricket</label>
• <input type="checkbox" name="sports" value="baseball" id="baseball">
• <label for="baseball">Baseball</label>
• </form>
• </body>
• </html>
File Select box
• The file fields allow a user to browse for a local file and send it as an
attachment with the form data. Web browsers such as Google
Chrome and Firefox render a file select input field with a Browse
button that enables the user to navigate the local hard drive and
select a file.

• This is also created using an <input> element, whose type attribute


value is set to file.
Example: file selectbox
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <title>HTML File Select box</title>
• </head>
• <body>
• <form>
• <label for="file-select">Upload:</label>
• <input type="file" name="upload" id="file-select">
• </form>
• </body>
• </html>
Textarea
• Textarea is a multiple-line text input control that allows a user to
enter more than one line of text. Multi-line text input controls are
created using an <textarea> element.
Example: text area
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <title>HTML Textarea</title>
• </head>
• <body>
• <form>
• <label for="address">Address:</label>
• <textarea rows="3" cols="30" name="address" id="address"></textarea>
• </form>
• </body>
• </html>
Select Boxes
• A select box is a dropdown list of options that allows user to select
one or more option from a pull-down list of options. Select box is
created using the <select> element and <option> element.

• The <option> elements within the <select> element define each list
item.
Example: select box
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <title>HTML Select Box</title>
• </head>
• <body>
• <form>
• <label for="city">City:</label>
• <select name="city" id="city">
• <option value="sydney">Sydney</option>
• <option value="melbourne">Melbourne</option>
• <option value="cromwell">Cromwell</option>
• </select>
• </form>
• </body>
• </html>
Submit and Reset Buttons
• A submit button is used to send the form data to a web server. When
submit button is clicked the form data is sent to the file specified in
the form's action attribute to process the submitted data.

• A reset button resets all the forms control to default values. Try out
the following example by typing your name in the text field, and click
on submit button to see it in action.
Example: submit and reset
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <title>HTML Submit and Reset Buttons</title>
• </head>
• <body>
• <form action="/examples/html/[Link]" method="post">
• <label for="first-name">First Name:</label>
• <input type="text" name="first-name" id="first-name">
• <input type="submit" value="Submit">
• <input type="reset" value="Reset">
• </form>
• </body>
• </html>
HTML iFrame
• What is iframe
• An iframe or inline frame is used to display external objects including
other web pages within a web page. An iframe pretty much acts like a
mini web browser within a web browser. Also, the content inside an
iframe exists entirely independent from the surrounding elements.
• The basic syntax for adding an iframe to a web page can be given
with:
Example: iframe
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <title>HTML iFrame</title>
• </head>
• <body>
• <iframe src="/examples/html/[Link]"></iframe>
• </body>
• </html>
HTML5 Audio
• Using the HTML5 audio Element
• The newly introduced HTML5 <audio> element provides a standard
way to embed audio in web pages. However, the audio element is
relatively new but it works in most of the modern web browsers.

• The following example simply inserts an audio into the HTML5


document, using the browser default set of controls, with one source
defined by the src attribute.
Example: audio 1
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <meta charset="utf-8">
• <title>Embedding Audio into an HTML Page</title>
• </head>
• <body>
• <audio controls="controls" src="/examples/audio/birds.mp3">
• Your browser does not support the HTML5 audio element.
• </audio>
• </body>
• </html>
Example: audio 2
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <meta charset="utf-8">
• <title>Specify Alternate Sources for audio Element in HTML</title>
• </head>
• <body>
• <audio controls="controls">
• <source src="/examples/audio/birds.mp3" type="audio/mpeg">
• <source src="/examples/audio/[Link]" type="audio/ogg">
• Your browser does not support the HTML5 audio element.
• </audio>
• </body>
• </html>
HTML5 Video
• Using the HTML5 video Element
• The newly introduced HTML5 <video> element provides a standard
way to embed video in web pages. However, the video element is
relatively new, but it works in most of the modern web browsers.

• The following example simply inserts a video into the HTML


document, using the browser default set of controls, with one source
defined by the src attribute.
Example: video 1
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <meta charset="utf-8">
• <title>Embedding Video into an HTML Page</title>
• </head>
• <body>
• <video controls="controls" src="/examples/video/shuttle.mp4">
• Your browser does not support the HTML5 Video element.
• </video>
• </body>
• </html>
Example: video 2
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <meta charset="utf-8">
• <title>Specify Alternate Sources for video Element in HTML</title>
• </head>
• <body>
• <video controls="controls">
• <source src="/examples/video/shuttle.mp4" type="video/mp4">
• <source src="/examples/video/[Link]" type="video/ogg">
• Your browser does not support the HTML5 Video element.
• </video>
• </body>
• </html>
Embedding the YouTube Videos
• This is the easiest and popular way to embed videos files in the web pages. Just
upload the video on YouTube and insert HTML code to display that video in your
web page.
• Step 1: Upload video
• Go to YouTube upload video page and follow the instructions to upload your
video.
• Step 2: Creating the HTML Code to embed the video
• When you open your uploaded video in YouTube you will see something like the
following figure at the bottom of the video. Browse and open your uploaded
video in YouTube. Now look for the share button which is located just below the
video as shown in the figure.
Example: youtube video
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <meta charset="utf-8">
• <title>Embedding a YouTube Video in an HTML Page</title>
• </head>
• <body>
• <iframe width="560" height="315" src="//[Link]/embed/YE7VzlLtp-4" frameborder="0"
allowfullscreen></iframe>
• <p>Source: <a href="[Link] target="_blank"
rel="nofollow">[Link]
• </body>
• </html>
Google map
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Embedding a YouTube Video in an HTML Page</title>
</head>
<body>
<iframe
src="[Link]
731319!3d11.576097484276872!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31095144cbdbf31
1%3A0x2588e1ac1787eb64!2sWat%20Phnom%20Daun%20Penh!5e0!3m2!1sen!2skh!4v1682737325805!5m2!
1sen!2skh" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-
referrer-when-downgrade"></iframe>
</body>
</html>
PDF document with iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe width="800" height="500" src="[Link]" frameborder="0"></iframe>
</body>
</html>
Summary
• What is HTML • HTML tables
• HTML elements • HTML lists
• HTML attributes • HTML forms
• HTML heading • HTML iframe
• HTML paragraphs • HTML5 Audio
• HTML text formatting • HTML5 Video
• HTML links • Youtube
• HTML images • Google map
• PDF iframe
The End

You might also like