<a href="document URL"... attributes-list>link Text</a>

(1)

HTML LINKS:

A link is specified using HTML tag <a>. This tag is called anchor tag

and anything between the opening <a> tag and the closing </a> tag

becomes part of the link and a user can click that part to reach to the

linked document. Following is the simple syntax to use <a> tag.

<a href="Document URL" ... attributes-list>Link Text</a>

Ex:

<html>

<head>

<title>Linking to Other Sites</title> </head> <body> <p>Movie Reviews: <ul> <li><a href="http://www.empireonline.com">Empire</a></li> <li><a href="http://www.metacritic.com">Metacritic</a></li> <li><a href="http://www.rottentomatoes.com">Rotten Tomatoes</a></li> <li><a href="http://www.variety.com">Variety</a></li> </ul> </p> </body> </html>

Result is:

(2)

The target Attribute:

This attribute is used to specify the location where linked document

is opened. Following are possible options:

_blank

Opens the linked document in a new window or tab.

_self Opens the linked document in the same frame.

_parent Opens the linked document in the parent frame.

_top Opens the linked document in the full body of the window.

targetframe

Opens the linked document in a named targetframe.

Ex:

<!DOCTYPE html>

<html>

<head>

<title>Hyperlink Example</title>

</head>

<body>

<p>Click any of the following links</p>

<a

href

=

"http://www.cankaya.edu.tr"

(3)

<a

href

=

target

=

"_self"

>

Opens in Self

</a>

|

<a

href

=

target

=

"_parent"

>

Opens in Parent

</a>

|

<a

href

=

target

=

"_top"

>

Opens in Body

</a>

</body>

</html>

Download Links

You can create text link to make your PDF, or DOC or ZIP files

downloadable. This is very simple, you just need to give complete

URL of the downloadable file as follows:

Ex:

<!DOCTYPE html>

<html>

<head>

<title>Hyperlink Example</title>

</head>

<a href="http://www.tutorialspoint.com/page.pdf">Download PDF

File</a>

</body>

</html>

Result is:

(4)

Linking to Other Pages on the Same Site:

Ex:

<html>

<head>

<title>Linking to Other Pages on the Same Site</title>

</head> <body>

<p>

<ul>

<li><a href="index.html">Home</a></li> <li><a href="about-us.html">About</a></li> <li><a href="movies.html">Movies</a></li> <li><a href="contact.html">Contact</a></li> </ul>

(5)

</p> </body> </html>

Linking to a Page Section:

You can create a link to a particular section of a given webpage by

using name attribute. This is a two step process.

First create a link to the place where you want to reach with-in a

webpage and name it using <a...> tag as follows:

<h1>HTML Text Links <a name="top"></a></h1>

Second step is to create a hyperlink to link the document and place

where you want to reach:

This will produce the link, where you can click on the link generated

Go to the Top to reach to the top of the HTML Text Link tutorial.

Ex:

<html>

<head>

<title>Linking to Other Pages on the Same Site</title> </head>

<body>

<h2>Section-1</h2> <p> Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-</p> <p> Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-</p> <p> Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-</p> <p>

(6)

Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-</p>

<h2>Section-2</h2> <p> Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-</p> <p> Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-</p> <p> Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-</p> <p> Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-</p> <p> Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-</p> <p> Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-Bluh-</p>

</body> </html>

(7)

For the above window if you press Go to Sec3 link the below window

appears

(8)

Adding Links to a Named Anchor in another Document:

You can create a link that jumps to a section of another HTML

document that is marked by a named anchor. The HTML for building

a link to a named anchor in another HTML document is:

<a href=file.htm#NAME>Text to activate link</a>

Ex:

<hr>

(9)

Ex:

Introduction to Volcano Web</a>

<a href= index.htm#intro> Introduction to Volcano Web</a>

<a href= final/index.htm#intro> Introduction to Volcano Web</a>

<a href=../ final/index.htm#intro> Introduction to Volcano Web</a>

<a href=../../ final/index.htm#intro> Introduction to Volcano Web</a>

Ex:

<!DOCTYPE html>

<html>

<head>

<title>Image Hyperlink Example</title>

</head>

<body>

<p>Click following link</p>

</a>

</body>

</html>

(10)

Result is:

HTML Email Tag:

HTML <a> tag provides you option to specifiy an email address to

send an email. While using <a> tag as an email tag, you will use

mailto:email address along with href attribute. Following is the

syntax of using mailto instead of using http.

<a href= "mailto:[email protected]">Send Email</a>

Ex:

<html> <head> <title>Email Links</title> </head> <body>

