web file[1]

8/2/2019 web file[1]

1/19

CT INSTITUTE OF MANAGEMENT AND TECHNOLOGY, JALANDHAR

PRACTICAL FILE

OF

WEB DEVELOPMENT

Submitted To:-

Submitted By:-Ms. Ambrinder KaurRanjit Singh(Dept of CA)BCA 2nd sem.

1103395

HTML Page 1

8/2/2019 web file[1]

2/19


INDEX

Sr.No.

Date Contents Pages Remarks

1 02-01-12 Introductionto HTML 3 - 42 04-01-

12Tags inHTML

5 - 8

3 09-01-12

HTML lists 9 - 10

4 11-01-12

Tables 11 - 12

5 16-01-12

AddingGraphics

13 - 14

6 18-01-12

HTML links 15 - 16

HTML Page 2

8/2/2019 web file[1]

3/19


Introduction to HTML

HTML stands forHyperText Markup Language.The language used to develop web

pages is called HTML.HTML is a language interpreted by browser. Web pages are also

called HTML documents.HTML is a set of special codes that can be embedded in text

to add formatting and linking information. HTML is specified as TAGS in an HTML

document.

Elements of HTML:

a) HTML editor:

An HTML editor is a software application for creating web pages. Although

the HTML markup of a web page can be written with any text editor, specialized

HTML editors can offer convenience and added functionality. For example, many

HTML editors work not only with HTML, but also with related technologies such

as CSS, XML and JavaScript.

b) HTML Tags:

Tags are instructions that are embedded directly into the text of the document. An

HTML tag is a signal to a browser that it should do something over than just through

text up on the screen. By convention all HTML tags begin with an open angle bracket

().

HTML Tags can be of two types:

i. Paired Tags:

A tag is said to be a paired tag if it, along with a companion tag , flanks the text.

For example the tag is a paired tag .the tag with its companion tag causes

the text contained between them to be rendered inBold. The effect of other paired tags

is applied only to the text they contain.

HTML Page 3

8/2/2019 web file[1]

4/19


In paired tags,the first tag () is often called the openingtagand the second tag

() is called the closing tag.

The opening tag activates the effect and the closing tag turns the effect off .

ii. Singular Tags:The second type of tag is the singular orstand-alone tag. a stand alone tag does not

have a companion tag.

For example tag will insert a line break .this tag does not require any companion

tag.

Attributes:

Attributes are associated with each tag to further define the tags.

The general syntax is as follows:

Structure of an HTML program

Every HTML program has one simple structure. There are two major components to

the structure of a web site,

Head :The head provides the title and other information about your web site

Body : the body provides the information and content. Each of these

components are marked by "tags", which let the computer know where the

information is written.

For example:

My Web Page

HTML Page 4

8/2/2019 web file[1]

5/19


Main body of the page, with text, pictures, etc.

TAGS IN HTML

Tag Description

To create a link to another document, by using the href attribute

Content is shown as bold type

The body part of the HTML document. See introduction to HTML

Force line break within paragraph. Note that "floating elements" such

as images are separate from the paragraph. To start next line below any

images etc., use
. The CLEAR attribute can take

values "none", "right", "left", or "all" and is deprecated, but in fact still

very useful. The best way to understand it is to try a few tests.

Content is centred on page (can include paragraphs etc). Note

American spelling.

Used to define characteristics of font, according to attributes e.g. SIZE,

COLOR, FACE. SIZE sets size, 1-7 e.g. SIZE="5". COLOR sets color

of text e.g. makes text red. FACE e.g.

FACE="Times".

The head part of the HTML document. See introduction to HTML

...

Headings (levels 1-6, i.e. H3 is a subheading within a H2 subheading).

Draw horizontal line across page; used to indicate break between

sections. Attributes: WIDTH, e.g. WIDTH="50%" makes line half size

HTML Page 5

8/2/2019 web file[1]

6/19


of page; SIZE, e.g. SIZE="3" makes line 3 pixels thick

Italics.

Image. Attributes: must have SRC and ALT. SRC gives source file for

image, e.g. SRC="picture.jpg". ALT gives brief description e.g.ALT="Picture of UB"

List item. Used within an ordered () or unordered () list

Ordered list. Includes List Items, which will be numbered

automatically
Paragraph
Subscript

Superscript

The tag defines an HTML table.

Table data cell..

Table header cell..

Title of document. This mustappear in the part.

Table row..

Underline text. Use sparingly as it may be confused with hyperlinks

Unordered List. Includes List Items, which will be displayed in a

list with bullets.

:

The PRE element is used forpre-formatted text. What this means is that the text

