HTML :- BASICS

April 01, 2021

🪔HTML

INTRODUCTION:-

HTML stands for Hyper Text Markup Language. It is the markup language i.e. a system for annotating a text in a way which is syntactically distinguishable from other text and called presentation semantics so that particular piece will represented in a distinguished manner accessible to the user and Markup is omitted in the process of creating presentation for end-user consumption. HTML is used to develop web pages. It creates structured documents by providing structural semantics for text such as headings, paragraphs, lists etc. It allows the embedding of images and objects can also used to create various forms. It is shown in the form of HTML elements which consists of "tags" surrounded by angle brackets (<.....>) within the web page content. HTML is the language interpreted by a browser web pages are also called HTML processors like web browser. It may contain Cascading Style Sheets (CSS) to define the appearance and layout of text and other material provided on web pages.

DEFINITION:-

HTML is a semantic language for composition of contents with set of special codes called tag created for linking of piece of information and seamless document presentation.

HTML is very easy to learn and there is no need to be an expert programmer to develop HTML documents.

HTML TAGS:-

Tags are instructions that are embedded directly into the document. An HTML tag is used to instruct or provide a signal to a browser that has to do something to other than show text upon the screen. By conventional all HTML tags begin with an open angle bracket (<) and end with a closed brackets (>).

TYPES OF HTML TAGS:-

Paired tags

Paired tags are those tags which requires a companion closing tag e.g. <B> ........</B> is its companion closing tag.

Singular tags

The second type of tag is the singular or stand -alone tag. A stand alone tag does not have a companion closing tag. For example <BR> will insert a line break. This tag does not require any closing companion.

TAG ATTRIBUTES:-

Some HTML tags require additional information to be supplied to them. For instance when a picture is placed on the screen, information like the height and width of the picture can be specified. Additional information supplied to an HTML tag is known as ATTRIBUTES of a tag. Attributes are written immediately following the tag seperated by a space.

Example :- <body bgcolour="blue">

STRUCTURE OF AN HTML PROGRAM:-

Every HTML Program has a rigid structure. The entire web pages is enclosed within <HTML>....</HTML> tags within these tags two distinct sections are created using <HEAD>...</HEAD> Tags and the <BODY>...</BODY> tags.

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

DOCUMENT HEAD:-

Information placed in this section is essential to the inner working of the document and had nothing to do with the content of the document in the expectation of information contained with the <TITLE></TITLE> tags all information placed within the <HEAD></HEAD> tags is not displayed in the browser.

DOCUMENT TITLE:-

A web page could have a title that describes what be a archived by using the TITLE tag. Text include between the <TITLE>.....</TITLE> tag shows up in the title bar of the browser window.

DOCUMENT BODY:-

The tags used to indicate the start and of the main body of the text information are <BODY>. Page default like background colour, text colour, font size, font weight and so on can be specified as attributes of the <BODY>tag. Some of the attributes that the <BODY> tag takes are:

1. BGCOLOR

Changes the default background color to whatever color is specified with this tag. We can Specify a color by name or its equivalent hexadecimal number.

2. BACKGROUND

Specifies the name of the JPEG or GIF file that will be used as the background of The document. This file tiles up across the page to give a background.

3. TEXT

Changes the body text color from its default value to the color specified with this attribute.

Example:-

<BODY BACKGROUND="abc.jpeg" TEXT=red>.

The .JPEG file should be present in the current working directory. If not, a Relative path should be specified to where the .JPEG file exists.

SPECIFYING A RELATIVE FILE PATH

Example

Consider the following directly structure.

C:/

| Boxes.jpeg

| Vaishali

| Test.html

| Texture.gif

| Images

| Stars.jpg

Consider working with the file test.html To use all the different image files a background, the tag specification will change to as follows:

1. Use of the file boxes.jpeg

2. Use of the file texture.gif

3. Use of the file stars.jpg

COMMONLY USED TAGS:-

This tag is used for paragraph breaks. It places a blank line which separates. Paragraph in texture Materials. It can be singular or paired. ALIGN is its commonly used attribute which tells the alignment of the paragraph i.e. RIGHT, LEFT, or CENTER.

