INTRODUCTION TO HTML


Introduction to HTML

Now these days, internet is the part of our life. The Internet is a global system of interconnected computer networks that use the standard Internet protocol suite(TCP/IP) to link several billion devices worldwide. Internet provides many services such as email,information,chatting and many more. All these things can retrieved from web sites(collection of web pages).Web pages are made from HTML.

Tim Berners-Lee was the primary author of html, assisted by his colleagues at CERN(counsil European pourla recherché nucleare), an international scientific organization based in Geneva, Switzerland. Tim Berners-Lee is currently the Director of the World Wide Web Consortium, the group that sets technical standards for the Web. html was strongly based on SGML (Standard Generalized Mark-up Language), an internationally agreed upon method for marking up text into structural units such as paragraphs, headings, list items and so on. SGML could be implemented on any machine.

Definition

HyperText Markup Language (HTML) is a language to specify the structure of documents for retrieval across the Internet using browser programs of the WorldWideWeb.HTML is the “hidden” code that helps us communicate with others on the World Wide Web (WWW). When writing HTML, you add “tags” to the text in order to create the structure. These tags tell the browser how to display the text or graphics in the document.

HTML is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet. It is relatively easy to learn, with the basics being accessible to most people in one sitting; and quite powerful in what it allows you to create

KKKKK

The definition of HTML is HyperText Markup Language.

HyperText  is the method by which you move around on the web — by clicking on special text called hyperlinks which bring you to the next page. The fact that it ishyper just means it is not linear — i.e. you can go to any place on the Internet whenever you want by clicking on links — there is no set order to do things in.

Markup comprises a set of symbols, or a language, that can be used to provide instructions. The use of markup is supported by rules that define the symbols and how they should be used: a specification.

A webpage is created by marking-up content (text, images, etc.) using the HyperText Markup Language (HTML).

The markup provides instructions to the software used for viewing a webpage (web browser) on how the page should look and work.

.

HTML is a Language, as it has code-words and syntax like any other language

 

Why it is called markup language?

HTML is actually used creating static pages. What we do using HTML is we just write what should come in the required place of the HTML document. Markup means to structure it in a specific format. So HTML is Structuring of contents using machine readable text. It is just to display static pages. So we should design the contents and area where it should be displayed.

Markup language is a set of markup tags. HTML uses markup tags to describe web pages.
Markup language is a text-formatting language designed to transform raw text into structured documents, by inserting procedural and descriptive markup into the raw text.
Markup is what HTML do to the text inside them. They mark it as a certain type of text(like bold, italic, underline etc).

 

 

 

HTML VERSIONS FAMILY


 

HTML 1.0 (1989 – 1994)

HTML 1.0 was the first release of HTML to the world. Not many people were involved in website creation at the time, and the language was very limiting. There really wasn’t much you could do with it bar getting some simple text onto the web.

IT IS Released by: tim berners lee and CERN team. HTML 1.0 was very limited in terms of styling and presentation of content. In HTML 1.0, for example, you could not:

use tables or frames,

specify fonts,

change page background, or

use forms

Because of these limitations, every web page created with HTML 1.0 looked the same with similar background and the type of font used.

HTML 2.0 (1995)

HTML 2.0 included everything from the original 1.0 specifications but added a few new features to the mix. HTML 2.0 was the standard for website design until January 1997 and defined many core HTML features for the first time

Released by:IETF(INTERNET ENGINEERING TASK FORCE)

It also supported:

forms with limited set of form elements such as text boxes, and option buttons

change of page background

use of tables

 

HTML 3.20 (1997)

HTML 3.20 was the next official version, integrating support for TABLES, image, heading and other element ALIGN attributes, and a few other finicky details. HTML 3.2 is the current “universal” dialect — essentially all browsers understand HTML 3.2. IT was, however, missing some of the Netscape/Microsoft extensions, such as FRAMEs, EMBED and APPLET.

 

 

HTML 4.01 (1999)

This version added support for style sheets and scripting ability for multimedia elements. HTML 4.01 focused on separating presentation styling information from the actual content by the use of style sheets as HTML 3.20 resulted in difficult maintenance because presentation styling information was included directly in the webpage. In HTML 4.0 with the use of style sheets, it is now possible to change the appearance/look of the website by changing just the style sheet (s) itself. In comparison, in the earlier versions of HTML making the same changes for the entire website meant changing the styling information in the individual pages

HTML5 IS THE NEWEST VERSION OF HTML. IT IS DEVELOPED BY WORLD WIDE WEB AND WHATWG(web hypertext application technology working group). It extended to XHTML5 (XML-serialized HTML5).

Html attributes

Tags can also have attributes, which are extra bits of information. Attributes appear inside the opening tag and their values sit inside quotation marks. There many types of attributes used in html to make attractive web pages(discuss with all tags).

For example:

<p align=”right” >For instance, let’s say you had a HUGE school or work…</p>

