html material (1)

7/29/2019 HTML Material (1)

1/27

HTML material prepared by Ramesh Mudragada. Contact: 9701797513

- 1 -

HTML is the abbreviation for Hyper Text Mark-up Language and is the language weuse to create web pages. The HTML marks up a web page to indicate its format,telling the web browser where we want a new line, how we want a text or image tobe aligned and so on. In other words, HTML is all about specifying the structure andformat of your web page.

HTML Tags and Elements:In HTML, all the terms will be enclosed in angular brackets and such terms arecalled as tags. Most of the HTML tags come in pairs as opening tag and closing tag.The opening tag is the actual term enclosed in angular brackets and the closing tagis the /term enclosed in angular brackets.

Collectively, a starting tag, an ending tag, and everything between them make upand HTML element.

Tag Attributes:Tags can have attributes. Attributes can provide additional information about theHTML elements on your page.This tag defines the body element of your HTML page: . With an addedbgcolor attribute, you can tell the browser that the background color of your pageshould be red, like this: .This tag defines an HTML table: . With an added border attribute, you can tellthe browser that the table should have no borders: Attributes always come in name/value pairs like this: name="value".Attributes are always added to the start tag of an HTML element

.:Every HTML page should lie between theses tags. This contains two parts, as:

1. Head part2. Body part

The head part can be used to configure the title bar, tool bar and other baseproperties of the browser.

Comments in HTML:The comment tag is used to insert a comment in the HTML source code. A commentwill be ignored by the browser. You can use comments to explain your code, whichcan help you when you edit the source code at a later date.

Note that you need an exclamation point after the opening bracket, but not beforethe closing bracket.

.:This is the first part of the HTML page. This contains the browser configurationsettings.


2/27


- 2 -

.:This comes inside the HEAD tags and can be used to configure the title on the titlebar.

.:

This is the second part of a HTML page. These tags contains the contents alongwith the style of presentation on the HTML page.

This BODY tag can take three attributes, namely: BGCOLOR, ONLOAD andONUNLOAD.The attribute BGCOLOR changes the background color of the browser.The attribute ONLOAD displays the given message on the activation of the page.The attribute ONUNLOAD displays the goodbye message on unloading the page.

.

.

Heading tags:HTML supports headings in six sizes as H1 to H6, H1 being the biggest and the H6the smallest. These tags displays the enclosed text in the corresponding headingformat. By default, the heading tags forces a paragraph break before and after theenclosed text and displays the text in bold.

Emphasizing the Text:To emphasize some portions of the text, we can use the following tags:

1. & or & to display the enclosed text in bold.2. & to display the enclosed text in bigger size.3. & to display the enclosed text in smaller size.4. & or & to display the enclosed text in italics.5. & or & to display the enclosed text with underline.6. & to display the text that was strike out.7. & to display the enclosed text as superscript.8. & to display the enclosed text as subscript.

These tags can be used in combination with one another.

This text is bold
This text is strong
This text is big
This text is emphasized


3/27


- 3 -

This text is italic
This text is small
This text containssubscript

This text containssuperscript

The Paragraph tags:The

and
tags are the paragraph tags and these tags forces a paragraphbreak before and after the enclosed paragraph. These tags takes two attributes,namely: id and align, the id being used to address it and the align takes threeparameters as left, right and center.
Forcing a line break:To force a line break we can use the
tag. This has no closing tag and thisforces a line break and continues the rest of the presentation on the next line.

Quote and Blockquote tags:The and tags allow for short snippets of quoted text to be inserted intoregular text content. Whereas the & can be used toinsert longer quotation in to the body text.

Generally the blockquote tag automatically forces a paragraph break and indents thetext from the left margin.

Here comes a long quotation:This is a long quotation. This is a long quotation. This is a long quotation. This is along quotation. This is a long quotation.

Here comes a short quotation:

This is a short quotation

With the block quote element, the browser inserts line breaks and margins, but the qelement does not render as anything special.


4/27


- 4 -

