S

HTML
Usage of HTML Tags

Use single tag.
Combine some of them to get interesting effects (Nested structure).
<a><img … /> </a>
Get experience through exercises or learning from others’ work.
Some Examples (Template)
Wine
Dreamy
Redbusiness
Zenlike
E-mail Links
The anchor tag <a> can also be used to create e-mail links.
An e-mail link will automatically launch the default mail program with
the specified e-mail address as the recipient.
It uses mailto: instead of http://.
Example
Contact me at <a href="mailto: qhw@ump.edu.my">
qhw@ump.edu.my </a>
How the HTML code above looks in a browser:

Various Lists
Different types of ordered lists (OrderedList.html)
Different types of unordered lists (UnOrderedList.html)
Nested list (NestedList.html)
HTML <head> Element
The <head> element is a container for all the head elements.
Elements inside <head> can include scripts, instruct the browser
where to find style sheets, provide meta information, and more.
The following tags can be added to the head section: <title>, <style>,
<meta>, <link>, <script>, <noscript>, and <base>.
HTML <title> Element
The <title> tag defines the title of the document.
The <title> element:
o defines a title in the browser toolbar
o provides a title for the page when it is added to favorites
o displays a title for the page in search-engine results
• <!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
…
HTML <base> Element
The <base> tag specifies the base URL/target for all relative URLs in
a page:
 <head>
<base href="http://www.w3schools.com/images/"
target="_blank">
</head>
HTML <link> Element
The <link> tag defines the relationship between a document and an
external resource.
The <link> tag is most used to link to style sheets:
 <head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
HTML <style> Element
The <style> tag is used to define style information for an HTML
document.
Inside the <style> element you specify how HTML elements should
render in a browser:
 <head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
HTML <meta> Element
Metadata is data (information) about data.
The <meta> tag provides metadata about the HTML document.
Metadata will not be displayed on the page, but will be machine
parsable.
Meta elements are typically used to specify page description,
keywords, author of the document, last modified, and other metadata.
The metadata can be used by browsers (how to display content or
reload page), search engines (keywords), or other web services.
<meta> tags always go inside the <head> element.
Examples of Use
Define keywords for search engines:
o <meta name="keywords" content="HTML, CSS, XML,
XHTML, JavaScript">
Define a description of your web page:
o <meta name="description" content="Free Web
tutorials on HTML and CSS">
Define the author of a page:
o <meta name="author" content="Hege Refsnes">
Refresh document every 30 seconds:
o <meta http-equiv="refresh" content="30">
HTML <script> Element
The <script> tag is used to define a client-side script, such as a
JavaScript.
HTML Tables
Tables are defined with the <table> tag.
A table is divided into rows (with the <tr> tag).
Each row is divided into data cells (with the <td> tag). td stands for
"table data," and holds the content of a data cell.
A <td> tag can contain text, links, images, lists, forms, other tables,
etc.
Example:
 <table border="1">
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
Border Attribute
If you do not specify a border attribute, the table will be displayed
without borders. Sometimes this can be useful.
To display a table with borders, specify the border attribute:
<tr>
</tr>
…
</table>
Table Caption
Caption describes the table’s content.
The text inside the <caption> tag is rendered above the table in most
browsers.
<caption> Table Example </caption>
<tr>
</tr>
<tr>
</tr>
</table>
Table Headers
Header information in a table are defined with the <th> tag.

All major browsers display the text in the <th> element as bold and
centered.
Example:
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
<h4>Vertical headers:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Qhw</td>
</tr>
<tr>
<th>Telephone:</th>
<td>095498765</td>
</tr>
<tr>
<th>Telephone:</th>
<td>095498756</td>
</tr>
</table>
Tags inside a table
How to display elements inside data cell.
Table1.html
Colspan and Rowspan Attribute
You can merge data cells with the colspan and rowspan attributes
Colspan attribute specifies the number of columns that a cell will
occupy.
<tr>
<td colspan="2">This spans two columns</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
Rowspan attribute specifies the number of rows that a cell will occupy.
<tr>
<td rowspan="2">This spans two rows</td>
<td>Row 1 Column 2</td>
</tr>
<tr>
<td>Row 2 Column 2</td>
</tr>
</table>
A complex example (table2.html).
Table Tags
Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup>

element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table

