Scribd
Upload
81 views

Introduction To HTML

The document discusses HTML (Hypertext Markup Language), the basic building blocks used to create web pages. It defines HTML as the language used to create web pages and describes some key elements: - HTML uses tags like <b> and <i> to format text styles like bold and italics. - Common page elements include headings, paragraphs, links, images and tables. - Tags are used to define the structure and layout of the page. - Attributes provide additional information about elements to control features like color, size and alignment. - Basic HTML pages use tags like <html>, <head>, <title>, and <body> to define the overall structure.

Uploaded by

map281230
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
81 views

Introduction To HTML

The document discusses HTML (Hypertext Markup Language), the basic building blocks used to create web pages. It defines HTML as the language used to create web pages and describes some key elements: - HTML uses tags like <b> and <i> to format text styles like bold and italics. - Common page elements include headings, paragraphs, links, images and tables. - Tags are used to define the structure and layout of the page. - Attributes provide additional information about elements to control features like color, size and alignment. - Basic HTML pages use tags like <html>, <head>, <title>, and <body> to define the overall structure.

Uploaded by

map281230
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 94

Dept.

Of Physics
St. Mary’s College
HTML
WHAT IS HTML?

 HTML, otherwise known as Hyper Text Markup Language, is the


language used to create Web pages
 Using HTML, you can create a Web page with text, graphics,
sound, and video
WEB PAGE

 A web page or webpage is a document, commonly written in


HTML, that is viewed in an Internet browser. A web page can be
accessed by entering a URL address into a browser's address
bar. A web page may contain text, graphics, and hyperlinks to
other web pages and files.
WHAT IS THE WWW?

The world wide web ('www' or 'web' for short) is a collection


of webpages found on this network of computers.
Your web browser uses the internet to access the web.

A distributed document delivery system


Uses a client-server model
Main presentation language is HTML
WEBPAGE
WEB BROWSER

 A web browser (commonly referred to as a browser) is a software


application for accessing information on the World Wide Web.
 When a user requests a web page from a particular website, the
web browser retrieves the necessary content from a web
server and then displays the page on the user's device.
HTML
STRUCTURE OF A WEB PAGE
<!DOCTYPE html>  All Web pages
<HTML>
share a common
<HEAD>
structure
<TITLE> Example </TITLE>
</HEAD>  AllWeb pages
<BODY> should contain a
Start HTML pair of <HTML>,
</BODY> <HEAD>, <TITLE>,
</HTML> and <BODY> tags
 <!DOCTYPE...>
 This tag defines the document type and HTML version
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

 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 a Web 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>
THE <TITLE> TAG
 Choose the title of your Web page carefully; The
title of a Web 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
<TITLE/>

<!DOCTYPE html>
<html>
<head>
<title>HTML Elements Reference</title>
</head>
<body>

<h1>This is a heading</h1>

</body>
</html>
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
<U> Underline </U>
<P> New Paragraph </P>
<BR> Next Line
<b> - Bold text</b>
<strong> - Important text</strong>
<i> - Italic text</i>
<em> - Emphasized text.
<mark> - Marked text </mark>
<small> - Smaller text</small>
<del> - Deleted text</del>
<ins> - Inserted text</ins>
<!DOCTYPE html>
<html>
<head>
<title>Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
<p>The following word uses an <i>italicized</i> typeface.</p>
<p>The following word uses an <u>underlined</u>
typeface.</p>
<p>The following word uses a <strike>strikethrough</strike>
typeface.</p>
</body>
</html>
HTML STYLES

 The HTML style attribute is used to add styles to an


element, such as color, font, size, and more

https://www.w3schools.com/html/html_styles.asp
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>
<!DOCTYPE html>
<html>
<body>

<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:powderblue;">This is a
heading</h1>
<p style="background-color:tomato;">This is a
paragraph.</p>

</body>
</html>

CHANGE BACKGROUND COLOUR


HEADINGS

 Any document starts with a heading. You can use


different sizes for your headings. HTML also has 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 one line after that heading.
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
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 York
Times </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 the Web 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 a Web designer can
become very annoying to a Web 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 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>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: coral;
}
</style>
</head>
<body>
<h1>The background-color Property</h1>
<p>The background color can be specified with a
color name.</p>
</body>
</html>
INSERTING IMAGES

 Type <IMG SRC = “image.ext”>, where image.ext


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=“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 the Web 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>
MARQUEE

An HTML marquee is a scrolling piece of text displayed either


horizontally across or vertically down your webpage depending on
the settings. This is created by using HTML <marquees> tag.

<marquee attribute_name = "attribute_value"....more attributes>