<a href="mailto:[email protected]">Email Jon</a>

</body> </html>

(11)

Result is:

Ex:

<html>

<head>

<title>Links</title>

</head>

<body>

<h2>Festival Diary</h2>

<p>Here are some of the film festivals we will be attending this year.

<br />

Please <a href="mailto:[email protected]"> contact us</a> if you \

would like more information.</p>

<h3>January</h3>

<p><a href="http://www.sundance.org"> Sundance Film Festival</a><br

/> Park City, Utah, USA<br />

20 - 30 January 2011</p>

<h3>February</h3>

<p><a href="http://www.tropfest.com"> Tropfest</a><br /> Sydney,

Australia<br /> 20 February 2011</p>

(12)

<p><a href="about.html">About Film Folk</a></p>

</body>

</html>

Result is:

(13)

Adding Images

HTML To add an image into the page you need to use an <img>

element.

This is an empty element (which means there is no closing tag). It

must carry the following two attributes:

src

This tells the browser where it can find the image file.

alt

This provides a text description of the image which describes the

image if you cannot see it.

title

You can also use the title attribute with the <img> element to

provide additional information about the image. Most browsers will

display the content of this attribute in a tootip when the

user hovers over the image.

Ex:

<html>

<head>

<title>Adding Images</title>

</head>

<body>

</body>

(14)

Height & Width of Images

height

This specifies the height of the image in pixels.

width

This specifies the width of the image in pixels.

Ex:

<html>

<head>

<title>Height and Width of Images</title>

</head>

<body>

</body>

</html>

Where to Place Images in Your Code:

Where an image is placed in the code will affect how it is displayed.

Here are three examples of image placement that produce different results:

1: before a paragraph The paragraph starts on a new line after the image.

2: inside the start of a paragraph The first row of text aligns with the bottom of

the image.

3: in the middle of a paragraph The image is placed between the words of the

paragraph that it appears in.

(15)

Ex:

<html>

<head>

<title>Where to Place Images in Your Code</title>

</head>

<body>

<img src="images/bird.gif" alt="Bird" width="100"

height="100" />

<p>There are around 10,000 living species of birds that

inhabit different ecosystems from the Arctic to the Antarctic. Many species

undertake long distance annual migrations, and many more perform shorter

irregular journeys.</p>

<hr />

<p><img src="images/bird.gif" alt="Bird" width="100"

height="100" /> There are around 10,000 living species of birds that inhabit

different ecosystems from the Arctic to the Antarctic. Many species undertake

long distance annual migrations, and many more perform shorter irregular

journeys.</p>

<hr />

<p>There are around 10,000 living species of birds that

inhabit different ecosystems from the Arctic to the Antarctic. <img

src="images/bird.gif" alt="Bird" width="100" height="100" /> Many species

undertake long distance annual migrations, and many more perform shorter

irregular journeys.</p>

</div>

</body>

</html>

(16)

Old Code: Aligning Images Horizontally

The align attribute was commonly used to indicate how the other parts of a

page should flow around an image. It has been removed from HTML5

left

This aligns the image to the left (allowing text to flow around its right-hand

side).

(17)

This aligns the image to the right (allowing text to flow around its left-hand

side).

Ex:

<html>

<head>

<title>Aligning Images Horizontally</title> </head>

<body>

<p><img src="images/bird.gif" alt="Bird" width="100" height="100" align="left" />There are around 10,000 living species of birds that inhabit different

ecosystems from the Arctic to the Antarctic. Many species undertake long distance annual migrations, and many more perform shorter irregular journeys.</p>

<hr />

<p><img src="images/bird.gif" alt="Bird" width="100" height="100" align="right" />There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Many species undertake long distance annual migrations, and many more perform shorter irregular journeys.</p>

</div> </body> </html>

Result is:

(18)

Aligning Images Vertically:

top

This aligns the first line of the surrounding text with the top of the image.

middle

This aligns the first line of the surrounding text with the middle of the image.

bottom

This aligns the first line of the surrounding text with the bottom of the image.

Ex:

<html>

<head>

<title>Aligning Images Vertically</title>

</head>

<body>

height="100" align="top" /> There are around 10,000 living species of birds

that inhabit different ecosystems from the Arctic to the Antarctic. Many species

undertake long distance annual migrations, and many more perform shorter

irregular journeys.</p>

<hr />

height="100" align="middle" /> There are around 10,000 living species of birds

irregular journeys.</p>

<hr />

height="100" align="bottom" /> There are around 10,000 living species of birds

