Class 10 Exam  >  Class 10 Notes  >  Computer Application: Class 10  >  HTML Basics: Chapter Notes

HTML Basics: Chapter Notes | Computer Application: Class 10 PDF Download

 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 LeeTim 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:HTML Basics: Chapter Notes | Computer Application: Class 10 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.
HTML Basics: Chapter Notes | Computer Application: Class 10➢ 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:
HTML Basics: Chapter Notes | Computer Application: Class 10
➢ 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
HTML Basics: Chapter Notes | Computer Application: Class 10
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,
HTML Basics: Chapter Notes | Computer Application: Class 10
➢ 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:HTML Basics: Chapter Notes | Computer Application: Class 10 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.
HTML Basics: Chapter Notes | Computer Application: Class 10

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:HTML Basics: Chapter Notes | Computer Application: Class 10

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.

Longdesc

If the description is too long, you can even attach an html file, in another attribute, called “longdesc”. This attribute is complementary to “alt” attribute, as shown:
For Example: <img src="https://edurev.gumlet.io/lower.jpg” width=”200” height=”150” alt=”White Roses” longdesc=”abc.html”>

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

The document HTML Basics: Chapter Notes | Computer Application: Class 10 is a part of the Class 10 Course Computer Application: Class 10.
All you need of Class 10 at this link: Class 10
11 videos|49 docs|18 tests

Top Courses for Class 10

FAQs on HTML Basics: Chapter Notes - Computer Application: Class 10

1. What are the basic components of an HTML document?
Ans. The basic components of an HTML document are: - Doctype declaration - HTML element - Head element - Title element - Body element
2. How do you create a hyperlink in HTML?
Ans. To create a hyperlink in HTML, you use the anchor tag <a>. For example, <a href="https://example.com">Click here</a> will create a hyperlink with the text "Click here" that leads to the URL "https://example.com".
3. What is the purpose of the alt attribute in HTML?
Ans. The alt attribute in HTML is used to provide alternative text for an image. It is displayed if the image fails to load or if the user is using a screen reader. It also helps with search engine optimization by providing a description of the image.
4. How do you add CSS styles to an HTML document?
Ans. You can add CSS styles to an HTML document by using the style attribute within HTML tags or by linking an external CSS file. For inline styles, you use the style attribute directly in the HTML tag, like <p style="color: red;">This is a red paragraph.</p>. For external styles, you use the <link> tag in the head section of the HTML document to link to an external CSS file.
5. What is the purpose of the meta tag in HTML?
Ans. The meta tag in HTML is used to provide metadata about the HTML document. It includes information such as the character encoding, viewport settings, author, description, and keywords. This information is used by search engines, browsers, and other web services to understand and display the webpage correctly.
11 videos|49 docs|18 tests
Download as PDF
Explore Courses for Class 10 exam

Top Courses for Class 10

Signup for Free!
Signup to see your scores go up within 7 days! Learn & Practice with 1000+ FREE Notes, Videos & Tests.
10M+ students study on EduRev
Related Searches

Free

,

ppt

,

Extra Questions

,

shortcuts and tricks

,

Important questions

,

Previous Year Questions with Solutions

,

Exam

,

HTML Basics: Chapter Notes | Computer Application: Class 10

,

study material

,

video lectures

,

HTML Basics: Chapter Notes | Computer Application: Class 10

,

Summary

,

Semester Notes

,

pdf

,

mock tests for examination

,

HTML Basics: Chapter Notes | Computer Application: Class 10

,

practice quizzes

,

Viva Questions

,

past year papers

,

Sample Paper

,

Objective type Questions

,

MCQs

;