When text needs to start from a new line and not continue on the same line (without skipping a blank line), the <BR> tag should be used. This tag simply jumps to the start of next line.

HEADING STYLES:-

HTML supports six different levels of headings. The highest-level header format is <H1> and the lowest-level is <H6>. All the style appear in bold face and the size of the heading depends on the level chosen i.e. <H1> to <H6>.

Example

<H3> the early years </H3>. As the number next to <H> (1,2,3,4....) increase the font size actually decrease.

DRAWING LINES:-

The tag <HR> draws lines and horizontal rules. This tag draws a horizontal line across the whole page, wherever specified. The attributes to the <HR> tag are:

ALIGN : Aligns the line on the browser screen, which is by default, aligned to the center of the screen.

ALIGN=LEFT

ALIGN=RIGHT

ALIGN=CENTER

SIZE : Changes the size of the rule.

WIDTH : Sets the width of the rule. It can be set the to a fixed number of pixels, or to a percentage of the available screen width.

BOLD:-

Display text in BOLDFACE style. The tag used are <B>.....</B>

<B> Welcome to our homepage!!</B>

ITALICS:-

Displays text in ITALICS. The tags used are between <I>...</I>

<I> Welcome to our homepage!!</I>

UNDERLINE:-

Displays text as underlined. The tags used are <U>....</U>

<U> Welcome to our homepage!!</U>

CENTRING(TEXT, IMAGES ETC):-

<CENTER>....</CENTER> tags are used to center everything found between text, lists, images, rules, tables or any other page element.

<CENTER> Welcome to our homepage! <IMG SRC=C:/abc.jpg"> </CENTER>

SPACING (INDENTING TEXT):-

The tag used for inserting blank spaces in an HTML document is <SPACER>. Its attribute are:

TYPE

It is used to specify whether space has to be left horizontally or vertically,

TYPE="HORIZONTAL"

TYPE="VERTICAL"

SIZE

it indicates the amount of space to be left. Size accepts any integer.

*the SPACER command is understood only by the browser Netscape.

Instead of this we can use   it places a single space for more spaces we can use it more than once.

FONT SIZE & COLORS:-

The tag specified within the tags <FONT> and </FONT> will appear in the tag <FONT>. The attributes are:

FACE

Sets the font to the specified font name.

SIZE

Sets the size of the text. SIZE can take values between 1 and 7. The default size used is 3. SIZE can also

be set relative to the default size i.e. SIZE= x, where x is any integer value and will add upto the default

size. For instance, size =+3 will display a size of 6.

COLOR

Sets the color of the text. COLOR can be set to an ENGLISH language color name or to a hexadecimal

triplet.

<FONT FACE="Comic Sans MS" SIZE=6 COLOR=RED> Welcome to our Homepage! </FONT>

The FONT FACE attribute can take any name supported by windows i.e. the font should be present in the

directory, C:\Windows\Font.....If the font used with this attribute is not available on the computer the

browser uses its own default font. Therefore, it is a good practice to use commonly used fonts, which

have a high possibility of being present on every client computer.

LISTS:-

Lists are the collection of items.

TYPES OF LIST-

There are three types of lists.

UNORDERED LIST (BULLETS):-

An unordered list starts with the tag <UL> and ends with</UL>. Each list item starts with the tag <LI>.The

attributes that can be specified with <LI> are:

TYPE-

It is used to specify the types of the bullet.

TYPE=FILLROUND will gives the solid round black bullet.

TYPE=SQUARE will give the solid square black bullet.

EXAMPLE

<LI> Floppies

<LI>Hard Disks

<LI>Monitors

</U>

ORDERED LISTS (NUMBERING):-

An ordered list starts with the tag <OL> and ends with </OL>. Each list items starts with tag<LI>. The

attributes that can be specified with <OL>are:

TYPE-

It is used to control the numbering scheme to be used.

TYPE="1" will give counting number (1, 2, 3.......)

