Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
10 views

HTML CSS

Uploaded by

21p61a66g7
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views

HTML CSS

Uploaded by

21p61a66g7
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 56

1.

HTML – OVERVIEW HT

HTML stands for Hypertext Markup Language, and it is the most widely used language to
write Web Pages.

 Hypertext refers to the way in which Web pages (HTML documents) are linked
together. Thus, the link available on a webpage is called Hypertext.

 As its name suggests, HTML is a Markup Language which means you use HTML to
simply "mark-up" a text document with tags that tell a Web browser how to structure
it to display.

Originally, HTML was developed with the intent of defining the structure of documents like
headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information
between researchers.

Now, HTML is being widely used to format web pages with the help of different tags
available in HTML language.

Basic HTML Document


In its simplest form, following is an example of an HTML document:

Either you can use Try it option available at the top right corner of the code box to check
<!DOCTYPE html>
the result of this HTML code, or let's save it in an HTML file test.htm using your favorite
text editor. Finally open it using a web browser like Internet Explorer or Google Chrome, or
<html>
Firefox etc. It must show the following output:
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>

16
HTML

HTML Tags
As told earlier, HTML is a markup language and makes use of various tags to format the
content. These tags are enclosed within angle braces <Tag Name>. Except few tags, most
of the tags have their corresponding closing tags. For example, <html> has its closing
tag</html> and <body> tag has its closing tag </body> tag etc.

Above example of HTML document uses the following tags:

Tag Description

<!DOCTYPE...> This tag defines the document type and HTML version.

This tag encloses the complete HTML document and mainly


<html> comprises of document header which is represented by
<head>...</head> and document body which is represented by
<body>...</body> tags.

This tag represents the document's header which can keep other HTML
<head>
tags like <title>, <link> etc.

The <title> tag is used inside the <head> tag to mention the
<title>
document title.

This tag represents the document's body which keeps other HTML
<body>
tags like <h1>, <div>, <p> etc.

<h1> This tag represents the heading.

17
HTML

<p> This tag represents a paragraph.

To learn HTML, you will need to study various tags and understand how they behave, while
formatting a textual document. Learning HTML is simple as users have to learn the usage of
different tags in order to format the text or images to make a beautiful webpage.

World Wide Web Consortium (W3C) recommends to use lowercase tags starting from HTML
4.

HTML Document Structure


A typical HTML document will have the following structure:

We will study all the header and body tags in subsequent chapters, but for now let's see
Document declaration tag
what is document declaration tag.
<html>

The <head>
<!DOCTYPE> Declaration
Document header related tags
The <!DOCTYPE> declaration tag is used by the web browser to understand the version of
</head>
the HTML used in the document. Current version of HTML is 5 and it makes use of the
following declaration:

There<body>
are many other declaration types which can be used in HTML document depending on
<!DOCTYPE html>
what version of HTML
Document body isrelated
being used.
tags We will see more details on this while discussing
<!DOCTYPE...> tag along with other HTML tags.
</body>
</html>

18
2. HTML – BASIC TAGS HT

Heading Tags
Any document starts with a heading. You can use different sizes for your headings. HTML
also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>,
<h5>, and
<h6>. While displaying any heading, browser adds one line before and one line after that
heading.

Example
This will produce the following result:
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

19
HTML

Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph
of text should go in between an opening <p> and a closing </p> tag as shown below in the
example:

Example
This will produce the following result:
<!DOCTYPE html>
<html>
Here is a first paragraph of
<head>Here is a second paragraph
text.
<title>Paragraph
of Example</title>
text. Here is a third
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>

20
HTML

Line Break Tag


Whenever you use the <br /> element, anything following it starts from the next line. This
tag is an example of an empty element, where you do not need opening and closing tags,
as there is nothing to go in between them.

The <br /> tag has a space between the characters br and the forward slash. If you omit
this space, older browsers will have trouble rendering the line break, while if you miss the
forward slash character and just use <br> it is not valid in XHTML.

Example
This will produce the following result:
<!DOCTYPE html>
<html>
Hello
Centering
<head>
Content
You delivered your assignment on
time.
You Thanks
can use <center> tag to put any content in the center of the page or any table cell.
<title>Line Break Example</title>
Mahnaz
</head>
Example
<body>
<!DOCTYPE html>
<p>Hello<br />
<html>
You delivered your assignment on
<head>
time.<br /> Thanks<br />
Mahnaz</p>
</body>
</html>

21
HTML

<title>Centring Content Example</title>


</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
This will produce the following result:

This text is not in the center.

