You are on page 1of 22
Advanced | | INTRODUCTION HTML (Hypertext Markup Language) is a standard markup language that is designed to develop web pages. In the previous chapter we have discussed about HTML basics, different HTML tags and how to use these tags to create simple web pages containing only textual contents. HTML allows us to insert and use images in a web page to make it attractive and more meaningful. Italso provides us tags to insert tables in the web documents to present the text on them in a concise manner. One of the most important features of HTML is that we can connect web pages with each other by using the erlinks in it.In this chapter we will learn about inserting images and tables and creating hyperlinks in the HTML documents. UsING IMAGES ON WEB PAGE When we visit web sites we observe that besides text, web pages contain other components such as images, illustrations, charts, maps, etc. Images, therefore,form a very important component of web pages. They not only make the web pages more attractive, but also make the content more meaningful. Ie & v=: ‘Aweb page with images is self-explanatory, ‘A web page without images looks boring looks attractive and inviting Sources of Images For inserting an image into a web page we should first create an image or obtain it from some authentic source and store it in the form ofa file on our computer or in a portable storage medium likea CD,DVD or USB drive. Here are a few important sources from where we can get the images for our web pages. I. Internet: Many web sites offer ‘free’ downloads of images that we can use in our Webpages. For example:google.co.in and flickr.com. 2. ClipArts:Collection of ready made images are available at stores in the form of ClipArts. 3. Scanned Pictures:If we have images — photograpks, drawings, ilustrations, etc. that we need to insert in our web page,all we need to do is simply scan them and they are ready for use, 4. Self Created Images: Photographs and videos tzken from a digital camera or mobile phone can be inserted on a web page.You can also create images ir Image Edin Programs such as Corel Photoshop etc. me Fastrack - 19 Image File Formats A File format defines the structure and type of data stored in a file.An image file can be saved in different file formats such as GIF (Graphical Interchange Format), .JPEG (Joint Photographic Experts Group), .BMP (Bitmap Images), .TIFF (Tagged Image File Format),.PNG (Portable Network Graphics), etc. that help us to compress the data and reduce the size of an image file. We can use any of these image file formats as per our requirements. However, .JPEG (also .jpg) is the most suitable file format for saving images for use on web pages. ADDING IMAGES TO WEB PAGES There are many HTML tags and attributes that enable us to add images and format them for placing on web pages. Also, we can add images to the background and/or the foreground of the web pages. I. To add an image to the background of web page we use the BACKGROUND attribute with the tag. 2. Teaddan image to the foreground we use the SRC attribute with the tag. Let us now learn to add images to web pages and use the different attributes of these tags to create attractive web pages. Adding an Image in the Background So far we have been adding a PlainWhite or Coloured Background ina web page with the Text written on it. ‘To make web pages more effective we do many things, one of which is to add a Pictorial Background toa Web page:The syntax for setting an image as the background in a webpage is given below. Syntax: Steps to set a picture as the background of a web page 1. Write the body tag with the background attribute. ‘Save the file using the Save As command and view Assign tthe name and location of the image file that the page in the web browser. youwant to setas the background ofthe web page. ~The image will be set as background of the web page. Some Moras to Remember coer a prdat ee sasetore facen‘cote sine ne" eolor'ree™ eta funce of prevention {¢ worth sound of creo ise—'a man trou by tht company he bese= contsfecune ests the sincerity of frnde"= Jo>-"Precamtons are useless after the crists"=«/> om HTML code in the Notepad window Page as viewed in the browser window Give the location or path of the picture fle before its name in the HTML code. It to store the picture fle in the same folder as the HTML document. Then you will penne to give the location of the file. You can simply give its name with the background attribute. a yr | ‘Advanced HTML Adding an Image in the Foreground ‘As you know, to set an image in the foreground on a web page we can use the tag with the ‘sre’ attribute. The URL or path of the image is specified with the sre attribute. Ifthe image file is kept in the same folder as the HTML document, we need to give only the name of the file with the sre attribute. Syntax: steps to insert an image on the web page 1, Write the tag with the'src’ attribute. Specify 2. Save the Notepad file using the Save As command the path of the image file with the'src’ attribute. and view the page in the web browser. Lees ur laat ee HTML code in the Notepad window Page as seen in the browser window Changing the Width and Height of the Image We can use the height and width attributes with the tag to inform the browser to reserve that much space for the image (in pixels). The Browser will shrink or expand the image according to the size (height and width) mentioned. Syntax: Steps to set the size of the image to be displayed on the web page |. Write the height, width attributes in the tag -2._ Save the Notepad fle using the Save/As command and give them values in pixels as required. and iew the page in the web browser. heres” ste elena wafertre tests i ster Fev veecuarons ae eas tar che ees" Somme Moral to Remeetier "nent of ptaon 1 woth ed of ct HTML code in the Notepad window Page as seen in the browser window Specify the height and width of the image in pixels with the respective attributes in the tag. Specify the height and width such thatt does not distort the image. @ Fastrack - 10 Using the Alt Attribute The ‘alt’ attribute can be used to display an alternative text string in case the browser does not find an image to display or the user has disabled the display of an image. The syntax of using this attribute within the tagisas follows: the image is currently
unavailable for display”> in the code as shown below Save the notepad fle using the Save As command.

   

 