One or more lines or text message or image
</marquee>
Sr.No Attribute & Description
1 width
This specifies the width of the marquee. This can be a value like 10 or 20% etc.
2 height
This specifies the height of the marquee. This can be a value like 10 or 20% etc.
3 direction
This specifies the direction in which marquee should scroll. This can be a value like up, down,
left or right.
4 behavior
This specifies the type of scrolling of the marquee. This can have a value like scroll,
slide and alternate.

5 scrolldelay
This specifies how long to delay between each jump. This will have a value like 10 etc.

6 scrollamount
This specifies the speed of marquee text. This can have a value like 10 etc.
7 loop
This specifies how many times to loop. The default value is INFINITE, which means that the
marquee loops endlessly.

8 bgcolor
This specifies background color in terms of color name or color hex value.
9 hspace
This specifies horizontal space around the marquee. This can be a value like 10 or 20% etc.

10 vspace
This specifies vertical space around the marquee. This can be a value like 10 or 20% etc.
MARQUEE EXAMPLE

<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>

<body>
<marquee>This is basic example of marquee</marquee>
</body>
</html>
<!DOCTYPE html>
<html>

<head>
<title>HTML marquee Tag</title>
</head>

<body>
<marquee direction = "up">This text will scroll
from bottom to up</marquee>
</body>

</html>
META TAG

 The <meta> tag defines metadata about an HTML document.


Metadata is data (information) about data.
 <meta> tags always go inside the <head> element, and are
typically used to specify character set, page description,
keywords, author of the document, and viewport settings.
 Metadata will not be displayed on the page, but is machine
parsable.
 Metadata is used by browsers (how to display content or reload
page), search engines (keywords), and other web services.
 There is a method to let web designers take control over the