TYPE="A" will give Upper case letters (A, B, C.....

TYPE="a" will give Lower case letters (a, b, C......)

TYPE="I" will give Upper case Roman Number (I, II, III, IV...)

TYPE="I" will give Lower case Roman Number ( i, ii, iii, iv...)

STARTS:-

It alters the numbering sequence. It can be set to any numeric value.

VALUES:-

It changes the numbering sequence in the middle of an ordered list. It is to be specified with the <LI> tag.

<LI> Floppies

<LI VALUE=6> Hard disks

<LI> Monitors

</OL>

DEFINITION LISTS:-

Definition list values appear within tags<DL> and </DL>. Definition lists consist of two parts:

DEFINITION TERM:-

Appears after the tag <DT>

DEFINITION DESCRIPTION:-

Appears after the tag <DD>

<DL>

<DT>Keyboard

<DD>An input device

<DT>Printer

<DD>An output device

</DL>

OUTPUT:-

Keyboard

An input device

Printer

An output device

ADDING GRAPHICS TO HTML DOCUMENTS:-

Other than text, Html allows placing of static and/or animated images in an Html Pages.Html accepts two

pictures files formats.gif and jpg. Using tools such as Gif constructor or Adobe Photoshop, images can be

created to suit the requirements of a webpage and saved in there file formats.

Once an image is ready and stored in the above mentioned formats, it can be inserted into a webpage using

the tag<IMG>, which tapes the name of the image file as an attribute. In addition, HTML also allows control

of the height, width, border and so on, of every image placed on the webpage. The <IMG> tag tapes the

following attributes.

ALIGN:-

It controls alignment of the text following the image. (TOP, MIDDLE, BOTTOM) Control Alignment of the

IMAGE with respect to the VDU screen (LEFT, CENTER and RIGHT)

BORDER:-

It specifies the size of the border to place around the image.

WIDTH:-

It specifies the width of the image in pixels.

HEIGHT:-

It specifies the height of the image in pixels.

HSPACE:-

It indicates the amount of the space to the left and right of the image.

VSPACE:-

It indicates the amount of space to the top and bottom of the image.

ALT:-

It indicates the text to be displayed in case the Browser is unable to display the image specified in the SRC

attribute.

EXAMPLE

<IMG WIDTH=44>HEIGHT=57 BORDER=0 HSPACE=0 SRC="abc.jpeg">

TABLE:-

A table is a two dimensional matrix, consisting of rows and columns. Tables are intended for displaying data

in columns on a webpage. All table related tags are included between the <TABLE></TABLE>tags. Each row

of a table is described between the <TR> </TR> tags. Each column of a table is described between the <TD>

</TD> tags.

Table rows can be of two types:

TABLE HEADER ROWS (A row that spans across columns of a table):-

A table header row is defined using <TH> </TH> tags. The content of a table header rows is automatically

centered and appears in boldface.

DATA ROWS (Individual data cells Placed in the horizontal Plane):-

There could be a single data cell (i.e. a single column table) or multiple data cells (i.e. a multi column table).

Data cells hold data that must be displayed in the table. A data row is defined using <TR> </TR> TAGS. Text

matter displayed in a data row is left justified by default. Any special formatting like boldface or italics is

done by including appropriate formatting tags inside the <TR> </TR> tags. An image can also be displayed in

a datacell.

<TR> and <TH> can also be used as singular tags. The attributes that can be included in the <TABLE> tag are:

ALIGN

Horizontal alignment is controlled by the ALIGN attribute. It can be set to LEFT, CENTER or RIGHT.

VALIGN

It Controls the vertical alignment of cell contents. It accepts the values TOP, MIDDLE

BOTTOM.

WIDTH

it Sets the WIDTH to a specific number of Pixels or to a percentage of the available screen width. If width is

not specified, the data cell is adjusted based on the cell data value.

BORDER

It controls the border to be placed around the table. The border thickness is specified in pixels.

CELLPADDING

This attribute controls the distance between the data in a cell and the boundaries of the Cell.

CELLSPACING

It Controls the spacing between the adjacent cells.

COLSPAN

The COLSPAN attribute inside a <TH> or <TD> tag instructs the browser to make the cell

defined by the tag to take up more than one column. The COLSPAN attribute can be set equal to the number

of columns the cell is to occupy. This attribute is useful when one row of the table needs to be a certain

number of columns wide.

ROWSPAN

The ROWSPAN attribute works in the same ways as the COLSPAN attribute except that it allows a cell tape

up more than one row. The attribute can be set by giving a number value.

THE CAPTION TAG:-

Often tables need to be given a heading, which gives the reader a context for the information in the table.

The table heading are called caption. Captions can be provided to a table by using the <CAPTION>

</CAPTION> tags. This paired tag appears within the <TABLE> </TABLE> tags. The table caption can be made

to appear about or below the table structure with the help of the attribute ALIGN.

ALIGN

It controls placing of the caption with respect to the table.

ALIGN=BOTTOM

ALIGN=TOP

By passing a row's <TR> tag's align (VALIGN or ALIGN) attributes, vertical or the horizontal alignment

can be made identical for every cell in the given row.

By passing a <TH> or <TD> tag's align (VALIGN or ALIGN) attributes, vertical or horizontal alignment in both

the header and data cells can be done. Any alignment specified at the cell level overrides any default

alignment specified in a <TR> tag.

Alignment specified in <TD> or <TH> apply only to the cell being defined.

Alignment specified in a <TR> tag apply to all cells in a row, unless overridden by an alignment specification

in a <TD> or <TH> tag.

If the WIDTH attribute is associated with <TH> tag than the width of an individual column can be adjusted.

LINKING DOCUMENTS:-

HTML allows linking to other HTML document as well as images clicking on a section of text or an image on

one webpage will open an entire webpage or an image. The text or an image that provides such linkages is

called Hypertext, a Hyperlink or a Hotspot.

The browser distinguishes hyperlinks from normal text. Every hyperlink,

a) Appears blue in color

