Lesson 5

Lesson 5
Meta Data, Comments, Images and

References
Objectives
At the end of the lesson, you should be able to:
• Understand the meaning and usage of meta
data
• Know the application of cookies in website
design
• understand the meaning and application of
comments in design.
• Understand the concept of graphics and its
references
•understand table and how to create one.
Meta Data
HTML lets you specify metadata - additional
important information about a document in a
variety of ways. The META elements can be used
to include name/value pairs describing
properties of the HTML document, such as
author, expiry date, a list of keywords, document
author etc.
The <meta> tag is used to provide such additional
information. This tag is an empty element and so
does not have a closing tag but it carries
information within its attributes.
Adding Meta tags to your documents
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:
Keyword
• 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.
• The following is an example, where we are
adding HTML, Meta Tags, Metadata as
important keywords about the 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.
Last Update
• 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.
Auto Refreshing
• A <meta> tag can be used to specify a
duration after which your web page will keep
refreshing automatically.
Redirecting a page
• 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.
• An example below shows redirecting current
page to another page after 5 seconds. If you
want to redirect page immediately then do
not specify content attribute.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta
Tags, Metadata" />
<meta name="description" content="Learning about
Meta Tags." />
<meta name="revised" content="Tutorialspoint,
3/10/2016" />
<meta http-equiv="refresh" content="5;
url=http://www.tutorialspoint.com" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Cookies
Cookies are data, stored in small text files on
your computer and it is exchanged between web
browser and web server to keep track of various
information based on your web application need.
You can use <meta> tag to store cookies on client

side and later this information can be used by the
Web Server to track a site visitor.
Example
• If you do not include the expiration date and
time, the cookie is considered a session cookie
and will be deleted when the user exits the
browser.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags,
Metadata" />
<meta name="description" content="Learning about Meta
Tags." />
<meta name="revised" content="Tutorialspoint, 3/7/2014" />
<meta http-equiv="cookie" content="userid=xyz;
expires=Wednesday, 08-Aug-15 23:59:59 GMT;" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Comments
Comment is a piece of code which is ignored by any
web browser. It is a good practice to add comments
into your HTML code, especially in complex
documents, to indicate sections of a document, and
any other notes to anyone looking at the code.
Single Comment -HTML comments are placed in
between  tags. So, any content placed with-in
 tags will be treated as comment and will be
completely ignored by the browser.
Multiple comments- <!– Beginning
end comments... -->

Graphic Extensions
Types of Web Graphics File
There are three types of graphic files: Graphics Interchange
Format (GIF), PNG and Joint Photographic Experts Group (JPEG).
• GIFs are compressed graphics that tend to lose less
image clarity than JPEGs. GIFs are particularly well
suited for images that have smaller colour palettes
(256 colours or fewer).
• JPEG format is widely being used by web designers as it
can be viewed in most new graphical browsers without
the help of any special application. JPEG has the
advantage of viewing images that have more colours
(up to 16.7 million).JPEGs are a little flexible than GIFs,
that is high rate of compression results in slightly lower
image quality. JPEG files are usually smaller and easily
transmittable over the Internet more quickly.
Working with Web Graphics
Web graphics can be obtained in different ways:
a. Creating graphics in a graphics application and
saved as GIFs or JPEG.
b. Downloading public-domain graphics such as the
Internet or public-domain clipart collections (that are
available on CDROM).
c. Using scanned photographs. Existing photographs
can be scanned into digital form for use on the site.
d. Using digital cameras to snap pictures that can be
downloaded directly from the camera to your
computer.
e. Using the camcoda of your laptop to snap and save
into your document.
Images
• <img src="Image URL" ... attributes-list/>
• This is an empty tag as explained in previous
note.
• Image Reference C:/documents/web/practice
C:/documents
html and Images are

html and Images all in different folders
together
– Relative reference Absolute reference

Relative Reference
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<h1>Relative Reference</h1>
<img src="prayer.jpg" alt=“prayer image"/>
</body>
</html>
Output
Absolute Reference
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<h1>Absolute Reference</h1>
<img src= "C:\Users\elearning2\Desktop\web\test.jpg"
alt="test image"/>
</body>
</html>
Image Width, Height, Border & Alignment
<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<h1>Setting image width, height, border &
Alignment </h1>
<img src=“prayer.jpg" alt="Test Image" width=“500”
height=“500” border="3” align =“right” />
</body>
</html>
OUTPUT
Practical
Design a web page to demonstrate the following:
Title (My Practical Exercise) hr, color Green(My
Practical Exercise), image height(300),
width(500), border(5) and alignment(right) using
absolute reference.
Table
Table row and table data
<!DOCTYPE html> <td>Row 2, Column 1</td>
<html> <td>Row 2, Column 2</td>
<head> </tr>
</table>
<title>HTML Tables</title>
</body>
</head> </html>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr> Output
<th> table header <td> table data
<!DOCTYPE html>
<html> <td>Samson Ramah</td>
<head> <td>5000</td>
<title>HTML Table </tr>
Header</title>
<tr>
</head>
<td>Daniel ELbah</td>
<body>
<td>7000</td>
<table border="1">
</tr>
<tr>
<th>Name</th> </table>
<th>Salary</th> </body>
</tr> </html>
<tr>
Cellpadding & Cellspacing Attributes
The cellspacing attribute defines the width of the

border, while cellpadding represents the distance
between cell borders and the content within a cell.
<!DOCTYPE html>
</tr>
<html> <tr>
<head> <td>Samson Ramah </td>
<title>HTML Table <td>5000</td>
Cellpadding</title> </tr>
</head> <tr>
<td>Daniel Elbah</td>
<body>
<td>7000</td>
<table border="1" </tr>
cellpadding="5" </table>
cellspacing="5"> </body>
<tr> </html>
<th>Name</th>
<th>Salary</th> Output
Colspan, Rowspan, background color,
border color, caption, Height & Width
Colspan attribute is used to merge two or more
columns into a single column. Similarly, you can use
rowspan if you want to merge two or more rows.
The background color gives color to your table
background while the border color provides color to
your table border.
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.
Border color: You can also set border color.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan & Others</title>
</head>
<body>
<table border="1" bordercolor="green" bgcolor="yellow”
background=“test.jpg” width="400" height="150“ >
<caption>This is the caption</caption>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell
2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>
Practical 2
Use the appropriate tags and produce a typical
table as seen below.

Lesson 5

Uploaded by

Copyright:

Available Formats

Lesson 5

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

Lesson 5

Uploaded by

Copyright:

Available Formats

Lesson 5

Meta Data, Comments, Images and

You can use <meta> tag to store cookies on client

end comments... -->

html and Images are

– Relative reference Absolute reference

The cellspacing attribute defines the width of the

You might also like