HTML 5 Basics Part Two

Html lists
 Unordered List—
<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
 Unordered List:
 Disc
 Circle
 Square
 None
Example:
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Ordered list
 type="1“
 type="A“
 type="a“
 type="I“
 type="i"
 <ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

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>

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>

 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>

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>

HTML Grouping Tags
 <div>
 <span>
<div> Defines a section in a document
(block-level)
<span> Defines a section in a
document (inline)

<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>

HTML Iframes
 <!DOCTYPE html>
 <html>
 <body>
 <iframe src="demo_iframe.htm"
height="200" width="300"></iframe>
 </body>
 </html>

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">

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.

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.

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.

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.

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>

Form
 Note that the form itself is not
visible.</p>
 Also note that the default width of a
text input field is 20 characters.

Radio Button Input
<form>
<input type="radio" name="gender"
value="male" checked> Male<br>
value="female"> Female<br>
value="other"> Other
</form>

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:

Submit
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname"
value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname"
value="Mouse"><br><br>
<input type="submit"
value="Submit">
</form>

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.

<form action="action_page.php">
<fieldset>
<legend>Personal
information:</legend>
First name:<br>
<input type="text" name="firstname"
value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname"
value="Mouse"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

HTML 5 Basics Part Two

Related slideshows

More Related Content

HTML 5 Basics Part Two