The default color setting in a browser for hyperlink text or images.
The color can be set dynamically via an HTML program if required

b) The hyperlink text/image is underlined.

c) When the mouse cursor is placed over it, the standard arrow shaped mouse cursor changes to the

shape of a hand.

The blue color, which appears default, can be overridden. To change there link colors there are three

attribute but can be specified with the <BODY> tag. These are as follows-

LINK

Changes the default color of a hyperlink to whatever color is specified with this tag. The user can specify the

color name or an equivalent hexadecimal number.

ALINK

Changes the default color of a hyperlink that is activated to whatever color is specified with this tag. The user

can specify the color name or an equivalent hexadecimal number.

VLINK

Changes the default color of a hyperlink that is already visited to whatever color is specified with this tag.

The user can specify the color or an equivalent hexadecimal number.

Links are created on a webpage by using the <A> </A>. Anything written between the <A> </A> tags

becomes a hyperlink/hotspot. By clicking on the hyperlink navigation to a different webpage or image takes

place.

The document to be navigated to needs to be specified. By using the HREF attribute of the <A> tag the next

navigation webpage can be specified.

SYNTAX

<A HREF="http://www yahoo.com">Go to Yahoo</a>

Hyperlinks can be of two types:

a) Links to an external document

b) Links (jumps) to a specific place within the same document

c) Generally done in case of a webpage containing a large amount of text.

EXTERNAL DOCUMENT REFERENCES:-

EXAMPLE

<A HREF="details.htm">Visit my home page</A>

Here visit my home page becomes a hyperlink and links to another document detail.htm, which as present in

the current working directory. If the file is not present in the current directory, a relative or absolute path

can be specified

By default, a hyperlink takes a user to the beginning of the new webpage. At times it might be necessary to

jump to a particular location within the new web page. To enable a jump to a specific location on a webpage,

named anchors can be setup. Anchors target hyperlinks to a specific location point on a webpage. Jumping

to a particular location on a webpage can be summarized in two steps:-

STEP ONE

Mark the location to be jumped to i.e. identify the location in a webpage to jump to by giving the location a

name. Using the NAME attribute of the <A> tag does this.

SYNTAX

EXAMPLE

This identifies a location to be jumped to as point 1.

STEP TWO

While jumping to a specific location of a specific webpage, the name of the location to jump to in HTML file

is provided with the name of the web page.

This is done as follows:

SYNTAX

EXAMPLE

<A HREF="details.htm #pointl">Visit my home page </A>