viewport (the user's visible area of a web page), through the
<meta> tag (See "Setting The Viewport" example below).
META TAG

<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web
tutorials">
<meta name="keywords" content="HTML, CSS,
JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
</head>
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.
ANCHORS

 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
EXAMPLE: ANCHOR

<A HREF="#chap2">Chapter Two</A><BR>


Link

<A NAME="chap2">Chapter 2 </A> Anchor


LIST TAG

 An unordered HTML list:


• Item
• Item
• Item
• Item
 An ordered HTML list:
1. First item
2. Second item
3. Third item
4. Fourth item
ORDERED LISTS  Orderedlists are a list
of numbered items.
 To create an ordered
Here’s how it would list, type:
look on the Web: <ol>
<li> This is step one.
<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
 To create an
Here’s how it would unordered list, type:
look on the 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
HTML DESCRIPTION LISTS
HTML ALSO SUPPORTS DESCRIPTION LISTS.

A DESCRIPTION LIST IS A LIST OF TERMS, WITH A DESCRIPTION OF EACH TERM.

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
LIST

TagDescription
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
FRAMES
 HTML frames are used to divide your browser window into multiple
sections where each section can load a separate HTML document.
 A collection of frames in the browser window is known as a
frameset.
 The window is divided into frames in a similar way the tables are
organized: into rows and columns.
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />
<noframes><body>Your browser does not support
frames.</body>
</noframes>
</frameset>
</html>
<!DOCTYPE html>
<html>

<head>
<title>HTML Frames</title>
</head>
<frameset cols = "25%,50%,25%">
<frame name = "left" src = "/html/top_frame.htm" />
<frame name = "center" src = "/html/main_frame.htm" />
<frame name = "right" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
Sr.No Attribute & Description
cols
Specifies how many columns are contained in the frameset and the size of each column. You
can specify the width of each column in one of the four ways −
Absolute values in pixels. For example, to create three vertical frames, use cols = "100, 500, 100".
A percentage of the browser window. For example, to create three vertical frames, use cols =
"10%, 80%, 10%".
1
Using a wildcard symbol. For example, to create three vertical frames, use cols = "10%, *, 10%".
In this case wildcard takes remainder of the window.
As relative widths of the browser window. For example, to create three vertical frames, use cols
= "3*, 2*, 1*". This is an alternative to percentages. You can use relative widths of the browser
window. Here the window is divided into sixths: the first column takes up half of the window, the
second takes one third, and the third takes one sixth.
rows
This attribute works just like the cols attribute and takes the same values, but it is used to specify
2
the rows in the frameset. For example, to create two horizontal frames, use rows = "10%, 90%".
You can specify the height of each row in the same way as explained above for columns.
border
3 This attribute specifies the width of the border of each frame in pixels. For example, border = "5".
A value of zero means no border.
frameborder
This attribute specifies whether a three-dimensional border should be displayed between
4
frames. This attribute takes value either 1 (yes) or 0 (no). For example frameborder = "0" specifies
no border.
framespacing
This attribute specifies the amount of space between frames in a frameset. This can take any
5
integer value. For example framespacing = "10" means there should be 10 pixels spacing
between each frames.
Sr.No Attribute & Description
src
This attribute is used to give the file name that should be loaded in the frame. Its
1
value can be any URL. For example, src = "/html/top_frame.htm" will load an
HTML file available in html directory.
name
This attribute allows you to give a name to a frame. It is used to indicate which
frame a document should be loaded into. This is especially important when you
2
want to create links in one frame that load pages into an another frame, in
which case the second frame needs a name to identify itself as the target of
the link.
frameborder
This attribute specifies whether or not the borders of that frame are shown; it
3
overrides the value given in the frameborder attribute on the <frameset> tag if
one is given, and this can take values either 1 (yes) or 0 (no).
marginwidth
This attribute allows you to specify the width of the space between the left and
4
right of the frame's borders and the frame's content. The value is given in pixels.
For example marginwidth = "10".
marginheight
This attribute allows you to specify the height of the space between the top
5
and bottom of the frame's borders and its contents. The value is given in pixels.
For example marginheight = "10".
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.
 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...

FORMS
Text Box

Drop-down Menu
Radio Buttons
Checkboxes

Text Area
EXAMPLE: FORM

Reset Button
Submit Button
 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

THE FORM 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 THE SHELL


 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

CREATING TEXT BOXES


TEXT BOX ATTRIBUTES

 The NAME attribute is used to identify the text box to the


processing script
 The VALUE 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
First Name: <INPUT TYPE="text"
NAME="FirstName"
VALUE="First Name" SIZE=20>
<BR><BR>

 Here’show it would Last Name: <INPUT


look on the Web: TYPE="text"
NAME="LastName"
VALUE="Last Name" SIZE=20>
<BR><BR>

EXAMPLE: TEXT BOX


 To create larger text areas, type <TEXTAREA
NAME=“name” ROWS=n1 COLS=n2 WRAP>
Default Text </TEXTAREA>, where n1 is the height
of the text box in rows and n2 is the width of the
text box in characters
 The WRAP attribute causes the cursor to move
automatically to the next line as the user types

CREATING LARGER TEXT AREAS


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

EXAMPLE: TEXT AREA


 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

CREATING 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

EXAMPLE: RADIO BUTTONS


 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

CREATING 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

EXAMPLE: CHECKBOXES
 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

CREATING DROP-DOWN MENUS


<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>

EXAMPLE: DROP-DOWN MENU


 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!”

CREATING A SUBMIT BUTTON


 To create a reset button, type <INPUT
TYPE=“reset”>
 The VALUE attribute can be used in the same
way to change the text that appears on the
button

CREATING A RESET BUTTON


 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

TABLES
 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”

ADDING A BORDER
<TABLE BORDER=10>
<TR>
<TD>One</TD>
<TD>Two</TD>
 Here’show it would </TR>
look on the Web: <TR>
<TD>Three</TD>
<TD>Four</TD>
</TR>
</TABLE>

CREATING SIMPLE TABLE


<!DOCTYPE html>
<html>
<td>Ernst Handel</td>
<head>
<td>Roland Mendel</td>

<td>Austria</td>
</head>
</tr>
<body>
<tr>

<td>Island Trading</td>
<h2>HTML Table</h2>
<td>Helen Bennett</td>

<td>UK</td>
<table>
</tr>
<tr>
<tr>
<th>Company</th>
<td>Laughing Bacchus Winecellars</td>
<th>Contact</th>
<td>Yoshi Tannamuri</td>
<th>Country</th>
<td>Canada</td>
</tr>
</tr>
<tr> <tr>
<td>Alfreds Futterkiste</td> <td>Magazzini Alimentari Riuniti</td>
<td>Maria Anders</td> <td>Giovanni Rovelli</td>
<td>Germany</td> <td>Italy</td>
</tr> </tr>
<tr> </table>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td> </body>

<td>Mexico</td> </html>

</tr>
<tr>
 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.

ADJUSTING THE WIDTH


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

CENTERING A TABLE
 Itis 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

WRAPPING TEXT 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>

ADDING SPACE AROUND A


TABLE
 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


COLUMNS
 To span a cell across many rows, type <TD
ROWSPAN=n>, where n is the number of rows

SPANNING CELLS ACROSS


ROWS
 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

ALIGNING CELL CONTENT


 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

CONTROLLING CELL SPACING


 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

NESTING TABLES
 To change a cell’s color, add the
BGCOLOR=“color” attribute to the <TD> tag
 Example:
<TD BGCOLOR=“blue”>

CHANGING A CELL’S COLOR


 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

DIVIDING YOUR TABLE INTO


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

COLUMN GROUPS
 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

DIVIDING TABLE INTO


HORIZONTAL SECTIONS
 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.

CONTROLLING LINE BREAKS


THANK YOU….

You might also like