You are on page 1of 87

Introduction to HTML

1
Introduction to Hypertext
 HTML: Hypertext Markup Language
 Hypertext …
 links within and among Web documents
 connect one document to another
Origins of HTML
 HTML is based on SGML (Standardized
General Markup Language)
 Tim Berners-Lee created first
HTML version in the late 1980s (as a
subset of SGML).
What is HTML?
• HTML (Hypertext Markup Language)
• HTML standards are developed under the authority of the World
Wide Web Consortium (W3C), headed by Tim Lee
• http://www.w3c.org
• HTML is the set of "markup" symbols or codes inserted in a file
intended for display on a World Wide Web browser.
• The markup tells the Web browser how to display a Web page's text,
images, sound and video files for the user.
• The individual markup codes are referred to as elements (but many
people also refer to them as tags).
HTML Documents

• HTML documents are text documents


• We use simple ASCII text files
• Html file extensions: .html or .htm
• You can create html documents using:
• Notepad in Windows and TextEdit (MAC OS X)
• You can also use HTML Editors
HTML Editors
• HTML editors are called “WYSIWYG”
• What You See Is What You Get!
• Examples of HTML Editors:
• Dreamweaver
• Front Page
• Go Live
HTML Editors:
 Pros  Cons
– Good for beginners – They do not always
• You do not have to know generate clean HTML
much HTML to use editors  Add redundant tags
• It is easy to create complex  Add their own tags
tables, image maps, and use – They do not offer good
advanced functions such graphic tools to
as Style Sheets and manipulate images
JavaScript
– It can be hard to fix
• Easy for design due to the HTML tags since every
WYSIWYG interface time you open a
document, code is added.
HTML Document Structure
• The HTML document is divided into two major parts:
• HEAD: contains information about the document:
• Title of the page (which appears at the top of the browser
window)
• Meta tags: used to describe the content (used by Search
engines)
• JavaScript and Style sheets generally require statements in the
document Head
• BODY: Contains the actual content of the document
• This is the part that will be displayed in the browser
window
Sample HTML Document
<HTML>

<HEAD>
<TITLE> My web page </TITLE>
</HEAD>

<BODY>
Content of the document
</BODY>

</HTML>
HTML Tags

• All HTML tags are made up of a tag name and sometimes


they are followed by an optional list of attributes which
all appear between angle brackets < >
• Nothing within the brackets will be displayed by the browser (unless
the HTML is incorrectly written and the browser interprets the tags
as part of the content)
• Attributes are properties that extend or refine the tag’s functions
HTML Tags
 Standalone tags
– There are a few HTML tags which do not use
an end tag and are used for standalone
elements on the page:
<img> to display an image
<BR> Line break
<HR> horizontal line
HTML Tags
 Attributes

<body bgcolor=“khaki” text=“#000000” >

 Attributes are added within a tag to extend a tag’s action.


 You can add multiple attributes within a single tag.
 Attributes belong after the tag name; each attribute should be separated by
one or more spaces.
 Most attributes take values, which follow an equal sign “=“
 after the attribute’s name.
 Values are limited to 1024 characters in length.
This is Information which the browser
will ignore:
 Tabs
 multiple spaces will appear as a single space
 Example:

“Hello,
How are you?”
The browser will ignore the blanks and new
line:
Hello, How are you?
What does <body> include?
<P> v. <BR> Tags
 <BR>: Break
 <P>: Paragraph tag. Creates more space
than a BR tag.
Paragraph Tag <P>

 Leaves one empty line after the tag


 Multiple <P> tags with no intervening text
is interpreted as redundant by all browsers
and will display a single <P> tag
Line break <BR>

 This tag breaks the line and starts text at a


new line.
 It will not add an empty line like the
paragraph tag
 Multiple <br> tags will display multiple
line breaks
Horizontal Rule <HR>
 The <HR> element causes the browser to
display a horizontal line (rule) in your
document.
 <HR> does not use a closing tag, </HR>.
Attribute Description Default Value
Height of the rule in
SIZE 2 pixels
pixels
Width of the rule in
WIDTH pixels or percentage 100%
of screen width
Draw the rule with a Not set
NOSHADE flat look instead of a
3D look (3D look)

