Scribd
Upload
65 views

HTML Dhtml.

The document provides an overview of web design using HTML. It covers HTML fundamentals and tags for document structure like <html>, <head>, <title>, and <body>. It also describes tags for text formatting and layout elements, including paragraphs, headings, horizontal rules, line breaks and basic color/background customization. The document serves as a reference for common HTML tags and their usage in web page design.

Uploaded by

paroothi
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
65 views

HTML Dhtml.

The document provides an overview of web design using HTML. It covers HTML fundamentals and tags for document structure like <html>, <head>, <title>, and <body>. It also describes tags for text formatting and layout elements, including paragraphs, headings, horizontal rules, line breaks and basic color/background customization. The document serves as a reference for common HTML tags and their usage in web page design.

Uploaded by

paroothi
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

Module 3

WEB DESIGNING

FEB 2010

~ ~ ~ INDEX ~ ~ ~
Topic Page
02 02 02 02 02 03


ADCPM

HTML FUNDAMENTALS .... ORIGIN of HTML.... APPLICATION of HTML... HTML DESIGNING.... LAYOUT of HTML DOCUMENT. TYPES of HTML TAG. DOCUMENT TAG.. PARGRAPH TAG.... HORIZONTAL RULE & LINE BREAK... HEADINGS........... BASIC FORMATTING TAGS. UNORDERED, ORDERED & DEFINATION ........ HANDLING IMAGES.. TABLES in WEB PAGES.... INTRODUCING FRAMES........... LINKING WEB PAGES.. FORMS in HTML.... WHAT is DHTML. BROWSER BAR INTRODUCTION to LAYERS STYLE SHEETS. LINK STYLE SHEETS .................................................. HOW to USE the STYLE in PAGE ... MARQUEE TAG .....

03~05 05 05~06 06 06~07 07~08 08~10 10~12 12~13 13~14 14~15 16 16 16 17 . 17 . 18 . 18

HTML/DHTML

Page - 1

Module 3

WEB DESIGNING

FEB 2010

HTML FUNDAMENTALS
The term HTML stands for (HYPERTEXT MARKUP LANGUAGE), is a document format, similar to the Word Processing or Desk Top Publishing formats, but considerably less complicated and based on more open standards. Actually, HTML is not a programming; however, some programming can be necessary in other aspects of Web page creation. It is a markup language used mainly for creating web documents. HTML has its own formatting commands commonly known as tags or elements. These tags are used to markup the contents of web pages.

ORIGIN OF HTML
HTML developed a few years ago as a subset of SGML (Structure Generalized Mark-up Language), which is a higher-level mark-up language that has long been a favorite of the Department of Defense. HTML is definitely the simpler of the two, although they are related and there are few browsers that support both of them. However, HTML was conceived for transmission over the Internet (in the form of Web pages); it is much simpler than SGML, which is an applicationoriented document format. SGML is not exactly ideal for transmission across the Internet to many different types of computers, users, and browser applications. TIM Bermers Lee designed the very first HTML document in 1990 at CERN, Switzerland. Later on Dan Connolly along with others worked for further development of HTML.

APPLICATION OF HTML
HTML is a language mainly used to create web documents. HTML can also be used to display any document that is available on the web. The Web pages created by using HTML can have text, colors, graphics etc. The HTML elements mark-up the document and inform the browser that how the page should look like, when seen in the browser. HTML provides tags, which makes the document look attractive. Hence using HTML one can deliver different kinds of information in different forms to people all over the world on the web.

HTML DESIGNING
You can use the Notepad as your editor to write an HTML document and save this file with any name having .HTM (.htm) or .HTML (.html) extension. Let us assume that you have saved a file with name one.HTML. Now, you can see this HTML file (Web page) on any of the web browser.

LAY OUT OF AN HTML DOCUMENT


A HTML document consists of text along with the set of HTML elements, commonly known as tags (similar to commands). The text conveys the data of a document and tags, markup the document. The HTML elements are written inside the angular brackets less then ( <) and greater then (>) symbols. The letters in the elements are not case sensitive. If these brackets are not specified then the browser assumes it as normal text and that is to be displayed on the web page. Now before going for the layout of on HTML document, let us see the two different types of elements.
ADCPM

HTML/DHTML

