BCA121_Web Designing(Draft 2)

BACHELOR OF COMPUTER APPLICATIONS SEMESTER-II WEB DESIGNING BCA 121 .1 CU IDOL SELF LEARNING MATERIAL (SLM)

CHANDIGARH UNIVERSITY Institute of Distance and Online Learning Course Development Committee Chairman Prof. (Dr.) Parag Diwan Vice Chancellor, Chandigarh University, Gharuan, Punjab Advisors Prof. (Dr.) Bharat Bhushan, Director – IGNOU Prof. (Dr.) Majulika Srivastava, Director – CIQA, IGNOU Programme Coordinators & Editing Team Master of Business Administration (MBA) Bachelor of Business Administration (BBA) Coordinator – Dr. Rupali Arora Coordinator – Dr. Simran Jewandah Master of Computer Applications (MCA) Bachelor of Computer Applications (BCA) Coordinator – Dr. Raju Kumar Coordinator – Dr. Manisha Malhotra Master of Commerce (M.Com.) Bachelor of Commerce (B.Com.) Coordinator Coordinator – Dr. Aman Jindal – Dr. Minakshi Garg Master of Arts (Psychology) Bachelor of Science (Travel &Tourism Management) Coordinator – Dr. Samerjeet Kaur Co-ordinator – Dr. Shikha Sharma Master of Arts (English) Coordinator Bachelor of Arts (General) – Dr. Ashita Chadha Co-ordinator – Ms. Neeraj Gohlan Academic and Administrative Management Prof. (Dr.) R. M. Bhagat Prof. (Dr.) S.S. Sehgal Executive Director – Sciences Registrar Prof. (Dr.) Abhishek Prof. (Dr.) Inderpreet Kaur Executive Director – Management Director – IDOL Prof. (Dr.) Manaswini Acharya Executive Director – Liberal Arts © No part of this publication should be reproduced, stored in a retrieval system, or transmitted in any form or by any means, electronic, mechanical, photocopying, recording and/or otherwise without the prior written permission of the authors and thepublisher. SLM SPECIALLY PREPARED FOR .2 CU IDOL STUDENTS Printed and Published by: SCHOOLGURU EDUSERVE PVT LTD B-903, Western Edge II, Western Express Highway, Borivali (E), Mumbai - 400066 Call Us: +91 22 4896 8005 Mail Us: CU IDOL SELF LEARNING MATERIAL (SLM) [email protected]

First Published in 2020 All rights reserved. No Part of this book may be reproduced or transmitted, in any form or by any means, without permission in writing from Chandigarh University. Any person who does any unauthorized act in relation to this book may be liable to criminal prosecution and civil claims for damages. This book is meant for educational and learning purpose. The authors of the book has/have taken all reasonable care to ensure that the contents of the book do not violate any existing copyright or other intellectual property rights of any person in any manner whatsoever. In the even the Authors has/ have been unable to track any source and if any copyright has been inadvertently infringed, please notify the publisher in writing for corrective action. .3 CU IDOL SELF LEARNING MATERIAL (SLM)

CONTENT Unit 1:HTML 1 ................................................................................................................... 4 Unit 2:HTML 2 ..................................................................................................................16 Unit 3 :HTML 3 .................................................................................................................33 Unit 4:HTML 4 ..................................................................................................................62 Unit 5:HTML 5 ..................................................................................................................99 Unit6:Cascading Style Sheets 1..........................................................................................136 Unit 7 :Cascading Style Sheets 2........................................................................................152 Unit8:Cascading Style Sheets 3 .........................................................................................173 Unit 9:Cascading Style Sheets 4.........................................................................................193 Unit 10:Java Script 1 ........................................................................................................212 Unit 11:Java Script 2 ........................................................................................................256 .4 CU IDOL SELF LEARNING MATERIAL (SLM)

UNIT 1HTML 1 Structure 1.0 LearningObjectives 1.1 Introduction 1.2 Basic structure of an HTML document 1.3 Creating an HTML document 1.4 Summary 1.5 KeyWords/Abbreviations 1.6 LearningActivity 1.7 Unit End Questions (MCQ andDescriptive) 1.8 References 1.0LEARNINGOBJECTIVES After studying this unit, you will be able to:  Explain Basic structure of an HTML document  Discuss to create an HTML document 1.1INTRODUCTION HTML stands for Hyper Text Markup Language.HTML is the standard markup language for creating Web pages .HTML describes the structure of a Web page.HTML consists of a series of elements.HTML elements tell the browser how to display the content.HTML elements label pieces of content such as \"this is a heading\", \"this is a paragraph\", \"this is a link\", etc.Hypertext markup language, or HTML, is the language of the World Wide Web. Every page found on the World Wide Web, from USAToday to WPI, is written in HTML.HTML is a way of describing to the browser, such as Netscape Navigator, Microsoft Internet Explorer, or Mosaic, how to display and format text and images on a page. It consists of a series of commands, called tags, which begin with a < and then end with a .5 CU IDOL SELF LEARNING MATERIAL (SLM)

