Date: Introduction to HTML€¦ · Date: Introduction to HTML 1 Q. I Fill in the blanks 1. There...

Date:

Introduction to HTML

1

Q. I Fill in the blanks

1. There are 6 levels of headings that you can specify in a web page

2. Lists contained inside an outer list are called Nested lists.

3. Comments are codes that are not executed by the browser.

4. A text that is displayed in a smaller size below the baseline of the normal text

is called subscript.

5. The text attribute is used to specify colour of the text in a web page.

6. Tags in HTML are also called elements.

Q. II Answer the following questions

a. Write an HTML code to display the formulas given below on a web page.

(a+b)³ = a³+3a²b+3ab²+b³

Ans: (a+b)<sup>3</sup>=a<sup>3</sup>+3a<sup>2

</sup>b+3ab<sup>2</sup>+b<sup>3</sup>

b. Write an HTML code to display:

i. A paragraph aligned to the centre of the web page.

Ans: <p align=center>

ii. A background image.

Ans: <body background=”rose.jpg”>

iii. The colour of the text should be other than the default colour.

Ans: <body text=”blue”>

c. Write the HTML code for creating the given web page. Use appropriate

tags along with their attributes wherever required.

Note: Font Style is ‘Comic Sans MS’ You can use any background image

related to the theme ‘Cafe‘.

Ans:

<html>

Date:


2

<title>Cafe bonza</title>

<body background="Cafe.jpg">

<font face="Comic Sans MS" color="White" size=5>

<p>Cafe Bonza offers a comfortable environment for everyone. Come

and enjoy our selection of homemade sandwiches, panini, wraps, salads

and soups. Whether you're looking to relax over a cup of expresso or

grab a quick bite to go. Cafe bonza is for you. Our mission is to serve

the downtown business community by providing the highest-quality

coffees, sandwiches, snacks and baked goods in an atmosphere that

meets the needs of customers who are in a hurry as well as those who

want a place to relax and enjoy their beverages and food.

</p>

</body>

</html>

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

Teacher’s Signature: Date:

Date:


3

Important Points to be written in Notebook Features of HTML

HTML is simple. It is very easy to understand and modify. It uses tags to define an element in a document, therefore, it provides a flexible

way to design web pages. It allows connecting web pages using hyperlinks and therefore, enhances the user’s

browsing experience. An HTML document can be displayed on any operating system, therefore it is

platform-independent. It allows the developer to add pictures, audio and videos to web pages making

them more attractive and interactive.

HTML is not case sensitive. You can type tags in lower case or upper case.

The Basic Structure of an HTML Document

HTML (Hyper Text Markup Language) was first developed by Tim Berners-Lee in 1990

HTML Tags Tags are instructions in an HTML document that tells the browser to do something such as display the text or image in a certain way. Each tag begins with a (). Tags are also called elements. HTML tags can be of two types: 1. Paired 2. Unpaired

Date:


4

Example:

<br> <hr>

Date:


5

48

Connect

Your teacher has asked you to create a poster on ‘Mission to Mars’. What will you use to find the information and other resources for the same? List the steps you will follow to find the information.

We know that the internet is network of computers that connect millions of people around the world and allow them to communicate and share information. The (World Wide Web) is a service provided by the internet that makes it easy to store, share and search for information in the form of websites or web pages. HTML is the common language that helps create these website and webpages. Users can access these web pages using an application software called the Web Browser.

Introduction to HTML 4

� to define HTML � to differentiate between a web page, website

and web browser � to design a web page using various HTML

tags � to create ordered and unordered lists � to change the properties of a tag using its

attributes

Let’s Learn

49

What is HTML?HTML is an abbreviation of Hyper Text Markup Language. It is the language used to create

web pages.

HTML is made up of two parts:

� Hyper Text is a special text which when clicked, takes you to another web page linked

to it.

� Markup Language: The Markup Language consist of tags that are used to mark the

text contained inside them as being a certain type. For example, a tag can be used to

mark a text as italicised or a bulleted list.

Web page, Websites and Web browser

Web page: A web page is a single HTML document. It is accessed by entering a URL address

and may contain text, graphics, audio, video and hyperlinks to other web pages and files.

Every webpage has a unique URL address.

Website: A website is a collection of web pages containing text, images and all types of

multimedia files connected to each other through hyperlinks. Each website has a starting

web page called the homepage. It is the very first page that opens when you visit a website.

Web browser: A web browser, or simply browser, is a program or an application used

to access and view websites. The main role of a web browser is to display the web page

according to the format defined by its HTML code. A web browser can understand and

interpret HTML. Most commonly used web browsers include Microsoft Internet Explorer,

Google Chrome and Mozilla Firefox.

50

