Hypertext Markup Language What is Internet?

y Internet is the name for vast worldwide system connecting people, information and computer. It is network, which is an ocean of information. It makes sharing of information possible. y Information is the ocean of internet & internet is ocean of world to connecting people. y The Internet is a global system of interconnected computer networks that use the standard Internet protocol suite (TCP/IP) to serve billions of users worldwide. It is a network of networks that consists of millions of private, public, academic, business, and government networks, of local to global scope, that are linked by a broad array of electronic, wireless and optical networking technologies. Application area of Internet y Net Banking, Online Education, and Online Employeement, Talking to friends and relative and any part of the global world, Sending & receiving, Downloading-interesting software &try it, Health Consultancy. What is Domain Name System & Why they are required? y Everything you do on internet in some way involves the use of an address. Addresses are just what they sound like a way to identify or an area of net or an individual on the net. E.g. XYZ@abc.com y This can be a real address. Its function is much the same way as the physical address. The portion of the address after the @ sign as domain. y Domains are nothing but different organizational level. This level is interesting from left to right. y The internet uses and addresses scheme that employees the DNS. y The system provides a method uniquely identify different organization, Computer System an individual on the internet. The system allows different domain level to be included in an address (Levels are interest from left to right). How DNS helps in locating a computer? y Typically the highest level (the right most) part of the full domain is a code indicating the type of organization to which domain belong. y There are only seven different organizational domain Domain Purpose .com Commercial entity .edu Education institute .org Non-profit organization .gov Non-military government institution .int International Institute (NATO) .mil Military institution .net Network resources .biz Business Sites .tv Related to entertainment industry How does WWW works? y The internet community is an open forum that has no government restriction. We look at some hypertext in our document, select it using amuse an instruct the browser software to fetch the selected page the browser than goes to the address contain in the link connects to the server computer and request for the page. The server receives services this request and the browser display the page to us after formatting it. While going through the information on the various pharipharal, you select hyperlink in a piece of connecting to another document. The Web Client/browser uses the Address associated with this hyperlink to connect to the web server at a specify network address and ask for document that has information on moderns. The server response by sending the text an any other media within that text to the client. Which the client formats and presents on to the user screen. Divya R Jariwala Page 1

Hypertext Markup Language Web Browser A Web browser is an interactive program that permits a user to view information from World Wide Web. The information contains selected item to that allowed to user service. Connecting to the source computer whose address is specifying in the hyperlink. Requesting a new page on the source Receiving the page Closing the connection. Displaying to the user after formatting it. Popular Web browser Microsoft Internet Explorer Mozilla Firefox Opera Safari Google Chrome Net Positive Planet web Netscape Navigator What is HTML? The full form of HTML is Hypertext Markup Language. It is a special kind of text document that is used by Web browsers to present text and graphics. The text includes markup tags such as <p> to indicate the start of a paragraph, and </p> to indicate the end of a paragraph. HTML documents are often referred to as "Web pages". The browser retrieves Web pages from Web servers that thanks to the Internet.
y y y y y y y y

Before you can save a file with the ".html" extension, you will need to ensure that your document is formatted as plain text. For Text Edit, you can set this with the "Format" menu's "Make Plain Text" option. This page will teach you how to:
y y y y y y

start with a title add headings and paragraphs add emphasis to your text add images add links to other pages use various kinds of lists

It is a common basic language which consists of text, forms, images, sound, graphics, etc... It is based on the International electronic documentation. It is an application of Standard Generalized Mark-up Language. HTML tags, embedded within the body of the text, are used to define a document &guide its display. There are various ways to produce HTML documents. (1) Writing at own. (2) Using HTML editor. (3) Converting document in other formats to HTML (4) Choosing a template & modifying it.  It can be used in Hypertext emails, news & anywhere basic hypertext is needed.  It includes simple structure elements such as Several levels of heading, list, tables, menus, etc . HTML Element & Tag Divya R Jariwala Page 2

    

Hypertext Markup Language Web pages created with elements which are define through HTML code or tag. Tags always write in (< >) Angular Brackets. Tags are of two type Opening tag Closing tag An HTML element starts with a start tag / opening tag An HTML element ends with an end tag / closing tag The element content is everything between the start and the end tag Some HTML elements have empty content Empty elements are closed in the start tag Most HTML elements can have attributes The closing tag is same as opening tag but only the difference is </ > is before text in the bracket. As per Example, <H1> this is a Page One</H1> This is the main heading. Browser understands this flag and also displays the text return between these tags. Tags are not display on the web Browser. In some tag few optional or required attribute are also there. Attribute is also a keyword which define more than one value as per example, <H1 align = Center >XYZ</H1> Here align is an attribute of <H1> tag. The Basic Structure of HTML Web Page Every HTML program has rigid structure. The entire Web-page is enclosed within HTML printed tags (<HTML> </HTML>) within these tags two distinct section are created using head paired tag (<HEAD> </HEAD>) and the body paired tag (<BODY> </BODY>) <HTML> <HEAD> <TITLE>Web-page name</TITLE> </HEAD> <BODY> ----------------------------------------------------------------</BODY> </HTML> Document head: Information placed in this section is essential to the inner working of the document and as nothing to do with the context of the document. With the exception of the information contained within <TITLE> </TITLE> tags. All information within <HEAD> </HEAD> is not display in browser. Document Body: The text used to indicate the start and end of the main body of the textual information are : <BODY> </BODY> Essential HTML tag for Web-pages Tag Purpose <HTML> It defines that the text written in the HTML page within it that can be display on the screen or that can be seen through web browser. </HTML> Closes the HTML tag. <HEAD> It s defining the header area of the page. It is not display on screen or page. </HEAD> Closes the Header area. <TITLE> The text which are written within <TITLE> AND </TITLE> will be displayed of the title of the page. This title should be descriptive because it is widely use for web Indexing and search purpose. In internet explorer when you save the page. It takes the name of the page as title in terms of default name.
y y y y y y