In this above example, you can see align attribute in the tag, shows alignment of this paragraph will be start from right side

Output:

 

 

Html elements

an element is the basic building block of HTML and is typically made up of two tags: an opening tag and a closing tag.

Most HTML elements have an opening tag and a closing tag. These tags surround the text that will display on the web page. For example, the paragraph tag has an opening tag: <p>and a closing tag: </p>. To write a paragraph of text, you write the text to display on the page and then surround it with these tags:

<p>
This is a paragraph that will display on the web page. It is surrounded by opening and closing paragraph tags.
</p>

You can use elements within elements is called nesting elements.

For example:

<p> I am in <b>paragraph</b></p>

 

 

HTML TAGS

HTML markup tags are usually called HTML tags.

All tags have the same format:

they begin with a less-than sign “<”

and

end with a greater-than sign “>” and it is also called angle brackets like <html>.

there are two kinds of tags:

1 PAIRED tags: which have opening tags: <html> and closing tags: </html> are called paired tags.

The only difference between an opening tag and a closing tag is the forward slash “/”.

For example:

<h1>   ………..   </h1>

<p>   …………………….</p>

 

2 singular tag: which have only opening tag like <br>, <hr> etc.(discuss later) Are called singular tag.

 

Basic HTML Web Page Structure


An HTML document has three main parts: the head, the body and the tags. But firstly every HTML document should start by declaring that it is an HTML document.

For example:

<html>

<head>

….

</head>

<body>

….

<body>

</html>

 

1 head

The header of an HTML document where information about the document is placed. You must use the title element within the head element and meta, style, script, base and link can also be used.

You must use this element and it should be used just once. It must start immediately after the opening html tag and end directly before the opening body tag.

<html>

<head>

<title> website1<title>

</head>

 

</html>

In the above example, you can see the title tag , which the web browser may use to display in the page’s tab or title bar.

these are the list of tag which comes under HEAD tag which will be explain in present tutorial individually.

Title tag

Meta tag

Script tag

Link tag
1.1 <TITLE>…</TITLE>

Indicates the title of the document and appears in a browser’s bookmark file.

For example:

<title> website1<title>

Website1 will displayed in the  browser toolbar when page loads.

1.2 <meta> tag

Basically , it contains information about the web page. Suppose you want to specify decription about the web site you can use like this:

<meta name=”description” content=”In this article I will cover the HTML head section and tags within this section. I will discuss how to use the different tags and write some examples to demonstrate the functionality.” />

<meta> tag is also useful for SEO(search engine optimization techniques)

1.3 Script tag

This tag is used to include client side script in HTML. The script element either contains scripting statements i.e JavaScript/VBscript/CSSscript.(discuss more in javascript chapter)

For example:

<SCRIPT language=”javascript”>

 

1.4 LINK TAG

<link> tag specifies relationships between the current document and external resource. Possible uses for this element include defining a relational framework for navigation. This Element is most used to link to style sheets.

For example:

<LINK REL=StyleSheet HREF=”style.css” TYPE=”text/css”>

<LINK REL=StyleSheet HREF=”color-8b.css” TYPE=”text/css”>

 

2 body

This contains the stuff – text, images, links,  that the web browser displays in its viewport – the visible web page.

<html>

<body>

………….

<body>

<html>

 

3  tags

A command inserted in a document that specifies how the document, or a portion of the document, should be formatted. Tags are used by all format specifications that store documents as text files. There are various tags used in html for reoresenting the attractive web page will discuss later

 

HTML IS CASE INSENSITIVE

First,”case” refers to whether a letteror letters of the alphabet are in caps or are in lowercase. “case sensitive” is a phrase meaning that computers, especially in web site creation, will read lettersdifferently depending on whether the letters are in caps or in lowercase.

Most browsers might not care if you type your tags in upper, lower or mixed cases. <HTML>, <html> or <HtMl> will normally give the same result. However, the correct way is to type tags in lowercase. So get into the habit of writing your tags in lowercase.

 

 

Creating HTML documents

you need only two things: a simple-text editor and a web browser.

Text editors i.e notepad,dreamweaver,notepad++ etc.

Web browsers i.e Internet Explorer, torch, epic, Netscape Navigator, Mozilla firefox, google chrome etc.

Here are the simple steps to create a baisc HTML document:

Open Notepad or another text editor.

At the top of the page type <html>.

On the next line, now add the opening header tag: <head>.

On the next line, type <title> </title>.

Go to the next line, and insert the closing header tag: </head>.

on the next line, type<body>.

Write content and use different tags and  type the closing tag </body>.

Finally, go to the next line and type </html>.

In the File menu, choose Save As.

In the Save as Type option box, choose All Files.

Name the file nik.html/.htm

Click Save.

For example:

And how to display this example in web browser. Lets see

In the above web page, see the title namely “website”.

 

Different between .html and .htm extension