SArTCe> use of hspace artribuce to space cut images</TITLE> </HEAD>

Sing, sree hapay Teli deg india 4s 2 land of rich cutcure and festivals are an, incegral part ngs tan Gus Soe SEEING oian Ces iza gre eeeces oT aSe Fecal ot soy and happiness. the Hindu Festival of Jesters’ celebrates in mic Spring every year Alt attribute of tag ee ee Holi- Te festival of Colours India ind of rich estire end |G) i ea Festal aren itgrelpor of very nr if HOLE soe of tt Sndin fv are ere ot cedlebration ond joy. HOLE weane | fennel of citfre elu The fetal of jy ond apie, The Hinds frtivl ofelr eaabrate ia mi fing every yer 2. Now go to the place where the image file is located. Cut the image file from this location and paste it in another folder. 3. Open the HTML file saved in the step I in your web browser. The image will not be displayed this time because you have removed it from the location specified with the src attribute in step 2.Instead the text specified with the alt tag willbe displayed. TIP If you do not remove the picture from the location specified with the src attribute, the image will be displayed despite the use of the alt attribute. The alternate text | iisimtw shane ws becomes visible when the user or you) hovers the mouse | s=7m=sit souvent .). pointer over the image fora little while. ‘stony None ewe —_ (eee a ‘Advanced HTML 1 CREATING TABLES IN A Wes Pace id . = eran ree ate a ‘Organize data in the form of horizontal rows and vertical columns.The use eae oe a bulky data making it easy to understand for visitors, When creating web ae ee sof create cena cata in the form of tables. In fact tables have become the most commonly used me eM feb page layouts as they give us additional control over layouts. sea poner oa ee Each table is made up of a fixed number of rows and columns. The = oN rane ere e interse tion of a row and a column is called a cell: We enter data in the cells, (0 reader row which specifies what items should come in the columns below. ‘A Column [A header cl ‘ARow-b Monument’s Name Image Features and Location - Lower floors are made of red sand Adata—> Qutab Minar stone with beautiful carvings. Located in cell the Southern part of NCT Delhi. ; Located in New Delhi. Made up of pink India Gate sand stone in memory of the Indian martyrs of WorldWar-l & Il. In HTML, tables are created by using the tag. The
tag is a container tag, therefore you need to close it by using a closing tag
. Everything within a table is enclosed between these two "tags" which are both required. Syntax: ....
Theattributes of the tag are listed in the table as given below: Attribute Use Example ‘ Species the horizontal position of the table within te web page |
align window-The value of this attribute may be left,centeror right. width Controls the width of the entire table.
‘Adds space between the cells. he spacing between cells is given |
cellspacing | in pixels. cellpadding | Adds space around cell contents.
bottom in the cells. Gives border toa able: The thickness ofthe border speciiedin |
border | pixels. valign ‘Adds colour to the border ofa row or acell. ground ofa row or cell. Q@ bordercolor bgcolor ‘Adds colour to the bacl Fastrack - 10 The , tag and creates a header cell of the table. | tag and needs to be closed with the tag. It encloses the data that is there in a header cell. The syntax of using the 3. The tag and creates a data cell of the table. It encloses the data thatis to appear in a data cell.The syntax of using the tag is as follows: also a container Syntax: Shr Steps to create a table on a web page ‘Open a Notepad file. Write the code as shown 2. Save the file using the Save As command and view below to createa table. the page in the web browser. Gittbcreating 4 eblecrrm einen Using le tale, t,t ao Ud tgs to crc tlle Sfont facee’wisteal” sizee6 colora*rea’s ‘heist’ he table, tr th and 4 fags to create a fepsctable Boraer= cersethonanec/tho The second row of the above table was coded like this: in row | and row 3. columns. |t was coded as: The third row of the above table was coded like this: The use of the colspan = 2 attribute with the
, and Tags ‘The tag itself is of no use unless the , tag creates a new row in the table. The is a container tag and needs to be closed with the tag.Alll the tags (... tags.The syntax of using the tag within the table tag is as follows:
tags are used to create other elements of the table. |. The
and ) that are used to create the data and header cells are enclosed within the
2. The
tag is used within the
tag within the < tr> tags is as follows: ‘Syntax:
Header cell data for the Istcolumn Header cell data for the 2nd column tag is also used within the
tag within the
Ist data cell value 2nd data cell value Sports /canec/the Jaenarkse/thos/ts Jecractssachin Tendulkar/tdoctéscrickete/tdoctdoS1. centuries fin'Tese matches and 49" {n Oofse/tapctascreat cricketerc/td> etrsctasSusht sanarc/edoctipurestiingc/tdsetdosi Tver medal at She tondon olympics and sronze nesal at the e}ing olympiese/tanctarcrent wrestlere/ta> Use of , , . The code &enbsp; is an HTML special character peer space. Use &enbsp; in place of data whenthe cell isto be empty. a “advanced HTML I The Attributes of ip)
, tags to create a table Table as seen in the web browser Table data cells do not have to contain data. You can create 4 &enbsp; and Tags The and tags have two main attributes — rowspan and colspan. The following table lists what these attributes do and how to use them in the and tags. ‘Attribute Use Example This attribute allows us to extend a row | rowspan vertically by a given number of cells (specified | will extend the current row down to with it.) include the next three cells. This attribute allows us to extend a column | will extend the current column rightwards horizontally by a given number of cells (specified with i). toinclude the next three cells. colspan Understanding ROWSPAN and COLSPAN Attributes Let us now understand in detail how the rowspan and colspan attributes work. Rowspan The ROWSPAN attribute of the TABLE tag is used to stretch a column vertically across two or more rows of a table when coding HTML for Web pages. The value of this attribute indicates the number of rows the column will stretch across. If ROWSPAN="3" is used, it will stretch a column vertically across three rows. Steps to use Rowspan to stretch a column vertically 1. Openanew notepad file and write the following code init cer [fed rowspan=3>Fruits I like the MOST td >Mango Guavac/td> Ger) Watermelon
Cherries /td> Blackberries
HTML code in Notepad Save the file with .html extension and view it in the web browser. foe aon Fruits I like the MOST [Banana |Watermelon [Cherries Blackberries rowspan=3 attribute in the
tag extends the first row downwards by 3 cells. ‘Output in a Web Browser TIP ‘The use of the “rowspan=3” attribute with the tag in the first row causes the first column to expand vertically to expand downward and cover the adjoining two cells to make one big data Qa cell. Fastrack - 19 hen we want tO have a particular table e colspan attribute within the ed wi tags vis used wher Colspan yntax for Colspan is an attribute of the cell span or cross over more t or tagisas follows: Syntax: and han one column. The $) ed colspan=no.of olumns? the colspan attribute: The following example code shows the use of ib (Use of colspan attribute in the code Effect of the use of colspan attribute You can see examples of the COLSPAN attribute in the table above, Inrow I,each cell isa heading cell (the textis centered) and it spans (Wo
LEFT RIGHT
INOUTIN OUT
This cell spans 4 columns
tags in the first row of the table causes each header cell to expand rightwards by two columns ie,, the width of these cells will be twice the width of any normal cell of the table. Similarly, the use of colspan=4 attribute with the last tag causes the last column to extend rightwards by 4 cells. Understanding Cellpadding and Cellspacing in a Table Cellpadding refers to the inner free space that each cell ofa table has as its "padded" border. It is a cell border of "white space" inside the individual cell eprent cells ofa table. Itis the white space padding around the cell contents Nine . Name Celispacing, on the other hand, refers to the space left between each cell : wall ina table. Ifyou want no spaces atall, you must set CELLSPACING="0", Sachin Ten otherwise the default setting is CELLSPACING="I", even if you do not ‘even mention the CELLSPACING. you do not cellpadding _cellspacing Note: The space between the cells across the rows will pes The spare tes on eh / attribute in combination with aWIDTH setting for each cell i eo Hed if you use the cellspacng row. & ‘Advanced HTML 1 UNDERSTANDING HYPERLINKS Hyperlinks or Anchors are the foundation of web pages of the different websites together into surf from page to page. Hyperlinks also link the Textand Sound, ete. The major strength of HTM pagels or to sectionls of web pagels. the World Wide Web or the WWW. They ‘link’ the a global network of information that allows users to various elements within a web page such as Graphics, Lis its ability to link text and/or imagels to other web A Hyperlink is a text string , Or an in ona wet lic isi pghersectonch dene image b page which when clicked on, takes visitors to ‘web page or toa different linked web page. Hyperlinks work as references to other Web the WWW is defeated.ThenWeb information on the topic/s. Pages or Web sites. Without Hyperlinks, the purpose of Pages will simply be like simple text and will leave us in want of more Types of Hyperlinks Hyperlinks can be of different types depending upon the type of navigation they provide (Internal or External navigation) and the web page element used as the hyperlink (Image, Text or E-mail ID). Some common types of links that we comeacross on the web pages are as follows: |, Internal Links:Internal links are the links between different elements within the same web site. 2. Local Links:Local links are the links with otherWeb pages on the sameWeb server, _ 3. External Links:These are the links to other web pages anywhere on the WWW or to an Email box. An internal link connects two A local link connects two web pages An External link connects web pages points on the same web page of a same web site of diferent web sites THE ANCHOR TAG The tag,also known as the anchor tag, is used for creating hyperlinks in HTML.We can use the tag to create a link that can direct a user to any resource present on the WWW including, textual information, images, music files, video files and video clips,animation,etc, ithas an ON tagas and an OFF tagas . Ithas two important The tag is a container tag, attributes: |. The name attribute, which i ‘ n 2. The href attribute, which is used to create a reference point or hyperlink. Letus learn to create different kinds of hyperlinks using the anchor tag. & is used to create an anchor point in the HTML document. oS Fastradk 1g CREATING INTERNAL LINKS These links when clicked arernal Links are links within aWeb page (or html document) These links UPON, teag £0 some other location on the sameWeb page. Internal links help in the navigation of large documents a We should first identify the target section of the web page and create an anchor point at Using the name attribute of the tag. Then we should create a reference point or a hyperlink to the named section Using the hey attribute of the tagat an appropriate location on the web page. Syntax for using tag, name and href attributes for creating an internal link is as follows: Syntax: «——— Marks the section o part to be linked pa Chi int+—Creates the reference pein Click to go to the named point he shove mae Let us perform the following activity and learn how to create an internal link. ACTIVITY Creating the internal hyperlink |. Create a new Notepad file. Write in it the code as shown below to create a web page with a lot of content ‘Save the web page using the Saves option. Giveit any name as you want but do not forget to add the html extension to the filename, Fe tom Fie rect fomeon gutput devica wed withthe cnputer Stowe the output pratuced by the onputer jn of antes ae, OE SES and Star Ba haanta Esch, eubtaaction decinaldtovge abd ate esi i taantl ig Scent ISD oes BISta” Bee‘ cadte T2E"To0d by igs ood sander nd tha code saterptted nither isotsh SoaarerSePS vaatsl asst gee Feed Jralgns,Pithie ot ATETGelt Labs cx, 1872 tor eystene Sas SS SEEDY TE OSEE MBL o.ricr, the we of paratien proceaciay to | [icenterscang sre*"cpu spa" haight-200 widthe4S0sc/center> HTML code to create a web page ‘Advanced HTML I 2. Type on the top of the H’ Porncesfoloney othe HTML document jus below the ta) the code to create the fist anchor 3. Create a link referring to the abo. 'e above created anchor point atthe bottom of ument By typin the following code,just before the tagas follows: soho ofa TE Gece PE Click to go to the top of the page Eile of eters af eats TS, NEY Ss ene Sexson goers 2 0 elon 4. Save the HTML document using the Save As command. View it in the web browser. 5, Testthe link by going to the bottom of the web page and clicking on the link. fe will take you at the top of the document where you have created the anchor point,.e..point!. ‘ated href text should use the same case for all letters-as dd the name is actually ‘supercomputer’, the ‘The name text is case sensitive and the associ does the name. If the href called for ‘Super Computer’ an link will not work. Fastack 1g Lu A ae rWO WEB PAGES ON THE SAME WEBSITE camel links lnk that inks two web pages residing on the same web server-Since web pages oy Wen Neb site almost always lie on the same web serveriinks that connect the two web pages ofa ne Te Stearealwayslocalin nature. ¢ tus learn how to createa local link for linking wo HTML documents belonging to the same web eg CL A@TIVETY Creating local links using tag ‘Create the following two HTML documents in Notepad. first hem! next htm! 2. Open the document first.html Insert the anchor tg init as given below to link it to the document | ~ next.hemi kept in the same folder. Ifthe documents kept in another folder specify the complete path wih | the hrefattribute).. | Click here to view more amazing facts about human body Save the document first.html by the same name using the Save As command. View in the web browser. When the page is displayed click on the link to test it. When you click at the link it should open the page nexthtml in the browser window. Now, open the file next.heml in Notepad and create in it a link using the tag to link it to the | first.html. Save the page, view it in | thebrowserandtesthe nk. eS [eumnenicsin Beem ‘In our ongoing quest for wonderful facts about all manner of things, We hhave put together this lista great ist of amazing human facts. These ae the fifteen most wonderful things about our bodies that, hopefully, are news fo ‘most of our reades! So, onwards 1. Thestonachs digestive aie are strong ensgh to ase zn Fett ts, the celine stamech Ing ere so ql that the side dase | 2. The lung cant over 300,00 milion coplaris in loo vessel) tye lid endo ed, they weld stretch 2400 (1500 miles. 4 Aman tescles maruectre 10 ln nen sperm celle ath doy = ragh at could repeplte the entire pent nol 6 month Output of first html document ‘Advanced HTML 1 LINKING WEB PAGES OF DIFFERENT Wes SITES We know that the web pages of a web site are stored on a same web server: However itis possible that wo different web sites (and the web pages that constitute these web sites) may be stored on different web servers.The links between web pages of two different web sites are said to be external when they are stored on different web servers. External inks requires the Full URL or Absolute path-names of the web pages to which we want to link them (e.g, http:/www.nature.com). Let us learn how to create different types of External links, The syntax of using the tag for creatingaalink to a web page on a different web site is as follows: Syntax: Linking text Steps to create Hyperlinks to web pages belonging to different websites You can include hyperlinks to those web pages that belong toa different web site by using the steps as given below: 1, Open anew Notepad file and type in the code as shown below. Specify the complete URL of the web page to which you want to link to, with the href attribute as followed by the linking text Click to read some Nice Stories.Put the closing tagat theend, I en — E 2. Save the HTML document by an appropriate rEaD > gon’ cE) cas] tan te enestel intl en/eleee corel name such as externallink.html by using the Save efeg etterent web sitecrriiit. Abi ‘Ascommand. [font face="Wistral” sizes color="red" Jchistase pase shove vou an example code to create an crtennal Posed? 3. View the HTML document created above in gecter cing sre**happy. jpg> the web browser. The linking text will be font tae cae Sate BE os a displayed as shown here. Click the link. It will cst a eaten ee =) open the linked web page,ie, wwrw>itara.com, aoe inthe browser window. cara Te ag ses ya an tpl cal te cate a con nk Click this link is actually “http://wwwpitara.com/index.htm”. Index.htmis by Jpsite and the browser automatically searches for it and loadsit. @ ee oe 3 “The associated web page www.pitara.com! will open Here, “http://wwwpitara.com/” default the Home page of every wel >. Fastrack 1p Using the Target Attribute i After linking two web pages, when we click on the link on a web page to open another linked web pag, it by default, opens in the same tab or window. To overcome this problem, we can use the attribute with the Anchor tag (). Hence, the Target attribute of tag allows us to open the linkeg ‘web page in anew tab or window of the browser. The syntax for using the targetattribute sas follow, blank”>Linking text Syntax: Text for email iink Syntax: Rs ‘Advanced HTML I Steps to create mailto link I ‘Open a Notepad file. Write the cod totinfo@navdeepublications.com shown belowWrite the i (Write the tag to create an email linkas To send us | message click here Code to create mailto link Click the link The Email program opens ‘The email link will appear in the browser wind. ma ser window as shown ing this will open the: il program of user's computer oletyoutypesn sen nas shown hee. Clicking his wllopen the def emal program of Summing Up. uu can add images 7 oa Iaaige ington ena as: Background Image, using the Tag and ‘Todisplay an image in the foreground ona Webpage, the IMG tag with SRC attribute is used. ‘To set an image as the background in a webpage, the b Noe ee What are the and tags used for? a. Audio-voiced text b. Adding links tothe web page © Aligningtext d. Adding images toa page Which format usually worksbest for photos? a. jpg Ly a Cc. gif d. .png What tag is used to add rows to tables? a b. © <> 4, What will increasing the cellpadding value do? a. Increase the distance between the cell and the content. b. Increase the space between cells. ©. Increase the sofiness of yoursite. d. Decrease the size of the cell. Which has higher priority, cell settings or table settings? a. Table settings b. Cellsettings ©. Neither d. Both havethe same priority The Altattribute of the ‘ tagis used for: a. Displaying the images together, b. Displaying no images, c. Displaying an image within a table. d. Displaying an alternate text in case the image is not found. colspan=n can be acided to only which tag? a.
b
c. 4. Allofthese What is the correct HTML command for creatinga hyperlink? a. Saname “hup-//worw-qualitypointtech.com">Qualitypoint Technologies b Qualitypoint Technologiese/a> c. http://www.qualitypointtech.com a. Qualitypoint Technologies /a> Which ofthe following isnotan attribute ofthe tag? a. align b href ©. border 4. width ee > ‘Advanced HT : 11, The email inks are also known as: a, mailtolinks b. internal inks external links 4d. local inks 12. Which attribute is used to create an anchor point inthe HTML document? a. name b. href c, mailto d, Noneof these 13, Whyshould youadd alternative textto your images? a. Incasethe user wishes to loada different picture. ». Sotheusercan save the image usingthe textasa name c, Sotheuser can getan idea of what the image isbeforeit loads, 4, None of these. 14. Whatisthe full form of jpeg? a. Jointphotocopy eraser group. b. _Jointphotographic experts group. c. Joint pathnames export group. d. Noneof these 15. Which tagisused to create the header cells ina table? a.
b ‘Answers 1)b 2)b 3)a_ 4)c_—s S)a_—s 7d) PSE SFo Fee Ma 12)a13)c 4b AS) BY souven QUESTIONS ‘What does IMG and SRC mean? . IMGis the image tag and SRC isits attribute to specify the name of the source image file. How can text be displayed in place of an image for users whose browsers do not support images? ‘The ALT attribute should be used with the text value to display text in place of the image for users whose browsers do not support images. ‘Name the tag that helps youto create hyperlinks. . tag Write the HTML code to set the image “Pen.jpg” stored in the “My Pictures” folderin C:\as the background of your web page. ‘What are the different file formats in which image files can be saved? There are many file formats such as .GIF (Graphical Interchange Format), JPEG (Joint Photographic Experts Group), .BMP (Bitmap images), .TIFF (Tagged Image File Format), .PNG (Portable Network Graphics), etc. in which image files can be saved. @ Sd tracks ig Q.6. How isthe NAME attribute different from the HREF attribute used with oe aaa th Ans. The NAME attribute is used to specify the word which will serve a 'e HRER attribute directs the Browser to that word in the Webpage. Q.7. Write the HTML code tocreate the adjacent table: [Column | Column I Ans,
c. d.
Customer ID| Customer Name
Column I Column II CustomerID Customer Name
Q.8. State True and False: No value is specified with the ALT attribute of the tag. ‘The ROWSPAN attribute with the tag is used to merge more than one cell py. b wis ¢, Align and Valign are the attributes used with the
tag to set the alignment of the data ina table. 4. BORDER is an attribute of the tag. €. The Target attribute with the tag is used to open a link in a new window. Ans. a. False b. True c. True d. False e. True Q.9. Which of the following is an attribute of the tag? a. SRC b. LINK d. BOLD c. CELLPADDING Ans. CELLPADDING Q.10. Whatis the correct syntaxin HTML for creating alinkona webpage? a, b. c. 4. Ans, Q.11. Choose the correct HTML code to create an email link? a, b. c. xx@yy.com d. Ans. oe (4) EXERCISE TIME ~ 1 Multiple Choice Questions (MCQs): 1. Theuse of add what to your tables? a. columns b. rows 6 c. steps d. None of these Which attribute do you use to change the size of an image in HTML? liens a. pi b. heightand width c. biggerand smaller d. Allof these 3. Which tag will you use to create hyperlinks on a web page? a. b. Sanco 4. 4, Toaddrowsto yourtables which tagdo you use? a, lors and cies c. and d. None of these 5. Choose the correct tag to left-align the content inside a table cell. a. b. c. Stdalign="Ief"> 4. 6. Howdo youadd a link which will allow the visitor to send an email from your page? a. Addan image of an envelope b. Add c. Add d, None of these 7. Which property tells how many rowsa cell should span? a. colspan=n b. Bothrowspan=nand colspan=n c. rowspan= d. Noneof these 8, Which attribute of the tag will you use to display an alternate text in case the user's browser does not support the image? a. height b. space c. alt d. width 9. Which of these tagsareall
and and
tags? a. b.
c. d,
10. Which of the following is used to give non-breaking spaces? a. alt b href c.   d. $nbsp Ss Fastrack 1g TI Objective Type Questions: 1. Fillinthe blanks. % The__command will se the image COMPUTER-IPG to cover the backgroung of the webpage. b The___ragisused to display animage ina Webpage. © will make the text wrap to the side of the image d. click here to enclosed text, a hyperlink to www.yahoo.com. go to the next page will make tig To display a message when a user points to an image, the attribute is used The and. attributes are used to define the size of an image ‘The pairof tagsusedformakingahyperlinkarethe andthe The_________will display “My Search Engine” as the hypertext ant when clicked upon, will open the www.google.com website. The. attribute of the
tagis used to specify the alignment of thetable on the web page. The____ hyperlinks are used to create e-mail inks. k. The attribute of the
tag specifies the span of acolumn. Pom mp 2. Write “T’ for True and ‘F’ forFalsein the [_]. a. Youcannot use images s the background of the webpage. oO b. You can use the ALT attribute to display the message when you point to an image used asa hyperlink. will place the image named mad,jpg at the place where the tag has been mentioned. d. will import the image toon .jpg from the site coolsig.com. Internal links are the links with other websites on the same Web server. f Thetextinthe NAME and the HREF attributes is case insensitive. oO g. andarecalled Anchor tags. oO h. Using Internal linking a user can jump from one point to another, within the same oO Webpage. @ ‘Advanced HTML I I Short answertype questions: ty 2, 3 4. 5, 6. 15. 16. i, 20. 21 22. 23. 24, Name some different types of image formats available for storing the images in files. Whatis the use of the Background attribute in the tag? What will do? ‘What does the WIDTH attribute specify when used with the IMG tag? ‘What does the HEIGHT attribute specify when used withthe IMG tag? Write down the HTML code to make MY PAGE, a hyperlink, which when clicked will open the webpage www.mypage. htm. ‘Whatis the use of the SRCattribute? What will the tag ? . What is the difference between the BGCOLOR and the BACKGROUND attributes mentioned with the tag? Write theuse of the ALT attribute with the tag. Which attribute allows to linkan E-mail address to a Webpage? ‘What are Hyperlinks? What is theiruse? How many types of Webpage elements can be used to serve as Hyperlinks? Give examples of creating hyperlinks usingeach type of element. ‘Whatis the use of the Named Anchors? If the COLSPAN attribute ina tag has a value 3, then what type of data cell will be created inthe table? If the ROWSPAN attribute in a tag has a value 2, then what type of data cell will be created in the table? Which attribute of the tagis used to open a linkin anew window? Whatis the use of the anchor tags? Whatis the use of the HREF attribute? What does the NAME attribute specify? ‘Whatare Internal links? Howare they different from External links? ‘Whatis the difference between the following: a, CELLPADDING and CELLSPACING b. COLSPAN and ROWSPANattributes @ Fasteack-ag 25. Write the HTML coding to create the followingtable ina web PaBe: Workshop on Flash animation (10— 10:30 a.m.) a Workshop on Photoshop (12 - 12:30 pm.) @navdeepublicatons.com through the 26. Write the HTML code to provide a link to the Email-ID info hypertext “mail tous”. , 27. Write the HTML tagsto add an image “CRVOO1.JPG" inatable cell, sized to 20 pixels height ang 30pixels width with alternate text “computer monitor” the hy “ 28. Write the HTML tag to create an external link to www.techtarget.com through the hypertext “ger details of laser printer”. IV Long answer type questions: 1. Explain how an image can be added in the Foreground or the Background of a Webpage. Give the syntax nd examples of the same. 2. Howcan you change the height and width of animage? What is the use of the tag? Write its attributes. 3. 4. Write down the HTML codeto create the following table: Name Hindi__| English | Maths Aman 60 79 38 Khushboo 68 2 52. Sony 52 86 64 Timsee 84 4 él Whatis the use of the Rowspan and the Colspanattributes? Write the HTML code to demonstrate the use of href and name the attributes of the tag, Describe how you can use an image asa hyperlink ina Webpage? Describe the mailto links with an example. PrN AH vias EXERCISES Exercise 1: Creating a website on travel and tourism. Suppose you are Rajesh studying in class X. Your class teacher has asked rep. i eee os + ‘ oe site highlighting some important tourist destinations of India. How will you create te Bs are a HTML? Note: To create a website you need to create web pages of the website Separately and then link them with each other using the linking tags.

You might also like