Introduction to HTML | HTML Introduction

Basics of HTML:

HTML stands for HyperText Markup Language, and it is the most widely used language to design web pages. The backbone of the World Wide Web is made of HTML files, which are specially formatted documents that can contain links, as well as images and other media.

HTML (HyperText Markup Language), as its name suggests, is a markup language.

HyperText refers to the way in which web pages (HTML documents) are linked together. When we click a link in a web page, we are using hypertext. So, hypertext is simply a piece of text that works as a link.
Markup Language describes how HTML works. Markup languages are the languages that build the web .With a markup language, we simply “mark up” a text document with tags that tell a web browser how to structure it to display. So, markup language is a way of writing layout information within documents. The most widely known markup language today is HTML and XML.
HTML is a method where ordinary text can be converted into hypertext. It is a set of special codes included to control the layout and appearance of the text. Technically, HTML is not a programming language. It combines instructions within data to instruct the browser (A display program), how to render the data that the document contains.
HTML is the character-based method for describing and expressing the content. The content may be pictures, text, sound and video clips.
It delivers the content to multiple platforms.
It links document components or documents together to compose compound documents.

Brief history of HTML:

HTML was created by Berners-Lee in late 1991 but “HTML 2.0” was the first standard HTML specification which was published in 1995.

HTML 4.01 was a major version of HTML and it was published in late 1999.

Though HTML 4.01 version is widely used but currently we are having HTML-5 version which is an extension to HTML 4.01, and this version was published in 2012.

Why HTML is used?

HyperText Markup Language is the computer language that facilitates website creation. The language, which has code words and syntax just like any other language, is relatively easy to comprehend and, as time goes on, increasingly powerful in what it allows someone to create.

HTML is the primary markup language found on the internet. Every HTML page has a series of elements that create the content structure of a web page or application.

HTML is a beginner-friendly language with plenty of support and is mainly used for static website pages. HTML works best together with CSS for the styling and JavaScript for the functionality.

It is a standard markup language for web page creation. It allows the creation and structure of sections, paragraphs, and links using HTML elements (the building blocks of a web page) such as tags and attributes.

HTML has a lot of uses:

Web development. Developers use HTML code to design how a browser displays web page elements, such as text, hyperlinks, and media files.
Internet navigation. Users can easily navigate and insert links between related pages and websites as HTML is heavily used to embed hyperlinks.
Web documentation. HTML makes it possible to organize and format documents, similarly to Microsoft Word.

HTML Tag:

A webpage can contain text, graphics, audio, video and animations. Through a markup language, we can mark up such contents to indicate how they should appear over a web page. To mark up the contents, we can use various commands, called Markup Indicator or TAG.

So, HTML tags are basically HTML based commands or keywords surrounded by angel brackets like <HTML>.

Tag or Tag element refers to the HTML codes that define the element in an HTML file, such as headings, images, paragraphs and list.

Every tag consists of a tag name, sometimes followed by an optional list of tag attributes or properties, all placed between opening and closing brackets (< and >). The simplest tag is nothing more than a name appropriately enclosed in brackets, such as <HEAD> and <I>. More complicated tags contain one or more attributes, which specify or modify the behavior of the tag.

According to the HTML standard, tag and attribute names are not case-sensitive. There is no effect between <head>, <Head> and <HEAD>, or even <HeaD>; they are all equivalent.

Types of Tags:

There are two kinds of tags:

Paired/ Container Tags
Unpaired / Empty Tags

Paired/ Container Tags:

HTML tags normally come in pairs like <HTML> and </HTML>. Such types of tags are called Paired or Container Tags. These actually consist of two tags, a start tag and an end tag which enclose the text they affect. The first tag in a pair is the Start tag and the second tag is the End tag. The End tag is written like the start tag, with a forward slash before the tag name. Start and End tags are also called Opening tags and Closing tags.

Format of Paired/Container Tag:

<tagname> Content </tagname>

Example:

<B>Hello</B>

Unpaired / Empty Tags:

An unpaired or empty tag refers to a tag, which does not have an ending/closing tag.

Format of Paired/Container Tag:

Example:

<BR>

Notes: HTML tags are not case sensitive

HTML Attributes:

Attributes are important part of HTML elements. An attribute is used to define the characteristics of an element and is always placed inside the element’s opening tag. Attributes provide some sort of additional information about an element. Attribute allows us to specify how web browsers should treat a particular tag.

All attributes are made up of two parts: a name and a value. Where, the name is the property we want to set and the value is what we want the value of the property to be. The value of the attribute should be put in double quotation marks, and is separated from the name by the equal sign.

In simple terms, attributes come in name/value pairs like: name= “value”.

Example:

In this example, <BODY> element carries an attribute whose name is BGCOLOR, which we can set to use the background color of the web page. Here, the value set to BGCOLOR attribute is “RED”. This means the background color of the web page will be RED.

Building Blocks of HTML Document

(Structure of HTML Document):

Every HTML document or page has a basic structure. An HTML document starts and end with <HTML> and </HTML> tags. These tags tell the browser that the entire document is composed in HTML. Inside these two tags, the document is split into two sections:

1. Header Section

2. Body Section

Header Section: This section define the <HEAD>…</HEAD> elements, which contain information about the document such as title of the document, author of the document etc.

Body Section: This section define the <BODY>…</BODY> elements, which contain the content of the document that we see on the screen.

Basic Structure of HTML Document:

<HTML>

<HEAD>

<TITLE>MY FIRST WEBPAGE</TITLE> </HEAD>

<BODY> <H1>WELCOME TO HTML</H1>

</BODY>

</HTML>

Creating HTML Document:

Creating an HTML document is a very easy process.

To create an HTML document, generally we need the following software tools:

Text Editor
Web Browser

Text Editor: To write or edit the HTML code, we need a simple text-editor, like Notepad (A standard program comes with windows operating system). We can also use some professional HTML editors like, Adobe Dreamweaver, Microsoft FrontPage etc.