When you save the file locally, the difference doesn’t matter – your local system will likely treat the two file extensions as interchangeable for loading by your browser. The reason for it is that historically:

Windows-based systems used 3 letter extensions (htm)

and Unix-based systems the 4 letters (html). Mostly .html is used to save the web page

in other words, .htm and .html, both are the same extensions for HTML files. .html is an old form of saving the HTML files while .html is a new form.

 

Html tags


1 .Headings(<h1> to <h6>)

 

The six heading elements, H1 through H6, denote section headings. Although the order and occurrence of headings is not constrained by the HTML DTD.

For example:

<html>

<head>

<title>heading example</title>

</head>

<body>

<h1>HERE IS THE HEADING ONE<h1>

<h2>HERE IS THE HEADING SECOND<h2>

<h3>HERE IS THE HEADING THIRD<h3>

<h4>HERE IS THE HEADING FOURTH<h4>

<h5>HERE IS THE HEADING FIFTH<h5>

<h6>HERE IS THE HEADING SIXTH<h6>

 

</body>

</html>

Output:

 

A line space automatically is inserted before and after a heading (that is, an entire line is skipped between a heading and any text before and after it).

Default font size in <h1> to <h6> tags as follows:

<H1>heading</H1>: creates heading level #1 (24 point type—largest)

<H2>heading</H2>: creates heading level #2 (18 point type)

<H3>heading</H3>: creates heading level #3 (14 point type)

<H4>heading</H4>: creates heading level #4 (12 point type)

<H5>heading</H5>: creates heading level #5 (10 point type)

<H6>heading</H6>: creates heading level #6 (8 point type—smallest)

Note:  No matter what the font size is, headings with the same level number are always the same size. Headings are always in bold print.

 

 

ATTRIBUTES VALUE DESCRIPTION
Align Left Specifies left alignment
Right Specifies Right alignment
Justify Specifies Justify alignment
center Specifies center alignment

 

For example:

 

<html>

<head>

<title>heading example</title>

</head>

<body>

<h2 align=”left”>Left-aligned heading</h2>

 

<h2 align=”center”>i am in center</h2>

 

<h2 align=”right”>Right-aligned heading</h2>

 

</body>

</html>Output:

  1. paragraph(<p>)

HTML paragraph tags are used to define the HTML paragraph element. The paragraph element begins with the HTML <p> tag and ends with the HTML </p> tag.

<html>

<head>

<title>heading example</title>

</head>

<body>

 

<p>
I am in paragraph. This is the best book for students.
</p>

 

</body>

</html>

Output:

 

 

ATTRIBUTES VALUE DESCRIPTION
Align Left Specifies left alignment
Right Specifies Right alignment
Justify Specifies Justify alignment
center Specifies center alignment

 

 

 

 

 

 

 

For example:

<html>

<head>

<title>paragraph example</title>

</head>

<body>

 

 

<p align=”right”>The paragraph tags are used to define a block of text as a paragraph. This HTML element is one of the basic HTML tags you should learn to use properly.</p>

 

</body>

</html>

Output:

 

  1. <hr> tag

The full form of <hr> tag is horizontal rule. It is used to display the horizontal line. It is under si   ngular tag, means only opening tag no need for closing tag.

ATTRIBUTES VALUE DESCRIPTION
Align Left Specifies left alignment
Right Specifies Right alignment
Justify Specifies Justify alignment
center Specifies center alignment
Size Pixels or  % Specifies the height of <hr>tag
Color Color name Specifies the color of <hr>tag
Noshade Noshade Removes the usual shading effect that most browsers display.
Width pixels or % Specifies the width of the <hr>tag.

 

Lets take example with these attributes:

<html>

<head>

<title> example</title>

</head>

<body>

 

<hr size=”2″ width=”50%”>

<p align=”center”>The paragraph tags are used to define a block of text as a paragraph. This HTML element is one of the basic HTML tags you should learn to use properly.</p>

<hr size=”10″ width=”70%” >

<h1 align=”center”>HEADING ONE</h1>

<hr size=”20″ width=”50%”  noshade>

 

<hr size=”15″ color=”red” width=”50%”>

</body>

</html>

Output:

4.<br> tag

. A br tag will insert a line break which means the text/image following the tag will be moved to the next line when displayed in the browser.

For example:

<html>

<head>

<title> example</title>

</head>

<body>

 

 

<p align=”center”> my name is nikhil arora <br>

i am doing study  <br>

i want to become a lecturer</p>

 

 

</body>

</html>

Output:

 

 

 

5<body> tag

The HTML body element acts as a container for all the renderable content of the document. The presentational attributes for the HTML body element have been deprecated in HTML 4.01, since style sheets became the preferred way to define the presentational properties of a document.it is under paired tag.

