Scribd
Upload
62 views

Class 8 Computer worksheet of Introduction to HTML

Uploaded by

bhavrajsinghchinjar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
62 views

Class 8 Computer worksheet of Introduction to HTML

Uploaded by

bhavrajsinghchinjar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Class 8

Web Page Designing


In this
worksheet we
Introduction to HTML
will learn how
to create simple web pages using HTML.

First developed by Tim Berners-Lee in 1990, HTML is short for Hyper Text Mark Up
Language. HTML is used to create electronic documents (called web pages) that are
displayed on the World Wide Web.

Web page

A document which can be displayed in a web browser such as Firefox, Google


Chrome, Opera, Microsoft Internet Explorer or Edge, or Apple's Safari. These are
also often called just "pages."

Website

A collection of web pages which are


grouped together and usually connected
together in various ways. Often called a
"web site" or simply a "site."

Web server

A computer that hosts a website on the Internet.

Search Engine

A web service that helps you find other web pages, such as Google, Bing, Yahoo,
etc. Search engines are normally accessed through a web browser (e.g. you can
perform search engine searches directly in the address bar of Firefox, Chrome, etc.)
or through a web page.

HTML is the standard markup language for Web pages. HTML elements are the
building blocks of HTML pages. HTML elements are represented by <> tags.

A tag is an element inserted into a document or file that changes the look of content or
performs an action. In simple words a tag is a command in a web page that tells the
browser to do something. Below is an HTML element with an open tag (start tag)
showing the name and attribute and a close tag (end tag) showing a forward slash and
open tag name. HTML tags are element names surrounded by angle brackets:
<tagname>content goes here...</tagname>

There are two types of tags in HTML:

a. Container Tags

b. Empty tags

Container Tags: Empty Tags:


Most HTML elements consist of a Some elements only have a single tag
starting tag, an ending tag, and and therefore can't have any content.
everything that comes between the two These elements are called empty
tags, which is known as the element's elements or empty tags. Empty elements
contents. Here's an example of an have the following syntax: <br>
element with a starting tag, and ending
tag, and content:<p>School</p>When
tags are part of an element that can
have content, the tags are
called container tags.

Structure of HTML Document

<!DOCTYPE html> <!-- doctype declaration -->


<html> <!-- opening HTML tag -->
<head> <!-- opening head tag -->
<title>Page Title</title> <!-- title tag -->
</head> <!-- closing head tag -->
<Body> <!-- opening body tag -->
This is my first web page.
</body> <!-- closing body tag -->
</html> <!-- closing HTML tag -->

Doctype

The first line of code, <!DOCTYPE html>, is called a doctype declaration and tells the
browser which version of HTML the page is written in. In this case, we’re using the
doctype that corresponds to HTML5, the most up-to-date version of the HTML
language. There are a number of different doctype declarations that correspond to
various versions of HTML.

HTML Root Element


Next, the <html> element wraps around all of the other code and content in our
document. This element, known as the HTML root element, always contains
one <head> element and one <body> element.

Head Element

The HTML head element is a container that can include a number of HTML elements
that are not visible parts of the page rendered by the browser. The <title> element is the
only element that is required to be contained within the <head> tags. The content within
this element is displayed as the page title in the tab of the browser and is also what
search engines use to identify the title of a page.

Body Element

There can only be one <body> element in an HTML document because this element is
the container that holds the content of the document. All of the content that you see
rendered in the browser is contained within this element. In the example above, the
content of the page is a headline and simple paragraph.

Nesting

Earlier in this document we referred to HTML elements as “containers.” This is


because proper “nesting” is a key part of writing HTML that will work across all
browsers, will render all content, will be readable by screen readers. In terms of
HTML, nesting means each element goes inside another element. For example, the
basic page structure we outlined above is valid HTML because each element’s opening
tag has a closing tag and fully contain any other elements within it.

Any content that is in between <!-- and --> is a comment that will not be rendered by the
browser.

Now for building a web site type the HTML code in a plain text editor that is NOTEPAD.
A simple text editor is a good way to learn HTML.

Now type the above html code in notepad and save the document as "index.html”.
CODE OUTPUT

The Heading Tags

The HTML <h1>–<h6> elements represent


six levels of section headings. <h1> is the
highest section level and <h6> is the lowest.

HTML header tags are used to differentiate


the headings (h1) and sub-headings (h2-h6)
of a page from the rest of the content.

