Unit I-HTML Notes
Transcript of 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
-
8/8/2019 Unit I-HTML Notes
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.
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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.
... :
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
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 -
8/8/2019 Unit I-HTML Notes
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
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
7/58
63
UNIT I HTML NOTES
text. To display a less than sign (
-
8/8/2019 Unit I-HTML Notes
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
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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.
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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.
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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.
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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:
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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.
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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 :
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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.
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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 :
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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:
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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:
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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.
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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.
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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.
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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.
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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.
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
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/ -
8/8/2019 Unit I-HTML Notes
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;}
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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:
-
8/8/2019 Unit I-HTML Notes
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
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
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 -
8/8/2019 Unit I-HTML Notes
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.
Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
W3C:The number in the "W3C" column indicates in which CSSrecommendationthe property is defined (CSS1 or CSS2).
Property Description Values IE F N W3C
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
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
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 -
8/8/2019 Unit I-HTML Notes
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.
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
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
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
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 -
8/8/2019 Unit I-HTML Notes
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
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
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 -
8/8/2019 Unit I-HTML Notes
38/58
63
UNIT I HTML NOTES
properties we can create borders with nice effects, and it can beapplied to any element.
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
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
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
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 -
8/8/2019 Unit I-HTML Notes
39/58
-
8/8/2019 Unit I-HTML Notes
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!
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
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.
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
padding A shorthand propertyfor setting all of thepadding properties inone declaration
padding-toppadding-rightpadding-bottompadding-left
4 1 4 1
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
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 -
8/8/2019 Unit I-HTML Notes
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.
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
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
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
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 -
8/8/2019 Unit I-HTML Notes
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.
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
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
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
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 -
8/8/2019 Unit I-HTML Notes
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
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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.
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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
Telephone:555 77 855
9. Write a program for table span in row/col ?(ans) Cell that spans two columns:
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
47/58
63
UNIT I HTML NOTES
NameTelephone
Bill Gates555 77 854555 77 855
Cell that spans two rows:
First Name:Bill Gates
Telephone:555 77 854
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:T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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:
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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:
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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.
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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?
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
The image will not scroll with the rest of the page
20. Write a program to decorate the text by using CSS?
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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
This is some text in a paragraph
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}
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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.
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
-
8/8/2019 Unit I-HTML Notes
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
ClevelandBrownGlennQuagmire
T.Kranthi Kumar, Asst. Professor, Dept. of MCA, PVPSIT, Kanuru, Vijayawada.-02
http://www.w3schools.com/css/tryit.asp?filename=trycss_table_border-spacinghttp://www.w3schools.com/css/tryit.asp?filename=trycss_table_border-spacing -
8/8/2019 Unit I-HTML Notes
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%}