Preformatted text: and takes the preformatted text and the enclosed text preserves boththe spaces and linebreaks.

This ispreformatted text.It preserves both spacesand line breaks.

The pre tag is good for displaying computer code:
for i = 1 to 10
print inext i

Using the Font tag:The and tags enables us to change the font and style of the enclosedtext. It does the changes using three attributes, namely: face, size and color.

The FACE attribute changes the font to your choicest font.The SIZE attribute changes the size of the text from +5 to -5, 0 being the defaultsetting.The COLOR attribute changes the display color of the enclosed text.

The Anchor Tag and the Href Attribute:HTML uses the (anchor) tag to create a link to another document.An anchor can point to any resource on the Web: an HTML page, an image, a soundfile, a movie, etc.The syntax of creating an anchor:

Text to be displayed

The tag is used to create an anchor to link from, the href attribute is used toaddress the document to link to, and the words between the open and close of theanchor tag will be displayed as a hyperlink.

This anchor defines a link to Yahoo:


5/27


- 5 -

The following program connects an external page:

Page1

If you set the target attribute of a link to "_blank",the link will open in a new window.

The following program creats a link on the same page:

See also Chapter 4.
Chapter 1
This chapter explains ba bla bla
Chapter 2
Chapter 3
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10
Chapter 11

Chapter 12

Chapter 13
Chapter 14
Creating Lists:


6/27


- 6 -

Lists are of three types: Unordered lists, Ordered lists and Definition lists.

Unordered lists:An unordered list is a list of items. The list items are marked with bullets (typicallysmall black circles).An unordered list starts with the tag. Each list item startswith the tag.

CoffeeMilk

Here is how it looks in a browser:

Coffee

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

CoffeeMilk

Here is how it looks in a browser:1. Coffee2. 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 items. This is a list of terms and explanation of theterms. A definition list starts with the tag. Each definition-list term starts with the tag. Each definition-list definition starts with the tag.

Inside a definition-list definition (the tag) you can put paragraphs, line breaks,images, links, other lists, etc.

An Unordered List:CoffeeTeaMilk

An Ordered List:Coffee


7/27


- 7 -

TeaMilk

Numbered list:

ApplesBananasLemonsOranges

Letters list:ApplesBananasLemonsOranges

Lowercase letters list:ApplesBananasLemonsOranges

Roman numbers list:ApplesBananasLemonsOranges

Lowercase Roman numbers list:ApplesBananasLemons

Oranges

Disc bullets list:ApplesBananasLemonsOranges


8/27


- 8 -

Circle bullets list:ApplesBananas

LemonsOranges

Square bullets list:ApplesBananasLemonsOranges

A Definition List:CoffeeBlack hot drinkMilkWhite cold drink

A nested List:CoffeeTea

Black teaGreen tea

Milk


9/27


- 9 -

The Image Tag and the Src Attribute:In HTML, images are defined with the tag. The tag is empty, whichmeans 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 displayon your page. The syntax of defining an image:

The URL points to the location where the image is stored. An image named "boat.gif"located in the directory "images" on "www.flexisoft.net" has the URL: http://www.flexisoft.net /images/boat.gif.The browser puts the image where the image tag occurs in the document. If you putan image tag between two paragraphs, the browser shows the first paragraph, thenthe image, and then the second paragraph.

The Alt AttributeThe 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 browsercan't load images. The browser will then display the alternate text instead of theimage. It is a good practice to include the "alt" attribute for each image on a page, toimprove the display and usefulness of your document for people who have text-onlybrowsers.

An image:

An animated image:

Note that the syntax of inserting an animated image is no different from that of a non-moving image.

Plading an image from external source:


10/27


- 10 -

An image from another folder:

An image from website:

Using image as background:

Look: A background image!

Both gif and jpg files can be used as HTML backgrounds.

If the image is smaller than the page, the image will repeat itself.

Aligining the images:

An imagein the text

An image in the text

An image in the text

Note that bottom alignment is the default alignment