>Tags tell the browser what to do with the text or images associated with it. Web pages or materials in the form of hypermedia documents accessed through the Internet can be located anywhere in the world. No matter where they originated, most Web documents are created using Hypertext Markup Language (HTML). HTML is a powerful authoring language and has different versions like HTML 4.2, HTML 4.0, HTML 3.2, HTML 3.0 and HTML 2. HTML is used to define document structure and format, with the help of a single tag or a pair of tags. A tag is a string in the language surrounded by a less than () sign. An opening tag does not begin with a slash (/). An ending or closing tag is a string that begins with a slash (/). HTML documents format textual information with embedded markup tags that provide style and structure information. A whole document in HTML begins with and ends with and ends with</HTML> 1.2 BASIC STRUCTURE OF AN HTML DOCUMENT An HTML document has two* main parts: 1. Head- The head element contains title and Meta data of a web document. 2. Body-The body element contains the information that you want to display on a web page. To make your web pages compatible with HTML 4, you need to add a document type declaration (DTD) before the HTML element. Many web authoring software add DTD and basic tags automatically when you create a new web page.In a web page, the first tag (specifically, <html>) indicates the markup language that is being used for the document. The <head> tag contains information about the web page. Lastly, the content appears in the <body> tag. The following illustration provides a summary. .6 CU IDOL SELF LEARNING MATERIAL (SLM)

FIG 1.1Basic structure of Html To create a true HTML document you will start with three container elements:  <html>  <head>  <body> These three combine to describe the basic structure of the page:  <html>: This element wraps all the content of the page (except the DTD)  <head>: This element designates the header part of the document. You can include optional information about the Web page, such as the title (the browser shows it in the title bar), optional search keywords and an optional style sheet  <body>: This element contains the content of your Web page, that is, what we want to appear in the navigation area of the browser There is only one correct way to combine these three elements. Here is its exact placement, with the doctype at the top of the page: <!DOCTYPE html> <html> .7 CU IDOL SELF LEARNING MATERIAL (SLM)

