Unit I-HTML Notes

8/8/2019 Unit I-HTML Notes

1/58

63

UNIT I HTML NOTES

HTML is the heart of the internet and is know as Hyper TextMarkup Language. Information used by Text Processing and WordProcessing systems to describe how the text of the document is to be

displayed is known as Markup. HTML is defined using the StandardGeneralized Markup Language (referred to as SGML). It is a way ofincorporating text, graphics, sounds and videos all in one documentknown as a Web Page. HTML is used to create web pages which abrowser can understand.

HTML is simple but powerful language. The Simplicity of HTMLallows anyone to create web pages. Pages created can be linkedtogether using links, usually referred to as Hyperlinks. The user has tojust click on it to get access to related information. In general HTML isbased on two concepts:

Hypertext:This provides a way to create a link between information of the samepage as well as among different pages.

Markup Language:Markup refers to the special tags that a part of the HTML

document, which specify how the document content should bedisplayed (as we have seen before).

What is an HTML File?

HTML stands for Hyper Text Markup Language

An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page

An HTML file must have an htm or html file extension

An HTML file can be created using a simple text editor

HTML Tags

HTML tags are used to mark-up HTML elements

HTML tags are surrounded by the two characters < and >

The surrounding characters are called angle brackets

HTML tags normally come in pairs like and

The first tag in a pair is the start tag, the second tag is the endtag

The text between the start and end tags is the element content

HTML tags are not case sensitive, means the same as

T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02


2/58

63

UNIT I HTML NOTES

Tags are instructions that are embedded directly into the text ofa HTML document. Each HTML tag describes that the browser shoulddo something instead of simply displaying the text. In HTML, the tagsbegin with ()HTML tags can be of two types. They are

1. Paired Tags2. Unpaired Tags

Paired Tags: A tag is said to be a paired tag if the text is placedbetween a tag and its companion tag. In paired tags, the first tag isreferred to as Opening Tag and the second tag is referred to as ClosingTag.Example:This text is in italics.

Note: Here is called opening tag. and is called closing tag.

Unpaired Tags: An unpaired tag does not have a companion tag.Unpaired tags are also known as Singularor Stand-Alone Tags.Example :
, etc. These tags does not require anycompanion tag.

The basic tags include , , , and .We introduce each of the four in the following:

This tag is used to indicate that this is a HTML document. Most HTMLdocuments should start and end with this tag.

This tag is used to indicate the header section of the HTML document,which typically includes the and tags, and is notdisplayed in the main window of the browser.

This indicates the title of this HTML page. The title is what is

displayed on the upper left corner of your browser when you view aweb page. For example, right now you can see "Basic Tags: html, head,title, meta, body" there. That is the title of this page.

The title tag is important when it comes to search engine

ranking. Many of the search engines pay special attention to the text inthe tag. This is because (logically) that words in the tagindicate what the page content is.



3/58

63

UNIT I HTML NOTES

The tag information is not directly displayed when the page isrendered on the browser. Rather, this is used for the author of theHTML page to record information related to this page. Two commonattributes are name and content. The tag used to hold greatimportance in search engine optimization, with authors carefully

drafting what's inside the tag to gain better search engine ranking, butrecently its importance has been decreasing steadily.

The tag includes the HTML body of the document. Everythinginside the tag (other than those within the tag) isdisplayed on the browser inside the main browser window.

The tag may contain several attributes. The mostcommonly used ones are listed below:

bgcolor: This is the background color of the entire HTML document,and may be specified either by the color name directly or by the six-digit hex code.alink: The color of the links.vlink: The color of the visited links.topmargin: The margin from the top of the browser window.leftmargin: The margin from the left of the browser window.

So, in general, all HTML documents have the following format:

Simple Example

Here is the title of the HTML document. ... (there may be one or more metatags) Here is the body of the HTML document. Headings in HTML:

HTML provides six levels of headings. Usage of these headings

helps us in ensuring a uniform look and feel for the document. Variouslevels of headings are H1, H2 .... H6.

... :



4/58

63

UNIT I HTML NOTES

This is the first level of heading offered by HTML. This heading ismost important when compared to other levels and this heading is thehighest - level of headings. This tag inserts a line break before andafter the text enclosed with in these two tags. Text enclosed between and will be displayed as below. Level 1 Heading

... : This is the second level of heading provided by HTML. Text

enclosed between and will be displayed as below. Level2 Heading ... :

This is the third level of heading provided by HTML. Text enclosedbetween and will be displayed as below. Level 3 Heading ... :

This is the forth level of heading provided by HTML. Textenclosed between and will be displayed as below. Level

4 Heading ... :

This is the fifth level of heading provided by HTML. Text enclosedbetween and will be displayed as below. Level 5 Heading

... : This is the sixth level of heading provided by HTML. Text

enclosed between and will be displayed as below. Level6 Heading

Note: H1 tag is mainly used for main headings and mostly it is used

once in a page. H2 to H6 can be used as many times as required.

Font Tag: By using font tag we can control the display of fonts in aweb page. Font tag is very commonly used tag in web page design. Wewill discuss some basic font tags and its uses in developing sites.

Using the font tag we can manage the size, color and face of thefont. Here we can specify which font to be used for displaying the text.The face of the font can be Times New Roman or it can be Verdanafont. What ever we specify the face of the font tag, that font must beavailable with the client computer. Otherwise default font will be

displayed. So it is advisable to use common fonts and if you have anyspecial requirement then create one image with the text and style offont you use and then display it as an image.

Font Size: Font tag will have one starting and ending tag. The textbetween the staring and ending of the tags will follow the attributes set



5/58

63

UNIT I HTML NOTES

inside the tag. We can define the size of the font by using sizeattribute. Size can be from 1 to 7. Here is the basic font tag with size.

Example:font size is 1

Font Color: We can manage the color of the text in html by using fonttag. Inside the font tag we have to specify color in HEX value. colorchart available here to give you the hex value of any color. Use thathex value to create different color font for your body tag. As font taghas one closing tag also so we can use font tag to mark part of a fulltext in different colors using font tag with different hex values of color.

Note that we can specify some colors directly inside the font tag.We will see some examples also. Here is a list of text with differentcolor tags

text of hex=#003080

text of hex=#003080

text of hex=#f00080

text of hex=#f00080

text of hex=#f0f040

text of hex=#f0f040

text of hex =red text of hex =red text of hex =green text of hex =green

Here is a line of text with different color within the same line.

The code of above line is here Here is a

line of text with different color within thesame line.

Font face can be set to display any style of the font for the text.We can set different font face to different part of a same text. Notethat the type of font we set in font face has to be available in clientcomputer. Here is one example of font face with size and colorattributes .

This is

simple

Now here it is how it will appear.

This is simpleHere are some examples with different font face used inside font tag

http://www.plus2net.com/html_tutorial/html_color_chart.phphttp://www.plus2net.com/html_tutorial/html_color_chart.phphttp://www.plus2net.com/html_tutorial/html_color_chart.phphttp://www.plus2net.com/html_tutorial/html_color_chart.php


6/58

63

UNIT I HTML NOTES

times newroman

times newroman

vardana text vardana text