Page - 2

Module 3

WEB DESIGNING

FEB 2010

TYPES OF HTML TAGS: CONTAINER TAG:


Container tag is just like a pair of brackets, it has a starting tag as well as an ending tag. It continuously works until the ending tag stops it. Syntax: <TAG>-------TEXT-------</TAG> They can hold the text as well as other elements between two tags. Example: <HTML>--------------------</HTML>. NOTE: The Slash (/) in tags like </HTML>, </HEAD>, </TITLE> and </BODY> indicates the end of their diagrammatically structure in an HTML document.

EMPTY TAG:
An empty tag is a single tag used for a single element. It works only one time and ends automatically. It does not need the ending tag. For Example: <BR> It provides a Line Break (ending of a line).

DOCUMENT TAG: HTML TAG (Container Tag):


An HTML document always starts with <HTML> tag and ends with tag </HTML>. It is necessary for all the HTML pages to have <HTML> tag which signifies the beginning of an HTML document and </HTML> indicates the end of the HTML document. Syntax: <HTML>-----------------------</HTML>

HEAD TAG (Container Tag):


The <HEAD> tag is used to denote the heading of the web page. So whatever is written in between <HEAD> and </HEAD> tags, identifies the properties of the entire page. Syntax: <HEAD>Elfin Computers</HEAD>

TITLE TAG (Container Tag):


One of the most important parts of header is title. Title is the small text that will appear in title bar of viewer's browser window. The Title is written in between <TITLE> and </TITLE> tags Therefore, HTML document will be as below. Syntax: <TITLE>Title of the page</TITLE> Example: <HTML> <HEAD>Wave Page Designing <TITLE>Elfin Computers</TITLE> </HEAD> </HTML>

BODY TAG (Container Tag):


The <BODY> tag contains the contents of the web page. It is the area where most of the work is done. The contents in between <BODY> and </BODY> tags
ADCPM

HTML/DHTML

Page - 3

Module 3

WEB DESIGNING

FEB 2010

are displayed in the browser window. Here we can enter the text and graphics for the web page. Syntax: <BODY>------TEXT------</BODY> Attributes: <BODY BGCOLOR=?> Sets the background color, using name or hex value. <BOBY BACKGROUND=?> Sets the background, using picture location and name. <BODY TEXT=?> Sets the text color, using name or hex value. <BODY LINK=?> Sets the color of links, using name or hex value. <BODY VLINK=?> Sets the color of followed links, using name / hex value. <BODY ALINK=?> Sets the color of links on click.

BACKGROUND:
You can also use a background picture for web page background instead of color. For this, you must have a ready image file in .GIF (Graphics Interchange Format) or .JPG (Joint Photographic Expert Group) formats. Now you have to extend <BODY> tag as below. "ELFIN.JPG" is name of the image file you want to use as the background image. Syntax: <BODY BACKGROUND=ELFIN.JPG> <BODY BACKGROUND=ELFIN.JPG TEXT=RED>

ADCPM

HTML/DHTML

Page - 4

Module 3

WEB DESIGNING

FEB 2010

COLOR:
Till now, you have observed that the text appears in black color on white background on the browser by default, so you must be wondering that how one can create the web pages with colored background and colored texts. HTML has the solution for your question. In HTML, you can change the color of both the elements background and text. Syntax: <BODY TEXT=RED> <BODY BGCOLOR=GREEN> <BODY BGCOLOR=RED TEXT=BLUE>

PARAGRAPH TAG (Container Tag):


The <P> tag tells the browser to leave a blank line and starts a new paragraph. You can also divide text by using paragraph tags. A paragraph starts from a new line with one blank line space after previous line. Whenever the browser interprets this tag, it displays a blank line (space) and the text in between the paragraph tags <P> and </P> is displayed on the next line. You can nest other tags inside paragraph tags for fonts, alignments and other tags. These tags will be used inside a paragraph. Syntax: <P>--------Text-------</P> <P>First Paragraph</P> <P>Next Paragraph</P> You can nest other tags inside paragraph tags for fonts, alignments and other tags. These tags will be used inside a paragraph.