<head> ... </head> <body> ... </body> </html> 1.3 CREATING AN HTML DOCUMENT An HTML document can be created using any HTML editor or text editor like notepad etc. Before you start writing code to write a web page, it is a good practice to plan ahead the appearance of the web page. An HTML document has two elements:  Document Content  Tags Document content is the information on a web page that the user will see. That information could be text or graphics, for example. As you start creating your own web pages, try finding out first what information you want to display and how you want to present it. Tags are the HTML codes that control how the document content will appear. The tags, in other words, will determine whether the text will be bold, black or blue, or of font type Time New Roman or Arial. Naming conventions HTML files names are very important as they are used to locate or open the files. Remember these points when naming HTML files: Save your web page files with the .htm or .html file extension. (Both of these files represent HTML files, older systems such Windows 3.1 and DOS cannot recognize four-letter file extensions. Because the first three letters of .html and .htm are the same, those systems ignore the \"l\" and just recognize \".htm\".).Some web servers are case-sensitive. That means those web servers would consider page1.htm and Page1.htm as two different files. To avoid case sensitivity problems, use only lowercase or uppercase letters to name your files. Filenames should consist only of letters and numbers. Avoid using spaces, punctuation, or special characters. If you need to separate words, use hyphen (-) and .8 CU IDOL SELF LEARNING MATERIAL (SLM)

underscores (_) for example creating-an-HTML-document.htm or creating_an_HTML_document.htm.These same recommendations should also be applied to naming folders of your web site. See the example below: -- The image shows folder names follow the same naming conventions as the file names; for instance, folder names and file names are separated by a hyphen if the name consists of more than one word. Steps for Creating A Simple Html Program .9 CU IDOL SELF LEARNING MATERIAL (SLM)

1. Go to Start -> Programs->Accessories->Notepad. 2. Begin with a document type tag and an <HTML> opening tag. Enter the following line in your doc. <HTML> 3. Indicate that you are beginning the head element of a document by issuing the <HEAD> opening tag. If a <HEAD> element is included, it must appear within an <HTML> element. The following line should appear next in your document: <HEAD> 4. The <TITLE> element is used to indicate the title of an HTML document. <TITLE> tags are placed within the head component of a document and the title is placed between the opening and the closing <TITLE> tags. Add the following <TITLE> element to your document. <TITLE>My First Page</TITLE> 5. To end the head area issues a <HEAD> closing tag. </HEAD> Thus the <HEAD> element is nested within the <HTML> element. 6. At this point the body of the document is developed. A <BODY> opening tag indicates that this point has been reached. Enter the following line. <BODY> 7. In the following example, the body of the document contains a simple text statement which you can now enter in your file: Hello World! 8. A </BODY> closing tag marks the end of the <BODY> element. Similar to the Head element, the <BODY> element is also completely nested within the <HTML> element. To end the <BODY> element, issue the closing corresponding tag in your document. </BODY> .10 CU IDOL SELF LEARNING MATERIAL (SLM)

9. Finally, terminate the <HTML> tag with </HTML> as shown below: 10. Save your document as mypage.html 11. To view the document opens the .html document in the browser. 1.4 SUMMARY  HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to develop web pages. HTML was created by Berners-Lee in late .11 CU IDOL SELF LEARNING MATERIAL (SLM)

1991 but \"HTML 2.0\" was the first standard HTML specification which was published in 1995. HTML 4.01 was a major version of HTML and it was published in late 1999. Though HTML 4.01 version is widely used but currently we are having HTML-5 version which is an extension to HTML 4.01, and this version was published in 2012.  Originally, HTML was developed with the intent of defining the structure of documents like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers. Now, HTML is being widely used to format web pages with the help of different tags available in HTML language.HTML is a MUST for students and working professionals to become a great Software Engineer specially when they are working in Web Development Domain.  HTML is a markup language and makes use of various tags to format the content. These tags are enclosed within angle braces <Tag Name>. Except few tags, most of the tags have their corresponding closing tags. For example, <html> has its closing tag </html> and <body> tag has its closing tag </body> tag etc.  To learn HTML, you will need to study various tags and understand how they behave, while formatting a textual document. Learning HTML is simple as users have to learn the usage of different tags in order to format the text or images to make a beautiful webpage.  The <!DOCTYPE> declaration tag is used by the web browser to understand the version of the HTML used in the document. Current version of HTML is 5 and it makes use of the following declaration –  There are many other declaration types which can be used in HTML document depending on what version of HTML is being used. We will see more details on this while discussing <!DOCTYPE...> tag along with other HTML tags.  To convey information about a document's structure or presentation, markup information is added to the document. Markup languages are widely used in everyday computing. For instance, word processors use codes that indicate the structure and presentation of a document. The word processors write, behind the scenes, the necessary markup to produce a document that you see on the screen. HTML, however, is not a behind-the-scenes markup language.HTML stands for Hypertext Markup Language. This markup language is used to create web documents .12 CU IDOL SELF LEARNING MATERIAL (SLM)

1.5KEY WORDS/ABBREVIATIONS  Body: The body is the container for all of a page’s content. Comes after the <head> tag, within the overall <html> tag.  Comments: HTML comments are sometimes used in code to explain parts of the markup. They are similar to comments in other languages. Users do not see comments in their browser.  Lists: A list is a sequence of paragraphs, each of which may be preceded by a special mark or sequence number.  DIR: A list of short elements, typically less than 20 characters. These may be arranged in columns across the page, typically 24 character in width. If the rendering software is able to optimize the column width as function of the widths of individual elements, so much the better.  MENU: A list of smaller paragraphs. Typically one line per item, with a style more compact than UL. 1.6LEARNINGACTIVITY 1. Write HTML code to develop a Web page having the background in red and title “My First Page” in any other colour. __________________________________________________________________________ __________________________________________________________________________ 2. Write a program to use the correct HTML tag to add a heading with the text \"London\". __________________________________________________________________________ __________________________________________________________________________ 1.7UNIT END QUESTIONS (MCQ ANDDESCRIPTIVE) A. Descriptive TypesQuestions 1. Create a Web page, which should contain a table having two rows and two columns. 2. Create a web page, showing an unordered list of names of five of your friends. 3. Discuss and illustrate basic element of HTML. 4. Write HTML code to develop a Web page having the background in red and title “My First Page” in any other colour. 5. Create an HTML document giving details of your name, age, telephone number, .13 CU IDOL SELF LEARNING MATERIAL (SLM)

address, TLC code & enrolment number aligned in proper order. B.Multiple Choice Questions 1. Which attribute specifies a unique alphanumeric identifier to be associated with an element? (a) class (b) id (c) article (d) html 2. The _____________ attribute specifies an inline style associated with an element, which determines the rendering of the affected element. (a) dir (b) style (c) class (d) article 3. Which attribute is used to provide an advisory text about an element or its contents? (a) tooltip (b) dir (c) title (d) head 4. The __________ attribute sets the text direction as related to the lang attribute. (a) lang (b) sub (c) dir (d) ds 5. Which of the following is the attribute that specifies the column name from the data source object that supplies the bound data? (a) dataFormatAs .14 CU IDOL SELF LEARNING MATERIAL (SLM)

(b) datafld (c) disabled (d) datasr Answers 1. (b), 2. (b), 3. (c), 4. (c),5. (b) 1.8 REFERENCES  John Ducket (2011). HTML & CSS: Design and Build Web Sites. United States: Willy Publications.  Mark Pilgrim (2010). HTML5: Up and Running. United States: O’Reilly Publications.  Bill Kennedy and Chuck Musciano (2000). HTML & XHTML: The Definitive Guide. United States: O’Reilly Publications.  http://egyankosh.ac.in/bitstream/123456789/9969/1/Section-1.pdf  https://www.w3schools.com/html/html_intro.asp  https://www.javatpoint.com/html-tutorial  https://www.codecademy.com/learn/learn-html  Research Articles in Simplified HTML: A Web-first format for HTML-based scholarly articlesSilvio Peroni  Research Articles in Simplified HTML: a Web-first format for HTML-based scholarly articlesNuzzolese AG, Poggi F, Vitali F, Motta E. 2017 .15 CU IDOL SELF LEARNING MATERIAL (SLM)

UNIT 2 HTML 2 Structure 2.0 LearningObjectives 2.1 Introduction 2.2 Mark up Tags 2.3 Heading-Paragraphs 2.4 Line Breaks HTML Tags 2.5 Summary 2.6 KeyWords/Abbreviations 2.7 LearningActivity 2.8 Unit End Questions (MCQ andDescriptive) 2.9 References 2.0LEARNINGOBJECTIVES After studying this unit, you will be able to:  Discuss Markup Tags  Explain Heading-Paragraphs  Explain Line Breaks HTML Tags 2.1INTRODUCTION To convey information about a document's structure or presentation, markup information is added to the document. Markup languages are widely used in everyday computing. For instance, word processors use codes that indicate the structure and presentation of a document. The word processors write, behind the scenes, the necessary markup to produce a document that you see on the screen. HTML, however, is not a behind-the-scenes markup language.HTML stands for Hypertext Markup Language. This markup language is used to .16 CU IDOL SELF LEARNING MATERIAL (SLM)

create web documents. A web document is viewed in a web browser, like the one you are using to read this document. Just like in a word processor you can specify the appearance of text, you can write HTML code to specify how the text or content of a web page should look. For instance, in a word processor, you could choose to use Times Roman for font type and make some text bold or italic. Similarly, in HTML code you could specify what type of font to use or whether it should be bold or not. In the former, you could make the selection using a mouse; however, for the letter, you would have to write instructions or HTML code. 2.2 MARK UP TAGS A markup tag is a directive that contains snippet of code with a relative reference to an object in your store such as a variable, URL, image, or block. Markup tags can be used anywhere the editor is available and incorporated into the HTML of email and newsletter templates, as well as other types of content. Markup tags are enclosed in double, curly braces, and can either be generated by the Widget tool, or typed directly into HTML content. A “markup tag” is the fundamental characteristic of HTML. Every markup tag is a command placed between “wickets” or “angle brackets”—a left bracket (<) and a right bracket (>). Markup tags are not revealed by a web browser; they are invisible. In most cases, markup tags (containing commands) come in pairs, with text or a graphic image located between the beginning and ending tags: <COMMAND>text or graphic image</COMMAND>: controls or regulates the text or graphic image information between the two non-empty markup tags. Pairs of markup tags are referred to as “non-empty” tags, because something is contained between the beginning tag and the ending tag. A beginning tag and an ending tag are identical, except a “slash” (/) are placed before the command of the ending tag to tell the browser that the command has been completed.Frequently, certain parameters are included within the beginning command tag, placed before the second bracket: PARAMETER1=\"X\" PARAMETER2=\"Y\": Provide supplementary instructions (such as colorization, measurement, location, alignment, or other appearances) to the data between the markup tags. Note: Although quotation marks (\" \") for supplementary parameters will be included in all examples in this tutorial, these quotation marks are optional for most browsers and usually do not need to be included in source code documents. One of the most common errors in HTML scripting is leaving out one pair of quotation marks (\"), causing the marked up version to appear jumbled or nonsensical. This is one reason why elimination altogether .17 CU IDOL SELF LEARNING MATERIAL (SLM)

of quotation marks around parameter variables may be the best option. So, a typical pair of non-empty HTML tags in a source code, with the first tag containing a command along with a few parameters, would resemble this: <COMMAND PARAMETER1=\"X\" PARAMETER2=\"Y\" PARAMETER3=\"Z\">text</COMMAND> Some HTML tags are referred to as “empty” tags, because they consist only of a single tag rather than a pair of tags. That is, an “empty” tag consists only of a <COMMAND> tag and lacks an ending </COMMAND> tag. Examples of non-empty and empty tags will be given in other sections, recommend using UPPERCASE letters for all HTML commands and associated parameters, because it is easier to distinguish them from regular text whenever one creates or proofreads an HTML source code document. As told earlier, HTML is a markup language and makes use of various tags to format the content. These tags are enclosed within angle braces <Tag Name>. Except few tags, most of the tags have their corresponding closing tags. For example, <html> has its closing tag </html> and <body> tag has its closing tag </body> tag etc. Above example of HTML document uses the following tags – Table 2.1 Mark up Tags Sr.No Tag & Description 1 <!DOCTYPE...> This tag defines the document type and HTML version. 2 <html> This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>...</head> and document body which is represented by <body>...</body> tags. 3 <head> This tag represents the document's header which can keep other HTML tags like <title>, <link> etc. .18 CU IDOL SELF LEARNING MATERIAL (SLM)

4 <title> The <title> tag is used inside the <head> tag to mention the document title. 5 <body> This tag represents the document's body which keeps other HTML tags like <h1>, <div>, <p> etc. 6 <h1> This tag represents the heading. 7 <p> This tag represents a paragraph. To learn HTML, you will need to study various tags and understand how they behave, while formatting a textual document. Learning HTML is simple as users have to learn the usage of different tags in order to format the text or images to make a beautiful webpage.World Wide Web Consortium (W3C) recommends to use lowercase tags starting from HTML 4. HTML Document Structure A typical HTML document will have the following structure − <html> <head> Document header related tags </head> <body> Document body related tags </body> </html> The <!DOCTYPE> Declaration The <!DOCTYPE> declaration tag is used by the web browser to understand the version of the HTML used in the document. Current version of HTML is 5 and it makes use of the following declaration − <!DOCTYPE html> .19 CU IDOL SELF LEARNING MATERIAL (SLM)

There are many other declaration types which can be used in HTML document depending on what version of HTML is being used. 2.3 HEADING-PARAGRAPHS HTML Headings- Any document starts with a heading. You can use different sizes for yourheadings. HTML also has six levels of headings, which use the elements <h1>,<h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser addsone line before and one line after that heading. The lower the number, the larger theheading size, as shown Example Type the HTML code in your Notepad window as shown in the figurebelow. Fig 2.1 HTML code in Notepad window The output is shown as per the following figure. .20 CU IDOL SELF LEARNING MATERIAL (SLM)

Fig 2.2 output of code Fig.2.3 Heading Use the headings to set titles and subheadings. Mark with h1 the primary title on the page. It's recommended to have only one h1 on the page that is similar to the <title> head tag to show Google and other search engines what the page is about. .21 CU IDOL SELF LEARNING MATERIAL (SLM)

<h1>An example heading</h1> There are 6 different heading sizes, the one marked with 1 being the most important in hierarchy. <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> To change the different heading sizes all you need to do is change h2 to whatever like h5. Headings go from largest (h1) to smallest (h6). Also headings are good to use when you want to make something big like a title of your web page. Another thing that you can do with headings is something that we haven't done before. You can make the text centered or to the right side of the screen. <h3style=\"text-align: center;\">Check this out! </h3> Example- <p> This paragraph contains a lot of lines in the source code, but the browser ignores it. </p> <p> This paragraph contains a lot of spaces in the source code, but the browser ignores it. </p> .22 CU IDOL SELF LEARNING MATERIAL (SLM)

Paragraphs- There is also another tag that you can use to make line breaks. It is called the paragraph tag. <p>Check</p> <p>this</p> <p>out! </p> The p tag makes a bigger line break than the br tag. The paragraph tag is normally used when you are writing paragraphs. At the beginning of the paragraph you would begin the p tag and at the end you would end it. That way it would make a line break at the beginning and end of your paragraph. There is one more use for the p tags. You can use them to align things just like the heading tags. <pstyle=\"text-align: left;\">Check</p> <pstyle=\"text-align: center;\">this</p> <pstyle=\"text-align: right;\">out!</p> Example <p>This is a paragraph.</p> <p>This is another paragraph.</p> HTML documents are divided into paragraphs. Paragraphs are defined with the tag. Each paragraph of text should go in between an opening and a closing tag as shown below in the example: Type the HTML code in your Notepad window as shown in the figure bellow. .23 CU IDOL SELF LEARNING MATERIAL (SLM)

Fig 2.4 Paragraph notepad The output is shown as per the following figure. Fig 2.5 Output of example .24 2.4 LINE BREAKS HTML TAGS CU IDOL SELF LEARNING MATERIAL (SLM)

When you are making a web page you just might want to make the browser go to a new line. If you have tried that you might see that just pressing enter doesn't work. You have to insert a tag to do that for you. Check <br /> this <br /> out! As you can see the br tag is one of the few tags that you don't need to close. Also if you need to you can use more than one br tag at once to have a bigger space. Example- <p>This is<br>a paragraph<br>with line breaks.</p> Use the tag, if you want a line break (a new line) without starting a new paragraph. The element is an empty HTML element. It has no end tag. The tag has a space between the characters br and the forward slash. If you omit this space, older browsers will have trouble rendering the line break, while if you miss the forward slash character and just use it is not valid in XHTML.Type the HTML code in your Notepad window Fig 2.6 HTML code in Notepad .25 The output is shown as per the following on the web browser CU IDOL SELF LEARNING MATERIAL (SLM)

Fig 2.7 output as per the following on the web browser 2.5 SUMMARY  HTML has six levels of headings, starting with '1' for the most significant and working down to '6'. The associated text is highlighted by the Browser to stand out against the normal body text. The syntax of the heading element is<Hn>Heading Text</Hn>  A “markup tag” is the fundamental characteristic of HTML. Every markup tag is a command placed between “wickets” or “angle brackets”—a left bracket (<) and a right bracket (>). Markup tags are not revealed by a web browser; they are invisible.  Some HTML tags are referred to as “empty” tags, because they consist only of a single tag rather than a pair of tags. That is, an “empty” tag consists only of a <COMMAND> tag and lacks an ending </COMMAND> tag.  Pairs of markup tags are referred to as “non-empty” tags, because something is contained between the beginning tag and the ending tag. A beginning tag and an ending tag are identical, except a “slash” (/) is placed before the command of the ending tag to tell the browser that the command has been completed.  HTML defines six levels of headings. A heading element implies all the font changes, paragraph breaks before and after, and any white space necessary to render the heading. The heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most important) level and H6 the least.  Headers play a related role to lists in structuring documents, and it is common to number headers or to include a graphic that acts like a bullet in lists. HTML 3.0 .26 CU IDOL SELF LEARNING MATERIAL (SLM)