Divya R Jariwala

Page 3

Hypertext Markup Language </TITLE> Closing The heading <BODY> Tag & It s Attribute BODY tag work like container it is written after the Head tag and after this BODY tag </HTML> tag will be written. <BODY> is also use for color setting and for background characteristic setting Attribute of Body tag 1.) BACKGROUND: This Attribute shows the image location which will be used as a background of the document. <BODY Background= image1.jpg > 2.) BGCOLOR: its shows the document color instead of color RGB Hexadecimal value as a document color. <BODY Bgcolor= #RRGGBB > OR <BODY Bgcolor= RED > 3.) BGPROPERTY: Its shows the behavior of the background image. If we write BGPROPERTY, It will fix the background image through we scroll the page. <BODY BGPROPERTY = #fixed > 4.) LEFT MARGINE OR RIGHT MARGINE: This attribute shows that how many values white space, we required for displaying the page. <BODY LEFTMARGINE= n >(any no. of value) 5.) TOP MARGINE OR BOTTOM MARGING: This attribute shows that how many white space we required for displaying the page. <BODY TOPMARGING= n >(any no. of value) 6.) TEXT: Its shows the text color <BODY TEXT= GREEN > OR <BODY TEXT= #RRGGBB > Text formatting Tags: <P>: A blank line always separates paragraph in textual material. The tag that provides this functionality is <P>. It is a singular tag. <BR>: When text needs to starts from a new line and not continues on the same line (Without skipping a blank line). The <BR> tag is used for this Brack Ruler <ADDRESS>: This tag shows the information of author like page URL, Name of author, date of revision, etc. and here the information will be displayed in ITALIC fashion. It is used to place certain inform at the foot of webpage such as, copyright inform, contact detail of the creator of the webpage. This tag should ideally take place immediately after the last line of the textual material of webpage. It could also be place in the body of document. The text typed within this text always appears in ITALIC. <I>: This will displays the text in Italic. </I> is compulsory. <EM>: This will display the emphasis tag and it will be with the reference of <I> tag. This tag is display the text in ITALIC. <PRE>: This tag is used to the font with a fixed width where we have used multiple tabs. This tag used to set the position of character as for example program listing and cloner is listing. <B>: It displays the tag is bold format. </B> is compulsory. <STRONG>: It displays the tag with strong emphasis and browser display the text after making it bold. This is used with the reference of <B> tag. </STRONG> is compulsory. <S>: This will display the tag as a strike through text. <U>: It displays the text with underline. </U> is compulsory. <CENTER>: It displays the text from right and from left with equal distance. </CENTER> is compulsory. <COMMENT>: It shows the author comments but in Netscape navigator. We will use this <!...> fashion. <BIG>: It displays the tag in larger font. <SMALL>: It displays the tag in smaller font. <SUB>: It displays the text as a subscript text. H<SUB>2</SUB>O -> H2O <SUP>: It displays the text as a superscript text. X<SUP>2</SUP>+YZ -> X2+YZ <TT>: It displays the text in mono space font. <TT>HELLO</TT> H E L L O <!.. >: It shows the comments and it may use for informational messages for developers as well as to mask content from user agents that do not support a particular technology. <ADDRESS>: This tag is used to the font with a fixed width where we have used multiple tabs. This tag used to set the position of character but it is rendered in italic in the absence of CSS. <BLINK>: This Netscape-specific element causes the enclosed text to flash slowly. Divya R Jariwala Page 4

