chapte, y Introduction to HTMUS vou have leamt about the World Wide Web and is working, Yow row that everything existing on the World Wide Web is actually in in this Chapter the form of files written in a special language called HTM. ‘AWeb site consists of Web pages that are written in HyperText Markup Language (HTML). Let us discuss the structure of 2 Web site and then understand what HTML is. You will study the latest version, ete ive., HTMLS, in. this book. nia coed eer ean STRUCTURE OF A WEB SITE ee AWeb site structure is the framework that makes the entire Seat ke Una content presentable to the audience. A well-structured Web site Perea is essential to ensure that any information can be accessed ST aaa within a few clicks. This improves user friendliness and ‘Web site navigation. 'AWeb site is composed of three main sections: the ates oe home page, the main section, and the subsections. Figure 6.1 shows the most common structure ofa a ‘Main section ‘Web site, which is hierarchical. ct ‘The Home Page isthe first page of the Web site. This page usually tells visitors about the Web site. The reer ection usualy contains he headings for particular areas of the Web site, whereas the repseetions contain most ofthe content, For example, the above figure could be the structure for a school Web site. Subsections Fig. 61 Structure of a Web site INTRODUCTION TO HTMLS - ‘As you have already studied in the previous chapters, Hypertext Markup Language (HTML) is the text markup language that is currently used for the Web. it lets you create pages that can be read on the Wel: vind informs Web browsers how to display Web pages ‘Tim Bemners Lee designed the original HTML document type in 1990, along with a few colleagues at CERN. The first version of HTML was officially published in 1993. The fifth version, which is the latest, 148was published as a working draft in 2008 by W3C. HTML 4.01 = E Did you know? ‘which was the previous version, focussed on presentation and sling information, Since HTMLS is still under development, not all Tim Benes Le f currently Web browsers provide support to all its features and elements the irectorof Wold Wide Web ‘Consortium (W3C). Bmportance of HTML HTML has gained importance because of the following reasons: = Itcan be used to display any type of document on the host computer, which can be anywhere in the world It is a versatile language and can be used on any platform (Macintosh, UNIX, Windows, etc.). itis used to make the text look attractive. has an additional feature of linking one document with another. tris easy to learn. fis considered the most powerful tool for Web designing. Tid you Know? @ ations of Hrmt of the limitations of HTML are as follows: TIAL as developed aassbiet, of Standard Genealsed Markup ™ defines page layout and enables linking, but the user cannot Language (SGML). high evel markup act with the Web page. For this, scripting languages such as langue used by the US Department ‘SS eScript and ActionScript are used. el siete epee TM Ae pet than SGML, which isnot del for ® Spot a software programming language and has to depend on _tansmisionacrasthe Inerne co a ier many fren ypes of computers, erences for that. ‘users, and browser applications. Tim = neither a word processing tool nor a desktop publishing Berers designed the original HTML like Word. document type in 1990. Ht uses fixed predefined tags that specify formatting and instruct the browser how to display text, and other elements in the text. Users cannot define their own tags, as in the case of XML == leam about HTMLS specifically. Pe will also be introduced to Cascading Style Sheets (CSS) later in the chapter. =the new language specification for Web pages. It offers a variety of new features that enable interactive Web sites by embedding audio, video, and graphics on the Web page. s=sion attempts to solve the issues prevalent in previous versions. Rules to handle HTML sed errors have been made in HTMLS. In this new version, some elements and attributes of sesions are deleted and new elements and attributes have been introduced. pking feature of HTMLS is the facility to play audio and video content without the need for "> 2s Flash Player. It has new graphics features such as CANVAS, which defines a drawable © the Web page. It will help you create shapes, graphs, and even animations. 'Sscess some popular Web browsers and then we shall learn about two basic tools needed to documents: an HTML editor to create and save the documents and a Web browser to viewWEB BROWSERS ‘AWeb browser is an application program that displays HTML pages. Some of the commonly used Web browsers, such as Internet Explorer, Google Chrome, Mozilla Firefox, Apple Safari, and Opera, are discussed below. Internet Explorer Microsoft Internet Explorer or MSIE, commonly known as IE, is a series of graphical Web browsers developed by Microsoft and is included as a part of the Windows operating system. Its one of the most widely used Web browsers since 1999, Internet Explorer 9 is only compatible with Windows Vista $P2, Windows 7, and Windows Server 2008, This version also supports HTMLS video and audio tags Internet Explorer 11, its latest version, is built for speed and compatibility with touch technology. Google chrome Google Chrome is a freeware Web browser developed by Google. It was released as a beta version for Microsoft Windows on 2™ September 2008 and for public on 1 1 December 2008. ‘mozilla Firefox Mozilla Firefox is a free and open source Web browser developed by Mozilla Foundation. itis, supported by Windows, Linux, Android, and OS X operating systems. This browser was originally titled Phoenix but renamed Firebird because of trademark problems with Phoenix Technologies, an American software firm. Even the name Firebird provoked an intense response from the Firebird free database software project. Following this, the Mozilla Foundation stated that the browser should always bear the name Mozilla Firebird to avoid confusion. Finally, the name was changed to Mozilla Firefox, commonly referred to as Firefox. The Firefox version 1.0 was released on 9" November 2004. On 4 October 2012, Mozilla released a preview of the Metro interface version of Firefox to be used with Windows 6. Apple Safari Safari is a Web browser developed by Apple Inc. Its frst beta Did you Know? version was released on 7* January 2003 on the company’s OS X operating system. A version of Safari for Microsoft Windows pile nan operating system was released on 11!" June 2007, which supported product of Netscape (erat Windows XP Service Pack 2 or later. Itis no longer being promoted Corporation. Duero the increased or updated. The last version available for Windows PC is Safari ‘sage of Microsoft Internet Explorer, He the usage of Netscape Navigator hs a almost disappeared since 2002. Opera Opera is a Web browser developed by Opera Software, a Norwegian software company. Opera runs orf a variety of personal computer operating systems, including Microsoft Windows, Mac OS X, and Linux. Opera is offered free of charge for personal computers and mobile phones.EDITORS, are two main types of HTML editors: WYSIWYG editors and text editors. WYSWNE Hitors WYSIWYG stands for What You See Is What You Get. WYSIWYG editors let you create Web pages without the knowledge of HTML. They have graphical interfaces and tools to develop Web pages, which allow you to insert images, tables, lists, hyperlinks, etc, without writing HTML tags. Microsoft FrontPage and Adobe Dreamweaver are two popular WYSIWYG HTML editors. The two main advantages of WYSIWYG HTML editors are: * Web sites can be created quickly + Knowledge of HTML tags or commands is not required Text Editors You can also create HTML documents with Notepad, WordPad, or any other text editor. However, in this case, you need to be familiar with HTML coding, CREATING A BASIC HTML PROGRAM. Let us see how you can create and save a basic HTML program using Notepad: 1. Open Notepad by selecting Start P All Programs P Accessories P Notepad. A blank document will appear in the Notepad window. mn case Notepad is already open on your computer, you can select File P» New from the Notepad menu to create a new document. 2. Type the HTML document exactly as shown in Figure 6.2. (The HTML coding will be discussed later in this chapter) 3. Select File P Save As, 4, In the Save As dialog box, choose the location where you wish to save the document. Enter the file name with the extension htm or .html and click Save (Fig. 6.3).| Pretpeerr Viewing HTML Documents in a Web browser (QOliemercen ten You can use any Web browser, say Internet Explorer or FireFox, to view an HTML document. The steps to view an HTML document in Internet See mn Explorer are: | a cx 1. Open Internet Explorer. Newson | oe. en 2. Select File P Open (Fis. 6.1). a 3. The Open dialog box is displayed (Fig, 6.5). Click Browse. | ee aa 4. A file selection dialog box will appear. Select the HTML file you just ees ae created. Fig, 6.4 Open option of the 5. Click Open. The Open dialog box will reappear. Click OK Hila veins and you will see the Web page you created in Internet Explorer. HTML CODING Next, we will discuss how to code in HTML. Let us start by ah as = discussing the various components that make up the HTML Fig. 6.5 Open dialog box in Internet code: elements, tags, and attributes. Explorer HIML elements A Web page (or an HTML page, to be precise) is made up of elements, each of which is defined by an HTML code comprising tags, and attributes. Atag is an HTML command that indicates the layout or display of a whole or part of a Web page. An attribute is a special word or set of words contained in a tag that specifies additional information such as color, font, and alignment. HTML Tags ‘An HTML tag is bound by angular brackets. It always begins with a “<’ (less than) sign and ends with a “5 (greater than) sign. For example, the tag for making the text bold is . If you want to format a word as bold on your Web page, you will: ‘+ Insert before the word. This is the opening tag or the ON tag. ‘+ Insert after the word. This is the closing tag or the OFF tag, The OFF tag is the same as the ON tag except that it has a forward slash / after < So, to make the text ‘Leaming HTML5.0' bold, you will write the following in the text editor: Learning ATMLS..0 When you view the Web page in a browser, the text will look like this: Learning HTML5.0. Most of the HTML elements have two basic properties — attributes and content. An HTML element consists of an opening tag and a closing tag, with the content enclosed between them. Some elements do not have a closing tag.‘ote: If you do not use the angular brackets to mark the HTML tags, the Web browser will assume your commands as text. Since tags are not considered as text by the document, they are not shown in the browser iow. Sim attributes “tributes of an element are special words that give us extra information about elements, They are -hways specified inside the start tag. Forexample,

---

f the above case,

---

is the tag for horizontal line and color is the attribute, signifying the color of the ne. We will learn more about attributes later in the chapter. F Tupes of HImt elements FIML elements can be categorized as container elements and empty elements, Container Elements HTML elements that include both ON and OFF tags are called container elements. For example, This text is in bold Empty Elements HTML elements that only have an ON tag and do not require an OFF tag are called empty elements For example, the
tag, which is used to give a line break, does not require a closing tag. Another example is the horizontal rule tag , HTML Rules Let us lista few HTML rules that will help you write the code easily: * Tag names and attribute names are not case sensitive. For example, is same as <30by>. However, it is a convention to use lower case, * Attribute values should always be enclosed in quotes. Double quotes are the most common, but single quotes are also allowed * Attribute values are case sensitive. The World Wide Web Consortium (W30) recommends lowercase attribute values. * Spaces between tags do not matter. For example, is the same as Bold text

and Bold text ‘+ Tag names cannot contain spaces. For example, is not the same as . Also, there should be no space between < and > in a tag. So do not write < b > or. * Elements can be nested. For example, if we want to underline text and also make it bold, we can write: Correct order of tags Note the order of the closing tags. However, the foll Incorrect order of tags STRUCTURE OF AN HTML DOCUMENT An HTML document contains two distinct parts: HEAD and BODY. * The HEAD section contains informatic * The BODY section contains everything that is displayed on the Web page. It includes text, graphics, etc Here is the basic structure of an HTML document: n about the document. element This element is the starting element in an HTML document and specifies the type of document. It informs the Web browser about the version of the markup language in which the page is written, It is an empty element and does not have a closing tag, element The element is written after the element and defines =» the document as an HTML file. It is a container element, The document starts with and ends with . The browser will interpret everything that comes in between these tags as HTML text. ‘An element contains only the and elements, They, in turn, can contain other elements. element The element is a container element that includes identification and supplementary information about the Bid you Know? document. Most of this is not displayed on the Web page. .. The Moon orbits around the Barth once per month. The Moon is the only natural satellite of the Earth. It 1s the largest natural satellite of a planet in the Solar System. It is the fifth largest moon in the Solar System. It is the most luminous object in the sky after the Sun. Although it appears very bright white, its surface is actually dark. 3. Select File P» Save and save the file as moon hem Open interne Explorer. Select File P» Open.6. The Open cialog box appears Click Browse. Select the fle moon.him! and click Open. When the Open dialog box reappears click OK co open the page. 7. The Web page appears as shown in the figure: SRSTREET * Fie Edt View Favorter Tools Help | The Moon orbits around the Earth once per month. The Moon is the only ‘natural satellite of the Earth. It is the largest natural satellite of a planet in the Solar System. It isthe fifth largest moon in the Solar System. Its the most luminous object in the sky after the Sun. Although it appears very bright white, its surface is actually dark. UNE BREAK ELEMENT
The browser does not recognize new line and paragraph formatting in the text. If you want to start a new line, you need to insert a line break with the help of the
. The
tag inserts a single carriage retum or break in the document. This element has no end tag. Let us consider an example. Type the following HTML code that does not use the
tag in Notepad, save the document as an HTML file, and open it ina browser (Fig, 6.61.You will notice that though the text shows line breaks at four instances, the browser displays the entire text as a single paragraph. ” Amazing Facts about the Earth. About seventy per cent of the Earth's surface is covered with water. ‘The Earth does not take 24 hours, but 23 hours, 56 minutes and 4 seconds, to rotate on ite axis.A year on Earth isn't 365 days, but 365.2564 days. This extra .2564 days Creates the need. fora lnap year arter every four years, ‘Amazing Facts sbot the Earth. About seventy patent of the Fan sic icovered with water, Eat doce tal 24 bts o | {oll on it ais, bt itchy takes 23 hour, SG inaes | sz to ota omits ae. yearon Earth i 68 dose ) Sivlly 3852564 days, This extra. 2564 dayncretes the sae leap year afer every four year mn order to start a new line, we need to use the ‘
tag. Insert tag in the same HTML code at all the four places showing line break. Save the document and open it in the browser again ‘is, 67). You will see that wherever the tag has been inserted, the text has moved to the next line when displayed in the browser, (aoa ‘rset ue ace bene ew | Seca eScatueate is renite Amazing Facts about the Earth,
SSS EE send otto nee Ayes on Earth it 3 About seventy per cent of the Earth's surface is covered with water.
The Earth does not take 24 hours, but 23 hours, 56 minutes and 4 seconds, to rotate on its axis.
ig 6.7 The browser shows parageaphe now 4 Yess ouBarth tan’t 365idayay but aeh-aceacere! pheoneed: taxa Leap year’ atteulmey gai yal This extra .2564 days creates You can also use the
{28 © skip line or multiple lines. Insert two or four tags ina row and see the result Fig. 6.2) A desert is a barren area of land that receives very little precipitation. Deserts can be classified as hot or cold, semiarid or coastal. Hot deserts are mostly located near the Tropic of Capricorn or Cancer. Cold deserts are covered with snow for most part of the year. Sahara desert is the hottest desert in the world. Tt covers most of the North Africa, covering an area of approximately 9,400,000 square kilometres Select File > Save and save the document as deserthtml. pen internet Explorer Select File Pp Open. The Open dialog box is dsplayed. Click Browse. Select the fle desert html and click Open, When the Open dialog box reappears, click OK ‘The Web page appears as shown in che figure. 2 3 4 5,Web Browsers A special communication program Container Elements _ HTML elements that include that reads and interprets HTML documents on the both ON and OFF tags World Wide Web Empty Elements HTML elements that do not require HTML The computer language used to create ‘an OFF tag documents (Web pages) for display on the World HTMLAttributes Extra bits of information that appear Wide Web inside the opening tag of an element HTML Elements These are the building blocks of HEAD Part of the HTML document containing. HTML documents. An HTML element consists of information about the Web page 5 ‘opening and closing tags with the content enclosed BODY Part of the HTML document containing between them. everything displayed on the Web page HTML Tags These are identifies of HTML elements. C$ _ Cascading Style Sheets (CSS) is a language used ‘They always begin with a less than sign < and end to specify Web page presentation with a greater than sign >. PLL) of ‘+ AWeb site consists of Web pages written in + The HEAD section contains information about the HyperText Markup Language (HTML) document '* Aneditor is required for creating and saving an © The BODY section contains everything that is HTML document. This can be a WYSIWYG HTML, displayed on the Web page, including text and editor or a text editor graphics i. © A Web browser is used to view HTML documents © The