Web Browser: The purpose of a web browser ( such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to determine how the content of the HTML page is to be presented or displayed to the user.

Here are the simple steps to create a basic HTML document (Using Notepad):

Step 1: Open Notepad

Step 2: Write HTML Code

Step 3: Save HTML Code.

Save the HTML file with either the .htm or the .html file extension under an appropriate folder.

Step 4: Run HTML File in Web Browser

HTML Document Tags:

All HTML document should include at least these tags:

· <HTML>

· <HEAD>

· <TITLE>

· <BODY>

These tags define what type of document it is, and the major sections of the document.

<HTML>: The <HTML> tag defines the top-most element, identifying it as an HTML document. It is a container tag that has a start and an end tag and all the other tags nested within it.

The <HTML> tag is the main container or containing element for the whole HTML document. It represents the root of an HTML document. It simply tells the browser that this is an HTML document. Each HTML document should have one <HTML> tag and each document should end with a closing </HTML> tag.

Syntax: <HTML>

…………

</HTML>

<HEAD>: All HTML documents are divided into two parts, the head and body. Web browsers use them to interpret documents properly. The <HEAD> tag contains general information about the HTML file. The <HEAD> tag is nested within the HTML tag.

The <HEAD> tag is just a container for all other header elements. It simply defines the header section of the HTML document. Usually, the only tag contained within the head tag is the title tag. Other tags also can be contained within the <HEAD> tag but they are used less often. <HEAD> tag contains any combination of the following tags, in any order:

(a) <LINK>: The <LINK> tag is used to link to an external file, such as a style sheet or JavaScript file.

(b) <STYLE>: The <STYLE> tag is used to include CSS rules inside the HTML document.

(c) <SCRIPT>: The <SCRIPT> tag is used to include JavaScript or VBScript inside the HTML document

(d) <META>: The <META> tag includes information about the document such as keywords and a description, which are particularly helpful for search applications.

Syntax: <HTML>

<HEAD>

…………

</HEAD>

</HTML>

<TITLE>: The <TITLE> tag is used to set a title for every HTML document. The <TITLE> tag defines a title in the browser’s title bar. The <TITLE> tag should contain only the text for the title and it may not contain any other elements.

<TITLE> tag is nested within the <HEAD> tag. It identifies our page to the rest of the world. The tag output is displayed on web browsers title bar but does not appear as part of the page.

Syntax: <HTML>

<HEAD>

<TITLE>

Title of the Web Page

</TITLE>

</HEAD>

</HTML>

<BODY>: The <BODY> tag appears after the <HEAD> tag. It defines the body section of HTML document i.e., it simply defines the document’s body. The <BODY> tag contains the web pages actual content such as text, hyperlinks, images, tables, list etc. The <BODY> tag can have the following attributes.

<BODY> tag Attributes:

Attributes	Value	Description
bgcolor	color_name	Sets the background color of a document
background	filename or URL	Sets the background image of a document
text	color_name	Sets the color of the text in a document
link	color_name	Sets the color of unvisited links in a document
alink	color_name	Sets the color of an active links in a document
vlink	color_name	Sets the color of visited links in a document

Syntax:

<HTML>

<HEAD>

<TITLE>

My First Web Page

</TITLE>

</HEAD>

<BODY>

………………

</BODY>

</HTML>

Example:

<HTML>

<HEAD>

<TITLE>Attributes of the Body Tag</TITLE>

</HEAD>

This is an HTML Page

</BODY>

</HTML>

OUTPUT:

Example : Using a Background Image

<HTML>

<HEAD>

<TITLE>

Attributes of the Body Tag

</TITLE>

</HEAD>

This is an HTML Page

</BODY>

</HTML>

OUTPUT:

HTML Headings:

Headings break a document into sections. Generally, a book uses heading and subheadings to divide each chapter into sections, and we can do the same with web page.

Headings are important in HTML documents. Almost every document starts with a heading. We can use different sizes for headings. HTML defines six levels of headings. The heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most important) level and H6 the least.

We can use headings to organize our web into hierarchical levels. The top level heading (H1) actually is the title of our page, i.e., it is appears in a browser window at the top of the web page. We can also use a second level heading (denoted by the H2 tag) to define a major division in the page, and a third level heading (using the H3 tag) to define a sublevel division within a major division. Most browsers support upto six different levels.

By default, most browsers use Times New Roman fonts for headings. The font size decreases as the heading level increases. (Default sizes for first-through sixth-level headings are, respectively, 24, 18,14,12,10, and 8 point font)

Note: While displaying any heading, browsers automatically adds one line before and after the heading)

Example:

<HTML>

<HEAD>

<TITLE>Headings in HTML</TITLE>

</HEAD>

<BODY>

<H1> This is a top-level Heading</H1>

<H2> This is a top-level Heading</H2>

<H3> This is a top-level Heading</H3>

<H4> This is a top-level Heading</H4>

<H5> This is a top-level Heading</H5>

<H6> This is a top-level Heading</H6>

</BODY>

</HTML>

OUTPUT:

HTML Paragraphs:

In HTML, paragraphs are defined with the <p> tag. The <p> tag is a container element, but with an implied ending. We do not have to include the </p> end tag. Any following start tag that defines a new block element implies the end of the tag. So, when we use the <p> tag, just insert the <p> start tag at the beginning of a paragraph but leave of the </p> at the end.

Example:

<HTML>

<HEAD>

<TITLE> Paragraphs in HTML</TITLE>

</HEAD>

<BODY>

<H1> Introduction to HTML </H1>

<P> HTML stands for Hypertext Markup Language, and it is the most widely used language to design web pages. The backbone of the World Wide Web is made of HTML files, which are specially formatted documents that can contain links, as well as images and other media.

<P> Hypertext refers to the way in which web pages (HTML documents) are linked together. When we click a link in a web page, we are using hypertext. So, hypertext is simply a piece of text that works as a link.

<P> Markup language describes how HTML works. Markup languages are the languages that build the web .With a markup language, we simply “mark up” a text document with tags that tell a web browser how to structure it to display. So, markup language is a way of writing layout information within documents. The most widely known markup language today is HTML and XML.

</BODY>

</HTML>

OUTPUT:

HTML Line Breaks:

To break a line <BR> tag is used. Whenever we use the <BR> tag, anything following it starts on the next line. The <BR> tag is an empty tag, it has no end tag.

Example:

<p> For further details contact <BR>

E. Begum <BR> Tinsukia<BR> Assam

HTML Horizontal Rule:

The HTML <HR> tag is used for creating a horizontal line. The <HR> tag is a stand-alone or empty, document element that allows us to add horizontal rules to web pages. A horizontal rule is a good option to break a page into logical sections or to separate headers and footers from the rest of the page.

Changing the Height of a Horizontal Rule:

To change the height of a horizontal rule, the SIZE attribute value in the <HR> tag can be used. The value we set is the rule’s height or thickness in pixels. The following example is used for creating a horizontal rule that is 10 pixels thick.

Example:

<P> This is a normal rule:

<HR>

<P> This is a 10-pixel thick horizontal rule:

Changing the width of a Horizontal Rule:

We can change the width of a horizontal rule, either by setting the width in actual pixels or by specifying a percentage of the total width of the browser window. By default, horizontal rules are centered in the browser window. Following is an example of creating a 15-pixel sized horizontal rule with a width that is 75 percent of a browser’s window.

Example:

<P> This is a 75% wide, 15-pixel thick horizontal rule:

Changing Between Shaded and Unshaded Horizontal Rule:

The default setting for a rule is “shaded”. To set an “unshaded” horizontal rule, add the NOSHADE attribute to the <HR> tag.

Example:

<P> This is an unshaded, 15-pixel thick horizontal rule:

<HR>

<P> This is a 10-pixel thick horizontal rule:

Setting the Alignment of a Horizontal Rule:

The ALIGN attribute in the <HR> tag is used to left-align or right-align a horizontal rule (center alignment is the default)

Example:

<P>This is a left-aligned, 50% wide, 20-pixel thick horizontal rule (Shaded)

<HR> Attributes:

Attributes	Value	Description
Size	pixels or %	Specifies the height of a <HR> element
Width	pixels or %	Specifies the width of a <HR> element
Align	left center right	Specifies the alignment of a <HR> element
Color	color_name	Specifies the color of the <HR> element
Noshade	noshade	Specifies that <HR> element should render in one solid color (noshaded), instead of a shaded color.

Example: HTML Line Breaks and Horizontal Rule

<HTML>

<HEAD>

<TITLE>Line Break and Horizontal Rule </TITLE>

</HEAD>

<BODY>

GOOD MORNING <BR>

HAVE A NICE DAY<BR>

GOOD NIGHT <BR>

SWEET DREAMS<BR>

</BODY>

</HTML>

OUTPUT:

HTML Comments:

Comments can be inserted in the HTML code to make it more readable and understandable. We can use comments to explain code, which can help us when we edit the source code at a later stage. This is especially useful if we have a lot of code. Comments are ignored by the browser and are not displayed.

HTML comments line are indicated by the special beginning tag . We can comment multiple lines by the special beginning tag <!—and ending tag -->.

Example:

<HTML>

<HEAD>

<TITLE>HTML Comments </TITLE>

</HEAD>

<BODY>

<!-- This Multi Line Comment

will not be displayed

-->

<P> This is a regular paragraph

</BODY>

</HTML>

Formatting Texts:

When it comes to formatting a web page using HTML code, we can think of it in the same way we would look at formatting a document formatted by a word processor.