Hypertext Markup Language <TABLE> Tag & It s Attribute It is a two dimensional matrix insisting of two rows & columns table are intended for displaying data in a column in a webpage. All tables related tags are included between <TABLE> ----- </TABLE> Each row of table is described between <TD> ----- </TD>. Table rows can be of two types: (1) Header Row (2) Data Row Header Row: A row that stands across columns of a table. A table header row define using <TH> ---</TH> tags. The content of a header table row is automatically center and appears in Bold face. Data Row: Individual data cells place in the Horizontal Plan creates a data row. There put be a single data cell (i.e. a single column table) or multiple data cells (a multiple column table). Data cells hold data that must be displayed in the table. A data row defined using <TR>----</TR> text. Text matter displayed in a data row is left justified by default. Any other special formatting like bold face appropriate formatting tag inside the pair of <TR> tag. An image can also be displayed in a data cell. Attribute of Table tag 1.) ALIGN: Horizontal Alignment is control by align attribute. It can be set to left, center and right. 2.) VALIGN: Controls the vertical alignment of cell contain it acceptor the value, Top, Middle, and Bottom. 3.) WIDTH: Sets the width to specific number of pixel or to a percentage of the available screen width. If width is not specified, the data cell is adjusted based on cells data value. 4.) BORDER: Controls the border to be placed around to the table. The table thickness is specified in pixel. 5.) CELLPADDING: This attributes control the distance between the data in the cell and the boundary of the cell. 6.) CELLSPACING: Control the spacing between adjust cent cell. 7.) COLSPAN: The colspan attribute inside the <TH> or <TD> instructs the browser to make the cell defined by the tag to take up more than one column. The colspan attribute can be set equal to the no. of columns the cell is to occupy. The cell is too occupied. This attribute is useful when one row of the table needs to be a certain number of columns wide. 8.) ROWSPAN: Rowspan attribute would in some way as the colspan attribute accept that it allows a cell to take a more than on row. The attribute can be set by giving the numeric value. 9.) CAPTION TAG: Table headings are called caption. Caption can be provided to a table by using caption paired tag. (<CAPTION> & </CAPTION>). Caption tag has attribute ALIGN to set alignment of the caption such as top, bottom, etc. <TABLE BORDER=1 WIDTH= 50% ALIGN= CENTER > <CAPTION ALIGN= Bottom > <B>Information</B> </CAPTION> <TR> <TH ROWSPAN=2>NAME</TH> <TH COLSPAN=3>MARKS</TH> </TR> <TR> <TD>POWER POINT</TD> <TD>VISUAL BASIC</TD> <TD>SQL</TD> </TR> Divya R Jariwala Page 5

Hypertext Markup Language <TR> <TD>ABC</TD> <TD>45</TD> <TD>67</TD> <TD>98</TD> </TR> </TABLE> Heading Style: The HTML supports six different levels of headings. The highest level of header format is <H1> and lowest level is <H6>. All the styles appear in bold face and the size of the heading depends on the level chosen. <H1>Raj Travels</H1> Drawing Lines: <HR> and its Attribute: This tag will draw horizontal line in document. Mostly this tag is used to differentiate the document. <HR> Attribute of HR tag 1.) ALIGN (Left, Center and Right): This attribute put the line in left, in right, or in center according to the specify value. If we use this attribute then it is individual to use width attribute. 2.) COLOR: Its shows line color. We can use RGB Hexadecimal Value for color. 3.) SIZE: Its shows the line thickness in pixel. 4.) WIDTH: It shows the line length in pixel or in percentage. 5.) NO SHADE: This attribute gives instruction to the browser draw the line without shadow. Controlling Font Size & Color: <FONT> Tag & Attribute: This tag sets font characteristics and Browser displays it. <FONT SIZE=4> Attribute of Font tag 1.) COLOR: This attribute is used to set the color of the text. We can also use RGB= Hexadecimal Value for color. <FONT COLOR= RED > 2.) FACE: It displays the text according to the font name. <FONT FACE= ARIAL > 3.) SIZE: It displays the text according to the size given for it. You can give size of the font related to the base font. <FONT SIZE= n > (any no. of value) Lists: There are three type of list available hear (1) Unordered List (2) Ordered List (3) Definition List UNORDERED LIST: An unordered list starts with the <UL> and ends with </UL>. Each list item starts with <LI> tag. Attribute of Unordered List tag 1.) TYPE: This attribute specify the type of the Bulleting Properties. <UL TYPE= Square > <LI> CPU <LI> Keyboard <LI> Mouse </UL> Output: CPU  Keyboard  Mouse ORDERED LIST: An ordered list starts with a <OL> and end with the </OL>. Each list items start with the <LI> tag. Divya R Jariwala Page 6

Hypertext Markup Language Attribute of Ordered List tag 1.) TYPE: Controlled the numbering scheme to be used: Type = 1 will give a counting nos. (1, 2, ., n) Type = A Will give a nos. of alphabets (A, B, C, D, ., Z) Type = a Will give a nos. of alphabets (a, b, c, d, , z) Type = I Will give a counting nos. (I, II, III, IV, .., n) Type = I Will give a counting nos. (i, ii, iii, iv, .., n) 2.) START: alters the numbering sequence. It can be set to any numeric value. 3.) VALUE: Changing numbering sequence in middle of the order list. It is to be specifying as the <LI>. DEFINATION LIST: Definition list value appears within <DL> and </DL>.It consists of two parts: (i) Definition term: appears with the tag <DT>, it is singular part. (ii) Definition description: appears with the <DD>. <DL> <DT>Keyboard <DD>An input device <DD>Having 128 Keys </DT> <DT>Monitor <DD>An output device </DT> </DL> Output:Keyboard An input device Having 128 keys Monitor An output device Adding Graphics: HTML allows placing static or animated images in HTML page. HTML accepts two picture file formats GIF & JPG. Once an image is ready and stored in the above mentioned formats. It can be inserted into webpage using the tag <IMG> which takes the name of the image file as and attributes. This tag is used to put an image on web-page specified in URL. With HTML using, image tag with its attribute. Attribute of IMG tag 1.) SRC: Specifies the URL of an image. <IMG SRC= Path >. 2.) ALIGN: Controls alignment of the text. For the image, the Alignment shows that the text after the image to be written at which position next to the image. <IMG Align= TOP >. This attribute also controls alignment of the image with respect to the VDV screen. 3.) BORDER: The specified the size of border to place the around the image. <IMG Border= n > (any no. of value). 4.) WIDTH: Specified the width of the image in pixel. <IMG Width= n > (any no. of value). 5.) HEIGHT: Specified the height of the image in pixel. <IMG Height= n > (any no. of value). 6.) HSPACE: Horizontal space indicates the amount of the space to the left and right of the image. <IMG Hspace= n > (any no. of value). 7.) VSPACE: Vertical space indicates the amount of the space to the top and bottom of the image. <IMG Vspace= n > (any no. of value). 8.) ALT: indicate the text to be displayed in (as the browser unable to display the image) specified in the SRL attribute. <IMG Alt= image1 >. <HTML> <BODY BACKGROUNG= images\texture1.gif > Divya R Jariwala Page 7