An image

in the text

An image before the text

An image after the text


11/27


- 11 -

Placing a text around the image:

A paragraph with an image. The align attribute of the image is set to "left". The imagewill float to the left of this text.

A paragraph with an image. The align attribute of the image is set to "right". Theimage will float to the right of this text.

Using an image as hyperlink:

You can also use an image as a link:

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 standsfor "table data," which is the content of a data cell. A data cell can contain text,images, lists, paragraphs, forms, horizontal rules, tables, etc.

row 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2

Tables and the Border AttributeIf you do not specify a border attribute the table will be displayed without anyborders. Sometimes this can be useful, but most of the time, you want the borders toshow.To display a table with borders, you will have to use the border attributeRow 1, cell 1


12/27


- 12 -

Row 1, cell 2

Headings in a TableHeadings in a table are defined with the tag.

HeadingAnother Headingrow 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2

Example:

Each table starts with a table tag.Each table row starts with a tr tag.Each table data starts with a td tag.
One column:100
One row and three columns:100200300

Two rows and three columns:100200300


13/27


- 13 -

400500600

Table with Borders:

With a normal border:FirstRow

SecondRow

With a thick border:FirstRow

SecondRow

With a very thick border:FirstRow

SecondRow

Table with no borders:


14/27


- 14 -

This table has no borders:

100200300

400500600

And this table has no borders:

100200300

400500600

Tables with headings:Table headers:NameTelephoneTelephone

Bill Gates555 77 854555 77 855

Vertical headers:


15/27


- 15 -

First Name:Bill Gates

Telephone:

555 77 854Telephone:555 77 855

Tables with Caption:

This table has a caption,and a thick border:My Caption100200300

400500600

Table with row and column spanning:

Cell that spans two columns:NameTelephone

Bill Gates


16/27


- 16 -

555 77 854555 77 855

Cell that spans two rows:

First Name:Bill Gates

Telephone:555 77 854

555 77 855

Cell padding:Without cellpadding:FirstRow

SecondRow

With cellpadding:First

RowSecondRow


17/27


- 17 -

Cell spacing:Without cellspacing:

FirstRow

SecondRow

With cellspacing:FirstRow

SecondRow

Adding an image to table:A background color:FirstRow

SecondRow

A background image:


18/27


- 18 -

FirstRow

Second

Row

Adding an image to a cell:Cell backgrounds:

FirstRow

SecondRow


19/27


- 19 -

FramesWith frames, you can display more than one HTML document in the same browserwindow. Each HTML document is called a frame, and each frame is independent ofthe others.The disadvantages of using frames are:

The web developer must keep track of more HTML documents

It is difficult to print the entire page

The Frameset TagThe tag defines how to divide the window into frames. Each framesetdefines a set of rows or columns. The values of the rows/columns indicate theamount of screen area each row/column will occupy.The Frame TagThe tag defines what HTML document to put into each frame.In the example below we have a frameset with two columns. The first column is setto 25% of the width of the browser window. The second column is set to 75% of thewidth of the browser window. The HTML document "frame_a.htm" is put into the firstcolumn, and the HTML document "frame_b.htm" is put into the second column:

If a frame has visible borders, the user can resize it by dragging the border. Toprevent a user from doing this, you can add noresize="noresize" to the tag.Add the tag for browsers that do not support frames.

Vertical framesetThis example demonstrates how to make a vertical frameset with three differentdocuments.

Horizontal framesetThis example demonstrates how to make a horizontal frameset with three differentdocuments.


20/27


- 20 -

How to use the tagThis example demonstrates how to use the tag.

Your browser does nothandle frames!

Mixed framesetThis example demonstrates how to make a frameset with three documents, and howto mix them in rows and columns.

Frameset with noresize="noresize"This example demonstrates the noresize attribute. The frames are not resizable.Move the mouse over the borders between the frames and notice that you can notmove the borders.