HTML uses tags like <B> and <I> for formatting output, like bold or italic text. These HTML tags are called Formatting tags.HTML has two ways to include italic or bold text on web page. The first way involves using literal tags: the B (Bold) tags and I (Italic). The second way is to use logical tags: the EM (emphasis) and Strong tags. Most browsers displays the I (italic) and EM (Emphasis) tags identically, just as they display the B (Bold) and strong tags identically.

The following table depicts a list of Formatting tags commonly used in HTML:

Tag	Description
<B>	To Bold Text
<I>	To Italic Text
<U>	To Underline Text
<STRONG>	To define important text (Same as Bold)
<EM>	To Emphasized Text. (Same as Italic)
<BIG>	To define Bigger Text
<SMALL>	To define Smaller Text
<SUB>	To define subscripted Text
<SUP>	To define superscripted Text
<PRE>	To define preformatted Text
<BLOCKQUOTE>	To define a section that is quoted.
<STRIKE>	Strike through text
<DIV>	To set alignment of text/Image as Left/Center/Right
<CENTER>	To set text/image as Center Aligned

Example:

<HTML>

<HEAD>

<TITLE>Formatting Texts </TITLE>

</HEAD>

<BODY>

<I>Italic Text</I><BR>

<U>Underline Text</U><BR>

<FONT COLOR= “GREEN” SIZE= “5” FACE= “ARIAL”> Welcome To Assam</FONT><BR>

<STRONG> Strong Text usually rendered bold</STRONG><BR>

<EM>Emphasized text, usually rendered italic</EM><BR>

<BIG> Puts text in bigger font</BIG><BR>

<SMALL> Puts text in smaller font </SMALL><BR>

H<SUB>2</SUB>O<BR>

X<SUP>2</SUP>Y<BR>

<STRIKE>Strike through text</STRIKE><BR>

<BLOCKQUOTE>Welcome to my Website</BLOCKQUOTE><BR>

<CENTER>Center-Aligned</CENTER><BR>

<DIV ALIGN= “LEFT”>Left-Aligned</DIV><BR>

<PRE>

HAVE

NICE

DAY

</PRE>

</BODY>

</HTML>

Creating Lists:

Lists are powerful tools used to organize similar kinds of information i.e., lists are used to group related pieces of information together, so they are clearly associated with each other and easy to read.

Types of Lists:

HTML supports of three types of lists:

· Ordered List

· Unordered List

· Definition List

Ordered List:

An Ordered List is a numbered list. Use a Ordered List when the order or priority of items is important. In HTML, an ordered list starts with the <OL> tag. The <OL> tag defines sequentially numbered list of items. It is used in conjunction with the <LI> (LIST Item) tag, which is used to tag the individual list items in a list. The list items are marked with numbers. The numbering starts at one and is incremented by one for each successive list item.

We can use the TYPE attribute with <OL> tag to specify the type of numbers for an Ordered List. The values that we can use with the TYPE attribute are “A”, “a”, “I”, “i” for uppercase letters, lowercase letters, uppercase Roman numerals, lowercase Roman numerals. By default it is generic number.

By default index for list items begins with first number or initial character. We can use START attribute with <OL> tag to specify the beginning of any index. The START attribute in an <OL> tag is used to start the numbering sequence at a particular number.

Example:

<HTML>

<HEAD>

<TITLE>Ordered List in HTML</TITLE>

</HEAD>

<BODY>

<OL>

<LI> C PROGRAMMING

<LI> DATABASE MANAGEMENT

<LI> NETWORKING

<LI> WEB TECHNOLOY

<LI> MOBILE TECHNOLOGY

</OL>

<LI> C PROGRAMMING

<LI> DATABASE MANAGEMENT

<LI> NETWORKING

<LI> WEB TECHNOLOY

<LI> MOBILE TECHNOLOGY

</OL>

<LI> C PROGRAMMING

<LI> DATABASE MANAGEMENT

<LI> NETWORKING

<LI> WEB TECHNOLOY

<LI> MOBILE TECHNOLOGY

</OL>

<LI> C PROGRAMMING

<LI> DATABASE MANAGEMENT

<LI> NETWORKING

<LI> WEB TECHNOLOY

<LI> MOBILE TECHNOLOGY

</OL>

<BODY>

</HTML>

Unordered List:

An Unordered List is a collection of related items that have no special order or sequence. This list is created by using <UL> tag. The <UL> tag defines a bulleted list of items. The <LI> (List Item) tag is nested inside the <UL> tag and defines each item within the list.

The bullet itself comes in three types: “disc”, “circle” and “square”. The TYPE attribute is used with <UL> tag to specify the type of bullet. By default it is a “disc”.

Example:

<HTML>

<HEAD>

<TITLE>Unordered List in HTML</TITLE>

</HEAD>

<BODY>

<UL>

<LI> C PROGRAMMING

<LI> DATABASE MANAGEMENT

<LI> NETWORKING

<LI> WEB TECHNOLOY

<LI> MOBILE TECHNOLOGY

</UL>

<LI> C PROGRAMMING

<LI> DATABASE MANAGEMENT

<LI> NETWORKING

<LI> WEB TECHNOLOY

<LI> MOBILE TECHNOLOGY

</UL>

<LI> C PROGRAMMING

<LI> DATABASE MANAGEMENT

<LI> NETWORKING

<LI> WEB TECHNOLOY

<LI> MOBILE TECHNOLOGY

</UL>

<BODY>

</HTML>

Nesting Lists:

We can nest a list inside another list. The browser automatically indents nested list levels. We can nest the same or different kinds of lists.

Example 1:

<HTML>

<HEAD>

<TITLE>Nesting List in HTML</TITLE>

</HEAD>

<BODY>

<UL>

<LI>SOFTWARE

<OL>

<LI> C PROGRAMMING

<LI> DATABASE MANAGEMENT

<LI> NETWORKING

<LI> WEB TECHNOLOY

<LI> MOBILE TECHNOLOGY

</OL>

<LI> HARDWARE

<OL>

<LI> CPU

<LI> INPUT DEVICES

<LI> OUTPUT DEVICES

<LI> HARD DISK

<LI> FLOPPY DISK

</OL>

</UL>

<BODY>

</HTML>

Example 2:

<HTML>

<HEAD>

<TITLE>Nesting List in HTML</TITLE>

</HEAD>

<BODY>

<LI>SOFTWARE

<LI> C PROGRAMMING

<LI> DATABASE MANAGEMENT

<LI> NETWORKING

<LI> WEB TECHNOLOY

<LI> MOBILE TECHNOLOGY

</UL>

<LI> HARDWARE

<LI> CPU

<LI> INPUT DEVICES

<LI> OUTPUT DEVICES

<LI> HARD DISK

<LI> FLOPPY DISK

</UL>

<BODY>

</HTML>

Definition List:

Definition lists group terms and definitions into a single list and requires three elements to complete the list:

· <DL> : Holds the list definitions (DL- Define the List)

· <DT> : Defines a term in the list (DL- Define the Term)

· <DD> : Defines a definition for the term (DL- Define the definition)

In the definition list, we can have as many terms (defined by <DT>) as we need. Each term can have one or more definitions (defined by <DD>).

Example:

<HTML>

<HEAD>

<TITLE>Definition List</TITLE>

</HEAD>

<BODY>

<DL>

<DT>Hardware

<DD> Is defined as physical or tangible equipments associated with computer systems. Examples of hardware are Central Processing Unit, Input devices, Output Devices, Secondary Storage Devices.

<DT>Software

<DD>Is a set of programs

<DT>Peripherals

<DD>Equipment connected around the CPU

</BODY>

</HTML>

Working with Texts:

Text alignment:

We can align paragraphs, headings in a number of ways. We can use the ALIGN attribute with paragraphs or headings to center-align, right-align or left-align.

Example:

To center align a level-two heading