PARAGRAPH ALIGNMENTS:
You can determine how a paragraph will be aligned in a web page. You can align text in left, right, or center of a web page. To specify alignment for a paragraph you must use an extra parameter for your paragraph tag. You can use one of these combinations: <P ALIGN=LEFT>Text is aligned to Left.</P> <P ALIGN=CENTER>Text is Center aligned.</P> <P ALIGN=RIGHT>Text is aligned to Right.</P>

HORIZONTAL RULE (Empty Tag):


<HR> stands for HORIZONTAL RULE. The <HR> tag is used to draw a horizontal line across the page. This tag puts a line commonly called as Shadow Line, on the web page. Syntax: <HR> Inserts a horizontal rule. Attributes: <HR SIZE=?> Sets size (height) of the rule. <HR COLOR=?> Sets color of the rule, using color name or hex value. <HR WIDTH=?> Sets width (length) of the rule, percentage or absolute value. <HR ALIGN=?> Sets alignment of the rule, using (Left/Center/Right).

LINE BREAK (Empty Tag):


ADCPM

HTML/DHTML

Page - 5

Module 3

WEB DESIGNING

FEB 2010

We may require the line breaks in our web pages. The <BR> tag is used to separate the lines. This tag acts in the same way as the enter key on your keyboard. BR stands for Line Break. The <BR> tag actually tells the browser to go to the beginning of the next line. If we break lines in html coding by simply inserting enter keys (new line characters), lines will not break in output result in browser. They will be displayed in a single line in browser. We must use <BR> tag to do this as you used it in previous lesson. Syntax: <BR> Inserts a Line Break (Starts a new line)

HEADINGS (Container Tag):


The header tags are used in HTML document to display heading tags are used to manipulate the size of the heading. They make your heading larger or smaller according to the tag used. There are six header tags in HTML from H1 to H6. The H1 produces the largest heading size and H6 produces the smallest heading size. Syntax: <H1>Elfin Computers</H1> Creates Headings in a webpage.

BASIC FORMATTING TAGS: BOLD TAG (Container Tag):


In order to bold some text in your web page, HTML provides <B> tag. To get the BOLD effect, just place text in between <B> and </B> tag. Syntax: <B>Elfin Computers</B> Elfin Computers

ITALIC TAG (Container Tag):


The tag <I> is used in HTML to get the italic effect in your web page. It can be applied by just placing the text in between the opening <I> and closing </I> tag. Syntax: <I>Elfin Computers</I> Elfin Computers

UNDERLINE TAG (Container Tag):


By using the tag <U>, you can underline any text of your web document. Syntax: <U>Elfin Computers</U> Elfin Computers

SUPERSCRIPT TAG (Container Tag):


The <SUP> tag is used for creating superscript (small letters above the line) text in a web document. Elfin Computers Syntax: <SUP>Elfin Computers</SUP>

SUBSCRIPT TAG (Container Tag):


The <SUB> tag is used for creating subscript (small letters below the line) text in a web document. Syntax: <SUB>Elfin Computers</SUB> Elfin Computers

STRIKE THROUGH (Container Tag):


By using the tag <S>, you can strike through the selected text of your web document. Syntax: <S>Elfin Computers</S> Elfin Computers

FONT TAG (Container Tag):


ADCPM

HTML/DHTML

Page - 6

Module 3

WEB DESIGNING

FEB 2010

This tag is used to set the basic font parameters for any text. It is used for the entire document unless it is changed by the font element or ended by the </FONT> tag. We can change font size of the text by changing size value from 1 to 7. The 7 produces the largest font size and 1 produces the smallest font size, 4 is the default value for font size. Similarly, we can also change the color of text according to our need by changing color, using color name or hex value. Syntax: <FONT SIZE=5>-----TEXT-----</FONT> Changes Font Size <FONT COLOR=GREEN>-----TEXT-----</FONT> Changes Font Color <FONT SIZE=7 COLOR=RED>-----TEXT-----</FONT> Changes Both

LISTS:
HTML supports different types of lists. In simple term, lists can be described as a sequence of items. Following list presents the information in a more systematic way, which makes the contents more logical. The main types of lists supported by HTML are: Unordered (Bulleted) Lists Ordered (Numbered) Lists Definition (Descriptive) Lists

UNORDERED (Bulleted) Lists:


