Html

HTML
Himanshu Kr. Singh
Umang Kedia

Introduction
 Stands for Hyper Text Markup Language
 Computer language used to create web pages
 HTML file = text file containing markup tags such
<p>
 Tags tell Web browser how to display a page
 Can have either *.htm or *.html file extension

Choosing Text Editor
 There are many different programs that you can use to
create web documents.
 HTML Editors enable users to create documents quickly
and easily by pushing a few buttons. Instead of entering all
of the HTML codes by hand.
 These programs will generate the HTML Source Code for
you.
 For this Course, we will focus on using the standard
Microsoft Windows text editors, Notepad.



HTML Page Creation/Editing
 Open Notepad or another text editor.
 At the top of the page type <html>.
 On the next line, indent five spaces and now add
the opening header tag: <head>.
 On the next line, indent ten spaces and type
<title> </title>.
 Go to the next line, indent five spaces from the
margin and insert the closing header tag:
</head>.

HTML Page Creation/Editing
 Five spaces in from the margin on the next line,
type<body>.
 Now drop down another line and type the closing
tag right below its mate: </body>.
 Finally, go to the next line and type </html>.
 In the File menu, choose Save As.
 In the Save as Type option box, choose All Files.
 Name the file template.htm.
 Click Save.

Creating a basic HTML doc
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document description goes here </p>
</body>
</html>

Page Components
 < DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN
"http: //www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd >
 First line of code
 Declaration of version of HTML
 <html>…</html>
 Container for the document
 <head>…</head>
 <title> Title of page </title>
 <body>…</body>
 Content of page

Page Components (Contd.)
 The HEAD of your document point to above
window part. The TITLE of your document appears
in the very top line of the user’s browser. If the
user chooses to “Bookmark” your page or save as
a “Favorite”; it is the TITLE that is added to the list.
 The text in your TITLE should be as descriptive as
possible because this is what many search
engines, on the internet, use for indexing your site.

 Tags are the elements that create the components
of a page
 Tags surrounded by angle brackets < >
 Usually come in pairs
• Example: Start tag <p> and end tag </p>
 Stuff between is called “element content”
 Tags are not case sensitive
• New standard is to use lower case
HTML Elements

HTML Basic Tags
The basic structure for all HTML documents is simple
and should include the following minimum elements
or tags:
 <html> - The main container for HTML pages
 <head> - The container for page header
information
 <title> - The title of the page
 <body> - The main body of the page

The <html> Element
 The <html> element is the containing element for the
whole HTML document. Each HTML document should
have one <html> and each document should end with
a closing </html> tag.
 Following two elements appear as direct children of an
<html> element:
1. <head>
2. <body>
 As such, start and end HTML tags enclose all the other
HTML tags you use to describe the Web page.

The <head> Element
 The <head> element is just a container for all
other header elements. It should be the first thing
to appear after the opening <html> tag.
Example:
<head>
<title>HTML Basic tags</title>
</head>

The <title> Element
 You should specify a title for every page that you write
inside the <title> element. This element is a child of the
<head> element). It is used in several ways:
 It displays at the very top of a browser window.
 It is used as the default name for a bookmark in browsers
such as IE and Netscape.
 Its is used by search engines that use its content to help
index pages.
 Therefore it is important to use a title that really describes
the content of your site. The <title> element should contain
only the text for the title and it may not contain any other
elements.

The <body> Element
 The <body> element appears after the <head>
element and contains the part of the Web page that
you actually see in the main browser window, which is
sometimes referred to as body content.
 A <body> element may contain anything from a couple
of paragraphs under a heading to more complicated
layouts containing forms and tables.
 Most of what you will be learning in this and the
following five chapters will be written between the
opening <body> tag and closing </body> tag.

The <meta> Element
 HTML lets you specify metadata - information about a document
rather than document content -in a variety of ways. The META
element can be used to include name/value pairs describing
properties of the HTML document, such as author, Expiry Date, a
list of key words, author etc.
 The <meta> tag is an empty element and so does not have a closing
tag, rather, <meta> tags carry information within attributes, so you
need a forward slash character at the end of the element.
 Metadata provided by using meta tag is a very important part of
the web. It can assist search engines in finding the best match
when a user performs a search. Search engines will often look at
any metadata attached to a page - especially keywords - and rank it
higher than another page with less relevant metadata, or with no
metadata at all