Hypertext Markup Language <B> Control Image Border</B> <CENTER> <I>Image Without Border</I> <IMG SRC= C:\IMAGES\CORN.GIF > <BR><BR> <I>Image With Border</I> <IMG SRC= C:\IMAGES\ABC.GIF BOREDR=3> <BR><BR> </BODY> </HTML> Frames:  The HTML that divides a browser screen or page into no of rectangular region or window of various size with the frameset compared tag (<frameset> </frameset>).  User can give information in one frame while keeping another frame is open for reference.  The contains of one frame can be manipulated or linked to the contain of another.  Frames helps to contain tables, side indexes and list of link.  Frames offers fixed screen navigation a frame is an independent scrolling region or window of a webpage.  Each unique region is called frame as a window within another window.  A page can have one or more frames  Frames look similar to tables visually but it is not true. They are much more powerful.  The frames can divided the page so that each of the frames is a websites itself i.e. they can access different URL s and each of this can be updated indendently.  Frames could be applied for the following on the web page: (1) To display the logo or special information in one fixed portion of the page. (2) For the table of contents in a page, where the people can just click and move around the website without having to move back constantly. <FRAMESET>: It is a compared tag. To specify the framing document you need to create a file that uses a <frameset> tag instead of body tag. It defines the set of frames that makes up the document. The splitting of a browser screen into frames is accomplished with the <frameset> tag. This tag requires one of the following two attributes depending on whether the screen has to be divided into rows or columns. The <frameset> tag will work only with either cols or rows attribute. In order to have both attribute together the <frameset> tag has to be nested i.e. one <frameset> tag placed with another <frameset> tag. Attribute of Frameset tag 1.) ROWS: This attribute is used to divide the screen into multiple rows. It can be set equal to a list of values. Depending on the required size of each row. <FRAMESET COLS= 20%, 80% > 2.) COLS: This attribute is used to divide the screen into multiple cols. It can be set equal to a list of values. Depending on the required size of each column. <FRAMESET ROWS= 40%, 60% > NOTE: - rows and cols are specified in pixels, percentage (%) and symbol * , which indicates the remaining space. <FRAME>:  It is singular tag. It is used to specify the frames within the frameset tag.  The frame tag is defined within the <frameset> tag.  This tag is used to specify what actually appear within the particular frame. Divya R Jariwala Page 8

Hypertext Markup Language Attribute of Frame tag 1.) NAME: It is gives the frame unique name so it can be targeted by other documents. The name must be beginning with an alphanumeric character. <FRAME NAME= frame1 > 2.) SRC: It is used to set the URL of the document to load into the frame. <FRAME SRC= index.htm > 3.) FRAMEBORDER: This attribute boarder of the frame. It will have value 0 or 1. 4.) MARGINEWIDTH: It is used to specify the margin in frame from left side. 5.) MARGINEHEIGHT: It is used to specify the amount of white space to be left at the top, bottom of the page. 6.) NORESIZE: This attribute removes or disable the resizing features of frame. 7.) SCROLLING: This attribute will have a value 0 or 1 (no or yes) for scrollbars for the frame. If the value is 0 then scrollbar will not be display for the browser of that frame. <FRAMESET ROW= 50 %, * COLS= 50 %, * > <FRAME NAME= F1 SRC= a1.htm > <FRAME NAME= F2 SRC= a2.htm > </FRAMESET> Linking Document: LINKS: HTML allows linking to the other document as well as with images. Clicking on a section of text or an image in one page will open an entire new web-page or image. The text or an image called hypertext, hyperlink or hotspot. The browser distinguish hyperlink from normal text. Every Hyperlink, (i) Appears blue in color. The default color can be set dynamically via an HTML program. The default color setting in a browser for hyperlink text or image. (ii) The hyperlink text or image is underlined. (iii) When the mouse cursor is placed over it, the standard arrow space of mouse cursor changes to the shape of hand. Creating a links:  Links are created in a web page by using the <A> and </A> tag.  Anything returns between the <a> compared tag becomes hyperlink or hotspot.  He documents to be navigated needs to be specified.  By using the HREF attribute of the <A> tag, the next navigated web-page or image can be specified. <A HREF= file name > </A> <ANCHOR>: Links are created in a webpage by using a pair of <A> anything written between <A> </A> becomes a hyperlink or hotspot. Here by using, HREF attribute of the <A>, the next navigable page or image can be specified. Types of links: There are two types of links: (1) Links to an external document. <A HREF= file name > </A> (2) Links to a specified place within the same document. <A NAME= location > </A> (3) Link to a particular file on a particular position <A HREF= URL # location > </A> Targeting name frames:  Whenever a hyperlink loads a documents in a frame is created, the file reference in the hyperlink will be open and replace the current document i.e. in the frame.  In a situation, when the new document needs to be open in a different frame, the frame in which the HTML files is to be opened needs to be named.  This is done by using the NAME attribute of the <FRAME> </FRAME> compared tag. Divya R Jariwala Page 9

