HTML
The Mother Tongue of The Browser
Web Site
World Wide Web The World Wide Web (Web) is a network of
information resources. The Web relies on three mechanisms to
make these resources readily available to the widest possible audience: A uniform naming scheme for locating
resources on the Web (e.g., URLs). Protocols, for access to named resources over
the Web (e.g., HTTP). Hypertext, for easy navigation among
resources (e.g., HTML).
Web Programming Programming for the World Wide Web
involves bothserver-side programming, andclient-side (browser-side) programming.
The publishing language used by the World Wide Web is HTML.
Web Programming Servers make web documents,
which are specified in HTML, available on request to browsers.
Browsers display, to users, web documents which have been received from servers.
HTML Background HTML stands for “Hyper Text Mark-up
Language”.
The language used to design Web Page.
HTML was invented in 1990 by a scientist called Tim Berners-Lee. The purpose was to make it easier for scientists at different universities to gain access to each other's research documents.
HTML standards are organized by W3C : http://www.w3.org/MarkUp/
Hyper-Text-Markup-Language Hyper is the method by which you move
around on the web. Text is self-explanatory. Mark-up is what you do with the text. You
are marking up the text the same way you do in a text editing program with headings, bullets and bold text and so on.
Language is what HTML is. It uses many English words.
Simply, HTML is a Language, as it has code-words and syntax like any other language.
HTML HTML is used for creating static web
pages.
It is designed to display data & focus on how data looks.
HTML’s role on the web is to tell the browser how a document should appear.
HTML was the only language one could use to create Web pages.
HTML is about displaying information.
HTML Functionalities HTML gives authors the means to:
Publish online documents with headings, text, tables, lists, photos, etc.
Include spread-sheets, video clips, sound clips, and other applications directly in their documents.
Link information via hypertext links, at the click of a button.
Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.
HTML Versions HTML 2.0 was developed by the IETF's HTML
Working Group, which set the standard for core HTML features based upon current practice in 1994.
HTML 3.2 was W3C's first Recommendation for HTML on January 14, 1997.
HTML 4.0 was first released as a W3C Recommendation on December 18 ,1997.
HTML 4.01 is a revision of the HTML 4.0 became a W3C Recommendation December 24, 1999.
XHTML is a stricter and cleaner version of HTML.
HTML5 is the next major version of HTML.
Sample Webpage
Sample Webpage HTML Structure<html>
<head><title>First Demo</title>
</head><body>
<p>Welcome all</p><!-- The content of the
document --></body>
</html>
Title tags
Body tags
HTML Basic Structure HTML documents contain text and various tags
that define elements such as headings, paragraphs and Hyperlinks.
Each element describes how the document should be displayed.
An HTML document is divided into a head section
The title of the document appears in the head (along with other information about the document).
body section The content of the document appears in the body.
HTML Element Syntax
Each element has a number of properties associated with it: An HTML element starts with a start tag / opening
tag. An HTML element ends with an end tag / closing tag. The element content is everything between the start
and the end tag. Some HTML elements have empty content. Empty elements are closed in the start tag. Most HTML elements can have attributes. HTML documents consist of nested HTML elements.
Most elements can contain other HTML elements.
<start_of_tag attribute_name=“attribute value”>Content
</end_of_tag> HTML elements can have attributes. Attributes provide additional
information about the element. Attributes are always specified in the
start tag. Attributes come in name/value pairs
like: name="value“.
General Element Attributes Core Attributes
Not valid in base, head, html, meta, script, style, and title elements.
Attribute
Value Description
class classname Specifies a classname for an element
id id Specifies a unique id for an element
style style_definition
Specifies an inline style for an element
title text Specifies extra information about an element
HTML Document Elements Hierarchy
documentdocument
bodybodyheadhead
titletitle
formform imageimage tablestables stylestyle scriptscriptanchoranchor
buttonbutton labellabel legendlegend selectselectinputinput textareatextarea
metameta scriptscript stylestyle
h1-h6h1-h6pp
Head
Body
<meta> Tag Meta tags are used to store information usually relevant to
browsers and search engines. Define the author of the document as well as the content of the
webpage. provides additional information about the page; for example,
which character encoding the page uses, a summary of the page’s content, instructions to search engines about whether or not to index content, and so on.
<meta name="description" content="an html tutorial“ /> <meta name="keywords" content="html, webdesign,
javascript“ />
<meta name="author" content="bill gates“ />
<meta http-equiv="refresh" content="5; url=http://www.abc.com“ />
Example!
Inside <body> Section Text
Formatting Resizing Layout Listing
Images Inserting images (GIF &
jpg) Adding a link to an image
Links To local pages To pages at other sites To bookmarks
Background Colors Images
Tables
Frames
Forms
HTML Text The <font> tag will change the font.
<font color="red" face="arial" size="2">This local text looks different.
</font>
Text Format AppearanceTag Description
<b>text</b> writes text as bold
<i>text</i> writes text in italics
<u>text</u> writes underlined text
<strike>text</strike>
strikes a line through the text
<strong>text<strong>
usually makes text bold
Text Size Appearance
Tag Description
<big>text</big> increase the size by one
<small>text</small>
decrease the size by one
<h1>text</h1> writes text in biggest heading
<h6>text</h6> writes text in smallest heading
<hr/> Defines a horizontal line
Text LayoutTag Description
<p>text</p>Adds a paragraph break after the text. (2 linebreaks).
<p align="left|center|right"> text </p>
Left justify text in paragraph.
text<br/>Adds a single linebreak where the tag is.
<center>text</center> Center text.
<div align="left|center|right "> text</div>
Defines a section in a document.Note:dir can be used instead of align
HTML Lists HTML supports
ordered “Numbered” lists,unordered “Bulleted” lists anddefinition lists.
Numbered List
<ol start="5"><li>text</li><li>text</li>
</ol>
Attribute Value Description
start number Use styles instead.Specifies the start point in a
list
type NumberCapital letterSmall letterCapital Roman
#Small Roman
#
Use styles instead.Specifies which kind of bullet points will be used
<ol type=“A"><li>text</li><li>text</li>
</ol>
Bulleted Lists You have the following bullet
options: disc circle square
<ul type=“circle”> <li>text</li> <li>text</li> </ul>
<ul type="disc"><ul type="circle"><ul type="square">
Definition List The <dd> tag is used to describe an item
in a definition list. The <dd> tag is used in conjunction with
<dl> (defines the definition list) and <dt> (defines the item in the list).
<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd></dl>
Example!
HTML Images
Images types used in browsers are : .gif & .jpg <img src=“abc.gif">
<img src=“http://www.xyz.com/abc.gif">
Resizing<img src=“abc.gif" width="60" height="60">
<img src=“" width="" height="“ align=“” alt=“” hspace="" vspace="">
HTML Images
Alignment of ImagesYou can align images according to the text
around it Default, left, right, top, texttop, middle, center.
Alternative Text<img src=“logo.gif" alt="This is a text that
goes with the image">
Example!
HTML Links
Click <a href="http://www.yahoo.com">here</a> to go to yahoo.
Link targets<a href="http://www.yahoo.com" target="_blank">
Image link<a href="myfile.htm"><img src="rainbow.gif"></a>
<a href="url“ target=“”>Link text</a>
The target can be one of the following Values to identify where the link is loaded :
"_blank“ Loads the link into a new blank window. "_self“ Loads the link into the same window. (default)
HTML Links Link to email
<a href="mailto:youremailaddress">Email Me</a>
<a href="mailto:[email protected]?subject=SweetWords">Send Email</a>
HTML Links Link Within a Page
To link to an anchor you need to: Create a link pointing to the anchor Create the anchor itself.
Example!
<a name =“top”></a>Click <a href=“#top”>Top</a>
<a name =“chapter4”></a>Click <a href=“# chapter4”>here</a> to read chapter 4
<marquee> Tag <marquee attribute1 attribute2>moving text< / marquee
> (IE)Places a scrolling text marquee into the document.
Example!
Forms
Sample Form Design
HTML Forms
<form> Main Attributes action=address
Specifies where to send the form-data when a form is submitted.
method=post or method=get Specifies how to send form-data.
<form> <!-- Here goes form fields and HTML --></form>
Form Fields A <form> can contain <input> elements:
Text field Password field Hidden field Check box File Submit button Reset button Image button Radio button
Other elements: <textarea> <label> Drop-down menu
<input> Text Field Attributes size maxlength name value align tabindex: Specifies the tab order of an
element.
<input type="text" size="25" value="Enter your name here!">
<input> Password Field Attributes size maxlength name value align tabindex
Enter Password : <input type="password" size="25">
<input> file Field Used for file uploads. When used, two controls appear in the browser:
a field that looks similar to a text input, and a button control that’s labeled Browse…. The text that
appears on this button can’t be changed. accept attribute, is used to define the kinds of
files that may be uploaded. Browser support for this attribute is inconsistent,
however, the job of validating file uploads is best left to the server.
<input type="file" name="picture" id="picture“ accept="image/jpeg, image/gif"/>
<textarea> Field Attributes rows cols Name tabindex readonly disabled
<textarea cols="40" rows="5" name="myname">
Now we are inside the area - which is nice.</textarea>
<input> Checkbox Field Attributes name value align tabindex Checked
<input type="checkbox" name="option1" value="Milk"> Milk<br>
<input type="checkbox" name="option2" value="Butter" checked> Butter<br>
<input> Radio Button Field Attributes name value align tabindex checked
<input type="radio" name="group1" value="Milk"> Milk<br>
<input type="radio" name="group1" value="Butter" checked =“checked”> Butter<br>
<input type="radio" name="group1" value="Cheese"> Cheese
Drop-Down Menu Tags <select> Attributes
name size multiple
<option> Attributes selected value
<select> <option>Milk</option> <option selected>Coffee</option> <option>Tea</option>
</select>
<input> Submit button / Reset button Attributes
name value align tabindex
<input type="button" value="Hello world!">
<input> Image button Image buttons have the same effect as submit
buttons Attributes
name src align border width Height tabindex
<input type="image" src=“abc.gif" name="image" width="60" height="60">
Example!
Frames
Sample Web Page Designed Using Frames
Frames Frames allow multi-windowed
layout. i.e. splitting a single Web page into
multiple windows, each of which can open a different document.
Frames are independent, scrollable portions of a Web browser window, with each frame capable of displaying a different document.
Frames Tags
Tag Description
<frameset>
Defines a set of frames
<frame> Defines a sub window (a frame)
<noframes>
Defines a noframe section for browsers that do not handle frames
<iframe> Defines an inline sub window (frame)
HTML <frame> AttributesAttribute Value Description
Frameborder 01
Specifies whether or not to display a border around a frame
Marginheight
pixels Specifies the top and bottom margins of a frame
Marginwidth
pixels Specifies the left and right margins of a frame
name name Specifies the name of a frame
noresize noresize Specifies that a frame cannot be resized
scrolling Yesnoauto
Specifies whether or not to display scrollbars in a frame
Height Pixel | % Set height of frame
Width Pixel | % Set width of frame
Bordercolor rgb(x,x,x)#xxxxxxcolorname
sets color for the border of frame
src URL Specifies the URL of the document to show in a frame
HTML <frameset> Attributes
Attribute Description
border Define border width of frames inside frameset.=pixel count
Frameborder Controles border of frames whether to display a border or notYes | no
Cols(pixels,%,*)
Specifies the number and size of columns of frame in a frameset
Rows(pixels,%,*)
Specifies the number and size of rows of frame in a frameset
framespacing Spacing in pixels between frames
Web Page Design
4) address and phone number
1) newspaper logo
2) list of links
3) articles
620 pixels
500 pixels120 pixels
Creating Frames You divide a document into frames using
the <frameset> element.
The <frame> element and other <frameset> elements are the only items that you can place inside a <frameset> element.
Creating Frames Two attributes of the <frameset> element,
rows and cols, determine whether frames are created as rows or columnsThe rows attribute determines the
number of horizontal frames to createThe cols attribute determines the number
of vertical frames to create The src attribute of the <frame>
element specifies the document to be opened in an individual frame
HTML Frames<frameset rows=“*,50%" cols="50%,*">
<frame src="" name="topleft"><frame src="" name="topright"><frame src="" name="botleft"><frame src="" name="botright">
</frameset>
Top left Top right
Bottom left Bottom right
Nesting Frames Each individual frame within a window
can contain its own set of frames.
Frames that are contained within other frames are called nested frames.
Nested frames accomplished by including a <frameset> element inside another <frameset> element.
Nested Frames
<frameset rows="50%,50%" cols="50%,50%" border="5" > <frame src="" name="topleft" bordercolor="red" scrolling="no“ /> <frameset rows="50%,50%" cols="50%,50%" border="5“ /> <frame src="" name="botleft" bordercolor="red" scrolling="no“ /> <frame src="" name="botright" bordercolor="red" scrolling="no“ /> <frame src="" name="botright" bordercolor="red" scrolling="no“ />
<frame src="" name="botright" bordercolor="red" scrolling="no“ /> </frameset> <frame src="" name="botleft" bordercolor="red" scrolling="no“ /> <frame src="" name="botright" bordercolor="red" scrolling="no“ /></frameset>
Using the target Attribute & <base> Element One popular use of frames creates a table of
contents frame on the left side of a Web browser window with a display frame on the right side.
The target attribute determines in which frame or Web browser window a document opens.
When you are using the same target window or frame for a long list of hyperlinks, it is easier to use the target attribute in the <base> element instead of repeating the target attribute within each hyperlink.
You use the target attribute with the <base> element to specify a default target for all links in a document, using the assigned name of a window or frame.
Links Within FramesJump to the <a href="analysis.htm" target="main">Analysis</a> of the project
The target can be a name of a frame that you specified in the <frame> tag or one of the following Values: "_blank“ Loads the link into a new blank
window. "_parent“ Loads the link into the immediate
parent of the document the link is in. "_self“ Loads the link into the same window.
(default) "_top“ Loads the link into the full body of the
current window.
Frames Disadvantage The web developer must keep track of
more HTML documents.
It is difficult to print the entire page.
Frames are less used in modern-day web design, they’re still valid, and there are still many web sites that use these elements today as they have for years.
Tables
Table
Table TagsTag Description
<table> Defines a table.
<caption> Defines a table caption. Provides a means for labeling
the table’s content. Used once per table and mustimmediately follow the table start tag.
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<thead> Groups the header content in a table. By default, athead will not affect the display of the table in any
way.
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
Using of <table>,<tr> & <td> Tags Graphical tables are enclosed within a
two-sided <table> tag that identifies the start and ending of the table structure.
Each row of the table is indicated using a two-sided <tr> (for table row).
Within each table row, a two-sided <td> (for table data) tag indicates the presence of individual table cells.
Columns Within a Table HTML does not provide a tag for
table columns. In the original HTML specifications,
the number of columns is determined by how many cells are inserted within each row. i.e. if a table have four <td> tags in each
row, then it has has four columns.
The Table Syntax
This creates a table with two rows and two columns.
<table><tr>
<td> First Cell </td><td> Second Cell
</td> </tr> <tr>
<td> Third Cell </td>
<td> Fourth Cell </td> </tr></table>
two rows
two columns
Adding Headings to Table
<table border="2" bordercolorlight="#b2b2ff"><tr bordercolor="red">
<th>First Col</th><th>second Col</th>
</tr><tr>
<td> First Cell </td><td> Second Cell </td>
</tr> <tr>
<td> Third Cell </td><td> Fourth Cell </td>
</tr></table>
Adding <caption> to Table
<table border="2" bordercolorlight=“yellow” cellpadding=10 > <caption>Demonstrating Table with header & caption</caption>
<tr bordercolor="red"><th>First Col</th><th>second Col</th>
</tr><tr>
<td> First Cell </td><td> Second Cell </td>
</tr> <tr>
<td> Third Cell </td><td> Fourth Cell </td>
</tr></table>
Attribute Description
Bgcolor
like with the body tag, this sets the background color of any item.
It works with tables as well and will be seen as the default color.
Width
determines the width of the table and isn’t required. If you don’t
put this in, the table will automatically adjust in terms of width.
Height
it’s mainly for the height and how high you want the table to be.
Not required at all and will adjust on its own if not with a set
height.
Border
determines the borders from outside the table to the table cells
and isn’t required. By default, browsers display tables without
table borders, i.e. its default value is 0.
Cellpadding
it’s the distance of the cell wall from the contents.
Cellspacing
sets the distance between cells and isn’t required. Again, it will
do that automatically if not set.
bordercolor
to set the color of the border.
The <table> Tag Attributes
The <tr> Tag Attributes
Attribute
Value Description
align LeftRightCenterjustify
Aligns the content in a cell
bgcolor rgb(x,x,x)#xxxxxxcolorname
Specifies a background color for a cell.
valign TopMiddleBottombaseline
Vertical aligns the content in a cell
The <th>& <td> Tags Attributes
Attribute
Value Description
align left |right | center | justify
Aligns the content in a cell
bgcolor rgb(x,x,x)#xxxxxxcolorname
Specifies a background color for a cell.
colspan Number Sets the number of columns a cell should span
height pixels | % Sets the height of a cell
rowspan Number Sets the number of rows a cell should span
valign top | middle |bottom |baseline
Vertical aligns the content in a cell
width pixels | % Specifies the width of a cell
Defining Cell and Column Sizes To set the width of an individual cell, add the width
attribute to either the <td> or <th> tags.
The syntax is: width=“value” value can be expressed either in pixels or as a
percentage of the table width a width value of 30% displays a cell that is 30% of the
total width of the table
The height attribute can be used in the <td> or <th> tags to set the height of individual cells.
Spanning Rows and Columns To merge several cells into one, you need to
create a spanning cell. A spanning cell is a cell that occupies more
than one row or column in a table. Spanning cells are created by inserting the
rowspan and colspan attribute in a <td> or <th> tag.
The syntax for these attributes is: rowspan=“value” colspan=“value”value is the number of rows or columns that
the cell spans in the table
Example of Spanning Cells
This cell spans three
rows
this cell spans two columns
Designing a Page Layout with Tables HTML tables are most often used to define
the layout of an entire Web page.
If you want to design a page that displays text in newspaper style columns, or separates the page into distinct sections, you’ll find tables an essential and useful tool.
Remember that some monitors display Web pages at a resolution of 640 by 480 pixels.
Web Page Layout using Table
A Sample Web Page Design with Tables
Web Page Using Nested Table Tables can be created within another
table making the Web page easier to manage.
Changing The Table Text Size In order to change the size of the
table text, you need to insert a <font> tag into each cell.Note: The <font> tag can not be
applied to all of the text in a table. As <font> tag is deprecated <style>
tag is used instead.
Online References www.w3schools.com www.echoecho.com www.quackit.com www.htmlcodetutorial.com www.htmlquick.com www.blooberry.com …
Now Its Time To Do Your Web Right
Now