Formatting a Web Page with a Table
Create page layout.
Example (A sketch of a common format consisting of a horizontal
banner and three columns.) (Layout1.html)
 <table border="1" width="80%" align="center">
<tr>
<td colspan ="3"><h2> This is the banner area </h2></td>
</tr>
<tr>
<td width="20%" valign="top">Place Navigation here </td>
<td width="10"> </td>
<td> Page content goes here</td>
</tr>
</table>
Adding some contents into above layout. (Layout1_with content.html)

There are a variety of commonly used designs for page layout tables.
Examples (Layout2.html)
<table border="1" width="80%" cellpadding= "5"
align="center">
<tr>
<td colspan ="2"><h1 align="center"> Logo Banner
</h1> </td>
</tr>
<tr>
<td colspan ="2"><h3 align="center"> Navigation
</h3> </td>
</tr>
<tr>
<td valign="top"> Main Content </td>
<td width="100" valign="top"> Sidebar</td>
</tr>
</table>
(Layout3.html)
<table border="1" width="80%" cellpadding= "5"
align="center">
<tr>
<td colspan ="3"><h1 align="center"> Logo
Banner </h1> </td>
</tr>
<tr>
<td width="100" valign="top"> Navigation </td>
<td> Main Content </td>
<td width="100" valign="top"> Sidebar</td>
</tr>
</table>
HTML Forms and Input
HTML Forms are used to select different kinds of user input and pass
data to a server.
An HTML form can contain input elements like text fields, checkboxes,
radio-buttons, submit buttons and more.
A form can also contain select lists, textarea, fieldset, legend, and
label elements.
The <form> tag is used to create an HTML form:
<form>
.
input elements
.
</form>
The Input Element
The most important form element is the <input> element.
The <input> element is used to select user information.
An <input> element can vary in many ways, depending on the type
attribute. An <input> element can be of type text field, checkbox,
password, radio button, submit button, and more.
The most common input types are described below.
Text Fields
 <input type="text"> defines a one-line input field that a user
can enter text into:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
Note: The form itself is not visible. Also note that the default width of a
text field is 20 characters.
Password Field
 <input type="password"> defines a password field:
<form>
Password: <input type="password" name="pwd">
</form>
Note: The characters in a password field are masked (shown as

asterisks or circles).
Radio Buttons
 <input type="radio"> defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of
choices:
 <form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
Checkboxes
 <input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited
number of choices.
 <form>
<input type="checkbox" name="vehicle" value="Bike">I
have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have
a car
</form>
Drop-down List
 <select> tag defines a drop-down list.
It allows the user to select one or more items from a list of
predetermined choices.
The <option> tag defines the choices in a drop-down list.
 <form>
<select name = "fruit">
<option selected = "selected">Apple</option>
<option>Peach</option>
<option>Orange</option>
<option>Pear</option>
<option>Watermellon</option>
</select>
</form>
Textarea
A multi-line text input control
In a text-area the user can write an unlimited number of characters.
Used for accepting free-form comments, questions, or descriptions.
 <textarea> tag defines a Textarea.
Comments:<br />
<textarea name = "comments" rows = "4" cols = "36">Enter
comments here.</textarea>
Submit Button
 <input type="submit"> defines a submit button.
A submit button is used to send form data to a server.
The data is sent to the page specified in the form's action attribute.
The file defined in the action attribute usually does something with the
received input:
 <form name="input" action="html_form_action.php"
method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
If you type some characters in the text field above, and click the
"Submit" button, the browser will send your input to a page called
"html_form_action.php".
Example of action attribute (PHP)
Reset Button
 <input type="reset"> defines a reset button.

Used to reset the form fields to their initial values.
 <form name="input" action="html_form_action.php"

method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
<input type = "reset" value = "Clear" />
</form>
Example including all the form elements (form2.html)

S

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

S

Uploaded by

Copyright:

Available Formats

HTML

Usage of HTML Tags

How the HTML code above looks in a browser:

Header information in a table are defined with the <th> tag.

How to display elements inside data cell.

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

<caption> Defines a table caption

<colgroup> Specifies a group of one or more columns in a table for formatting

<col> Specifies column properties for each column within a <colgroup>

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

Adding some contents into above layout. (Layout1_with content.html)

Note: The characters in a password field are masked (shown as

 <input type="reset"> defines a reset button.

 <form name="input" action="html_form_action.php"

You might also like