Hypertext Markup Language  The NAME takes one parameters which is its frame name.  The hyperlink tag will have to be supplied with the following information: (1) The file name .htm file that has to be opened. (2) The name of the frame where the file name .htm file has to be opened. (3) The attribute via which the frame name is specified is the TARGET attribute which is a part of <A> </A> compared tag. <FRAMESET COLS= 30%, * > <FRAME NAME= part SRC= index.htm > <FRAME NAME= main SRC= home.htm > </FRAMESET> Index.htm <A HREF= detail.htm TARGET= main >Visit</A> The name specify in the frame attribute of the frame tag is used to target the frame with the use of hyperlink; we can target the specific frame. A target attribute of <A> tag is used to specify the frame to open the page given in HREF attribute. 1.) Reserved Target Values: Value Meaning _BLANK Load the page into new (generally unnamed window) _SELF Load the page over the current frame. _PARENT Load the link over the parent frame _TOP Load the link over the frames in the window <NOFRAME>: This tag is used to enclose the HTML and tag that should be display when a browser doesn t support page accessing web page. The NOFRAME tag should be used within the frameset tag only. The contains of the <NOFRAME> should be correct HTML. <NOFRAME> <B>HELLO WORLD</B> <BR> <A HREF= one.htm >My Site</A> </NOFRAME> Floating Frames: <IFRAME>: The concept of floating frame is to floating and inline frame region or window that acts similarly to any other embedded object. The text can be followed around it. An inline frame is defined by <IFRAME>. It may occur anywhere within the <BODY> of an HTML document. Major Attribute of IFrame tag 1.) SRC: set to the URL of the file to load. 2.) HEIGHT/WIDTH: set to either the pixel or percentage value of the string that the floating frame region should consume. NOTE: The other attribute like Align, H_Space and V_Space are same as <IMG> tag. <IFRAME NAME= frame1 SRC= one.htm WIDTH= 350 HEIGHT= 250 ALIGN= LEFT > </IFRAME> IMAGEMAP MAP: When a hyperlink is created on an image, clicking on any part of the image will lead to opening of the document specified in the <A HREF= URL >  If the image is very large documents to the same image, there has to be a technique that divides the image in to multiple sections and allows linking of each section to a different document.  The technique that is implemented to achieve this is an image map.  Image maps can be created and applied to an image can be linked to up different file or image. Divya R Jariwala Page 10

Hypertext Markup Language  Linked regions of an image map are called hot-regions and each hot region is associated with a file name .htm and document that will be loaded into the browser when the hot region is clicked.  <MAP NAME= mapname > within the pair of map tags the area tag is specified. This tag defines the specific region within the image. <AREA>: This element defines a hotspot region on an image and associates it with a hypertext link. This element is used only within a <map> tag. Attribute of image map tag: 1.) SHAPE: The shape of a region can be one of the following <MAP SHAPE= Rect > <MAP SHAPE= Circle > <MAP SHAPE= Polygon > <MAP SHAPE= Default > 2.) COORDS: Each of the above shapes takes different co-ordinate parameter.  A Rectangle will take for 4 co-ordinates x1, y1, x2, y2.  A Circle will take 3 co-ordinate center x, center y, radius z  A Polygon will take 3 or more pair of co-ordinate denoting a polygon region.  A Default shape will not take any parameter and it indicates the portion of the image not specified under any area tag. 3.) HREF: Takes the name of the .htm file i.e. linked to the particular area on the image. <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" /> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" /> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" /> <area shape="polygon" coords="124,58,8" href="venus.htm" alt="Venus" /> </map> Now <IMG> tag takes an attribute called usemap that takes the name of an image map as a value and applies the map specification to the respective image. The value is always precedent with the # sign. Media like Element <MARQUEE>: This tag is used to create messages that scroll and side across the string. <MARQUEE> Text Message</MARQUEE> Attribute of Marquee tag 1.) BGCOLOR: To set the Background Color. 2.) BEHAVIOUR: To determined how the text behavior values can be alternate, scroll or side. 3.) DIRECTION: To set the direction in this to scrolled text mover values can be down left, right or up. 4.) LOOP: To set the no of times the message loops in scroll region. 5.) SCROLLAMOUNT: Setting this attribute to a particular no of pixel allows the smoothness of the scroll to be controlled. 6.) SCROLLDELAY: To set the no of millisecond between each rendering of the scroll message. NOTE: Other attribute are Title, Align, H_Space, V_Space, Height and Width are same as image tag. <MARQUEE BGCOLOR= YELLOW BEHAVIOUR= SLIDE DIRECTION= LEFT LOOP= 6 SCROLLAMOUNT= 2 SCROLLDELAY= 40 WIDTH= 80 % > Text </MARQUEE> FORMS:  When creating an interactive white for the internet it is necessary to capture user input and process the input.  Based on the result of this processing appropriate information from a website can be dispatched to be viewed.  Traditionally, user input is captured in a form . Divya R Jariwala Page 11

