Introduction to HTML5 You have learnt about the World Wide Web and its working. You ee ee know that everything existing on the World Wide Web is actually in In this Chapter the form of files written in a special language called HTML. A Web ) site consists of Web pages that are written in HyperText Markup nT Language (HTML). Let us discuss the structure of a Web site and Secreta then understand what HTML is. You will study the latest version, i.e., HTMLS, in this book. Pee art Cet) STRUCTURE OF A WEB SITE + HTML Coding eee ‘A Web site structure is the framework that makes the entire Content presentable to the audience. A well-structured Web site is essential to ensure that any information can be accessed within a few clicks. This improves user-friendliness and Web site navigation. A Web site is composed of three main sections: the home page, the main section, and the subsections. Figure 6.1 shows the most common structure of a Web site, which is hierarchical. cq ‘The Home Page is the first page of the Web site. This 7 a page usually tells visitors about the Web site. The Fg main section usually contains the headings for particular areas of the Web site, whereas the subsections contain most of the content. For example, the above figure could be the structure for a school Web site. Perret a oad aa Style Sheets (Css 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' and informs Web browsers how to display Web pages. Tim Berners Lee designed the original HTML document type in 1990, along with a few colleagues CERN. The first version of HTML was officially published in 1993. The fifth version, which is the latestpulsed a5. working dfn 2008 by Wea was the previous ver ML 401, ayhich wa p “rston, focussed on presentati Did you Know? ving information. Since HTMLS is si unger peo an le 3 browses Provide Support to all is development, not al im Berers ees currenty w features and elements, the Directo of Wold Wide Web portance of HTML Consortium (W3C). a wa sti has gained importance because ofthe following reason: + Itcan be used to display any type of docum world. versatile langua Te 'Buage and can be used on any platiorm (Macintosh, UNIX, Windows, etc.)- jtis used to make the text look attractive rent on the host computer, which can be anywhere in the Ithas an additional feature of linking one document with another. Itis easy to learn, t « tis considered the most powerful tol for Web designing, {imitations of HTML id you Know? -@ some of the limitations of HTML are as follows: HTML was developed as a subset f Standard | ised Markus * Itdefines page layout and enables linking, but the user cannot a ected Bae interact with the Web page. For this, scripting languages such as __ language used bythe US Department JavaScript and ActionScript are used. 2 ‘of Defense. However, HTML is simpler , : than SGML, which isnot ideal for Itis not a software programming language and has to depend on _transmission across the Internet to scripting languages for that. ‘many different types of computers, ; ‘users and browser applications. Tim * [tis neither a word processing tool nor a desktop publishing Bermers designed the original HTML solution like Word. document type in 1990, HTML uses fixed predefined tags that specify formatting and instruct the browser how to display text, images and other elements in the text. Users cannot define their own tags, as in the case of XML. Now, let us learn about HTMLS specifically. Note: You will also be introduced to Cascading Style Sheets (CSS) later in the chapter. HIMLS is the new language specification for Web pages. It offers a variety of new features that enable ou to create more interactive Web sites by embedding audio, video, and graphics on the Web page. This new version attempts to solve the issues prevalent in previous versions. Rules to handle HTML elements and errors have been made in HTMLS. In this new version, some elements and attributes of previous versions are deleted and new elements and attributes have been introduced. The most striking feature of HTML5 is the facility to play audio and video content without the need for plugins suchas Flash Player thas new graphics features such as CANVAS, which defines a drawable ‘egion within the Web page. It will help you create shapes, graphs, and even animations. Lets frst di lar Web browsers and then we shal lean about two basic tools needed to Create HTML doers an HTML editor to create and save the documents and a Web browser to view them,—_—_— > WEB BROWseAS AL pages. Some of the common} Useq {A Web browser is an application program that displays HTML P ox, Apple Safari and Ope, i, 2, Mozilla Firef browsers, such as internet Explorer, Google Chrome, Mozi discussed below Internet eiptorer series of graphical Web browse, xplorer or MSIE, commonly known as IE, is as fe Open fy. 6.4), 3. The Open dialog box is displayed (Fig 6.5). Click Browse ni ile you jus + A'file selection dialog box will appear. Select the HTML file you j created. 5. Click Open. The Open dialog box will reappear. Click OK a and you will see the Web page you created in Internet IRDUSI TTS eines Explorer, HTML cooING Next, we will discuss how to code in HTML. Let us start by discussing the various Components that make up the HTML Code: elements, tags, and attributes, Explorer HTML Elements A Web page (or an HTML page, to be precise) HTML code comprising tags, and attributes, A fag 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. HIML Tags An HTML tag is bound by angular brackets. It always begins with a ‘<’ (less than) sign and ends witha >" (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 ‘Learning HTMLS.0’ bold, you will write the following in the text editor: is made up of elements, each of which is defined by ay Learning HTML5.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 fp Portes ~ attributes and contend. An ERA etement Consists of an opening tag and a closing tag, with the eee iy tag, Content enclosed between them. Some elements | aae 7 ~ yp isnot the same as . Alyy oe or. * Tag names cannot contain spaces, For example, should be no space between < and > in a tag, So do not W# ext and also make it bold, ye * Elements can be nested. For example, if we want to underline te i) write: Correct order of tags ontee Note the order of the closing tags. However, the following isin sb> Incorrect order of tags STRUCTURE OF AN HTML DOCUMENT An HTML document contains two distinct parts: HEAD and BODY. * The HEAD section contains information about the document. It includes text, The BODY section contains everything that is displayed on the Web page: Iti el etc, Here is the basic structure of an HTML document: “= ‘/head> iy> zing Facts about the Earth. t seventy per cent of the Earth’s surface is covered with water. e Earth does not take 24 hours, but 23 hours, 56 minutes and 4 seconds, t? tate on its axis. 156 o ospyear on Barth isn't 365 ays, pu 965-2564 days. This extra .2564 days greates the need FOr a leap year artery every four years. egpody> inorder to start a new line, we need to use the epr> tag, Insert
tag in the same HTML code atall the four places showing line break, Save the document and open it in the browser again ‘iy 07). YOu wil se that wherever the tag has een inserted, the text has moved to the next line when displayed in the browser, chtml> Amazing Facts about the Earth.
About seventy per cent of the Earth’s surface is covered with water.
‘The Earth 23 hours, rotate on does not take 24 hours, but 56 minutes and 4 seconds, to its axis.
A year on Bum z eG Vow Foros Hee sii ‘Amazing Facts about the Bath, About seventy percent ofthe | Earths surface ix covered with water, Earth docu take 24 hours to |) rotate on its axis, but it actually takes 23 hours, $6 minutes and 4 fecondsto rotate on it axis A year on Earth innit 365 days but is ‘etal 365.2564 days, This extra 2564 days creates the need for leap yea afer every four yea. ‘Amazing Facts about the Earth, “About seventy pereat ofthe Earth's surface is covered with water nth doesnt take 24 hours to rotate on its axis, but it actually takes 23 hours, 6 minutes and 4 seconds orotate on its axis. || A year on Earth fant 368 days buts actually 3652864 days. This ‘extra 2564 days creates the need fr leap year after every four years. Fig. 6.7 The browser shows paragraphs now Earth isn’t 365 days, but 365.2564 days. This extra .2564 days creates the need for a leap year after every four years. You can also use the
tag to skip a line or multiple lines. Insert two or four
tags in a row and see the result (Fig. 0.8). Amazing Facts about the Earth.

