Scribd
Upload
4 views

10 Chapter 2 HTML

The document provides an overview of HTML basics, including its invention by Tim Berners Lee and its purpose for web page display. It explains the structure of HTML documents, the use of various tags (like <SUB>, <SUP>, <IMG>, <A>, and <TABLE>), and attributes that enhance functionality and appearance. Additionally, it covers lists, links, and table formatting, emphasizing the importance of attributes for customizing web content.

Uploaded by

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

10 Chapter 2 HTML

The document provides an overview of HTML basics, including its invention by Tim Berners Lee and its purpose for web page display. It explains the structure of HTML documents, the use of various tags (like <SUB>, <SUP>, <IMG>, <A>, and <TABLE>), and attributes that enhance functionality and appearance. Additionally, it covers lists, links, and table formatting, emphasizing the importance of attributes for customizing web content.

Uploaded by

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

Grade : 10

Subject : COMPUTER

Chapter No. : SA-1__

Chapter Name:

Chapter 2 HTML Basics: Chapter Notes


➢ HTML was invented in November 1990 by a scientist called Tim Berners Lee. The purpose was to make it
easier for scientists at different universities to gain access to each other‟s research documents. Tim Berners
Lee

➢ HTML is a format that tells a computer how to display a web page. The documents themselves are plain
text files with special “tags” or codes that a web browser uses to interpret and display information on your
computer screen.
➢ The World Wide Web (W3C) Consortium has given a set of standards while building the HTML language.
The W3C uses some special words to define an action. A tag is a special word enclosed in angle-brackets < >.
➢ A tag tells the browser to perform an action as asked by the special word. The special word may be written
either in lower case or upper case. The browser will respond to both the cases equally.
➢ The characteristics or the features of a tag are defined by an attribute. An attribute is used inside a tag. An
attribute always takes a value to help the browser perform the specific task in a particular direction. There may
be more than one attribute used inside a tag. An element is a combination of a start tag, the text (we also use
text to insert graphics) and the end tag.
➢ The basic structure of HTML document is shown below:

➢ The basic structure of the HTML document is divided into two sections namely, the head and the body. The
browser enters the first section after executing the start tag of HTML (telling the browser to begin interpreting
the HTML commands) and start tag of HEAD. The first section helps in changing the heading on the title bar of
the HTML document (the webpage). The starting of the heading is shown after the start tag of TITLE and the
end is shown by /TITLE.

➢ SUB and SUP Tags: Supscript <SUB> and Superscript <SUP> tags allow the web author to place
specified text either slightly below (SUB) or above <SUP> the rest of the text in a particular line.
➢ The end tag of HEAD i.e. /HEAD tells the browser that the end of first section has come. The second
section begins with the start tag of BODY. The data on the webpage is displayed through the tags used in this
section. The end tag of BODY i.e./BODY tell the browser that the end of webpage has come.
➢ A container tag has both the start and the end tag. The text or the graphic is inserted inside the beginning
and end tag of the container tag. For example: <HEAD> and </HEAD>
➢ The empty tag is a stand-alone tag. This implies that such a tag has beginning but no ending tag. For
example: <BR> The tag is used for adding one line break. Such a tag does not need an end so as to tell the
browser, that end of line break has come because there is no need. Such a tag is called empty tag. HR is another
empty tag. This tag is used to insert a horizontal rule on the web page. Comment tag is also an empty tag. This
tag is ignored by the browser. This tag is used to increase the readability of the HTML source code. With this
tag, you can insert a description about a command.
➢ The attributes that are used with BODY tag are listed below in the table:

➢ Heading tag is used to display the heading or the main topic on the web page. This tag varies from H1 to
H6. This is a container tag. The heading tag shows the heading with the largest font size. As you increase the
number in the heading tag, the font size goes down.
➢ The FONT tag is a container tag that has a number of attributes listed below in the table
➢ A paragraph can be written on the web document using the tag. This is a container tag, though the closing
tag is optional. It uses one attribute called align that takes the value left, right or center.
➢ To make the text boldface, italics and underlined,

➢ The <hr> element is used for horizontal rules that act as dividers between sections

HTML Backgrounds