ATTRIBUTES DESCRIPTION
Bgcolor Specifies the background color
Text This will change the colour of all the text on your whole page,
Link ou can now change the colour of all your links.
Vlink The V stands for ‘Visited’. You can change this too,
background

 

put an image as your background
Alink When you click on a link, it changes colour momentarily,

 

For example:

<html>

<head>

<title>HTML body tag</title>

</head>

<body bgcolor=”red” text=”blue”>

<p>Document content goes… here.</p>

</body>

</html>

 

BACKGROUNG SOUND TAG

Y U CAN SET  sound in body tag with background attribute

For example”

<body background=”abc.mp3”>

</body>

In this above example, when web page will open in any browser then song will automatically play.

You can also set image as background

For example:

<html>

<head>

<title>font size example</title>

</head>

<body background=”images.jpg”>

 

 

 

 

</body>

</html>

Output:

­

Text formatting tags

 

HTML ELEMENTS:

There are two types of elements:

1 block-level elements

2 inline elements

 

1 block-level elements

In general, HTML elements can be divided into two categories : block level and inline elements.

  1. HTML block level elements can appear in the body of an HTML page.
  2. It can contain other block level as well as inline elements.
  3. By default, block-level elements begin on new lines.
  4. block level elements create larger structures (than inline elements).

List of block level elements as follws:

<p>

<h1> to< h6>

<Ol>

<ul>

<pre >

<address>

<blockquote >

<dl>

< div>

<Fieldset>

<form >

<Hr>

noscript

explain these elements in detailed as follows:

2 HTML inline elements

  1. HTML inline level elements can appear in the body of an HTML page.
  2. It can contain data and other inline elements.
  3. By default, inline elements do not begin on new lines.
  4. inline elements create shorter structures (than block level elements).

 

List of inline elements

1physical inline elements:

HTML has a few tags for controlling the appearance and flow of text. There are three text markup elements for controlling the font of a text segment (a fourth is proposed), and three tags for controlling the flow of text.

Tag Description Function
<b> Bold Displays text in bold type
<big> Big Displays type slightly larger than the surrounding text
<blink> Blink Makes the text flash on and off (Netscape Navigator only)
<font> Font Specifies the font face, size, and color
<i> Italic Displays text in italic type
<small> Small Displays type slightly smaller than the surrounding text
<strike> Strike-through Displays strike-through text (crossed through with a horizontal line) (deprecated)
<sub> Subscript Displays the text at a smaller size, slightly below the baseline of the surrounding text
<sup> Superscript Displays the text at a smaller size, slightly above the baseline of the surrounding text
<tt> Teletype Displays the text in the user’s default monospaced font
<u> Underline Underlines the text (deprecated)

 

 

1<b>tag

It is used for bold text

For example:

<b>it is used for bold text</b>

Output:

it is used for bold text

2 <big> tag

It is used for text bigger

For example:

<big> It is used for text bigger</big>

Output:

It is used for bigger text

3.<blink> tag

The HTML Blink Element (<blink>) is a non-standard element causing the enclosed text to flash slowly.

<blink> text will flash slowly</blink>

4.<i>tag

It is used to show text italic(slightly)

For example:

<i>hi I am italic text and I am slightly</i>

hi I am italic text and I am slightly

5<font>tag

<font> tag is used to specify the font of the text.

For example:

<font color=”red”>I am in  red font</font>

Output:

I am in  red font(it will show in red color)

 

6<small>tag

It is used for smaller text.

7<strike>tag

The HTML strike tag renders a strike(or line) through the middle of the text .

For example:

<strike> this is strike text</strike>

Output:

This is strike text

8.<u>tag

It is used to underline the text

For example:

<u> hi this is underline</u>

Output:

hi this is underline

Lets take example :

<html>

<head>

<title>formatted tag example</title>

</head>

<body>

<b>i am bold text</b><br>

<i> i am italic text</i><br>

<u> i am underline text</u><br>

<sub>i am lower text</sub><br>

<sup> i am superscript</sup><br>

<strike>i am strike text</strike><br>

<tt> i am typewritter text</tt><br>

<em> it makes text italic</em><br>

<strong> same as bold text</strong><br>

<small>i am small text</small><br>

<ins>i am inserted text</ins><br>

<del>i am deleted text</del><br>

<code>Defines computer code text</code><br>

<kbd> i am keyboard text</kbd><br>

<var> defines variable</var><br>

<pre> i am preformatted text</pre><br>

<samp>sample text</samp>

</body>

</html>

Output:

 

 

2logical styles

Logical or content-based styles describe the enclosed text’s meaning, context, or usage and leave the specific rendering of the tag to the discretion of the browser. Using logical tags, you may indicate that a selection of text should be emphasized or displayed as code. Fortunately, browsers adhere to conventions for the display of logical styles;