This list is sometimes called as Bulleted List. The term unordered simply means that the items in the list are not numbered instead a dot called Bullet precedes the item. One thing should be very clear to you, that, the items appear exactly in the order given by you in the HTML source document. The tag <UL> indicates the beginning of an Unordered list and </UL> represents the ending of this particular Now let us see the HTML coding for an unordered list Syntax: <UL> <LI>Monitor <LI>Printer <LI>Speaker </UL> Attributes: <UL TYPE=?> Sets type of Bullet (Circle / Disk / Square) for a list.

ORDERED (Numbered) Lists:


An ordered list is also known as numbered list. In ordered list, each item is automatically numbered starting with 1. The HTML tag for an ordered list is <OL> and has its ending tag is </OL>, which indicates the ending of list. Each item in the list starts with <LI>. Coding for an ordered list is as below. Syntax: <OL> <LI>Keyboard <LI>Mouse
ADCPM

HTML/DHTML

Page - 7

Module 3

WEB DESIGNING

FEB 2010

Attributes:

<LI>Scanner </OL> <OL TYPE=?> Sets count type (1 / A / a / I / i) to the numbering of a list. <OL START=?> Sets start value to the numbering of a list.

DEFINITION (Descriptive) Lists:


Definition list consists of two parts, the term, and its definition. Each term in the list has an indented definition. This list starts with a tag <DL> and ends with </DL> tag. Each term or title starts with <DT> tag. The indented definition is marked with <DD>. Syntax: <DL> <DT>SGML <DD>SGML (standard generalization markup language) <DT>HTML <DD>HTML stands for hypertext markup language </DL>

HANDLING IMAGES:
In this section, learn how to insert the images in your web page. Well in addition to this you will also learn how to manipulate the images in terms of size, position etc. The Image formats generally being used nowadays are GIF, JPEG, PCX, WMF etc. However, one should select either GIF (Graphics interchange format) or JPEG (Joint Photographic experts group) format only because these are supported by most of the web browsers.

TYPES OF IMAGES:
Images can be classified according to their usage in the web page. We can classify images as below: 1. INLINE IMAGES: These types of images are automatically downloaded to your browser. You need not have to perform any special step to complete its downloading process. 2. EXTERNAL IMAGES: These images are not downloaded automatically. We have to perform certain action to initiate a downloading process for these images. Such as an image connected through a link, clicking on the link the image is downloaded to the browser.

UNIFORM RESOURCE LOCATOR (URL)


It is obvious that any communication can not take place unless the information being requested is properly identified. The technique used to address documents on the Web is called the Uniform Resource Locator (URL). A URL specifies the exact location of a resource (usually a file) on the Internet. URL is a subset of a larger plan for Universal Resource Identifiers. The URL provides an addressing scheme which allow the browser to request just about any document or Web page, located anywhere on the Internet.
ADCPM

HTML/DHTML

Page - 8

Module 3

WEB DESIGNING

FEB 2010

A URL normally takes the forms: <protocol>://<web-server-name>/<directory-name>/<file-name>

INSERTING IMAGES (Empty Tag):


To include an Inline image <IMG> Tag is used with SRC attribute. This SRC Points to the URL (Uniform Resource Locator) of the image file to be displayed on your web document. Syntax: <IMG SRC=File Location & Name>

IMAGE BORDER:
This attribute is used to place a border around the image according to the value given to it. The border attribute is optional and is used often when the images are used as links. Syntax: <IMG SRC=File Location & Name Border=5>

IMAGE SIZE:
User can change the size of the images. To include an image along with the desired dimension, use height and width attributes. Syntax: <IMG SRC=File Location & Name Height=50 Width=100>

ALT (Alternative Text):


Alt or alternative text attribute is used to represent some information about the image. This text displays in browser whenever mouse moves over the image or the image is unavailable due to link break. Syntax: <IMG SRC=File Location & Name Border=5 ALT=text>

ALIGNMENT of IMAGES with TEXT:


You can place Image and Text in different way in a webpage according to the attribute given with the <IMG SRC> tag. As shown in the webpage picture. There are five types of alignments. 1. Left 2. Right 3. Top 4. Middle 5. Bottom In case of first two alignments the text flows normally, while in other three cases image is considered as in a line with the text. When you complete one line, the text after it, starts from next line just below of the image. Syntax: <IMG SRC=File Location & Name Align=Left> Image in left followed by the Text. <IMG SRC=File Location & Name Align=Right> Text in left and Image in Right. <IMG SRC=File Location & Name Align=Top> Align Text at top of Image. <IMG SRC=File Location & Name Align=Middle>
ADCPM