Features of HTML1. HTML is simple. It is very easy to understand and modify.

2. It uses tags to define an element in a document, therefore, it provides a flexible way to design web pages.

3. It allows connecting web pages using hyperlinks and therefore, enhances the user’s browsing experience.

4. An HTML document can be displayed on any operating system, therefore it is platform-independent.

5. It allows the developer to add pictures, audio and videos to web pages making them more attractive and interactive.

6. HTML is not case sensitive. You can type tags in lower case or upper case.

The Basic Structure of an HTML Document

Given below is the basic structure of an HTML page.

<!DOCTYPE html>

<html>

<head>

<title> Page Title </title>

</head>

<body>

.

.

.

</body>

</html>

Did you know � HTML (Hyper Text Markup Language) was first developed by Tim

Berners-Lee in 1990. � Versions of HTML: HTML 1.0, 2.0, 3.0, 3.2, 4.01, XHTML 1.0 and HTML 5

51

<!DOCTYPE html>

This is the first line to be written in an HTML document. It declares the version of HTML.

<html>...</html>

These are the outermost tags inside which all the other tags are placed.

<head>…</head>

It is used to define the document title, style link, script and other information about the HTML document.

<title>…</title>

It is used to give a title to the web page. The title will be displayed in the title bar at the top of the browser.

<body>…</body>

This tag encloses all the tags, attributes and information to be displayed in the web page.

Creating a web pageProfessional HTML editors are available to create and modify web pages. However, for learning HTML, you can use any text editor such as Notepad (PC) or TextEdit (Mac).

An HTML file has to be saved with the extension .htm or .html, only then the browser will consider it as an HTML file and display it as specified.

Steps to be followed to create a web page.

Step 1: Type the HTML code in the Notepad text editor.

<html>

<head>

<title> Family </title>

</head>

<body>

<p> The strength of a family isn’t determined by the number of members, but rather by the amount of love given and received.

</body></html>

Step 2: Navigate to File -> Click on Save As. A dialog box appears.

Step 3: Select the location where you want to save the file and type the name of the file with the .htm or .html extension. Click the Save option to save your web page.

52

Did you knowIf the file is not saved with the .htm/ .html extension, it will not appear with the browser icon and it may not work as an HTML file.

Step 4: Open the file location; you will see that the file has the icon of your default browser. Double-click on it to open the file.

Title of the web page

Content written inside the <body>...</body> tags

HTML TagsTags are instructions in an HTML document that tells the browser to do something such as display the text or image in a certain way. Each tag begins with a (<) and ends with a (>). Tags are also called elements.

HTML tags can be of two types:

1. Paired

2. Unpaired

Paired tagsA paired tag has an opening tag and a closing tag. The text is placed between them.

Example:

<i>This text is in italics. </i>

Note: Here <i> is the opening tag and </i> is the closing tag.

Unpaired tagsAn unpaired tag does not have a closing tag. It is also called a stand-alone or empty tag.

53

Example:

<br> , <hr>

Basic HTML Tags

Header tag

Header tags are used to display headings and subheadings in a web page. All headings

are displayed in a larger size as compared to normal text. The h1 tag displays the largest

heading while the h6 tag is used to display the smallest heading.

Techie tip � Every time you make a change in the HTML file, you can view the result

in the browser by clicking the refresh or reload button of the browser.

� A shortcut key to refresh or reload a web page is F5.

Example:

<html>

<head>

<title> Header Tags </title>

</head>

<body>

<h1> heading 1</h1>

<h3> heading 3</h3>

<h5> heading 5</h5>

</body></html>

Create a web page that displays information about your school. Use appropriate heading tags for the titles and subtitles.

Learning by doing

54

Paragraph tag � The HTML <p> tag specifies the beginning of a paragraph. � You don’t always need to use a closing HTML </P> tag. Another tag can close it.

Example:

<html><head><title>Paragraph Tag </title></head><body><p> Fresh water is necessary for the survival of all living organisms on the Earth. Our bodies are made up of about 60% water, and we cannot survive more than a few days without it.</p><p>Water is a precious substance that meets our physical needs while being of great spiritual importance to many people. Water is also an integral part of many ecosystems that support us and a myriad of other species.</p></body></html>

Line break tagThe <br> tag inserts a single line break. Example:

<html><head><title>Line Break Tag </title></head><body><p>Happy Independence Day <br>Salute and wave the national flag... up above and high...<br> Rejoice and share our national pride.</body></html>

Center tagThe <center> tag is used to place the content at the centre of the web page.Example:

<html>

55

<head><title>Center Tag</title></head><body><center><p>Can you see this text in the center? </center></body></html>

Formatting tagsText can be displayed in different formats using formatting tags in HTML.