<H2 ALIGN= “CENTER”> Heading </H2>

To right align a level-two heading

<H2 ALIGN= “RIGHT”> Heading </H2>

CENTERING TEXT and Other Elements using the <CENTER> tag:

The <CENTER> tag is used to center-align text and other document elements.

Example:

<HTML>

<HEAD>

<TITLE>My First Webpage</TITLE>

</HEAD>

<BODY>

<CENTER> <H1 >Level-One Heading </H1>

<p> This paragraph and the level-one heading above it is centered using the center tag. We can align paragraphs, headings in a number of ways. We can use the ALIGN attribute with paragraphs or headings to center-align, right-align or left-align.

</CENTER>

</BODY>

</HTML>

Changing Font sizes and Colors:

The <FONT> tag allows to specify the size and color of a section of text.

Setting Font Sizes:

The <FONT> tag uses the SIZE attribute to change the size of a font. We can set font sizes using absolute or relative size values.

Setting Absolute Font sizes:

There are seven “absolute” ( or fixed) sizes, numbered from 1 to 7, that we can set using the SIZE attribute of the <FONT> tag. The default is 3 , which is the same as regular paragraph text; 1 is the smallest and 7 is the largest.

Example:

<HTML>

<HEAD>

</HEAD>

<BODY>

<P>

</BODY>

</HTML>

Changing the FONT Color:

The <FONT> tag uses the COLOR attribute to change the color of a font.

Setting the Font Color Using color names:

We can use any one of 16 color names to specify a font color. Besides black and white, we also can specify aqua, blue,fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,teal and yellow.

Example:

<HTML>

<HEAD>

<TITLE> Paragraphs in HTML</TITLE>

</HEAD>

<BODY>

<P> <FONT SIZE= “5” COLOR= “GREEN” FACE= “MONOTYPE CORSIVA”>Welcome to Beautiful World</FONT>HTML stands for Hypertext Markup Language, and it is the most widely used language to design web pages. The backbone of the World Wide Web is made of HTML files, which are specially formatted documents that can contain links, as well as images and other media.

<P> <FONT SIZE= “6” COLOR=”BLUE” FACE= “MV BOLI”>Hypertext refers to the way in which web pages (HTML documents) are linked together. When we click a link in a web page, we are using hypertext. So, hypertext is simply a piece of text that works as a link.

</BODY>

</HTML>

Hyperlink:

A hyperlink (or link) is a word, group of words, or image that we can click on to jump to another document or another section on the same page.

Hyperlinks, or simply links, connect HTML pages and other resources on the web. When we include a link on web page, we enable visitors to travel from our web page to another website, another web page on our site or even another location on the same page. We can also link to such resources that are not even HTML pages at all, such as e-mail addresses, pictures and text files etc. Without links, a web page stands alone, disconnected from the rest of the web. With links, that page becomes part of the web.

In HTML, <A> (Anchor) tag defines hyperlink. Anything between the opening <A> tag and the closing </A> tag becomes part of the link and a user can click that part to reach to the linked document.

The syntax of using <A> tag is:

Here, the href attribute specifies the destinations of a link. The “Link Text” can be text or image.

The hypertext links is composed of three elements:

Start and End tags that enclose the whole link
The link target
The link text

The figure illustrates the three parts of a hypertext links. The figure uses the HREF (Hypertext Reference) attribute to specify the URL or address of the “object” of the link, which is simply another Web page. Here the full address (URL) is not given, just the filename. This means that the web page being linked to is in the same directory as the web page from where the link is being made. If we want to form a link to a web page on another server, then the full URL should be specified.

Example:

<HTML>

<HEAD>

<TITLE> HYPERLINK</TITLE>

</HEAD>

<H1> Hyperlinks connect HTML pages</H1>

<P><FONT SIZE="5" FACE="MV BOLI">A hyperlink (or link) is a word, group of words, or image that we can click on to jump to another document or another section on the same page. Hyperlinks, or simply links, connect HTML pages and other resources on the web. When we include a link on web page, we enable visitors to travel from our web page to another website, another web page on our site or even another location on the same page. We can also link to such resources that are not even HTML pages at all, such as e-mail addresses, pictures and text files etc. Without links, a web page stands alone, disconnected from the rest of the web. With links, that page becomes part of the web.

<P>The hypertext links is composed of three elements:

<UL>

<LI><A HREF="EX1.HTML">START & END TAGS</A>

<LI><A HREF="EX2.HTML">LINK TARGET</A>

</BODY>

</HTML>

Inserting Images (Adding images in Web Page):

Images are very important to beautify as well as to depict many concepts on web page. It is true that one single image is worth a thousand words. So, as a web designer we should have clear understanding on how to use images in our web page.

We can add or insert an image in web page by using HTML <IMG> tag. The <IMG> tag is an empty tag, which means that it contains attributes only, and has no closing tag. To display an image on a web page, we need to use the SRC attribute of <IMG> tag. The SRC stands for “source”.

The syntax of using <IMG> tag is:

<IMG> Attributes:

Attribute	Value	Description
src	URL	Specifies the URL or location of an image, where the image is stored
align	top, bottom, middle, left, right	Specifies the alignment of an image according to surrounding elements.
alt	text	Specifies an alternate text for an image, if the image cannot be displayed
title	text	Specifies title text as pop-up tips.
border	pixels	Specifies the width of the border around an image.
height	pixels	Specifies the height of an image.
width	pixels	Specifies the width of an image.
hspace	pixels	Specifies the white space on left and right side of an image
vspace	pixels	Specifies the white space on top and bottom of an image
usemap	#mapname	Specifies an image as a client-side image-map. (Used in Image mapping)

Example:

<HTML>

<HEAD>

<TITLE> Images in HTML</TITLE>

</HEAD>

<BODY>

<P ALIGN=”JUSTIFY”><FONT SIZE="5" COLOR="GREEN" FACE="MV BOLI">Besides text, we can also include an image inside a hypertext link, which causes the image to display a blue border, indicating that it is a hypertext link that we can click and activate.

</BODY>

</HTML>

CREATING IMAGE LINKS:

Besides text, we can also include an image inside a hypertext link, which causes the image to display a blue border, indicating that it is a hypertext link that we can click and activate.

Web pages often use images for navigation. They are more appealing than plain- text links. To create an image that generates a link, we substitute an <IMG> tag in place of text to which we would anchor our link.

Example:

<HTML>

<HEAD>

<TITLE> Image as a Link</TITLE>

</HEAD>

<BODY>

<H3> Image Link </H3>

</A>

</BODY>

</HTML>

MARQUEE TAG:

Sometimes we might want our text or photos to continuously scroll across the screen. Or maybe we would like it to bounce back and forth across the screen. All these things are possible using HTML marquees.

HTML marquees are a piece of code that allows us to create movement on an HTML element (text or image). Usually marquees continuously scroll across the screen. This is possible by using HTML <MARQUEE> tag.

Syntax to use <MARQUEE> tag :

<MARQUEE attribute_name= “attribute_value”>Text or image </MARQUEE>

<MARQUEE> Attributes:

Attribute	Value	Description
behavior	Scroll, slide, alternate	Specifies the type of scrolling
bgcolor	colorname	Specifies the background color
direction	Up, down, l eft, right	Specifies the scrolling direction of text
height	Pixels or %	Specifies the height of marquee
width	Pixels or %	Specifies the width of marquee
hspace	pixels	Specifies horizontal space around the marquee.
vspace	pixels	Specifies horizontal space around the marquee.
loop	number	Specifies how many times the marquee text scrolls
scrolldelay	milliseconds	Defines how long to delay between each jump.
scrollamount	number	Specifies how far to jump.

Example:

<HTML>

<HEAD>

<TITLE> MARQUEE IN HTML </TITLE>