HTML/DHTML

Page - 9

Module 3

WEB DESIGNING

FEB 2010

Align Text at middle of Image. <IMG SRC=File Location & Name Align=Bottom> Align Text at bottom of Image.

TABLES IN WEB PAGE: Tables are used to present the information in the tabular format, they serve as, a fabulous document organization tools. Tables in a web page help the viewer to locate the information quickly and easily. Nowadays almost all the popular browsers support this feature. CREATING A TABLE (CONTAINER TAG): HTML has tag called <TABLE> Tag, which is used to create a table in a web page. The <TABLE> tag generates the row, column matrix that may contain objects such as text, images, links, table etc. The container tags used by <TABLE> Tag create a table are: 1. <CAPTION> </CAPTION>: This tag is used to provide caption (Heading) to a table. 2. <TR>--</TR>: This particular tag defines a new row in a table. 3. <TD>--</TD>: This is used to add the data within a cell. It defines the data to be added in a cell. 4. <TH>--</TH>: This tag is also used to define the data within a cell but it is used for adding column heading in a cell. USING TABLE ATTRIBUTES TABLE WIDTH and HEIGHT:
ADCPM

HTML/DHTML

Page - 10

Module 3

WEB DESIGNING

FEB 2010

You can give desired width and height to your table by adding WIDTH & HEIGHT attributes to the <TABLE> tag. Width & Height can be given in fixed value or in percentage. Syntax: <TABLE WIDTH=600 HEIGHT=200> <TABLE WIDTH=80% HEIGHT=30%> TABLE BORDER: The BORDER attribute is used to add a border to a table. This attribute is also added to <TABLE> tag. You can change the width of the border by changing border value. Syntax: <TABLE BORDER=2> TABLE COLOR: This attributed is generally added to the <TABLE> tag. The BGCOLOR attribute is used to add a color to the background of a table. You can also change the color of a specific ROW or CELL, in these cases you have to add the BGCOLOR attribute to the <TR> tag or <TD> tag respectively. Syntax: <TABLE BGCOLOR=ORANGE> Sets Orange color to tables background. <TR BGCOLOR=RED>----</TR> Sets Red color to a rows background. <TD BGCOLOR=BLUE>---</TD> Set Blue color to a cells background. BORDER COLOR: You can add BORDERCOLOR attributed with <TABLE> Tag. This attribute is used to add a color to the border of a table. We can see the working of this color attribute by adding it to <TABLE> tag. Syntax: <TABLE BORDERCOLOR=ORANGE> TABLE ALIGNMENTS: You can align a table in three ways, Left, Center, and Right. For this, you have to add an attribute ALIGN to <TABLE> tag. In case of a cell <TD> / <TH> the number of alignments, increase up to six. There are two directions for alignment. First direction is Horizontal (ALIGN), three alignments for it are Left, Center, and Right. Second is Vertical (VALIGN), three alignments for it are Top, Middle (Center), and Bottom. Syntax: <TABLE ALIGN=CENTER> Aligns whole table in Center, default is Left. <TD ALIGN=LEFT VALIGN=TOP> Aligns cell data (text) in Top-Left direction. RULES: This attribute in <TABLE> tag affects only the internal cell borders. For instance if you use RULES=ROWS in your <TABLE> tag, the internal borders will be drawn around the row only. Similarly if you add RULES=COLS, the internal cell borders will be drawn around the table columns. Syntax: <TABLE BORDER=2 RULES=ROWS> CELL SPACING:
ADCPM

HTML/DHTML

Page - 11

Module 3

WEB DESIGNING

FEB 2010