� Bold: <b>….</b> makes the text enclosed inside it appear bold. � Italic: <i>….</i> makes the text enclosed inside it appear in the italic format. � Underlined: <u>….</u> makes the text enclosed inside it underlined.

Example:

<html><head><title>Format text</title></head><body><p><b>The sentence is written in bold format</b>.</p><p><i>The sentence is written in italic format</i>.</p><p><u>The sentence is in underlined format</u>.</p></body></html>

Superscript and subscript tag � Superscript text: The <sup>tag is used to define a superscript text. Superscript text

appears slightly above the normal line and is shown in a smaller size. It can be used to show footnotes or exponents such as a2.

� Subscript text: The <sub> tag is used to define a subscript text. Subscript text appears slightly below the normal line and is shown in a smaller size. This tag can be used to display chemical formulas such as H2O.

56

Example: <html><head><title>Subscript & Superscript</title></head><body><p>Use of Subscript Tag: H<sub>2</sub>SO<sub>4</sub></p><p> Use of Subscript Tag:(a+b)<sup>2<sup>=a<sup>2<sup>+2ab+b<sup>2<sup></p></body></html>

Creating commentsComments are codes that are not executed by the browser; therefore, they are not shown in the web page. They can be used to add personal notes or descriptions in the HTML document. To create a comment enclose it in the  tag.

Example:<html><head><title> Comments </title></head><body>Following are the example of headings<h1>HTML</h1><h6>HTML</h6></body></html>

Elements and Attributes HTML tags can also contain attributes. Attributes are extra bits of information used to define some specific characteristics of a tag. Attributes are placed inside the opening tag. Each attribute has two parts- name and value.

The tag gives an instruction for doing something, while its attributes decide how it should be done. Let’s see the general form of elements and attributes.<tag_name attribute_name=”value”>

57

We can change the background colour of our page using the bgcolor attribute of the <body>tag.<body bgcolor= “Green”>…</body>Or<body bgcolor= “#008000”>…</body> will display the background colour as Green. In HTML, there are some predefined colour names and their corresponding hexadecimal codes for representing different colours. Some of them are given below:

Name Hexadecimal code Colour displayedBlack #000000Red #FF0000

Green #008000Blue #0000FF

Yellow #FFFF00White #FFFFFF

Attributes of the <body>tagbackground This is used to specify the image file for the background.bgcolor This is used to specify the background colour.text This is used to specify the colour of text.alink This is used to specify the colour of an active link in a document.vlink This is used to specify the colour of the visited link in the document.

Example:<html><head><title>Body Tag Attributes</title></head><body background=”coffee.jpg” text=”blue”>Step 1: Download any image from the internet.<br>Step 2: Open Notepad, type a program and add the name of the above downloaded image as a value of the background attribute in the body tag.<br>Step 3: Save the file with the .html extension.<br> You are done with the project.<br>Note: downloaded Image and HTML file both must be present in the same folder.</body></html>

58

Attributes of the <font> tagWe can change the font, colour and size of text in a webpage by using the attributes of the <font> tag. This tag has three attributes, namely, face, size and colour.

� faceThis attribute is used to change the font of the text.

� sizeThe size attribute is used to set the size of the displayed text.We can also set the font size by specifying how much bigger or smaller the font should be as compared to the present font size.<font size=”+3”>This font size is +3 than the current font size</font>

� color The color attribute is used to set the colour of the text. The colour can be specified by its name or by using its hexadecimal code.You can use the face, size and color attributes together in the <font> tag.

Create a web page that includes a background image of flowers. List the various types of flowers that you know. Using the attributes of font tag change the colour and style of the font.

Learning by doing

Example:<html><head><title>Font Tag Attributes</title></head><body>

59

<h1>My Parents</h1><p>I love my Parents</p><font face=”Century”color=”green” size=8>No Love is greater than mom’s love<br>No care is greater than dad’s care</font></body></html>

Did you knowIf you do not specify any font for a web page, the text is displayed in the default font, which is ‘Times New Roman,’ ‘black’ colour and size ‘3’.

Attributes of the <Hr> tag

align Specifies the alignment of the horizontal line.

width Specifies the width of the line. Can be given in percentage or pixels.

size Specifies the height or thickness of the line pixels.

color Specifies the color of the line.

noshade Specifies that the line should not be shaded but shown in one color.

Example:<html><head><title>HR Attributes</title></head><body><h1 align=center>HTML BASICS</h1><p align=left>HTML contains lots of predefined tag.</p><Hr><font face=”Century” color=”blue”size=6><p align=right>HTML tag: It is the root of the html document which is used to specify that the document is html</p></font><Hr color=”red” align=”right” width=”60%”>HTML became an international standard by 2000, and has been recommended by the W3C ever since.