irregular journeys.</p>

</div>

</body>

</html>

(19)

Result is:

(20)

Ex:

<html>

<head>

<title>Images</title>

</head>

<body>

<img src="images/chocolate-islands.jpg" alt="Chocolate

Islands" title="Individual Chocolate Cakes" />

<p>

<figcaption>

This recipe for individual chocolate cakes is so

simple and so delectable!

</figcaption>

</p>

</figure>

<h4>More Recipes:</h4>

<p>

<img src="images/lemon-posset.jpg" alt="Lemon Posset"

title="Lemon Posset" />

<img src="images/roasted-brussel-sprouts.jpg" alt="Roasted

Brussel Sprouts" title="Roasted Brussel Sprouts" />

<img src="images/zucchini-cake.jpg" alt="Zucchini Cake"

title="Zucchini Cake" />

</p>

</body>

</html>

Result is:

(21)

(22)

Set Image Width/Height

You can set image width and height based on your requirement using width and height attributes. You can specify width and height of the image in terms of either pixels or percentage of its actual size.

Ex:

<!DOCTYPE html>

<html>

<head>

<title>Set Image Width and Height</title>

</head>

<body>

<p>Setting image width and height</p>

</body>

</html>

Set Image Border

By default image will have a border around it, you can specify border thickness

in terms of pixels using border attribute. A thickness of 0 means, no border

around the picture.

<!DOCTYPE html>

<html>

<head>

(23)

</head>

<body>

<p>Setting image Border</p>

</body>

</html>

HTML TABLES

The HTML tables allow web authors to arrange data like text, images, links,

other tables, etc. into rows and columns of cells.

The HTML tables are created using the <table> tag in which the <tr> tag is used

to create table rows and <td> tag is used to create data cells.

(24)

EX:

<html>

<head>

<title>Basic Table Structure</title> </head> <body> <table> <tr> <td>15</td> <td>15</td> <td>30</td> </tr> <tr> <td>45</td> <td>60</td> <td>45</td> </tr> <tr> <td>60</td> <td>90</td> <td>90</td> </tr> </table> </body> </html> Result is:

(25)

Ex:

<!DOCTYPE html> <html> <head> <title>HTML Tables</title> </head> <body> <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> </body> </html> Result is:

Here border is an attribute of <table> tag and it is used to put a border across

all the cells. If you do not need a border then you can use border="0".

Table Heading

Table heading can be defined using <th> tag. This tag will be put to replace

<td> tag, which is used to represent actual data cell. Normally you will put your

(26)

top row as table heading as shown below, otherwise you can use <th> element

in any row.

Ex:

<!DOCTYPE html> <html> <head>

<title>HTML Table Header</title> </head> <body> <table border="1"> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>Ramesh Raman</td> <td>5000</td> </tr> <tr> <td>Shabbir Hussein</td> <td>7000</td> </tr> </table> </body> </html> Result is:

(27)

HTML BOX MODEL:

All HTML elements can be considered as boxes.

The box model allows us to add a border around elements, and to define space

between elements.

The image below illustrates the box model:

Content - The content of the box, where text and images appear

Padding - Clears an area around the content. The padding is transparent (şeffaf) Border - A border that goes around the padding and content

Margin - Clears an area outside the border. The margin is transparent (şeffaf)

Cellpadding and Cellspacing Attributes

There are two attribiutes called cellpadding and cellspacing which you will use

to adjust the white space in your table cells.

The cellspacing attribute defines the width of the border, while cellpadding

represents the distance between cell borders and the content within a cell.

(28)

Ex:

<!DOCTYPE html> <html>

<head>

<title>HTML Table Cellpadding</title> </head>

<body>

<table border="1" cellpadding="5" cellspacing="5"> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>Ramesh Raman</td> <td>5000</td> </tr> <tr> <td>Shabbir Hussein</td> <td>7000</td> </tr> </table> </body> </html> Result is: Ex: <!DOCTYPE html> <html> <head>

(29)

<title>HTML Table Cellpadding</title> </head>

<body>

<table border="1" cellpadding="5" cellspacing="45"> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>Ramesh Raman</td> <td>5000</td> </tr> <tr> <td>Shabbir Hussein</td> <td>7000</td> </tr> </table> </body> </html> Result is:

Colspan and Rowspan Attributes

You will use colspan attribute if you want to merge two or more columns into a single column.

(30)

Ex:

<head>

<title>HTML Table Colspan/Rowspan</title> </head> <body> <table border="1"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr>