</HEAD>

<BODY>

<H2> TEXT SCROLLING </H2>

<MARQUEE BEHAVIOR= “SCROLL” BGCOLOR= “AQUA” DIRECTION= “LEFT” HEIGHT= “50%” WIDTH= “100%” LOOP= “3” SCROLLDELAY= “30” VSPACE= “20” HSPACE= “20”> WELLCOME TO BEAUTIFUL ASSAM </MARQUEE>

<H2> IMAGE SCROLLING </H2>

</MARQUEE>

</BODY>

</HTML>

TABLES:

In HTML, tables make it easy to lay out data, text and even images in a grid. Tables are just like spreadsheets and they are made up of rows and columns. They are very frequently used by almost all web developers to arrange data in a tabular format. Almost all major sites on the web are using invisible tables to layout the pages.

The most important layout aspects that can be done with table are:

Divide the page into different sections.
Creating menus.
Adding interactive form fields.
Easy alignment of images that have been cut into smaller pieces.
A simple way to allow text to be written in two or more columns next to each other.

In HTML, the <TABLE> tag is used to create a table. A table is divided into rows with the <TR> (Table Row) tag, and each row is divided into data cells with the <TD> (Table data) tag. The <TD> tag holds the content of a data cell. A <TD> tag can contain text, links, images, lists, forms etc.

Table Borders:

By default, the table does not contain a border. To include a border to the table, specify a BORDER attribute inside the <TABLE> tag. The BORDER attribute of <TABLE> tag controls the appearance of the table’s borders or lines. The default border is 0, so if we do not specify a border attribute, the table is displayed without any borders. Sometimes this is useful, but most of the time, we want the borders to be visible.

Example :

<HTML>

<HEAD>

<TITLE> TABLE WITH BORDERS </TITLE>

</HEAD>

<BODY>

<H4> TABLE WITH A NORMAL BORDER </H4>

<TR>

<TD>FIRST</TD>

</TR>

<TR>

<TD>SECOND</TD>

</TR>

</TABLE>

<H4> TABLE WITH A THICK BORDER </H4>

<TR>

<TD>FIRST</TD>

</TR>

<TR>

<TD>SECOND</TD>

</TR>

</TABLE>

<H4> TABLE WITH A VERY THICK BORDER </H4>

<TR>

<TD>FIRST</TD>

</TR>

<TR>

<TD>SECOND</TD>

</TR>

</TABLE>

</BODY>

</HTML>

HEADING IN A TABLE:

Header information in a table is defined with the <TH> tag. All major browsers display the text in the <TH> element as bold and centered.

Adding Column Heading:

To create headings (column headings) at the top of the table, first create a row using the <TR> tag and then, use the <TH> tag to define the cells instead of using the <TD> tags.

Example:

<HTML>

<HEAD>

<TITLE> HEADINGS IN ATABLE </TITLE>

</HEAD>

<BODY>

<TR>

<TH>FIRST NAME</TH>

<TH>ADDRESS</TH>

</TR>

<TR>

<TD>BINOY</TD>

<TD>KHEMKA</TD>

<TD>ARUNACHAL</TD>

</TR>

<TR>

<TD>BIPON</TD>

<TD>DUTTA</TD>

<TD>TINSUKIA</TD>

</TR>

<TR>

<TD>TINSUKIA</TD>

</TR>

<TR>

<TD>RAJESH</TD>

<TD>ARUNACHAL</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Add Row Headings:

To create a row heading add <TH> tag instead of a <TD> tag at the start of a table row.

<HTML>

<HEAD>

<TITLE> HEADINGS IN ATABLE </TITLE>

</HEAD>

<BODY>

<TR>

<TH>FIRST NAME</TH>

<TH>ADDRESS</TH>

</TR>

<TD>BINOY</TD>

<TD>KHEMKA</TD>

<TD>ARUNACHAL</TD>

</TR>

<TD>BINOY</TD>

<TD>KHEMKA</TD>

<TD>ARUNACHAL</TD>

</TR>

</TABLE>

</BODY>

</HTML>

TABLE WITH A CAPTION:

It is a good idea to add a title or caption to a table that describes the table data. To add a caption to the table, <CAPTION> tag is used. There could be only one caption per table. The <CAPTION> tag is supported in all major browsers.

The following example demonstrates how to create a table with a caption:

Example:

<HTML>

<HEAD>

<TITLE> TABLE WITH CAPTION </TITLE>

</HEAD>

<BODY>

<CAPTION><B>STUDENT DETAILS</B></CAPTION>

<TR>

<TD>BINOY</TD>

<TD>KHEMKA</TD>

<TD>ARUNACHAL</TD>

</TR>

<TR>

<TD>BIPON</TD>

<TD>DUTTA</TD>

<TD>TINSUKIA</TD>

</TR>

<TR>

<TD>TINSUKIA</TD>

</TR>

<TR>

<TD>RAJESH</TD>

<TD>ARUNACHAL</TD>

</TR>

</TABLE>

</BODY>

</HTML>

<TABLE> ATTRIBUTES:

Attribute	Value	Description
border	pixels	Specifies the border width.
bordercolor	colorname	Specifies the color of the table’s border.
align	right, left, center, justify	Specifies the alignment of a table.
bgcolor	colorname	Specifies the background color of the table
background	URL	Specifies the background image of table
height	pixels or %	Specifies the height of the table
width	pixels or %	Specifies the width of the table
cellspacing	pixels	Specifies the space between cells
cellpadding	pixels	Specifies the space within each cell

Example:

<HTML>

<HEAD>

<TITLE> TABLE ATTRIBUTES </TITLE>

</HEAD>

<BODY>

<CAPTION><B>STUDENT DETAILS</B></CAPTION>

<TR>

<TH>FIRST NAME</TH>

<TH>ADDRESS</TH>

</TR>

<TR>

<TD>BINOY</TD>

<TD>KHEMKA</TD>

<TD>ARUNACHAL</TD>

</TR>

<TR>

<TD>BIPON</TD>

<TD>DUTTA</TD>

<TD>TINSUKIA</TD>

</TR>

<TR>

<TD>TINSUKIA</TD>

</TR>

<TR>

<TD>RAJESH</TD>

<TD>ARUNACHAL</TD>

</TR>

</TABLE>

</BODY>

</HTML>

<TR> ATTRIBUTES:

Attribute	Value	Description
align	right, left, center, justify	Aligns the content in a table row
bgcolor	colorname	Specifies a background color of a row
valign	top, middle, bottom, baseline	Vertical aligns the content in table row

<TH> ATTRIBUTES:

Attribute	Value	Description
align	right, left, center, justify	Aligns the content in a header cell
bgcolor	colorname	Specifies a background color of a header cell
valign	top, middle, bottom, baseline	Vertical aligns the content in header cell
height	pixels	Specifies the height of a header cell
width	pixels	Specifies the width of a header cell
rowspan	number	Specifies the number of rows a header cell should span
colspan	number	Specifies the number of columns a header cell should span

<TD> ATTRIBUTES:

Attribute	Value	Description
align	right, left, center, justify	Aligns the content in a cell
bgcolor	colorname	Specifies a background color of a cell
valign	top, middle, bottom, baseline	Vertical aligns the content in a cell
height	pixels	Specifies the height of a cell
width	pixels	Specifies the width of a cell
rowspan	number	Specifies the number of rows a cell should span
colspan	number	Specifies the number of columns a cell should span

Example:

<HTML>

<HEAD>

<TITLE>ATTRIBUTE OF TABLE, ROWS AND COLUMNS</TITLE>

</HEAD>

<BODY>

<CAPTION><B>STUDENT DETAILS</B></CAPTION>

<TR>

<TH>CLASS </TH>

<TH>ROLL NUMBER</TH>

</TR>

