2. HTML INTRODUCTION
Example Explained
<!DOCTYPE html>
<html>
•The DOCTYPE declaration defines the
document type
<body>
<h1>My First Heading</h1> •The text between <html> and </html>
describes the web page
<p>My first paragraph.</p> •The text between <body> and </body> is
the visible page content
</body>
•The text between <h1> and </h1> is
</html>
displayed as a heading
•The text between <p> and </p> is
displayed as a paragraph
3. WHAT IS HTML?
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is a markup language
A markup language is a set of markup tags
The tags describes document content
HTML documents contain HTML tags and
plain text
HTML documents are also called web pages
4. HTML TAGS
HTML markup tags are usually called HTML tags
HTML tags are keywords (tag names) surrounded
by angle brackets like <html>
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag
is the end tag
The end tag is written like the start tag, with
a forward slash before the tag name
Start and end tags are also called opening
tags and closing tags
5. HTML ELEMENTS
"HTML tags" and "HTML elements" are often
used to describe the same thing.
But strictly speaking, an HTML element is
everything between the start tag and the end
tag, including the tags:
HTML Element:
<p>This
is a paragraph.</p>
6. WEB BROWSERS
The purpose of a web browser (such as Google Chrome,
Internet Explorer, Firefox, Safari) is to read HTML
documents and display them as web pages. The browser
does not display the HTML tags, but uses the tags to
interpret the content of the page:
7. HTML VERSIONS
Since the early days of the web, there have been many versions of
HTML:
Version
HTML
HTML+
HTML 2.0
HTML 3.2
HTML 4.01
XHTML 1.0
HTML5
XHTML5
Year
1991
1993
1995
1997
1999
2000
2012
2013
8. THE <!DOCTYPE> DECLARATION
The <!DOCTYPE> declaration helps the browser to
display a web page correctly.
There are many different documents on the web,
and a browser can only display an HTML page
100% correctly if it knows the HTML type and
version used.
9. COMMON DECLARATIONS
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
12. HTML COMMENT <!-
The comment tag is used to insert comments in the source code.
Comments are not displayed in the browsers.
You can use comments to explain your code, which can help you
when you edit the source code at a later date. This is especially
useful if you have a lot of code.
It is also a good practice to use the comment tag to "hide" scripts
from browsers without support for it (so they don't show them as
plain text):
<!--This can be viewed in the HTML part of a
document-->
13. <!DOCTYPE>
The <!DOCTYPE> declaration must be the very first thing in your HTML document,
before the <html> tag.
The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web
browser about what version of HTML the page is written in.
In HTML 4.01, the <!DOCTYPE> declaration refers to a DTD, because HTML 4.01
was based on SGML. The DTD specifies the rules for the markup language, so that
the browsers render the content correctly.
HTML5 is not based on SGML, and therefore does not require a reference to a DTD.
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
14. <!DOCTYPE>
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
This DTD contains all HTML elements and attributes, but does NOT INCLUDE
presentational or deprecated elements (like font). Framesets are not allowed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
This DTD contains all HTML elements and attributes, INCLUDING presentational and
deprecated elements (like font). Framesets are not allowed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
15. <!DOCTYPE>
HTML 4.01 Frameset
This DTD is equal to HTML 4.01 Transitional, but allows the use of
frameset content.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
This DTD contains all HTML elements and attributes, but does NOT
INCLUDE presentational or deprecated elements (like font). Framesets
are not allowed. The markup must also be written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
16. <!DOCTYPE>
XHTML 1.0 Transitional
This DTD contains all HTML elements and attributes, INCLUDING
presentational and deprecated elements (like font). Framesets are not allowed.
The markup must also be written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset
content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for
example to provide ruby support for East-Asian languages).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
17. HTML EDITORS
Writing HTML Using Notepad or TextEdit
HTML can be edited by using a professional
HTML editor like:
Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor
However, for learning HTML we recommend a
text editor like Notepad (PC) or TextEdit (Mac).
We believe using a simple text editor is a good
way to learn HTML.
18. FOLLOW THE 4 STEPS BELOW TO CREATE YOUR
FIRST WEB PAGE WITH NOTEPAD.
19. STEP 1 : START NOTEPAD
To start Notepad go to:
Start
All Programs
Accessories
Notepad
20. STEP 2: EDIT YOUR HTML WITH NOTEPAD
Type your HTML code into your Notepad:
21. STEP 3: SAVE YOUR HTML
Select Save as.. in Notepad's file menu.
When you save an HTML file, you can use
either the .htm or the .html file extension.
There is no difference, it is entirely up to you.
Save the file in a folder that is easy to
remember.
22. STEP 4 : RUN THE HTML IN YOUR BROWSER
Start your web browser and open your html file
from the File, Open menu, or just browse the folder
and double-click your HTML file.
The result should look much like this:
32. DEFINITION TERM
Definition Description, Definition List, Definition
List
<dd>
<dl>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>
34. <OBJECT> TAG
The <object> tag defines an embedded object within an HTML
document. Use this element to embed multimedia (like audio, video,
Java applets, ActiveX, PDF, and Flash) in your web pages.
You can also use the <object> tag to embed another webpage into your
HTML document.
You can use the <param> tag to pass parameters to plugins that have
been embedded with the <object> tag.
<object width="400" height="400“
data="helloworld.swf"></object>
36. ANCHOR TAG
The <a> tag defines a hyperlink, which is
used to link from one page to another.
<a
href=“”>Clickme</a>
<a href=“”><img src=“”></a>
By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
38. <STYLE> TAG
The <style> tag is used to define style information for an
HTML document.
Inside the <style> element you specify how HTML elements
should render in a browser.
Each HTML document can contain multiple <style> tags.
40. <BLOCKQUOTE> TAG
The <blockquote> tag specifies a section that is quoted from
another source.
The <basefont> tag is not supported in HTML5. Use CSS instead.
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world’s leading
conservation organization, WWF works in 100 countries and is supported by 1.2
million members in the United States and close to 5 million globally.
</blockquote>
42. INPUT TAG
<input type=“text”>
<input type=“radio”>
<input type=“checkbox”>
<input type=“password”>
<textarea></textarea>
<select></select>
(allow=multiple) for list
Size to define number of fields
<input type=“file”>
(rows,cols)
43. FIELDSET
The <fieldset> tag is used to group related elements in a
form.
The <fieldset> tag draws a box around the related elements.
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
46. MAP TAG
The <map> tag is used to define a client-side image-map.
An image-map is an image with clickable areas.
The required name attribute of the <map> element is
associated with the <img>'s usemap attribute and creates a
relationship between the image and the map.
The <map> element contains a number of <area> elements,
that defines the clickable areas in the image map.