Attribute Description
Name Name for the property. Can
be anything. Examples
include, keywords,
description, author, revised,
generator etc.
content Specifies the property's
value.
http-equiv http-equiv can be used to
refresh the page or to set a
cookie. Values include
content-type, expires,
refresh and set-cookie.

The <meta> Element
 Specifying Keywords
 Document Description
 Document Revision date
 Setting Cookies
 Setting Author Name

The HTML Attributes
 Attributes are another important part of HTML markup. An
attribute is used to define the characteristics of an element
and is placed inside the element's opening tag. All attributes
are made up of two parts: a name and a value:
 The name is the property you want to set. For example, the
<font> element in the example carries an attribute whose
name is face, which you can use to indicate which typeface
you want the text to appear in.
 The value is what you want the value of the property to be.
The first example was supposed to use the Arial typeface, so
the value of the face attribute is Arial.

The HTML Attributes
 The value of the attribute should be put in double quotation
marks, and is separated from the name by the equals sign.
You can see that a color for the text has been specified as
well as the typeface in this <font> element:
<font face="arial" color="#CC0000">

Core Attributes
The four core attributes that can be
used on the majority of HTML elements
(although not all) are:
id title class style

The id Attribute
 The id attribute can be used to uniquely identify any
element within a page ( or style sheet ).
 If an element carries an id attribute as a unique identifier it
is possible to identify just that element and its content.
 If you have two elements of the same name within a Web
page (or style sheet), you can use the id attribute to
distinguish between elements that have the same name.
Example :
<p id="html">This para explains what is HTML</p>
<p id="css">This para explains what is Casecading Style
Sheet</p>

The title Attribute
 The title attribute gives a suggested title for the
element. They syntax for the title attribute is similar as
explained for id attribute:
 The behaviour of this attribute will depend upon the
element that carries it, although it is often displayed as
a tooltip or while the element is loading.
For example: <h4 title="Hello HTML!">Titled Heading
Tag Example</h4>

<class> and <style>
Attributes
 The class attribute is used to associate an element with
a style sheet, and specifies the class of element. The
class attribute is used to associate an element with a
style sheet, and specifies the class of element.
Example:
class="className1 className2 className3"
 The style attribute allows you to specify CSS rules
within the element.
Example: <p style="font-family:arial; color:#FF0000;”
>Some text...</p>

Attributes Options Functions
align right, left, center Horizontally aligns tags
valign top, middle,
bottom
Vertically aligns tags
within an HTML
element.
bgcolor numeric,
hexidecimal, RGB
values
Places a background
color behind an
element
background URL Places an background
image behind an
element

Attributes Options Functions
title User Defined Pop-up" title for your
elements.
width Numeric Value Specifies the width of
tables, images, or table
cells.
height Numeric value Specifies the height of
tables, images, or table
cells.
Background URL Places an background
image behind an element

Creating heading - <hx>
Any documents starts with a heading. You use different sizes for your
headings. HTML also have six levels of headings, which use the
elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying
any heading, browser adds one line before and after that heading.
Example:
<h1>This is heading 1</h1>

Creating Paragraph - <p>
The <p> element offers a way to structure your text.
Each paragraph of text should go in between an
opening <p> and closing </p> tag as shown below in
the example: <p>Here is a paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p align="left">This is left aligned.</p>
<p align="center">This is center aligned.</p>

Create Line Breaks <br />
Whenever you use the <br /> element, anything
following it starts on the next line. This tag is an example
of an empty element, where you do not need opening
and closing tags, as there is nothing to go in between
them.
Example:
Hello<br />
This is all about HTML<br />
Thanks<br />

The <center> Element
You can use <center> tag to put any content in the
center of the page or any table cell.
Example:
<p>This is not in the center.</p>
<center>
<p>This is in the center.</p>
</center>

Preserve Formatting
The <pre> Element
 Sometimes you want your text to follow the exact format of
how it is written in the HTML document. In those cases, you can
use the preformatted tag (<pre>).
 Any text between the opening <pre> tag and the closing </pre>
tag will preserve the formatting of the source document.
Example:
<pre>
This is an example of preserve formatting tags.
Wherever I will write it will
display as it is.
</pre>

