Scribd
Upload
71 views

HTML-Layout & Semantic Tags

Uploaded by

Jeevan Sai Maddi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
71 views

HTML-Layout & Semantic Tags

Uploaded by

Jeevan Sai Maddi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 32

HTML

Layout Tags And Semantic


Tags

© 2017 Wipro wipro.com confidential 1


Agenda

Layout Tags

Semantic Tags

© 2017 Wipro wipro.com confidential 2


Objectives
At the end of this module, you will be able to:

 Layout Tags
 Semantic Tags

© 2017 Wipro wipro.com confidential 3


Layout Tags

© 2017 Wipro wipro.com confidential 4


Layout Tags
 Defines the layout of the WEB Page.

 Defines what text goes where and is displayed where.

 A Typical HTML page starts and ends with <HTML> tags

 The entire page is divided into two logical sections the Head and the Body

© 2017 Wipro wipro.com confidential 5


Layout Tags
 The Head Section is enclosed by <HEAD>Content</HEAD>, generally contains information
recurring in more than one page e.g. Company Logo. The Head also includes the Title Section
enclosed by <TITLE></TITLE> and text between this tag is displayed in the title bar of the
browser. The Body section is enclosed by <BODY>Content</BODY>, generally contains
information that is normally not repeated.
BASIC Tags:
<HTML></HTML> Defines Start and end of Web page
<HEAD></HEAD> Defines the Header section of the Web Page
<TITLE></TITLE> Defines the Title of the web page displayed on the title bar
<BODY></BODY> Defines the body / content of the page.

© 2017 Wipro wipro.com confidential 6


Layout Tags
STRUCTURAL Tags:

<H?></H?> Heading tags. ‘?’ Ranges from 1 to 6, defines heading

<PRE></PRE>Preformatted Text

 HEADING TAGS: used to display headings; enclosed in <H>heading</H>. For content enclosed
by the Heading tags a default format is applied which is defined by the tag.

 PREFORMATED TAGS: used to apply structural exactness to that of the text in the editor.

Eg.
<PRE> the text will be displayed to the right of the browser
at the same distance as it is now in the editor.
</PRE>

© 2017 Wipro wipro.com confidential 7


Semantic Tags

© 2017 Wipro wipro.com confidential 8


Semantic Tags
1. Presentation Tags

a. These tags are used to present text on the web page.

b. Example: <B> for bold, <I> for Italicizing the text.

2. Links & Graphics

a. These tags are used to link text from one page to another or on the same page.

b.HyperLinks and Bookmarks are the Links that are used.

3. Lists

a. Used to display items in form of la list of terms (with and without definition).

b.Examples are Ordered list, Unordered List and Glossary List.

© 2017 Wipro wipro.com confidential 9


Semantic Tags
4. Dividers
Used to make a clear differentiation between text.
Example: Paragraph, Line dividers

5. Backgrounds and Colors


Used to change the Background colors or images.

6. Special Characters

© 2017 Wipro wipro.com confidential 10


Example
<HTML>
<HEAD></HEAD>
<BODY>
This the default text format<BR>
<FONT NAME=“IMPACT” SIZE=“12” COLOR=“Red”>This the from Font Tag
</FONT><Br>
<B>This is a Bold Text, </B><BR>
<I>This is a italicised text</I><BR>
<U>This is underlined text</U><BR>
Text like date requires to be super scripted like this
12<SUP>th</SUP>.<BR>
and when writhing chemical formulas like that of water
H<SUB>2</SUB>O<BR>
</BODY>
</HTML>
© 2017 Wipro wipro.com confidential 11
Semantic Tags: Presentation Tags

Bold <B>Text</B> Superscript <SUP></SUP>

Italic <I>Text</I> Subscript <SUB></SUB>

Underline <U>Text</U>

FONT SETTINGS:
<FONT
SIZE=“12”
COLOR=“#FFOO00”
Attribute set
FACE=“Times” >
</FONT>
© 2017 Wipro wipro.com confidential 12
Semantic Tags: Links & Graphics
Anchor: <A>