<TR>

<TD ALIGN=”CENTER>BIPON</TD>

</TR>

<TD>BINOY</TD>

<TD ROWSPAN= “3” BGCOLOR= “PINK”>PGDCA</TD>

</TR>

<TD>MANAB</TD>

</TR>

<TD>DIRAJ</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Example:

<HTML>

<HEAD>

<TITLE>TABLES</TITLE>

</HEAD>

<BODY>

<CAPTION><B>STUDENT DETAILS</B></CAPTION>

<TR>

<TH COLSPAN= “4” BGCOLOR=”BLUE” ><FONT SIZE= “7” COLOR= “GREEN” FACE= “ARIAL” > STUDENT REPORT </TH>

</TR>

<TH WIDTH= “20%” >FIRST NAME </TH>

<TH WIDTH= “20%” > ADDRESS </TH>

</TR>

<TR>

<TD>BINOY</TD>

<TD>KHEMKA</TD>

<TD>ARUNACHAL</TD>

</TR>

<TR>

<TD>BIPON</TD>

<TD>DUTTA</TD>

<TD>TINSUKIA</TD>

</TR>

</TABLE>

</BODY>

</HTML>

FRAMES:

HTML allows us to divide a single browser window into several pieces or panes, called frames. Each frame can contain a separate HTML document. So, frames allow us to display more than one HTML document in the same browser window simultaneously. Each frame is independent of the others. A collection of frames in the browser window is known as a FRAMESET.

There are few drawbacks also we should be aware of with frames. They are:

· The web developer must keep track of more HTML documents.

· It is difficult to print the entire page.

· Users often dislike them.

· It presents linking challenges.

· All web browsers do not support frames.

To create a frameset document, first we need the <FRAMESET> tag. The <FRAMESET> tag allows a web developer to define a multiple frame web page, where each frame displays its own HTML document. The <FRAMESET> tag defines how to divide the window into frames. Each frameset defines a set of rows or columns. The values of the rows/columns indicate the amount of screen area each row/column will occupy. Each frame is then represented by a <FRAME> tag. The <FRAME> tag defines which HTML document will initially open in each frame. Frames can be scrolled and resized by the user, unless scrolling and resizing is turned off.

Syntax:

Example: <FRAMESET ROWS= “80, 400”>

(This is an absolute pixel dimension)

Defines 2 rows, with the top row being 80 pixels high and bottom row 400 pixels high. But it is better to use the percentage dimensions because if the frames are defined using absolute pixels, some browsers do not recognize it.

Percentage Dimensions:

We can define rows and columns as percentage of total height or width of the browser window.

Example: <FRAMESET ROWS= “80%, 20 %”>

Defines 2 rows, top filling 80% of the browser window and bottom filling 20% of the total height of the browser window.

Relative Dimension:

<FRAMESET ROWS= “*, 100”>

Defines the top row as the “relative” row that expands or contracts depending on the total space available in the browser window, whereas the bottom row would remain fixed at the height of 100 pixels.

Frame: The <FRAME> tag is nested inside the <FRAMESET> tag. It is used to define frames that are included in the frameset.

Syntax: <FRAME NAME= “framename” SRC= “URL” FRAMEBORDER= “1/0” MARGINHEIGHT= “pixels” MARGINWIDTH= “pixels” NORESIZE SCROLLING= “yes/no/auto”>

Vertical Frameset:

The following example demonstrates how to make a vertical frameset with three different frames.

Example:

<HTML>

<HEAD>

<TITLE> VERTICAL FRAMESET</TITLE>

</HEAD>

</FRAMESET>

</HTML>

Horizontal Frameset:

The following example demonstrates how to make a horizontal frameset with three different frames.

Example:

<HTML>

<HEAD>

<TITLE> HORIZONTAL FRAMESET</TITLE>

</HEAD>

</FRAMESET>

</HTML>

<NOFRAMES> TAG:

Every web browser does not support frames. The <NOFRAMES> tag is a special tag for browsers that do not support frames. <NOFRAMES> tag is used to provide contents in a frame page that we will be displayed by no-frame capable browsers.

The <NOFRAMES> tag is placed following the last <FRAME> tag, either before or after any </FRAMESET> end tags. However, if we add a <NOFRAMES> tag containing some text for browsers that do not support frames, we will have enclose the text in the <BODY> tag. The <NOFRAMES> tag goes inside the <FRAMESET> tag. It can contain all the HTML elements that we can find inside the <BODY> tag of a normal HTML page.

A no-frame capable browser will ignore the frameset element, while a frame capable browser will ignore the contents of the no-frame element.

Example:

<HTML>

<HEAD>

<TITLE> NOFRAMES TAG</TITLE>

</HEAD>

<BODY>BROWSER DOES NOT HANDLE FRAMES</BODY>

</NOFRAMES>

</FRAMESET>

</HTML>

NOTE: If web browser supports frames, then the noframes text remains invisible.

<FRAMESET> Attributes:

Attribute	Value	Description
cols	pixels or %	Specifies the number of columns and their width (sizes)
rows	pixels or %	Specifies the number of rows and their height (sizes)

<FRAME> Attributes:

Attribute	Value	Description
frameborder	0 or 1	Specifies whether or not to display border around the frame
src	URL	Specifies the URL or location of the document to show in a frame
name	framename	Specifies the name of the frame
noresize	noresize	Specifies that a frame is not resizable.
scrolling	yes no auto	Specifies whether or not to display scrollbars in a frame. · yes specifies that scollbars are to be aadded always · no specifies that no scrollbars will be provided · auto specifies that the scrollbar will be added as and when rerequired
marginheight	pixels	Specifies the top and bottom margin of a frame
marginwidth	pixels	Specifies the left and right margin of a frame

Example:

<HTML>

<HEAD>

<TITLE> FRAMES IN HTML</TITLE>

</HEAD>

</FRAMESET>

</HTML>

Example to Create 2 Row Frames:

<HTML>

<HEAD>

<TITLE> TWO ROW FRAMES IN HTML</TITLE>

</HEAD>

<BODY BGCOLOR= GREEN” TEXT= “RED” LINK= “LIME” >SORRY, THIS PAGE REQUIRES A FRAMES CAPABLE BROWSERS

</BODY>

</NOFRAMES>

</HTML>

Example to Create 2 Columns Frames:

<HTML>

<HEAD>

<TITLE> TWO COLUMNS FRAMES IN HTML</TITLE>

</HEAD>

<BODY BGCOLOR= GREEN” TEXT= “RED” LINK= “LIME” >SORRY, THIS PAGE REQUIRES A FRAMES CAPABLE BROWSERS

</BODY>

</NOFRAMES>

</HTML>

Example for Creating 2 rows with second row containing two Columns:

<HTML>

<HEAD>

<TITLE> CREATING ROW AND COLUMN FRAMES</TITLE>

</HEAD>

</FRAMESET>

<BODY BGCOLOR= GREEN” TEXT= “RED” LINK= “LIME” >SORRY, THIS PAGE REQUIRES A FRAMES CAPABLE BROWSERS

</BODY>

</NOFRAMES>

</HTML>

Forms in Web pages:

In HTML, forms are used to collect different kinds of user input. For example, Forms are required when we want to collect some data (like name, e-mail address, contact number etc.) from the site visitors who visit site.

A form is an area that can contain form elements. Form elements are like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc. which are used to take information from the user.

A form is defined with the <FORM> tag. Within the <FORM>…</FORM> tags, all other form related tags and text must appear. The <FORM> tag can contain one more of the following form tags:

· <INPUT>

· <SELECT>

· <OPTION>

· <TEXTAREA>

· <BUTTON>

· <FIELDSET>

· <LABEL>

<INPUT> Tag and Attributes:

