HTML Common Tags 2.1 Introduction Creating web pages using HTML is the simplest method. HTML stands for Hyper Text Markup Language. This is basically a scripting language. HTML is a subset of SGML (Standard General Markup Language). It is used to define the layout and attributes of a World Wide Web document as well as to create links between web pages. There are some other scripting languages available for creating the web pages such as Java script, DHTML, XML, PHP. We will learn some of these scripting languages in the later part of this book. This chapter will help you to create your own web pages with the help of HTML. 2.2 HTML Basics * Aswe know HTML stands for Hypertext Markup Language. Hypertext is simply a piece of text that works as a link. «Markup Language is language of writing layout information within documents. Basically an HTML document is a plain text file. It contains rich text. The rich text means text with tags. Any HTML program can be written in simple Notepad or WordPad text editors. The extension to this program should be either html or htm. This program then can be opened in some web browser and the corresponding web page can be viewed. Let us create our first web page using HTML. Note that the program consists of some strings enclosed within angular brackets. Such strings are called tags. The HTML program should be written within and . The indicates the start of html program and denotes end of html program. Use of slash (/) in the angular bracket indicates end of that particular tag. Any HTML program has two prominent parts: head and body. The head part acts as a header of a file and contains some information like setting the title of web page. In following example we have done the same thing. In the head part of HTML program we have added a title tag which sets the title to our web page as “My webpage” (Just refer the output shown below). (2-1)WEGD [OLTINOrOgIes oe FI. LOMmmMon 1egs HTML program mypage. htm! irhers web: hoa writen in Notepad (Intemet Explorer), This is an output atide>My wevpage bode This is my fest Wet» Paget ‘Thais my Gest Web Paget The body part of HTML program will help us to create a look and feel of the web page. Above given HTML program is the simplest one in which the web page contains the text “This is my first Webs Page”. This is my first Web Pagel! | -S/body>- One more thing, HTML is not a case sensitive language. You can write the program in any case it will be acceptable. Comments in HTML The comment in HTML can be denotes as follows — There should not be a space between angular bracket and exclamation mark, This comment is beginning with . Also note one thing that there should not be any -- inside the comment.Web Technologies 2-3 HTML Common Tags 2.2.1 Text 2.2.1.1 Displaying Header ‘There are header tags which help to display the text as some header. The header tag is denoted by hi, h2 and so on upto h6. Following HTML program along with its output is itself self explanatory. HTML Program This is a first header

This is a second header

This is a third header

This is a forth header

This is a fifth header

This is a sixth header ‘ Output ER ao “Fle Edt View Favortes Tos Heb or OF Hie D4 rere) Ci JDs\HTIMA_Examples\headerDemo.htmt This is a first header This is a second header This is a third header This is a forth header ‘This fs a fifth header This isa tet headeree eee * Se ee ee Following are some commonly used tags for formatting the text- fe] This tag should be put at the end of every This tag causes a single line break. Generally it = at the end of every line. If we want more three blank lines to be inserted after some taxt then we cab put


