Or a PUG aku LETTE TT) ectives: Using Graphics Placing Image on a web page with tag tag attributes Align, Height, Width, Border Attributes with simg> tag Inserting Video using tag Unking Web Pages Understanding Uniform Resource Locator Anchor Tag Internal Linking Sending the Link Back Linking toa specific part within a page E-MailLinks USING IMAGES & LINKING WEB PAGES INTRODUCTION What would a Web page look like without graphics? Really boring! In the early days the Web was just like plain pages with text only. In those days the Web's main purpose was to exchange information. The real change came when designers added graphics. By adding graphics, we can enhance the look of our web pages. These days images and other multimedia tools are an essential part of the Links are the power behind the World Wide Web. Through links, millions of pages, filled with information and knowledge are only a click away. By using hyperlink all the web pages of the web site can be linked to each other or with the home page. Through hyperlinks you can link other types of files like sound, video etc. These links allow us to connect documents together in an innovative way.ind space h, been memory a gs, . have always d har , 7.1 Using GRAPHICS sa web page, because ae now designers have worked hard to heey, onto a wel the server. web pages from hewed. the artwork that appears ont tye! Itis not so easy to piace imeess f downloading Y Gown the speed of cow asedthec smalland havelsoincreased the! sinerory size witha high level of picture quay, files smal pedtokeep Yt, ypesof fils formats have been develo ‘Threet ns 2fast-loading graphic , sin ‘ ‘ ide a way to displa : a Nd ee at which was created by CompuServe to a eee Lee ciara using, that means gifis a cross-plat orm format ater he Say mat weroer ais the image background becomes transparent. ‘ format wes created so that aaa with colored web page having backgrounds of different styles. -ipg0r jpeg files| joint photographic experts group): = inj in size as ‘Ths format was crginally created to store photographs. Files formatted in jpg are larger in This format wes originally creat OB iB je D compared togif format graphics and they donot have ‘transparent backgrounds. “Prefiles (Portable Network Graphics): PNG was created as an proved, non-patented replacement for Graphics Interchange Format (GIF). nal PNG is an excellent fle type for internet Sraphics, as it supports transparency in browsers with an By slegance that GIF doesnot possess, Each image takes additional time to dowmload from a required folder and slows down the initial display of a document; wile using images one should be careful in sel document, s 2 a img src= “file name" alte aqcattbute with TAG ——e spsattibute actes the imageand instructs the browser from wl ilocatedinthe same ied - Your HTML document file, then you do not need to specify the path ofthe image. But if your image slocatedinsome other location/folderthen youmust specify the fullpath ofthe image file. example: oR Inserting animage, sxamplet -ctitle> COMPUTER (FE