between the opening and closing tags is displayed exactly as shown in the HTML file.

Normally, any line breaks etc. in the HTML file are ignored when the page is

displayed: instead the browser breaks where it finds a
, starts a new paragraph at

a

, etc. One main use for is when you have a large chunk of text in a plain

text file which you want to display without having to convert all the paragraphs and

tables to HTML formatting. The electronic text pages on this web-site use to

display entire chapters from the Project Gutenberg plain text texts.

Example:

HTML Page 6

8/2/2019 web file[1]

7/19


However, we can use the element:There was an old man of PeruWho dreamt he was eating his shoe

He woke up in the nightWith a terrible fright

And found it was perfectly true

HT

ML bgcolor codes

Navy Silver

#0000A8 #BBBAAA

#345ABC #AAAAAA

Blue Gray

#6666FF #545454

#0C6AA1 #BBB87E#6A6ABA #CCC102

#A44FF9 #AAA111

#CF61FC #067120

#E88EEE Green

#FF00FF Olive

#00A8A8 #AA9E7A

#8080C0 #DEB678

#6699ff #A87654

#55BBEA #826446

#A3D5E4 #A45555

#ADD2D3 #AC003A

#33E2E5 #CC2431

Aqua #EA744E

#B3E4FD #A85400

#E7E7EF Maroon

#E2EFED #600000

#EDFEDF Black

#F0F7D2 #FFFFB4

Purple #F0F7A0#B52E98 #E8FF5A

#E91998 Yellow

#ED44AB #EEE31A

#EE7EBB Lime

#EAA3BB #7EE34B

Red #FFCD9C

#F65F45 #FFD9C8

#555555 #DEB0AF

MarqueeTag

HTML Page 7

8/2/2019 web file[1]

8/19


Marquee tag is use to move the text on webpage.

Example Code:

This text will move

The text in between the tags will move horizontally.

Result:

This text will move

Attributes :

Bgcolor this sets the background color for marquee path

Example Code :< marquee bgcolor=orange> Moving Text

Result:

Height, width The attribute width sets the width of marquee area

The attribute height sets the height of marquee area

Example Code:

Moving Text

Result:

Attribute: direction

This sets the background color for marquee path.

It takes values LEFT or RIGHT or UP or DOWN

Example Code: Text will Move

HTML ListsHTML supports ordered, unordered and definition lists.

HTML Page 8

8/2/2019 web file[1]

9/19


Unordered Lists

An unordered list is a list of items. The list items are marked with bullets (typically small

black circles).

An unordered list starts with the tag. Each list item starts with the tag.

CoffeeMilk

Here is how it looks in a browser:

Coffee

Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

Ordered Lists

An ordered list is also a list of items. The list items are marked with numbers.

An ordered list starts with the tag. Each list item starts with the tag.

Coffee

Milk


1. Coffee

2. Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

Definition Lists

A definition list is not a list of single items. It is a list of items (terms), with a description of

each item (term).

A definition list starts with a tag (definition list).

Each term starts with a tag (definition term).

Each description starts with a tag (definition description).

CoffeeBlack hot drink

HTML Page 9

8/2/2019 web file[1]

10/19


MilkWhite cold drink


Coffee

Black hot drink

Milk

White cold drink

Inside the tag you can put paragraphs, line breaks, images, links, other lists, etc.

Tables

Tables are defined with the tag. A table is divided into rows (with the tag),

and each row is divided into data cells (with the tag). The letters td stands for

"table data," which is the content of a data cell. A data cell can contain text, images,

lists, paragraphs, forms, horizontal rules, tables, etc.

HTML Page 10

8/2/2019 web file[1]

11/19


Attribute:

Border (pixels)

Specifies the width in pixels of the border of the frame around a table.Example:

Code ViewCell1Cell2Cell3Cell4

Cell5Cell6

Cell

1

Cell

2Cell 3

Cell

4

Cell

5Cell 6

CellSpacing (length)

Defines the space to be left between cells and between the table border and the cell

border that's closer to it.Example:

Code View...Content......Content...

...Content... ...Content...

CellPadding (length)

Defines the space to be left between the border of a cell and it's content. It works as

cells' margins.Example:

Code View

...Content......Content...

...Content... ...Content...

HTML Page 11
http://www.htmlquick.com/reference/types.html#pixelshttp://www.htmlquick.com/reference/types.html#lengthhttp://www.htmlquick.com/reference/types.html#lengthhttp://www.htmlquick.com/reference/types.html#pixelshttp://www.htmlquick.com/reference/types.html#lengthhttp://www.htmlquick.com/reference/types.html#length

