Chapter 1 Computer
Introduction to HTML Class 10
Network
When computers are connected with each other they can share resources. Such
group of connected computer is known as a computer network.
Internet
The Internet is a collection of such multiple computer networks, hence known as
network of networks.
Web
On the platform of the internet, a distributed information system exists, which is
called WWW (World Wide Web) or Web.
The notion of the web was conceived in 1991 by Tim Berners-Lee, while consulting
at CERN (European Organization for Nuclear Research) in Switzerland.
The web is a repository of multimedia information on the internet platform.
The web content in form of web pages is explored using browser
Individual document pages on the WWW are called web pages and are accessed
with a software application running on the user computer, commonly called a web
browser
Browser
Special software applications to retrieve and view web information.
Website
Website is a collection of web pages that display information about an organization
or institute.
Hyperlink
On web pages, links are placed pointing towards different locations. These links are
known as hyperlink.
Any content such as text, picture, graphics etc can be embedded with such
hyperlink.
HTML
HTML (HyperText Markup Language), describe how a web page should be
displayed by a web browser. HTML is considered as a language for describing web
pages.
The HTML is a documentation language to mark content of web pages such as
heading, title, table, image etc.
Presented by Nuzhat Ibrahim Memon 1
A HTML is a kind of markup language.
language A markup language is a set of tags that
enables additional information(besides the content) on how to present the web
content. HTML files are text files that contain additional formatting markup
information in form of tag along with its content.
content
HTML is derived from of SGML
o S-Standardized
o G-General
o M-Markup
o L-Language
SGML was developed by the International Organization for Standards (ISO) in
1986.
HTML tag
• Several sets of angular brackets with words or letters within them. These brackets
and words inside them are known as tags.
• A tag is made up of letter, words and numbers enclosed between a left and righ
right
angular bracket. i.e <>
HTML Element
• A combination of opening and closing tag along with some content between the
two tags forms an element.
An HTML element may be empty or can have attributes to specify the additional
formatting and publishing instructions
tructions
Presented by Nuzhat Ibrahim Memon 2
Structure of an HTML Document
Structure of an HTML Document
• HTML document is structured into two major parts.
1. Head Section (Head element)
It contains information about the page such as title and description of the
page.
All these information should be embedded within the <head> and </head>
Eg.Inside <head> section there is <title> element that is written in head section
and that will be displayed in the title bar of browser.
2. Body Section (Body element)
The body element is embedded within the <body> and </body>
This is the content which can be seen or display within the browser
Both the sections are embedded within the <html> and </html> tags.
HTML Title
The title of a web page is specified by the TITLE element, which is placed in the head
section of the document.
Document should have only one title element.
Title should be simple text and cannot contain special commands such as hyperlinks.
The title appears as a label of the window displaying the text.
The title also holds a place in a browser’s history or bookmark list.
HTML Heading Style
HTML document generally beginning with heading.
Heading can be creating in total six inbuilt sizes names h1,h2,h3,h4, h5 and h6.
Most browsers display the contents of the <h1>,<h2> and <h3> elements larger than
the default size of text in the document.
The content of the <h4> element is similar to the default content size.
Presented by Nuzhat Ibrahim Memon 3
Paragraph tags (<p> and </p>)
The <p> tag structures the content into a paragraph.
Each paragraph of text should go in between an opening <p> and closing </p> tag.
When an HTML code is displayed into a browser, the text will automatically take up
the full width of the screen.
If you resize the browser window, the browser will trap the text onto new lines.
Such white space management allows developer of HTML code to indent the code
and add extra spaces to maintain readability of the code.
Line break (<br> or <br/>)
<br> tag is used for giving line break.
<br> element does not have an opening and closing tags. Such tag are known as
empty tags.
<br> is an abbreviated form of break.
The <br> just pushes the coming text into new line.
In case you need multiple lines, simply use multiple <br> tags.
<br> in paragraph forces compulsory break into the content and disturbs text
wrapping while presentation and resizing the browser window.
Preformatted Text (<pre> and </pre>)
Many a times we want to display text with multiple white spaces and in multiple
lines without wanting to be changed it by the browser. For that we may embed the
content into pre-formatted tag set using <pre> and </pre>.
Any text between the opening <pre> and the closing </pre> tag will preserve the
formatting of the given content.
It display the content of notepad in the same format in the browser.
Text Formatting Tags
Elements Description
Bold (<b> and </b>) The content is displayed in bold.
Underline (<u> and </u>) The content is displayed in underline.
Italics (<i> and </i>) The content is displayed in Italic.
Strike Through (<s> and </s>) It displays the word in strikethrough manner.
Type writer font (<tt> and </tt>) Displays text in typewriter font which is also identified as
monospaced font (like that of a teletype machine)
Presented by Nuzhat Ibrahim Memon 4
Other Text Formatting Tags
Elements Description
<small> and </small> The content is displayed one font size smaller than the rest of the
text surrounding it.
<big> and </big> The content is displayed one font size bigger than the rest of the text
surrounding it.
<sup> and </sup> The content is displayed in superscript.
<sub> and </sub> The content is displayed in subscript.
<acronym> and It defines the content as an acronym.
</acronym> The <acronym> tag is used to spell out another word.
<dfn> and </dfn> It defines a special term.
<q> and </q> It defines a quote.
Attributes to the Tags
To specify more information along with tags, additional attribute accompany the
tags.
In other words, attributes tell more about the elements.
Attributes always appear on the opening tags of the elements that carry them.
An attribute is made up of two parts:
o The first part is a name
The name of an attribute indicates the property to be set
o the second part is a value.
The value is a value to be set to the property.
The values should be in double quotation marks.
Between the name and the value there should be an equal (=) sign
Example : <body bgcolor=“yellow”> Click here</a>
Align attribute
The align attribute indicates whether the heading appears to the left, center or right
of the page.
By default, the content is aligned to the left of the page.
It can take three values as follows:
– Left: The content is aligned to the left of the page.
– Right: The content is aligned to the right of the page.
– Center: The content is aligned to the center of the page.
There are some attributes which can appear along with every tag. Such attributes are
called universal attributes.
– Align is such universal attribute.
– <p align=“right”>Some content goes here</p>
Presented by Nuzhat Ibrahim Memon 5
– Being a universal attribute, the align attribute can also go with heading.
<h1 align=“center”>Some heading goes here</h1>
Soft spaces and hard spaces in HTML
When content given in a paragraph is aligned, some spaces are automatically added
for adjustment. The spaces which are inserted automatically are known as soft
spaces.
If users himself (manually) inserts some spaces, such hard spaces will be
automatically deleted unless the content is written using <pre> and </pre> tag pairs.
Anchor tag
A website, collection of many web pages, manages web pages through such hyperlink
management.
– To create link between web pages, we need hyperlink.
– The hyperlink is a way to link two HTML documents by creating a hyper text in
a document and giving reference of the other document to it.
Set of such words or text that appears in different colour (generally blue and
underlined) are called hyperlink.
A hyperlink is created using an <a> element, where the ‘a’ stands for an anchor.
It uses the attribute “href” that stands for hyperlink or hypertext reference
The value of the href attribute is the name and address of the webpage to which we
want to refer.
Absolute or Relative Address
Relative Address
– Instead of giving a full address, we have given only the file name.
– Giving just a file name will work only when you have the calling file and called
file in the same directory.
– The location of the called file is relative to the calling file. Hence it is known as
a relative address. <a href=“heading_style.html”>Heading Size</a>
Absolute Address
– While the complete address is known as an absolute address.
<a href=“file:///C:/Users/Nuzhat%20Memon/Desktop/HTML%20Programs/heading_style.html”>
Heading Size </a>
SciTE
SciTE is a text editor based on a free source code editing component called Scintilla
(http://www.scintilla.org)
The menu items include basic facilities for file operations, editing facilities, searching,
viewing and other tools options etc.
Some icons for basic operations such as new, open, save, edit, search etc.
Current Version of HTML
• Latest version of the HTML is called HTML 5.0
Presented by Nuzhat Ibrahim Memon 6