recognizes this with attributes that assist with numbering headers and allow authors to specify a custom graphic.  Paragraph elements are marked using the <p> tag. Whenever the browser encounters a <p> tag, it starts the contents marked by it on a new line. Note that if you start a sentence on a new line within the <p> tag, or if you indent sentences using spaces, the browser will simply ignore all of this white-space.  When you use a paragraph tag, the browser will automatically show its contents on a new line. What if you want to start something that is within your paragraph on a new line? You can use the line break tag <br/> for that 2.6KEY WORDS/ABBREVIATIONS  UL:A list of multi-line paragraphs, typically separated by some white space and/or marked by bullets, etc.  Menu:A list of smaller paragraphs. Typically one line per item, with a style more compact than UL.  Dir:A list of short elements, typically less than 20 characters. These may be arranged in columns across the page, typically 24 character in width. If the rendering software is able to optimize the column width as function of the widths of individual elements, so much the better.  Tags & Elements: Tags are basic labels that define and separate parts of your markup into elements. They are comprised of a keyword surrounded by angle brackets <>. Content goes between two tags and the closing one is prefixed with a slash (Note: there are some self-closing HTML tags, like image tags). Tags also have attributes, which are  Usage- The basic tag that defines an html document. 2.7 LEARNINGACTIVITY 1. Create an HTML for paragraph. __________________________________________________________________________ __________________________________________________________________________ 2. Create a page to show different attributes: italics, bold, underline. __________________________________________________________________________ .27 CU IDOL SELF LEARNING MATERIAL (SLM)