Horizontal Rules - <hr />
Horizontal rules are used to visually break up sections of
a document. The <hr> tag creates a line from the current
position in the document to the right margin and breaks
the line accordingly.
Example:
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>

 Bold Text - The <b> Element:
<p>The following word uses a <b>
bold</b> typeface.</p>
 Italic Text - The <i> Element:
<p>The following word uses a
<i>italicized</i> typeface.</p>
 Underlined Text - The <u> Element:
<p>The following word uses a
<u>underlined</u> typeface.</p>

 Superscript Text - The <sup> Element:
<p>The following word uses a <sup>
superscript</sup> typeface.</p>
 Subscript Text - The <sub> Element:
<p>The following word uses a <sub>
subscript</sub> typeface.</p>
 Larger Text - The <big> Element:
<p>The following word uses a <big>big</big>
typeface.</p>
 Smaller Text - The <small> Element:
<p>The following word uses a <small>
small</small> typeface.</p>

 Emphasized Text - The <em> Element
<p>You <em>must</em> remember to close elements in
XHTML.</p>
 Strong Text - The <strong> Element:
<p>You <strong>must</strong> remember to close elements in
XHTML.</p>
 Text Abbreviation - The <abbr> Element:
<p>I have a friend called <abbr title="Abhishek">Abhy</abbr>.</p>
 Using Acronym - The <acronym> Element
<p>This chapter covers marking up text in <acronym
title="Extensible Hypertext Markup
Language">XHTML</acronym>.</p>

 Citations - The <cite> Element
<p>This HTML Tutorial is derived from <cite>World Wide Web Standard
for HTML</cite>.</p>
 Computer Code - The <code> Element :
<h1> <code>This is inside code element</code></h1 >
 Keyboard Text - The <kbd> Element :
<h1> <kbd>This is inside kbd element</kbd></h1>
 Program Output - The <samp> Element :
<p>Result produced by the program is <samp>Hello
World</samp></p>
 Addresses - The <address> Element :
<address>304, Menna Colony, Hyderabad -
INDIA, 500032</address>

Comparison
Block-level elements
 Block-level elements appear
on the screen as if they have a
carriage return or line break
before and after them
 <p>, <h1>, <h2>, <h3>, <h4>,
<h5>, <h6>, <ul>, <ol>, <dl>,
<pre>, <hr />, <blockquote>,
and <address>
Inline elements
 Inline elements can appear
within sentences and do not
have to appear on a new line
of their own .
 <b>, <i>, <u>, <em>, <strong>,
<sup>, <sub>, <big>, <small>,
<li>, <code>, <cite>,

 Comments are the piece of code which is ignored by
any web browser. It is good practice to comment your
code, especially in complex documents, to indicate
sections of a document, and any other notes to anyone
looking at the code.
 Comments help you and others understand your code.
 HTML Comment lines are indicated by the special
beginning tag  placed at the
beginning and end of EVERY line to be treated as a
comment.

 Given line is a valid comment in HTML

 But following line is not a valid comment and will be
displayed by the browser. This is because there is a space
between the left angle bracket and the exclamation
mark.
< !-- This is commented out -->

Using Comment tag
There are few browsers who supports <comment>
tag to comment a part of code.
Example:
<p>This is <comment>not</comment> Internet
Explorer.</p>

HTML Fonts
 Font face and color depends entirely on the computer and
browser that is being used to view your page. But the <font>
tag is used to add style, size, and color to the text on your
site. You can use a <basefont> tag to set all of your text to
the same size, face, and color.
 The font tag is having three attributes called size, color, and
face to customize your fonts.
 To change any of the font attributes at any time within your
page, simply use the <font> tag. The text that follows will
remain changed until you close with the </font> tag

The <basefont> Element
The <basefont> element is supposed to set a default
font size, color, and typeface for any parts of the
document that are not otherwise contained within a
<font> element.
Note: You can then use the <font> elements to
override the <basefont> settings.

<basefont face="arial, verdana, sans-serif" size="2"
color="#ff0000">
<p>This is the page's default font.</p>
<h2>Example of the <basefont> Element</h2>
<p><font size="+2" color="darkgray"> Here is some
darkgray text two sizes larger</font></p>
<p><font face="courier" size="-1" color="#000000">
Here is a courier font, a size smaller, in
black</font></p>
Example

