HTML oS. SS In This Chapter, we will Learn : Learn the origin and basics of HTML Opening and saving an HTML code Understand text formatting tags ¢ Learn to create ordered and unordered list in an HTML document Lear to insert Graphics, Frames and Tables in an HTML document Leam to insert Copyright, Trademarks symbols in a Web page. 2.0 INTRODUCTION : HTML BASICS ‘A Web Page is a document composed of text, images, sound, animation, video and special codes called Tags. One very basic and commonly used markup language is HTML (Hyper Text Markup Language) which is a grammin: ige, designed to display and access Web ‘Access to a Web page is made through a special type of program i browser. The two most popular browsers are Netscape Navigator and Microsoft Internet Explorer. Markups are nothing but the ta; tags used for some purpose. Tags are identified by opening tags or closing tags signs. The commands themselves are specified between <> sign (also known as opening tags). In case of tag which need to enclose text then ending tag should include image to indicate the end of tag. Tags are not case sensitive. SGML (Standard Generalized Markup Language) is a set of standards proposed by World Wide Web Consortium (W3C) for all markup languages to follow. The code consists of two types of tags. (i) Empty tags : Empty tags are stand-alone tags because they do not require a closing tag. (ii) Container tags": These tags wrap around text or graphics and they come in a set with an opening tag and a closing tag. For Example : Affected Text HTML tags are comprised of elements, attributes and values. Tag elements egetE-commerce, 22 nd attributes control how use, y ser wants to change @! utes : ae ot ei yibate has a value that sets the specific attribute. A tag elemen, wants it, Eacl can have multiple attributes. oa attribute | = “value” attribute 2 = “value” > Affected text The text is in arial font size 3 , , Text within these tags appear in the title bar at the very top of the browser’ page. : .... All the text images, links, tables and other information that should APC gy ‘on the Web page is placed between these two tags. = 7 Example 1: Simple Ilustration of HTML Program : - > tit, i Text will appear in the Title barThe Output Will Be : Fle EB View Favortes Tooke sip 7 9 90 HAO LDkOBso- 3 nacress_@) Mott chSutda Madane commercelOntptiEvanpe hn Note: HTML is a flexible language. It does not mind if any of the basic building tags is missing, but itis always a good programming practice to use the tags in proper hierarchy. 2.1.1 Saving an HTML File The Code given above is typed in Notepad. In order to save it as an HTML document, go to the File Menu and click on Save As option. Make sure you are in the correct drive and then type in a file name and add the extension. ‘html’ or ‘htm’. Most importantly, change the “Save as. type” Text Document to All types so that the html file extension is accepted. 2.1.2 How to Open an HTML File (1) Open the Web-browser, (2) In the Menu bar, select File menu, Open Option, (3) Find your file by clicking on Browser, and (4) Click on Open. After making changes to the page in Notepad, always save your work. Then go back to the browser and refresh your page to'see the changes made. ‘Tag Codes and Their Effect _ piel eee ee | ely ee ee | ee [Stee rouge strikes at ne A aE a chat ‘Small (one font size smaller than the current size ‘ Big (one font size bigger than the current size) | | __| Marquee (scroll) ape4 quee> Codes / 13 — inte features toa block of text. Tis is called nestin von ca hing to remember is that all the codes that star (begin late shor : te should be no intersections. The policy followed While using oot Sone is LIFO (Last In First Out), : : 7 rn ica Learning Nesting Incorrect Example : Learning Nesting 22 TEXT FORMATTING TAGS © Headings Headings are used to divide or assign Headings to a Web Page's content, Heading code consists of < Heading No.> Heading Text Text Heading © Line Breaks Inserts a carriage retum. It is just like Pressing enter key on in oaztard where it takes you tothe i an be givenin lent The font element is used to x “et ind te owes SE of text and how it * Sie3 neon pisrerent Reading Sizes DUD Steaeing TTDcanading PRD CRDAating 27— oO peaet Dacading Soms erasing 67a mrpoitrerent Feat Sizes SUDUD si at size “a >Fent Size 1/FONDEDM6 commerce The standand color mode used on the interest is RGB, which consists of g not of three values font 0 (zero) to 238 Tn Techinal nolation, of 0 (zero) to AF in hoxadoetmat notation, Color attribute values ake one of the following forme ow RRGGBR', where RR, GG and BB are red, green and blue components of the color, Hew of the colors widely used are : RGB Values = #008000 Color Name RGB Values Wack = #000000 Green Silver © HeDEDCO Lime HOOfTOO Grey = WRORORO Olive = #808000 White ~ wom Yellow = #fTOO Maroon = #800000 Navy = #000080 Red = wAN000 Blue = #OO00fF Purple = #80080 Tel = #008080 Fuchsia = werCort Aqua = #O0OfffT © Face attribute assigns style to the font. text to affect Some of the font styles that the browser can identify are: Arial, Bo Old Style, Gourmand, Century Gothic, Times New roman, Verdana, Courier New, Book Antiqua. Combine the attributes + Text to affect © Paragraphs The paragraph code sets up paragraphs in a format where text is single spaced with one blank ins bares pat paragraphs, The paragraph code cannot be combined to insert blank lines but the align attribute can be used to set up text in different positions, For Example :

¢ Blockquote The

element is used to double _indent_a_paragraph, which means to indent both of a paragraph. This is mostly used for quotes.HTML ri so a ood idea to ¢ tris also a Bood idea to double , ‘ moiceable PON this code go that the indents are more For Example :

4 etetockquote> ext to be double indented

eo Pre-formateed Text Pre-formatted text shows the Jext exactly as i sn ——CX! exactly as it is typed with tabs and c: returns included, The only problem i tart ye wi h ahs and. sarrnge “or courier font. 1¢ font to typed.tex: For Example :

 pre-formatted text 

« Division Divisions are used to divide content into sections It allows the user to apply the same alignment to several Paragraphs or a large area of text at once. For Example :

tag inserts a horizontal rule line, basically a line that goes across the page. This tag is an empty tag, therefore, a space and a slash appear at the end of the tag. The

---

fag has several attributes that the user can include. It should be noted that the attributes are never stand alone. Se aenianannil “tight"> paragraph text

Size =“value” (in pixels) to denote line thickness Width =“value” (in pixels or %age) to denote length across page Align =“tight/lefUcenter” Noshade (if you want a flat look rather than 3D shading). Bee eS Color =“color name”/ “RRGGBB” to fill the line with a calor For Example :

---

—— es eo pull Address This tag is used to specify ‘the author’s information mostly at the beginning or end of a page. Addresses are usually placed at the lef ide in itali with line breaks above & below.E-cor 28 mmerce For Example +

Author's Information

2.2.1 Comments in HTML ‘Comments are meant for the purpose of adding descriptions etc. to make the code easily understandable, Comments are simply ignored at the time of processing and are not shown on the output. There are two tags that can be used for the purpose of incorporating comments in an html page : 1, This is a comment ‘Note : This tag has become obsolete now. 2, From Everand