PAGE FORMATTING
❑ To define the background color, use the BGCOLOR attribute in the <BODY> tag
❑ To define the text color, use the TEXT 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 = “[Link]”>, where [Link] indicates the location of the
image file
❑ The WIDTH=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=“[Link]” 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=“[Link]”> label </A>
EXAMPLE: LINKS
❑ To create a link to IMD type:
<A HREF=“[Link]
❑ To create a link to IITM pune type:
<A HREF=“[Link] Pune</A>
ANCHORS
❑ Anchors enable a user to jump to a specific place on a Web 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.
❑ To create the anchor itself, type <A NAME=“anchor name”>label</A> at the point
in the Web 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
ORDERED LISTS
❑ Ordered lists are a list of Here’s how it
numbered items. would look on the
❑ To create an ordered list,
type:
Web:
<OL>
<LI> This is step one.
</LI>
<LI> This is step two.
<LI> This is step three.
</OL>
MORE ORDERED LISTS….
The TYPE=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
Here’s how it
❑ To create an unordered would look on the
list, type: Web:
<UL>
<LI> First item in list
<LI> Second item in list
<LI> Third item in list
</UL>
MORE UNORDERED LISTS...
The TYPE=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 a Web 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
Reset Button
Submit 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=POST
ACTION=“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
EXAMPLE: TEXT BOX
First Name: <INPUT
TYPE="text"
Here’s how it would
NAME="FirstName" look on the Web:
VALUE="First Name"
SIZE=20>
<BR><BR>
Last Name: <INPUT
TYPE="text"
NAME="LastName"
VALUE="Last Name"
SIZE=20>
<BR><BR>
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>
<INPUT TYPE="radio" NAME="Size"
VALUE="Large">Large
<INPUT TYPE="radio" NAME="Size"
VALUE="Medium">Medium
<INPUT TYPE="radio" NAME="Size"
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>
<INPUT TYPE="checkbox" NAME="Color"
VALUE="Red">Red
<INPUT TYPE="checkbox" NAME="Color"
VALUE="Navy">Navy
<INPUT TYPE="checkbox" NAME="Color"
VALUE="Black">Black
CREATING DROP-DOWN MENUS
❑ To create a drop-down menu, type <SELECT NAME=“name” SIZE=n MULTIPLE>
❑ Then type <OPTION VALUE= “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 the
VALUE attribute
❑ For example, <INPUT TYPE=“submit” VALUE=“Buy Now!”> would create
a button that says “Buy Now!”
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>
Here’s how it would
<TR>
<TD>One</TD>
look on the Web:
<TD>Two</TD>
</TR>
<TR>
<TD>Three</TD>
<TD>Four</TD>
</TR>
</TABLE>
ADJUSTING THE WIDTH
❑ When a Web browser displays a table, it often adds extra space. To
eliminate this space use the WIDTH =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 and VSPACE=n attributes
in the <TABLE> tag
Example:
<TABLE HSPACE=20 VSPACE=20>
ALIGNING CELL CONTENT
❑ By default, a cell’s content are aligned horizontally to the left and and
vertically in the middle.
❑ Use VALIGN=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”>
HTML GRAPHICS
HTML Canvas Graphics
The HTML <canvas> element is used to draw graphics on a web page.
The graphic to the left is created with <canvas>. It shows four elements: a red rectangle, a
gradient rectangle, a multicolor rectangle, and a multicolor text.
<canvas id="myCanvas" width="200" height="100"></canvas>
HTML SVG Graphics
SVG defines vector-based graphics in XML format.
• SVG stands for Scalable Vector Graphics
• SVG is used to define graphics for the Web
• SVG is a W3C recommendation
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
INTRODUCTION TO XML
❑ XML stands for EXtensible Markup Language.
❑ It is a markup language much like HTML.
❑ It was designed to describe data, not to display data.
❑ It’s tags are not predefined. We must define our own tags.
❑ If we need to display dynamic data in our HTML document, it will take a lot of
work to edit the HTML each time the data changes.
❑ With XML, data can be stored in separate XML files.
❑ This way we can concentrate on using HTML for display, and be sure that changes
in the underlying data will not require any changes to the HTML.
❑ With a few lines of JavaScript code, we can read an external XML file and update
the data content of our web page.
It has following advantages:
Simplifies data sharing.
Simplifies data transport.
Simplifies platform changes.
Makes the data more available.