Grouping - The <div> and
<span> Elements
The <div> and <span> elements allow you to group
together several elements to create sections or
subsections of a page.
 The <div> element is used to group block-level
elements together
 The <span> element, on the other hand, can be used
to group inline elements only. So, if you had a part of
a sentence or paragraph you wanted to group
together you could use the <span> element.

The <div> Element
<div id="menu" align="middle" >
<a href="/index.htm">HOME</a> |
<a href="/about/contact_us.htm">CONTACT</a> |
<a href="/about/index.htm">ABOUT</a>
</div>
<div id="content" align="left" bgcolor="white">
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>

The <span> Element
<div><p>
This is the example of <span style = "color:green"> span
tag </span> and the <span style="color:purple">div
tag</span> along with CSS
</p></div>
 These tags are commonly used with CSS to allow you
to attach a style to a section of a page.

HTML Images
You will insert any image in your web page by using
<img> tag. Following is the simple syntax to use this
tag.
<img src="image URL“ attr_name = "attr_value“
...more attributes />

Image Attributes
 width: sets width of the image. This will have a value like 10 or
20%etc.
 height: sets height of the image. This will have a value like 10 or
20% etc.
 border: sets a border around the image. This will have a value like
1 or 2 etc.
 src: specifies URL of the image file.
 alt: this is an alternate text which will be displayed if image is
missing.
 align: this sets horizontal alignment of the image and takes value
either left, right or center.
 valign: this sets vertical alignment of the image and takes value
either top, bottom or center.

Image Attributes
 hspace: horizontal space around the image. This will have a value
like 10 or 20%etc.
 vspace: vertical space around the image. This will have a value like
10 or 20%etc.
 name: name of the image with in the document.
 id: id of the image with in the document.
 style: this will be used if you are using CSS.
 title: specifies a text title. The browser, perhaps flashing the title
when the mouse passes over the link.
 ismap and usemap: These attributes for the <img> tag tell the
browser that the image is a special mouse-selectable visual map of
one or more hyperlinks, commonly known as an image map.

<img src = "http://www.tutorialspoint.com
/images/html.gif" alt= "HTML Tutorial"
width="100" height="100" border="2"
align="right" title="HTML Tutorial" />
Example

Linking Documents –
The <a> Element
A link is specified using the <a> element. This
element is called anchor tag as well.
Anything between the opening <a> tag and the
closing </a> tag becomes part of the link and a user
can click that part to reach to the linked document.
<a href="Document URL" attr_name = "attr_value“
...more attributes

Anchor Attributes
Following are most frequently used attributes for <a> tag.
 href: specifies the URL of the target of a hyperlink. Its
value is any valid document URL, absolute or relative,
including a fragment identifier or a JavaScript code
fragment.
 target: specify where to display the contents of a
selected hyperlink. If set to "_blank" then a new
window will be opened to display the loaded page, if
set to "_top" or "_parent" then same window will be
used to display the loaded document, if set to "_self"
then loads the new page in current window. By default
its "_self".

Anchor Attributes
 name & id: attributes places a label within a
document. When that label is used in a link to that
document, it is the equivalent of telling the browser to
goto that label.
 event: attributes like onClick, onMouseOver etc. are
used to trigger any Javascript ot VBscript code.
 title: attribute lets you specify a title for the document
to which you are linking. The value of the attribute is
any string, enclosed in quotation marks. The browser
might use it when displaying the link, perhaps flashing
the title when the mouse passes over the link.

A Simple Example
<a href="http://www.tutorialspoint.com/"
target="_blank" >TP Home</a> |
<a href="http://www.amrood.com/" target="_self"
>AMROOD Home</a> |
<a href="http://www.change-images.com/"
target="_top" >Change Images Home</a>

Linking to a Page Section
 You can create a link to a particular section of a
page by using name attribute. Here we will create
three links with-in this page itself.
 First create a link to reach to the top of this page.
Here is the code we have used for the title
heading HTML Text Links
<h1>HTML Text Links <a name="top"></a></h1>
<a href="/html/html_text_links.htm#top">Go to the
Top</a>

Setting Link Colors
You can set colors of your links, active links and
visited links using link, alink and vlink attributes of
<body> tag. But it is recommended to use CSS to set
colors of links, visited links and active links.
<body alink="#FF0000" link="#900B09"
vlink="#900B09">
…………………
</body>