8/2/2019 web file[1]

12/19


I. Width (length)

Specifies the desired width of the entire table.

Align

This attribute have been deprecated

Sets the alignment of the table. Possible values are (case-insensitive):

left: The table is aligned to the left of the available space.

center: The table is aligned to the center of the available space.

right: The table is aligned to the right of the available space.

Summary (text)

Provides a summary of the table purpose and structure.

HTML Page 12
http://www.htmlquick.com/reference/types.html#lengthhttp://www.htmlquick.com/reference/deprecated.htmlhttp://www.htmlquick.com/reference/types.html#texthttp://www.htmlquick.com/reference/types.html#lengthhttp://www.htmlquick.com/reference/deprecated.htmlhttp://www.htmlquick.com/reference/types.html#text

8/2/2019 web file[1]

13/19


ADDING GRAPHICS

The Image Tag

In HTML, images are defined with the tag. The tag is empty, which

means that it contains attributes only and it has no closing tag.

To display an image on a page, you need to use the src attribute. Src stands for

"source". The value of the src attribute is the URL of the image you want to display on

your page.

The syntax of defining an image:

Attribute:

Alt:

The alt attribute is used to define an "alternate text" for an image. The value of the alt

attribute is an author-defined text:

The "alt" attribute tells the reader what he or she is missing on a page if the browser

can't load images. The browser will then display the alternate text instead of the image.

It is a good practice to include the "alt" attribute for each image on a page, to improve

the display and usefulness of your document for people who have text-only browsers.

Height and Width Tags:

Specifies the height and width of the image. If the real height and width are

specified, it loads faster than one without the dimensions, because the browser

doesn't have to calculate it after downloading. Example:

The height and width doesn't have to be it's real values. For example, if I

wanted a smaller signature-type footer that's the same as my header, I could use

the same image, only the height and width would be specified smaller (and thus

would be faster). Example:

HTML Page 13

8/2/2019 web file[1]

14/19


Align Images:o left or right - aligns to the side and wraps the text above, around, and

below it.o top - aligns with the tallest item available.

o texttop - aligns with the tallest text character available.

o middle - aligns the baseline of the current line with the middle of the

image.

o absmiddle - aligns the middle of the current line with the middle of the

image.

o baseline - aligns the bottom of the image with the baseline of the current

line.

o bottom - aligns the bottom of the image with the baseline of the current

line.

o absbottom - aligns the bottom of the image with the bottom of thecurrent line. Example:

Border around Graphic: Specifies the Border thickness in pixels, including 0. This is also useful for

images that are links, with no border. Example:

Vertical Space and Horizonal Space Around Graphic:

Specifies vertical and horizontal space around the image. This is useful foraligned images so the text will be a little padded and not wrap against the

image. Example:

How to add a Background to your page:

To add a background image to your page, do the following:

My Homepage

This is how your page should look from the top to where you add your

background tag.In the above example your background could also be a jpg file

and not a gif. (My backgrounds are jpg's.) So you would just add .jpg in the

place .gif.

HTML Links

A link is the "address" to a document (or a resource) on the web.

HTML Page 14

8/2/2019 web file[1]

15/19


Hyperlinks, Anchors, and Links:

In web terms, a hyperlink is a reference (an address) to a resource on the web.

Hyperlinks can point to any resource on the web: an HTML page, an image, a sound

file, a movie, etc.

An anchor is a term used to define a hyperlink destination inside a document.

The HTML anchor element is used to define both hyperlinks and anchors.

We will use the term HTML link when the element points to a resource, and the

term HTML anchor when the elements defines an address inside a document..

An HTML Link:

Link syntax:

Link text

The start tag contains attributes about the link.The element content (Link text) defines

the part to be displayed.

Note: The element content doesn't have to be text. You can link from an image or any

other HTML element.

Attribute:

THE HREF :

The href attribute defines the link "address".This element defines a link to

ctgroup:

Visit us

The code above will display like this in a browser:

The target Attribute:

HTML Page 15

8/2/2019 web file[1]

16/19


The target attribute defines where the linked document will be opened.The code

below will open the document in a new browser window:

HTML Page 16

8/2/2019 web file[1]

17/19


Example

Visit us

HTML Page 17

8/2/2019 web file[1]

18/19


PRACTICAL FILE

OF

HTML

Submitted To:-Submitted By:-Ms. Ambrinder KaurRanjit Singh(Dept of CA)BCA 2nd sem.

HTML Page 18

8/2/2019 web file[1]

19/19


1103395

HTML Page 19

Documents

web file[1]