Saturday, November 8, 2014

HTML-Image,Hyperlink and Tables

Sir Tom taught us about HTML-Image,Hyperlink and Tables.

HTML Image
The <img> Tag and the Src Attribute
 images are defined with the <img> tag
 <img> tag is empty, which means that it
contains attributes only, and has no closing
tag
 Src stands for "source“ which contains the
URL of the image you want to display
 <img src="url" alt="some_text">
 <img src="boat.gif" alt="Big Boat">

Sir Tom gave us more exercises using html.
Exer5.html
<html>
<head>
<title>HTML Images</title>
</head>
<body>
<img src=“boat.jpg” alt=“image error” width=“100” 
height=“100”><br/>
<img src=“mountain.jpg” alt=“image error”><br/>
</body>
</html>

HTML Table
 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> tag can contain text, links, images, lists, 
forms, other tables, etc
 Header information in a table are defined 
with the <th> tag

Exer6.html
<body>
<table border="1">
<tr>
<th bgcolor=“blue”>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td bgcolor=“blue”>>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>
</body>

HTML Hyperlinks (Links)
 <a> tag defines a hyperlink
 hyperlink (or link) is a word, group of words, 
or image that you can click on to jump to 
another document
 href attribute indicates the link’s destination
 <a href="url">Link text</a>
EX: 
<a href="http://www.w3schools.com/">Visit 
W3Schools</a>

home.html
<html>
<head>
<title>Home</title>
</head>
<body>
<h1>This is the Home Page</h1>
<a href=“home.html”>Home</a>
<a href=“about.html”>About</a>
<a href=“contact.html”>Contact</a>
</body>
</html>

contact.html
<html>
<head>
<title>Contact</home>
</head>
<body>
<h1>This is the Contact Page</h1>
<a href=“home.html”>Home</a>
<a href=“about.html”>About</a>
<a href=“contact.html”>Contact</a>
</body>
</html>

about.html
<html>
<head>
<title>About</home>
</head>
<body>
<h1>This is the About Page</h1>
<a href=“home.html”>Home</a>
<a href=“about.html”>About</a>
<a href=“contact.html”>Contact</a>
</body>
</html>

0 comments:

Post a Comment