<tr><td colspan="3">Row 3 Cell 1</td></tr> </table> </body> </html> Result is:

(31)

Tables Backgrounds

You can set table background using one of the following two ways:

bgcolor attribute - You can set background color for whole table or just for one cell. background attribute - You can set background image for whole table or just for one cell. You can also set border color also using bordercolor attribute.

EX:

<head>

<title>HTML Table Background</title> </head>

<body>

<th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr>

<tr><td colspan="3">Row 3 Cell 1</td></tr> </table> </body> </html> Result is:

(32)

Ex: Image Background

<head>

<title>HTML Table Background</title> </head>

<body>

<th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr>

<tr><td colspan="3">Row 3 Cell 1</td></tr> </table> </body> </html> Result is:

Table Height and Width

You can set a table width and height using width and height attributes.

You can specify table width or height in terms of pixels or in terms of percentage of available screen area

(33)

Ex:

<head>

<title>HTML Table Width/Height</title> </head>

<body>

<table border="1" width="400" height="150"> <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> </body> </html> Result is: EX: Table Caption

The caption tag will serve as a title or explanation for the table and it shows up at the top of the table. This tag is depracated in newer version of HTML/XHTML.

(34)

Example:

<head>

<title>HTML Table Caption</title> </head>

<body>

<table border="1" width="100%"> <caption>This is the caption</caption> <tr>

<td>row 1, column 1</td><td>row 1, columnn 2</td> </tr>

<tr>

<td>row 2, column 1</td><td>row 2, columnn 2</td> </tr> </table> </body> </html> Result is:

Table Header, Body, and Footer

Tables can be divided into three portions: a header, a body, and a foot. The three elements for separating the head, body, and foot of a table are: <thead> - to create a separate table header.

<tbody> - to indicate the main body of the table. <tfoot> - to create a separate table footer.

A table may contain several <tbody> elements to indicate different pages or groups of data. But it is notable that <thead> and <tfoot> tags should appear before <tbody>

(35)

Ex: <table> <thead> <tr> <th>Date</th> <th>Income</th> <th>Expenditure</th> </tr> </thead> <tbody> <tr> <th>1st January</th> <td>250</td> <td>36</td> </tr> <tr> <th>2nd January</th> <td>285</td> <td>48</td> </tr>

<tr> <th>31st January</th> <td>129</td> <td>64</td> </tr> </tbody> <tfoot> <tr> <td></td> <td>7824</td> <td>1241</td> </tr> </tfoot> </table> Nested Tables <!DOCTYPE html> <html> <head>

<title>Nested Tables </title> </head>

(36)

<td>

<p>This is a paragraph</p> <p>This is another paragraph</p> </td>

<td>This cell contains a table: <table> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr>

<td>This cell contains a list <ul> <li>apples</li> <li>bananas</li> <li>pineapples</li> </ul> </td> <td>HELLO</td> </tr> </table> </body> </html> Result is:

(37)

Width & Spacing

The width attribute was used on the opening <table> tag to indicate how wide that table should be and on some opening <th> and <td> tags to specify the width of individual cells. The value of this attribute is the width of the table or cell in pixels.

The columns in a table need to form a straight line, so you often only see the width attribute on

the first row (and all subsequent rows would use that setting).

EX:

<html>

<head>

<title>Width and Spacing</title> </head>

<body>

<table border="1" width="400" cellpadding="10" cellspacing="5"> <tr> <th width="150"></th> <th>Withdrawn</th> <th>Credit</th> <th width="150">Balance</th> </tr> <tr> <th>January</th> <td>250.00</td> <td>660.50</td>

(38)

<td>410.50</td> </tr> <tr> <th>February</th> <td>135.55</td> <td>895.20</td> <td>1170.15</td> </tr> </table> </body> </html> Result is: EX: <html> <head>

<title>Border and Background</title> </head>

<body>

<th width="150"></th> <th>Withdrawn</th> <th>Credit</th>

<th width="150" bgcolor="#cccccc">Balance</th> </tr> <tr> <th>January</th> <td>250.00</td> <td>660.50</td> <td bgcolor="#cccccc">410.50</td> </tr> <tr> <th>February</th> <td>135.55</td> <td>895.20</td> <td bgcolor="#cccccc">1170.15</td> </tr> </table>

(39)

</body> </html>

Result is:

Meta Tags

You can add metadata to your web pages by placing <meta> tags inside the header of the document which is represented by <head> and </head> tags. A meta tag can have following attributes in addition to core attributes:

Attribute Description

Name Name for the property. Can be anything. Examples include, keywords, description, author, revised, generator etc.