Tag Description Usually displayed as
<abbr> Abbreviation Body text (requires style sheets for style information)
<acronym> Acronym Body text (requires style sheets for style information)
<cite> Citation Italic
<code> Code Monospace font
<del> Deleted text Body text (requires style sheets for style information); may be rendered as strike-through text.
<dfn> Defining instance Body text (requires style sheets for style information)
<div> Division Body text (requires style sheets for style information)
<em> Emphasized Italic
<ins> Inserted text Body text (requires style sheets for style information)
<kbd> Keyboard text Monospace font
<q> Inline quotation Italic (newer browsers only)
<samp> Sample text Monospace font
<span> Span Body text (requires style sheets for style information)
<strong> Strong Bold
<var> Variable Monospace or oblique (slanted) monospace font

 

Lets more discussion on above tags

1<abbr>tag

It is basically used for Abbreviation . when cursor moves on text then Abbreviation

Of text will display

For example:

<abbr title=”America”>USA</abbr>

Output:

2<acronym>tag

It is used to show an acronym like www, wap etc. it is similar with <abbr> tag

For example:

<p>The <acronym title=”World Wide Web”>WWW</acronym> </p>

 

Output:

 

 

3.<cite> tag:–<cite> tag is used for indicating a citation. It represents the title of the creative work. The text enclosed in <cite> tag is displayed in italics.

For example:–cite.html

<html>

<head>

<title>usage of cite tag</title>

</head>

<body>

<p>My favourite book is<cite> Introducing HTML5 </cite> by Bruce and Remy.</p>

</body>

</html>

The output of the above code will be shown as:-

My favourite book is Introducing HTML5 by Bruce and Remy

 

4.<code> tag:–<code> tag is a phrase tag. This tag is used for representing the programming code into the html document in the font of computer code text. The text within the <code> tag is marked up with the surrounding. This tag has both opening and closing tag.

Format text in a document:–

<code>A piece of computer code</code>

For example:–code.html

<html>

<head>

<title>example of code tag</title>

</head>

<body>

<b> This is the code tag example </b><br>

<p>One dimensional array can be initialized by using the following code:</p><br>

<code>

int abc[5]={10,20,30,40,50,};

</code>

</body>

</html>

The output of the above code will be shown as:-

This is the code tag example

One dimensional array can be initialized by using the following code:

int abc[5]={10,20,30,40,50,};

 

5.<del> tag:–<del> tag is used for editing the text in HTML. The text enclosed in <del> tag is supposed to be deleted from the document. Its working is same as the ‘strike through’ a line across the text.

For example:–del.html:-

<html>

<head>

<title>text to be deleted</title>

</head>

<body>

<h3>I am <del> very </del> thankful to you for this act of kindness</h3>

</body>

</html>

The output of the above code will be shown as:-

I  am  very thankful to you for this act of kindness.

In the above example, the user don’t want to include the word ‘very’ in the document, then it uses the <del> tag for modification.

 

6.<dfn> tag:–<dfn> tag is used to define the definition term. This tag implements the formatting to the word which is defined by the paragraph. It has <title> attribute which is used with <abbr> tag enclosed in <dfn> tag.

For example:–

# <dfn> tag without the <title> attribute :-

<html>

<head><title>usage of dfn tag without title attribute</title>

</head>

<body>

<p><dfn> Cascading style sheet </dfn> is a sheet that adds styles to the web page.</p>

</body>

</html>

 

The output of the above code will be shown as:-

Cascading style sheet is a sheet that adds styles to the web page

 

# <dfn> tag with the <title> attribute :-

<html>

<head><title>usage of div tag with title attribute</title>

</head>

<body>

<p><dfn> <abbr title=”Hyper text markup language”>HTML</abbr></dfn> is the language which is used for making the web pages. </p>

</body>

</html>

The output of the above code will be shown as:-

 

HTML is the language which is used for making the web pages.

 

In the above example,when the user mouse overs the abbreviation ‘HTML’ then its full form will be shown.

 

 

7.<div> tag:–<div> tag is used to define the section ina an html document. This tag is used together with CSS to format a web page. With the <div> tag, we can group the elements of the web page. It means it encloses the different formatted text.

For example:–divtag.html

<html>

<head><title>usage of div tag</title>

</head>

<body>

<p>This is the page1</p>

<div style=”color:green”>

<h3>This is the text written in div tag.</h3>

<p> This is the text written in div tag.</p>

</div>

</body>

</html>

 

The output of the above code will be shown as:-

This is the page1

This is the text written in div tag.

This is the text written in div tag.

 

8.<em> tag:–<em> tag is used to emphasis the text. It gives the different look to the text than the normal text. It provides the sementic meaning about the text it contains.

The difference between <em> and <i> tag is that the <em> tag emphasizes the text while the <i> tag makes the text italic only.

For example:–emtag.html

<html>

<head><title>usage of em tag</title>

</head>

<body>

<p>Do you <em> really </em> need to buy those expensive jeans ? </p>

</body>

</html>

The output of the above code will be shown as:-

