Week 3 HTML Links Table List - Lab
Uploaded by
Amirul AsyrafWeek 3 HTML Links Table List - Lab
Uploaded by
Amirul AsyrafHTML – LINKS, LIST
& TABLE
LINK
The syntax of creating an anchor:
<a href="url">Text to be displayed</a>
The <a> tag is used to create an anchor to link from, the href
attribute is used to address the document to link to, and the
words between the open and close of the anchor tag will be
displayed as a hyperlink.
This anchor defines a link to a website:
<a href=“http://www.google.com”>Visit Google</a>
These anchors defines a link to a document
<a href=“hello.html”>hello.html file</a>
<a href=
“http://www.w3schools.com/html/html_links.asp”>Learn
HTML Link</a>
LINK
LINK
Using Image as anchor:
Instead of writing the label of the link,
sometimes you might want to use an image
to link to other pages. Here is the example:
<a href="http://www.myblog.com/"><img src
="blogpic.jpg" alt = "Click to go to my
blog"></a>
LINK
The Target Attribute
With the target attribute, you can define
where the linked document will be opened.
The line below will open the document in a
new browser window or in a new tab (for
browsers with tabbed browsing):
<a href="http://www.google.com/"
target="_blank">Visit Google</a>
LINKING IN A LONG PAGE
<a href=#Section1>Shrek 2</a>
<a href=#Section2>Ice Age 2</a>
<a name=Section1>Shrek 2</a> <h3>Shrek 2</h3>
With anchor, you can simply click on the
title to see the contents. For example, This paragraph will be
there is no need to scroll down the page shown after the anchor
to see the synopsis of Toy Story. You can corresponding to it is
click on the Toy Story title. The result is clicked.
shown in the next screen shot.
LINKING IN A LONG PAGE
<html>
<html>
<head><title></title>
<head><title></title>
</head>
</head>
<body>
<body>
<a
<a href=#Sectionname>Display
href=#Sectionname>Display title
title here</a>
here</a>
<a
<a name=Sectionname>Write
name=Sectionname>Write all
all contents
contents here</a>
here</a>
</body>
</body>
</html>
</html>
LIST
There are two types of list tag namely:
Unordered list
Ordered list
Unordered list has the following format:
<ul>
<ul> Other
Other methods:
methods: Output:
Output:
<li>
<li> text
text </li>
</li> <ul
<ul type=
type= “disc”>
“disc”> ••
<li>
<li> text
text </li>
</li> <ul
<ul type=
type= “square”>
“square”> ▪▪
</ul>
</ul> <ul
<ul type=
type= “circle”>
“circle”> oo
UNORDERED LIST
Web 2.0 Applications
<ul>
<li> Blog</li>
<li> Social network </li>
</ul>
CASCADED UNORDERED LIST
Web 2.0 Phenomenon
<ul>
<li> Social Networking
Websites
</li>
<ul>
<li> Facebook </li>
<li> Twitter </li>
</ul>
<li> Wikis </li>
<li> Blog </li>
<ul>
<li> Photoblog</li>
<ul>
<li>Photopages</li></ul>
<li> Videoblog </li>
</ul>
</ul>
ORDERED LIST
Other
Other methods:
methods:
<ol>
<ol> <ol
<ol type=
type= “A”>
“A”>
<li>
<li> text
text </li>
</li> <ol
<ol type=
type= “a”>
“a”>
<li>
<li> text
text </li>
</li> <ol
<ol type=
type= “I”>
“I”>
</ol>
</ol> <ol
<ol type=
type= “i”>
“i”>
<OL>
Educational websites:
<ol>
<li> www.w3schools.com
</li>
<li> www.javascript.com
</li>
<li> www.aspeasy.com</li>
</ol>
<OL>
Brands of Laptop:
<ol type="A">
<li> Dell </li>
<li> Toshiba </li>
<li> Acer </li>
</ol>
<ol type="i">
<li> Compaq </li>
<li> Lenovo </li>
<li> Apple Macbook </li>
</ol>
TABLE
<TABLE>
<TR><TD>Text </TD></TR>
</TABLE>
<TR>..</TR> tag refers to table row.
<TD>..</TD> refers to table data. A data cell
can contain text, images, lists, paragraphs,
forms, horizontal rules, tables, etc.
TABLE
<TABLE border=“1”>
<TR>
<TD>Row 1,Column 1</TD><TD>Row 1,
Column 2</TD>
</TR>
<TR>
<TD>Row 2, Column 1</TD><TD>Row 2,
Column 2</TD>
</TR>
</TABLE>
Attributes Function Possible value
Border Width in pixel Border = “2”
Cellspacing Space between the Cellspacing = 2
cells in the table
Cellpadding Space between edges Cellpadding = 10
of the cell and its
content
Bgcolor To set the background Eg: <table border =“1”
color bgcolor= “yellow”>
Background To set the background Eg: <table background=
image “myimage.jpg”>
<TR> … </TR>
Attributes Function Possible value
Align Horizontal alignment left, right, center
Valign Vertical alignment top, middle, bottom
Bgcolor To set the background
color
Background To set the background
image
<TD> … </TD>
Attributes Function Possible value
Align Horizontal alignment Left, right, center
Valign Vertical alignment Top, middle, bottom
Width Width of the column Eg: width= “50”
Rowspan No.of rows this cell Eg: rowspan= “2”
will span
Colspan No.of columns this cell Eg: colspan= “3”
will span
Bgcolor To set the background
color
Background To set the background
image
HEADINGS
<table border="1"><
tr><th>Heading 1</th><th>Heading
2</th></tr>
<tr><td>row 1, column 1</td>
<td>row 1, column 2</td></tr>
<tr><td>row 2, column
1</td><td>row 2, column
2</td></tr>
</table>
TABLE WITH COLSPAN
<table border=1>
<tr>
<td colspan=2>Aspire</td>
</tr>
<tr>
<td>Brilliant</td><td>Courage</td>
</tr>
</table>
TABLE WITH ROWSPAN
<html>
<head></head>
<body>
<table border=1>
<tr>
<td>Dare</td><td
rowspan=2>Enthusiastic</td>
</tr>
<tr>
<td rowspan = 2>Fantastic</td>
</tr>
</table>
</body>
</html>
TABLE WITH
COLSPAN,ROWSPAN
<html>
<head></head>
<body>
<table border=1>
<tr>
<td colspan=2 align=center>Hardworking</td>
</tr>
<tr>
<td rowspan = 2
valign=bottom>Knowledge</td>
<td>Independent</td>
</tr>
<tr>
<td>Determination</td></tr>
</table></body>
</html>