Cell spacing is the space between cells and outer edge of the table you can change it according to given value to this attribute. Syntax: <TABLE BORDER=2 CELLSPACING=20> CELL PADDING: Cell padding does not change the spaces between the cells but infect it denotes the space between the contents and the edge of a cell. Syntax: <TABLE CELLPADDING=10> COLUMN & ROW SPANNING: The COLSPAN and ROWSPAN are the two attributes used to control the column spanning and row spanning respectively. The ROWSPAN means the number of rows, a cell should span, and COLSPAN means the number of columns, a cell should span. The default value for Rowspan and Colspan are one. The attributes COLSPAN and ROWSPAN are used inside the <TH> or <TD> tags. Syntax: <TH COLSPAN=2> or <TD COLSPAN=2> <TH ROWSPAN=2> or <TD ROWSPAN=2>

INTRODUCING FRAMES: Frames are yet another feature that extends the layout flexibility of web pages. Frames are used to create documents with multiple windows. The frame documents use two types of elements. 1. FRAMESET TAG (CONTAINER TAG): This tag is used to create multiframe document. This is a container tag having corresponding closing tag </FRAMESET>. You can divide a frame in term of rows <FRAMESET ROWS>, or in term of column <FRAMESET COLS>, or more using these tags in nested form. <FRAMESET> tag has some attributes as BORDER and BORDEROLOR. Syntax: <FRAMSET ROWS=30%, 40%, 30%>-----------</FRAMESET> <FRAMSET COLS=30%, 40%, 30%>------------</FRAMESET>
ADCPM

HTML/DHTML

Page - 12

Module 3

WEB DESIGNING

FEB 2010

<FRAMSET ROWS=50%, 50% BORDER=0>---------------------- </FRAMESET> <FRAMSET ROWS=50%, 50% BORDER=5 BORDERCOLOR =RED>-----------</FRAMESET> 2. FRAME TAG (EMPTY TAG): This tag defines the frames in a frameset. Frames have some options like resizing and scrolling in a browser but you can add attribute NORSIZE and SCROLLING=NO for barring these options respectively. Syntax: <FRAME SRC=PATH & NAME OF FILE> Attributes: <FRAME SRC=PATH & NAME OF FILE NORESIZE> <FRAME SRC=PATH & NAME OF FILE SCROLLING=NO > Attributes:

LINKING WEB PAGES: HTML was designed to create hypertext and hypermedia system. By the term hypertext system, we mean that the system can be connected to other text source using textual links. When we say hypermedia system, it means a system that can be connected to any other system having any text, graphics, audiovideo files etc. You will feel comfortable with the above terms after going through the concepts of links. LINKING FILES (CONTAINER TAG): Whenever you want to create a link, you need to add HREF, attribute of the <A> anchor tag. This HREF represents the source to which you are linking your web page. The Link ends with a tag </A>. Now we can create a text link or graphical link very easily. Syntax: <A HREF=PATH and NAME of the FILE>-----TEXT-----</A> <A HREF=PATH and NAME of the FILE><IMG SRC=IMAGE LOCATION and NAME></A> In This tag A stands for Anchor HREF stands for Hyper Reference PATH and NAME of the FILE indicates the target file to be linked with your web page. ATTRIBUTE PROVIDED BY <A> TAG ATTRIBUTE HREF TARGET NAME DESCRIPTION It is used to specify the path of the webpage to be linked. It is used to specify the target frame where we want to open linked page. It is used to specify the name of the anchor tag.

CONNECTING THE FRAMES: Generally, the links in the frame gets loaded into the same frame, when you activate them. Frames can also be link as target; In this case, the linked frame opens in the targeted frame. There is one attribute in the FRAME tag called NAME, which is used whenever a document has to be opened in the frameusing link from another frame. Syntax: <A HREF=PATH and NAME of the FILE TARGET=ONE>.
ADCPM

HTML/DHTML

Page - 13

Module 3

WEB DESIGNING

FEB 2010

Thus, the NAME and the TARGET attribute can be used to connect the frames. Following table displays the values that can be assigned to the Target attribute: VALUE _blank _self _parent EXPLANATION Loads the link in a new window It loads the link in the same window It loads the link in the same window after resetting the window