The word hyper stands for “Without limits” i.e. there is no boundary. The Anchor (<A>) tag is used to
hook a link in one place which links that point to a point which can exists any where in the Internet.

An anchor can be used to create a link to another document (with the href attribute) or to create a
bookmark inside a document (with the name attribute).

Syntax:

<A HREF=“URL”>Display Text</A>

© 2017 Wipro wipro.com confidential 13


Links & Graphics
Types of Links:

1. Internal Links - Internal links again are of two types one links a point form one page to another page in
the same website and the other links a point from a page to another point in the same page (Bookmark).

2. External Links - External links are most similar to that of first type of Internal links only difference is
that the link is pointing to an external page (out of the scope of the current existing page. Ex. A news
link in the yahoo website)

© 2017 Wipro wipro.com confidential 14


Links & Graphics (Contd.).
External Links:

<A HREF=“https://webmail.wipro.com”>Webmail</A>

Internal Links:

<A HREF=“\JSP\Register.jsp”>Register</A>

© 2017 Wipro wipro.com confidential 15


Links & Graphics (Contd.).
Hyper Link: A Hyperlink can be created with the following:

< A HREF=“URL” TARGET=“FRAME”>Display text</A>

 It has major two attributes “HREf” stands for Hyper reference and target.

 The Target attribute tells the browser regarding where it has to open the newly requested page.
 The various values that the TARGET attribute can take are:
 “_main” to open in the same window
 “_blank” to open in a new window
 “_parent” to open the same window (regardless of frames in the window)
 “Frame name” in case of Frame pages a custom defined frame name.

© 2017 Wipro wipro.com confidential 16


Links & Graphics (Contd.).
BookMark:
 Create a book mark for whom a link can be created.
<A NAME=“Bookmark_Name”>Display Book Mark Title</A>
 Creating a link to already created book mark
<A HREF=“# Bookmark_Name”>Dispay link to book mark</A>
 You can see that the only difference between the a hyper link and a bookmark link is that the Hyper
reference start with “#” (HASH) symbol.

Create bookmark
<A NAME=“Book”>Bookmark</A>
Create a link to bookmark
<A HREF=“#Book”>Go to Bookmark</A>

© 2017 Wipro wipro.com confidential 17


Links & Graphics (Contd.).
Image:

<IMG SRC=“URL” ALT=“Alternate Text”>

Example:

<IMG SRC=“\images\wipro.jpg” ALT=“Alternate Text”>

 “SRC” Attribute: used to mention the path where the image file is stored and the image file name.

 “ALT” Attribute: used to display an alternate text in case the image file could not be loaded.

© 2017 Wipro wipro.com confidential 18


Semantic Tags: List
Provides the Author with feature of displaying text in hierarchical or tree structure format.

Allows the developer to list out the terms and important statements. There are three types of List’s
available.

© 2017 Wipro wipro.com confidential 19


List
Three types of List

i. Glossary List- If the terms are displayed in the form of Subtitle followed by a description then
the list is called as a Glossary list. The entire text on this particular page can be treated as a
Glossary list.

ii. Unordered List- If the sequence of the terms is not of much importance then the terms are
listed under Unordered list where the terms are listed with the help of bullets.

iii. Ordered List- the sequence is of much more importance or the number of terms, they are listed
with the help of numbering sequence.

© 2017 Wipro wipro.com confidential 20


List: Glossary List
Used to display a list of alternating term with definition paragraphs.
DL  Definition List, DT  Term, DD  Data
 Definition List (DL):
 Signifies the beginning and closing of the Glossary list. The entire Glossary list is enclosed between <DL>
</DL> tags
 Definition Term (DT):
 Signifies the term that is to be defined (The title/term). It is enclosed between <DT></DT> tags.
Example:
<DL>
<DT>Coffee</DT>
<DD>Black hot drink</DD>
</DL>
Output:
Coffee
Black hot drink
© 2017 Wipro wipro.com confidential 21
List: Ordered List
 An ordered list is a list of items. Here the sequence is of much more importance or the number or