Aligns the line (Left,


ALIGN Center
Center, Right)
Sets a color for the
COLOR Not set
rule (IE 3.0 or later)
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
<BODY> Heading 1
<H1> Heading 1 </H1> Paragraph 1,….
<P>Paragraph 1, …
Line 2
<BR> Line 2 <BR>
<HR>Line 3 <BR> _________________________
</P> Line 3
</BODY>
</HTML>
Comments <!-- -->
 Browser will NOT display text in between
<!-- This is a comment -->

<!-- This is another


comment
-->
Backgrounds
 Use < body bgcolor = “ …” > for a
background color with a hex version of a
web-safe color:
<body bgcolor = “ccffff”>

 For a tiled background using an image file:


<BODY background="backgroundPicture.gif">
Different ways of specifying
color
Font Tags to specify color, font
type and size
 Font attributes:
 face: Arial, Courier, etc.
 size: e.g. 3, 6
 color: e.g. “RED”, “GREEN”, etc.
<FONT FACE=ARIAL SIZE=6>
<B>The Curse of Xanadu</B>
</FONT>
<FONT FACE=ARIAL SIZE=3>
By Gary Wolf, <I>Wired Magazine</I>
</FONT>
The Curse of Xanadu By Gary Wolf, Wired Magazine
Text format tags
 Bold: <b> some text </b> or <strong>
 Italic <I> some text </I> or <em>

 <HR> (Horizontal Rule) Displays horizontal line in the browser


window. The line fills the window from left to the right margins.
It’s useful to separate sections of your document
 You can use attributes with <hr> such as
– <hr width=“70%”>
More Text Formatting tags
 <b>..</b>: Defines bold text
 <big>..</big>: Defines big text
 <em>..</em: Defines emphasized text
 <i>..</i>: Defines italic text
 <small>..</small>: Defines small text
 <strong>..</strong>: Defines strong text
 <sub>..</sub>: Defines subscripted text
 <sup>..</sup>: Defines superscripted text
 <strike>..</strike>: defines strike tag
 <center> ..</center>: indicates a section that is center aligned.
 <left> ..</left>: indicates a section that is left aligned.
Lists
 Lists are used to organize items in the
browser window:
 Unordered list: Bulleted list (most popular), list
items with no particular order
 Ordered list: Numbered list
Unordered list:
– Unordered list: Bulleted list
(most popular), lists items
with no particular order

Fruit
<UL> Fruit
<LI> Banana • Banana
<LI>Grape •Grape
</UL>
Ordered list:
 Numbered list:

Fruit
<OL> Fruit
<LI> Banana 1. Banana
<LI>Grape 2. Grape
</OL>
You have the choice of setting the TYPE Attribute to one of
five numbering styles

TYPE Numbering Styles


1 Arabic numbers 1,2,3, ……
a Lower alpha a, b, c, ……
A Upper alpha A, B, C, ……
i Lower roman i, ii, iii, ……
I Upper roman I, II, III, ……
EXAMPLE
<OL TYPE =“i”> i. List item …
<LI> List item …</LI> ii. List item …
<LI> List item …</LI>
</OL> Text ….
<P> text ….</P>
<OL TYPE=“i” v. List item now starts
START=“5”> from 5 …
<LI> List item now
starts from 5 …</LI>
</OL>
List with in list
<OL TYPE =“1”>
<LI> List item 1 …</LI>
<LI> List item 2 ..</LI>
<ol type = "a">
<li> 1.1
<li> 1.2
</ol>
</OL>
Hyperlinks (Anchor Tag):

 Hyperlinks are used for linking:


 within the same page (Internal Link)
 To another page in your web site (Relative Link or local
link)
 To another page outside your web site (Absolute or remote
link)
 Email Link
 Hyper Links: are highlighted and underlined text.
When you click on it, it takes you to another
page on the web.
<A> tag
 The most important attribute of the <a> element is the href attribute,