Try the following Example:-

<h1>Thisis heading 1</h1>


To place the heading/text at a particular
<h2>This is heading 2</h2> position on the page add the align attribute to
<h3>This is heading 3</h3> the tag.
<h4>This is heading 4</h4>
<h1 align=right>This is
<h5>This is heading 5</h5>
heading 1</h1>
<h6>This is heading 6</h6>
HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

Inserting Line Breaks

The <br> tag inserts a single line break. It is useful for writing addresses or
poems.The <br> tag is an empty tag which means that it has no end tag.

Example:-

<!DOCTYPE html>
<html>
<head>
<title>HTML br Tag</title>
</head>
<body>
<p>This is before the line break<br> and this after the line break.
</p>This sentence has no line break.
</body>
</html>

Attributes:-

An attribute is used to define the characteristics of an HTML element and is placed


inside the element's opening tag. All attributes are made up of two parts − a name and a
value.

The name is the property you want to set. The value is what you want the value of the
property to be set and always put within quotations. For example <p align = "left">.

Bgcolor

This is the colour of the BG, or BackGround, of your page. You need to put the colour in
as a HEX code, like the rest of these colours. You can type the name of the colour.

bgcolor="#FFFFFF" or bgcolor="yellow"

<body bgcolor= “Red”>


The hexadecimal color code is supported by all browsers. A hexadecimal color is
specified with: #RRGGBB. RR (red), GG (green) and BB (blue) are hexadecimal
integers between 00 and FF specifying the intensity of the color. For example, #0000FF
is displayed as blue, because the blue component is set to its highest value (FF) and
the others are set to 00.

Note that, even though the default BG is white, you should still code in #FFFFFF,
because older browser's default BG is a nasty grey.

Text

This will change the colour of all the text on your whole page, unless you have changed
the colour manually (find out how in the text section).

<Body text="#000000">

Background

The HTML <body> background Attribute is used to specify the background-image for
the document. If you want to put an image as your background, use this attribute. You
can also link to an image from another site, by giving the entire URL.

<body background= “http://www.yoursite.com/media/BACKGROUND.gif”>

Margins

There are two sets of margins on a page, the ones at the sides and the ones at the top
and bottom.

< Body topmargin="0"leftmargin="0">

HTML Formatting

HTML Formatting is a process of formatting text for better look and feel. HTML
provides us ability to format text without using style sheets. There are many formatting
tags in HTML. These tags are used to make text bold, italicized, or underlined.

Element Description

<b>- This tag is used to bold the text written between it.

<i>- This tag is used to make text italic.

<u>- This tag is used to underline text written between it.


<mark>- This tag is used to highlight text.

<strong>- This tag tells the browser that the text is important and displays the text
darker than the rest.

<strike>- This tag is used to draw a strikethrough on a section of text.

<sup>- It displays the content slightly above the normal line.

<sub>- It displays the content slightly below the normal line.

<big>- This tag is used to increase the font size by one conventional unit.

<small>- This tag is used to decrease the font size by one unit from base font size.

___________________________________________________________________

Q1. Answer the following questions:-

a. Explain the basic structure of an HTML document with example.

b. Difference between Container Tags and Empty Tags.

c. Explain all the attributes of the body tag.

d. Write the code to put “just learning” as a comment on the web page.

Q2. Debug the following:-

a. <html><title>abc</title></head><body>Just learning</body></html>

______________________________________________________

b. <html><head><title>abc</title></head><body>Just learning</body><html>

_______________________________________________________

c. <html><head><title><head>abc</title></head>Just learning</body></html>

_______________________________________________________
d. <html><head>abc</head><body>Just learning</body></html>

_______________________________________________________

Q3. Fill in the blanks:

a. ______________ provide additional information about the elements.


b. The ____________ tag defines the document as an HTML file.
c. The ____________ tag allows you to add a title to your web page to be displayed
on the title bar.
d. The content between ____________ and ___________ is displayed on the web
page.
e. To get an image in the background of the web page use the ______________
attribute.
f. A _______________ in HTML is a line of code which is not interpreted by the
browser.
g. The ____________ tag is needed to denote where you want a carriage return in
HTML document.
h. You can highlight the text in HTML using the ____________ tag.
i. A ______________ declaration and tells the browser which version of HTML the
page is written in.
j. To change the background colour of the web page use the _________ tag.

You might also like