First developed by Tim Berners-Lee in 1990, HTML is short for HyperText Markup Language. HTML is used to create electronic documents (called pages) that are displayed on the World Wide Web. Each page contains a series of connections to other pages called hyperlinks.
3. Nested HTML Lists
List can be nested (lists inside lists):
Example
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
4. HTML Block and Inline
Elements
Block-level Elements
A block-level element always starts on a new
line and takes up the full width available
(stretches out to the left and right as far as it
can).
The <div></div> element is a block-level
element.
Examples of block-level elements:
<div>
<h1> - <h6>
<p>
<form>
</div>
5. Inline Elements
An inline element does not start on a new line and only takes up as much
width as necessary.
This is an inline <span> element inside a paragraph.
Examples of inline elements:
<span>
<a>
<img>
The <div> Element
The <div> element is often used as a container for other HTML elements.
The <div> element has no required attributes, but both style and class are
common.
When used together with CSS, the <div> element can be used to style
blocks of content:
Example
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
6. The <span> Element
The <span> element is often used as a
container for some text.
The <span> element has no required
attributes, but both style and class are
common.
When used together with CSS, the
<span> element can be used to style
parts of the text:
Example
<h1>My <span
style="color:red">Important</span>
Heading</h1>
7. HTML Grouping Tags
<div>
<span>
<div> Defines a section in a document
(block-level)
<span> Defines a section in a
document (inline)
8. <div> example
<!DOCTYPE html>
<html>
<body>
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city
in the United Kingdom, with a metropolitan area of over 13 million
inhabitants.</p>
<p>Standing on the River Thames, London has been a major
settlement for two millennia, its history going back to its founding by
the Romans, who named it Londinium.</p>
</div>
</body>
</html>
10. HTML Encoding (Character
Sets)
To display an HTML page correctly, a web browser must know which character set (character encoding)
to use.
What is Character Encoding?
ASCII was the first character encoding standard (also called character set). ASCII defined 127
different alphanumeric characters that could be used on the internet: numbers (0-9), English letters (A-
Z), and some special characters like ! $ + - ( ) @ < > .
ANSI (Windows-1252) was the original Windows character set, with support for 256 different character
codes.
ISO-8859-1 was the default character set for HTML 4. This character set also supported 256 different
character codes.
Because ANSI and ISO-8859-1 were so limited, the default character encoding was changed to UTF-8 in
HTML5.
UTF-8 (Unicode) covers almost all of the characters and symbols in the world.
All HTML 4 processors also support UTF-8 encoding.
The HTML charset Attribute
To display an HTML page correctly, a web browser must know the character set used in the page.
This is specified in the <meta> tag:
For HTML4:
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
For HTML5:
<meta charset="UTF-8">
11. Html video
How it Works
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.
12. Playing Videos in HTML
Before HTML5, a video could only be played in a browser with a plug-in
(like flash).
The HTML5 <video> element specifies a standard way to embed a
video in a web page.
To start a video automatically use the
autoplay attribute:
Example
<video width="320" height="240" autoplay>
<source src="movie.mp4"
type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
** The autoplay attribute does not work in
mobile devices like iPad and iPhone.
13. Audio on the Web
Before HTML5, audio files could only be played in a browser with a
plug-in (like flash).
The HTML5 <audio> element specifies a standard way to embed
audio in a web page.
HTML Audio - How It Works
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.
HTML Audio - Browser Support
In HTML5, there are 3 supported audio formats: MP3, Wav, and
Ogg.
14. HTML Forms
The <form> Element
The HTML <form> element defines a form
that is used to collect user input:
<form>
.
form elements
.
</form>
An HTML form contains form elements.
Form elements are different types of input
elements, like text fields, checkboxes, radio
buttons, submit buttons, and more.
15. The <input> Element
<input type="text">
<input type="radio">
<input type="submit">
<form>
First name:<br>
<input type="text"
name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
16. Form
Note that the form itself is not
visible.</p>
Also note that the default width of a
text input field is 20 characters.
18. The Submit Button
<input type="submit">
defines a button for submitting the
form data to a form-handler.
The form-handler is typically a server
page with a script for processing input
data.
The form-handler is specified in the
form's action attribute:
20. Grouping Form Data with
<fieldset>
The <fieldset> element is used to
group related data in a form.
The <legend> element defines a
caption for the <fieldset> element.