Your Aim © to learn about © Introducin . iareducing HTML © HTML tags and attributes ules for writing HTML Codes © HTML document structure «ating and saving an HTML document © Basic HTML tags esigning a web page © Editing an existing HTML document Computers connected to the network (Internet) are either servers or clients and communicate with each other through networking protocol. The clients send requests to the servers and the servers respond immediately with the required data. The server stores the files and information in the form of websites. A website is a collection of web pages. A web page is a document that contains text, graphics, videos, audios and links to other pages. Every web page of a website has a unique address called Uniform Resource Locator (URL). We can use this URL to access any web page from anywhere in the world. Have you ever wondered how these web pages are created? HTML is the most widely used language to design web pages. #2 INTRODUCING HTML HTML stands for Hypertext Markup Language. Itis a markup language that describes the structure of the web page. It allows us to create web pages “hat contain paragraphs, headings, links and block quotes. The output of HTML web pages is same on any type of computer and on any operating system, ie., Mac, Windows, etc. HTML language was redesigned by Tim Berner Lee in 1989. It is @ subset of Standard Generalized Markup Language (SGML). Key Features of HTML Some of the important features of HTML are: > Itisa platform independent language. 2 Itis not case sensitive language. jem 5 go Touchpad iPRIME (Version 1.1)}-VI+ Ttallows us to build tables Xk Itisa very easy and simple language. {&_Itallows us to add a link on the web page. xt ides a flexible way to design web pages along with the te Itprov Hypertext gto other documents oF Hypertext is a piece o web pages. Markup Language It is a language that uses 5 the browser how to display the text. 5 ordinary text that has special feature of linkin: pa text document and instructs pecial symbols called Tags to mark u Tools Needed We require two basic tools for working with HTML: + HTML editor for creating and saving the HTML documents. & Aweb browser for viewing the HTML documents. A web browse that allowsus to access the web pages on our computer. Some commonly used web brow are Google Chrome, Mozilla Firefox, Internat Explorer, et 1 is an application software ers Types of HTML Editor There are mainly two types of HTML editors named WYSIWYG editor and Text editor. Let us now discuss these editors. WYSIWYG Editor WYSIWWG stands for What You See Is What You Get. This type of editors allow the developer to see what the end result will look like when the document is created. These editors provide various tools and graphical interface where the web pages are designed. Examples of WYSIWYG editors are Adobe Dreamweaver, Amaya, Google Web Designer. Text Editor We can create HTML documents using normal text editors like Notepad or Wordpad. The user should have a proper knowledge of the HTML commands to develop a web page. #1 HTML TAGS AND ATTRIBUTES, ‘As we know that HTML is a markup language. It uses tags to markup the content of the web pages. These tags also have their attributes. Let us learn more about tags and attributes. Tags : Tags are the basic building blocks of a web page. They tell the browser how the information is e cee ‘on the web page. Tags do not appear in the browser window but they affect the lisplay of the text and non-text items in it. Each tag in HTML follows specifi HTML tags are not case sensitive. eae eeel HTML—An Introduction 2 83 _ Naan (TML document, a tag name begins with an opening angular bracket (<) and ends with losing angular bracket (>). For example, content Opening tag Closing tag Both opening and closing tags are same. The only difference is that the closing tag contains a forward slash in front of the tag name. Most of the tags in HTML have opening and closing tags. A combination of opening tag, content, and closing tag is called an element. ‘The HTML tags can be categorised as: * Container Tags: The tags that have both opening and closing tags are called Container Tags. For example tags do not enclose any data. Empty Tags: Empty tags contain only opening tag. They do not have a closing tag. These For example
,

---

, etc, HTML tags can also be further classified as: * “Block Level Tags: The block level tags take up the full width available and by default begin on a new line. Some of the block level tags are Paragraph

, headings

to

, Horizontal Rule

---

, etc, Text Level Tags: The text level tags are used to mark up parts of text. These tags do not start with new line. Some of the text level tags are Bold , Superscript , Italic , Subscript , etc Nesting of Tags Nesting of tags means that you can start a new tag before closing the previous tag. The only Point to remember is that tags are nested on LIFO principle, that is, Last In First Out. This means that the tag that has been opened last needs to be closed first. Attribute An attribute is a property that provides some additional information about a tag. It enhances the functionality of a tag. It is always specified inside the opening tag. All attributes consist of two parts ~ a name and a value. The ‘name’ is the property that you want to set. The ‘value’ is what that you want for the respective property. For example The BGCOLOR attribute of the tag is used to add a background colour to the body of the web page. Geiprmcres IPRIME (Version 1.1)-VIoc pg y ag Tog ‘

---

the width of the horizontal line in For example The WIDTH is the attribute of the

---