This text is in the center.

Horizontal Lines
Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates
a line from the current position in the document to the right margin and breaks the line
accordingly.

For example, you may want to give a line between two paragraphs as in the given example
below:

Example

<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>

22
HTML

This will produce the following result:

This is paragraph one and should be on top

This is paragraph two and should be at bottom

Again <hr /> tag is an example of the empty element, where you do not need opening
and closing tags, as there is nothing to go in between them.

The <hr /> element has a space between the characters hr and the forward slash. If you
omit this space, older browsers will have trouble rendering the horizontal line, while if you
miss the forward slash character and just use <hr> it is not valid in XHTML

Preserve Formatting
Sometimes, you want your text to follow the exact format of how it is written in the HTML
document. In these cases, you can use the preformatted tag <pre>.

Any text between the opening <pre> tag and the closing </pre> tag will preserve the
formatting of the source document.

Example
This will produce the following result:
<!DOCTYPE html>
function testFunction( strText ){
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function
testFunction( strText ){
alert (strText)
}
</pre>
</body>

23
HTML

alert (strText)

Try using the same code without keeping it inside <pre>...</pre> tags

Nonbreaking Spaces
Suppose you want to use the phrase "12 Angry Men." Here, you would not want a browser to
split the "12, Angry" and "Men" across two lines:

In cases, where you do not want the client browser to break text, you should use a
An example of this technique appears in the movie "12 Angry Men."
nonbreaking space entity &nbsp; instead of a normal space. For example, when coding the
"12 Angry Men" in a paragraph, you should use something similar to the following code:

Example

<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie "12&nbsp;Angry&nbsp;Men."</p>
</body>
</html>

24
3. HTML – ELEMENTS
HT

An HTML element is defined by a starting tag. If the element contains other content, it
ends with a closing tag, where the element name is preceded by a forward slash as shown
below with few tags:

Start Tag Content End Tag

<p> This is paragraph content. </p>

<h1> This is heading content. </h1>

<div> This is division content. </div>

<br />

So here <p>....</p> is an HTML element, <h1>...</h1> is another HTML element. There


are some HTML elements which don't need to be closed, such as <img.../>, <hr /> and
<br /> elements. These are known as void elements.

HTML documents consists of a tree of these elements and they specify how HTML
documents should be built, and what kind of content should be placed in what part of an
HTML document.

HTML Tag vs. Element


An HTML element is defined by a starting tag. If the element contains other content, it ends
with a closing tag.

For example, <p> is starting tag of a paragraph and </p> is closing tag of the same
paragraph but <p>This is paragraph</p> is a paragraph element.

25
4. HTML – ATTRIBUTES HT

We have seen few HTML tags and their usage like heading tags <h1>, <h2>, paragraph tag
<p> and other tags. We used them so far in their simplest form, but most of the HTML tags
can also have attributes, which are extra bits of information.

An attribute is used to define the characteristics of an HTML element and is placed inside the
element's opening tag. All attributes are made up of two parts: a name and a value:

 The name is the property you want to set. For example, the paragraph <p> element
in the example carries an attribute whose name is align, which you can use to
indicate the alignment of paragraph on the page.

 The value is what you want the value of the property to be set and always put
within quotations. The below example shows three possible values of align attribute:
left, center and right.

Attribute names and attribute values are case-insensitive. However, the World Wide Web
Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4
recommendation.

Example
This will display the following result:
<!DOCTYPE html>
<html>
This is left aligned
<head> This is center
<title>Align Attribute Example</title>
</head>
<body>
<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>
</body>
</html>

26
HTML

This is right aligned

Core Attributes
The four core attributes that can be used on the majority of HTML elements (although not
all) are:

 Id
 Title
 Class
 Style

The Id Attribute
The id attribute of an HTML tag can be used to uniquely identify any element within an
HTML page. There are two primary reasons that you might want to use an id attribute on an
element:

 If an element carries an id attribute as a unique identifier, it is possible to identify


just that element and its content.

 If you have two elements of the same name within a Web page (or style sheet), you
can use the id attribute to distinguish between elements that have the same name.

We will discuss style sheet in separate tutorial. For now, let's use the id attribute to
distinguish between two paragraph elements as shown below.

Example

<p id="html">This para explains what is HTML</p>


The title Attribute
<p id="css">This para explains what is Cascading Style Sheet</p>
The title attribute gives a suggested title for the element. They syntax for the title attribute
is similar as explained for id attribute:

The behavior of this attribute will depend upon the element that carries it, although it is
often displayed as a tooltip when cursor comes over the element or while the element is
loading.

Example

<!DOCTYPE html>
<html>
<head>

27
HTML

<title>The title Attribute Example</title>


</head>
<body>
<h3 title="Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>

This will produce the following result:

Now try to bring your cursor over "Titled Heading Tag Example" and you will see that whatever
Titled
title you usedHeading Tag
in your code Example
is coming out as a tooltip of the cursor.

The class Attribute


The class attribute is used to associate an element with a style sheet, and specifies the
class of element. You will learn more about the use of the class attribute when you will learn
Cascading Style Sheet (CSS). So for now you can avoid it.

The value of the attribute may also be a space-separated list of class names. For example:

class="className1 className2 className3"


The style Attribute
The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element.

This will produce the following result:


<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style="font-family:arial; color:#FF0000;">Some text...</p>
</body>
</html>

28
HTML

Some text...

At this point of time, we are not learning CSS, so just let's proceed without bothering much
about CSS. Here, you need to understand what are HTML attributes and how they can be
used while formatting content.

Internationalization Attributes
There are three internationalization attributes, which are available for most (although not
all) XHTML elements.

 dir
 lang
 xml:lang

The dir Attribute


The dir attribute allows you to indicate to the browser about the direction in which the text
should flow. The dir attribute can take one of two values, as you can see in the table that
follows:

Value Meaning

ltr Left to right (the default value)

rtl Right to left (for languages such as Hebrew or Arabic that are read right to left)

Example
This will produce the following result:
<!DOCTYPE html>
<html dir="rtl">
<head>
<title>Display Directions</title>
</head>
<body>
This is how IE 5 renders right-to-left directed text.
</body>
</html>

29
HTML

This is how IE 5 renders right-to-left directed


When dir attribute is used within the <html> tag, it determines how text will be presented
within the entire document. When used within another tag, it controls the text's direction for
just the content of that tag.

The lang Attribute


The lang attribute allows you to indicate the main language used in a document, but this
attribute was kept in HTML only for backwards compatibility with earlier versions of HTML.
This attribute has been replaced by the xml:lang attribute in new XHTML documents.

The values of the lang attribute are ISO-639 standard two-character language codes. Check
HTML Language Codes: ISO 639 for a complete list of language codes.

Example

<!DOCTYPE html>
The xml:lang Attribute
<html
The lang="en">
xml:lang attribute is the XHTML replacement for the lang attribute. The value of
thexml:lang
<head> attribute should be an ISO-639 country code as mentioned in previous section.
<title>English Language Page</title>
Generic
</head> Attributes
Here's a table of some other attributes that are readily usable with many of the HTML tags.
<body>
This page is using English Language
Attribute Options Function
</body>
</html>
align right, left, center Horizontally aligns tags

30
HTML

valign top, middle, bottom Vertically aligns tags within an HTML


element.

bgcolor numeric, hexidecimal, RGB Places a background color behind an


values element

background URL Places a background image behind an


element

id User Defined Names an element for use with Cascading


Style Sheets.

class User Defined Classifies an element for use with


Cascading Style Sheets.

width Numeric Value Specifies the width of tables, images, or


table cells.

height Numeric Value Specifies the height of tables, images, or


table cells.

title User Defined "Pop-up" title of the elements.

We will see related examples as we will proceed to study other HTML tags. For a complete
list of HTML Tags and related attributes please check reference to HTML Tags List.

31
5. HTML – FORMATTING HT

If you use a word processor, you must be familiar with the ability to make text bold,
italicized, or underlined; these are just three of the ten options available to indicate how
text can appear in HTML and XHTML.

Bold Text
Anything that appears within <b>...</b> element, is displayed in bold as shown below:

Example
This will produce the following result:
<!DOCTYPE html>
<html>
The following word uses a bold typeface.
Italic Text
<head>
Anything that appears within <i>...</i> element is displayed in italicized as shown below:
<title>Bold Text Example</title>
</head>
Example
<body>
<!DOCTYPE html> word uses a <b>bold</b> typeface.</p>
<p>The following
<html>
</body>
<head>
</html>
<title>Italic Text Example</title>
</head>

32
HTML

<body>
<p>The following word uses a <i>italicized</i> typeface.</p>
</body>
</html>

This will produce the following result:

The following word uses an italicized typeface.


Underlined Text
Anything that appears within <u>...</u> element, is displayed with underline as shown
below:

Example
This will produce the following result:
<!DOCTYPE html>
The following word uses an underlined typeface.
<html>
<head>
Strike Text
<title>Underlined Text Example</title>
Anything that appears within <strike>...</strike> element is displayed with
</head>
strikethrough, which is a thin line through the text as shown below:
<body>
Example
<p>The following word uses a <u>underlined</u> typeface.</p>
</body>
<!DOCTYPE html>
</html>
<html>
<head>

33
HTML

<title>Strike Text Example</title>


</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>

This will produce the following result:

The following word uses a strikethrough typeface.

Monospaced Font
The content of a <tt>...</tt> element is written in monospaced font. Most of the fonts are
known as variable-width fonts because different letters are of different widths (for example,
the letter 'm' is wider than the letter 'i'). In a monospaced font, however, each letter has
the same width.

Example
This will produce the following result:
<!DOCTYPE html>
<html>
The following word uses a monospaced typeface.
Superscript Text
<head>
The content of a <sup>...</sup> element is written in superscript; the font size used is
<title>Monospaced
the same size as theFont Example</title>
characters surrounding it but is displayed half a character's height
above the
</head> other characters.
<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>

34
HTML

Example
This will produce the following result:
<!DOCTYPE html>
<html>
The following word uses a superscript
typeface.
Subscript
<head>
Text
The content of a <sub>...</sub> element is written in subscript; the font size used is the
<title>Superscript
same as the charactersText Example</title>
surrounding it, but is displayed half a character's height beneath the
other characters.
</head>
<body>
Example
<p>The following word uses a <sup>superscript</sup> typeface.</p>
This will produce the following result:
</body>
<!DOCTYPE html>
The following word uses a subscript typeface.
</html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>

35
HTML

Inserted Text
Anything that appears within <ins>...</ins> element is displayed as inserted text.

Example
This will produce the following result:
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
Deleted Text
</head>
Anything that appears within <del>...</del> element, is displayed as deleted text.
<body>

Example
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
This will produce the following result:
</body>
<!DOCTYPE html>
</html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>

36
HTML

Larger Text
The content of the <big>...</big> element is displayed one font size larger than the rest
of the text surrounding it as shown below:

Example
This will produce the following result:
<!DOCTYPE html>
<html>
The following word uses a big typeface.
Smaller Text
<head>
The content of the <small>...</small> element is displayed one font size smaller than the
<title>Larger
rest Text Example</title>
of the text surrounding it as shown below:
</head>
Example
<body>
<p>The following word uses a <big>big</big> typeface.</p>
<!DOCTYPE html>
</body>
<html>
</html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>

37
HTML

</html>

This will produce the following result:

The following word uses a small typeface.


Grouping Content
The <div> and <span> elements allow you to group together several elements to create
sections or subsections of a page.

For example, you might want to put all of the footnotes on a page within a <div> element
to indicate that all of the elements within that <div> element relate to the footnotes. You
might then attach a style to this <div> element so that they appear using a special set of
style rules.

Example
This will produce the following result:
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id="menu" align="middle" >
<a href="/index.htm">HOME</a> |
<a href="/about/contact_us.htm">CONTACT</a> |
<a href="/about/index.htm">ABOUT</a>
</div>

<div id="content" align="left" bgcolor="white">


<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>

38
HTML

HOME | CONTACT |
ABOUT

CONTENT ARTICLES

Actual content goes here.....

The <span> element, on the other hand, can be used to group inline elements only. So, if
you have a part of a sentence or paragraph which you want to group together, you could

Example
This will produce the following result:
<!DOCTYPE html>
This is the example of span tag and the div tag along with CSS
<html>
These tags are commonly used with CSS to allow you to attach a style to a section of a page.
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style="color:green">span tag</span> and the
<span style="color:red">div tag</span> alongwith CSS</p>
</body>
</html>

39
6. HTML – PHRASE TAGS HT

The phrase tags have been desicolgned for specific purposes, though they are displayed in a
similar way as other basic tags like <b>, <i>, <pre>, and <tt>, you have seen in
previous chapter. This chapter will take you through all the important phrase tags, so let's
start seeing them one by one.

Emphasized Text
Anything that appears within <em>...</em> element is displayed as emphasized text.

Example
This will produce the following result:
<!DOCTYPE html>
The following word uses an emphasized typeface.
<html>
<head>
Marked Text
<title>Emphasized Text Example</title>
Anything that appears with-in <mark>...</mark> element, is displayed as marked with
</head>
yellow ink.
<body>
Example
<p>The following word uses a <em>emphasized</em> typeface.</p>
</body>
<!DOCTYPE html>
</html>
<html>
<head>
<title>Marked Text Example</title>

40
HTML

</head>
<body>
<p>The following word has been <mark>marked</mark> with yellow</p>
</body>
</html>

This will produce the following result:

The following word has been marked with yellow.

Strong Text
Anything that appears within <strong>...</strong> element is displayed as important text.

Example
This will produce the following result:
<!DOCTYPE html>
The following word uses a strong typeface.
<html>
<head>
Text Abbreviation
<title>Strong Text Example</title>
You can abbreviate a text by putting it inside opening <abbr> and closing </abbr> tags. If
</head>
present, the title attribute must contain this full description and nothing else.
<body>
Example
<p>The following word uses a <strong>strong</strong> typeface.</p>
</body>
<!DOCTYPE html>
</html>
<html>
<head>

41
HTML

<title>Text Abbreviation</title>
</head>
<body>
<p>My best friend's name is <abbr title="Abhishek">Abhy</abbr>.</p>
</body>
</html>

This will produce the following result:

My best friend's name is Abhy.

Acronym Element
The <acronym> element allows you to indicate that the text between <acronym> and
</acronym> tags is an acronym.

At present, the major browsers do not change the appearance of the content of the
<acronym> element.

Example
This will produce the following result:
<!DOCTYPE html>
<html>
This chapter covers marking up text in XHTML.
<head>

Text DirectionExample</title>
<title>Acronym
</head>
The <bdo>...</bdo> element stands for Bi-Directional Override and it is used to override
the current
<body> text direction.

<p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>


</body>
</html>

42
HTML

Example
This will produce the following result:
<!DOCTYPE html>
This text will go left to right.
<html>
This text will go right to left.
<head>
<title>Text Direction Example</title>
Special
</head>
Terms
The <dfn>...</dfn> element (or HTML Definition Element) allows you to specify that you
<body>
are introducing a special term. It's usage is similar to italic words in the midst of a
<p>This text will go left to right.</p>
paragraph.
<p><bdo dir="rtl">This text will go right to left.</bdo></p>
Typically, you would use the <dfn> element the first time you introduce a key term. Most
recent browsers render the content of a <dfn> element in an italic font.
</body>
</html>
Example
This will produce the following result:
<!DOCTYPE html>
<html>
<head>
<title>Special Terms Example</title>
</head>
<body>
<p>The following word is a <dfn>special</dfn> term.</p>
</body>
</html>

43
HTML

The following word is a special term.

Quoting Text
When you want to quote a passage from another source, you should put it in
between<blockquote>...</blockquote> tags.

Text inside a <blockquote> element is usually indented from the left and right edges of the
surrounding text, and sometimes uses an italicized font.

Example
This will produce the following result:
<!DOCTYPE html>
The following description of XHTML is taken from the W3C Web site:
<html>
<head>
XHTML 1.0 is the W3C's first Recommendation for XHTML, following on from
Short Quotations
earlier work on HTML
<title>Blockquote 4.01, HTML 4.0,
Example</title> HTML 3.2 and HTML 2.0.
The <q>...</q> element is used when you want to add a double quote within a sentence.
</head>
<body>
Example
<p>The following description of XHTML is taken from the W3C Web site:</p>
<!DOCTYPE html>
<html>
<blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML, following on
from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
<head>
</body>
</html>

44
HTML

<title>Double Quote Example</title>


</head>
<body>
<p>Amit is in Spain, <q>I think I am wrong</q>.</p>
</body>
</html>

This will produce the following result:

Amit is in Spain, I think I am wrong.

Text Citations
If you are quoting a text, you can indicate the source placing it between an opening <cite>tag
and closing </cite> tag

As you would expect in a print publication, the content of the <cite> element is rendered in
italicized text by default.

Example
This will produce the following result:
<!DOCTYPE html>
This HTML tutorial is derived from W3 Standard for HTML.
<html>
<head>
Computer CodeExample</title>
<title>Citations
Any programming code to appear on a Web page should be placed
</head>
inside <code>...</code>tags. Usually the content of the <code> element is presented in
<body>
a monospaced font, just like the code in most programming books.
<p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
</body>
</html>

45
HTML

Example
This will produce the following result:
<!DOCTYPE html>
Regular text. This is code. Regular text.
<html>
<head>
Keyboard Text
<title>Computer Code Example</title>
When you are talking about computers, if you want to tell a reader to enter some text, you
</head>
can use the <kbd>...</kbd> element to indicate what should be typed in, as in this
example.
<body>
<p>Regular text. <code>This is code.</code> Regular text.</p>
Example
</body>
This will produce the following result:
</html>
<!DOCTYPE html>
Regular text. This is inside kbd element Regular text.
<html>
<head>
<title>Keyboard Text Example</title>
</head>
<body>
<p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
</body>
</html>

46
HTML

Programming Variables
This element is usually used in conjunction with the <pre> and <code> elements to
indicate that the content of that element is a variable.

Example
This will produce the following result:
<!DOCTYPE html>
document.write("user-name")
<html>
<head>
Program Output
<title>Variable Text Example</title>
The <samp>...</samp> element indicates sample output from a program, and script etc.
</head>
Again, it is mainly used when documenting programming or coding concepts.
<body>
Example
<p><code>document.write("<var>user-name</var>")</code></p>
This will produce the following result:
</body>
<!DOCTYPE html>
Result produced by the program is Hello World!
</html>
<html>
<head>
<title>Program Output Example</title>
</head>
<body>
<p>Result produced by the program is <samp>Hello World!</samp></p>
</body>
</html>

47
HTML

Address Text
The <address>...</address> element is used to contain any address.

Example
This will produce the following result:
<!DOCTYPE html>
388A, Road No 22, Jubilee Hills - Hyderabad
<html>
<head>
<title>Address Example</title>
</head>
<body>
<address>388A, Road No 22, Jubilee Hills - Hyderabad</address>
</body>
</html>

48
7. HTML – META TAGS HT

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.

You can include one or more meta tags in your document based on what information you
want to keep in your document but in general, meta tags do not impact physical appearance
of the document so from appearance point of view, it does not matter if you include them or
not.

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:

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

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.

49
HTML

Example
Following is an example, where we are adding HTML, Meta Tags, Metadata as important
keywords about the document.

This will produce the following result:


<!DOCTYPE html>
<html>
Hello HTML5!
Document
<head> Description
You can use <meta>
<title>Meta tag to give a short description about the document. This again can be
Tags Example</title>
used by various search engines while indexing your webpage for searching purpose.
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
Example
</head>
<body>
<!DOCTYPE html>
<p>Hello HTML5!</p>
<html>
</body>
<head>
</html>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>

50
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.

Example

<!DOCTYPE html>
Document Refreshing
<html>
A <meta> tag can be used to specify a duration after which your web page will keep refreshing
automatically.
<head>
<title>Meta Tags Example</title>
Example
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
If you want your page keep refreshing after every 5 seconds then use the following syntax.
<meta name="description" content="Learning about Meta Tags." />
<meta name="revised"
<!DOCTYPE html> content="Tutorialspoint, 3/7/2014" />
</head>
<html>
<body>
<head>
<p>Hello HTML5!</p>
<title>Meta Tags Example</title>
</body>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
</html>
<meta name="description" content="Learning about Meta Tags." />
<meta name="revised" content="Tutorialspoint, 3/7/2014" />
<meta http-equiv="refresh" content="5" />

51
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.

Example
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.

<!DOCTYPE html>
Setting Cookies
<html>
Cookies are data, stored in small text files on your computer and it is exchanged between
<head>
web browser and web server to keep track of various information based on your web
application need.
<title>Meta Tags Example</title>
You can name="keywords"
<meta use <meta> tag content="HTML,
to store cookiesMetaon client
Tags, side and later
Metadata" /> this information can be
used by the Web Server to track a site visitor.
<meta name="description" content="Learning about Meta Tags." />
<meta name="revised" content="Tutorialspoint, 3/7/2014" />
<meta http-equiv="refresh" content="5; url=http://www.tutorialspoint.com" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>

52
HTML

Example
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.

<!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" />

53
HTML

HTML - TABLES
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. The elements under <td> are regular and left
aligned by default

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 deprecated in newer version of HTML/XHTML.

Cellpadding and Cellspacing Attributes


There are two attributes called cellpadding and cellspacing which you will
use to adjust the white space in your table cells. The cellspacing attribute defines
space between table cells, while cellpadding represents the distance between cell
borders and the content within a cell.

Colspan and Rowspan Attributes


colspan attribute if you want to merge two or more columns into a single
column. Similar way you will use rowspan if you want to merge two or more rows.

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.

Table Height and Width


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.

54
HTML

<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<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>

<html>
<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 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>
55
HTML
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>

Table Header, Body, and Footer


Tables can be divided into three portions − a header, a body, and a foot. The head
and foot are rather similar to headers and footers in a word-processed document
that remain the same for every page, while the body is the main content holder of
the table.

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>

56
HTML
<html>

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

<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>

<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>

<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>

</table>
</body>

</html>

57
HTML
HTML – LISTS

HTML lists allow web developers to group a set of related items in lists.

<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.

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 for each successive unordered list element tagged with <li>.

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 −

<ul type = "square / disc / circle">

<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = " square / disc / circle ">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>

</html>

58
HTML
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>.

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 −
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.

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 −
<ol type = "1" start = "4"> - Numerals starts with 4.
<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.

<html>
<head>
<title>HTML Ordered List</title>
</head>

<body>
<ol type = "i" start = "4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

59
HTML
HTML Definition Lists
HTML and XHTML supports 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

<html>

<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>

60
HTML
HTML – FRAMES

Disadvantages of Frames

 Some smaller devices cannot cope with frames often because their screen is
not big enough to be divided up.
 Sometimes your page will be displayed differently on different computers
due to different screen resolution.
 The browser's back button might not work as the user hopes.
 There are still few browsers that do not support frame technology.

Creating Frames
To use frames on a page we use <frameset> tag instead of <body> tag. The
<frameset> tag defines, how to divide the window into frames. The rows attribute
of <frameset> tag defines horizontal frames and cols attribute defines vertical
frames. Each frame is indicated by <frame> tag and it defines which HTML
document shall open into the frame.

<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "" >
<frame name = "main" src = “”>
<frame name = "bottom" src=””>
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>

The <frameset> Tag Attributes


1 cols Specifies how many columns are contained in the frameset and the size of
each column. You can specify the width of each column in one of the four ways −

Absolute values in pixels. For example, to create three vertical frames, use cols =
"100, 500, 100".

61
HTML
A percentage of the browser window. For example, to create three vertical frames,
Using a wildcard symbol. For example, to create three vertical frames, use cols =
"10%, *, 10%". In this case wildcard takes remainder of the window.

As relative widths of the browser window. For example, to create three vertical
frames, use cols = "3*, 2*, 1*". This is an alternative to percentages

2 rows This attribute works just like the cols attribute and takes the same values,
but it is used to specify the rows in the frameset. For example, to create two
horizontal frames, use rows = "10%, 90%". You can specify the height of each row
in the same way as explained above for columns.

3 border This attribute specifies the width of the border of each frame in pixels.
For example, border = "5". A value of zero means no border.

4 frameborder This attribute specifies whether a three-dimensional border should


be displayed between frames. This attribute takes value either 1 (yes) or 0 (no). For
example frameborder = "0" specifies no border.

5 framespacing This attribute specifies the amount of space between frames in a


frameset. This can take any integer value. For example framespacing = "10" means
there should be 10 pixels spacing between each frames.

The <frame> Tag Attributes


1 src This attribute is used to give the file name that should be loaded in the frame.
Its value can be any URL. For example, src = "/html/top_frame.htm" will load an
HTML file available in html directory.

2 name This attribute allows you to give a name to a frame. It is used to indicate
which frame a document should be loaded into. This is especially important when
you want to create links in one frame that load pages into an another frame, in
which case the second frame needs a name to identify itself as the target of the
link.

3 frameborder This attribute specifies whether or not the borders of that frame are
shown; it overrides the value given in the frameborder attribute on the <frameset>
tag if one is given, and this can take values either 1 (yes) or 0 (no).

4 marginwidth This attribute allows you to specify the width of the space between
the left and right of the frame's borders and the frame's content. The value is given
62
HTML
in pixels. For example marginwidth = "10".

5 marginheight This attribute allows you to specify the height of the space
between the top and bottom of the frame's borders and its contents. The value is
given in pixels. For example marginheight = "10".

6 noresize By default, you can resize any frame by clicking and dragging on the
borders of a frame. The noresize attribute prevents a user from being able to resize
the frame. For example noresize = "noresize".

7 scrolling This attribute controls the appearance of the scrollbars that appear on
the frame. This takes values either "yes", "no" or "auto". For example scrolling =
"no" means it should not have scroll bars.

8 longdesc This attribute allows you to provide a link to another page containing a
long description of the contents of the frame. For example longdesc =
"framedescription.htm"

63
HTML
HTML – MARQUEES

An HTML marquee is a scrolling piece of text displayed either horizontally


across or vertically down your webpage depending on the settings. This is created
by using HTML <marquees> tag.

1 width This specifies the width of the marquee. This can be a value like 10 or
20% etc.

2 height This specifies the height of the marquee. This can be a value like 10 or
20% etc.

3 direction This specifies the direction in which marquee should scroll. This can
be a value like up, down, left or right.

4 behavior This specifies the type of scrolling of the marquee. This can have a
value like scroll, slide and alternate.

5 scrolldelay This specifies how long to delay between each jump. This will have
a value like 10 etc.

6 scrollamount This specifies the speed of marquee text. This can have a value
like 10 etc.

7 loop This specifies how many times to loop. The default value is INFINITE,
which means that the marquee loops endlessly.

8 bgcolor This specifies background color in terms of color name or color hex
value.

9 hspace This specifies horizontal space around the marquee. This can be a value
like 10 or 20% etc.

10 vspace This specifies vertical space around the marquee. This can be a value
like 10 or 20% etc.

64
HTML
HTML STYLES – CSS

Cascading Style Sheets (CSS) is used to format the layout of a webpage.


With CSS, you can control the color, font, the size of text, the spacing between
elements, how elements are positioned and laid out, what background images or
background colors are to be used, different displays for different devices and
screen sizes, etc.,

CSS can be added to HTML documents in 3 ways:

 Inline - by using the style attribute inside HTML elements


 Internal - by using a <style> element in the <head> section
 External - by using a <link> element to link to an external CSS file

Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.

<h1 style="color:blue; font-size=20">A Blue Heading</h1>


<p style="color:red;">A red paragraph.</p>

Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within a
<style> element.

<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
65
HTML
External CSS
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the <head> section of each HTML
page:

<style> Defines style information for an HTML document


<link> Defines a link between a document and an external resource

File name: styles.css


body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}

