Module 2 HTML5
Outline
• Introduction to HTML
• Browsers and HTML
• Editor’s Offline and Online Tags
• Attribute and Elements
• Doctype Element
• Comments
• Headings
• Paragraphs and Formatting Text
• Lists and Links
• Images and Tables
Sample example of HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
!DOCTYPE html: Defines this document to be HTML5
html: The root element of an HTML page
head: The element contains meta information about the document
title: The element specifies a title for the document
body: The element contains the visible page content
h1: The element defines a large heading
p: The element defines a paragraph
Hyper Text Markup Language (HTML)
• Text formatting language used to develop Web Pages
• Used to create web pages
• Standard html-static web pages
• Contains Hyper Text (text, image or link)
• Markup language (tags) defines how web page will be displayed
How To Create HTML File
Step 1: Open Notepad (PC)
• Windows 8 or later:
• Open the Start Screen (the window symbol at the bottom left on your screen).
Type Notepad.
• Windows 7 or earlier:
• Open Start > Programs > Accessories > Notepad
How To Create HTML File
Step 2: Write Some HTML
• <!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
• Anything written in <> is known as a Tag.
How To Create HTML File
Step 3: Save the HTML Page
• Save the file on your computer. Select File > Save as in the Notepad menu.
• Name the file "[Link] or [Link]" (which is the preferred encoding for HTML files).
•
How To Create HTML File
Step 4: View the HTML Page in Your Browser
• Open the saved HTML file in your favorite browser (double click on the file, or right-
click - and choose "Open with").
• The result will look much like this:
STRUCTURE OF HTML
<html> Define start & end of document
<head> Header section of HTML page (JavaScript, styles, meta etc.)
<title>give any title</title> Title of HTML document
</head>
<body> Main part which defines what should be displayed on the browser
web page code
</body>
</html>
HTML TAGs
• TAGs are instructions that tell the browser to format a text instead of just showing it on the
screen.
• Begin with an open angle bracket (<) and
• End with a close angle bracket (>) i.e., <TAG>
• Types of TAGs :
– Paired Tags : Consists of a companion tag
– e.g. <HTML> </HTML>, <B> </B>
– Singular Tags : Does not have a companion tag
– e.g. <BR>, <HR>
• Attributes of a TAG :
• Additional information supplied to a tag
• e.g. <IMG SRC=“[Link]” ALIGN=TOP HEIGHT=30>
HTML TAGs
• Entire Webpage is enclosed within <HTML> </HTML> tags.
• <HTML> is divided into two parts :
– Head portion : Denoted by <HEAD> </HEAD>
– Body portion : Denoted by <BODY> </BODY>
• HEAD : Contains the header information for a document
– <TITLE> : Shows title of webpage in title bar of browser
– <SCRIPT> : Scripting language that can be used
• EXAMPLE
HTML TAGs
• BODY : <BODY> … </BODY>
• Contains contents (text, images, audio files, video files) to be displayed in a browser window.
• EXAMPLE
HTML TAGs
Attributes of <BODY> tag :
– BGCOLOR
– BACKGROUND
– TEXT
– LINK, ALINK, VLINK
• BGCOLOR :
– Specifies the background color
– Color name / equivalent hexadecimal number
– Default color : White
– e.g. < BODY BGCOLOR = yellow >
HTML TAGs
• BACKGROUD :
– Specifies the name of the image file that is used as the background
– e.g. < BODY BACKGROUND = “[Link]” >
• EXAMPLE
HTML TAGs
• TEXT :
– Sets the Text color
– Default color : Black
– e.g. < BODY TEXT = red >
• LINK, ALINK, VLINK :
– LINK : Specifies color of hyperlink.
• Default color : Blue
– ALINK : Specifies color of hyperlink that we are activating.
– VLINK : Specifies color of hyperlink that are visited.
• Default color : Red
• EXAMPLE
HTML Document Structure
<html>
<head>
<title>
The amazing art of Web Programming
</title>
</head>
<body>
A little bit of Hypertext
</body>
</html>
EXAMPLE
Formatting and Fonts
• <br> Break Tag :
– Break the line
– e.g. <body> hypertext <br> makes the world <br> go round </body>
• <i> … </i> Italic Tag :
– Format the text in Italic format
• <b> … </b> Bold Tag :
– Format the text in Bold format
Formatting and Fonts
• <tt> … </tt> Typewriter effect Tag :
– Format the text in typewriter effect
• <em> … </em> emphasis Tag :
– emphasis the text
• <blink> .. </blink> Blink Tag :
– Makes the text blink
– does not work in all browsers
Formatting and Fonts
• <sup> … </sup> Superscript Tag :
– Format the text in Superscript format
• <sub> … </sub> Subscript Tag :
– Format the text in Subscript format
•EXAMPLE
Aligning the Text
Align attribute
• Ex: <p align=“center”> centered Text </p>
• Ex: <h1 align=“right”> right aligned text </h1>
Commenting Codes
Comments : <!-- … -->
Ex: <!-- This is a complex part of the web page, it adds a border and several types of font -->
Color
• <body bgcolor= value>
• <font color= value>
• Values are based on RGB scheme, usually entered as hexadecimal numbers.
• Ex: <body bgcolor=“#800000”>
• Ex: <body text=“#FFFF00”>
• Ex: <font color=“yellow”>
Color
R G B Color produced
00 00 00 Black
FF 00 00 Bright Red
00 FF 00 Bright Green
00 00 FF Bright Blue
80 00 00 Dark Red
00 80 00 Dark Green
00 00 80 Dark Blue
FF FF 00 Bright Yellow
80 80 00 Brown
FF 00 FF Magenta
80 00 80 Indigo
00 80 80 Turquoise
80 80 80 Grey
FF FF FF White
Hyperlinks
• <a href=“URL”> The text link </a>
• To open selected link in a new window
• <a href=“URL” target=“_blank”> The text link </a>
• Links within already loaded page
<html>
<a name=“thetop”> Intro </a> <br>
This is a long document <br> <hr>
<a href=“#thetop”> Back to the Top </a>
</html>
Lists
Types of Lists :
– Unordered List (Bullets)
– Ordered List (Numbering)
– Definition List
Lists
• Unordered List :
• Starts with <ul> and ends with </ul>
• Each list item starts with <li>
• Attribute : TYPE: Specifies the type of the bullet.
– TYPE: fillround – solid round black bullet
– TYPE: square – solid square black bullet
– EXAMPLE
Lists
• Ordered List :
– Starts with <ol> and ends with </ol>
– Each list item starts with <li>
– Attributes :
• TYPE – Controls numbering scheme
• TYPE = “1” – numbers (1, 2, ….)
• TYPE = “A” – uppercase letters (A, B, ….)
• TYPE = “a” – lowercase letters (a, b, ….)
• TYPE = “I” – uppercase roman numerals (I, II, ….)
• TYPE = “i” – lowercase roman numerals (i, ii, ….)
– START – Alters the numbering sequence
– VALUE – Changes numbering sequence in middle of ordered list
•EXAMPLE
Lists
• Definition List :
– Starts with <dl> and ends with </dl>
– Consists of two parts:
• Definition Term : appears after tag <DT>
• Definition Description : appears after tag <DD>
• EXAMPLE
Tables
<table> : used to display table on web page. Show data in a tabular form.
<tr>: table row
<th> : table header
<td> : table data
•Main Attributes:
• Width: width of the table
• Border: border of the table
• Bgcolor: background color of the table
• Rowspan: merge rows
• Colspan: merge columns
Output
Output
Tables
Table structure
<html>
<table>
<tr>
<th> heading 1 </th>
<th> heading 2 </th>
</tr>
<tr>
<td> table item </td>
<td> and another </td>
</tr>
</table>
</html>
Tables
<tr>
• Table with properly defined headers: <th> Tube </th>
Example <td> 5 mins </td>
<html> <td> 8 mins </td>
<table border> <td> 10 mins </td>
<tr> </tr>
<th></th> <tr>
<th> Green Park </th> <th> Bus </th>
<th> Oxford Circus <td> 12 mins </td>
</th> <td> 14 mins </td>
<th> Euston </th> <td> 20 mins </td>
</tr> </tr>
</table>
</html>
Irregular Tables
• Example < tr>
<html>
<th> Tube </th>
<table border> <td align=center> 5 mins </td>
<tr> <td align=center> 8 mins </td>
<th rowspan=2></th> <td align=center> 10 mins
</td>
<th colspan=3> Tube
Station </th> </tr>
</tr> <tr>
<tr> <th> Bus </th>
<th> Green Park </th> <td> 12 mins </td>
<th> Oxford Circus</th> <td> 14 mins </td>
<th> Euston </th> <td> 20 mins </td>
</tr> </tr>
</table>
</html>
IMAGE IN HTML
•<img> tag is used to display image on web page.
•Example:
<img
src=“source of the image”
height=“20px”
width=“20px”
alt=“alternative text”/>
•align attribute: makes any accompanying text wrap around the image at various positions
(bottom/middle/top)
•<center> tag places the image to the middle of the page
IMAGE IN HTML
• Resizing an Image
– <img src=“[Link]” height=100 width=100>
– <img src=“[Link]” height=50% width=25%>
• If failed to load image, we can display message using alt
– <img src=“[Link]” alt=“Image Mypicture is not available”>
• Background images
– <body background=“[Link]”>
• Image may also be used as a link rather than a text
– <a href=“[Link]”> <img src=“[Link]”></a>
HTML FORMS
• Collect information from the user
• Making a form
– <form action=“[Link]” method=“post”>
– action: tells HTML where to send the collected information
– method: describes the way to send the information
HTML FORMS
• Types of input
– <input> tag: takes input from the user
• Ex: Enter your id <input name=“id” size=35>
• name: refers to name of the input
• size: entry box in characters
• <input type=“text” />
– default input type
• <input type=“password” />
– Asterisk is printed instead of text
HTML FORMS
Types of input
• <input type=“checkbox” />
– Toggled between checked or unchecked
• <input type=“radio” />
– From a group of radio buttons, only one can be selected
• <input type=“file” />
– Give a box to choose a file
• <input type=“submit” />
– Allows a form to be submitted
• <input type=“image”>
– Submits the form when selected
– Requires src attribute to specify an associated image
HTML FORMS
Types of input
• <input type=“button” />
– Makes a button available
• <input type=“reset” />
– Resets the form to its initial state when selected
• <input type=“hidden” />
– Allows hidden data to be passed along with the form
HTML FORMS
Types of input
• Text Areas
– Large text to write comments or a long message
• Ex: Leave your comments here :
– <textarea rows=“10” cols=“70”> Message: </textarea>
<field set> tag
The <fieldset> tag is used to group related elements in a form.
The <fieldset> tag draws a box around the related elements.
<embed> Tag
• The <embed> tag defines a container for an external resource, such as a web
page, a picture, a media player, or a plug-in application.
An embedded image
An embedded HTML page
HTML iframes
HTML Iframe is used to display a nested webpage (a webpage within a webpage).
The HTML <iframe> tag defines an inline frame, hence it is also called as an Inline
frame.
An HTML iframe embeds another document within the current HTML document in
the rectangular region.
Syntax
<iframe src="url" title="description">
</iframe>
HTML5 Structure
HTML4 HTML5
It is the fourth iteration of HTML. It is the fifth iteration of HTML – an update over HTML4.
Lengthy Doctype declaration: <!DOCTYPE HTML PUBLIC
“-//W3C//DTD HTML Simple Doctype declaration: <!DOCTYPE html>
4.01//EN” “[Link]
Comes with new HTML tags, including <audio>, <video>,
These tags are not available in HTML4.
<header>, <footer>, <canvas>, <article>, and more.
Multimedia supporting tags are not available. Multimedia supporting tags are available.
Difficult for developers to handle inaccurate syntax errors. It can handle inaccurate syntax errors.
HTML5 uses the web SQL database, web storage, and
To store important data on the client-side, the browser’s
application cache to store offline data that can be accessed
cache is used.
through HTML5’s JavaScript interface.
<div> tag is used for separating two parts. Does not require <div> tag.
Adding a figure with a caption to a document is not Adding a figure with a caption to a document is semantically
possible. possible.
HTML <!DOCTYPE> Declaration
• On the HTML document you have often seen that there is a <!DOCTYPE html>
declaration before the <html> tag. HTML <!DOCTYPE> tag is used to inform the
browser about the version of HTML used in the document. It is called as the
document type declaration (DTD).
• Technically <!DOCTYPE > is not a tag/element, it just an instruction to the
browser about the document type. It is a null element which does not contain
the closing tag, and must not include any content within it.
HTML <!DOCTYPE> Declaration
HTML5 <article> Tag
• The HTML <article> tag defines an independent self-contained content in a
document, page, application or a site.
• The article tag content makes sense on its own. It is independent and complete from
other content shown on the page. This tag is generally used on Forum post, Blog
post, News story, comment etc.
Output
<header> Tag
• 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
• You can have several <header> elements in one HTML document. However,
<header> cannot be placed within a <footer>, <address> or another
<header> element.
Output
HTML5<footer> Tag
• The <footer> tag 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
Output
HTML5 <nav> tag
• HTML <nav> tag is used to represent a section which contains navigation links,
either within current document or to another document.
• Examples of some navigation links are menu, table of contents, indexes, etc.
Output
<mark> tag
The <mark> tag defines text that should be marked or highlighted.
<figcaption> Tag
The <figcaption> tag defines a caption for a <figure> element.
<figcaption> Tag
The <figcaption> tag defines a caption for a <figure> element.
<dialog> Tag
The <dialog> tag defines a dialog box or subwindow.
The <dialog> element makes it easy to create popup dialogs and modals on a web page.
Open: Specifies that the dialog element is active and that the user can interact with it
<figcaption> Tag
The <figcaption> tag defines a caption for a <figure> element.
HTML5 <audio> Tag
• The <audio> tag is used to embed sound content in a document, such as music
or other audio streams.
• The <audio> tag contains one or more <source> tags with different audio
sources. The browser will choose the first source it supports.
• The text between the <audio> and </audio> tags will only be displayed in
browsers that do not support the <audio> element.
• There are three supported audio formats in HTML: MP3, WAV, and OGG.
Output
HTML5 <video> Tag
• The <video> tag is used to embed video content in a document, such as a movie
clip or other video streams.
• The <video> tag contains one or more <source> tags with different video
sources. The browser will choose the first source it supports.
• The text between the <video> and </video> tags will only be displayed in
browsers that do not support the <video> element.
• There are three supported video formats in HTML: MP4, WebM, and OGG.