LEARNING IN THIS CHAPTER ! a Attributes F Cascading Style g r. Tags, Elements Mle Sheet, : ae i — fe HTML document structure ® Methods of Apply . " . ® cating an HTML document = Common HTML Elements Background pro ving cp Pets syecome awtal part of our fe Its the largest information vheesociety. The internet isa network of millions of cy. tion andresources. computers on the internet are ij eclients send requests to the Servers and the eng, internet, an emerging technology, has revolutionised the world economy as well as are connected with each other to share informal mmunicate via networking protocol. Th Clients and cor immediately with the | required data. ‘The servers store files and information in the form of websites. These websites consist of millions Of page, web pages, which contain, text, graphic, ideo, audio, and linkto the other pages called Hyperlink. These, canbe accessed by different users around the world by using an internet connection. Have you ever onde, these web pages are created? Which language is used to write these web pages? The answer is: HTML sn), most widely used language to design web contents for the internet. In this chapter, you will be introducze, basics of this technology. ® WHATIS HTML? HTML stands for Hypertext Mark-up language. It is a compl pages that contain both text and graphics. It is @ simple mark-up language that describes the stn t.Allthe web browsers are designed to understand and interpret this languz lete code package that allows the user to behaviour of the web document Let usanalyse the acronym HTML. HYPERTEXT Hypertext isa piece of ordinary text that has been spruced up with a special feature of linking to other doe webpages. So, when you click on the hypertext, it opens anew web page. MARKUP LANGUAGE Itisa language that uses special symbols called ‘Tags’ to mark-up a text document that instructs the browser how to display the text. Mark-up languagesare solely concerned with classifying the parts ofa document according to their functions like, indicating which partis the title of the document, which part is heading or subheading, and soon. Originally, HTML was developed with the intent of defining the structure of documents to facilitate the sharing of scientific information between researchers. Now, it is being widely used to format web pages with the help of different tags. cant wn Kis <24>jg sTORY OF HTML >> Ba gits journey in the early 1980s with General Markup Language (GML), in artes vm enguage was modified and standardised and named Standard General is i designed this mid 1960s as a project of tence in 195, | tents artment of Deere we. 20 version Was announced, Later on, after two years HTML 3.0 and then | agement tDetenses vet Advance Research Proje yo years HTML40 was announced, HTMLS cameinto existence around 2008. The — pet ’ aes vs ™ anguage (SGML). In 1989, Tim Berners-Lee and his team re, The internet began inthe i jandnamed itas HTML. The standard version of it came into exis ase major organisations that were involved in developing HTMLS were World Wide Web — yom sori (w3C) and Web Hypertext Application Technolo; oo wate). inischapter, you will earn about the basics of HTMLS, i By Working Group amit sisthe atest version of HTML. Itisa mark-up language using which youcan create avebpage nan easy and convenient way. Now, adding audio and video clipsin the web ageisas easy as including images, which was not Possiblein the earlier versions without thesupport of external software or plug-ins like Flash Player. With the CANVAS feature, yiaan also draw Images directly in the web page. All these attributes of this new, vesionhaveadded relevance and credibility toit. » TOOLS TO BE USED | Tools lke Macromedia Werequire two basic tools to work with HTML documents: Let's Know More Dreamweaver and Microsoft Frontpage can also be used to develop HTML web pages instead of writing plain text, » HTML Editor - for creating and saving the documents » Browser —for viewing the documents HTMLEDITOR Therearemainly two types of HTML editors, WYSIWYGEditor WYSIWYG stands for What You See Is What You Get. This type of web editor allows a E eveloper to see what the end result will ook like while the document is being created. These editors provide various tools and graphical interfaces where the web pages are Ww Sy designed, While using a WYSIWYG editor, users may not require: the knowledge of HTML __ Commands as the elements (images, tables, lists, etc.) canbe placed on the interface and therequired HTML code willbeadded automatically. For example: Adobe Dreamweaver, Amaya, Google Web Designer An intranets 3 corporate seater ‘organisational network that uses the same protocols used on the one is required to have proper knowledge of _| ,,potocalt used on the You can also create HTML documents using normal text editors like Notepad or Wordpad. Unlike WYSIWYG editors, here, ‘end eal. HTMLcommandsto develop web pages. The ony ference between the two that Bae se amntranet cto tom b browsers are used t0 view the HTML documents, Some commonly used web | *intonetscut of Web bri browsersare* Learning c puters wits KIPSff ” Apple Safari e@ Google Chrome @ 2 imeret Explorer @ Mozilla Firefox Intern e Microsoft Edge O Opera ® CREATING AN HTML DOCUMENT To create HTML documents, you will use NotePad. Let us | SD My first Program - Notepad discuss how to create HTML document using Notepad. | File_Edit_Format View Help ; ‘, “ > Open Notepad by clicking on Start > Windows Accessories > Notepad. t= - Saleen as oes = - KIPS LEARNING PVT. LTD. -(H1) KIPS LEARNING PVT. LTD. - (Hl)

