Intro html

INTRODUCTION TO HTML
Presented by
Ms.V.Umamaheswari MCA.,MPhil.,
Department of InformationTechnology
Bon secours College forWomen
Thanjavur-6

What is HTML?
 HTML, otherwise known as HyperText
Markup Language, is the language used to
createWeb pages
 Using HTML, you can create aWeb page with
text, graphics, sound, and video

Tags
 The essence of HTML programming is tags
 A tag is a keyword enclosed by angle brackets
( Example: <I> )
 There are opening and closing tags for many
but not all tags;The affected text is between
the two tags

More Tags...
 The opening and closing tags use the same
command except the closing tag contains
and additional forward slash /
 For example, the expression <B> Warning
</B> would cause the word ‘Warning’ to
appear in bold face on aWeb page

Nested Tags
 Whenever you have HTML tags within other
HTML tags, you must close the nearest tag
first
 Example:
<H1> <I>The Nation </I> </H1>

Structure of a Web Page
 AllWeb pages share a
common structure
 AllWeb pages should
contain a pair of
<HTML>, <HEAD>,
<TITLE>, and <BODY>
tags
<HTML>
<HEAD>
<TITLE> Example </TITLE>
</HEAD>
<BODY>
This is where you would include the
text and images on your Web page.
</BODY>
</HTML>

The <TITLE> Tag
 Choose the title of yourWeb page carefully;
The title of aWeb page determines its
ranking in certain search engines
 The title will also appear on Favorite lists,
History lists, and Bookmark lists to identify
your page

Text Formatting
 Manipulating text in HTML can be tricky;
Oftentimes, what you see is NOT what you
get
 For instance, special HTML tags are needed
to create paragraphs, move to the next line,
and create headings

Text Formatting Tags
<B> Bold Face </B>
<I> Italics </I>
<U> Underline </U>
<P> New Paragraph </P>
<BR> Next Line

Changing the Font
 The expression <FONT FACE = “fontname”>
… </FONT> can be used to change the font of
the enclosed text
 To change the size of text use the expression
<FONT SIZE=n> …. </FONT> where n is a
number between 1 and 7

Changing the Font
 To change the color, use <FONT