__________________________________________________________________________ 2.8 UNIT END QUESTIONS (MCQ ANDDESCRIPTIVE) A. Descriptive Types Questions 1. Explain the different basic tags used in HTML? 2. What is the extension of an HTML Document? 3. Write and illustrate what is the extension of an HTML Document? 4. Write the different heading tags used in HTML? 5. Write an HTML code to design a page containing text, in form of paragraphs giving suitable heading style. B. Multiple Choice Questions 1. HTML stands for? (a)Hyper Text Markup Language (b)High Text Markup Language (c)Hyper Tabular Markup Language (d)None of these 2. Which of the following tag is used to mark a beginning of paragraph? (a)-<TD> (b)-<br> (c)-<P> (d)-<TR> 3. From which tag descriptive list starts? (a)<LL> (b)<DD> .28 CU IDOL SELF LEARNING MATERIAL (SLM)

(c)<DL> (d)<DS> 4. Correct HTML tag for the largest heading is (a)-<head> (b)-<h6> (c)-<heading> (d)-<h1> 5. The attribute of <form> tag (a)Method (b)Action (c)Both (a)&(b) (d)None of these Answers 1. (a), 2. (c), 3. (c), 4. (d), 5. (c) 2.9REFERENCES  Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics Jennifer Robbins 2018  Web Design with HTML, CSS, JavaScript and jQuery SetJon Duckett2014  HTML and CSSDesign and Build WebsitesJon Duckett2011  https://egyanagar.osou.ac.in/slm-hyper-text-markup-language-html.html  egyankosh.ac.in/bitstream/123456789/11763/1/Unit-2.pdf .29 CU IDOL SELF LEARNING MATERIAL (SLM)

 https://www.w3schools.com/html/html_intro.asp  https://html-css-js.com/html/tutorial/heading-paragraph-comment-list.php  Main Content Detection in HTML Journal Articles Alastair R. Rae  Introduction to HTML (Hyper Text Markup Language) - A Review PaperMay 2018  Research Articles in Simplified HTML: a Web-first format for HTML-based scholarly articlesabio Vitali, Enrico Motta .30 CU IDOL SELF LEARNING MATERIAL (SLM)