FORMS IN HTML: Forms are use to create a user interface, that makes your web page an interactive medium for accessing applications available at the other end. METHOD: Method specifics the manner in which the data in the form is sent to the server application. This attribute can have two value Get & Post. Get is most commonly used value for the method attribute. Get join all fields name & their associated values into one long string where as Post sends the form contents separately. ACTION: The value of the action attribute is the URL of the server application to be executed on submission of the form. INPUT: This tag is used to declare the input field. It indicates the elements to be displayed on the form. <INPUT> Tag takes one attribute called Types, which is used to decide the Type of input field to be displayed on the screen. The type attribute can have any of the following values. TEXT: Text value is used to create a single line text box. Syntax: <INPUT Type=Text>. CHECK BOX: The check box is used for making multiply selection in web page. Syntax: <INPUT Type=Checkbox> RADIO BUTTON: Sometimes in your web forms you need to have button that can be used by the user to select only one option forms a range of selections. In case you need to use the button called Radio Button in your forms. Syntax: <INPUT Type=Radio> SUBMIT: Submit button is used in the form to submit the information filled up by the user. Syntax: <INPUT Type=Submit> RESET BUTTON: Generally every form on a web page includes reset button which when clicked clears the forms contents. Syntax: <INPUT Type=Reset> PASSWORD: You must have noticed that there are some text fields with label Password against them on this field whenever user types in some information, it will appear as asterisks on the screen. Syntax: <INPUT Type=Password> Now here we are going to see some other attribute for the <INPUT> Tag.
ADCPM

HTML/DHTML

Page - 14

Module 3

WEB DESIGNING

FEB 2010

NAME: On submitting form, all the information entered by the user is


transferred to the server. The information entered by the user gets stored in the name given to the Name attribute of that particular field. Syntax: <INPUT Type=Text Name=first (text)> VALUE: The value given to this attribute depends on the Type of Input field with which it is being user. For instance in case of submit button & Reset button, the value attribute can be user to label the buttons in a desired fusion. Syntax: <INPUT Type=Reset value=Reset> MAXLENGTH: This attribute defines the length of the field. Syntax: <INPUT Type=Text Name=first Maxlength=10> Size: The size attribute specifics the length of the field that should be visible on the screen. Syntax: <INPUT Type=Text Name=first Maxlength=10 Size=5> CHECKED: The checked attribute is frequently used by the Radio button & check boxes. Syntax: <INPUT Type=Radio value=Cric> Cricket SELECT: <Select> Tag is used to create menu on the web page. This menu can be either a pull down or scrollable menu. Syntax: <Select Name=lang> <Option value=C> C </Option>

ADCPM

HTML/DHTML

Page - 15

Module 3

WEB DESIGNING

FEB 2010

DYNAMIC HYPERTEXT MARKUP LANGUAGE WHAT IS THE DHTML? The term DHTML stands for Dynamic Hyper-Text Markup Language. However, you have already seen examples of dynamic applications, as: moving text, hover links, mouse over, graphics, etc. Correct and if you understand DHTML in this broad sense, we have been baking DHTML the whole time. In a narrower sense, DHTML refers to the capability to address and manipulate elements with a Style Sheet. In this whole story, there are several potholes: the Netscape browser and Internet Explorer use different object models. Those you access in the Netscape browser via layers, you must address in Internet Explorer via the corresponding style sheet property. PREREQUISITES FOR DHTML First of all, you will need a webpage browser Version 4.0 or higher, and in order to move objects or make them visible or invisible, you must place them in the browser with proper containers. CSS recognizes <SPAN> & </SPAN> on the character level and <DIV> & </DIV> on the paragraph level. I will recommend <DIV> & </DIV>. For example, would like to place a graphic in a <div> container, it would look like this: <DIV id=picture1 class=picture1><IMG SRC=Path and Filename></DIV> COMMON GATEWAY INTERFACE The abbreviation stands for CGI is COMMON GATEWAY INTERFACE. The CGI script can be defined as a program that is executed in real-time on a web server. The CGI program or script accepts the data given to the server by the browser. After processing CGI returns the result to the server, which is passed to the browser. BROWSER: Browser is application software, which provides a platform to view or communicate with the World Wide Webs on their computers. A browser can display pictures and text and let you navigate among web pages. Two of most popular browsers are Microsoft Internet Explorer and Netscape Navigator. You can download any type of file through browsers. BROWSER BAR: The browser bars have been escalating over the past so many years, introduction of new technologies. Usually you have found some model of compatibility between main browser like Microsoft and Netscape. However, with layering this compatibility is out. Where at one side Netscapes browser (4.0 onward) offers an entirely new markup tag <Layer> to create layer Documents. Internet Explorer does not recognize this tag, here you can perform the some by simply modifies the properties of a style Sheet. INTROUDCTION TO LAYERS The Flexibility of positioning an element above or below other elements within some documents makes layers very useful in all types of publishing. HTML layer
ADCPM