, We get the line break automatically if the text appearing on the web browser is too long, we don’t want such break then tag can be used for stich text. 2.2.1.2 Setting Font Style We can set the text in boldface or in italics. Similarly a striked through text can be displayed using various tags. Following program illustrates the same, HTML Program This is a bold text
This is in italies
This is strongly emphasized text
This is striked text This will appear at the center
‘emphasized text ‘Tie wil appear at the center (ierbere [abcWed lechnologies a-o ‘ATML Common tags 2.2.4.3 Text Alignment ‘We can align the text at left, right or at the center using a

tag. Here is a HTML program which shows the text aligned left, right and centre. HTML Program ‘

This line is aligned at left

This line is aligned at right

‘This line is aligned at center ‘This line is aligned at left This line is aligned at right ‘We can set the bullets to the text or some text can be numbered out. Following table shows various tags used for this purpose =

and
Beginning and end of the bulleted list. ‘
• and
Displays the bulleted text on separate line. ‘
Displays the solid round bullets. ‘
• First dise
• Second disc
• Third dise
• Forth dise
• and so on
• First square
• Second square
• Third square
• Forth square
• and so on
Web Technologies: 2-7 HTML Common Tags. Forth circle and s0 on. First equare Second square ‘Third square Forth square and s0 on, epee Similarly we can number the text using
tag, Following table shows various styles by which the list can be numbered - : ‘Beginning and end of the numbered list ‘
1. and Displays the numbered text on separate line, <
   Displays the list in following manner 4 2 3.Web Technologies 2-8 HTML Common Tags Here is one illustrative program - HTML program
   1. Ice cream
   2. Mango
   3. Juice
   4. Pop Com
   5. and so on
   ‘ and go on ‘The lists starting ftom 5 Tee cream Mango Iuice Pop Com and £0 on i or Z|Web Technologies aed IML Common tags 2.2.1.4 Setting the Font We can set the font, size and color of the text in the web page. The tag is used for this purpose which is as shown below- HTML Program Versha is sweet and
   Jayashree is very naughtyll
   But Sachin is a serious guy
   And Harshad seems to be studious. Versha is sweet and Jayashree is very naughty!! But Sachin is a serious guy And Harshad seems to be studious. 2.2.2 Colors Most of the web designers prefer to have their web pages white in color. But there are situations where in we want to create colourful web pages. First of all we will learn how to display a text colourful on the web page.Web Technologit 2-10 HTML Common Tags HTML Program Great people are simple and
   Great people nule the world. In the above program we have used font face tag to set the font. Using the attributes color and size we can specify values color and size in double quotes. We can set the background color of the web page using the attribute bgcolor. Following program sets the background color of the web page to red. HTML Program Note that the background color is specified by the hexadecimal value. Following table shows the hex and corresponding decimal values - 1 1 2 2 3a 3 4 4 5 5 6 6 7 TrWed lecnnologies a-11 HIML Common tags 8 8 9 9 40 A " B 12 c 13 D 14 E 15 F In HTML, the colors are specified by beginning with # and the FF denotes 255. In this color code, first two digits specify the amount of red color then next two digits specify the green color and the last two digits specify blue color. FF 00 00 RG B Hence is used to set the background color red. Each pair of digits specifies 0 to 255 color values. Thus hexadecimal color coding helps us to specify (256 * 256 * 256 = 16777216 colors. The color can also be specified by its name as follows — _ Following is a list of colors that can be specified for setting the background colors Aqua__| Nav Black —_| Olive Blue Purple Fuchsia _| Red Gray Silver Green| Teal Lime White Maroon _| YetiowWeb Technologies 2-12 HTML Common Tags 2.2.3 Links There is a common practice to specify the web link in the web page. This can be done by a tag and by specifying the URL for href. The means beginning of the web link and means end of the web link. Following are the steps to be followed to specify web link in the web page. Step1: The beginning of web link can be specified by the tag Here is a sample program which implements the above given idea - HTML Program click here to get a book on engineering Web Technologies ani HIML Common lags Gene Stat ot TP at | [@ reemet apenas eseaes] FiRp See ec fc ad Fe [sea Al 2.2.4 Images We can display images as a link. We have to use the tag for this purpose. Within the double quotes image file should be mentioned. Normally .gif or jpg files are used to display the images on the web browser. For example - HTML program In the above program “flowerl.gif” file is opened. Note that using alt we can display an alternative text on the image.Web Technologies 2-14 ML Common Tags. Font -| Fle Edt View Favorkes Tools Help a4 Job! What 2 beaubful flower isi iz = IPE Weer yl We can leave some specific amount of space around the image in the web browser by means of Hspace and Vspace. HTML Program Output Fle Et View Favorites Tools Hep Ceo bia a| Dem % Address (8) D:\HT¥L_Exernples\enane_dernos.htm weet See hello how are u? How was your day? 2.2.5 Image Map and Hot Spots It is said that @ picture is worth than thousand words!! Very true, To enhance the user friendliness for the web pages, images are inserted on the web pages. These images must be supported by some useful information and for that matter sometimes image maps and hot spots are created in the web pages. In the image map we can click on various parts on the image and get the relevant information. And hot spot is the area of the image being clicked. The important part in image mapping is guessing the co-ordinates of the image parts. But we can guess these co-ordinates by opening that image in some image editor (It could be MS-Paint), Following are three different shapes that are used in to locate hot spots - 1. rect For this shape x1,y1,x2,y2 co-ordinates can be set, where x1,y1 denotes the top-left point and x2,y2 denotes the right-bottom point. point and r1 denotes the radius of the circle.Web Technologic 2-16 HTML Common Tags ‘The syntax for using circle as a hot spot is, 3. polygon For this shape x1,y1,x2,y2,...xn,yn co-ordinates can be set, where x,y denotes the points of polygon. The syntax for using polygon as a hot spot is, This code should be enclosed within the map In the following HTML program we have created one jpeg image file named solar system.jpg in which four popular planets are imaged. If we move the mouse over these planets then the name of that planet will be displayed. Not only this but; if we click on. any planet the page containing information about that planet will be displayed. HTML Program

   Some Popular Planets from Solar system Hot spot for each planet is set. Se See ae SEE ERs Soherenveeen age

   Note: Some Planets from our solar system are displayed here click on any planet and you will get some useful information about them

   Output Holo, = ©- 4) FD) Deen Serene: | ‘waies8 [B} 0: yee Evanoiesinapemaot hen =) Eco i x2 aaa Note: Some Planets from our solar system are displayed here click on any planet and you will get some usefll information ab out them 2 (eitemistiima exenclesdvenstim [TT atvceneiter | 2.3 Forms Form is a typical layout on the web page by which a user can interact with the web page. Typical component of forms are text field, text area, checkboxes, radio buttons and push buttons. HTML allows us to place these form components on the web page and send the desired information to the destination server. Let us learn these components with the help of simple HTML programs. 2.3.1 Text Field Text field is typically required to place one line text. For example if you want to enter some name then it is always preferred to have text field on the form. The text field can be set usingWeb Technologies: 2-18 HTML Common Tags The input type is text and the value of this text field is “ “ that means the blank text field is displayed initially and we can enter the text of our choice into it. There is size parameter which allows us to enter some size of the text field. HTML Program
   [Technical Publications Some other parameters can be, * maxlength that allows us to enter the text of some maximum length. © name indicates name of the text field. + align denotes the alignment of the text in the text field, The alignment can be left, right, bottom and top. 2.3.2 Text Area Text field is a form component which allows us to enter single line text, what if we want to have multiple line text? Then you must use textarea field.‘Web Technologies: “rd Fim Gommon tags: HTML Program ‘
   
   
   
   Jack and Jill wnt up the hill to fetch la pale of vater. ib isuMbiean SoS SEE] Various parameters that can be set for the text area can be, * row denotes total number of rows in the text area. + col specifies total number of columns in the text area. * name denotes the name of the text area which can be utilised for handling that component for some specific purpose.Web Technologies 2-20 HTML Common Tags * wrap can be virtual or physical. If the wrap is virtual then the line breaks get disappeared when the text is actually submitted to the server. But if the wrap is assigned to the physical then the line breaks (if any) appear as itis in the text. 2.3.3 Check Box Itis the simplest component which is used particularly when we want to make some selection from several options. HTML Program ‘
   
   Mango
   Apple
   
   Mango
   Apple
   Grapes
   
   
   Rose
   sbr>
   
   
   

[Enter yourname Send | [ResetWeb Technologies 2-23 HTML Common Tags In above program we have written

Mango Strawberry Banana Apple

Web Technologies 2-24 HTML Common Tags ay jeiocre FT i coroner Al 2.3.7 Sending Form As we know that by specifying the form action and method we can send the data at the desired location. In this section we will see how to send an e-mail using form. For that matter, we will create a form on which the username, subject and message fields are placed. There should be some send button, by clicking which we can send the field data as an e-mail. Before running the following program ensure that some e-mail client like outlook is already configured to your e-mail account. Then only the output of this program will be understood. Here is a HTML program - HTML Program

Sending an e-mail to Mr.Bill Gates

Name:

Massage:
textarea cols="40" rows="10" name="message">
Web Technologies 2-25 HEMEL Common Tags

“ Web Technologies 2-26 HTML Common Tags: In above program we have specified action as And method is specified as post. That means this form can be sent as an e-mail to the e-mail address mentioned by action parameter. On the form we have placed one text field for storing the name, one text area for storing the message, one submit button to send the information as e-mail and one reset button to reset the previous data. 2.4 Frames HTML frames allow us to present documents in multiple views. Using multiple views we can keep certain information visible, and at the same time other views are scrolled or replaced. For example, within the same window, one frame can display a company information, a second frame can be a navigation menu, and a third frame may display selected document that can be scrolled through or replaced by navigating in the second frame. Various frames can be set in one browser window . Fig. 2.1 Frames To set the frames in the browser window we use frame set. For example - will allow us to divide the window into two columns (ie. in two vertical frames), One frame occupying the size of 150 pixels and the other occupies the remaining portion of the window. Here * means any number of pixels. Similarly will divide the window into two rows(ie. in two horizontal frames) the second part of horizontal frame will be of 120 pixels and upper horizontal frame will occupy remaining portion of the window. In every layout frame we can load the desired html page by using frame src. For le eb page bulletedi.html in By this statement we are loading the wi and the frame is named as Left_Vertical. the specific frame Let understand the concept of frames by developing a sample HTML program HTML Program Web Technologies 2-28 HTML Gommon Tags HTML Program Web Technologies: 2-29 HTML Common Tags Look at this output, this is an output without borders to the frames. ‘Sometimes a particular frame may consist of large amount of information. For just going through that specified information we may require to scroll the frame. And in such ‘a case scroll bar must be accompanying the frame. But there are some other situations in ‘which we do not require scroll bars along with the frame. HTML provides the facility of setting or resetting the scrollbars to the frames. Following is a program which illustrates the same - HTML Program Web lecnnologies a-st HIM. Common fags In the above program we are invoking an HTML file test_linkktml. In this test_link.htm! file we are invoking another web page and that is bulleted3,html here is test_link.html file - HTML Program ‘\\html_examples\\bulleted3.html" target="Right_bottom">This is a link Note that in above program we are directing, bulleted3,htm! file to the tag, We are also mentioning the target as Right_bottom, The Right_bottom is the frame name (in the source program FrameDemodhtml ) in which we want the bulleted3.html getting displayed. Here is a sample output Output © First © Second © Third © Forth © andso on ‘This is a link 1 fies fosienl_exenplesfouketec hi [TTY fy computer If we click on “This is.a link” we will get the bulleted3.htm! file displayed in the same frame.2.5 Tables For systematic arrangement of information we often require tabular structure. HTML. allows us to create tables on the web pages. Many web designers are using invisible tables on the web pages. The biggest advantage of using tables on the web pages is that the information gets arranged systematically. To create a table on the web page the table beginning tag is and tag is used for ending the table. Let us understand creation of tables on the web pages with the help of some programming examples - HTML Program ‘

Table Demo

This is Left cell-row 1	This is Right cell -row 1
This is Left cell-row 2	This is Right cell-row 2

(This is Le cell-row 1 [This is Right cell row 1 [Phi is Le& cell-row 2 This is Right cell-row 2. ‘Table DemoWeb rechnologies ans HIML Common tags Program Explanation In above program, the parameter border="5” is set in order to set the table border. You can give any value to set the desired border. The caption to the table is given by the parameter caption, we can set this caption either at the top or at the bottom by using the parameter align. Then using the tag the table row can be set. The tag is used to create columns from left to right. Thus in the above program we are filling up the table values from top to bottom and from left to right. Just refer the output provided along with the program for clear understanding of look and feel of the table. We can set the header to each column of the table by tag. Here is.a simple HTML program that simply adds the header to each column. HTML Program table border="5"> Table Demo with Background color Name Marks A 92 ] B 90
/13128,jpg"> p Setting the background Image Day Lecture Timings 9,00 to 11,00 11,00 to 1.00 2,00 to 4.00 Monday Data Structures Theory of Computation Internet Programming Tuesday Operating System Computer network Computer organisation Wednesday Theory of Computation Computer network Data Structures Thursday Internet Programming Computer organisation Data Structures Friday Operating System Computer network Internet Programming
Time Table Filling up the table row wiseert Him Common tags a Lecture Timings aerate cee ne e 9.00t01100 | 1100te1.00 2.00 to 4.00 [ Monday | Data Structures [Theory of Computation | Intemet Programming | Tuesday [Operating System | Computer network {Computer organisation |Wedaesday [Theory of Computation| Computer network | Data Structures | Tmuesday Internet Programming |Computer organisation | Data Structures || | Friday | Operating System | Computernetwork |Intemet Programming | Time Table a [eens E [Tw conetor Zi 2.6 Web Page Design Web page design is certainly an art or a skill. Having programming/scripting language knowledge is not the only criteria for web page designer. Having very good attitude towards the real world life is required. When we wish to create some web site then we have to design collection of web pages in which the information must be arranged systematically and in orderly manner. Web site is similar to a book. As book consists of several pages having some meaningful sequence, likewise a website has several web pages containing information. Due to rapid growth of internetworking technologies and having heavy demand for huge source of information it is a must to create the web sites that are satisfying the today’s needs. Following are some criteria for building the web page Meaningful Title - Every page must have some meaningful title. As we know the title can be set in the head part of HTML page using