Hypertext Markup Language  HTML provides the <form> </form> compared tag with which on HTML form can be created to capture user input.  The element defines a feeling form to contain labels and form control such as menus and text and rebuses that may be filled in by a user. Attribute of Form tag 1.) ACTION: This attribute contains a URL of the server program which will process the contain of the form. Some browser may also support a mail to URL which mail to results to the specify address. 2.) NAME: This attribute specify the name for the form or can be used by client program to reference form data. 3.) TARGET: In documents containing frames, this attribute is specifying the target frame to display a result of a form submission. 4.) METHOD: This attribute indicates how form information should be transfer to the server. a. GET: The Get option appends data to the URL specified by the action attribute. b. POST: The Post option transfer data using a HTTP post transaction. This approach is more secure and imposes no data size limitation. 5.) ID: It is a unique alpha numeric identifier. 6.) LANGUAGE: This attribute specify the language. The current speech is return and invokes the proper scripting engine. Common HTML objects used between the form compared tag are:- Text, Textarea, Radio Button, Buttons, Checkbox, List boxes, and so on.  The user fills in a form and supplies the information into fields by typing into a text folders, clicking on radio buttons, check boxes and selecting value from drop-down menus.  The user than submits the form by clicking buttons. Usually labeled submit .  A form typically has a form-handler which is a method of collecting information from the form.  Once the user submit the form, the form handler swings into action the form handler is a program or a script that handles data on the form.  A form handler can be used to store the data submitted by the user into text field.  The data can be retrieved as and when required.  Update a database with the data submitted by the user and causes the data on a web page. Application area for forms: (1) Education Sights: For collecting names, address, telephone nos., e-mail addresses and other information by the website to the register users for service and event. (2) On-line Purchasing: Gathering information for the purchase of an item for example: if you want to purchase a book over an internet, you would be required to fill in your name, mailing, address and mode of payment. (3) On-line feedback forms: Collecting feedback about the websites. Most sites that offer a service encourage user to send their feedback. (4) Providing interface for chat sessions: It is provide a chatting area for user for that user must fill up the form of chatting. Form Controls:  Form controls are used within the paired of form tag.  Forms can be classified into three sections namely form header, input fields and action button.  A user can be interacting with an HTML document using any controls.  To add a form in a web-page <FORM> </FORM> compared tag is used.  This tag informs the browser that anything specified between them belongs to the form. <INPUT>:  It is the HTML tag that is used to create any of the form element and type attributes determines the specific type of form elements.

Divya R Jariwala

Page 12

Hypertext Markup Language  This element specify an input control for a form the type of input is set by the type attribute may be a variety of different type, Including single line text field, multi line text field, password style, check box, radio button or push button. Attribute of INPUT tag 1.) TYPE: It specifies the type of the form elements will be added to the form. VALUE CONTROL TYPE Text For the text entry box Password For the Masked text entry Check Box For Creating Check Boxes Radio Button For Creating Radio Buttons Reset For Creating Reset Button Submit For Creating Submit Button Hidden For Creating Hidden Text Box Image For Creating Image Tag File For Creating File Control Button For Creating Generalize Button 2.) NAME: Every control in the form must have name to identify it. It appears as the label in the form & should be unique. 3.) ID: It should be an alphanumeric entry. 4.) VALUE: It is used to specify a default value to the control. 5.) ALIGN: It is used to aligning control with respect to form margin. Possible values are left, right and center. 6.) BGCOLOR: It specifies the background color in RGB hexa decimal format or with the color name. 7.) SIZE: It specifies the horizontal size of the textbox. 8.) MAXLENGTH: It specifies the maximum no of character that user can enter. 9.) CHECKED: This attribute should be used only for check box and Radio Button form control. The present of this attribute indicates that control should be displayed in its checked status. 10.) DISABLE: This attribute is used to turn off a form control element will not be submitted nor they receive any focus from the key-board or mouse. 11.) READONLY: This attribute prevents the form controls value from being change. Form controls with this attribute set may receive focus from the user but may not be modify. 12.) SRC: This attribute is used with image form control specify URL of the image file to load. 13.) WIDTH: This attribute is used to set the size of the form control in pixel. <TEXTAREA> (Multi Line Input Tag): In creation of form it might be necessary to accept several lines of text from the user. In such cases, you need to use <textarea> tag. Attribute of <textarea> tag 1.) COLS: This attribute sets width for the character of the textarea. Default values for the size of textarea element are 20 characters when this attribute is not set. 2.) ROWS: This attribute sets the no of rows in the textarea the value of the attribute should be a positive integer. 3.) NOSOFTBREAKS: This attribute removes breaks automatically inserted into the text by line wrapping when the form is submitted. Other attribute like NAME, ID, LANGUAGE, BGCOLOR, DISABLE and READ ONLY are same as for the INPUT tag. 4.) WRAP: It defines the wrapping of text in textarea. Possible values are: I. OFF: no wrapping takes place. II. VIRTUAL: Word wrap takes place but entire text is send as long as line. III. PHISICAL: Word wrap takes place and the text is send at all wrap points. <SELECT> (Pull-down Menu): Divya R Jariwala Page 13