HTML/DHTML

Page - 16

Module 3

WEB DESIGNING

FEB 2010

are poised to create a new breed of web pages faster, cleaner, more dynamic. In this way, we look a revolution at online document. LAYER AND THEIR PROPERTIES Layer and CSS have many similar parameters, making it easier to learn, let us have most common properties available with layers. CREATING LAYERS To create a layer the syntax is same as other html element. Each layer has a WIDTH, a HEIGHT, a BACKGROUND or BGCOLOR and other layer specific attributes. Using layer you can add a no. of dynamic effects to you site without increasing the size of the file so that it take little time to load in browser. Example: <LAYER TOP=40 NAME=HEAD BGCOLOR=ORANGE> Choose Your Destiny</LAYER> POSITIONING LAYER Layer and Java Script when mixed can produce dynamic effect to your website. The two main properties that are used related to positioning of layers are left and top. These both properties are used in conjunction with position property. An described in above mentioned table, in left and top property we pass integer vales in pixels which specifies property we also pass integer values in pixels which specifies the position of the layer on the window. Top specifies The Y coordinate or Row wise position where as left specifies the X Coordinate or column position of the layer. Example: <LAYER ID=A POSITION=ABSOLUTE LEFT=40 TOP=200> There are no shortcuts for Success.</LAYER> STYLE SHEETS In web designing Style Sheets are normally known as CASCADING STYLE SHEETS. Use of CSS came as a boom for web publishers and web page designers. The style sheet allows the designer to control the features like colors, fonts, margins, background etc. on the web page. There are three main types of style sheets. Inline Style Sheets Embedded Style Sheets Link Style Sheets INLINE STYLE SHEET These are used to add certain features locally on a web page. Inline Style Sheets are the basic type of style sheets. EMBEDDED STYLE SHEETS Embedded style sheets are also known as internal style sheets. These style sheets are used whenever one has to apply the same type of effects repeatedly in the web page. These are used in header part of the Webpage. LINK STYLE SHEETS These types of styles are also known as external style sheets. These types of sheets are used whenever you want to apply the style for more than one page. In linked style sheets, a separate file is created to define the styles to be used on different page and stored with extension as .CSS. In this case you do not need
ADCPM

HTML/DHTML

Page - 17

Module 3

WEB DESIGNING

FEB 2010

to define styles in your webpage; you can give a reference of your .CSS file. Generally all available browsers support the CSS. HOW TO USE THE STYLE IN A PAGE? The styles are applied to the normal HTML tags. A style normally consists of a tag and some declarations that specify how the tag should be displayed in browser. For example, Syntax for defining a style in a webpage is given here. Syntax: H2{color: green} The H2 tag The value blur is given to the H2 header Tag. <DIV> TAG This tag is used to divide the document into separate section where each section can have their separate style definition like alignment, font, & text color etc. Syntax: <DIV>------TEXT------</DIV> <DIV ALIGN=CENTER STYLE="COLOR:BLUE">

MARQUEE TAG (CONTAINER TAG): This tag is used to add moving effect to the content of the web page. You can also change the movement according to you by adding some attributes to the <MARQUEE> tag. Syntax: <MARQUEE>------TEXT------</MARQUEE> Attributes: <MARQUEE LOOP=?> Sets the number of repetitions, default is infinite <MARQUEE BEHAVIOR=?> Sets the moving behavior Scroll/Slide/Alternate <MARQUEE DIRECTION=?> Sets the direction of movement Left/Right/Up/Down <MARQUEE BGCOLOR=?> Sets the color, Hex value/Color name <MARQUEE HIGHT=?> Sets the Height Pixels/Percent <MARQUEE WIDTH=?> Sets the Width Pixel/Percent <SPAN> TAG This tag is used to change text style of web page. Syntax: <SPAN>------TEXT------</SPAN> <SPAN STYLE=BACKGROUND COLOR:RED">TEXT</SPAN>

ADCPM

HTML/DHTML

Page - 18

You might also like