HTML BASICS
1
Agenda
HTML Meta Tags
Use of Meta Tags
HTML Comments
HTML Images
HTML Links
HTML Lists
HTML List Types
2
HTML Meta Tags
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. 3
HTML 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.
4
Specifying Keywords
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.
5
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.
6
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.
7
Document Refreshing
A <meta> tag can be used to specify a
duration after which your web page will keep
refreshing automatically.
8
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.
9
Setting Author Name
You can set an author name in a web page
using meta tag. See an example below:
10
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. Comments help you and others
understand your code and increases code
readability.
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. 11
HTML Images
Images are very important to beautify as well as
to depict many complex concepts in simple way
on your web page.
In HTML, images are defined with the <img>
tag.
The <img> tag is empty, it contains attributes
only, and does not have a closing tag.
12
HTML Images
The src attribute specifies the URL (web
address) of the image.
You can use PNG, JPEG or GIF image file
based on your comfort but make sure you
specify correct image file name in src
attribute. Image name is always case
sensitive.
13
The alt Attribute
The alt attribute provides an alternate text for
an image, if the user for some reason cannot
view it (because of slow connection, an error in
the src attribute.
If a browser cannot find an image, it will display
the value of the alt attribute:
14
Set Image Location
Usually we keep our all the images in a
separate directory. So let's keep HTML file
[Link] in our home directory and create a
subdirectory images inside the home directory
where we will keep our image [Link].
15
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.
16
Set Image Alignment
By default image will align at the left side of
the page, but you can use align attribute to
set it in the center or right.
17
HTML Links
HTML links are hyperlinks.
You can click on a link and jump to another
document.
When you move the mouse over a link, the
mouse arrow will turn into a little hand.
A link does not have to be text. It can be an
image or any other HTML element.
18
Linking Documents
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.
The href attribute specifies the destination
address of the link.
19
The target Attribute
This attribute is used to specify the location
where linked document is opened. Following
are possible options:
20
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:
21
Cont’d
Second step is to create a hyperlink to link
the document and place where you want to
reach:
22
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:
<a href=[Link]
pdf</a>
23
HTML Lists
HTML offers web authors three ways for
specifying lists of information. All lists must
contain one or more list elements. Lists may
contain:
<ul> - An unordered list. This will list items using
plain bullets.
<ol> - An ordered list. This will use different
schemes of numbers to list your items.
<dl> - A definition list. This arranges your items
in the same way as they are arranged in a
dictionary. 24
HTML Unordered Lists
An unordered list is a collection of related items
that have no special order or sequence. This list
is created by using HTML <ul> tag. Each item
in the list is marked with a bullet.<li> tag is used
to add list items in a list.
25
The type Attribute
You can use type attribute for <ul> tag to
specify the type of bullet you like. By default it
is a disc. Following are the possible options:
26
HTML Unordered Lists
27
HTML Ordered Lists
If you are required to put your items in a
numbered list instead of bulleted then HTML
ordered list will be used. This list is created by
using <ol> tag. The numbering starts at one
and is incremented by one for each successive
ordered list element tagged with <li>.
28
The type Attribute
You can use type attribute for <ol> tag to
specify the type of numbering you like. By
default it is a number. Following are the
possible options:
29
The start Attribute
You can use start attribute for <ol> tag to
specify the starting point of numbering you
need. Following are the possible options:
30
HTML Definition Lists
HTML and XHTML support a list style which is
called definition lists where entries are listed
like in a dictionary or encyclopedia. The
definition list is the ideal way to present a
glossary, list of terms, or other name/value list.
Definition List makes use of following three tags.
<dl> - Defines the start of the list
<dt> - A term
<dd> - Term definition
</dl> - Defines the end of the list
31
Example
32
33