UNIT 3 HTML 3 Structure 3.0 LearningObjectives 3.1 Introduction 3.2 Working with Text 3.3 Working with Lists 3.4 Working with Hyperlinks 3.5 Images and Multimedia 3.6 Summary 3.7 KeyWords/Abbreviations 3.8 LearningActivity 3.9 Unit End Questions (MCQ andDescriptive) 3.10 References 3.0LEARNINGOBJECTIVES After studying this unit, you will be able to:  Explain Working with Text  Explain Working with Lists  Explain Working with Hyperlinks  Explain Images and Multimedia 3.1INTRODUCTION HTML is one language in a class of markup languages, the most general form of which is Standard Generalized Markup Language, or SGML. Since SGML is complex, HTML was .31 CU IDOL SELF LEARNING MATERIAL (SLM)

invented as a simple way of creating web pages that could be easily accessed by browsers. HTML is a special case of SGML. HTML consists of tags and data. The tags serve to define what kind of data follows them, thereby enabling the browser to render the data in the appropriate form for the user to see. There are many tags in HTML, of which the few most important ones are introduced in this unit. HTML files usually have the extension \".htmW or \".htmln. If you want to create Web pages, you need a tool to write the HTML code for the page. This can be a simple text editor if you are hand-coding HTML. You also have sophisticated HTML editors available that automate many (though not all) of the tasks of coding HTML. You also need a browser to be able to render your code so that you can see the results.Static web pages are written using markup languages like HTML. A markup language is simply a set of tags which are used to \"markup\" text documents so that sections of text can be logically arranged and labeled. The browser parses this document, looking for markup tags, and then arranges and formats the document according to the properties of the tags. Dynamic web pages provide instant access to highly relevant information and are created using technologies like; CGI, ASP, Cold Fusion, JSP, PHP, etc. Markup languages (HTML, XML) are somewhat different from both \"programming languages\" (C, C++, VB etc.) which are used to write general purpose programs and \"scripting languages\" (PHP, ASP, JSP, JavaScript, VB Script) which are used for adding dynamism in web page design. HTML is the Hyper Text Markup Language which defines a web page. In this section, you will study about basics of HTML with the help of several examples. You will learn progressively how to make web pages more animated and interactive by using frames, forms and links. A simple web page is a hypertext document written using the HTML which is nothing but a text file made up of HTML elements and ASCII text. These HTML elements are defined using HTML tags. 3.2 WORKING WITH TEXT While publishing a webpage many times you are required to put headings and subheadings, some important word as bold or underline or italics and many more enhancements of text such as changing the colour of text as well as background. In this section, you will study how to organize text in an HTML document as per your requirement. One of the ways to differentiate a portion of text from rest of the text is by use of header tag. These tags allow you to create different level of emphasized headings to organize your document. Headings These are container tags having range from level l to 6. defines the largest heading; defines the smallest heading. See the result of the following input to an html file .32 CU IDOL SELF LEARNING MATERIAL (SLM)

Fig 3.1 Input heading structure Fig 3.2 output of heading structure Emphasizing Text Explicit tags, often-called Physical tags tell the browser how the programmer wants text to appear physically. Some of the common physical tags are tabulated in Table 3.1 .33 CU IDOL SELF LEARNING MATERIAL (SLM)

Table 3.1 Emphasizing Text Two physical tags can be applied together on the same portion of text. Implicit tags, also called logical styles give some freedom to browser in displaying text. These tags are relative to one another, depending upon the browser. Some basic implicit tags are tabulated in Table 3.2 Table 3.2implicit tags Unlike physical tags, these tags are not generally effective when used together. Use the following listing to see the difference between physical and logical tags, if your browser shows any .34 CU IDOL SELF LEARNING MATERIAL (SLM)

Figure 3.3 Use of tags for text enhancement Please note that if in your HTML text you have mis-spelt a word, it cannot be flagged or corrected by the browser. For example, in the Figure 3.3 the incorrect word 'described' is due to the fact that in the HTML code you have entered it in the same way. Thus, you must make sure that all the spellings used in your text are correct. .35 CU IDOL SELF LEARNING MATERIAL (SLM)