content Specifies the property's value.

scheme Specifies a scheme to interpret the property's value (as declared in the content attribute).

http-equiv

Used for http response message headers. For example http-equiv can be used to refresh the page or to set a cookie. Values include content-type, expires, refresh and set-cookie.

(40)

You can use <meta> tag to specify important keywords related to the document and later these keywords are used by the search engines while indexing your webpage for searching purpose.

EX:

<head>

<title>Meta Tags Example</title>

Document Description

You can use <meta> tag to give a short description about the document. This again can be used by various search engines while indexing your webpage for searching purpose.

EX:

<head>

<body>

<p>Hello HTML5!</p> </body>

</html>

Document Revision Date

You can use <meta> tag to give information about when last time the document was updated. This information can be used by various web browsers while refreshing your webpage.

EX:

(41)

Document Refreshing

A <meta> tag can be used to specify a duration after which your web page will keep refreshing automatically.

EX:

If you want your page keep refreshing after every 5 seconds then use the following syntax. <!DOCTYPE html>

</head> <body> <p>Hello HTML5!</p> </body> </html>

Page Redirection

You can use <meta> tag to redirect your page to any other webpage. You can also specify a duration if you want to redirect the page after a certain number of seconds.

EX:

Following is an example of redirecting current page to another page after 5 seconds. If you want to redirect page immediately then do not specify content attribute.

<head>

(42)

<body>

</html>

Setting Author Name

You can set an author name in a web page using meta tag. See an example below:

EX:

<head>

</head> <body>

</html>

Specify Character Set

You can use <meta> tag to specify character set used within the webpage.

Example

By default, Web servers and Web browsers use ISO-8859-1 (Latin1) encoding to process Web pages. Following is an example to set UTF-8 encoding:

<head>

(43)

</html>

HTML FORMS

HTML Forms are required when you want to collect some data from the site

visitor. For example during user registration you would like to collect

information such as name, email address, credit card, etc.

A form will take input from the site visitor and then will post it to a back-end

application such as CGI, ASP Script or PHP script etc. The back-end application

will perform required processing on the passed data based on defined business

logic inside the application.

There are various form elements available like text fields, textarea fields,

drop-down menus, radio buttons, checkboxes, etc.

The HTML <form> tag is used to create an HTML form and it has following

syntax:

form elements like input, textarea etc.

</form>

Form Attributes

(44)

Attribute Description

action Backend script ready to process your passed data.

method Method to be used to upload data. The most frequently used are GET and POST methods.

target Specify the target window or frame where the result of the script will be displayed. It takes values like _blank, _self, _parent etc.

enctype

You can use the enctype attribute to specify how the browser encodes the data before it sends it to the server. Possible values are:

application/x-www-form-urlencoded - This is the standard method most

forms use in simple scenarios.

mutlipart/form-data - This is used when you want to upload binary data in

the form of files like image, word file etc.

HTML Form Controls

There are different types of form controls that you can use to collect data using

HTML form:

Text Input Controls

Checkboxes Controls

Radio Box Controls

Select Box Controls

File Select boxes

Hidden Controls

Clickable Buttons

Submit and Reset Button

Text Input Controls

(45)

Single-line text input controls - This control is used for items that require only one line

of user input, such as search boxes or names. They are created using HTML <input> tag.

Password input controls - This is also a single-line text input but it masks the character

as soon as a user enters it. They are also created using HTMl <input> tag.

Multi-line text input controls - This is used when the user is required to give details that

may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag.

Single-line text input controls

This control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML <input> tag.

Syntax:

Attributes

Following is the list of attributes for <input> tag for creating text field.

Attribute Description

type Indicates the type of input control and for text input control it will be set to text.

name Used to give a name to the control which is sent to the server to be recognized and get the value.

value This can be used to provide an initial value inside the control.

size Allows to specify the width of the text-input control in terms of characters.

maxlength Allows to specify the maximum number of characters a user can enter into the text box.

(46)

Example

Here is a basic example of a single-line text input used to take first name and last name:

<head>

<title>Text Input Control</title> </head>

First name: <input type="text" name="first_name" /> <br>

Last name: <input type="text" name="last_name" /> </form>

</body> </html>

Result is:

Password input controls

This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTML <input> tag but type attribute is set topassword.

Example

Here is a basic example of a single-line password input used to take user password:

<head>

<title>Password Input Control</title> </head>

(47)

User ID : <input type="text" name="user_id" /> <br>

Password: <input type="password" name="password" /> </form>

</body> </html>