Color Values: HTML colors can be defined as a hexadecimal notationfor the combination of Red, Green, and Blue color values (RGB). Thelowest value that can be given to one light source is 0 (hex #00) andthe highest value is 255 (hex #FF). The table below shows the result ofcombining Red, Green, and Blue light sources:.

Color Color HEX Color RGB

#000000 rgb(0,0,0)

#FF0000 rgb(255,0,0)

#00FF00 rgb(0,255,0)

#0000FF rgb(0,0,255)

#FFFF00 rgb(255,255,0)

#00FFFF rgb(0,255,255)

#FF00FF rgb(255,0,255)

#C0C0C0 rgb(192,192,192)

#FFFFFF rgb(255,255,255)

Horizontal rule line: WE can draw lines across the screen or ofsome particular length by using tag. This tag can takesome attributes and accordingly display the line inside our html pages.Let us try this simple hr tag. The output is below it.

Now let us add width to it like this

output:As you can see now we have limited the width of the line. Now

let us add color to this line.output:

for sizeoutput:

To make it solid we have to add noshade attribute.

HTML Character Entities: Some characters like the < character,have a special meaning in HTML, and therefore cannot be used in the



7/58

63

UNIT I HTML NOTES

text. To display a less than sign (


8/58

63

UNIT I HTML NOTES

multiplication

division

Hyperlinking in HTML: The essence an HTML document lies in thefirst two words: HyperText. In other words it is ability to link to other

documents that makes HTML unique. It allows us to link one web pagewith another. The text that provides such linking is known as"Hypertext" and the link is known as "Hyperlink".

... is used for linking web pages.

Attributes of ...

href: This attribute specifies the next navigatable page.

link: Used to change the default color of the hyperlink.

alink: Used to change the default color of a hyperlink that isactivated.

vlink: Used to change the color of a visited link.

Note: Default color of a hyperlink is blue. The user can specify thecolor by giving the name of the color or its hexadecimal value.

Example:

Hyperlink Example

Types of Linking:In HTML, Hyperlinking can be done in either of the following ways.1. Linking to external web page.2. Linking within the same web page.

Linking to external web page:Linking to external web page refers to linking one web page to

another through some hypertext. Simply, a page referring to anexternal page. This in turn can be done in two ways.

Note: Clicking on the following link will take you to the main page ofhyperlinking.

Example External Hyperlinking



9/58

63

UNIT I HTML NOTES

1. Linking to a web page which usually takes to the beginning of aweb page.

Code: External Hyperlinking

2. Some times it may be necessary to jump to a particular locationin the target page. This can be done in the following way.

a. Identify the location in the target page where to jump and usingthe name attribute of tag, give it a name.

For example,

b. In the first page, from where we are providing a link, along withthe target page write the name of the target location concatenated

with a '#' as follows.

...Linking within the same web page:

Some times it may be required to jump to a particular locationin the same web page. This can be done as below.

1. Identify the name of the location by giving name to the

For example, 2. In the position fromwhere to jump, just mention the target location as below.

...

Note: # symbol indicates that a jump is required with in the samedocument.

HTML image: HTML provides tag to place image in a webpage. img stands for image. This tag does not have any closing tag.

Attributes of tag are :

Src: Src stands for Source. Specifies the name of the image file to be

used.

Height: Used to specify the height of the image.

Width: Used to specify the width of the image.



10/58

63

UNIT I HTML NOTES

alt: This is used to display some text when the visitors mouse overthe image.i.e., it acts as a tool tip for the image.

HSpace: Used to specify the amount of space to the left and right ofthe image.

VSpace: Used to specify the amount of space to the top and bottom ofthe image.

Example Code:

Note: If the path of the image file is not mentioned it will search for

the image in the current directory.

HTML Tables: HTML provides an important feature that enables us toarrange the layout of a web page. This can be done using ...

... These tags are used to create a tablewhich inturn includes some important tags which make up the table.i.e., ... , ... , ... , ... These tags will be ignored by the browser if they are not

contained with in ... tags.

Attributes of table tag:border: Used to specify the width of the border to be drawn aroundthe table.By default its value is zero i.e, no border is drawn.

align: Used to specify the alignment of the table in the web page. Possible values for this

attribute are Left, Right and Center.

cell padding: Used to specify the space between the cell's border and

content.

cell spacing: Used to specify the space between cells with in thetable.



11/58

63

UNIT I HTML NOTES

width: Used to specify the width of the table.

Example:

Cell 1 Cell 2

Table Row:To add a row in a table, ... tags are used. TRstands for table row. In a table, for each row there will be a set of tablerow tags.

Example:

Row Data Row Data

Table Data: Table data tags ... define each cell in thetable. These tags must be nested within the table row tags. Each rowcan have different number of cells.

Attributes of Table Data:

Align: Used to specify the horizontal alignment of the text with in thecell.

Colspan: This is used when the width of the cell has to be mentionedin number of colums and usually used when a cell occupies more thanone column.

Rowspan: This is used when the height of the cell has to bementioned in number of rows and usually used when a cell occupiesmore than one row.

Example:

Cell 1 Cell 2



12/58

63

UNIT I HTML NOTES

Cell 3 Cell 4

Above code defines a table with two rows and four cells as below.

Cell 1 Cell 2

Cell 3 Cell 4

Table Heading: Table heading tags ... are used todesignate a cell as a header. These tags should be used with in .... By default, the content of the header row is center aligned andappears in bold face.

Example:

Cell 1 Cell 2 Cell 3

Cell 4

Above code defines a table with two rows and four cells as below.

Cell 1 Cell 2

Cell 3 Cell 4

Introduction to Frames: The HTML frame is a powerful feature thatenables a web page to be broken into different unique sections thatare related but can be operated independently without depending oneach other.

The tag:

The splitting of a browser screen into frames can be done byusing and tags.



13/58

63

UNIT I HTML NOTES

Attributes of tag: tags require one of the following attributes

depending on whether to divide the screen in rows or columns.

Rows: This attribute is used to divide the screen horizontally i.e, into

multiple rows. Multiple values can be set to this property depending onthe required size of each row. Possible values for this attributeare Number of pixels or can be expressed as a percentage of thescreen resolution.

Note: The symbol * indicates the remaining space.

Cols: This attribute is used to divide the screen vertically i.e, intomultiple columns. Multiple values can be set to this propertydepending on the required size of each column. Possible values for thisattribute are Number of pixels or can be expressed as a percentage of

the screen resolution

Note: The symbol * indicates the remaining space.

Example:

... Rest of the definition here ...

Note: There are several advantages(pros) and disadvantages(cons) of

using frames. Now you will be eager to see the advantages anddisadvantages of frames.

Advantages(Pros) of using Frames :1. One of the most beneficial feature of frames is it lets the userto have multiple pages in the same browser.2. Using frames we can keep one part of the page static whilechanging the other parts of the page.3. If we create a top frame we can use it as a header i.e, as thatpage is static it acts like an include page.4. Frames can be used to reduce server load, as there is noneed to reload all the pages when ever a new page is visited.

Disadvantages(Cons) of using Frames :1. One of the main disadvantage of frames is search engines will notdeal with them properly. i.e, search engines (including most popularones) will not index pages containing frames as its hard for them to



14/58

63

UNIT I HTML NOTES

search for a specific content and move backwards to check to whichframeset each page belongs to and retrieve all the pages in theframeset.2. Its hard to navigate through pages in frames when we have morethan two or three frames.

3. Its difficult to print the content of all frames when compared to anormal web page.4.Some browsers doesn't support frames, so we need to place thecontent seperately for the people who doesn't have frames using ... 5. We cannot bookmark individual pages using browser's FavouritesMenu.The tag :

The tag is used to load different documents into eachunique section that is been defined after the browser screen has beendivided into rows and columns using tag.

Note: Frame tag does not have any closing tag.

Attributes of tag :src: Specifies the url of the document to be loaded into the frame.

MarginWidth: Specifies the amount of space to be left along thesides of the frame.

MarginHeight: Specifies the amount of space to be left at the topand bottom of the frame.

Name: Used to give a unique name for the frame. The name mustbegin with an alphanumeric character.

NoResize: Disables the resizing capability of the frame.

Scrolling: This is used to decide whether to have scrollbars(Horizontal , Vertical) in a frame. This possibly take 3 values Yes , No orAuto.

Example:

Frame borders:



15/58

63

UNIT I HTML NOTES

We can make the frame borders invisible by using frameborderattribute of tag.

Example:

Note: Frameborder attribute can also be specified with in the tag to avoid mentioning for every frame within aframeset.

Example:

-- This makes border of all frames with in the framesetinvisible.

Frame Resize: By default frame windows are resizable. If you don'twant the frame to be resizable, you can use noresize attribute of theframe.Example:

Scrollbars in Frames: By default frame windows will have a valueauto for scrolling attribute. i.e, If we leave the setting for scrolling, ascrollbar will appear only if needed.

Example:

-- For this frame scrollbars will appear.

-- For this frame scrollbars will not appear.

NoFrames: As we know that some browser doesn't support frames. Ifyou use frames in your html and what if the browser doesn't support



16/58

63

UNIT I HTML NOTES

frames?? For that HTML has a special tag ....

... : holds the text thatshould be displayed in the browsers that doesn't support frames.

Note: .. tags should be present within ... tags.

Example:This browser does not support frames

Inline frame: Inline Frame or an iframe is allows us to open newpages inside main pages. Inline frames are also referred to as Floatingframes. .. tag is used to create inline or floatingframe.

Note: Netscape navigator, version 4 or older does not support iframes.If the browser doesn't support iframe then it won't be visible.

Attributes of tag :

name: used to set a name for the iframe.

src: Specifies the url of the document to be loaded into the iframe.

Width: used to specify the width of the iframe.

Height: used to specify the height of the iframe.

Frameborder: used to specify the whether to have a border for the iframe ornot. Thisattribute possibly takes two values. i.e, 1 for on and 0 for off.

Scrolling: used to specify whether the iframe should have scrollingcapability or not. This attribute possibly takes two values i.e, 1 for onand 0 for off.



17/58

63

UNIT I HTML NOTES

vspace: used to leave gaps on the top and bottom of the iframe. Thisattribute is similar to cellspacing attribute of a table tag.

hspace: used to leave gaps on the sides of the iframe. This attribute

is similar to cellpadding attribute of a table tag.

marginwidth: used to specify the number of pixels to be left as theleft/right margins.

marginheight: used to specify the number of pixels to be left as thetop/bottom margins.

Example:

LISTS in HTML:

1. Ordered List: Ordered lists are also referred to as Numbered Lists.Ordered lists can be defined using ... tags. The tag indicates the start of a ordered(numbered) list while signals theend of the list.

Attributes of .. :

Type: This attribute indicates the type of the numbering to be used.This attribute possibly takes the values such as "1"(will give values

from 1,2,3 ... ), "A" (will give numbering as A,B,C ....) , "a" (will givenumbering as a,b,c ...), "I" (will give numbering as roman numbers I, II,III ...) or "i" (will give numbering as i, ii, iii ...)

Start: This attribute indicates the value at which numbering shouldstart.

... :These tags are used within ... Each numbered item

is enclosed with in the tags ...

Example:

Ordered list item 1 Ordered list item 2 Ordered list item 3



18/58

63

UNIT I HTML NOTES

output: This ordered list will be displayed as9. Ordered list item 110. Ordered list item 2

11. Ordered list item 32. Unordered List: UnOrdered lists are also referred to as BulletedLists. UnOrdered lists can be defined using ... tags. Thetag indicates the start of a bulleted list while indicatesthe end of the bulleted list.

Attributes of .. :

Type: This attribute indicates the type of bullet to be used. Thispossibly takes the values such as "square", "circle" or "fillround".

... :These tags are used within ... . Each bulleted item is

enclosed with in the tags ... .

Example:

UnOrdered list item 1 UnOrdered list item 2 UnOrdered list item 3

This unordered list will be displayed as

Ordered list item 1 Ordered list item 2

Ordered list item 3

3. Data List: Unlike Ordered and UnOrdered lists, data lists marks itselements by indentation. Data lists can be defined using ... tags. The tag indicates the start of a data list while indicates the end of the data list.

Attributes of .. :

: DT stands for Definition Term. This tags will be enclosed in ... tags alternatively.

: DD stands for Definition Description. This tags will be enclosedin



19/58

63

UNIT I HTML NOTES

... tags alternatively.

Example:

Definition Term 1

Definition Description 1 Definition Description 2

Definition Term 2 Definition Description 1 Definition Description 2

This datalist will be displayed as

Definition Term 1

Definition Description 1 Definition Description 2Definition Term 2

Definition Description 1

Definition Description 2

Forms: Forms are very common in web pages through out Internet.Web forms are mostly used to capture user entered data and postthem back to the server. You can see signup forms, login forms, profileupdate forms and many more type of forms. Designing a form is basedon the data format requirement. For example you want the users to tell

about their sex. Here the user will enter one out of the two choicesavailable, so one period button is to be provided for the user to select.Same way one input text box is to be provided for entering name ofthe joining member. Based on different data format requirements wecan keep different form components. Here we will discuss differenttypes of components used to collect data and their possible use.Before that let us try to understand the basic form structure or syntax.

Form Elements: HTML elements that are used to capture form dataare specified as attributes of .. tags which are usedin tags.Form elements include :

TextfieldHiddenFieldPasswordTextArea



20/58

63

UNIT I HTML NOTES

RadiobuttonCheckboxButtonImage ButtonSubmit Button

Reset ButtonDrop-Down Menu

Each element of the form can be named using 'Name' property,which inturn is used to reference that particular element in JavaScriptor in server-side script. There are several other properties andmethods associated with each of these form elements.

Text Field: Text fields are data entry fields which takes small amountof data from the user. This is one of the most widely used control. Atext field can be placed by using the following format.

Attributes of Text Field:Name: This attribute specifies the name of the object through which itcan be referenced.

Value: This is used to specify the value of the text field.

Size: This attribute is used to specify the width of the textfield

Maxlength: Used to specify the maximum number of characters thatcan be entered into the textbox.

Align: Used to specify the alignment of the field. This attributepossibly takes thefollowing values : Top, Middle, Bottom, Right, Left, AbsMiddle,AbsBottom.

Example:

This places a text field(single line text area) within the HTML form,which can be referenced by using its name "txtbox" and whose value is"Simple Text". The textbox looks like :



21/58

63

UNIT I HTML NOTES

Hidden Field: Hidden fields are similar to text fields except onedifference i.e, hidden fields are not actually shown to the user (i.e, theywill be hidden from the user). User cann' type anything into the hiddenfield. This is mainly used to submit some information which cannot be

edited by the user. Hidden field can be created as

Attributes of Hidden Field:Name: This attribute specifies the name of the object through which itcan be referenced.

Value: Specifies the value of the hidden field.

Example:

This places a hidden field within the HTML form, which can bereferenced by using its name "hidfield" and whose value is "Cart ID ".Hidden field name and value are submitted to the server just as anyother text field except that the field will not be visible to the user.

Note: If the user sees the viewsource, then he/she can find the hiddenfield.

Password Field: Password fields are unique type of data entry fields. This is similar to text field except that all information within thepassword field will be displayed as an asterik(*). This makes thepassword field ideal for accepting sensitive information like password,bank account number etc. Password field can be created as :

Attributes of Password Field:Name: Specifies the name of the object through which it can be

referenced.

Value: Specifies the value of the Password field.



22/58

63

UNIT I HTML NOTES

Example:

This places a password field within the HTML form, which can bereferenced by using its name "pwd" and whose value is "pwd". But thepassword value is shown using asteriks. This field will be displayed onthe screen like :

TextArea: Text Area is nothing but multiline textbox. TextArea ismainly used when the user has to enter large amount of text. TextAreafield can be created as:

Attributes of TextArea Field:Name: Specifies the name of the object through which it can bereferenced.

Rows: Specifies the height of the textarea in characters.Cols: Specifies the width of the textarea in characters.

Wrap: Specifies how the text is wrapped when it reaches the right-hand edge of the Textarea box. This attribute possibly takes thefollowing values

Off: If the wrap attribute is set to 'Off' then the text will not wrap andis submitted as it is entered by the user.

Readonly: This attribute will not let the user change the contents ofthe field.

Example:This is the default text



23/58

63

UNIT I HTML NOTES

This places a textarea field within the HTML form, which can bereferenced by using its name "txtArea" and whose value is "This is thedefault text" and with a height of 5 rows and width of 35 columns. Thetextarea looks like...

This is the default text

Radio Button: Radio buttons are mainly used when the user has toselect only one among a group of options. Radio button has two statesand can toggle between them.

Note: Several radio buttons can be grouped together so that only one

radio button can be selected at any given time. We can group radiobuttons by giving same name to all the radiobuttons.

A single radio button can be created as :

Attributes of Radio Button Field:Name: Specifies the group name of the object.

Value: Specifies the value of the radio button.

Checked: If given, the radiobutton will be selected else, it will not beselected.

Align: Specifies the alignment of the radio buttons.

Example:Gender:

The above code places two radio buttons with a group name of"grpgender", one with a value "Male" and other one with value"Female". As the checked property is given for the first radio button itwill be selected by default. This will give the output like :



24/58

63

UNIT I HTML NOTES

Gender: Male Female

Check Box: Checkboxes are objects of a HTML form which behaveslike a toggle switch. i.e, a checkbox can be in one of the two states,

either checked or unchecked. Checkboxes are used to return a singlespecific value to a webserver i.e, either true or false or 1 or 0.

Checkbox can be created as :

Attributes of Checkbox Field:Name: Specifies the name of the object through which it can bereferenced.

Value: Specifies the value of the checkbox. This value will be returnedif thecheckbox is checked.

Checked: If given, the checkbox will be checked by default else, it willnot bechecked.

Example:Favourite colors:

This will give the output like :

Favourite Color(s): Blue Red

Button Field: When we create a button, it acts like a generic button.That is, It will not perform any action when we click on it unless someaction has been explicitly written by the user. A generic button can becreated as :

Attributes of Button Field:



25/58

63

UNIT I HTML NOTES

Name: Specifies the name of the object through which it can bereferenced.

Value: Specifies the value of the button field. This will be the text thatis going to be displayed on the button.

Example:

This places a button within the HTML form, which can bereferenced by using its name "btn" and whose value is "Click".

Image Button: Image buttons have the same effect as a submitbutton, only difference is instead of a normal submit button we canplace an image of our choice. An Image button can be created as :

Attributes of Image Button:Name: Specifies the name of the object through which it can bereferenced.

Src: Specifies the image source. i.e, the path of the image that has tobe displayed.

Border: Specifies the border of the image source. If 0 is given, then noborder willbe displayed.

Alt: Specifies the text that has to be appeared as a tooltip.

Example:

This places an image button within the HTML form, which can be

referenced by using its name "imgbtn" with a tooltip text "Tool Tip". Tooltip refers to the text that has to be displayed when we placemouse over the image.

The image button will be displayed as below:



26/58

63

UNIT I HTML NOTES

Submit: Submit buttons have a special purpose. i.e, when the submitbutton is clicked, then the form will be submitted to the page specified

in the action attribute of the form tag along with its data.

Submit button can be created as :

Attributes of Submit Button:Name: Specifies the name of the object through which it can bereferenced.

value: Specifies the value of the submit button. this will be displayedon the submit button.

Example:

This places a submit button within the HTML form, which can bereferenced by using its name "submitbtn"

The submit button will be displayed as below:

submit

Reset Button: Reset button is usually used with submit button.Purpose of using reset button is to initialize all user-input values. Thismeans that each form field will be set to its initial value when the formis loaded i.e, either ""(null) or the value specified in the value attributeof the form field.

Reset button can be created as:

Attributes of Reset Button:Name: Specifies the name of the object through which it can bereferenced.



27/58

63

UNIT I HTML NOTES

value: Specifies the value of the Reset button. this will be displayed onthe Reset button.

Example:

This places a Reset button within the HTML form, which can bereferenced by using its name "resetbtn" with the value "Reset Form"

The Reset button will be displayed as below:

Enter some text here and click on reset button :

Reset

Drop-Down Menu: Dropdown Menu is one of the most flexible objectin HTML. It is similar to that of radio button i.e, only one item can beselected from a group of items but the only difference is Dropdownmenu occupies less space on the for when compared to Radiobuttonand people can view one item at a time.

Dropdown Menu can be created as:

... ...

Attributes of Dropdown Menu:

Attributes of ...:Name: Specifies the name of the object through which it can bereferenced.

Size: Used to specify the number of visible items in the list.

Multiple: If given yes, then multiple choices can be made.

Attributes of ...:

value: Used to specify the value to be submitted if the form has beensubmitted.



28/58

63

UNIT I HTML NOTES

selected: Default selection of the item.

Example:Favourite color:

BlueGreenRedSelect a Color

This will give the output like :

Favourite Color:

Cascading Style Sheets: You can format your text, links,backgrounds, tables, input fields etc by using CSS (Cascading StyleSheets). This is very popular on the web and used by webmasters tomanage the look and feel of the pages of their web site. The biggestadvantage of using CSS is easy changing of style from a singlelocation. Big web sites can change their look and feed of the pages andlinks by changing the CSS page only and in one location. This waythousand of pages can be changed at one stroke. We will learn step bystep the different formats used in creating CSS pages.This site alsouses CSS for all its formatting requirements. You can see the color ofthe links changes with mouse over, this is done by CSS and we willlearn how to do this.

Advantages: CSS stands for Cascading Style Sheet. CSS is used toimprove the presentation of the content within HTML tags. Using CSSwe can define different ways of content display based on the media.

Less code: As we define the property with value at a common styleclass and use the same class at different locations, so we use lesscode. Less code means less bandwidth consumption and easy tomaintain the content.

Easy maintenance: As we define styles globally or at a commonplace so any changes became easy. For example in a site we have allthe name of the products is displayed using a particular style property.



29/58

63

UNIT I HTML NOTES

Now by changing the style class at external style sheet for the productname we can change the style through out the site. We can keep morethan one style sheet and use them based on requirement. Withproperty inheritance methods maintaining of different styles of thesame tag became easy.

Higher content to code ( tag ) ratio: We can achieve highercontent to code ration in a page by using CSS as we can shift the styledeclarations to an external file. This is important for search enginepoint of view. We present less tags (style tags) and more content tothe spiders for indexing.

First download of pages: As browsers cache the style sheet page sothe page loading became fast. The styles classes are not loaded fromserver each time different pages of same site using same CSS is used.

Flexibility in defining style: The name cascading indicates that wecan use more than one style and the priority is given to local stylesfirst. We can override the global style declared and locally assign thestyle to the tag.

Types of CSS:We will discuss different types of style property declared and

there priority over others here. CSS gives flexibility in using differentstyle property locally by overriding the global declared values ordeclared styles in external style sheet. Let us start with Types of styles.Mainly there are three types

Inline style sheet Or embedded styles Internal style sheet External style sheet

We also have another two types of styles at the client end. One isuser defined style and other is browser default style. Then the bigquestion why so many types of style ? If more than one style is definedthen which one will be followed? For this there is a priority leveldefined and based on this priority the styles property gets included.

User defined style

Embedded or inline style sheet Internal style sheet External style sheet Browser default style



30/58

63

UNIT I HTML NOTES

We can see here that out of the above list as a designer we havecontrol over serial number 2,3 and 4. These three types of styles wewill discuss more. Within these three ( Inline, Internal & External ) thepriority order is first Inline, then Internal and last priority is given toexternal styles. This is the biggest advantage as we can override the

global style property and define them locally. Let us start learning eachof these three types of CSS.

Inline style:We add the styles within our HTML tags. This gets highest priority thanInternal and external defined styles. Let us try to add a backgroundstyle to one h1 tag.

This is H1 tag

Internal Style:This type of style is defined inside the body tag of the page. The styledefined here get priority over the external styles but before the Inlinestyles. Here is an example of Internal styles.

(Type a title for your page here)

font-family: verdana, arial, sans-serif;background-color: #ffff00;}-->

This is content and its style is definedwithin the internal style sheet

External Style sheets:These styles are kept separately and called or linked from the requiredpage. This is the syntax followed for linking a external style sheet.



31/58

63

UNIT I HTML NOTES

The above tag is to be placed within the head tags of the page. We cankeep our style details inside the file named style.css. Watch the linking

of the file. The path details are to be given for including the stylesheet.

CSS Selectors, Properties & Values: Whereas HTML has tags, CSShas 'selectors'. Selectors are the names given to styles in internal andexternal style sheets. In this CSS Beginner Tutorial we will beconcentrating on HTML selectors, which are simply the names ofHTML tags and are used to change the style of a specific tag.

For each selector there are 'properties' inside curly brackets, whichsimply take the form of words such as color, font-weight or

background-color.

A value is given to the property following a colon (NOT an 'equals'sign) and semi-colons separate the properties.

body { font-size: 0.8em;

color: navy;}

This will apply the given values to the font-size and colorproperties to the body selector.

So basically, when this is applied to an HTML document, textbetween the body tags (which is the content of the whole window) willbe 0.8 ems in size and navy in colour.

Lengths and Percentages:There are many property-specific units for values used in CSS, butthere are some general units that are used in a number of propertiesand it is worth familiarising yourself with these before continuing.

em (such as font-size: 2em) is the unit for the calculated size of a

font. So "2em", for example, is two times the current font size.px (such as font-size: 12px) is the unit for pixels.

pt (such as font-size: 12pt) is the unit for points.

% (such as font-size: 80%) is the unit for... wait for it... percentages.

http://www.htmldog.com/reference/cssproperties/color/http://www.htmldog.com/reference/cssproperties/font-weight/http://www.htmldog.com/reference/cssproperties/background-color/http://www.htmldog.com/reference/cssproperties/font-size/http://www.htmldog.com/reference/cssproperties/color/http://www.htmldog.com/reference/htmltags/body/http://www.htmldog.com/reference/cssproperties/color/http://www.htmldog.com/reference/cssproperties/font-weight/http://www.htmldog.com/reference/cssproperties/background-color/http://www.htmldog.com/reference/cssproperties/font-size/http://www.htmldog.com/reference/cssproperties/color/http://www.htmldog.com/reference/htmltags/body/


32/58

63

UNIT I HTML NOTES

Other units include pc (picas), cm (centimetres), mm (millimetres) andin (inches).

When a value is zero, you do not need to state a unit. For example, if

you wanted to specify no border, it would be border: 0.A web page is not a static, absolute medium. It is meant to be flexibleand the user should be allowed to view the web page how the hell theylike, which includes the font size andthe size of the screen.

Because of this, it is generally accepted that 'em' or '%' are the bestunits to use for font-sizes (and possibly even heights and widths, ratherthan 'px', which leads to non-resizable text in most browsers, andshould be used sparingly, for border sizes for example.

CSS Syntax

SyntaxThe CSS syntax is made up of three parts: a selector, a property and avalue:

selector {property: value}

The selector is normally the HTML element/tag you wish to define, theproperty is the attribute you wish to change, and each property cantake a value. The property and value are separated by a colon, andsurrounded by curly braces:

body {color: black}

Note: If the value is multiple words, put quotes around the value:

p {font-family: "sans serif"}

Note: If you wish to specify more than one property, you mustseparate each property with a semicolon. The example below showshow to define a center aligned paragraph, with a red text color:

p {text-align:center;color:red}

To make the style definitions more readable, you can describe oneproperty on each line, like this:

P

{text-align:center;color:black;font-family:arial;}



33/58

63

UNIT I HTML NOTES

Grouping: You can group selectors. Separate each selector with acomma. In the example below we have grouped all the headerelements. All header elements will be displayed in green text color:

h1,h2,h3,h4,h5,h6{color:green;}

The class Selector: With the class selector you can define differentstyles for the same type of HTML element. Say that you would like tohave two types of paragraphs in your document: one right-alignedparagraph, and one center-aligned paragraph. Here is how you can doit with styles:

p.right{text-align: right }p.center{text-align: center}

You have to use the class attribute in your HTML document:


34/58

63

UNIT I HTML NOTES

Do NOT start a class name with a number! It will not work inMozilla/Firefox.

CSS Comments: Comments are used to explain your code, and mayhelp you when you edit the source code at a later date. A comment willbe ignored by browsers. A CSS comment begins with "/*", and endswith "*/", like this:

/* This is a comment */p {text-align : center;/* This is another comment */color: black;font-family: arial}

CSS Background Properties: The CSS background properties allow

you to control the background color of an element, set an image as thebackground, repeat a background image vertically or horizontally, andposition an image on a page.

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSSrecommendation the property is defined (CSS1 or CSS2).

Property Description Values IE F N W3C

background A shorthand propertyfor setting all

backgroundpropertiesin one declaration

background-colorbackground-

imagebackground-repeatbackground-attachmentbackground-position

4 1 6 1

background-attachment

Sets whether abackground image isfixed or scrolls withthe rest of the page

scrollfixed

4 1 6 1

background-color Sets the backgroundcolor of an element

color-rgbcolor-hexcolor-nametransparent

4 1 4 1

background- Sets an image as theurl(URL) 4 1 4 1

http://www.w3schools.com/css/pr_background.asphttp://www.w3schools.com/css/pr_background-attachment.asphttp://www.w3schools.com/css/pr_background-attachment.asphttp://www.w3schools.com/css/pr_background-color.asphttp://www.w3schools.com/css/pr_background-image.asphttp://www.w3schools.com/css/pr_background.asphttp://www.w3schools.com/css/pr_background-attachment.asphttp://www.w3schools.com/css/pr_background-attachment.asphttp://www.w3schools.com/css/pr_background-color.asphttp://www.w3schools.com/css/pr_background-image.asp


35/58

63

UNIT I HTML NOTES

image background none

background-position

Sets the startingposition of abackground image

top left, topcentertop right, centerleft

center centercenter rightbottom leftbottom centerbottom rightx% y%xpos ypos

4 1 6 1

background-repeat

Sets if/how abackground imagewill be repeated

Repeat, repeat-xrepeat-y, no-repeat

4 1 4 1

CSS Text Properties:The CSS text properties allow you to controlthe appearance of text. It is possible to change the color of a text,increase or decrease the space between characters in a text, aligna text, decorate a text, indent the first line in a text, and more.


W3C:The number in the "W3C" column indicates in which CSSrecommendationthe property is defined (CSS1 or CSS2).


color Sets the color of atext

color 3 1 4 1

direction Sets the textdirection

Ltr, rtl 6 1 6 2

line-height Sets the distancebetween lines

Normal, numberlength, %

4 1 4 1

letter-spacing Increase or decreasethe spacebetweencharacters

Normal, length 4 1 6 1

text-align Aligns the text in anelement Left, right, centerjustify 4 1 4 1

text-decoration Adds decoration totext

noneunderlineoverline

4 1 4 1

http://www.w3schools.com/css/pr_background-image.asphttp://www.w3schools.com/css/pr_background-position.asphttp://www.w3schools.com/css/pr_background-position.asphttp://www.w3schools.com/css/pr_background-repeat.asphttp://www.w3schools.com/css/pr_background-repeat.asphttp://www.w3schools.com/css/pr_text_color.asphttp://www.w3schools.com/css/pr_text_direction.asphttp://www.w3schools.com/css/pr_dim_line-height.asphttp://www.w3schools.com/css/pr_text_letter-spacing.asphttp://www.w3schools.com/css/pr_text_text-align.asphttp://www.w3schools.com/css/pr_text_text-decoration.asphttp://www.w3schools.com/css/pr_background-image.asphttp://www.w3schools.com/css/pr_background-position.asphttp://www.w3schools.com/css/pr_background-position.asphttp://www.w3schools.com/css/pr_background-repeat.asphttp://www.w3schools.com/css/pr_background-repeat.asphttp://www.w3schools.com/css/pr_text_color.asphttp://www.w3schools.com/css/pr_text_direction.asphttp://www.w3schools.com/css/pr_dim_line-height.asphttp://www.w3schools.com/css/pr_text_letter-spacing.asphttp://www.w3schools.com/css/pr_text_text-align.asphttp://www.w3schools.com/css/pr_text_text-decoration.asp


36/58

63

UNIT I HTML NOTES

line-throughblink

text-indent Indents the first lineof text in anelement

Length%

4 1 4 1

text-shadow None, color,length

text-transform Controls the lettersin an element

Nonecapitalizeuppercaselowercase

4 1 4 1

unicode-bidi Normal, embedbidi-override

5 2

white-space Sets how whitespace inside an

element ishandled

Normalpre

nowrap

5 1 4 1

word-spacing Increase or decreasethe spacebetween words

Normal, length 6 1 6 1

CSS Font Properties: The CSS font properties allow you to changethe font family, boldness, size, and the style of a text.

Note: In CSS1 fonts are identified by a font name. If a browser doesnot support the specified font, it will use a default font.




font A shorthand propertyfor setting all of theproperties for a fontin one declaration

font-stylefont-variantfont-weightfont-size/line-height

font-familycaptioniconmenumessage-box

4 1 4 1

http://www.w3schools.com/css/pr_text_text-indent.asphttp://www.w3schools.com/css/pr_text_text-transform.asphttp://www.w3schools.com/css/pr_text_white-space.asphttp://www.w3schools.com/css/pr_text_word-spacing.asphttp://www.w3schools.com/css/pr_font_font.asphttp://www.w3schools.com/css/pr_text_text-indent.asphttp://www.w3schools.com/css/pr_text_text-transform.asphttp://www.w3schools.com/css/pr_text_white-space.asphttp://www.w3schools.com/css/pr_text_word-spacing.asphttp://www.w3schools.com/css/pr_font_font.asp


37/58

63

UNIT I HTML NOTES

small-captionstatus-bar

font-family A prioritized list offont family namesand/or generic family

names for anelement

family-namegeneric-family

3 1 4 1

font-size Sets the size of afont

xx-small, x-smallsmall, mediumlarge, x-largexx-large, smallerlarger, length,%

3 1 4 1

font-size-adjust Specifies an aspectvalue for an elementthat will preserve the

x-height of the first-choice font

None, number - - - 2

font-stretch Condenses orexpands the currentfont-family

Normal, wider,narrowerultra-condensedextra-condensedcondensedsemi-condensedsemi-expandedexpandedextra-expanded

ultra-expanded

- - - 2

font-style Sets the style of thefont

Normal, italicoblique

4 1 4 1

font-variant Displays text in asmall-caps font or anormal font

Normalsmall-caps

4 1 6 1

font-weight Sets the weight of afont

Normal, boldbolder, lighter100,200,300,400,500600,700,800,900

4

CSS Border Properties: The CSS border properties allow you tospecify the style and color of an element's border. In HTML we usetables to create borders around a text, but with the CSS border

http://www.w3schools.com/css/pr_font_font-family.asphttp://www.w3schools.com/css/pr_font_font-size.asphttp://www.w3schools.com/css/pr_font_font-size-adjust.asphttp://www.w3schools.com/css/pr_font_font-stretch.asphttp://www.w3schools.com/css/pr_font_font-style.asphttp://www.w3schools.com/css/pr_font_font-variant.asphttp://www.w3schools.com/css/pr_font_weight.asphttp://www.w3schools.com/css/pr_font_font-family.asphttp://www.w3schools.com/css/pr_font_font-size.asphttp://www.w3schools.com/css/pr_font_font-size-adjust.asphttp://www.w3schools.com/css/pr_font_font-stretch.asphttp://www.w3schools.com/css/pr_font_font-style.asphttp://www.w3schools.com/css/pr_font_font-variant.asphttp://www.w3schools.com/css/pr_font_weight.asp


38/58

63

UNIT I HTML NOTES

properties we can create borders with nice effects, and it can beapplied to any element.




border A shorthand propertyfor setting all of theproperties for thefour borders in onedeclaration

border-widthborder-styleborder-color

4 1 4 1

border-bottom A shorthand propertyfor setting all of theproperties for thebottom border in onedeclaration

border-bottom-widthborder-styleborder-color

4 1 6 1

border-bottom-color

Sets the color of thebottom border

border-color 4 1 6 2

border-bottom-style

Sets the style of thebottom border

border-style 4 1 6 2

border-bottom-width

Sets the width of thebottom border

Thin, mediumthick, length

4 1 4 1

border-color Sets the color of the

four borders, canhave from one tofour colors

Color 4 1 6 1

border-left A shorthand propertyfor setting all of theproperties for the leftborder in onedeclaration

border-left-widthborder-styleborder-color

4 1 6 1

border-left-color Sets the color of theleft border

border-color 4 1 6 2

border-left-style Sets the style of theleft border

border-style 4 1 6 2

border-left-width Sets the width of theleft border

Thin, mediumthick,length

4 1 4 1

border-right A shorthand propertyborder-right- 4 1 6 1

http://www.w3schools.com/css/pr_border.asphttp://www.w3schools.com/css/pr_border-bottom.asphttp://www.w3schools.com/css/pr_border-bottom_color.asphttp://www.w3schools.com/css/pr_border-bottom_color.asphttp://www.w3schools.com/css/pr_border-bottom_style.asphttp://www.w3schools.com/css/pr_border-bottom_style.asphttp://www.w3schools.com/css/pr_border-bottom_width.asphttp://www.w3schools.com/css/pr_border-bottom_width.asphttp://www.w3schools.com/css/pr_border-color.asphttp://www.w3schools.com/css/pr_border-left.asphttp://www.w3schools.com/css/pr_border-left_color.asphttp://www.w3schools.com/css/pr_border-left_style.asphttp://www.w3schools.com/css/pr_border-left_width.asphttp://www.w3schools.com/css/pr_border-right.asphttp://www.w3schools.com/css/pr_border.asphttp://www.w3schools.com/css/pr_border-bottom.asphttp://www.w3schools.com/css/pr_border-bottom_color.asphttp://www.w3schools.com/css/pr_border-bottom_color.asphttp://www.w3schools.com/css/pr_border-bottom_style.asphttp://www.w3schools.com/css/pr_border-bottom_style.asphttp://www.w3schools.com/css/pr_border-bottom_width.asphttp://www.w3schools.com/css/pr_border-bottom_width.asphttp://www.w3schools.com/css/pr_border-color.asphttp://www.w3schools.com/css/pr_border-left.asphttp://www.w3schools.com/css/pr_border-left_color.asphttp://www.w3schools.com/css/pr_border-left_style.asphttp://www.w3schools.com/css/pr_border-left_width.asphttp://www.w3schools.com/css/pr_border-right.asp


39/58


40/58

63

UNIT I HTML NOTES

one wants to adjust the margin for an entire page and have it displaycorrectly in Opera, the body padding must be set as well!




margin A shorthand propertyfor setting themargin properties inone declaration

margin-topmargin-rightmargin-bottommargin-left

4 1 4 1

margin-bottom Sets the bottommargin of anelement

Auto, length,%

4 1 4 1

margin-left Sets the left marginof an element

Auto, length%

3 1 4 1

margin-right Sets the right marginof an element

Auto, length%

3 1 4 1

margin-top Sets the top marginof an element

Auto, length%

3 1 4 1

CSS Padding Properties: The CSS padding properties define thespace between the element border and the element content. Negativevalues are not allowed. The top, right, bottom, and left padding can bechanged independently using separate properties. A shorthandpadding property is also created to control multiple sides at once.




padding A shorthand propertyfor setting all of thepadding properties inone declaration

padding-toppadding-rightpadding-bottompadding-left

4 1 4 1

http://www.w3schools.com/css/pr_margin.asphttp://www.w3schools.com/css/pr_margin-bottom.asphttp://www.w3schools.com/css/pr_margin-left.asphttp://www.w3schools.com/css/pr_margin-right.asphttp://www.w3schools.com/css/pr_margin-top.asphttp://www.w3schools.com/css/pr_padding.asphttp://www.w3schools.com/css/pr_margin.asphttp://www.w3schools.com/css/pr_margin-bottom.asphttp://www.w3schools.com/css/pr_margin-left.asphttp://www.w3schools.com/css/pr_margin-right.asphttp://www.w3schools.com/css/pr_margin-top.asphttp://www.w3schools.com/css/pr_padding.asp


41/58

63

UNIT I HTML NOTES

padding-bottom Sets the bottompadding of anelement

Length, % 4 1 4 1

padding-left Sets the left paddingof an element

Length, % 4 1 4 1

padding-right Sets the rightpadding of anelement

Length, % 4 1 4 1

padding-top Sets the top paddingof an element

Length, % 4 1 4 1

CSS List Properties: The CSS list properties allow you to place thelist-item marker, change between different list-item markers, or set animage as the list-item marker.




list-style A shorthand propertyfor setting all of theproperties for a list inone declaration

list-style-typelist-style-positionlist-style-image

4 1 6 1

list-style-image Sets an image as thelist-item marker

noneurl

4 1 6 1

list-style-position Sets where the list-item marker isplaced in the list

insideoutside

4 1 6 1

list-style-type Sets the type of thelist-item marker

None, disc, circlesquare, decimaldecimal-leading-zerolower-romanupper-romanlower-alpha

upper-alphalower-greeklower-latinupper-latinhebrew,armenian

4 1 4 1

http://www.w3schools.com/css/pr_padding-bottom.asphttp://www.w3schools.com/css/pr_padding-left.asphttp://www.w3schools.com/css/pr_padding-right.asphttp://www.w3schools.com/css/pr_padding-top.asphttp://www.w3schools.com/css/pr_list-style.asphttp://www.w3schools.com/css/pr_list-style-image.asphttp://www.w3schools.com/css/pr_list-style-position.asphttp://www.w3schools.com/css/pr_list-style-type.asphttp://www.w3schools.com/css/pr_padding-bottom.asphttp://www.w3schools.com/css/pr_padding-left.asphttp://www.w3schools.com/css/pr_padding-right.asphttp://www.w3schools.com/css/pr_padding-top.asphttp://www.w3schools.com/css/pr_list-style.asphttp://www.w3schools.com/css/pr_list-style-image.asphttp://www.w3schools.com/css/pr_list-style-position.asphttp://www.w3schools.com/css/pr_list-style-type.asp


42/58

63

UNIT I HTML NOTES

georgiancjk-ideographichiragana,katakanahiragana-iroha

katakana-irohamarker-offset Auto, length 1 7 2

CSS Table Properties: The CSS table properties allow you to set thelayout of a table.

Browser support: IE: Internet Explorer, M: Mac IE only, F: Firefox, N:Netscape.



border-collapse Sets whether thetable borders arecollapsed into asingle border ordetached as instandard HTML

collapseseparate

5 1 7 2

border-spacing Sets the distancethat separates cellborders (only for the

"separated borders"model)

length length 5M 1 6 2

caption-side Sets the position ofthe table caption

topbottomleftright

5M 1 6 2

empty-cells Sets whether or notto show empty cellsin a table (only forthe "separated

borders" model)

showhide

5M 1 6 2

table-layout Sets the algorithmused to display thetable cells, rows, andcolumns

autofixed

5 1 6 2

http://www.w3schools.com/css/pr_tab_border-collapse.asphttp://www.w3schools.com/css/pr_tab_border-spacing.asphttp://www.w3schools.com/css/pr_tab_caption-side.asphttp://www.w3schools.com/css/pr_tab_empty-cells.asphttp://www.w3schools.com/css/pr_tab_table-layout.asphttp://www.w3schools.com/css/pr_tab_border-collapse.asphttp://www.w3schools.com/css/pr_tab_border-spacing.asphttp://www.w3schools.com/css/pr_tab_caption-side.asphttp://www.w3schools.com/css/pr_tab_empty-cells.asphttp://www.w3schools.com/css/pr_tab_table-layout.asp


43/58

63

UNIT I HTML NOTES

Some of the example programs:

1. A program with paragraph & break?(ans)

To break
lines
in a
paragraph,
use the br tag.

2. A program for Displaying Heading Tags ?(ans) html>This is heading 1

This is heading 2This is heading 3This is heading 4This is heading 5This is heading 6

Use heading tags only for headings. Don't use them just to makesomething bold. Use other tags for that.

3. A program for Controling a line breaks & spaces?

(ans)This ispreformatted text.It preserves both spacesand line breaks.

The pre tag is good for displaying computer code:

for i = 1 to 10print i

next i



44/58

63

UNIT I HTML NOTES

4. How to create a hyper link?(ans)

This text is a link to a page onthis Web site.

This text is a link to a page onthe World Wide Web.

5. Write a program to set a image as a link?(Ans)

You can also use an image as a link:

6.Write a program to link with a Mail ?(ans)

This is a mail link:Send Mail

Note: Spaces between words should be replaced by %20 toensure that the browser will display your text properly.



45/58

63

UNIT I HTML NOTES

7. Write a program to display different types of tables ?(ans) With a normal border:

FirstRow

SecondRow

With a thick border:

FirstRow

SecondRow

With a very thick border:

FirstRow

SecondRow



46/58

63

UNIT I HTML NOTES

8. Write a program to place headings for the table ?(ans) Table headers:

NameTelephoneTelephone

Bill Gates555 77 854555 77 855

Vertical headers:

First Name:Bill Gates

Telephone:555 77 854


9. Write a program for table span in row/col ?(ans) Cell that spans two columns:



47/58

63

UNIT I HTML NOTES

NameTelephone

Bill Gates555 77 854555 77 855

Cell that spans two rows:

First Name:Bill Gates


555 77 855

10. Write a program for tags inside the table?(ans)

This is a paragraph

This is another paragraph
This cell contains a table:


48/58

63

UNIT I HTML NOTES

AB

CD

This cell contains a listapplesbananas

pineapplesHELLO

11. Write a program to insert color & image to a table ?(ans)

A background color:

FirstRow

SecondRow

A background image:



49/58

63

UNIT I HTML NOTES

FirstRow

SecondRow

12. Write a program to insert color & image for a particular cell?(ans) Cell backgrounds:

FirstRow

SecondRow

13. Write a program for different types of un-orderd lists ?(ans) Disc bullets list:ApplesBananas

LemonsOranges

Circle bullets list:



50/58

63

UNIT I HTML NOTES

ApplesBananasLemonsOranges

Square bullets list:ApplesBananasLemonsOranges

14. Write a program for different types of ordered lists?(Ans)

Numbered list:ApplesBananasLemonsOranges

Letters list:Apples

BananasLemonsOranges

Lowercase letters list:ApplesBananasLemonsOranges

Roman numbers list:ApplesBananasLemons



51/58

63

UNIT I HTML NOTES

OrangesLowercase Roman numbers list:Apples

BananasLemonsOranges

15. Write a program to create a input field?(ans)

First name:
Last name:

16. Write a program to create draw a border with caption around?(ans)

Health information:Height Weight

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



52/58

63

UNIT I HTML NOTES

17. Write a program for check boxes & for submit button?

(ans) I have a bike:
I have a car:
I have an airplane:

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

18. Write a program to repeat a background image by using CSS onbody?(ans) body{ background-image:url('bgdesert.jpg');background-repeat: repeat}

19. Write a program for fixed background image (this image will notscroll with the rest of the page?



53/58

63

UNIT I HTML NOTES

(ans) body{

background-image:url('smiley.gif');background-repeat:no-repeat;background-attachment:fixed}

The image will not scroll with the rest of the page
























20. Write a program to decorate the text by using CSS?



54/58

63

UNIT I HTML NOTES

(ans) h1 {text-decoration: overline}h2 {text-decoration: line-through}

h3 {text-decoration: underline}a {text-decoration: none}This is header 1This is header 2This is header 3

This is alink

21.Write a program to control the text by using CSS?(ans) p.uppercase {text-transform: uppercase}p.lowercase {text-transform: lowercase}p.capitalize {text-transform: capitalize}

This is some text in a paragraph



22. Write a program for Set the size of the font using font-size-adjust?(ans)

h1 {font-size-adjust: 0.50}h2 {font-size-adjust: 0.40}p {font-size-adjust: 0.60}



55/58

63

UNIT I HTML NOTES

This is header 1This is header 2

This is a paragraph

23. Write a program to Set the color of the four borders?(ans)

p.one{border-style: solid;border-color: #0000ff

}p.two{border-style: solid;border-color: #ff0000 #0000ff}p.three{border-style: solid;border-color: #ff0000 #00ff00 #0000ff}

p.four{border-style: solid;border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)}

One-colored border!

Two-colored border!

Three-colored border!

Four-colored border!

Note: The "border-color" property does not work if it isused alone. Use the "border-style" property to set the bordersfirst.



56/58

63

UNIT I HTML NOTES

24. write a program All the padding properties in one declaration?(ans)

td.test1 {padding: 1.5cm}td.test2 {padding: 0.5cm 2.5cm}This is a tablecell with equal padding on each side.

This tablecell has a top and bottom padding of 0.5cm and a left andright padding of 2.5cm.

25. Write a program to set an image as the list item marker?(ans) ul{list-style-image: url('arrow.gif')}

Coffee



57/58

63

UNIT I HTML NOTES

TeaCoca Cola

26. write a program to set the Set the space between table borders(ans)table.one{border-collapse: separate;border-spacing: 10px}

table.two{border-collapse: separate;border-spacing: 10px 50px}Peter

GriffinLoisGriffin
Cleveland

BrownGlennQuagmire

http://www.w3schools.com/css/tryit.asp?filename=trycss_table_border-spacinghttp://www.w3schools.com/css/tryit.asp?filename=trycss_table_border-spacing


58/58

63

UNIT I HTML NOTES

27. Write a program to set the height of the image by usingpercentage?(ans) aimg.normal{height: auto}

img.big{height: 50%}img.small{height: 10%}

Date post:	10-Apr-2018
Category:	Documents
Upload:	sedimbi
View:	228 times
Download:	0 times

Unit I-HTML Notes

Documents