Appearance of the text The appearance of the text in an HTML document can be controlled using and tags along with face, color and size attribute. Face=\"face-name\" defines the font-name, like set the font to Times Roman. You can also provide a list of acceptable choices, like for example, where Times is listed as first choice, while Arial and Helvetica as, alternatives. Size attribute is used to specify character height for the text, on a relative scale from 1 through 3.3 (normal font size being 3). The size can be stated in absolute terms like \"size-S\" or relatively like \"size=+2\". The colour attribute can also be specified using a hexadecimal color value like color=\"#eeffOO\" or one of the standard color names like color=\"red\". In addition, to changing the font colour, you can also change the background colour of the window in which text is being displayed. This can be done using bgcolor attribute in the body tag. Figure 3.4 displays the change in background and text colour. A character entity has three parts: an ampersand (&), an entity name or # and an entity number, and finally a semicolon (;). To display a less than sign in an HTML document we must write: &It; or <. Some most common entities are tabulated in Table 3.3 Table 3.3 Common Entities You may use-name or a number as per your choice. Though a name is easier to remember compared to a number, all browser do not support name. Note that the entities are case sensitive. Now try out the following lines in notepad and see the output .36 CU IDOL SELF LEARNING MATERIAL (SLM)

Figure 3.4 Use of background colour, Text colour and displaying special characters 3.3WORKING WITH LISTS Lists enhance the display. HTML supports ordered, unordered and definition lists. Ordered List: A list of items in which items are marked with numbers is called an ordered list. An ordered list is created with the and tags. Each list item starts with the -cli» tag and list heading is given by -dh» tag. The output of following text in template.html will generate the output shown in figure. .37 CU IDOL SELF LEARNING MATERIAL (SLM)

Fig 3.5 an ordered List Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc. A list inside a list is called nested list. The \"type\" attribute of tag is used to list items in numbers, Roman numerals or letters as per requirement. The various attribute value along with description is tabulated in Table3.4 Table3.4 Attribute Values .38 CU IDOL SELF LEARNING MATERIAL (SLM)

The output of the following nested lists using attribute is shown in the Figure 3.6 .39 CU IDOL SELF LEARNING MATERIAL (SLM)

Fig3.6 a nested ordered list Unordered lists: The list items are marked with bullets in an unordered list. -cub- and <lul> tags are used to create unordered lists. Each list item starts with the <li> tag. The type attribute of <li> tag when has \"valueecircle\" creates a circle and when has \"value=disc\" creates a filled circle (bullet). Inside a list item you can put paragraphs, line breaks, images, links, other lists etc. Definition lists: These lists are' also known as glossary lists which consist of a list of terms and explanation of the terms. A definition list starts with the <rll> tag, each definition-list term starts with the -cdc- tag and each definition-list definition starts with the <dd> tag. For example, enter the following lines in prog .htrnl and view result. Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images, links, other lists etc. Follows here is an example along with its output that shows how unordered list and definition list works. .40 CU IDOL SELF LEARNING MATERIAL (SLM)

Fig 3.7 Definition Lists and Un ordered Lists 3.4 WORKING WITH HYPERLINKS Links are used to connect various web resources to your current document. It is done by anchor tags and href attribute of this tag. An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc. These links are called hypertext links and would appear underlined or in different colour to distinguish it from normal text. There are two categories of links: Relative links and Absolute links. Relative links: Theses refer documents in the current directory or within the same page on which the link is used. For .41 CU IDOL SELF LEARNING MATERIAL (SLM)

references to the current document, you need to use two instances of the anchor tag Hypertext link as link to section 1 , Reference point for that link as Section 1 starts here .42 CU IDOL SELF LEARNING MATERIAL (SLM)

Fig 3.8 the Page showing hyperlinks and its effect When <base> tag is used in an HTML document, references are then always relative to the url given in the tag. For example: <base href= http://www.ignou.comlcgi-bin> <a href= \"submit.pl\"> refers to http://www.ignou.comlcgi-binlsubmit.pl irrespective of the actual location of the document Absolute links: These provide full address or the url of the document, described in the link text. Animated GIFs: These are multiple gif files contained in a file with information how long a frame should stay on the screen. Like ordinary gif files, animated gif files also have an extension of gif. Only web browsers that support animated gifs can fmd out if a file is animated or not. In browsers that do not support animated gifs, such files are displayed as static. Table 3.5 attributes with<marquee> tag .43 CU IDOL SELF LEARNING MATERIAL (SLM)