which indicates the link's destination.
 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

 Syntax: <a href="url">link text</a>


 The href attribute specifies the destination address
 The link text is the visible part.
 Clicking on the link text, will send you to the specified address.
Hyperlinks:

 Absolute Link: These are links to another page


outside of your web site. These links specify the
entire URL of the page:

<A HREF= http://www.jiit.ac.in> JIIT Web Site </A>

JIIT Web Site


Hyperlinks:

 Relative Link: These are links to another


page in your site so you do not have to
specify the entire URL.
<A HREF=“index.html”>Go back to main page</A>

Go back to main page


Internal Links/ Bookmarks
 HTML bookmarks are used to allow readers to jump to
specific parts of a Web page
 First, create a bookmark with the id attribute:
<h2 id="tips">Useful Tips Section</h2>
 Then, add a link to the bookmark, from within the same
page:
<a href="#tips">Visit the Useful Tips Section</a>
 Or, add a link to the bookmark from another page:
<a href="html_tips.htm#tips">Visit the Useful Tips
Section</a>
Email Link:

 You can mail someone at:


<a href=“mailto:supervisor@jiit.ac.in”>
Send email to Supervisor</A>

Send email to Supervisor


HTML Tables <TABLE>
 Tables represent a simple mechanism for
creating rows and columns of data
 Tables are very widely used and supported
by all common browsers
 Tables use a very simple tag structure with
these four sub-elements:
1. Table Row<TR></TR>.
2. Table Header <TH></TH>.
3. Table Data <TD></TD>.
4. Caption <CAPTION></CAPTION>
HTML - Tables
 Tables tags starts with
1. <TABLE> tag, then
1. <TR> defines table rows.
• Each <TR> represents one row in the table.
• The number of rows is determined by the number of <TR>
2. <TD> Table data or <TH> Table Header can follow the <TR> tag
• The number of cells in each row is determined by the number of <TH> (Table
Header) and/or <TD> (Table data) tags contained within that row.
• <TH> text will be in bold, and centered
2. </TABLE>

<tr> <th> cell 1 <th> cell 2 <th> cell 3 </tr>