terms. The list is displayed and listed with help of numbers or clearly identifiable symbols which are
of incremental nature.

 The Ordered list is defined with the help of the <OL></OL> tags. It has TYPE attribute which is used
to mention what type of sequence will be used to display the terms. It can take the values such as “1”,
“A”, “I”, etc to display relevant sequence.

 The List is generated with the help of <LI>term</LI> tags.

© 2017 Wipro wipro.com confidential 22


Ordered List : Example
Example:
<OL TYPE=“A”>
<LI>Country</LI>
<OL TYPE=“1”>
<LI>India</LI>
</OL>
</OL>
Output:
A. Country
1. India

© 2017 Wipro wipro.com confidential 23


List: Un-Ordered List
 An unordered list is a list of items. Here the sequence is not of much importance or the number or
terms. The list is displayed and listed with help of bullets.
 The Unordered list is defined with the help of the <UL></UL> tags. It has TYPE attribute which is
used to mention what type of bullet will be used to display the terms. It can take the values such as
“Circle”, “Disc”, “Square” to display relevant bullet.
 The List is generated with the help of <LI>term</LI> tags.
Example:
<UL TYPE=“Square / Circle / Disc”>
<LI>Country</LI>
<UL TYPE=“”>
<LI>India</LI>
</UL>
</UL>

© 2017 Wipro wipro.com confidential 24


Semantic Tags: Dividers
Paragraph: <P></P> tags are used to divide the entire text into paragraph. This makes it easier to apply
universal formatting styles (Achieved by Style-Sheets).

<p align=“Left/center/right/justify”>Text</p>

LineBreak: In case a line break is to be inserted the <BR> tag is used which works similar to carriage
return, i.e. breaks the line and starts printing from the next line.

<BR/> gives a single carriage return.

© 2017 Wipro wipro.com confidential 25


Semantic Tags: Dividers
Horizontal Rule: <HR> is used to include a horizontal line wherever necessary. It has two attributes Align
and size to mention the alignment and the size of the line. It also has color attribute to mention the color
for the line. It is basically used to mark a clear differentiation between two texts.

<HR ALIGN=“left/center/right” SIZE=“” WIDTH=“” color=“”/>

© 2017 Wipro wipro.com confidential 26


Semantic Tags: Background and Colors
 The Background plays an important role in the presentation of information. There is a feature to add
colors and images as background. It can be achieved by two attributes “BACKGROUND” and
“BGCOLOR”

 The “BACKGROUND” attribute can be used to display an image as background. The value for this
attribute will the path to the file which is to be displayed as background.

 The “BGCOLOR” attribute helps in displaying a color as background.


To change background Image
<BODY BACKGROUND=“URL”>

To change background color


<BODY BGCOLOR= “COLOR” >

© 2017 Wipro wipro.com confidential 27


Semantic Tags: Special Characters
 There are certain characters that cannot be directly displayed on the screen, For example Copyright,
blank space.

 To display these kind of characters HTML provides a unique way. i.e. Use of ampersand symbol and
the character code or a specific code Defined in HTML.

Syntax:

&#char code; or &code;

© 2017 Wipro wipro.com confidential 28


Semantic Tags: Special Characters
Example:
< &th;
> &gt;
& &amp;
“ &quot;
Registered Trade &#174; or &reg;
mark
Copyright &#169; or &copy;
Non-Breaking space &nbsp;

© 2017 Wipro wipro.com confidential 29


Quiz
1.Which of the following is correct?

a. <b>Click Here<b>
b. <strong>Click Here<strong>
c. <b>Click Here</b>
d. </strong>Click Here</strong> <b>Click Here</b>

2. H1 is the smallest header tag.


a. True
False
b. False

© 2017 Wipro wipro.com confidential 30


Summary
 In this sub-module, we were able to

 Layout Tags
 Semantic Tags

© 2017 Wipro wipro.com confidential 31


Thank You

© 2017 Wipro wipro.com confidential 32

You might also like