Scribd
Upload
34 views5 pages

Section 1

Uploaded by

AYUSH MANAV
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
34 views5 pages

Section 1

Uploaded by

AYUSH MANAV
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

HTML (Hypertext

SECTION 1 HTML (HYPERTEXT MARKUP Markup Language)

LANGUAGE)
Structure
1.0 Basics of HTML
1.1 How to Create HTML Document?
1.2 Steps for Creating a Simple HTML Program
1.3 Exercises for Practice in Lab Sessions

1.0 BASICS OF HTML


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 (<) and a
greater 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
<HTML> and ends with </HTML>.

1.1 HOW TO CREATE AN HTML DOCUMENT?


An HTML document can be created using any HTML editor or text editor like
notepad etc.

1.2 STEPS FOR CREATING A SIMPLE HTML


PROGRAM

1. Go to Start -> Programs->Accessories->Notepad.

5
Lab Manual 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 issue 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>

9. Finally, terminate the <HTML> tag with </HTML> as shown below:

10. Save your document as mypage.html

6
HTML (Hypertext
Markup Language)

11. To view the document open the .html document in the browser.

1.3 EXERCISES FOR PRACTICE IN LAB SESSION


SESSION 1
Exercises
1. Write HTML code to develop a Web page having the background in red and
title “My First Page” in any other colour.

2. Create an HTML document giving details of your name, age, telephone number,
address, TLC code & enrolment number aligned in proper order.

3. Write an HTML code to design a page containing text, in form of paragraphs


giving suitable heading style.

SESSION 2
Exercises
1. Create a page to show different attributes of Font tag.

2. Create a page to show different attributes: italics, bold, underline.

3. Design a page having background colour yellow, giving text colour red and
using all the attributes of font tab.

SESSION 3
Exercises
1. Write an HTML code to create a Web page of blue color and display links in
red colour.

2. Write an HTML code to create a Web page that contains an image at its center.

3. Create a Web page with appropriate content and insert an image towards the left
hand side of the page. When user clicks on the image, it should open another
Web page.

7
Lab Manual SESSION 4
Exercises
1. Create a Web page using href attribute of anchor tag & the attribute: alink, vlink
etc.

2. Create a Web page, wherein when the user clicks on the link it should go to the
bottom of the page.

3. Write HTML code to create a Web page of pink colour and display a moving
message in red colour.

SESSION 5
Exercises
1. Create a Web page, showing an ordered list of the names of five of your friends.

2. Create an HTML document containing a nested list showing the content page of
any book

3. Create a web page, showing an unordered list of names of five of your friends.

SESSION 6
Exercises
1. Create a Web page, which should contain a table having two rows and two
columns.

2. Fill in some dummy data in the table created by you in question 1 of this session.

3. Create the following table in HTML with Dummy Data

Name of Place Destination Train No. Time Fair


train Arrival Departure

SESSION 7
Exercises
1. Create the following table

Colour (White)
RED GREEN BLACK

2. Design an HTML Page having 3 images placed in the following format.

Image 1

Image 2

Image 3

(Hint: Table can be used to align images)


8
3. Write HTML code to generate the following output: HTML (Hypertext
Markup Language)

Weather DELHI MUMBAI


40 35

SESSION 8
Exercises
1. What are HTML Physical style tags and Logical style tags?

2. Which HTML tag allows you to scroll text on the Web page?

3. What is the comment tag in HTML?

4. Design an HTML Page for the “Block Introduction” of this book: The page
should allow scrolling and the code should contain a comment header with your
name and enrolment number.

SESSION 9
Exercises
1. What difference does it make if we express the width of a table in percentage or
in pixel value? And how do we set the width of a particular column or cell in a
table?

2. Write HTML code to generate the following output:

1 2 3 4
5 6
Image
7 8
9 10 11 12

3. Create a Web page that should contain a table having seven rows and four
columns, along with the attributes – colspan & rowspan.

SESSION 10
Exercises
1. What are the different versions of HTML?

2. List 5 different HTML Editors.

3. What is the different image formats?

You might also like