➢ The tag has two attributes where you can specify backgrounds. The background can be a color or an image.

 Bgcolor The bgcolor attribute specifies a background-color for an HTML page. The value of this
attribute can be a hexadecimal number, an RGB value, or a color name:
<body bgcolor=”#000000”>
<body bgcolor=”rgb(0,0,0)”>
<body bgcolor=”black”>
All the above lines set the background-color to black.
 The background attribute can also specify a background-image for an HTML page. The value of this
attribute is the URL of the image you want to use. If the image is smaller than the browser window, the
image will repeat itself until it fills the entire browser window.
<body background=”clouds.gif”>
<body background=”http://profdevtrain.austincc.edu/html/graphics/clouds.gif”>

Color Values

➢ Colors are defined using a hexadecimal notation for the combination of red, green, and blue color values
(RGB). The lowest value that can be given to one light source is 0 (hex #00). The highest value is 255 (hex
#FF). This table shows the result of combining red, green, and blue: ➢ Note: Only 16 color names are
supported by the W3C HTML 4.0 standard (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive,
purple, red, silver, teal, white, and yellow). For all other colors, we should use the Color HEX value.

Images

➢ You can insert an image using the <IMG> tag. This tag does not have an end tag.
➢ The basic syntax of <IMG> tag is given below:

The Src Attribute

➢ The address or the path to the image is taken as value by SRC attribute.
➢ Case1: If you have saved “Rain.jpg” in “Documents” folder, then the address would be: “C:\My documents\
My Pictures\ Rain.jpg”
➢ Case2: If you have saved “Rain.jpg” in the same folder as the HTML document, then the address would be:
“Rain.jpg”
➢ Case3: If “Rain.jpg” is not in your computer but is saved in folder „images‟ of the web server of google,
then the address would be: “http://www.google.com/images/ Rain.jpg”

The Alt Attribute

➢ The alt attribute is used to define an alternate text for an image. The value of the alt attribute is
authordefined text:
➢ <img src="https://edurev.gumlet.io/raphics/rain.gif ” alt=”Raining Skies “>
➢ The alt attribute tells the reader what he or she is missing on a page if the browser can‟t load images. The
browser will then display the alternate text instead of the image. It is a good practice to include the alt attribute
for each image on a page, to improve the display and usefulness of your document for people who have text-
only browsers or use screen readers.

Image Dimensions

➢ The width and the height attributes define the boundaries of image. The value can be an absolute number
(recognised as pixels) or in percentage (in proportion to the size of web window).
For Example: An image of height 150 pixels and width 200 pixels is inserted on webpage as: <img
src="https://edurev.gumlet.io/lower.jpg” width=”200” height=”150”>

Note: The image is made of pixels. When you increase the size of the image, the resolution of the image gets
decreased. This makes the image less clearer to view. The width and height aren‟t strictly necessary but help to
speed the display of your web page.

Align

➢ You can use the “align” attribute to place the image on left or right side of the webpage. If the align attribute
is set to left, the image floats to the left margin. If it is set to right, the image floats to the right margin.
For Example:
<p>
<img src="https://edurev.gumlet.io/lower.jpg” alt=”White Roses” width=”32” height=”21” align=”left”>
The image will be flowed to the left side of the webpage and this text will therefore be placed on right side.
</p>
➢ In the above code, the paragraph tag <p> helps in forming the paragraph to be displayed along with the
image on the webpage. “Alt” attribute describes the image when the image cannot be displayed by the browser.
“Height” and “Width” attributes decide the area of the image on the web page and the “align” attribute defines
the position of the image on the web page. Since the image is set to the left side, the text flows towards the right
side.

Know the Terms

➢ HTML: HyperText Mark-up Language


➢ Hypertext: The text that contains links to other text
➢ Container tag: An HTML element requiring start as well as end tag

HTML Advanced - List & Links

Lists

1. Ordered Lists:

 Used to create a numbered list.


 <ol> tag is used to define an ordered list.
 Each list item is defined by the <li> tag.

<ol>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ol>
2. Unordered Lists:

 Creates a bulleted list.


 Defined using the <ul> tag.
 List items are defined with the <li> tag.

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ul>

3. Definition Lists:

 Used for a list of terms and their corresponding definitions.


 Consists of <dl> (definition list), <dt> (term), and <dd> (definition).

<dl>

<dt>Term 1</dt>

<dd>Definition 1</dd>

<dt>Term 2</dt>

<dd>Definition 2</dd>

</dl>

Links

1. Creating Links:

 Hyperlinks are created using the <a> (anchor) tag.


 The href attribute specifies the destination URL.

<a href="https://www.example.com">Visit Example.com</a>

2. Linking to Other Pages:

 Use relative paths to link to pages within the same website.

<a href="about.html">About Us</a>

3. Linking to Sections on the Same Page:

 Use # followed by the section ID to link to sections on the same page.

<a href="#section1">Jump to Section 1</a>

4. Linking to Email:
 Use mailto: followed by the email address to create a link to send an email.

<a href="mailto:[email protected]">Email Us</a>

5. Opening Links in a New Tab:

 Use the target="_blank" attribute to open the link in a new tab.

<a href="https://www.example.com" target="_blank">Visit Example.com</a>

6. Linking to Files:

 Linking to various file types (PDF, images, etc.) is similar, use the href attribute.

<a href="document.pdf">Download PDF</a>

HTML Advanced - Tables

➢ The data on the webpage can be represented in tabular form. In HTML, the format can be defined
using <TABLE > tag. The <TABLE > tag arranges the data items on the web page in rows and columns.
➢ The structure of table is formed using the Table tag. The rows of the table are formed using the TR
tag. The data in the cells of the rows are inserted using either the TH tag or the TD tag. The TH tag
encloses the Header object and makes the data boldface and center aligned. The TD keeps the data in
regular font and left aligned by default. The TH and TD tags are nested inside the TR tag and the TR tag
in turn is nested within the TABLE tag.
➢ HTML Table Tags
➢ Illustration
1. Border: This attribute is used to insert the lines on four sides of the table. The inside lines shows the
rows and columns of the table and the outside lines displays the dimensions of the table. This attribute
takes the value as a number starting from 1 to any number.
2. Align: The align attribute helps in placing the table on the webpage. If you want to place it in the
center of the webpage, use the “center” value, for right side use “right” and for the left side of the web
page, use the value “left”.

3.
Width: The width attribute helps in identifying the breadth of the table in comparison to the webpage.
It accepts the value as a number (in pixels) or in percentage (in proportion to the width of the webpage).
4. Border color: The colour of the lines inside and outside the table can also be ch anged using the
“Border Color” attribute. It accepts the value as name of the colour. If you omit this attribute, the colour
of the table border is set to its default grey.

5. Bgcolor: The background color of a table can be set using the attribute bgcolor. This attribute takes
the name of the colour or hexadecimal number as value.
6. Background: If you want to place an image or a picture at the background of the table, you can do so
using the background attribute. This attribute takes the value as the address or the path of the picture.
The picture may be a bitmap or a graphic image.
➢ TD and TH element
The TH element or <TH> tag helps in identifying a table header. Correspondingly, TD element or <TD>
tag identifies the table data cell. The text inserted using the TH element is in boldface and centred by
default. Compared to this, TD element or the <TD> tag is aligned to the left and the text is in regular
font. The attributes used with <TD> or <TH> tag are: Align, Colspan, No wrap, Rowspan, Valign.
Align: The align attribute is similar to that of table, except that it aligns the text inside the cell rather
than the table. <insert as new bullet point>
Valign: Valign takes the value top, middle, bottom to vertically align the text inside a cell.
Nowrap: The Nowrap attribute does not allow the text to flow to the next line in the cell. If the
sentence is wider than the width of the cell, nowrap will show the sentence in one straight line.
ColSpan: The colspan attribute helps in merging the columns of a row. This attribute is not used with
table tag but with the <TH> or the <TD> tag.
RowSpan: When the table‟s cells spans across more than one row, it is called rowspan If we want to
give the table a nice sidebar, this attribute is used. The rowspan appears as merged cells. Caption The
<caption> tag is used to provide a text to the table so as to explain the contents of the table. It is
generally in bold, at center with respect to the table.

You might also like