The most used <FORM> tag is the <INPUT> tag specifies an input field where the user can input or enter data. The type of input is specified with the type attribute. The following types are the most commonly used input types:

(i) Text

(ii) Checkbox

(iii) Radio

(iv) Button

(v) Reset

(vi) Submit

(vii) Password

Example:

<HTML>

<HEAD>

<TITLE> INPUT ELEMENT IN HTML FORM</TITLE>

</HEAD>

<BODY>

USER NAME :< INPUT TYPE= “TEXT” NAME= “NM” SIZE= “20” MAXLENGTH= “10”>

PASSWORD :< INPUT TYPE= “PASSWORD” NAME= “PWD” SIZE= “20” MAXLENGTH= “8”>

GENDER :   

MALE< INPUT TYPE= “RADIO” NAME= “R1” VALUE= “MALE”>

FEMALE<INPUT TYPE= “RADIO” NAME= “R1” VALUE= “FEMALE”>

INTERESTS:   

MUSIC< INPUT TYPE= “CHECKBOX” NAME= “C1” VALUE= “MUSIC”>

MOVIES< INPUT TYPE= “CHECKBOX” NAME= “C2” VALUE= “MOVIES”>

SURFING< INPUT TYPE= “CHECKBOX” NAME= “C3” VALUE= “SURFING”>

READING< INPUT TYPE= “CHECKBOX” NAME= “C4” VALUE= “READING”>

< INPUT TYPE= “SUBMIT” NAME= “B1” VALUE= “SUBMIT”><BR>

</FORM>

</CENTER>

</BODY>

</HTML>

Drop-Down List:

Example:

<HTML>

<HEAD>

</HEAD>

<BODY>

<OPTION VALUE= “VOLVO”>VOLVO</OPTION>

</SELECT>

</FORM>

</CENTER>

</BODY>

</HTML>

<TEXTAREA> Tag and Attribute:

Example:

<HTML>

<HEAD>

<TITLE>TEXTAREA IN HTML FORM</TITLE>

</HEAD>

<BODY>

<H2><U> TEXTAREA IN HTML FORM</U></H2>

Textarea is a multiline text input control

</TEXTAREA>

</FORM>

</CENTER>

</BODY>

</HTML>

<BUTTON> Tag and Attribute:

Example:

<HTML>

<HEAD>

<TITLE>BUTTONS IN HTML FORM</TITLE>

</HEAD>

<BODY>

<H2><U> BUTTONS IN HTML FORM</U></H2>

<BUTTON NAME= “button1” TYPE= “button”>Click Me</BUTTON>

<BUTTON NAME= “button2” TYPE= “reset”>Clear</BUTTON>

<BUTTON NAME= “button3” TYPE= “submit”>Submit</BUTTON>

</FORM>

</CENTER>

</BODY>

</HTML>

<FIELDSET> Tag:

Example:

<HTML>

<HEAD>

<TITLE>FIELDSET IN HTML FORM</TITLE>

</HEAD>

<BODY>

<H2><U> FIELDSET IN HTML FORM</U></H2>

< FIELDSET>

HEALTH INFORMATION

</LEGEND>

HEIGHT<INPUT TYPE=“TEXT” SIZE= “3”>

WEIGHT<INPUT TYPE =“TEXT” SIZE= “3”>

</FORM>

< /FIELDSET>

</CENTER>

</BODY>

</HTML>

<LABEL> Tag:

Example:

<HTML>

<HEAD>

<TITLE>LABELS IN HTML FORM</TITLE>

</HEAD>

<BODY>

<H2><U> LABELS IN HTML FORM</U></H2>

<P>Which soft drink would you like?

<LABEL FOR= “PEPSI”>PEPSI</LABEL>

<BR>

</FORM>

</CENTER>

</BODY>

</HTML>

Example of the <FORM> tag and its different attributes:

<HTML>

<HEAD>

<TITLE>APPLICATION FORM</TITLE>

</HEAD>

<BODY>

<TR>

<TD>

<H2>DIBRUGARH UNIVERSITY</H2>

<H3>DEPARTMENT OF COMPUTER SCIENCE</H3>

<H4>APPLICATION FOR ADMISSION IN PGDCA</H4>

</CENTER>

<P>

1. Name of the Applicant<BR>

&#160&#160&#160

2. Address<BR>

&#160&#160&#160

3. Gender<BR>

&#160&#160&#160

<INPUT NAME= “GENDER” TYPE = “RADIO” VALUE= “M”>Male

&#160&#160&#160

<INPUT NAME= “GENDER” TYPE = “RADIO” VALUE= “F”>Female<BR>

4. Employed<BR>

&#160&#160&#160

<INPUT NAME= “EMPLOYED” TYPE = “CHECKBOX” VALUE= “Y”>Yes

&#160&#160&#160&#160&#160&#160

<INPUT NAME= “EMPLOYED” TYPE = “CHECKBOX” VALUE= “N”>No

5. Bank Name<BR>

&#160&#160&#160

<OPTION>Bank of Baroda

<OPTION>Canara Bank

<OPTION>Corporation Bank

<OPTION>Syndicate Bank

<OPTION>State Bank of India

<OPTION>Union Bank

</SELECT>

<BR>

6. Remarks <BR>

&#160&#160&#160

<TEXTAREA NAME= “REMARKS” ROWS= “3” COLS= “45”> This student requests for extra computer time on Saturdays.

</TEXTAREA><BR><BR>

</TD>

</TR>

</TABLE>

</FORM>

</BODY>

</HTML

CSS (Cascading Style Sheet):

CSS or Cascading Style Sheet is used to control the style of a web document in a simple and easy way. A single CSS file can contain positioning, layout, font, colors and style information for an entire web site. CSS file can be referenced by each HTML file on the site. CSS is a means of separating the content of an HTML document from the style and layout of that document.

CSS is easy to learn and understand. It provides powerful control over the presentation of an HTML document. Using CSS, we can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variety of other effects.

CSS Syntax:

A CSS comprises of style rules (CSS Rules) that are interpreted by the browser and then applied to the corresponding elements in the document. A CSS rule has two main parts:

· Selector

· Declaration (one or more)

Selector: A selector is an HTML tag at which style will be applied. This could be any tag like <h1> or <table> etc.

Declaration: Each declaration consists of a property and a value. The property is the style attribute we want to change. Each property has a value. A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets.

Syntax of CSS style rule is as follows:

Selector {property: value ;}

Example:

h1 {color: blue; font-size: 12px ;}

To make the CSS more readable, we can put one declaration on each line, like this:

P, H1

{

color: red;

text-align: center;

}

We can also apply a style to many selectors. Just separate the selectors with a comma as given in the following example:

H1, H2, H3

{

color: blue;

font-weight: normal;

text-transform: lowercase;

}

Example:

<HTML>

<HEAD>

<STYLE>

P, H2, H3

{

TEXT-ALIGN: CENTER;

COLOR: BLUE;

FONT: WEIGHT: BOLD;

}

</STYLE>

</HEAD>

<BODY>

<H2>HEADING-2 IS AFFECTED BY STYLE</H2>

<H3> HEADING-3 IS AFFECTED BY STYLE </H3>

<P> THIS PROGRAM IS AFFECTED BY STYLE

</BODY>

</HTML>

CSS Embedding Techniques:

There are four techniques to embed styles with HTML document.

(i) Inline CSS- The STYLE Attribute

(ii) Embedded CSS- The <STYLE> Tag

(iii) External CSS- The <LINK> Tag

Inline CSS:

These style sheets are used to change individual tags like <H1>, <P>, <BODY> etc. in an HTML document. i.e., they apply to a particular tag only. We can use STYLE attribute of any HTML tag to define style rules. These rules will be applied to that Tag only. STYLE attribute is written within the tags whose style we would like to change.

