Page 1 :
In the chapter, • What is HTML?, HTML editors, tag attributes, 6, HTML tags, • Basic tags, . Creating and saving an HTM, document, Introduction to HTML, • Editing an HTML document, • Viewing an HTML document, . Other useful tags, You already know how to use the Internet. While surfing on the Internet, you must have, visited various websites. How colorful and nicely designed these websites are! Each screen, displayed on a website is called a web page., A website is a collection of many web pages in the same way as a notebook has, many pages. Any website or web page can be visited using the web browser software,, such as Internet Explorer, Google Chrome and Opera Safari., Let us now learn how to create a web page. To design a web page,, you need to learn a new language called HTML., What is HTML?, HTML stands for HyperText Markup Language. It is the language that is understood by a, web browser for composing text and images (still as well as animated) for a web page., HTML is basically a building block for web pages. It is a format that tells a computer, how to display a web page., HTML editor, You must be wondering which software is used to write the HTML code for designing web, pages. It is only a simple text editor like Notepad where we type HTML code and link it, to a web browser by the following simple steps:, 1. Click on Start All Programs Accessories ->, Notepad, 2. Type the HTML code or program in the Notepad window., 3. Click on File Save to save the file., If you simply type the file name in the Save As dialog box and press the Save button, the computer will save it as a notepad file with a file extension of txt'., However, you want it to be saved as a web page. So, save the file by giving the file, extension as .html' or htm'., 70, Introduction to HTML
Page 2 :
Fact box, The file extension of a web page file is 'html' or htm'., For example, first.html, intro.htm, etc., HTML tags, A web page is made up of several, elements such as the title of the, page, headings in the page (like in a, newspaper), written text, paragraphs and, images. Each element is defined by an, HTML tag. An HTML tag is nothing but, a label added to the text that is to be, shown on the web page. These labels or tags tell the web browser where particular text, is to be displayed and how it is to be displayed. HTML tags are always enclosed in angle, brackets, that is, < >,, Although MS Word is also a type of, word-processing software, it is generally not, used to create web pages. This is because of, the heavy size of the file that is created, by MS Word. So, avoid using MS Word, for creating web pages., Fact box, Although HTML tags are not case sensitive (this means that <title>, is the same as <TITLE>), lowercase is preferred at the time of coding., There are two types of HTML tags:, Container tag: HTML tags that are generally used in pairs are called container tags as, these tags are written with some text between the first and the second tags. The first, tag is called a Start tag or ON tag and the second tag is called a End tag or OFF, tag. The End tag is created by simply placing a forward slash (/) in front of the Start, tag. Examples of container tags are as follows., Start tag, End tag, <title>, </title>, <head>, </head>, e Empty tag: Empty tags are those that do not need an End tag. They are not used in, pairs and are represented only by a Start tag or ON tag. Examples of empty tags are, the line break tag <br> and the horizontal ruler tag <hr>., Nested tags, Tou can start using another tag without closing the first tag. This means that one tag, can contain other tags also. Such tags are known as nested tags., You must remember that when you start closing such tags, the tag that has been, 71, Know MORE, Introduction to HTML
Page 3 : opened last should be closed first. It is not important which tag is opened first, but is, very important which tag should be closed first. For example,, * <body> <p> <hi> This is the proper way to close nested tags </hi> </p> </bodus, Tag attributes, Attributes can be added to HTML tags. An attribute is defined, as an additional feature that can be added to the HTML, elements on your web page. For example, by using align="right", attribute, you can align your text to the right side of your, web page. The tag tells the web browser what to do and the, attribute tells the browser how to do it., Fact box, Every tag cannot, take every attribute., Basic HTML tags, HTML, An HTML tag is used to tell the browser that the text contained between <html> and, </html> is a web page and can be viewed in a web browser. Every web page coding, must start with <html> and end with </html>. An HTML tag is a container tag., Head, A Head tag is used to define the header area of your web page. The information given in, a Head tag tells the computer that this information is not to be shown on the web page., It is a container tag used in pairs as <head> and </head>. Every web page coding must, have its header specified., Title, A Title tag is used to tell the browser that the text contained between <title> and </, title> is the text that does not form part of the web page. It will be shown on the Title, bar or the Title tab of your web browser. The use of a Title tag is not mandatory. If you, do not want to give title to your web page, your web browser will show the file name, and its path as title of your web page., Body, A Body tag is used to tell the web browser that the text contained between <body> and, </body> is to be shown on the web page. It is also a container tag. A Body tag can be, used with the following attributes:, • BGCOLOR: This attribute allows you to define a color for the background of your web, page. It can be used as under:, <body bgcolor="red">, • TEXT: This attribute allows you to define a color for the text of your web page. It can, be used as under:, <body text="blue">
Page 4 :
You can use more than one attribute simultaneously, for example, <body bgcolor="red" text="white">, Smart, TIP, www., HTML understands only 16 colors by name. These are aqua, black, blue, fuchsia,, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow. The, remaining colors need to be specified by their RGB values in hexadecimal notation., For example, the RGB code for orange color is "#EE9900". In this code, EE, 99 and, 00 show how much red, green and blue colors, respectively, are to be mixed., You can try other combinations of red, green and blue colors with values from o to, 9. A, B, C, D, E, F to define new colors, where A to F represent 10-15, respectively., Creating and saving an HTML document, To start designing a web page using the basic tags, follow the steps shown in Figure 6.1., Untitled Notepad, ed Fgrmat Yew Help, chtml>, chead, title> My First Web Page </title>, <head, body bgcolor="green" text="white>, WELCOME TO HTML, </body>, </html>, Untitled Notepad, Click, on the File, L0Edit Format Yiew telp, menu., New, ChfeN, Open, veb Page </title>, Save, ChfeS, 3Click, Save As, on Save to, een" text="white">, open the, Save As, dialog box., Page Setup, Print, CideP, O Open Notepad, and write the, HTML code., Exit, smart, TIP, Deskng, You can directly open, the Save As dialog box, by pressing Ctrl + S, keys after Step 1., Pictren, 21, Foot Reader, 2, Compute, ANDhr, Quik Heal Secn e, aleo, Wnd ua, Ggle, I Locate the path in, drives available, where, the file has to be saved., Adbe, hop C Ltnded Cac, Hele, 6 Click and select All Files, from the Save as type list., ATOA K, Media, 5 In the File name, box, type the name of, the file created (here, one.html)., 7 Click on the Save, button to save your file., Savt al type, fnading M, He falders, A Fig. 6.1 Steps to design a web page using basic tags, 73, Introduction to HTM
Page 5 :
To make changes in your HTML document, follow the steps shown in Figure 6.2., 1. Locate your file in the Windows Explorer window., Editing an HTML document, 2 Right click on the, file icon to open the, right-click menu., Hover the mouse, pointer on the Open, with option to open, a sub-menu., The te, Open, de, Show fow t pen th Ne, Convert t PO sfot ede, • Open h, E 2007 Microsoft Office component, e Google Chrome, e Internet Explorer, • QuHeal ul Sey Scan, Ato ho, Ae My fist Weage, Click and select, Notepad., Notepad, 0 Opera Intermet Browser, Compres and email, Cempres to y fet Wege.i and email, O Nen Seip, Choose default program.., Astoie prit veon, Send to, Cat, Capy, Crestehert, Delete, Rename, epertie, A Fig. 6.2 Steps to edit an HTML document, This will open your HTML document in Notepad so that you can make changes in the, file and save accordingly., Viewing an HTML document, To view your web page, follow the steps given below., My First Web Page, • Locate the file in Windows Explorer., C file///D/HTML/one.html =, •Double-click on the file icon., WELCOME TO HTML, A window similar to Figure 6.3 will appear, on your monitor., Fig. 6.3, My first web page, 74, Introduction to HTML
Learn better on this topic
