Scribd
Upload
139 views34 pages

Lecture 3 - HTML - Links Table & List

The document provides information on HTML links, lists, tables, and forms. It includes the following: 1) An overview of the syntax for creating links using the <a> tag and defining the href attribute. Examples of linking to websites and files are given. 2) Information on the different types of lists - unordered and ordered - and how to create nested lists. 3) How to create tables with <table>, <tr>, and <td> tags and use attributes like border, cellpadding, bgcolor. Examples of tables with headings, colspan, and rowspan are shown. 4) An introduction to forms in HTML with examples of common form elements like textboxes, radio buttons, text

Uploaded by

MUHAMMAD DANIEL AIMAN BIN MD AMAN
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
Download as pptx, pdf, or txt
139 views34 pages

Lecture 3 - HTML - Links Table & List

The document provides information on HTML links, lists, tables, and forms. It includes the following: 1) An overview of the syntax for creating links using the <a> tag and defining the href attribute. Examples of linking to websites and files are given. 2) Information on the different types of lists - unordered and ordered - and how to create nested lists. 3) How to create tables with <table>, <tr>, and <td> tags and use attributes like border, cellpadding, bgcolor. Examples of tables with headings, colspan, and rowspan are shown. 4) An introduction to forms in HTML with examples of common form elements like textboxes, radio buttons, text

Uploaded by

MUHAMMAD DANIEL AIMAN BIN MD AMAN
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
Download as pptx, pdf, or txt
Download as pptx, pdf, or txt
You are on page 1/ 34

HTML – 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>
<head><title></title>
</head>
<body>

<a href=#Sectionname>Display title here</a>


<a name=Sectionname>Write all contents here</a>
</body>

</html>
LIST
 There are two types of list tag namely:
 Unordered list
 Ordered list
 Unordered list has the following format:
<ul> Other methods: Output:
<li> text </li> <ul type= “disc”> •
<li> text </li> <ul type= “square”> ▪
</ul> <ul type= “circle”> o
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 methods:
<ol> <ol type= “A”>
<li> text </li> <ol type= “a”>
<li> text </li> <ol type= “I”>
</ol> <ol type= “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>
HTML - FORM
Form in Websites
Form in Websites
Form
Form allows a website to receive feedback, orders or other information from
the user to be further processed by client-side or server-side processing.
Examples of forms are the guestbook, registration form and order form.

Form elements are elements that allow the user to enter information (like text
fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a
form.

A form is defined with the <form> tag.

<form>
<input>
</input>
</form>
Form Attributes
Attribute Description
name Name of the form
method Define the way data will be
transferred. Values accepted are
GET and POST.
action The address or page of which
data will be sent and processed.

<form name= “register” method= “POST” action= “formprocess.asp”>


….
</form>

The above example creates a form section with the name register. Data
will be sent using Post method to formprocess.asp
Form
POST method will send data through ‘document’
which is hidden from the user.
GET method will attach the data given by the user to
the destination URL.
Form Elements
Method Tag
Textbox <input type= "text">
Radio Button <input type= "radio">
Check Box <input type= "checkbox">
Hidden <input type= "hidden">
Text area <textarea>..</textarea>
List down box <select>..</select>
Password <input type= "password">
When any text is written in this type of input box, ‘*’ will
appear.
Textbox, Radio Button, Check Box
Property Description
type Define the type of Input. Acceptable values include text,
hidden, radio, reset or submit.

name Name of the input.


value Default value if the user did not enter any.
checked For checkboxes and radio button. To indicate whether item
is checked by default.

disabled The item cannot be changed. Not submitted with other


data.

readonly The item cannot be changed. Submitted with other data.


Multiline Text
Attribute Description
name Name of tag.
rows Size of Rows.
cols Size of Columns.
disabled Cannot be changed and not submitted as data.

readonly Cannot be changed but submitted as data.

wrap Indicate whether data will be wrapped to the next line.

<textarea name=“comment” rows=“4” cols=“40”>


</textarea>
Multiline Text
If you need to write a label inside the textarea, you
can do it like this:

Comment: <br><textarea name=“comment” rows=“4”


cols=“40”>Write comment here</textarea>
List Down Box
Attribute Description

name Name of list down box

multiple Allow multiple selection

<select name="Age">
<option value="19">19 years old
<option value="20">20 years old
<option value="21">21 years old
</select>

<select name="Age">
<option>19 years old
<option>20 years old
<option>21 years old</select>

Both codes are acceptable.


<html>
<head><title>Form</title></head>
<body>
<h2>Student Club Registration</h2>
<form name="form1" method="post" action="register.asp">
Name:<br>
<input type="text" name="myName"><br>
Gender:<br>
<input type="radio" name="myGender" value=
"Male">Male
<input type="radio" name="myGender" value= "Female">Female
<br>
Age:<br><select name="age">
<option value="18">18 years old
<option value="19">19 years old
<option value="20">20 years old
<option value="21">21 years old
</select><br>
Favourite course:<br>
<input type="checkbox" name="ip">Internet Programming
<input type="checkbox" name="nw">Economics
<input type="checkbox" name="math">Mathematics <br>
Visions in Life: <textarea name="vision" rows="4"
cols="40"></textarea><br>
<p><input type="submit" name="submit" value="Submit">
<input type="reset" name="reset"
value="Reset"></p></form></body></html>

You might also like