Hypertext Markup Language  A selecting list display a list of option from which the user can select an item.  The <SELECT> tag is used to define a selection list in a form and should be defined within the <From> tag.  Structure of a pull down menu looks similar to a list structure.  The <Option> tag is attached to the <Select> tag to display the list of items or option.  <Option selected>: It is used to set the value as by default. Attribute of <select> tag 1.) MULTIPLE: This attribute allows selection of multiple items in the selection list. The default is single item selection. Other attribute like NAME, ID, LANGUAGE, BGCOLOR, DISABLE are same as for <INPUT>. 2.) SIZE: This attribute sets the no of visible items in the selection list. Attribute of <option> tag 1.) VALUE: This attribute indicates the value to include with the form result when the item is selected. 2.) SELECTED: This attribute indicates that the associated item is the default selection. If not included the 1st item in the selected list is default. ACTION BUTTON:  Once all the detail in the form are entered then these data has to be stored somewhere so that it can be reused and form would be also cleared for another set of information to be entered.  For doing this there are two pre-define buttons called Submit and Reset button (1) Submit: On clicking this button the data on the fields will be sending to the server as a series of name or value tag. The name being the name of the form element and value is whatever the user enters. (2) Reset: It is used to clear the content or set of default value to all form elements and make them active. ADDING IMAGE VALUE:  The image value of the type attribute is the same as the submit button.  But, only difference is that the button is replaced by an image. It is used in the following manner: <INPUT TYPE= image SRC= A1.jpg > Attribute of <image> tag 1.) SRC: This attribute of <INPUT> tag used only when the value of type attribute is image. Live Audio: <EMBED>: This non-standard element specifies object typically a multimedia element to be embedded in an HTML document. Attribute of <Embed> tag 1.) SRC: This attribute is specifies the URL of source contain for the embedded object. 2.) AUTOSTART: This attribute can take one of the two values true or false. When set to true the sound file begin playing as soon as it is downloaded. The default value is true. 3.) STARTTIME: This attribute can be set to a time value within a sound file to determine from where to begin playback as per example, 00:15 is set for 15 sec. end time. 4.) : This attribute is similar to start time but instead of determines the time to end playback. 5.) VOLUME: It can be set to an integer between 0 to 100 where 0 sets the sound to be completely off and 100 sets it at maximum value of volume. 6.) LOOP: It can one of the three values true/false or a positive integer setting the value to true loops the sound continuously until the stop button is press by default the value is false. If the value is the positive integer that much times the audio will play. 7.) HEIGHT/WIDTH: This attribute is used to set height and width in pixel or percentage (%). 8.) HIDDEN: It can one of the two values true/false. If the value is true the embedded object will not be display in the web browser. If the value is false embedded object will be displayed in the web browser. By default the value is false. 9.) CONTROLS: It is set to any of the following buttons prepare three columns. Divya R Jariwala Page 14

Hypertext Markup Language Button Value Suggested Width Suggested Height Consol (Default) 144 60 Small Consol 144 15 Volume Lever 74 20 Play Button 37 22 Pause Button 37 22 Stop Button 37 22 10.) NAME: This attribute give a unique name <AUDIO>: This HTML element includes audio in a document. Attribute of <audio> tag 1.) AUTOBUFFER: This Boolean attribute indicates whether or not the browser should begin buffering audio right away. This is valuable when autoplay is not set. 2.) AUTOPLAY: This Boolean attribute indicates the browser should begin playing the audio as soon after page load. 3.) CONTROLS: This Boolean attribute is set to indicate whether or not the browser should present the controls for audio, such as playback, pause, volume, etc. 4.) LOOP: This Boolean attribute, if present indicates that the audio should loop. 5.) SRC: This attribute is set to the audio to show. <bgsound>: This Internet Explorer element associates a background sound with a page. Attribute of <bgsound> tag 1.) BALANCE: This attribute defines a number between -10,000 and +10,000 that determines how the volume will be divided between the speakers. 2.) LOOP: This attribute indicates the number of times a sound is to be played and has either a +ve number value or -1 to specify that it will continuously loop. 3.) SRC: This attribute specifies the URL of the sound file to be played which must be one of the following types: .wav, .au or .mid. 4.) VOLUME: This attribute defines a number between -10,000 and 0 that determines the loudness of a page s background sound. 0 is full volume and -10,000 are none. <audio src= music.wav > <bgsound src= music.mp3 type= audio/ogg loop= 3 volume= -2000 > </audio> CSS  Style sheet are powerful mechanism for adding styles to web documents.  They enforce standards and uniformity throughout a website and provide numerous attributes to create dynamic effects.  With style sheet text and image formatting properties can be predefined in a single list.  The advantage of style sheet includes: The ability to make global changes to all documents from single location.  Style sheet are said to be cascade when they combine to specify a appearance of a page.  The style assignment process is accomplish with the <style> </style> compared tag.  The <style> </style> compared tag are within the <head> tags. <STYLE TYPE= Text/CSS > Tag {attribute: value; attribute: value} </STYLE>  The attribute that can be specified to <STYLE> tags are (1) font attribute (2) color & background attribute (3) text attribute (4) border attribute Divya R Jariwala Page 15