Do you really  need to buy those expensive jeans?

 

9.<ins> tag:–<ins> tag is used to define the text that has been iserted into a document. The text enclosed in <ins> tag is underlined. <ins> tag is used together with the <del> tag to modify the document.

For example:–instag.html:-

<html>

<head>

<title>text to be inserted</title>

</head>

<body>

<h3>I am <del> very </del><ins> extremely </ins> thankful to you for this act of kindness</h3>

</body>

</html>

The output of the above code will be shown as:-

I am  very  extremely thankful to you for this act of kindness.

In the above example, the user replaces the word ’very’ with the word ‘extremely’ at the time of modification.

 

10.<kbd> tag:–<kbd> tag is used to define the text which is entered by the user. It defines the keyboard input which is displayed using a monospaced font such as ‘courier’ by most of the browsers.

Format text in a document:–

<kbd> keyboard input </kbd>

To distinguish a digit ‘zero’ from letter ‘O’, the user uses a specific ‘font-family’ style to kbd elements.

For example:–keyboardinp.html

<html>

<head>

<title>Keyboard input</title>

</head>

<body>

<div>

<style scoped=”scoped”>

Kbd

{

font-family:Monaco,consolas,monospace;

font-weight:bold;

}

</style>

<p>To compute one megabyte, Enter <kbd>1024*1024</kbd> in the calculator app.</p>

</div>

</body>

</html>

In the above example, style scoped=”scoped” sets the value of the <style scoped> Boolean attribute to true.

 

The output of the above code will be shown as:-

To compute one megabyte, Enter 1024*1024 in the calculator app.

In this, the output shows ‘1024*1024’ instead of ‘1024*1024’ because <kbd> tag distinguish the a digit ‘zero’ from letter ‘O’ entered by the user.

 

11.<q> tag:–<q> tag is used to define the short quotations. It simply defines the text within the quotation marks. It does not require paragraph breaks.

For example:–quotation.html:-

<html>

<head>

<title>short quotation</title>

</head>

<body>

<p>Someone said :

<q>Practice makes a man perfect</q>

</p>

</body>

</html>

The output of the above code will be shown as:-

Someone said :” Practice makes a man perfect”

 

12.<samp> tag:–<samp> tag is used to identify the sample output from a computer program. It must have start and end tag. Most of the browsers use monotype font such as ‘Lucida console’ on most of the browsers.

Format text in a document:–

<samp> sample output </samp>

 

For example:–sample.html

<html>

<head>

<title>short quotation</title>

</head>

<body>

<p>This is an example of <samp>HTML samp tag.</samp></p>

</body>

</html>

The output of the above code will be shown as:-

This is an example of HTML samp tag.

Another example shows the use of <samp> tag:–

<html>

<body>

<p>when you click the <kbd>Delete</kbd> button, you will be asked, <samp>Are you sure you want to delete 9 to 5 job?</samp> Click <kbd>Yes</kbd> to continue.</p>

</body>

</html>

The output of the above code will be shown as:-

When you click the Delete button, you will be asked, Are you sure you want to delete 9 to 5 job? Click yes to continue.

 

13.<span> tag:–<span> tag is used to group inline elements together to provide style(using id or class attributes). When the user wants to apply a style to part of the document or to some text, <span> tag is used.

The difference between <span> tag and <div> tag is that the <span> tag is used with inline elements while the <div> tag is used with the block-level elements. Without any style attributes, the <span> tag does not chang the enclosed text at all.

For example:–span.html

<html>

<head>

<title>usage of span tag</title>

</head>

<body>

<p>I like <span style=”color:blue;font-weight:bold”>blue</span> and <span style=”color:red;font-weight:bold”>red</span> color.</p>

</body>

</html>

The output of the above code will be shown as:-

I like blue and red color.

 

14.<strong> tag:–<strong> tag is a emphasised tag. It defines the text in a way so that it is considered as ‘important’ text by the user.

The difference between <strong> and <b> tag is that the <strong> tag emphasizes the text while the <b> tag makes the text bold only.

For example:–strong.html

<html>

<head>

<title>usage of strong tag</title>

</head>

<body>

<p>HTML stands for <strong>hyper text markup language.</strong>It contains <strong>pre-defined tags.</strong></p>

</body>

</html>

The output of the above code will be shown as:-

HTML stands for hyper text markup language. It contains pre-defined tags.

 

15.<var> tag:–<var> tag is used to define the variable name used in mathematical expression or in programming. The variable name enclosed in <var> tag is displayed in italics.

</var> tag is applicable for adding a portion of an application, a specific mathematical expression/sentence or it could also serve as a place holder in prose.

For example:–variable.html

<html>

<head>

<title>linear equation</title>

</head>

<body>

<p><var> x</var> +<var> y</var> = 3 is the linear equation</p>

</body>

</html>

The output of the above code will be shown as:-

x + y = 3 is the linear equation

 

 

 

 

 

