Scribd
Upload
26 views

S

The document provides information on various HTML tags and elements. It discusses tags for links, lists, headings, paragraphs, and other text elements. It also covers common form elements like text fields, radio buttons, checkboxes and buttons. Tables are explained including how to create and style them with headers, borders, captions and merged cells. Finally, it shows how to use tables to create webpage layouts with banners, navigation menus and columns.

Uploaded by

YUNG CHEE CHIN
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
26 views

S

The document provides information on various HTML tags and elements. It discusses tags for links, lists, headings, paragraphs, and other text elements. It also covers common form elements like text fields, radio buttons, checkboxes and buttons. Tables are explained including how to create and style them with headers, borders, captions and merged cells. Finally, it shows how to use tables to create webpage layouts with banners, navigation menus and columns.

Uploaded by

YUNG CHEE CHIN
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 41

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: [email protected]">
[email protected] </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>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
How the HTML code above looks in a browser:
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:
 <table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
…
</table>
Table Caption
Caption describes the table’s content.
The text inside the <caption> tag is rendered above the table in most
browsers.
 <table border="1">
<caption> Table Example </caption>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</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:
 <table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</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.
 <table border="1">
<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.
 <table border="1">
<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"> &nbsp;</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>
How the HTML code above looks in a browser:

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>
How the HTML code above looks in a browser:

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>
How the HTML code above looks in a browser:
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>
How the HTML code above looks in a browser:
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>
How the HTML code above looks in a browser:
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>
How the HTML code above looks in a browser:
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>
How the HTML code above looks in a browser:
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>
How the HTML code above looks in a browser:
Example including all the form elements (form2.html)

You might also like