Scribd
Upload
9 views11 pages

Unit 1

This document provides an overview of HTML (Hyper Text Markup Language), detailing its basic structure, creation process, and essential tags. It explains the significance of the <html>, <head>, and <body> elements, as well as best practices for naming HTML files. Additionally, the document includes learning activities, end questions, and references for further study.

Uploaded by

sunnycreative7291
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
9 views11 pages

Unit 1

This document provides an overview of HTML (Hyper Text Markup Language), detailing its basic structure, creation process, and essential tags. It explains the significance of the <html>, <head>, and <body> elements, as well as best practices for naming HTML files. Additionally, the document includes learning activities, end questions, and references for further study.

Uploaded by

sunnycreative7291
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/ 11

UNIT 1HTML 1

Structure

LearningObjectives

Introduction

Basic structure of an HTML document

Creating an HTML document

Summary

KeyWords/Abbreviations

LearningActivity

Unit End Questions (MCQ andDescriptive)

References

LEARNINGOBJECTIVES

After studying this unit, you will be able to:

Explain Basic structure of an HTML document

Discuss to create an HTML document

INTRODUCTION

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

.6
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>

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.

.7
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>

.8
CU IDOL SELF LEARNING MATERIAL (SLM)
<head>

...

</head>

<body>

...

</body>

</html>

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

.9
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

.10
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>

.11
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.

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

.12
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

.13
CU IDOL SELF LEARNING MATERIAL (SLM)
KEY WORDS/ABBREVIATIONS
Body: The body is the container for all of
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.

LEARNINGACTIVITY

1. Write HTML code to develop a Web page having the background in


in any other colour.

2. Write a program to use the correct HTML tag to add a heading with the text "London".

UNIT 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


in any other colour.

5. Create an HTML document giving details of your name, age, telephone number,

.14
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

.15
CU IDOL SELF LEARNING MATERIAL (SLM)
(b) datafld
(c) disabled
(d) datasr

Answers

1. (b), 2. (b), 3. (c), 4. (c),5. (b)

REFERENCES

John Ducket (2011). HTML & CSS: Design and Build Web Sites. United States:
Willy Publications.

Publications.
Bill Kennedy and Chuck Musciano (2000). HTML & XHTML: The Definitive
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

.16
CU IDOL SELF LEARNING MATERIAL (SLM)

You might also like