E.g.: <H1> style= “font-size: 16pt”> the default setting of the <H1> tag is overridden by the usage of the style attribute within it.

Example:

<HTML>

<HEAD>

<TITLE>INLINE STYLE SHEET</TITLE>

</HEAD>

<BODY>

<H1 STYLE = “COLOR: RED; FONT-FAMILY: ARIAL” > INLINE STYLE SHEET</H1>

<H1>THIS LINE IS NOT STYLED</H1>

</BODY>

</HTML>

Example:

<HTML>

<HEAD>

<TITLE> INLINE STYLE SHEETS</TITLE>

</HEAD>

<BODY>

<H1 STYLE= “FONT-FAMILY: ARIAL; FONT-SIZE: 24PT; COLOR: RED; FONT-STYLE: ITALIC; FONT-WEIGHT: BOLD”> THIS IS A H1 TAG WITH STYLE ATTRIBUTE</H1>

<P STYLE= “FONT-SIZE: 12PT; COLOR: AQUA; FONT-STYLE: ITALIC”>THIS IS PARAGRAPH</P>

</BODY>

</HTML>

Advantages of Inline CSS:

You can easily and quickly insert CSS rules to an HTML page. That’s why this method is useful for testing or previewing the changes, and performing quick-fixes to your website.
You don’t need to create and upload a separate document as in the external style.

Disadvantages of Inline CSS:

Adding CSS rules to every HTML element is time-consuming and makes your HTML structure messy.
Styling multiple elements can affect your page’s size and download time.

Embedded CSS:

We can put CSS rules into an HTML document using the <STYLE> tag. This tag is placed inside the <HEAD> tag of the HTML document. Rules defined using <STYLE> tag will be applied to all the elements available in the document.

Here is the general syntax:

<HEAD>

STYLE RULES

……………………

</STYLE>

</HEAD>

Example:

<HTML>

<HEAD>

<!--

BODY

{

Background: Red;

Font-family: Impact

}

{

Font-weight: Bold;

Font-size: 24pt;

Color: Blue

}

-->

</STYLE>

</TITLE>EMBEDDING A STYLE SHEET</TITLE>

</HEAD>

<BODY>

<H1>WELCOME TO THE WORLD OF STYLE SHEET</H1>

</BODY>

</HTML>

Example:

<html>

<head>

<title>Embedded style sheets</title>

<style>

<!--

{

font-family: Arial; font-size: 24pt; color: Blue; text-decoration: underline; font-style: italic; font-weight: bold

}

{

color: red; font-size: 12pt

}

body

{

font-family: Arial; color: Aqua; font-size: 14pt

}

-->

</style>

</head>

<body>

<h1>this is another h1 tag</h1>

<p>This is a paragraph. Changes applied in paragraph tag reflected here</p>

<p>paragraph two: The changes are applied to all tags of the same type provided you have specified a style for them. </p>

Rest of the body

</body>

</html>

Advantages of Internal or Embedded CSS:

You can use class and ID selectors in this style sheet.
Since you’ll only add the code within the same HTML file, you don’t need to upload multiple files.

Disadvantages of Internal or Embedded CSS:

Adding the code to the HTML document can increase the page’s size and loading time.

External CSS:

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, we can change the look of an entire website by changing one file. The <LINK> tag can be used to include an external style sheet file in HTML document.

An external style sheet is a separate text file with .css extension. We define all the style rules within this text file and then we can include this file in any HTML document using <LINK> tag. The <LINK> tag goes inside the <HEAD> tag.

Here is the general syntax of including external CSS file:

<HEAD>

</HEAD>

Example:

Code for External Style Sheet:

BODY

{

Background-image: url("BIRD.jpg");

Font-family: Impact

}

H1, H2

{

Font-weight: Bold;

Font size: 24 pt;

Color: Red

}

Save the above external style sheet code with file name “EXT.CSS”

Code of the HTML document, which makes use of above Style Sheet:

<HTML>

<HEAD>

<TITLE>LINKING AN EXTERNAL STYLE SHEET</TITLE>

</HEAD>

<BODY>

<H1>WELCOME TO THE WORLD OF STYLE SHEETS</H1>

<H2>This is how to link an external style sheet </H2>

</BODY>

</HTML>

Example:

Code for External Style Sheet:

a: link

{ color: yellow; }

a: visited

{ color: blue; }

a: active

{ color: green; }

body

{

font-family: Arial;

background-color: aqua;

color: red;

}

h1, h2, h3, h4, h5, h6

{ font-family: Times New Roman; font-weight: bold }

h1 { color: Red; }

h2 { color: green; }

h3 { color: blue; }

h4 { color: yellow; }

h5 { color: lime; }

h6 { color: maroon; }

Save the above external style sheet code with file name “LINK.CSS”

Code of the HTML document, which makes use of above Style Sheet:

<html>

<head>

<title>linking style sheet</title>

</head>

<body>

<p><a href= "ex21.html"> Tables</a>

     <a href= "ex20.html" >Bordered Table </a>          <a href=" ex22.html">Row-Column heading </a></p>

</body>

</html>

Advantages of External CSS:

Since the CSS code is in a separate document, your HTML files will have a cleaner structure and are smaller in size.
You can use the same .css file for multiple pages.

Disadvantages of External CSS:

Your pages may not be rendered correctly until the external CSS is loaded.
Uploading or linking to multiple CSS files can increase your site’s download time.

Web Publishing:

“Web publishing” or “online publishing” is the process of publishing content (information) on the internet. It includes creating and uploading websites, updating webpages, and posting content to these webpages online. The published content may include text, images, videos and other types of media.

In order to publish content on the web, a publisher must require three things: 1) web development software, 2) an Internet connection, and 3) a web server. The website development software can be a professional web design application like Dreamweaver or a simple web-based content management system like WordPress. The Internet connection serves as the medium for uploading the content to the web server. Large websites may use a dedicated server to host the content, but many smaller websites usually reside on shared servers, which host multiple websites. Most blogs are published on public web servers through a free service like Blogger.

Since web publishing doesn't require physical materials such as paper and ink, it costs almost nothing to publish content on the web. Therefore, anyone with the three requirements above can be a web publisher. Additionally, the audience is limitless since content posted on the web can be viewed by anyone in the world with an Internet connection. These advantages of web publishing have led to a new era of personal publishing that was not possible before.

NOTE: Posting updates on social networking websites like Facebook and Twitter is generally not considered web publishing. Instead, web publishing generally refers to uploading content to unique websites.

Introduction to HTML | HTML Introduction | HTML Tutorial

Basics of HTML:

Brief history of HTML:

Why HTML is used?

HTML Tag:

Advantages of Internal or Embedded CSS:

You can use class and ID selectors in this style sheet.
Since you’ll only add the code within the same HTML file, you don’t need to upload multiple files.

Posted by: Learn CS with Eliza

Post a Comment

0 Comments

Popular Posts

C Programming Practical Important Program Questions | C Programming Coding Questions and Answers

Introduction to C | C Language Introduction | Learn C Programming

Search your topic

Labels

Menu Footer Widget

Introduction to HTML | HTML Introduction | HTML Tutorial

Basics of HTML:

Brief history of HTML:

Why HTML is used?

HTML Tag:

Advantages of Internal or Embedded CSS:

You can use class and ID selectors in this style sheet.Since you’ll only add the code within the same HTML file, you don’t need to upload multiple files.

Posted by: Learn CS with Eliza

You may like these posts

Post a Comment

0 Comments

Popular Posts

C Programming Practical Important Program Questions | C Programming Coding Questions and Answers

Introduction to C | C Language Introduction | Learn C Programming

Search your topic

Labels

Menu Footer Widget

You can use class and ID selectors in this style sheet.
Since you’ll only add the code within the same HTML file, you don’t need to upload multiple files.