60

<HR color=”blue” size=10 NOSHADE></body></html>

Align attributeThe align Attribute is used in the <body>, <P>, <HR>or heading tags to specify the alignment of text. There are four values that can be used for the align attribute: left, right, justify and center.

Example:<html><head><title>align Attributes</title></head><body><h1 align=center>HTML BASICS</h1><p align=left>HTML contains lots of predefined tag.</p><font face=”Century” color=”blue” size=6><p align=right>HTML tag: It is the root of the html document which is used to specify that the document is html</p></font></body></html>

Creating ListsLists are used to display information in points. These points can be in a numbered sequence , called the ordered list, or they can be bulleted, called an unordered list.

Ordered list � To create an ordered list the <ol>tag is used. � Each item in the list is given by the <li> tag.

Example:<html><head><title>Ordered list</title></head><body><h1 align=center>List of main subjects</h1><ol>

61

<li>English<li>Maths<li>Social Science<li>Science</ol> </body></html>Attributes of the <ol> tagThe <ol> tag has two attributes, type and start. The type attribute specifies the type of numbering. It can have the values ‘I’, ‘a’ and ‘(I)’. The start attribute specifies the number of the first point in the list. It is always a numeric value.Example:<html><head><title>Ordered list </title></head><body><h1 align=center>List of additional subjects</h1><ol type=’i’ start=5><li>Hindi<li>Marathi<li>Moral Science<li>Art Education</ol></body></html>

Unordered listTo create an unordered list, use the <ul> tag. The <ul> tag has an attribute type to specify the type of bullet. It takes the values ‘disc’, ‘square’ or ‘circle’.

<html><head><title>Unordered list</title></head><body><h1 align=center>List of main subjects</h1><ul type=”circle”><li>English<li>Maths

62

<li>Social Science<li>Science</ul></body></html>

Definition listsA definition list is a list of terms along with their definition or description. The list starts with the <dl> tag and has two more tags inside it. The <dt> tag defines the term, while the <dd> term is used to give the definition of each term.Example:<html><head><title> Root system </title></head><body><h1 align=center> There are two main types of root system </h1><dl><dt>Tap Root<dd> A tap root system has a main root that grows down vertically, from which many smaller lateral roots arise.<dt>Fibrous root<dd> A fibrous root system is located closer to the soil surface, where it forms a dense network of roots</dl></body></html>

Nested listsLists contained inside an outer list are called nested lists. Example:<html><head><title>Nested list</title></head><body><h1 align=center>List of Subjects</h1><ol><li>English<li>Maths<ul><li>Algebra<li>Geometry</ul><li>Social Science<ul><li>History &Civics<li>Geography</ul><li>Science

63

</ol></body></html>

Create an unordered list of ingredients required to prepare a recipe. Also, mention the cooking instructions in the form of an ordered list.

Learning by doing

attributes elements superscript subscript

Word Galaxy

Mind Map

Introduction toHTML types of HTML tags

creating a web page

HTML-definiton

basic HTML tags

features

basic structure

paired

unpaired

heading tags

<p> paragraph tag

<font> font tag

formatting tags

<body> body tag

types of listsordered list <ol>

unordered list <ul>

nested List

definition list

attributesalign

color

width

size

Let’s Exercise

1. Fill in the blanks.a. There are levels of headings that you can specify in a web page.

b. Lists contained inside an outer list are called lists.

c. are codes that are not executed by the browser.

d. A text that is displayed in a smaller size below the baseline of the normal text is called .

e. The attribute is used to specify colour of the text in a web page.

f. Tags in HTML are also called .

64

2. Answer the following questions.a. Write an HTML code to display the formulas given below on a web page.

(a+b)³ = a³+3a²b+3ab²+b³

b. Write an HTML code to display:i. A paragraph aligned to the centre of the web page.ii. A background image.iii. The colour of the text should be other than the default colour.

c. Write the HTML code for creating the given web page. Use appropriate tags along with their attributes wherever required.Note: Font Style is ‘Comic Sans MS’You can use any background image related to the theme ‘Cafe‘.

Lab Activity

Select an appropriate theme and create a web page that contains: � An introduction to the theme with the highest level of heading and any two formatting

tags � A background image related to the theme. � An ordered list of five items related to the theme.

HOTSFind out some other formatting tags used in HTML and for what effect they are used.

Web Linkshttps://www.tutorialrepublic.com/https://www.w3schools.com/html/html_lists.asp

As on 09/08/2019

Date: Introduction to HTML€¦ · Date: Introduction to HTML 1 Q. I Fill in the blanks 1. There...

Documents

Transcript of Date: Introduction to HTML€¦ · Date: Introduction to HTML 1 Q. I Fill in the blanks 1. There...