Hypertext Markup Language (5) margin attribute (6) list attribute CSS Background Properties: This css background property allows you to control the background color of an element, set an image as the background. Repeat a background image vertically or horizontally and position an image on a page. Browser Support IE: Internet Explorer F: Firefox N: Netscape W3C: The number in the W3C column in which css recommendation the property is defined. PROPERTY DESCRIPTION VALUE Background A shorthand property for setting all background-color background properties in one declaration. background-image background-repeat background-attachment background-position Background-attachment Sets whether a background image is fixed or scroll scrolls with the rest of the page. fixed Background-color Sets the bgcolor of an element. color-RGB color-hex color-name transparent Background-image Sets images as the background URL none Background-position Sets the starting position of a background top-left image top-center top-right center-left center-center center-right bottom-left bottom center bottom-right X pos Y pos Background-repeat Sets if/how a background image will be repeat repeated. repeat-x repeat-y no-repeat CSS Text Properties: The css text property allows you to control the appearance of text. It is possible to change the color of a text, increase or decrease the space between characters in a text, indent the first line in a text and more. PROPERTY DESCRIPTION VALUE Color Sets the color of a text color Direction Sets the text direction LTR (Left To Right direction) RTL (Right To Left direction) Line-height Sets the distance between line normal number length Divya R Jariwala Page 16

Hypertext Markup Language percentage (%) Increase or decrease the space between normal characters length Text-align Aligns the text in an element left right center justify Text-decoration Adds decoration to text none underline over line line-through blink Text-indent(spacing) Indents the first line of text in a element length percentage (%) Text-shadow Sets the shadow of text none color length Text-transaction Controls the letters in an element none capitalize uppercase lowercase White-space Sets how white space inside an element is normal handled pre Word-spacing Increase or decrease space between words normal length CSS Font Properties: The css font properties allow you to change the font family. PROPERTY DESCRIPTION VALUE Font A shorthand property for setting all of the font-style properties for a font in one declaration. font-variant font-weight font-size/ line-height font-family caption icon menu message-box small-caption status bar Font-family A prioritized list of family names or generic arial family names for an element times new roman calibri, etc Font-style Specifies an aspect value for an element that Normal will preserve the X-height of the first choice italic oblique font Font-weight Define the font size with font style Normal bold bolder light lighter Letter-spacing Divya R Jariwala Page 17

Hypertext Markup Language one of the 9 numeric values (100, 200, 300, , 900) Font-size Defines the absolute size XX X-small small-medium medium large X-large XX-large smaller larger length percentage (%) Font-size-adjust Specifies an aspect value for an element that none will preserve the X-height of the first choice number Font-stretch Expands the current font-family normal wider narrower ultra-condensed extra-condensed semi-condensed expanded extra- expanded ultra- expanded Font-variant Displays text in a small caps font or a normal normal font small-caps Css Border Properties: The css border properties allow you to specify the style and color of an element s border. In HTML, We use tables to create browsers around a text, but with the css border properties. We can create borders with nice effects and it can be applied to any element. PROPERTY DESCRIPTION VALUE Border A shorthand property for setting all of border-width property for the four borders in one border-style declaration border-color Border-bottom A shorthand properties for setting all of the border-bottom-width properties for the bottom border in the border-style declaration border-color Border-bottom-color Sets the color of the bottom border border-color Border-bottom-size Sets the style of the bottom border border-style Border-bottom-width Sets the width of the bottom border thin medium thick length Border-color Sets the color of the four borders, can have color 1 from 1 to four colors Border-left A shorthand property for setting all of the border-left-width properties for the left border in one border-style declaration border-color Border-left-color Sets the color of the left border border-color Border-left-style Sets the style of the left border Border-style Border-left-width Sets the width of the left border thin medium Divya R Jariwala Page 18

Hypertext Markup Language thick length border-right-width border-style border-color border-color border-style border-width none hidden dotted dashed solid double groove ridge inset outset border-top-width border-top-style thin medium thick length thin medium thick length

Border-right

Border-right-color Border-right-style Border-right-width Border-style

A shorthand properly for setting all of properties for the right border in one declaration Sets the color of right border Sets the style of right border Sets the width of right border Sets the style of the four border can have from one to four styles

Border-top

A shorthand property for setting all of the properties for the top border in one declaration

Border-width

A shorthand properly fort setting the width of the four border in one declaration, it can have shown one to four values.

Divya R Jariwala

Page 19