<blink> tag: This tag supported only by netscape navigator, blinks the text. Enter the following line of text in notepad and check in your browser for difference: <marquee bgcolor='red' 100p=3 height=24> This is scrolling text <lmarquee> <blink> Blinking text <!blink> 3.5 IMAGES AND MULTIMEDIA Images-You can display images in a HTML document. There are many image formats available today; few being most popular are GIF, JPEG, PCX, PNG, WMF etc. While inserting images in an HTML document, one should restrict to JPEG or GIF formats only because these two formats are widely supported by a range of web browsers. In HTML, images are defined with the <img> tag with its src attribute (src stands for \"source\"). The value of the src attribute is the URL of the image you want to display on your page. The - cirng> tag is empty, which means that it contains attributes only and it has no closing tag. The syntax of defining an image: <img src= \"url\"> The URL points to the location where the image is stored. Assume that an image named \"image2.jpg\" located in the directory \"ignou\" in \"D:\" drive has the URL: D: llignou/image2.jpg. The browser puts the image where the image tag occurs in the document. For example, the following listing will put the image before the text as shown in figure .44 CU IDOL SELF LEARNING MATERIAL (SLM)

Fig 3.9Use of Graphics using HTML When an inline image is inserted in an HTML document along with text, by default the text is aligned with the bottom of the image as shown in Figure3.9.The default alignment can be changed in Table 3.6 Table 3.6 Default Alignment .45 CU IDOL SELF LEARNING MATERIAL (SLM)

Fig 3.10: Alignment of Images in HTML The Alt Attribute An alternative text is provided with an image for users of text-based browsers or the ones .46 CU IDOL SELF LEARNING MATERIAL (SLM)

who turn off the graphics to increase the download speed of the web pages. The browser will then display the alternate text instead of the image. This can be done by using the following syntax: < img src=\"d://ignou/image1.jpg\" alt='Internet Explorer\"> The \"alt\" attribute is to improve the display and usefulness of your document that tells the user what they are missing in absence of a graphics based browser. Multimedia- Multimedia comes in many different formats. It can be almost anything you can hear or see, like images, music, sound, videos, records, films, animations, and more. Web pages often contain multimedia elements of different types and formats. Multimedia Formats Multimedia elements (like audio or video) are stored in media files. The most common way to discover the type of a file, is to look at the file extension. Multimedia files have formats and different extensions like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi Common Video Formats - There are many video formats out there. The MP4, WebM, and Ogg formats are supported by HTML.The MP4 format is recommended by YouTube. Table 3.7 Common Video Formats Format File Description MPEG .mpg MPEG. Developed by the Moving Pictures Expert Group. The first .mpeg popular video format on the web. Not supported anymore in HTML. .47 CU IDOL SELF LEARNING MATERIAL (SLM)

AVI .avi AVI (Audio Video Interleave). Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers. WMV .wmv WMV (Windows Media Video). Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers. QuickTime .mov QuickTime. Developed by Apple. Commonly used in video cameras and TV hardware. Plays well on Apple computers, but not in web browsers. Real Video .rm Real Video. Developed by Real Media to allow video streaming with .ram low bandwidths. Does not play in web browsers. Flash .swf Flash. Developed by Macromedia. Often requires an extra component .flv (plug-in) to play in web browsers. Ogg .ogg Theora Ogg. Developed by the Xiph.Org Foundation. Supported by HTML. WebM .webm WebM. Developed by Mozilla, Opera, Adobe, and Google. Supported by HTML. MPEG-4 .mp4 MP4. Developed by the Moving Pictures Expert Group. Commonly or MP4 used in video cameras and TV hardware. Supported by all browsers and recommended by YouTube. Note: Only MP4, WebM, and Ogg video are supported by the HTML standard. .48 CU IDOL SELF LEARNING MATERIAL (SLM)

Common Audio Formats MP3 is the best format for compressed recorded music. The term MP3 has become synonymous with digital music. If your website is about recorded music, MP3 is the choice. Table 3.8Common Audio Formats Format File Description MIDI .mid MIDI (Musical Instrument Digital Interface). Main format for all .midi electronic music devices like synthesizers and PC sound cards. MIDI files do not contain sound, but digital notes that can be played by electronics. Plays well on all computers and music hardware, but not in web browsers. RealAudio .rm RealAudio. Developed by Real Media to allow streaming of audio with .ram low bandwidths. Does not play in web browsers. WMA .wma WMA (Windows Media Audio). Developed by Microsoft. Plays well on Windows computers, but not in web browsers. AAC .aac AAC (Advanced Audio Coding). Developed by Apple as the default format for iTunes. Plays well on Apple computers, but not in web browsers. WAV .wav WAV. Developed by IBM and Microsoft. Plays well on Windows, Macintosh, and Linux operating systems. Supported by HTML. Ogg .ogg Ogg. Developed by the Xiph.Org Foundation. Supported by HTML. MP3 .mp3 MP3 files are actually the sound part of MPEG files. MP3 is the most .49 CU IDOL SELF LEARNING MATERIAL (SLM)

popular format for music players. Combines good compression (small files) with high quality. Supported by all browsers. MP4 .mp4 MP4 is a video format, but can also be used for audio. Supported by all browsers. Note: Only MP3, WAV, and Ogg audio are supported by the HTML standard. 3.6 SUMMARY  Headings are container tags having range from level l to 6. <h1> defines the largest heading; <h6> defines the smallest heading. See the result of the following input to an html file  Two physical tags can be applied together on the same portion of text. Implicit tags, also called logical styles give some freedom to browser in displaying text. These tags are relative to one another, depending upon the browser.  Unlike physical tags, these tags are not generally effective when used together. Use the following listing to see the difference between physical and logical tags, if your browser shows any.  The appearance of the text in an HTML document can be controlled using and tags along with face, color and size attribute. Face=\"face-name\" defines the font-name, like set the font to Times Roman. You can also provide a list of acceptable choices, like for example, where Times is listed as first choice, while Arial and Helvetica as, alternatives.  Some characters have a special meaning in HTML, like the less than sign («) that defines the start of an HTML tag and also there are some special symbols like © that may be required in your document. To display these characters, you must insert character entities in your HTML source.  Lists enhance the display. HTML supports ordered, unordered and definition lists.  Ordered List: A list of items in which items are marked with numbers is called an ordered list. An ordered list is created with the and tags. Each list item starts with the -cli» tag and list heading is given by –dh> tag .50 CU IDOL SELF LEARNING MATERIAL (SLM)