Professional Documents
Culture Documents
HTML5
HTML5
HTML (Hypertext Markup Language) code, we may be familiar with the fact that it is
used to create most web pages.
There have been several versions of HTML since the Web began, and the development of
the language is overseen by an organization called the W3C (World Wide Web
Consortium).
The last major version of HTML was HTML 4.01 in December 1999. In January 2000,
some stricter rules were added to HTML 4.01, creating what is known as XHTML
(Extensible Hypertext Markup Language)
Latest version is HTML5
HTML is widely used language on the web.
We can create a static website by HTML only.
Technically, HTML is a Markup language rather than a programming language.
Internet:- A global computer network providing a variety of information and
communication facilities, consisting of interconnected networks using standardized
communication protocols.
The World Wide Web (abbreviated WWW or the Web) is an information space where
documents and other web resources are identified by Uniform Resource Locators (URLs),
interlinked by hypertext links, and can be accessed via the Internet.
English scientist TimBerners-Lee invented the World Wide Web in 1989. He wrote the
first web browser computer program in 1990 while employed at CERN in Switzerland.
The Web browser was released outside CERN in 1991, first to other research institutions
starting in January 1991 and to the general public on the Internet in August 1991.
The World Wide Web has been central to the development of the Information Age and is
the primary tool billions of people use to interact on the Internet. Web pages are primarily
text documents formatted and annotated with Hypertext Markup Language (HTML).
WWW is another example of client/server computing. Each time a link is followed, the
client is requesting a document (or graphic or sound file) from a server (also called a Web
server) that's part of the World Wide Web that "serves" up the document.
The server uses a protocol called HTTP or Hyper Text Transport Protocol. The standard
for creating hypertext documents for the WWW is Hyper Text Markup Language or
HTML. HTML essentially codes plain text documents so they can be viewed on the Web.
Browsers: WWW Clients, or "Browser": The program we used to access the WWW is
known as a browser because it "browses" the WWW and requests these hypertext
documents. Browsers can be graphical, allows to see and hear the graphics and audio.
Uniform Resource Locators, or URLs: A Uniform Resource Locator, or URL is the
address of a document found on the WWW. Browser interprets the information in the
URL in order to connect to the proper Internet server and to retrieve your desired
document. Each time a click on a hyperlink in a WWW document instructs browser to
find the URL that's embedded within the hyperlink.
The elements in a URL: Protocol://server's address/filename
Tags: An HTML tag surrounds the content and apply
meaning to it. It is written between < and > brackets. The
two brackets and all of characters between them is known as
tags.
Elements: An HTML element is an individual component
of an HTML file. In an HTML file, everything written
within tags are termed as HTML elements.
The basic distinction between tags and elements is very
important to understand:
a tag is made up of a left - and right - angle bracket and
letters and numbers between those brackets, whereas
elements are the opening and closing tags plus anything
between the two tags.
<!Doctype html>
< html >
< head >
< title > Popular Websites: Google < /title >
< /head >
< body >
< h1 > About Google < /h1 >
< p > Google is best known for its search engine, although Google now
offers a number of other services. < /p >
< /body >
< /html >
Version Information - Doctype
A basic HTML page starts with the Document Type Declaration or doctype.
That is a way to inform the browser what type of document it is. The doctype
is always the first item at the top of any HTML file.
Talking about the past, we can say that the doctype declaration used to be
very unpleasant and difficult to remember.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
NOW IT IS DECLARED AS
<!Doctype html>
The <html> element
The <html> element follows the doctype information, which is used to inform the
browser that this is an HTML document. we can use the lang attribute with
the "en" value to specify that the document is in English
SYNTAX:
<!DOCTYPE HTML>
<html lang="en"> </html>
The <head> section
• The < head > element contains information about the document, which is not
displayed within the main page itself.
• The <head> element contains metadata (document title, character set, styles,
links, scripts), specific information about the web page that is not displayed to
the user.
• The <meta> element is used to specify the metadata to provide browsers and
search engines with technical information about the web page.
SYNTAX:
• <meta name="Author" content=“HTML">
To define the character encoding for the document, you need to set
the charset attribute with the "utf-8" value in nearly all cases. UTF-8 is the
default character encoding for HTML5.
<meta charset="utf-8">
<title> element to define the title of your document.
<title>HYPERTEXT MARKUP LANGUAGE</title>
The <link> tag sets the relationship between the current document and the
external resource. It is generally used to link to the external CSS stylesheet.
<link> elements should be placed in the <head> section of the document
(commonly before the closing </head> tag), and they can be used many times.
The <link> tag is empty, which means that the closing tag isn’t required. It
contains only attributes.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>link tag</h1>
<p>which is used to link css file.</p> </body> </html>
The <body> element
The < body > element holds the actual content of the page that is viewed in your
browser
The <body> of a document contains the content of the document. The content
may be presented by a user agent in different ways. E.g., the content can be text,
images, links, colors, graphics, etc.
Syntax:
<body> ... </body>
< html>
<head>
<meta charset = "utf-8">
<title>...</title>
</head>
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
The <header> element
Use the <header> element to define a header for the document or section. It
usually contains a logo, search bar, navigation links, etc.
Syntax:
<header></header>
The <nav> element
It defines a block of navigation links, either within the current document or
to other documents. Note, that not all links in the HTML document can be placed
inside the <nav> element; it can only include major navigation blocks.
The <article> element is used to define an independent, self-contained content
(articles, blog posts, comments, etc.). The content of the element has its meaning,
and it is easily differentiated from the rest of the webpage content.
Syntax:
<article> <p>Text of the article</p> </article>
The <section> element
The <section> element is used to group standalone sections within a webpage containing
logically connected content (news block, contact information, etc.).
<section>
<h1>Header</h1>
<p>Some paragraph for example</p>
</section>
<section>
<h2>Header 2</h2>
<p>Another paragraph for example.</p> </section>
<aside > element:
The HTML <aside> tag provides information about the main content. According to W3C
definition, the <aside> element represents content that forms the main textual flow of a document.
Tags over view
The six levels of heading tags < h1 > , < h2 > , < h3 > , < h4 > , < h5 > , and < h6 >
Paragraphs < p > , preformatted sections < pre > , line breaks < br / > , horizontal rule
</hr>
Presentational elements: < b > , < i > , < u > , < s > , < tt > , < sup > , < sub > , < strike > ,
< big > , < small > .
Phrase elements such as < em > , < strong > , < abbr > , < acronym > , < dfn > ,
< blockquote > , < q > ,< cite > , < code > , < kbd > , < var > , < samp > , and
< address >
meta tags <Doctype>,<title>,<link>,<style>
Lists such as unordered lists using < ul > and < li > , ordered lists using < ol > and < li > ,
and
definition lists using < dl > , < dt > , and < dd >
Editing elements such as < ins > and < del >
Grouping elements: < div > and < span >
<h1 > , < h2 > , < h3 > , <
h4 > , < h5 > , < h6 >
Basic Text
Formatting
< p > , < br / > , < pre >
White space and flow
There are three ways of how you can change the color of the text in HTML: using Hex color codes, HTML
color names or RGB values.
Hex Color Codes
A hex color code is a hex triplet, which represents three separate values defining the levels of the component
colors.
It is specified with a hexadecimal (hex) notation for a mixture of Red, Green, and Blue color values.
The lowest value that can be given to one of the light sources is 0 (hex 00). The highest value is 255 (hex
FF).
Hex values are written as six-digit numbers, starting with a # sign. Letters used in a hexadecimal digit may
be uppercase or lowercase.
For example, to specify white color you can write #FFFFFF or #ffffff.
rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color with a
value between 0 and 255.
This means that there are 256 x 256 x 256 = 16777216 possible colors!
For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest
value (255), and the other two (green and blue) are set to 0.
Another example, rgb(0, 255, 0) is displayed as green, because green is set to its
highest value (255), and the other two (red and blue) are set to 0.
For example, #ff0000 is displayed as red, because red is set to its highest value
(ff), and the other two (green and blue) are set to 00.
Another example, #00ff00 is displayed as green, because green is set to its highest
value (ff), and the other two (red and blue) are set to 00.
To display black, set all color parameters to 00, like this: #000000.
To display white, set all color parameters to ff, like this: #ffffff.
Example of the background-color property used with the "hex" value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #1c87c9;
color: #d5dce8;
padding: 22px;
}
</style>
</head>
<body>
<div>
<p>This is a text in grey, and the background is blue</p>
</div>
<p style="color:#8ebf42;"> This is a text in green</p>
</body>
Example of the background-color property used with the "RGB" value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color:rgb(25,25,112);
color: rgb(169,169,169);
padding: 22px;
}
</style>
</head>
<body>
<div>
<p>This is a text in grey, and the background is blue</p>
</div>
<p style="color:rgb(25,25,112);"> This is a text in blue</p>
</body>
Lists
Three types of lists in HTML:
Unordered lists , which are like lists of bullet points
Ordered lists , which use a sequence of numbers or letters instead of bullet points
Definition lists , which allow you to specify a term and its definition
Using the < ul > Element to Create Unordered Lists
Example:
< ul >
< li > Bullet point number one < /li >
< li > Bullet point number two < /li >
< li > Bullet point number three < /li >
< /ul >
Ordered list
In an ordered list, rather than prefixing each point with a bullet point, you can use
either numbers (1, 2, 3), letters (A, B, C), or Roman numerals (i, ii, iii) to prefix
the list item.
An ordered list is contained inside the < ol > element. Each item in the list should
then be nested inside the < ol > element and contained between opening < li > and
closing < /li > tags.
Example:
< ol >
< li > Point number one < /li >
< li > Point number two < /li >
< li > Point number three < /li >
< /ol >
Definition list
Definition lists are contained inside the < dl > element. The < dl > element then
contains alternating < dt > and < dd > elements. The content of the < dt > element
is the term we will be defining. The < dd > element contains the description of the
< dt > element.
Example
<dl >
< dt > Unordered List < /dt >
< dd > A list of bullet points. < /dd >
< dt > Ordered List < /dt >
< dd > An ordered list of points, such as a numbered set of steps. < /dd >
< dt > Definition List < /dt >
< dd > A list of terms and definitions. < /dd >
< /dl >
Nested list
Nested list will be numbered separately unless you specify otherwise using the start attribute. And
each new list should be placed inside a < li > element
Example:
< ol type=”I” >
< li > Item one < /li >
< li > Item two < /li >
< li > Item three < /li >
< li > Item four
< ol type=”i” >
< li > Item 4.1 < /li >
< li > Item 4.2 < /li >
< li > Item 4.3 < /li >
< /ol >
< /li >
Character Entities or Special Characters
alt
browsers.
Creating Buttons Using the < button > Element The < button > element is a more recent introduction that allows you to
specify what appears on a button between an opening < button > tag and a closing < /button > tag
Example:
< button type=”submit” > Submit < /button >
< br / > < br / >
< button type=”reset” ><b> Clear this form ,</b> I want to start again < /button >
< br / > < br / >
< button type=”button” > < img src=”submit.gif” alt=”submit” / > < /button
Checkboxes :Checkboxes are just like the little boxes on paper forms in which we can place a cross or tick. As with light
switches, they can be either on or off. When they are checked they are on — the user can simply toggle between on and
off positions by clicking the checkbox.
Example:
< input type=”checkbox” name=”chkSkills” value=”xhtml” / > XHTML < br / >
< input type=”checkbox” name=”chkSkills” value=”CSS” / > CSS < br / >
< input type=”checkbox” name=”chkSkills” value=”JavaScript” / > JavaScript < br / >
< input type=”checkbox” name=”chkSkills” value=”aspnet” / > ASP.Net < br / >
< input type=”checkbox” name=”chkSkills” value=”php” / > PHP
Radio Button Control When you have a group of radio buttons that share the same
name, only one of them can be selected. Once one radio button has been selected, if the
user clicks another option, the new option is selected and the old one deselected.
we should not use radio buttons for a single form control where the control indicates on
or off, because once a lone radio button has been selected it cannot be deselected again
Example:
<form action=”http://www.example.com/flights.aspx” name=”frmFlightBooking”
method=”get” >
Please select which class of travel you wish to fly: < br / >
< input type=”radio” name=”radClass” value=”First” / > First class < br / >
< input type=”radio” name=”radClass” value=”Business” / > Business class < br / >
< input type=”radio” name=”radClass” value=”Economy” / > Economy class < br / >
< /form >
Select Boxes :A drop - down select box allows users to select one item from a drop -
down menu. Drop - down select boxes can take up far less space than a group of radio
buttons.
Drop - down select boxes can also provide an alternative to single - line text input
controls where we want to limit the options that a user can enter.
A drop - down select box is contained by a < select > element, while each individual
option within that list is contained within an < option > element
Example:
< select name=”selColor” >
< option selected=”selected” value=”” > Select color < /option >
< option value=”red” > Red < /option >
< option value=”green” > Green < /option >
< option value=”blue” > Blue < /option >
< /select >
File Select Boxes: If we want to allow a user to upload a file to some web site from our computer, we will need to
use a file upload box , also known as a file select box.
Example:
< form action=”http://www.example.com/imageUpload.aspx” method=”post”
name=”fromImageUpload” enctype=”multipart/form-data” >
< input type=”file” name=”fileUpload” accept=”image/*” / >
< br / > < br / > < input type=”submit” value=”Submit” / >
< /form >
Hidden Controls :Sometimes we want to pass information between pages without the user seeing it; to do this, we
can use hidden form controls
Example:
<form action=”http://www.example.com/vote.aspx” method=”get” name=”fromVote” >
< input type=”hidden” name=”hidPageSentFrom” value=”home page” / >
< input type=”submit” value=”Click if this is your favorite page of our
site.” / >
< /form >
Creating Labels for Controls and the< label > Element: the < label > element carries an attribute called
for , which indicates the form control associated with the label. The value of the for attribute should be
the same as the value of the id attribute on the corresponding form control
Example:
< form action=”http://www.example.org/login.aspx” method=”post” name=”frmLogin” >
< table >
< tr >
< td > < label for=”Uname” > User name < /label > < /td >
< td > < input type=”text” id=”Uname” name=”txtUserName” / > < /td >
< /tr >
< tr >
< td > < label for=”Pwd” > Password < /label > < /td >
< td > < input type=”password” id=”Pwd” name=”pwdPassword” / > < /td >
< /tr >
< /table >
< /form >
Structuring Your Forms with < fieldset > and< legend > Elements:The < fieldset > element creates a
border around the group of form controls to show that theyare related.The < legend > element allows you
to specify a caption for the < fieldset > element, which acts as a title for the group of form controls.
When used, the < legend > element should always be the first child of the < fieldset > element.
Example:
<form>
<fieldset>
<legend>User Information:</legend>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">
</fieldset>
</form>