Visit my home page becomes a hotspot and leads to location named pointl in the file details.htm.

INTERNAL DOCUMENT REFERENCES

Sometimes a jump is required to a different location in the same document. Since the jump has to be targeted to specific location, the same two steps need to be performed as before i.e. identify a location with a name and then jump to that location using the name. The only difference is that the file.htm now will be the current filename.htm.

SYNTAX

<A NAME="location name">used for making the name of the point

<A HREF="K location name">....</A>referencing the marked point in the same document

The absence of the filename.htm before the N symbol indicates that a iumo is rewired within the same document.

EXAMPLE

<A HREF="#pointl">Visit my home page </A>

Visit my home page becomes a hotspot and leads to a location named pointl in the same document Ensure that the named location is specified in the HTML file where a jump is being made.

IMAGES AS HYPERLINKS

Just as text can act as hyperlink, so also images can act as hyperlink. As seen, anything included within <A> </A> tags becomes a hotspot. Thus, an image can be made a hotspot by enclosing a <IMC> tag with in the <A> </A> tags. The <IMG> tag places the image on the screen, and because the <IMG> tag is enclosed within the <A> </A> tags, it becomes a Hotspot.

EXAMPLE

< A HREF ="details.htm"> <IMG SRC="mickey.gir> Here, the pictures mickey.gif acts as a Hotspot, and </A> navigation to a file details.htm

IMAGE MAPS

When a hyper link is created on an image, clicking on any part of the image will lead to opening of the document specified in the <A HREF > tag. If the image is a large image and there is a need to link multiple document documents to the same image there has to be a technique that divides the image into multiple sections and allow linking of each section to a different document.

The technique that is implemented to achieve this IS an image map. Image maps can be created and applied to an image so specific portion of the image can be linked to a different file/image. Linked region of an image map are called hot regions and each hot regions is associated with the browser (navigated to) when the hot region Is clicked.

LINKING AN IMAGE MAP IS A TWO STEP PROCESS

STEP ONE

Create an image map i.e. divide the image into various areas. This is done using the <MAP> </MAP> tags. The <MAP> tag takes an attribute NAME, via which the map can be referenced in an HTML file.

SYNTAX

Within the <MAP> </MAP> tags the <AREA> tag is specified.

This tag defines the specific region with in the image. The </AREA> tag takes certain attributes. The attributes are:

SHAPE

The shape of a region can be one of the following: Rectangular, circle, polygon, default.

COORDS

Each of the above shapes takes different co-ordinates parameters. They are as follows-

A rectangle will take four co-ordinates: X1, Y1, X2, Y2

A circle will take three coordinates: Center X, Center Y. and radius.

A polygon will take three or more pairs of co-ordinates denoting a polygon region.

A default shape will not take any parameter and it indicates the portion of the image not specified under any area tag.

HREF

It takes the name of the html file that Is to be linked to the particular area on the Image.

EXAMPLE

STEP TWO

Deals with applying the Image map to a particular Image. For this purpose, the <IMG> tag takes an attribute called USEMAP that takes the name of the image map as a value, and applies the map specifications to the respective image. The value is always preceded with the it sign.

SYNTAX

EXAMPLE

FRAMES

FRAME

When we split the browser screen into more than one section then there individual sections are called Frames. The HTML tag that divide a browser screen Into two or more HTML recognizable unique regions Is the <FRAMESET> </FRAME SET> tags. Each unique region Is called a frame. Each frame can be loaded with a different document and hence, allow multiple HTML documents to be seen concurrently. The HTML frame is a powerful feature that enables a webpage to be broken into different unique sections that although related, operate independently of each other.

THE <FRAMESET> TAG

The splitting of a browser screen into frames is accomplished with the <FRAMESET> and </FRAMESET> tags embedded into the HTML document. The <FRAMESET> </FRAMESET> tags require one of the following two attribute depending on whether the screen has to be divided into rows or columns.

ROWS

This attribute is used to divide the screen into multiple rows. It can be set equal to a list of values. Depending on the required size of each row. The values can be:

• A number of pixels.

• Expressed as a percentage of the screen resolution.