COLOR=“red”>…. </FONT>;The color can
also be defined using hexadecimal
representation ( Example: #ffffff )
 These attributes can be combined to change
the font, size, and color of the text all at once;
For example, <FONT SIZE=4 FACE=“Courier”
COLOR=“red”> …. </FONT>

Headings
 Web pages are typically organized into
sections with headings;To create a heading
use the expression <Hn>….</Hn> where n is a
number between 1 and 7
 In this case, the 1 corresponds to the largest
size heading while the 7 corresponds to the
smallest size

Aligning Text
 The ALIGN attribute can be inserted in the
<P> and <Hn> tags to right justify, center, or
left justify the text
 For example, <H1 ALIGN=CENTER>The New
YorkTimes </H1> would create a centered
heading of the largest size

Comment Statements
 Comment statements are notes in the HTML
code that explain the important features of
the code
 The comments do not appear on theWeb
page itself but are a useful reference to the
author of the page and other programmers
 To create a comment statement use the  tags

The Infamous Blink Tag
 It is possible to make text blink using the
<BLINK> … </BLINK> tag
 However, it is best to use this feature at most
sparingly or not at all; What seems like a good
idea to aWeb designer can become very
annoying to aWeb user
 The <BLINK> tag is not supported by Internet
Explorer

Page Formatting
 To define the background color, use the
BGCOLOR attribute in the <BODY> tag
 To define the text color, use theTEXT
attribute in the <BODY> tag
 To define the size of the text, type
<BASEFONT SIZE=n>

Example
<HTML>
<HEAD>
<TITLE> Example </TITLE>
</HEAD>
<BODY BGCOLOR=“black” TEXT=“white”>
<BASEFONT SIZE=7>
This is where you would include the text and images on your Web
page.
</BODY>
</HTML>

Inserting Images
 Type <IMG SRC = “image.ext”>, where
image.ext indicates the location of the image
file
 TheWIDTH=n and HEIGHT=n attributes can
be used to adjust the size of an image
 The attribute BORDER=n can be used to add
a border n pixels thick around the image

Alternate Text
 Some browsers don’t support images. In this
case, the ALT attribute can be used to create
text that appears instead of the image.
 Example:
<IMG SRC=“satellite.jpg” ALT = “Picture of
satellite”>

Links
 A link lets you move from one page to
another, play movies and sound, send email,
download files, and more….
 A link has three parts: a destination, a label,
and a target
 To create a link type
<A HREF=“page.html”> label </A>

Anatomy of a Link
<A HREF=“page.html”> label </A>
 In the above link, “page.html” is the
destination.The destination specifies the
address of theWeb page or file the user will
access when he/she clicks on the link.
 The label is the text that will appear
underlined or highlighted on the page

Example: Links
 To create a link to CNN, I would type:
<A HREF=“http://www.cnn.com”>CNN</A>
 To create a link to MIT, I would type:
<A HREF=“http://www.mit.edu”>MIT</A>

Changing the Color of Links
 The LINK,VLINK, and ALINK attributes can
be inserted in the <BODY> tag to define the
color of a link
 LINK defines the color of links that have not been
visited
 VLINK defines the color of links that have already
been visited
 ALINK defines the color of a link when a user clicks
on it

Using Links to Send Email
 To create a link to an email address, type <A
HREF=“mailto:email_address”> Label</A>
 For example, to create a link to send email to
myself, I would type: <A HREF=“mailto:
ktdunn@mit.edu”>email Katie Dunn</A>

Anchors
 Anchors enable a user to jump to a specific
place on aWeb site
 Two steps are necessary to create an anchor.
First you must create the anchor itself.Then
you must create a link to the anchor from
another point in the document.

Anchors
 To create the anchor itself, type <A
NAME=“anchor name”>label</A> at the point
in theWeb page where you want the user to
jump to
 To create the link, type <A HREF=“#anchor
name”>label</A> at the point in the text
where you want the link to appear

Example: Anchor
<A HREF="#chap2">Chapter Two</A><BR>
<A NAME="chap2">Chapter 2 </A>
Link
Anchor

Ordered Lists
 Ordered lists are a list
of numbered items.
 To create an ordered
list, type:
<OL>
<LI>This is step one.
<LI>This is step two.
<LI>This is step three.
</OL>
Here’s how it would
look on theWeb:

More Ordered Lists….
 TheTYPE=x attribute allows you to change
the the kind of symbol that appears in the list.
 A is for capital letters
 a is for lowercase letters
 I is for capital roman numerals
 i is for lowercase roman numerals

Unordered Lists
 An unordered list is a
list of bulleted items
 To create an unordered
list, type:
<UL>
<LI> First item in list
<LI> Second item in list
<LI>Third item in list
</UL>
Here’s how it would
look on theWeb:

More Unordered Lists...
 TheTYPE=shape attribute allows you to
change the type of bullet that appears
 circle corresponds to an empty round bullet
 square corresponds to a square bullet
 disc corresponds to a solid round bullet; this is the
default value

Forms
 What are forms?
• An HTML form is an area of the document that
allows users to enter information into fields.
• A form may be used to collect personal
information, opinions in polls, user preferences
and other kinds of information.

Forms
 There are two basic components of aWeb
form: the shell, the part that the user fills out,
and the script which processes the
information
 HTML tags are used to create the form shell.
Using HTML you can create text boxes, radio
buttons, checkboxes, drop-down menus, and
more...

Example: Form
Text Box
Drop-down Menu
Radio Buttons
Checkboxes
Text Area
Submit Button
Reset Button

The Form Shell
 A form shell has three important parts:
 the <FORM> tag, which includes the address of
the script which will process the form
 the form elements, like text boxes and radio
buttons
 the submit button which triggers the script to
send the entered information to the server

Creating the Shell
 To create a form shell, type <FORM
METHOD=POSTACTION=“script_url”>
where “script_url” is the address of the script
 Create the form elements
 End with a closing </FORM> tag

Creating Text Boxes
 To create a text box, type <INPUT
TYPE=“text” NAME=“name”VALUE=“value”
SIZE=n MAXLENGTH=n>
 The NAME,VALUE, SIZE, and MAXLENGTH
attributes are optional

Text Box Attributes
 The NAME attribute is used to identify the
text box to the processing script
 TheVALUE attribute is used to specify the
text that will initially appear in the text box
 The SIZE attribute is used to define the size of
the box in characters
 The MAXLENGTH attribute is used to define
the maximum number of characters that can
be typed in the box

Example: Text Box
First Name: <INPUTTYPE="text"
NAME="FirstName"
VALUE="First Name" SIZE=20>
<BR><BR>
Last Name: <INPUTTYPE="text"
NAME="LastName"
VALUE="Last Name" SIZE=20>
<BR><BR>
 Here’s how it would
look on theWeb:

Creating Larger Text Areas
 To create larger text areas, type <TEXTAREA
NAME=“name” ROWS=n1 COLS=n2WRAP>
DefaultText </TEXTAREA>, where n1 is the
height of the text box in rows and n2 is the
width of the text box in characters
 TheWRAP attribute causes the cursor to
move automatically to the next line as the
user types

Example: Text Area
<B>Comments?</B>
<BR>
<TEXTAREA NAME="Comments" ROWS=10
COLS=50 WRAP>
</TEXTAREA>

Creating Radio Buttons
 To create a radio button, type <INPUT
TYPE=“radio” NAME=“name”
VALUE=“data”>Label, where “data” is the
text that will be sent to the server if the
button is checked and “Label” is the text that
identifies the button to the user

Example: Radio Buttons
<B> Size: </B>
<INPUTTYPE="radio" NAME="Size"
VALUE="Large">Large
VALUE="Medium">Medium
VALUE="Small">Small

Creating Checkboxes
 To create a checkbox, type <INPUT
TYPE=“checkbox” NAME=“name”
VALUE=“value”>Label
 If you give a group of radio buttons or
checkboxes the same name, the user will only
be able to select one button or box at a time

Example: Checkboxes
<B> Color: </B>
<INPUTTYPE="checkbox" NAME="Color"
VALUE="Red">Red
VALUE="Navy">Navy
VALUE="Black">Black

Creating Drop-down Menus
 To create a drop-down menu, type <SELECT
NAME=“name” SIZE=n MULTIPLE>
 Then type <OPTIONVALUE= “value”>Label
 In this case the SIZE attribute specifies the
height of the menu in lines and MULTIPLE
allows users to select more than one menu
option

Example: Drop-down Menu
<B>WHICH IS FAVOURITE FRUIT:</B>
<SELECT>
<OPTION VALUE="MANGOES">MANGOES
<OPTION VALUE="PAPAYA">PAPAYA
<OPTION VALUE="GUAVA">GUAVA
<OPTION VALUE="BANANA"> BANANA
<OPTION VALUE="PINEAPPLE">PINEAPPLE
</SELECT>

Creating a Submit Button
 To create a submit button, type <INPUT
TYPE=“submit”>
 If you would like the button to say something
other than submit, use theVALUE attribute
 For example, <INPUTTYPE=“submit”
VALUE=“Buy Now!”> would create a button
that says “Buy Now!”

Creating a Reset Button
 To create a reset button, type <INPUT
TYPE=“reset”>
 TheVALUE attribute can be used in the same
way to change the text that appears on the
button

Tables
 Tables can be used to display rows and
columns of data, create multi-column text,
captions for images, and sidebars
 The <TABLE> tag is used to create a table;
the <TR> tag defines the beginning of a row
while the <TD> tag defines the beginning of a
cell

Adding a Border
 The BORDER=n attribute allows you to add a
border n pixels thick around the table
 To make a solid border color, use the
BORDERCOLOR=“color” attribute
 To make a shaded colored border, use
BODERCOLORDARK=“color” and
BORDERCOLORLIGHT=“color”

Creating Simple Table
<TABLE BORDER=10>
<TR>
<TD>One</TD>
<TD>Two</TD>
</TR>
<TR>
<TD>Three</TD>
<TD>Four</TD>
</TR>
</TABLE>
 Here’s how it would
look on theWeb:

Adjusting the Width
 When aWeb browser displays a table, it often
adds extra space.To eliminate this space use
theWIDTH =n attribute in the <TABLE> and
<TD> tags
 Keep in mind - a cell cannot be smaller than
its contents, and if you make a table wider
than the browser window, users will not be
able to see parts of it.

Centering a Table
 There are two ways to center a table
 Type <TABLE ALIGN=CENTER>
 Enclose the <TABLE> tags in opening and closing
<CENTER> tags

Wrapping Text around a Table
 It is possible to wrap text around a table.This
technique is often used to keep images and
captions together within an article.
 To wrap text around a table, type <TABLE ALIGN
= LEFT> to align the table to the left while the
text flows to the right.
 Create the table using the <TR>, <TD>, and
</TABLE> tags as you normally would

Adding Space around a Table
 To add space around a table, use the
HSPACE=n andVSPACE=n attributes in the
<TABLE> tag
 Example:
<TABLE HSPACE=20VSPACE=20>

Spanning Cells Across
Columns
 It is often necessary to span one cell across
many columns. For example, you would use
this technique to span a headline across the
columns of a newspaper article.
 To span a cell across many columns, type <TD
COLSPAN=n>, where n is the number of
columns to be spanned

Spanning Cells Across Rows
 To span a cell across many rows, type <TD
ROWSPAN=n>, where n is the number of
rows

Aligning Cell Content
 By default, a cell’s content are aligned
horizontally to the left and and vertically in
the middle.
 UseVALIGN=direction to change the vertical
alignment, where “direction” is top, middle,
bottom, or baseline
 Use ALIGN=direction to change the
horizontal alignment where “direction” is left,
center, or right

Controlling Cell Spacing
 Cell spacing is the space between cells while
cell padding is the space around the contents
of a cell
 To control both types of spacing, use the
CELLSPACING =n and CELLPADDING=n
attributes in the <TABLE> tag

Nesting Tables
 Create the inner table
 Create the outer table and determine which cell
of the outer table will hold the inner table
 Test both tables separately to make sure they
work
 Copy the inner table into the cell of the outer
table
 Don’t nest too many tables. If you find yourself
doing that, find an easier way to lay out your
Web page

Changing a Cell’s Color
 To change a cell’s color, add the
BGCOLOR=“color” attribute to the <TD> tag
 Example:
<TD BGCOLOR=“blue”>

Dividing Your Table into
Column Groups
 You can divide your table into two kinds of
column groups: structural and non-structural.
 Structural column groups control where
dividing lines are drawn; Non-structural
groups do not
 Both let you format an entire column of cells
at once

Column Groups
 To create structural column groups, type
<COLGROUP SPAN=n> after the <TABLE> tag,
where n is the number of columns in the group
 To create non-structural column groups, type
<COL SPAN=n>, where n is the number of
columns in the group

Dividing Table into
Horizontal Sections
 You can also create a horizontal section
consisting of one or more rows.This allows
you to format the rows all at once
 To create a horizontal section, type
<THEAD>, <TBODY>, or <TFOOT> before the
first <TR> tag of the section
 Netscape does not support these tags

Controlling Line Breaks
 Unless you specify otherwise a browser will
divide the lines in a cell as it sees fit.
 The NOWRAP attribute placed within the
<TD> tag forces the browser to keep all the
text in a cell on one line
 Example:
 <TD NOWRAP>Washington, D.C.

Parting Words….
 If you can imagine a way to lay out your page,
chances are it is possible using HTML
 When in doubt, use an HTML reference

Intro html

More Related Content

What's hot (20)

Similar to Intro html (20)

More from Umamaheshwariv1 (11)

Recently uploaded (20)

Intro html