<tr> <td> cell 4 <td> cell 5 <td> cell 6 </tr>
</table>
<tr> <td> cell 7 <td> cell 8 <td> cell 9 </tr>
Table Attributes
<TABLE ALIGN=“left" BORDER=0 BGCOLOR=“cyan“ width=600 cellpadding=0
cellspacing=0>

 Align: "left", "center" or "right“ - "left" is the default


 Border: thickness of the border in pixels - 0 for no borders
 Bgcolor: is background color in HEX or as a name color
 Background=url (works with IE only)
 Cellpadding=n (n is number of pixels (space) between cell content and its border
 Cellspacing=n (n is number of pixels (space) between cells)
 Height=n (height of table in pixels or percentages 100%)
 Width=n (Width of table in pixels or percentages 100%)
Example
<TABLE BORDER="1" WIDTH="300" HEIGHT="100" BORDERCOLOR="BLUE">
<CAPTION ALIGN="TOP" >This table lists movies with their ticket prices</CAPTION>
<TR >
<TH>Movie</TH>
<TH>Ticket Price</TH>
</TR>
<TR>
<TD>MI6</TD>
<TD>250</TD>
</TR>
<TR>
<TD>Minions</TD>
<TD>300</TD>
</TR>
</TABLE>
TD or TH Attributes
 Colspan: Specifies how many cell columns of the table this
cell should span.
 Rowspan: Specifies how many cell rows of the table this cell
should span.
 Align: cell data can have left, right, or center alignment.
 Valign: cell data can have top, middle, or bottom alignment.
 Width: you can specify the width as an absolute number of
pixels or a percentage of the document width.
 Height: You can specify the height as an absolute number of
pixels or a percentage of the document height.

47
Example
<table border=1 cellpadding =2>
<tr>
<th> Column 1 Header</th>
<th> Column 2 Header</th>
</tr> <tr>
<td colspan=2> Row 1 Col 1</td>
</tr> <tr>
<td rowspan=2>Row 2 Col 1</td>
<td> Row 2 Col2</td>
</tr> <tr>
<td> Row 3 Col2</td>
</tr> </table>
Output

Column 1 Header Column 2 Header

Row 1 Col 1

Row 2 Col 2
Row 2 Col 1
Row 3 Col 2

49
Row –column format
Tables

<table border="1"> <table border="1">


<tr> <tr>
<th>Name</th> <th colspan="2">Name</th>
<td>A B Morgan</td> <th>Course</th>
<td>D P Jones</td> <th>Year</th>
</tr> </tr>
… ....
....
5
Scrolling text using the
<marquee> tag
<html>
<head><title> scrolling text</title></head>
<body>
<marquee><font face=“sand”>Welcome to my
website! Be sure to visit again!</marquee>
</body>
</html>
HTML and Multimedia

52
Images
<img src= "logoblue.gif" width="153" height="31"
border="0”>
 Image Attributes
 Image File (SRC:source): This value will be a URL (location of the image) E.g.
http://www.domain.com/dir/file.ext or /dir/file.ext.
 Alignment (ALIGN): This allows you to align the image on your page.
 Width (WIDTH): is the width of the image in pixels.
 Height (HEIGHT): is the height of the image in pixels.
 Border (BORDER): is for a border around the image, specified in pixels.
 HSPACE: is for Horizontal Space on both sides of the image specified in pixels. A setting
of 5 will put 5 pixels of invisible space on both sides of the image.
 VSPACE: is for Vertical Space on top and bottom of the image specified in pixels. A
setting of 5 will put 5 pixels of invisible space above and bellow the image.
Example: Adding Image

Add image as a hyperlink


<a href="default.asp">
<img src="smiley.gif" alt=“smiley image">
</a>
Adding multimedia files
 <a href=“filename.extension> listen to sound file </a>
 <a href=“sound1.wav> listen to sound file </a>
 <a href=“movie1.mov> view movie clip </a>
Multimedia Filetypes
File Type Extention/Mime type
================================
plain text: .txt
HTML document: .html
GIF image: .gif or .jpg or .png
Acrobat file: .pdf
AIFF sound file: .aiff .au . wav
MP3 .mp3
QuickTime movie: .mov

MPEG movie: .mpeg or .mpg


HTML FRAMES
 A framed page is actually made up of multiple HTML
pages
Doc1.html Doc2.html

Doc1.html Doc2.html

Frames.html
• A frameset partitions a web browser window
so that multiple web documents can be
displayed simultaneously.
• Example application: To maintain a
permanently visible directory of links within
your site, while also displaying one or more
selected documents from the site.
– otherwise the directory of links must appear on every page,
and this scrolls up with the page
Creating frames
 A <FRAMESET> element is placed in the html document before
the <BODY> element. The <FRAMESET> describes the amount of
screen real estate given to each windowpane by dividing the screen
into ROWS or COLS.

 The <FRAMESET> will then contain <FRAME> elements, one


per division of the browser window.

 Note: Because there is no BODY container, FRAMESET pages can't


have background images and background colors associated with
them.
Example
<HTML> Framed Page
<HEAD>
FRAME FRAME
<TITLE> Framed Page </TITLE>
<FRAMESET COLS=“23%,77%”>
NAME= NAME=right_pane
<FRAME SRC=“Doc1.html”>
left_pane SRC= Doc2.html
<FRAME SRC=“Doc2.html”>
SRC=Doc1
</FRAMESET >
.html
</HEAD>

</HTML>
Attributes for <FRAMESET>
 ROWS : Determines the size and number of rectangular rows within a
<FRAMESET>.
 COLS: Determines the size and number of rectangular columns within a
<FRAMESET>,
 FRAMEBORDER : Possible values 0, 1, YES, NO. A setting of zero will
create a borderless frame.
 FRAMESPACING: This attribute is specified in pixels. If you go to
borderless frames you will need to set this value to zero as well, or you will
have a gap between your frames where the border used to be.
 BORDER(thickness of the Frame): This attribute specified in pixels. A
setting of zero will create a borderless frame. Default value is 5.
 BORDERCOLOR: This attribute is allows you choose a color for your
border. This attribute is rarely used.
Attributes for <FRAME>
<FRAME>: This element defines a single frame within a frameset. There will
be a FRAME element for each division created by the FRAMESET element.
This tag has the following attributes:
 SRC: Required, as it provides the URL for the page that will be displayed in
the frame.
 NAME: Required for frames that will allow targeting by other HTML
documents. Works in conjunction with the target attribute of the <A>,
<AREA>, <BASE>, and <FORM> tags.
 MARGINWIDTH: Optional attribute stated in pixels. Determines
horizontal space between the <FRAME> contents and the frame’s borders.
 MARGINHEIGHT: Optional attribute stated in pixels. Determines vertical
space between the <FRAME> contents and the frame’s borders.
 SCROLLING: Displays a scroll bar(s) in the frame. Possible values are:
1. Yes – always display scroll bar(s).
2. No – never display scroll bar(s).
3. Auto – browser will decide based on frame contents.
By default: scrolling is auto.
What will be the output?
<HEAD>
<FRAMESET ROWS="25%,50%,25%”
<FRAME SRC="">
<FRAMESET COLS="25%,*">
<FRAME SRC="">
<FRAME SRC="">
</FRAMESET>
<FRAME SRC="">
</FRAMESET>
</HEAD>
Frame Formatting
 Example:

<frameset rows=“20%, *, 20%”>


<frame src=“header.html” noresize
scrolling=no>
<frame src=“body.html”>
<frame src=“navigationbar.html” noresize
scrolling=no>
</frameset>

66
67
navigation.html
 The anchor tag has a target attribute
– takes the name of the frame used to display the information
 All anchors below are targeted to the "mainF" frame

<html><head><title>Navigation Bar</title></head>
<body><center>
<a href="course.html" target="mainF">HTML Course</a><br><br>
<a href="paragraph.html" target="mainF">Paragraphs</a><br>
<a href="headings.html" target="mainF">Headings</a><br>
<a href="ulists.html" target="mainF">Unordered lists</a><br>
<a href="olists.html" target="mainF">Ordered lists</a><br>
<a href="nlists.html" target="mainF">Nested lists</a><br>
<a href="intro.html" target="mainF">Home</a><br>
</center></body>
</html>
Nested framesets
<html>
<head><title>Frames 2</title></head>
<frameset cols="140,*">
<frame name="navF" src="navigation.html">
<frameset rows="30%,70%">
<frame name="upperF" src="intro.html">
<frame name="lowerF" src="course.html">
</frameset>
</frameset>
</html>
Forms
• Forms are user interfaces for data input
• Main application: to provide user input for
– programs and databases located on a web server
– local (client-side) scripts associated with the form
• Server-based programs may return data to the
client as a web page
• Client-side scripts can read input data
– To validate the data, prior to sending to server
– To use in local processing which may output web page
content that is displayed on the client
<FORM> Attributes
 ACTION: is the URL of the program that is going to accept the data
from the form, process it, and send a response back to the browser.
 METHOD: GET (default) or POST specifies which HTTP method
will be used to send the form’s contents to the web server.
 NAME: is a form name used by any scripting language
 TARGET: is the target frame where the response page will show up.

72
Example applications
• Questionnaires to provide feedback on a web
site
• e-commerce, to enter name, address, details of
purchase and credit-card number
– request brochures from a company
– make a booking for holiday, cinema etc.
– buy a book, cd, etc
– obtain a map giving directions to a shop
• Run a database query and receive results (an
important part of e-commerce)
Input types
• text
• checkbox
• radio (buttons)
• select (options)
• textarea
• password
• button
• submit
• reset
• hidden
• file
• image
The method and action attributes
• The method attribute specifies the way that form data is sent to the
server program
– GET appends the data to the URL
– POST sends the data separately
• The action attribute specifies a server program (e.g. a php
program .php extension) that processes the form data
• Can also send an email: action=“mailto:supervisor@jiit.ac.in”

<body>
<form method="POST" action="comments.pl">
<h2>Tell us what you think</h2>
<!-- etc -->
</form>
</body>
The input element: type="text"
• The type attribute specifies the type of
user input
• The name attribute gives an identifier to
the input data
• The size attribute specifies the length
of the input field
• The value attribute specifies an initial
value for the text (optional)

<form method="POST" action="comments.pl">


<h2>Tell us what you think</h2>
Name <input name="name" type="text" size="20"><br>
Address <input name="address" type="text" size="30">
</form>
The input element:type="checkbox"
• The name attribute is used to define a
set of checkboxes
• The value attribute identifies the
individual checkbox
• If the checked attribute is set the box
is initially checked

How did you hear about this web site?<br>


A friend
<input type="checkbox" name="howdid" value="friend"><br>
Search engine
<input type="checkbox" name="howdid" value="engine"><br>
<!– etc -->
The input element: type="radio"
• Radio buttons are similar to
checkboxes, but only one can be
selected
• To select a button by default, use
the checked attribute (for one
button only)

How did you hear about this web site?<br>


A friend
<input type="radio" name="howdid" value="friend"><br>
Search engine
<input type="radio" name="howdid" value="engine"><br>
<!– etc -->
The input element: type="button"
• The name attribute uniquely identifies
a button
• The value attribute gives a label to
the button
• Actions can be associated with
buttons- more later

Do you want to receive any further information:<br>


<input type="button" name="yes" value=" Yes ">
<input type="button" name="no" value=" No "><br>
The input element:
type="submit/reset"
• type="submit"
– clicking this button sends the
form data to the program
(URL) specified in the
action attribute of the form
• type="reset"
– clicking this button clears all
data entered so far
Thank you<br>
<input type="submit" name="send" value="Send">
<input type="reset" name="clear" value="Clear"><br>
The input element:
type="password/file/hidden"
• type="password"
– similar to type="text" except that the input is
echoed with asterisks (so not visible)
• type="file"
– provides a file dialogue box to specify a file that is
sent to the server
• type="hidden"
– similar to text input, but the value attribute is used to
specify data that is to be sent to the server. Nothing
appears on the screen.
– The data might be set by a server program to keep
track of the details of a particular transaction.
The textarea element
• Used for multi-line text input
• The size of the input area is
specified with the cols and
rows attributes
• Any text placed inside the
element appears in the input
area (this can be deleted).

Please write your comments:<br>


<textarea name="comments" rows="5" cols="20">
put text here
</textarea>
The select element
• The select element provides
a menu of options
• An option can be selected by
default using the selected
attribute (otherwise the first in
the list is initially selected)

How do you rate this site?<br>


<select name="rating">
<option>Good
<option selected>Bad
<option>Ugly
</select>
Example of a textbox form : what will be the
output?
<TITLE>Form_Text_Type</TITLE>
</HEAD> <BODY>
<h1> <font color=blue>Please enter the following bioData</font></h1>
<FORM name="form1" Method= " get " Action= " URL " >
First Name: <INPUT TYPE="TEXT" NAME="FName"
SIZE="15" MAXLENGTH="25"><BR>

Last Name: <INPUT TYPE="TEXT" NAME="LName"


SIZE="15" MAXLENGTH="25"><BR>

Nationality: <INPUT TYPE="TEXT" NAME="Country"


SIZE="25" MAXLENGTH="25"><BR>

The Phone Number: <INPUT TYPE="TEXT" NAME="Phone"


SIZE="15" MAXLENGTH="12"><BR>
</FORM>
</BODY> </HTML>
85
Output

86
Write HTML for the following…
<h2>Sign Up!</h2>
<form action="mailto:pamela.fox@gmail.com" enctype="text/plain" method="post">
<label>Name: <input name="name" type="text"></label>
<br>
<label>Email: <input name="email" type=“text"></label>
<br>
<label>Location:
<select name="location">
<option value="syd">Sydney</option>
<option value="nyc">New York</option>
</select></label>
<br>
<label>Gender:
<input type="radio" name="gender">Female
<input type="radio" name="gender">Male
</label>
<br>
<label>Experience:
<br>
<textarea name="experience"></textarea>
</label>
<br>
<button type="submit">Sign Up</button>
</form>

You might also like