KIPS LEARNING PVT. LTD. -(H2)

KIPS LEARNING PVT. LTD. - (H2) KIPS LEARNING PVT.LTD. -(H3) KIPS LEARNING PVT. LTD. - (H3) <

KIPS LEARNING PVT.LTD. -(H4)

IPS LEARNING PVT. LID. - (4)

KIPS LEARNING PVT. LTD. -(H5)

a eae) sLEARNOPTE LTD)

KIPS LEARNING PVT.LTD. -(H6)

<[body> <[html> ® PARAGRAPH To display along piece of text ona web browser, the Paragraph element

is used, which marks a block oft Paragraph. To mark the end of a paragraph, element is used. When you start another paragraph. th?" ragraphs. ® LINE BREAK ELEMENT argin on the screen. Line breaks are good for ending lines @ an introduce a line break into your HTML document with the M* Jp ss. You ci
tag. Thiselementhasnoend tag, Learning Kips Computers withMy oH ey Se y= oo? ae? nevreakelement <[title> © Lnebrest tement SO hie | CisersiMimayDesktop/.. Qt QO Jy we Kips Learning Pvt. Ltd. ge? B-40, Sector-57, of Noida é Pin-201305 ing Pvt. Ltd.
ipsa! Ph-8130100096 ; _o,sector57, yoda in201305<01> 8130100096 | ebody> fhtmi> D HORIZONTAL RULE > COMMENT <-Learning HTMLis great fun—> or » BOLD Forexample ® IauicS Todraw the Italicstyle- TYPE For example window. Insucha case, youneed to use The bold tagis used when youneed to asboldandtype after thetext, Organised by: KIPS Learning Pvt. Ltd. tisused as a separator between blocks of text. The

---

element draws a horizontal line across the page. Itis an enptyelement and hasno end tag. Type

---

where youwanttoinsert ahorizontallinein between thetext. sofaryouhave seen that whatever you write inside body tag, it gets dsplayedinthe web browser. Somelirne®, YON tant to write notes for yourself in an HTML document, but do not want them to be displayed in the browser the Commenttag. To comment the text use any of the followingways: comments LearningHTMLisgreat fun (The commenttagworksin internet Explorer) emphasise the text. Type before typing the text that you want fo display KIDS POOL-A COMPUTER COURSE attention of areader on any important information, Italics tagis used. This element marks up the text in cis tagbefore typing the text that you wanttto display in italics and type

tagafter the Fext- © berg tot mats x 4 7 © OF) Crwmnirarescen, @ <~ In this program we have used Formatting KIDS POOL - 4 COMPUTER ¢ effectsonthetext.-> Organised by: KIPS Learning Py, KIDS POOL-A COMPUTER COURSE
Organised by: KIPS Learning Pvt. Ltd.

<[oody> ® CASCADING STYLE SHEETS CSSisa style sheet that provides a set of Style rules for defining the layout of HTML documents. Using C85, joucs control the colour of the text, the style of fonts, the spacing between paragraphs, size and layout of «colunag backgroundimages as well asa variety of other effects. Style sheets are designed to separate the presentations of documents from the content of documents. This makes site maintenance much easier and Provides mare | flexibility. The concrete benefits of CSS include: ® Controllayout of many documents from one single style sheet (External style Sheet) > More precise controloflayout > Apply different layout to different media types (screen, print, ete.) > Moreadvanced options and sophisticated techniques CSS TERMINOLOGY Property {tdefines how different elements look on the web page. Font-family, color, background, border and the ke 2* examples of properties. Value This is the value or option chosen for a property. For example: Value for the Font family property can be font names like Monotype Corsiva, Times, Arial Declaration A property and its value is collectively known as Declaration. Forexample:Color : Green Prope = Computers wits KIPS:ye pofthe HTML ‘element to which you want to apply the declaration. , 20! yea ifyou wantto change the behaviour of hr element (let us say its width should be 50%) then you would He tee gurselector- ae HF qdeclration together forma Rule, get peclaration Property Value eee. ‘Hi {Color blue; font-size: 20 px} — Rule example Value Declaration Property Selector —— ) CASCADING STYLE SHEETS Youcan include the style sheet rules with an HTML document in the following given ways. IMLINE (THE ATTRIBUTE STYLE) 2 , i: | Oneway to apply CSS to HTML elements is by using the ‘Style’ attribute. The Style attribute can be used with any | dement in the body section including the tag itself. You can use any number of declarations; each one separatedbya semicolon. Forexample:

---

This is not an efficient use of style sheet as the declaration is to be repeated with every element, even if the same ‘styleis applied onsome other element inadocument. INTERNAL OR EMBEDDED STYLE SHEET This style has wider scope than the Indine method. With Indine method, the effects applied are limited to the element with which the style declaration has been specified, whereas in Embedded style, the effects get applied to g| altheelements of the type with which the style declarationhas been specified. Tocreatean embedded style sheet, youmake use of y oa So Learned Kips xpos ypos - specifies the horizontal, vertical position respectively in units of length > xtyk-horizontal & vertical positionin percentage > [top|center|bottom]][[left|center|right] - These keywords also specify the vertical & horizontal position values respectively. Values are to be chosenin conjunction from both the sets specified above. BACKGROUND REPEAT With the help of this property, you can set the repetition pattern for the background image. By default, a background image is repeated in both horizontal and vertical rections, SYNTAX: background-repeat: value 508000 | vow \where value =no-repeat}repeat-x|repeatylrepeat n00080 et} woososo > norepeat-image will notberepeated snes [soe st [acted > repeat-x-image willbe repeatedhorizontally ory ~imagewillberepeated vertically image will berepeatedinboth the directions. > repeat-y > repeat - default value, BACKGROUND ATTACHMENT This property helps in either fixing the image in the background or make it scroll when theuser scrolls the rest of the P28 SYNTAX: background-attachment:value scroll where value= fixed}: titlesbackground properties 1 tetyordreenn oe ae © | @ tiesi7e AnersAner/Destop/minvosck preprint etpectrcretn nol ca St Background propertiesrelated toimage ieara backgroundepa ‘no-repeat 2 mon is not ARECAP. > HTMLis the most widely used language to design web contents forthe internet. > Internet is a network of millions of computers, which are connected to each other to share information end resources. > Twobasic tools are required to work with HTML documents: > HTMLEcitor for creating and saving the documents > Browser for viewing the documents HTML codeis made up of elements, tags, and attributes HTMLelements are of two types > Container elements that include both ON and OFF tag > Empty elements that contain only ON tag > The general structure of an HTML documenthas two sections > Headsection:Itcontains the title that identifies the first part of. > Body section: Thisis the section where youdomost of the work ‘an HTML document C5Sisastyle sheet that provides the set of stylerules for defining the layout of HTML documents You caninclude the style sheet withan HTML document in three wa > Indinemethod > Internal orembedded Style Sheet method > External Style Sheet method > _HTMLallows youtosetthe background styleof an element with the background properties. leant an Kips 0nthe atherdocume’ inTMLS,. SECTION - A. ks. isa piece of ordinary text that has been 5 nts orweb pages. are used to view the HTML documents, » Line Break State True or False. HTMLS came into existence around 2008. Tagsandattribute names are case-sensitive. Property defines how different elements look on the web page. Pruced up with special feature of linking to elements include both ON and OFF tags. element splits the line and displays the text onanewline. iS » Canvas » Hypertext » Web browsers With the In-line method, the effects get applied toall the elements of the web page. Youcanadd animage in the background ofa web page with thehelp of picture tag. Application-based questions. featurehelpsin drawingimages directlyinthe web page. ° Container LU Ee) U le to doit. Help her : as the background of her web page but she is unabl Rashmi wants to set the image of 2200 doso. A Multiple-choice questions: A, HTMLisat a.xML, improvedversion of n cSML Learning ‘Computers with Kips2. Amayalsa- a.Texteditor b.Web editor c.Wordeditor ..tag draws a horizontal line across the web page. 3. The... eo abe b.chr> c. 4 7 provides the set of style rules for defining the layout oF HTML dg a.cSS b.WSS c.TSS ‘iments 5, _AProperty andits valueis collectively knownas. a. Selector b. Attribute cc. Declaration 6. The helps us in placing the picture or image at a desired place document. ON the n a. Background-position b. Background-place c.Background-point B. Answer the following questions. 1. WhatisHTML? 5. Whatare Cascading St 2 ing Style Sheets? Name the different methods available for applying Style "™!eS: Learning Computers withand ther sodden Grappecrance as sectels ov as exurcementl haords. of tiny insects as food due to the loss of vegetation hse of mosquito repellents oncrete architectures with no nesting sites for sparrows Air-conditioning which leaves no entry or exit points for feeding sparro