tag which specifies pixels or percentage. By default, the width is 100%. 47 RULES FOR WRITING HTML CODES Container tags should always be closed properly: Values given to the attributes should be enclosed within the double quotes Tag name should not contain spaces. There should be no spacs between < and > ina tag. Tags must be nested correctly. #2 HTML DOCUMENT STRUCTURE, A HTML document is a text file containing markup tags. The markup tags tell the Web browser how to display the web page. A HTML file is saved with .htm or .html extension. Basic Structure of HTML Document is as follows: HH KH Content of the page A HTML page is divided into. two sections called Head and Body. ‘which is not to be shown on the web page. 2 Head contains the information 3 Body contains the information which is te be shown on the web page. &g CREATING AND SAVING AN HTML DOCUMENT Let us start with the designing of first web page by using the basic tags and follow these steps Open the Notepad and write the following Step 1 HTML code: snes [EGE SST ne neh weer, Besreat l HTML code in Notepad L of HTML 2 ant, HTML—An Introduction ¢ 95 43 wad rehick On File menu, Click On Save © te SP en Save As diatog Select ay Fil es tron, drop-down list ieee te Step 5 Cho ; as ie a location where you the file. In this cas cia poe) Se, Desktop is tep 6 Enter name for the file "Fi Page-htmr, cette Step 7 FE Desktop, 8 Downlonds 35 Recent Places © Creative Cloud F Ur Adobe Acrobat9 Pro tended a 2h avast tree anivius set, onine | Sy tioranes WceFerce Eiperience [3 Documents © Google chrome oP Mose + Adobe.crestive Suites Master Collection-P20 1 Pictures =! Hy bare Chap trom Nahe mar Fie name: "Fist Web Pagchinl Seve attype i ote Ga) CES ee) Save As dialog box Press Ctrl + S key to open the Save As dialog box Viewing a Web Page After creating and saving a HTML document, you need to open it into a web browser to view it. To open a HTML document into web browser, perform the following steps: Step 1 Open the web browser such as Internet Explorer. Step 2 Click on the File menu. deci 86 } Touchpad IPRIME (Version 1.1)-VIStep 3 = a Select the Open option. The Open dialog box appears. : ‘ep. 4 Click on the Browse button. tep SL D ocate the file and double-click it. Web page opens in your web browser winclow. Let's explore the wondetful world of HTML Web page in web browser If the menu bar is not visible in the Internet Explorer, press the Alt key from the keyboard. You can also open the web page by double-clicking it from the folder where you have saved it. 4¥ BASIC HTML TAGS HTML provides various tags such as , , does not form part of the web page. It will be shown on the Title Bar of your web browser. The use of = =~ 90 oe iPRIME (Version 1.1)-VI FFne. DALLA f 8 eb>

teb Page on environment

Environment¢/b> is everything that i c¢/u>) things. be living (cusbiotie) or non-living (abiot ical, chemical and other natural forces They constantly interact with >Liv in their environment and adapt themselves to conditions in their environment. This web page has been created by

(enter your name here)

Locate your file in Windows Explorer and double-click on the file icon. The browser window will chow all the effects given in the HTML code for web page like this: | aera | Hs erent Sem = Ben six tey | : Boe tate Hye te O° Web Page on Environment | Environment | Environment is everyting tals around us ht oan be iving (bot) or norsiving ablote) hings, MIncludes physical, chemical and other natural foroee, Using things five in thelr envronment, They constanty interact wit Hand adapl themselves to conditions in heir environment, | el | (enter your name bere) || ae HTML—An Introduction {a4 =to foll docu low as iment: Pecial procedure. Follow these steps to edit a HTML Step 1 Locate your file. | Step 2 Right-click ‘on the file ic appears pow 3 pop-up | Ho on ver mouse pointer over Open with | meen option to open a sub-menu Serene Step 4 Click on Notepad, - This will open your HTML document in Notepad so & that you can make changes in the file. After making} Ss required changes, you need to save the file by | “"™ pressing the Ctrl+S keys. ag AT iting = If your web page is already opened in web browser, you need to press the FS Key to see the changes you have done Reb@@t- - - - --------------------- > The server stores the files and information in the form of websites. > HTMLis the most widely used language to design web pages. Hypertext is a piece of ordinary text that has special feature of linking to o documents or web pages. Step 3 ther 2k HTML stands for Hyper Text Markup Language. 2& Tags are the basic building blocks of a web page. 2 The tags that include both opening and closing tags are called Container Tags. The tag is the container tag and the outermost tag in HTML document. An attribute is a property that provides some additional information about a tag. > HTML document is a text file containing markup tags. . 2 The tag defines header area of your web page. One | Touch | Learn Section A (Objective) -Z3A. Tick (Y) the correct option. 1, All HTML tags are enclosed in ao 2 b. # i i ie 2. Which program do you need to view an HTML document? c. Web browser a. Text editor d._ None of these b, graphics Touchpad iPRIME (Version 1.1}-Vi