HTML 5
Uploaded by
yuvrajbabu669HTML 5
Uploaded by
yuvrajbabu669HTML 5
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
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
OUTPUT:
My First Heading
My first paragraph.
The <!DOCTYPE html> declaration defines that this document is an HTML5
document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the
visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists,
etc.
The <h1> element defines a large heading
The <p> element defines a paragraph
HTML Tables
• A table in HTML consists of table cells inside rows and columns.
• HTML tables are used to display data in rows and columns, like marks,
employee details, timetables, etc.
• <table>Defines a table
• <th>Defines a header cell in a table
• <tr>Defines a row in a table
• <td>Defines a cell in a table
• <caption>Defines a table caption
• <colgroup>Specifies a group of one or more columns in a table for formatting
• <col>Specifies column properties for each column within a <colgroup> element
• <thead>Groups the header content in a table
• <tbody>Groups the body content in a table
• <tfoot>Groups the footer content in a table
EXAMPLE
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>A basic HTML table</h2>
<table style="width:100%">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<p>To understand the example better, we have added borders to the table.</p>
</body>
</html>
OUTPUT
HTML Lists
• HTML also supports description lists.
• A description list is a list of terms, with a description of each term.
• HTML lists are used to group related items in an ordered or unordered way.
Types of HTML Lists
• There are three types of lists in HTML:
• Unordered List
• Ordered List
• Description List
HTML List Tags
<ul>Defines an unordered list
<ol>Defines an ordered list
<li>Defines a list item
<dl>Defines a description list
<dt>Defines a term in a description list
<dd>Describes the term in a description list
HTML Lists
• HTML also supports description lists.
• A description list is a list of terms, with a description of each term.
EXAMPLE
An unordered HTML list:
• Item
• Item
• Item
• Item
An ordered HTML list:
1. First item
2. Second item
3. Third item
4. Fourth item
Unordered HTML List
• An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
• The list items will be marked with bullets (small black circles) by default:
EXAMPLE:
<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
OUTPUT:
Ordered HTML List
• An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
• The list items will be marked with numbers by default:
EXAMPLE:
<!DOCTYPE html>
<html>
<body>
<h2>An ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
OUTPUT:
HTML Description Lists
• A description list is a list of terms, with a description of each term.
• The <dl> tag defines the description list, the <dt> tag defines the term (name), and
the <dd> tag describes each term:
EXAMPLE:
<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
OUTPUT:
HTML Image
• The HTML <img> tag is used to embed an image in a web page.
• Images are not technically inserted into a web page; images are linked to
web pages. The <img> tag creates a holding space for the referenced
image.
• The <img> tag is empty, it contains attributes only, and does not have a
closing tag.
• The <img> tag has two required attributes:
• src - Specifies the path to the image
• alt - Specifies an alternate text for the image
Syntax
<img src="url" alt="alternatetext">
<!DOCTYPE html>
<html>
<body>
<h2>Alternative text</h2>
<p>The alt attribute should reflect the image content, so users who cannot see the
image get an understanding of what the image contains:</p>
<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">
</body>
</html>
OUTPUT:
HTML Drag and Drop
The HTML Drag and Drop API enables an element to be dragged and dropped.
EXAMPLE:
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function dragstartHandler(ev) {
[Link]("text", [Link]);
}
function dragoverHandler(ev) {
[Link]();
}
function dropHandler(ev) {
[Link]();
const data = [Link]("text");
[Link]([Link](data));
}
</script>
</head>
<body>
<h1>Drag and Drop API</h1>
<p>Drag the W3Schools image into the rectangle:</p>
<div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>
<br>
<img id="img1" src="img_logo.gif" draggable="true" ondragstart="dragstartHandler(event)"
width="336" height="69">
</body>
</html>
OUTPUT:
HTML Audio
• The controls attribute adds audio controls, like play, pause, and volume.
• The <source> element allows you to specify alternative audio files which the browser
may choose from. The browser will use the first recognized format.
• The text between the <audio> and </audio> tags will only be displayed in browsers
that do not support the <audio> element.
<!DOCTYPE html>
<html>
<body>
<audio controls autoplay>
<source src="[Link]" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
HTML Video
• The controls attribute adds video controls, like play, pause, and volume.
• It is a good idea to always include width and height attributes. If height and width
are not set, the page might flicker while the video loads.
• The <source> element allows you to specify alternative video files which the
browser may choose from. The browser will use the first recognized format.
• The text between the <video> and </video> tags will only be displayed in browsers
that do not support the <video> element.
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
HTML Semantic Elements
• A semantic element clearly describes its meaning
to both the browser and the developer.
• Many web sites contain HTML code like: <div
id="nav"> <div class="header"> <div id="footer">
to indicate navigation, header, and footer.
• In HTML there are several semantic elements that
can be used to define different parts of a web
page:
Semantic Elements in HTML
<article> Defines independent, self-contained content
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content, like illustrations, diagrams,
photos, code listings, etc.
<footer> Defines a footer for a document or section
<header> Specifies a header for a document or section
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text
<nav> Defines navigation links
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
HTML <section> Element
• The <section> element defines a section in a document.
• According to W3C's HTML documentation: "A section is a
thematic grouping of content, typically with a heading."
Examples of where a <section> element can be used:
Chapters
Introduction
News items
Contact information
• A web page could normally be split into sections for
introduction, content, and contact information.
EXAMPLE
<!DOCTYPE html>
<html>
<body>
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on
issues regarding the conservation, research and restoration of the environment, formerly
named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF
originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the
London Zoo in the same year of the establishment of WWF.</p>
</section>
</body>
</html>
OUTPUT
HTML <article> Element
• The <article> element specifies independent, self-contained
content.
• An article should make sense on its own, and it should be
possible to distribute it independently from the rest of the
web site.
Examples of where the <article> element can be used:
Forum posts
Blog posts
User comments
Product cards
Newspaper articles
EXAMPLE
<!DOCTYPE html>
<html>
<body>
<h1>The article element</h1>
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser
today!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web
browser since January, 2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</body>
</html>
OUTPUT
HTML <header> Element
• The <header> element represents a container for
introductory content or a set of navigational links.
• A <header> element typically contains:
one or more heading elements (<h1> - <h6>)
logo or icon
authorship information
• Note: You can have several <header> elements in
one HTML document. However, <header> cannot
be placed within a <footer>, <address> or
another <header> element.
EXAMPLE
<!DOCTYPE html>
<html>
<body>
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
</body>
</html>
OUTPUT
HTML <footer> Element
• The <footer> element defines a footer for a document or
section.
• A <footer> element typically contains:
authorship information
copyright information
contact information
sitemap
back to top links
related documents
• You can have several <footer> elements in one document.
EXAMPLE
<!DOCTYPE html>
<html>
<body>
<footer>
<p>Author: Hege Refsnes</p>
<p><a
href="[Link]
</footer>
</body>
</html>
HTML <nav> Element
• The <nav> element defines a set of navigation links.
<!DOCTYPE html>
<html>
<body>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
</body>
</html>
HTML <aside> Element
• The <aside> element defines some content
aside from the content it is placed in (like a
sidebar).
• The <aside> content should be indirectly
related to the surrounding content.
EXAMPLE
<!DOCTYPE html>
<html>
<body>
<p>My family and I visited The Epcot center this summer. The weather
was nice, and Epcot was amazing! I had a great summer together with
my family!</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring
exciting attractions, international pavilions, award-winning fireworks
and seasonal special events.</p>
</aside>
</body>
</html>
OUTPUT
HTML <figure> and <figcaption> Elements
• The <figure> tag specifies self-contained
content, like illustrations, diagrams, photos,
code listings, etc.
• The <figcaption> tag defines a caption for
a <figure> element. The <figcaption> element
can be placed as the first or as the last child of
a <figure> element.
• The <img> element defines the actual
image/illustration.
EXAMPLE
<!DOCTYPE html>
<html>
<body>
<h2>Places to Visit</h2>
<p>Puglia's most famous sight is the unique conical houses
(Trulli) found in the area around Alberobello, a declared
UNESCO World Heritage Site.</p>
<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
</body>
</html>
OUTPUT