File name: styles.htm


<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

The CSS color property defines the text color to be used.


The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.
The CSS border property defines a border around an HTML element.
The CSS padding property defines a padding (space) between the text and the
border.
The CSS margin property defines a margin (space) outside the border.

Using The id Attribute


The id attribute specifies a unique id for an HTML element. The value of the id
attribute must be unique within the HTML document.

The id attribute is used to point to a specific style declaration in a style sheet. It is


also used by JavaScript to access and manipulate the element with the specific id.

The syntax for id is: write a hash character (#), followed by an id name. Then,
66
HTML
define the CSS properties within curly braces {}.

In the bellow example we have an <h1> element that points to the id name
"myHeader". This <h1> element will be styled according to the #myHeader style
definition in the head section:
<html>
<head>
<style>
#myHeader
{
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
</body>
</html>
Using The class Attribute
The class attribute is often used to point to a class name in a style sheet. It can also
be used by a JavaScript to access and manipulate elements with the specific class
name.

In the bellow example we have three <div> elements with a class attribute with the
value of "city". All of the three <div> elements will be styled equally according to
the .city style definition in the head section:
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
67
HTML
</head>
<body>

<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>

<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>

<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>

68
HTML
HTML FORMS
An HTML form is used to collect user input. The user input is most often sent to a
server for processing.
The HTML <form> element is used to create an HTML form for user input.
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type
attribute.

Type Description

<input type="text"> Displays a single-line text input field

<input type="password"> Displays a single-line password input field

<input type="radio"> Displays a radio button (for selecting one of


many choices)

<input type="checkbox"> Displays a checkbox (for selecting zero or more


of many choices)

<input type="submit"> Displays a submit button (for submitting the


form)

<input type="button"> Displays a clickable button

name attribute Specifies the name of the form

Form Attributes

The Action Attribute


The action attribute defines the action to be performed when the form is submitted.
Usually, the form data is sent to a file on the server when the user clicks on the
submit button.

69
HTML

The Target Attribute


The target attribute specifies where to display the response that is received after
submitting the form.
The target attribute can have one of the following values

Value Description

_blank The response is displayed in a new window or tab

_self The response is displayed in the current window

_parent The response is displayed in the parent frame

_top The response is displayed in the full body of the window

framename The response is displayed in a named iframe

The Method Attribute


The method attribute specifies the HTTP method to be used when submitting the
form data.

The form-data can be sent as URL variables (with method="get") or as HTTP post
transaction (with method="post").

The default HTTP method when submitting form data is GET.

Notes on GET:
Appends the form data to the URL, in name/value pairs
NEVER use GET to send sensitive data! (the submitted form data is visible in the
URL!)
The length of a URL is limited (2048 characters)
Useful for form submissions where a user wants to bookmark the result

70
HTML
GET is good for non-secure data, like query strings in Google

Notes on POST:
Appends the form data inside the body of the HTTP request (the submitted form
data is not shown in the URL)
POST has no size limitations, and can be used to send large amounts of data.
Form submissions with POST cannot be bookmarked
Tip: Always use POST if the form data contains sensitive or personal information!

71

You might also like