• The symbol*,which indicates,the remaining space.

COLS

The attribute is used to divide the screen into multiple columns. It can be set equal to a list of value. Depending on the required size of each column. The values can be same as for rows.

THE <FRAME> TAG

Once the browser screen is divided Into rows and columns, each unique section defined can be loaded with different HTML documents. This is achieved by using the <FRAME> tag, which tapes in the following attributes:

SRC

It Indicates the URL of the document to be loaded into the frame.

MARGINHEIGHT

It specifies the amount of white space to be left at the top & bottom of the frame.

MARGINWIDTH

It specifies the amount of white space to be left along the sides of the frame.

NAME

It gives the frame a unique name so it can be targeted by other documents. The name given must begin with an alphanumeric character.

NORESIZE

It disables the frames resizing capability.

SCROLLING

It controls the appearance of horizontal and vertical scrollbars in a frame. This takes the values YES/ NO/ AUTO.

EXAMPLE

<FRAMESET ROWS="30%,">.

/*Divide the screen into 2 rows, one occupying 30% of the screen, and the other occupying the remaining 70% of the screen */

/*Divide the 1st row into the equal columns, each 50% of the scree*/

/*Loads the first frame with the file1.html"*/

/*Loads the second frame with the file2.html"*/

</FRAMESET>

</FRAMESET>

LARGENING NAMED DOCUMENT:-

Whenever a hyperlink, which loads a document in a frame, is created, the file referenced in the hyperlink will be opened and will replace the current document that is in the frame. In the situation where the new document need to be opened in a different frame while keeping the document from which the new document was navigated open in a different frame, a simple HTML coding technique must be used. Since the hyperlink must open an HTML file in another frame, the freme in which the HTML files is to be opened needs to be named. This is done by using the NAME attributes of the <FRAME></FRAME> tags. The name takes one parameter, which is its frame name.

The hyperlink Tag will have to be supplied with the following information

1. The file name (.html) file that has to be opened (navigate to )

2. The name of the frame where the filename.html file has to be opened.

The attributes, via which the frame name is specified is the TARGET attribute, which is a part of the

<A>..... </A> tag. This information is given as:

<A HREF="Index.htm" TARGET="Main">Visit us</A>

EXAMPLE

<FRAMENAME="Part">

</FRAMESET>

The above command will divide the browser screen into two parts vertical frames the first frame called part

that will occupy 30% of the browser area and the second frame called main will occupy 70% of the browser

area.

HYPERLINK SPECIFICATIONS:-

<a href = "Index.htm" TARGET="main"> visit us</A>

Here an html file called "Index.htm" is linked into the frame named 'main' when the hyperlink visit us 'is

clicked while specifying the name of the target frame in TARGET attribute, the cost must be same as

specified in the NAME attribute of the<A></A>tag.

When <FRAMESET>is being ended within an HTML document, the<BODY></BODY> tags are not used.

FORMS:-

An HTML form provides data gathering functionality to a web page. HTML forms provide a full range of GUI

controls. Additionally, HTML forms can automatically submit the data collected in its control to web servers

by CGI programs, server side, JavaScript, Javaservlets and so on.

Java script allows the validation of data entered into a form at the client side. Java script can be used to

ensure that only valid data is returned to a web server for further processing.

THE FORM OBJECT:-

When creating an interactive website for the internet it is necessary to capture user input and process this

input. Based on the result of this processing appropriate information from a web site can be dispatched to

be viewed. Both the capturing of user input and the painting of the appropriate web pages tapes place in the

client side browser's window.

Traditionally, user input is captured in a 'form'.HTML provides the<form></form> tags with which an HTML

form can be created to capture user input.

As soon as the <FORM></FORM> tags are encountered in an HTML program by a java script enabled

browser. The browser creates a forms array in memory. This array tracks the number of form objects

described in the HTML program.

Each form object in the HTML page will be described between its own <FORM> </FORM> HTML tags.

This topic has completed

See you next time 🙂🙂

Thanking you for read my blog 😁😁

Computer

1 comments

Rashmi jadaun3 April 2021 at 23:19
Very nice blog ☺️👍
ReplyDelete
Replies

Add comment