CHARACTER ENTITIES

Characters have a special meaning in HTML. Some characters (e.g. the less than and greater than signs) are reserved for HTML markup. In order to display these characters as text, you must enter the HTML entities in the source code. For example, to display the less than sign (<).

It divides into three parts:

1 an ampersand (&)

2 entity number or entity name(&#62 or &gt; )

3 ended with semi colon (;)

Example:.

 

To display the greater than sign (>) you must write  &gt; (entity name) or &#62;(entity number)

The Advantages of Using Entities Rather Than Images

It loads fast because it is text base.

Scalable according to font size.

Easy to change color and sizing.

 

Examples:

Punctuation Entity name
(case sensitive)
Entity number name or meaning
&ndash; &#8211; en dash
&mdash; &#8212; em dash
¡ &iexcl; &#161; inverted exclamation
¿ &iquest; &#191; inverted question mark
&ldquo; &#8220; left double curly quote
&rdquo; &#8221; right double curly quote
&#39; apostrophe (single quote)
&lsquo; &#8216; left single curly quote
&rsquo; &#8217; right single curly quote
«

»

&laquo;

&raquo;

&#171;

&#187;

guillemets (used as quotation marks in some languages, e.g., French)
free space &nbsp; &#160; non-breaking space
& &amp; &#38; Ampersand
¢ &cent; &#162; Cent
© &copy; &#169; Copyright
÷ &divide; &#247; Divide
> &gt; &#62; greater than
< &lt; &#60; less than
µ &micro; &#181; Micron
· &middot; &#183; middle dot
&para; &#182; pilcrow (paragraph sign)
± &plusmn; &#177; plus/minus
&euro; &#8364; Euro
£ &pound; &#163; British Pound Sterling
® &reg; &#174; Registered
§ &sect; &#167; Section
&trade; &#153; Trademark
¥ &yen; &#165; Japanese Yen

 

Example:

Output:

 

<a> tag or hyperlink

It is called anchor tag used to hyperlink to link to another document on the web.

A hyperlink (or link) is a word, group of words, or image that you can click on to move to another document.

When you move the cursor over a link in a Web page, the arrow will turn into a little hand.

The most important attribute of the <a> element is the href attribute, which indicates the link’s destination or hyper reference.

By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue

A visited link is underlined and purple

An active link is underlined and red

For example:

<a href=” https://www.facebook.com/”>welcome to facebook</a>

When you click on this link, facebook will be open

 

FORMATTING TEXT WITH <font> tag

The <font> tag provides no real functionality by itself, but with the help of a few attributes, this tag is used to change the style, size, and color of HTML text elements it provides users with the ability to create dynamic font styles for any HTML element.

The font tag is having three attributes called size, color, and face to customize your fonts.

  1. Font Sizes

 

the font used by default is the one which is set up as the default text font in your browser. Usually this is “Times New Roman”, black color and size 3. To change the font size of the text on your webpages, you simply embed the text in the FONT element and add the SIZE attribute with a value between 1 (very small) and 7 (very big) to the opening font tag. See example below.

<html>

<head>

<title>font size example</title>

</head>

<body>

<p>Text in standard font, usually “Times New Roman” – size: 3 – color: black.</p>

 

<p>

<font size=”1″> Font size 1 </font><br>

<font size=”2″> Font size 2 </font><br>

<font size=”4″> Font size 4 </font><br>

<font size=”5″> Font size 5 </font><br>

<font size=”6″> Font size 6 </font><br>

<font size=”7″> Font size 7 </font><br>

</p>

</body>

</html>

Output:

Default size is 3 so you can SPECIFY THE RELATIVE FONT SIZE.  <font size=”+n”> or <font size=”-n”>:
You can specify how many sizes larger or how many sizes smaller than the preset font size should be.

It will increase or decrease from size 3

For example:

<html>

<head>

<title>font size example</title>

</head>

<body>

<font size=”-1″>Font size=”-1″</font> // decrease from size 3 i.e 3-1=2 so size will be same as size 2. <br>

<font size=”+1″>Font size=”+1″</font><br>

<font size=”+2″>Font size=”+2″</font><br>

<font size=”+3″>Font size=”+3″</font><br>

<font size=”+4″>Font size=”+4″</font><br>

</body>

</html>

Output:

2 Font Face:

 

A font family and other presentation attributes of a font may be applied in HTML code in either cascading style sheets (CSS) or the deprecated HTML font element.  a font face or font family is the typeface that will be applied by a web browser to some text. The font is relevant for the display of text on the screen, on a printer or another device.

For example:

<html>

<head>

<title>font size example</title>

</head>

<body>

<FONT FACE=”arial”>arial font</FONT><br>

<FONT FACE=”algerian”>algerian font</FONT><br>

<FONT FACE=”bookman”>bookman font</FONT><br>

<FONT FACE=”braggadocio”>braggadocio font</FONT><br>

<FONT FACE=”courier”>courier font</FONT><br>

<FONT FACE=”desdemona”>desdemona font</FONT><br>

<FONT FACE=”garamond”>garamond font</FONT><br>

<FONT FACE=”modern”>modern font</FONT><br>

</body>

</html>

Output:

3 font color

HTML allows you to change the color of various elements of your website by using special tags. These tags will tell the browser what color to display that element in, and can help spice up that boring black-and-white page.

You can use color with two ways:

1 using color by name: you can use font color directly by color name

For example: <html>

<head>

<title>font size example</title>

</head>

<body>

 

<font color=”blue” >I am in blue</font>

<br>

</body>

</html>

Output:

There are lots color can directly use by their name in the font

Color Name Color Code Color Name Color Code
Red #FF0000 White #FFFFFF
Cyan #00FFFF Silver #C0C0C0
Blue #0000FF Gray or Grey #808080
DarkBlue #0000A0 Black #000000
LightBlue #ADD8E6 Orange #FFA500
Purple #800080 Brown #A52A2A
Yellow #FFFF00 Maroon #800000
Lime #00FF00 Green #008000
Magenta #FF00FF Olive #808000

 

2  Using color by hexadecimals codes

Another way , using color by hexadeciamls codes, you know all colors are combination of RGB means red green blue . it can have 16 values i.e 0-9 numbers and after A-F(6 alphabets) it starts from “#”.

Syntax #RRGGBB

You can retrieve hexadecimal codes from paint, photoshop.

 

For example:

<html>

<head>

<title>font size example</title>

</head>

<body>

 

<font color=”#800000” >I am in maroon color</font>

<br>

 

</body>

</html>

Output:

Comment  with <!– –>tag

This tag is used for comments in the web page. Anything you put between the <!– and –> tags in the body of your web page will be ignored by the browser. You can use the comment tags to insert comments/notes within the coding of your webpage.

It divides into two parts:

Opening tag<!—

Closing tag –>

Lets see example:

<html>

<head>

<title>font size example</title>

</head>

<body>

<h1> hi i am using comments in this page </h1>

<!– comments starts from here –>

 

 

 

</body>

</html>

Output:

In the above example , you can use comments in the coding but it is not displayed in the web page.

 

MOVING TEXT WITH MARQUEE TAG

The marquee element provides a way for browsers to render text that moves across the page without having to resort to JavaScript techniques.  It is paired tag means have starting and closing tag i.e <marquee> —— </marquee>

Marquee attributes are as follws:

Attribute Value Explanation
Settings of the scrolling section
width=” “ pixels or % size of the width
height=” “ pixels or % size of the height
hspace=” “ Pixels horizontal space
vspace=” “ Pixels vertical space
bgcolor=” “ color code
or name
background color (HTML Colors)
Settings of the movement
behavior=” ”
(default is scroll)
Scroll scrolling text
Slide sliding text
Alternate bounce back and forth
direction=” ”
(default is left)
Left it moves left
Right it moves right
Up it moves up
Down it moves down
loop=” ”
(default is infinity)
Number number of the loops
scrolldelay=” ”
(default is 85)
milliseconds
(1/1000 of a second)
500 = half a second
sets the delay
(influences the speed of the scrolling)
high value = slow | low value = fast

Note:
Specify the truespeed attribute together when the value becomes 59 or less.truespeed Note:
Specify this attribute together when the value of the scrolldelay attribute becomes 59 or less. (If this attribute is not specified, the value of 59 or less is not applied.)

Example:
<marquee scrolldelay=”50″ truespeed>scrolling text</marquee>scrollamount=” ”
(default is 6)Pixelssets the amount of movement
(influences the speed of the scrolling)
high value = fast | low value = slow

Lets take example

<html>

<head>

<title>font size example</title>

</head>

<body>

<marquee>contents used without attributes</marquee>

 

<marquee behavior=”slide”>Slide marquee behavior.and it will stop.</marquee>

<marquee behavior=”alternate”>Alternate marquee behavior will move from left to right or vice versa</marquee>

<marquee direction=”right”>Right marquee direction from left to right</marquee>

<marquee scrollamount=”10″>when scroll amount increase then the speed of text will increase</marquee>

<marquee bgcolor=”#66CD00″>Changing bgcolor value changes marquee background color</marquee></body>

</html>

 

Note:Run this example in your example for more clear

MARQUEE TAG WITHIN MARQUEE TAG- NESTED MARQUEE TAG

You can use <marquee> tag within another <marquee>tag. But you can use upto 4 times nest.

For example:

<html>

<head>

<title>font size example</title>

</head>

<body>

 

 

<marquee width=”60%” direction=”up” behavior=”alternate”><marquee direction=”right” behavior=”alternate”>up and down marquee</marquee></marquee>

<body>

</html>

Output:

Run this example for more clear in your browser