187vered with About seventy per cent of the Earth a a water.



Fr eneneed psi 21) 2a Nese ows — ours, fee ———— ae The Earth does not take 24 hi a but 23 hours, 56 minutes = rio F pmazing Pact about the Earth a of the Earths wuface is covered with water, About seventy pen ee fo rotate on its axis.


cbr>. eo ts ast, Dt Atk 3 oy ath doen take 24 our 0 rote ‘ erton and seconde to rotate oo its ais, how 4 ote al 426d Th 264 ‘Seed far np ya oer evry fur yen A year on Earth isn’t 365 days, but 365.2564 days. this extra +2564 days creates the need for Ayew a leap year after every four aca years, aecaye Fig, 6.8 Web page with multiple blank lines CASCADING STYLE SHEETS (CSS) , ; ; Web page. Markup that ides a set of style rules for displaying elements on a ED acne a the look and feel of Web pages by defining the layout, Colors CSS is a langua; 1g the layout and look of your Web content. Even W3c languages generally use CSS for descri and fonts. Web browsers refer to CSS for definin encourages using CSS in place of HTML presentation elements. The syntax of CSS rule is as follows: selector {propertyl ?propertyl-value; property2: where selector stands for the HTML element for which the rule is defined, property-value; .. Property, property2, etc., represents properties (or attributes) of the element, Property1-value, property2-value, etc., represents values assigned to the various Properties. For example: Body background-color: yellow; background-repeat: repeat-y} CSS styles can be incorporated in an HTML document in one of the following ways: * External style sheets An external style sheet is a separate : document that contains only CSS rules and has the extension . y ou Kno q tyle to many Web pages _— Ee Css. These are used to apply a uniform s without writing the same code again. "ules for creating and using style i i i Inthe * Embedded style sheets In this case, a set of styles is created as Hage ae pee ree Part of an HTML document. These are used when you want to recommended that HTML elements apply similar styles to different elements on the same Web page. that deal with style-related aspects The embedded style sheet is created using the Changing background color The output in Internet Explorer is shown in Figure 6.9. Fig 6.9 Setting background color Setting the Background image : i ir You can iat oe background of your HTML document by adding a background image using the background-image property. Consider the following HTML code: Setting background image you set the value of background-repeat The output in Internet Explorer is shown in Figure 6.10. If Property to repeat-x, then output will be as shown in Figure 6.11. Fig. 6.11 Background image with background-repeat=repeat:xy Le eee pAACTICE TIME a y) Kanay wants f0 cTeate a Web page on The Sahara Desert! Help him create the HTML document by seCi9B the background image and using appropriate background properties Solution 4, Start Notepad and type the following code: A desert is a barren area of land that receives very little precipitation. Deserts can be classified as hot or cold, semiarid oF 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. 1t covers most of the North Africa, covering an area of approximately 9, 400,000 square kilometres. Select File P» Save and save the document as deserthtml. (Open Internet Explorer Select File Pe Open. The Open dialog box's displayed Click Browse. Select the fle deserthtml and click Open. When the Open dialog box reappeas click OK ‘The Web page appears as shown in the figure 161Container Elements HTML elements 1 < both ON and OFF tags s Web Browsers A special communication program that reads and interprets HTML documents on the World Wide Web HTML The computer language used to create documents (Web pages) for display on the World Wide Web HTML Elements These are the building blocks of HTML documents. An HTML element consists of ‘pening and closing tags with the content enclosed between them. HTML Tags These are identifiers of HTML elements. They always begin with a less than sign < and end with a greater than sign >. Lr) Cea) ‘+A Web site consists of Web pages written in HyperText Markup Language (HTML) * An editor is required for creating and saving an HTML document. This can be a WYSIWYG HTML editor or a text editor * A Web browser is used to view HTML documents * Popular Web Browsers include Internet Explorer, Mozilla Firefox, and Google Chrome Tags, elements, and attributes are the components that make up an HTML code ‘An HTML document consists of two distinct parts: the head and the body Objective Type Questions 1. Fill in the blanks. a. Internet Explorer is a graphical Web browser developed by isa computer on the Internet that is used for storing and running a Web site. element of HTML does not have an OFF tag. bA c Empty Elements HTML elements thay 4, an OFF tag HTML Attributes Extra bits of informay, inside the opening tag of an elemeny L docu HEAD. Part of the HTML document conti, information about the Web page docu BODY Partof the HTML document contin. everything displayed on the Web page”? 55 Cascading Style Sheets (C55) is 3 fang, to specify Web page presentation as ¥ The HEAD section contains information dns 6 document ’ The BODY section contains everything tha displayed on the Web page, including text 2.4 graphics The