Navigation frameThis example demonstrates how to make a navigation frame. The navigation framecontains a list of links with the second frame as the target. The file called"tryhtml_contents.htm" contains three links. The source code of the links:Frame a
Frame b


21/27


- 21 -

Frame cThe second frame will show the linked document.

Inline frameThis example demonstrates how to create an inline frame (a frame inside an HTMLpage).

Some older browsers don't support iframes.

If they don't, the iframe will not be visible.

Jump to a specified section within a frameThis example demonstrates two frames. One of the frames has a source to aspecified section in a file. The specified section is made with in the"link.htm" file.

Jump to a specified section with frame navigationThis example demonstrates two frames. The navigation frame (content.htm) to theleft contains a list of links with the second frame (link.htm) as a target. The secondframe shows the linked document. One of the links in the navigation frame is linkedto a specified section in the target file. The HTML code in the file "content.htm" lookslike this: Link without Anchor
Link with Anchor.


22/27


- 22 -

FormsA form is an area that can contain form elements.Form elements are elements that allow the user to enter information (like text fields,textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.A form is defined with the tag.

InputThe most used form tag is the tag. The type of input is specified with thetype attribute. The most commonly used input types are explained below.Text FieldsText fields are used when you want the user to type letters, numbers, etc. in a form.First name:

Last name:Radio ButtonsRadio Buttons are used when you want the user to select one of a limited number ofchoices. Male
FemaleCheckboxesCheckboxes are used when you want the user to select one or more options of alimited number of choices.I have a bike
I have a carThe Form's Action Attribute and the Submit ButtonWhen the user clicks on the "Submit" button, the content of the form is sent to

another file. The form's action attribute defines the name of the file to send thecontent to. The file defined in the action attribute usually does something with thereceived input.Username:


23/27


- 23 -

Text fields: This example demonstrates how to create text fields on an HTML page.A user can write text in a text field.

First name:
Last name:

Password fields: This example demonstrates how to create a password field on anHTML page.

Username:
Password:

Note that when you type characters in a password field, the browser displaysasterisks or bullets instead of the characters.

Checkboxes: This example demonstrates how to create check-boxes on an HTMLpage. A user can select or unselect a checkbox.

I have a bike:
I have a car:


24/27


- 24 -

Radio buttons: This example demonstrates how to create radio-buttons on anHTML page.

Male:
Female:

When a user clicks on a radio-button, the button becomes checked, and all otherbuttons with the same name become unchecked

Simple drop down box: This example demonstrates how to create a simple drop-down box on an HTML page. A drop-down box is a selectable list.

VolvoSaabFiatAudi

Another drop down box: This example demonstrates how to create a simple drop-

down box with a pre-selected value.

VolvoSaabFiat


25/27


- 25 -

Audi

Text area: This example demonstrates how to create a text-area (a multi-line textinput control). A user can write text in the text-area. In a text-area you can write anunlimited number of characters.

This example cannot be editedbecause our editor uses a textareafor input,and your browser does not allowa textarea inside a textarea.

The cat was playing in the garden.

Create a button: This example demonstrates how to create a button. On the buttonyou can define your own text.

Fieldset around data: This example demonstrates how to draw a border with acaption around your data.

Health information:Height


26/27


- 26 -

Weight

If there is no border around the input form, your browser is too old.

Form with input fields and a submit button: This example demonstrates how toadd a form to a page. The form contains two input fields and a submit button.

Type your first name:
Type your last name:

If you click the "Submit" button, you will send your input to a new page calledhtml_form_action.asp.

Form with checkboxes: This form contains two checkboxes, and a submit button.

I have a bike:

I have a car:


27/27


If you click the "Submit" button, you send your input to a new page calledhtml_form_action.asp.

Form with radiobuttons: This form contains two radio buttons, and a submit button.Male:
Female:

If you click the "Submit" button, you will send your input to a new page calledhtml_form_action.asp.

Send e-mail from a form: This example demonstrates how to send e-mail from aform.This form sends an e-mail to yahoo.com.Name:

Mail:

Comment:

html material (1)

Documents