HTML Image Links
<a href="http://www.tutorialspoint.com/index.htm"
target="_self" >
<img src="/images/home.gif" alt="Tutorials Point
Home" border="0"/>
</a>

 Tables are very useful to arrange in HTML and
they are used very frequently by almost all web
developers.
 Tables are just like spread sheets and they are
made up of rows and columns.
 You will create a table in HTML/XHTML by using
<table> tag. Inside <table> element the table is
written out row by row.
 A row is contained inside a <tr> tag . which stands
for table row. And each cell is then written inside
the row element using a <td> tag . which stands
for table data.

<table border="1">
<tr>
<td>Row 1, Column 1</td>
</tr>
<tr>
</tr>
</table>

Table Heading
The <th> Element
 Table heading can be defined using <th> element.
This tag will be put to replace <td> tag which is
used to represent actual data. Normally you will
put your top row as table heading as shown
below, otherwise you can use <th> element at any
place.
 NOTE: Each cell must, however, have either a <td>
or a <th> element in order for the table to display
correctly even if that element is empty.

<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>

You will use colspan attribute if you want to merge two
or more columns into a single column. Similar way you
will use rowspan if you want to merge two or more rows
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>

Tables Backgrounds
You can set table background using of the following
two ways:
 Using bgcolor attribute - You can set background
color for whole table or just for one cell.
 Using background attribute - You can set
background image for whole table or just for one
cell.

Background Color
<table border="5" bordercolor="green" bgcolor="gray">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<td bgcolor="red">Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>

Background Images
<table border="1" background="/images/home.gif">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<td bgcolor="red">Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td colspan="3" background="/images/pattern1.gif">
Row 3 Cell 1
</td></tr>
</table>

Using Table Caption
The caption tags will serve as a title or explanation
and show up at the top of the table.
<table border="1">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, column 2/td>
</tr>
</table>

Table height and width
<table border="1" width="400" height="150">
<tr>
</tr>
<tr>
</tr>
</table>

HTML Lists
The most common HTML lists are ordered and
unordered lists:
Unordered Lists Ordered Lists
• This is one. 1. This is One.
• This is two. 2. This is Two.
• This is three. 3. This is Three.

HTML Unordered Lists
An unordered list starts with the <ul> tag. Each list item starts
with the <li> tag.
The list items are marked with bullets (typically small black
circles).
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
How the HTML code above looks in a browser?
• Coffee
• Milk

HTML Ordered Lists
An ordered list starts with the <ol> tag. Each list item starts
with the <li> tag.
The list items are marked with numbers.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
1.Coffee
2.Milk

HTML Description Lists
A description list is a list of terms/names, with a
description of each term/name.
The <dl> tag defines a description list.
The <dl> tag is used in conjunction with
<dt> (defines terms/names) and <dd> (describes each
term/name):
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

Coffee
- black hot drink
Milk
- white cold drink

Now You Know HTML,
What's Next?
This tutorial has taught you how to use HTML to
create your own web site.
HTML is the universal markup language for the Web.
HTML lets you format text, add graphics, create
links, input forms, frames and tables, etc., and save
it all in a text file that any browser can read and
display.
The key to HTML is the tags, which indicates what
content is coming up.

Now You Know HTML,
What's Next?
Learn CSS: CSS is used to control the style and layout of multiple
Web pages all at once.
With CSS, all formatting can be removed from the HTML document
and stored in a separate file.
CSS gives you total control of the layout, without messing up the
document content.
Learn JavaScript: JavaScript can make your web site more dynamic.
A static web site is nice when you just want to show flat content, but a
dynamic web site can react to events and allow user interaction.
JavaScript is the most popular scripting language on the internet and
it works with all major browsers.

 HTML Intro
 HTML Editors
 Basic Tags
 Attributes
 Formatting Tags
 Presentational
Tags
 Phrase tags
 Block/Inline
Elements
 Comments
What we have
learned ?
HTML Workshop !!

 HTML Fonts
 <basefont>
 <div> and
<span>
Elements
 HTML Images
 Linking
Documents
 Linking to a
Section of a
Doc.
 HTML Image
Links
 HTML Tables
What we have
learned ?
HTML Workshop !!

Himanshu: 9038617259
Umang: 9038068001

Html

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to Html (20)

Recently uploaded (20)

Html