LEARNING HTML The following points should keptin mind while placingimages on the web page. s tag. The name of the image file with extensionis important. «Itisalways recommended that your image file should be in the same directory where your html document is saved. Otherwise the browser will not show your image, across markappears in a box, ifitis notin the parent folder. 7.3 AUGNING IMAGES ‘AUGN ATTRIBUTE WITH TAG ——* When you place a graphic on a page, it will always appear to the left (that's the default or the standard for the browser). By adding the align attribute to the image tag you can set the position of the image. The align attribute takes one of the following Values: Top: This value with align attribute positions the image above the text. Middle: This value aligns the image tothe middlel.e, center with the text aroundit. Bottom: This value aligns the bottom of the image tothe same horizontal plane as the baseline of the text. LeftandRight: The left and right alignment values with align attribute places the Image to the left and right of the browser window. Example: Using Right value to align animage. shtm> shead> LEARNING HTML

m= Oe, LEARNING HTML WHAT 1S HrrM12 ceVor="bTue">wnAT 15 |

element tolet the browser know just how tall and wide an images (t, default unit is pixels or px). Example: You can also adjust the image size from the image processing software, such as Adobe Photoshop or GIMP. Some browse like Netscape Navigator will also display the dimensions of an image file in the title bar if the image is viewed by itself witha an enclosing html document. Some browsers use the height and width attributes to stretch or shrinkan image to it into the allotted space when theimag doesnot exactly match the attribute numbers, Example: Resizing image ‘bodyeht atign="center" videos/h1>
cevideo width source src= “html tutor.mp4" t a | | | —— his is a HTML Tutorial "500" hei 7 r height ="300" controls» ‘This fs HTML Tutorial Video 716 LINKING WEB PAGES tually makes a website fi i mn one seanctonl i the ne of hyperlinks, This can be helpful to navigate through your website and pe ple have often referred " y many websites inkto each otherinanintrcateand complexweb, aaa without linking, your website will probably be ju ingstati | eran ey ore a ly be just a boring static one-page HTML website. You’ ‘will probably have more than sere ee ee st likely you want to make a homepage and then create links to all the other pages of your websi my eg re allthe web pages canbe inked to each other. Through hyperinks you can ink other types offiles jkesound, video ete. These links allow usto connect the documents together inan innovative way. UntrorM RESOURCE LOCATOR ———# hasan Beforewe get into how tocreatea hyperlinkin html, we have to understand some basic fundamentals. Every Web adéressie. Uniform Resource Locator or URL. Consider a URLas an address ike your residence address. Let’sexamine an example of URL: = hitp:// (hypertext transfer protocol): It is @ code or what is technically called a protocol that helps one computer to communicate with another computer. The Internet also has another protocol called ftp file transfer protocol). 7.7 Types OF HYPERUNKS IN HTML http://www.delhischool.com/homework.htm! wwwedelhischool.com: It is the homework.html:[tis the file or web domain name or a place where the _pageyouareseekingor searching. Web site is hosted. It lets the computer know where the file is located onthe World Wide Web. means connecting your own web pages and files in your web site your web site, you don't have to | include the full URL (web INTERNAL LINK: Linking to pages within 1k. While linking pages within your site, together this can be called as internal lin ageaddress) in your link, since the! browser's already reading files from your directory. ved the full URL (Uniform Resource Links that connectto other web sites. In this case, Wene bar in your browser and pasting it EXTERNAL LINK: External links are headdress youneed from the address Locator) which can be retrieved by imply copying intoyour code. pes of external links, ESE There aretwothingsyourequlretocreste [There are twosub-tvi tL rhenameotafleortheURLyouvantOHNK: ‘Outbound Links | | nkorhotspot the Neahed texto gP When a site links sie cickedontogetownereYOuNant toa third-party site foal. cable ‘ANCHOR TAG ———* h another document. With this, one can ray ee Inks bet, link with anot tion, tag requires thy Hea ses the (anchor tg t0 crea ie creating links to other pages OF Beta poe thes pages. But tag by itself does not do anyt re Wi Tibteyper tex referee with > at Internet adéress or file name of each pase," TT container tagbecause't needs closing ag, ration of the! hyperlink, it specifies the destination oft — ‘url">Link text Syntax: Click to Start it i ile name. ‘Tolink fles which are on different folders, ust include the directory name with the file na Click here Here answer.htm isa web page that is locatedin the folder called ‘brainwave’. Example: Linking school home page(homepage.htm)with another page(aboutschool.htm). homepage.htm # body DELHI INTERNATIONAL SCHOOL

DELHI INTERNATIONAL SCHOOL

Click to Know about school ences aboutschool.htm (This is where homepage. htmis linked) — chead> ; 2 @ | [omen im 0 OER | DELHI DEL HOOL SCHOOL INTERNATIONAL ‘HI INTERNATIONAL SCH A8OUT DIS ABOUT Dis co-ed school, situated in south bel i esined with ine fn with Vatest facitities.

Delhi International school is a icin70 SEND THELINK BACK? ——. Return to the Home pagec/a> Here the) double dots indicates to gobackto the previous folder, Fr sc ANO VUNK ATTRIBUTES — pink isusedto set the color forthe active links(tinks that a use i e currently being clicked on) ina web page and viink atributeis asegtsettne color forthe visited linkin; web page. Both these are the attributes of the tag. —_— gsample: ehtm> chead> < nie “center> DELHE INTERNATIONAL SCHOOL

‘TarGer ATTRIBUTE ——* if ‘The target attributes used with the anchor vo 7 sped ig the target attribute, clicking the hyperlink will ¢ ee attribute will allow the linked page to be displaye name of a frame orone of the predetermined values. i hen a hyperlinkis clicked, iy, the next page will open w! : . ee of the link to open in the same window. Using the 4 'targe ar frame. The value of the target can vee ‘TABLE: Value of the Target Attribute blank linked document will be displayed in new window. self linked document will be displayed in current window. parent linked document will be displayed in current frameset. top linked document will be displayed in top of main browser window, Example: Click for Google 7.8 IMAGES AS HYPERLINKS Just like using text as a hyperlink, we can also use an image as a hyperlink (hots; have to include the image tag within the ar inchortag. Syntax: text which indicates that it is a ick- able hyperlink. imple: Using Images as Hyperlinks. ip pSlign= “center"suzstortc moNume INDIA Cy

---

SrengTA MAHAL Clicke/ae SHenpRUMAYUN TOMB Click

RED ForT : @_ href="RFort, hem" SC="rF. jpg" width= “100” height: 200"Sc1 eke stb guTua mtv paron WITHINA Pace ——= natiesitis very useful tobe able to link fr om one point ona Page to scroll around to find wh: Fe wneuse at he/sheis lookingforTocreateon terrains seare aa ea ene re ist 12818 used to specify the nam ‘nal link within a oy is used to name the ‘Syntax: TYPES OF LISTS IN HTML

aaa aD chr size= "4" color = "blue" width=50%> color = "blue" width= ORDERED LIST Click “font color = "red" size= "6"> NURORDERED LIST Cisk

3. DEFINITION LISTChs§, CTickUNORDERED LIST Click
img src="image.png"> _

st : It tains text ina Vink1">ORDERED LT’

UNORDERED Last : Represents data in a bulleted form, It may not be sequential

Eaiu Linns ——* prima Foal lows you toconnect to Your ‘e-malladdress. Il messages: d me the emaiT illbe Immediately sent to the tagall ofasingle pase joel youbackthroughe-mal web pases’ tocontact’ pwaveinfodyaho ‘ecan type ammessage 2! Besides linking between pages and bel Thisisthe simplest way toenable readers of your mai toe ndow in which he/sh o.com” >kind]y sen taginstructs the Sreattribute wth cimg>tagins Height: and width attribute with tag’ 1 porderattribute with tagadds outline totheima «Align attribute of the tag aligns images tothe top, ‘ tag is used for embedding an external application or int intoan HTML document. “video>tagisusedto specify video on an HTMLS document anditis supported by most of the standard browsers, Hyperlinks allow us to connect web documents effectively and innovatively. ‘Address of the web siteis called as uniform resource locator(URL). « anchor tag is used to create a link from one web page to another. + href (hypertext reference Jattribute is used to give address of the document to wk Internal linking means connecting your own web pages and files of your web site together and External links are links that $ 1. ize and have a high picture quality. Ca othavet8 \ds and are bigger than gifimages. kgrouns icsdonot have transparent backer a Ibe placed on the web page. browser that the image wil : the source from where you can get the image. structs the browser about | : is used to specify the area which image acquires. age which gives a frame like look to the image. bottom, rightorleft ofa text paragraph. eractive content (audio/video files, flash animation fey) itis linked. connect toother websites. Alinkattribute of the tagis used to set the color for the active links in a web page. ‘Viink attribute of the tag is used to set the color for the visited link ina web page. Named anchors are used o create links that can jump directly intoa specificsection ona page. Images canbe used as hyperlinks and are called hotspots. SMPUTER LAB ACTIVITY =e IVITY1: _Createa photogallery for computer parts. KNOWING COMPUTER Click to Enlarge the Image
ing, sree" ‘Pu. jpg" width= "100" height= "100" Jaiehe"cpu-jpa"> Click to Enlarge the tmage ging sr Keyboard. jpg” width="100" hei ght="100" 39 gfe" Keyboard. jpg"> Click to Enlarge the rmage Click to Enlarae the tmana 2 /-~computerquiz.htm ene wage win Answer’ webpage. [chtml> TH

QUIZ - HISTORY OF COMPUTERS efont size="5" color="blue" following:
cane

the father of Computer Science. ies Seem = the first Computer Programmer. a
1. The founder of the IBM company. the first general purpose Digital Computer.
2. The first Microprocessor.
3. the first Personal Computer.

Click Here To see Answers ee answers.htm etitle> answer ae

1, ABACUS
2. CHARLES BABBAGE
3. PASCALINE
4. LADY ADA LOVELACE
5. HERMAN HOLLEIRITH
6. CHARLES BABBAGE
if 8 9 face="arial" color= COMPUTERS
eee Coe ‘ANSWERS OF QUIZ - HISTORY OF COMPUTERS: « ENIAC
+ INTEL 4004
| ALTAIR 8800

, ra html"> Click Here To Go Back to the quiz b). d) The correct syntaxis: c) IN ASSESS YOUR KNOWLEDGE ///||| 1. Answerthe following questions. a) b) q Co) e) ) 8) h) i) i ky) Which tagis used to insert images in the web pages? Explain with an example. Uist out the attributes of tag with their utility. Whatis the function of Align attribute in tag? Definea hyperlink. Differentiate between Internal link and External link. What do you understand by 'URL'? Explain with an example. Whatare the two things you require tocreatea link? Explain the utility of Title attribute. What do you understand by anchor tag? Explain the Target! attribute with the values and their description too. Whydo weuse'Name' attribute with anchor tag? Explain, Whats the use of E-maillinks? Explain with an example,