Alert: You are not allowed to copy content or view source

HTML

HTML

 

  • Hyper Text Mark-up Language is abbreviated as HTML.
  • The main purpose of Html is to design web pages.
  • Html provides so many elements such as <p>, <img>, <h1>) to design a web page.
  • Tim Berners-Leeis known as father of Html.

 

Hypertext pages are interconnected by hyperlinks, when clicked on these links it takes you to a new webpage.

Markup language are tag based language; for example gml, sgml, html, xml, etc.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-2802646301126373" data-ad-slot="2927985635"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

 

Features for HTML

  • Html is a static page and is not case sensitive.
  • Html is simple, easy language and error free language.
  • We can also include audio, video, image on web pages.
  • Html is platform independent as it can run on any platform like Windows, Linux, and Mac.
  • Each and every elements of html should be enclosed within the angular brackets (<>).
  • Html programs are executed by the interpreter of the browser software.
  • Html program save with .htmor .html

 

                       

Basics of HTML

HTML tags:

  • HTML tags are used to mark-up HTML elements
  • HTML tags are always surrounded by the two angle brackets
  • HTML tags normally come in pairs like <b> and </b>
  • HTML is not case sensitive language so you can write Html tags in lowercase or uppercase letters.

 

Some Html tags are given below:

Syntax:

<p>   Paragraph tag </p>

 

<h2> Heading tag </h2>

 

<b>Bold Tag</b>

<u>Underline Tag</u>

<i>Italic Tag </i>

 

HTML elements:

<b>Enter in Bold text</b>

The HTML element begins with a start tag: <b>

The content of the HTML element is: Enter in bold text

The HTML element ends with an end tag: </b>

Basic HTML Tags: Tags that define headings, paragraphs and line breaks are the most important tags in HTML.

Tag

Description

<html>

Defines an HTML document

<body>

Defines the document's body

<h1> to <h6>

Defines header 1 to header 6

<p>

Defines a paragraph

<br>

Inserts a single line break

<hr>

Defines a horizontal rule

<!-->

Defines a comment

 

Headings: These are defined with the <h1> to <h6> tags, where <h1> defines the largest heading while <h6> defines the smallest.

<imgsrc="https://computer.olympiadsuccess.com/assets/images/computer_square/C10HTM1.jpg" alt=”class 10 HTML reading material” class="image-in-article img-responsive”>

 

Paragraphs

  • To load the webpage with information we can create paragraphs.
  • These are defined with the &lt;p&gt; tag.

&lt;p align="left"&gt; This is a paragraph aligned to the left side &lt;/p&gt;

&lt;p align="center"&gt; This is another paragraph with center alignment&lt;/p&gt;

Note: Each paragraph has to be enclosed within angle bracket, failing to do will become one large paragraph. HTML automatically adds an extra blank line before and after a paragraph.

 

Line Breaks

  • To make the webpage more presentable we need line breaks.
  • The &lt;br&gt; tag is used when you want to start a new line.

&lt;p&gt;This &lt;br&gt; is a para&lt;br&gt; graph with line breaks&lt;/p&gt;

The below given lines show the output of the above syntax:

This

is a para

graph with line breaks

The &lt;br&gt; tag has no closing tag.

 

Backgrounds

  • To make the web page more attractive we can set background color or an image.

&lt;script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"&gt;&lt;/script&gt;&lt;ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-2802646301126373" data-ad-slot="2927985635"&gt;&lt;/ins&gt;&lt;script&gt;(adsbygoogle = window.adsbygoogle || []).push({});&lt;/script&gt;

 

Bgcolor

  • The bgcolor attribute specifies a color to the background.
  • It can be a hexadecimal number, an RGB value, or a color name.

&lt;body bgcolor="#000000"&gt;

&lt;body bgcolor="rgb(0,0,0)"&gt;

&lt;body bgcolor="black"&gt;

The lines that are given above – To set background-color black.

HTML Colors

  • Usually the HTML color values are a combination of red, green, and blue color defined by a hexadecimal notation.
  • This table shown below is the result of combining RGB:

<imgsrc="https://computer.olympiadsuccess.com/assets/images/computer_square/C10HTM2.jpg" alt=”class 10 HTML reading material” class="image-in-article img-responsive”>

HTML Lists

  • HTML provides a simple and elegant way to sort the important information on a webpage.

 

Unordered Lists:

  • An unordered list is a list of items marked with bullets.
  • An unordered list starts with the &lt;ul&gt; tag.
  • Each list item starts with the &lt;li&gt; tag.

This Code Would Display

&lt;ul&gt;

  

&lt;li&gt;Coffee&lt;/li&gt;

·        ƒ Coffee

&lt;li&gt;Milk&lt;/li&gt;

·        ƒ Milk

&lt;/ul&gt;

  

 

Ordered Lists:

  • An ordered list is also a list of items marked with numbers.
  • An ordered list starts with the &lt;ol&gt; tag.
  • Each list item starts with the &lt;li&gt; tag.

This Code Would Display

&lt;ol&gt;

  

&lt;li&gt;Coffee&lt;/li&gt;

1. Coffee

&lt;li&gt;Milk&lt;/li&gt;

2. Milk

&lt;/ol&gt;

  

 

HTML Links – HTML uses the anchor tag to create a link to another document or web page.

Email Links – To create an email link, you will use mailto: plus your email address.

&lt;a href="mailto:[email protected]"&gt;Email Help Desk&lt;/a&gt;

To add a subject for the email message, you would add ?subject= after the email address.

For example:         

&lt;a href=" mailto:[email protected]?subject=Email Assistance"&gt;Email Help Desk&lt;/a&gt;

HTML Images:

  • The &lt;img&gt; tag has no closing tag.
  • To display an image on a page, you need to use the src attribute.
  • Src stands for "source".
  • The value of the src attribute is the URL of the image you want to display on your page.

The syntax of defining an image: <imgsrc=”graphics/chef.gif”&gt;

Output display:

<imgsrc="https://computer.olympiadsuccess.com/assets/images/computer_square/C10HTM3.jpg" alt=”class 10 HTML reading material” class="image-in-article img-responsive”>

Tables:

  • Tables are defined with the &lt;table&gt; tag.
  • A table is divided into rows (&lt;tr&gt; tag), and each row is divided into data cells (&lt;td&gt; tag).
  • The letters td stands for table data, which is the content of a data cell.
  • A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

&lt;table&gt;

&lt;tr&gt;

&lt;td&gt;row 1, cell 1&lt;/td&gt;

&lt;td&gt;row 1, cell 2&lt;/td&gt;

&lt;/tr&gt;

&lt;tr&gt;

&lt;td&gt;row 2, cell 1&lt;/td&gt;

&lt;td&gt;row 2, cell 2&lt;/td&gt;

&lt;/tr&gt;

&lt;/table&gt;

 

Output display:

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

 

Cell Padding and Spacing

The &lt;table&gt; tag has two attributes known as cellspacing and cellpadding. These properties may be used separately or together.

  • Cellpadding is the pixel space between the cell contents and the cell border.
  • Cellspacing is the space between the cells.

<imgsrc="https://computer.olympiadsuccess.com/assets/images/computer_square/C10HTM4.jpg" alt=”class 10 HTML reading material” class="image-in-article img-responsive”>

Practice These Questions

 

Exercise 1:

 

Open your text editor and type the following text.

&lt;html&gt;

&lt;head&gt;

&lt;title&gt;Welcome to my Webpage&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;h1 align="center"&gt;My First Webpage&lt;/h1&gt;

&lt;p&gt; I am happy to create my own HTML webpage. This is so easy and interesting&lt;/p&gt;

&lt;p&gt;By learning html, I will be able to create web pages&lt;br&gt;&lt;/p&gt;

&lt;/body&gt;

&lt;/html&gt;

Save the page as mypage1.html.

&lt;script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"&gt;&lt;/script&gt;&lt;ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-2802646301126373" data-ad-slot="2927985635"&gt;&lt;/ins&gt;&lt;script&gt;(adsbygoogle = window.adsbygoogle || []).push({});&lt;/script&gt;

 

Exercise 2:

It’s time to create your own page. Use your text editor to create a page which contains the following:

  • the required HTML page codes
  • link to another web page
  • an email link
  • a picture/graphic
  • a list of information

 

Recap

Hyper Text Markup Language is abbreviated as HTML, to design web pages.

Basic HTML

HTML tags

  • HTML tags are used to mark-up HTML elements.

HTML elements

  • The HTML element begins with a start tag: &lt;b&gt;

Headings

  • To set headings for the content on the webpage.

Paragraphs

  • To load the webpage with information we can create paragraphs.

Line Breaks

  • To make the webpage more presentable we need line breaks.

Backgrounds

  • To make the web page more attractive we can set background color or an image.

Bgcolor

  • The bgcolor attribute specifies a color to the background.

HTML Colors

  • A combination of red, green, and blue color defined by a hexadecimal notation.

HTML Lists

  • To sort the important information on a webpage.

Unordered Lists

  • List of items marked with bullets.

Ordered Lists

  • List of items marked with numbers.

HTML Links

  • Anchor tag to create a link to another document or web page.

Email Links

  • To create an email link

HTML Images

  • To add an image to the webpage.

Tables

  • To draw a table in webpage.

Cell Padding

  • Pixel space between the cell contents and the cell border.

Cell Spacing

  • The space between the cells.

Quiz for HTML

Q.1

which tag is used to emphasize the text?
a) <||| ||| empasize ||| |||><||| ||| /empasize ||| |||>
b) <||| ||| e ||| |||><||| ||| /e ||| |||>
c) <||| ||| emp ||| |||><||| ||| emp ||| |||>
d) <||| ||| em ||| |||><||| ||| /em ||| |||>

Q.2

______ element used to override the current text direction?
a) <||| ||| bod ||| |||><||| ||| /bod ||| |||>
b) <||| ||| bd ||| |||><||| ||| /bd ||| |||>
c) <||| ||| bdo ||| |||><||| ||| /bdo ||| |||>
d) none of the above

Q.3

The <||| ||| q ||| |||>…<||| ||| /q ||| |||> element is used to add d__________ within a sentence.
a) quotations
b) double quote
c) strong text
d) marked text

Q.4

<||| ||| meta ||| |||> tags are placed inside _____tag?
a) <||| ||| body ||| |||>
b) <||| ||| head ||| |||>
c) <||| ||| form ||| |||>
d) <||| ||| div ||| |||>

Q.5

___________ is used for http response message headers?
a) name
b) scheme
c) content
d) http-equiv

Q.6

_____ tag are used to store cookies on client side?
a) <||| ||| meta ||| |||>
b) <||| ||| body ||| |||>
c) <||| ||| title ||| |||>
d) <||| ||| head ||| |||>

Q.7

HTML comments are placed in between _______tags?
a) <||| ||| !--...-- ||| |||>
b) <||| ||| !--…--! ||| |||>
c) <||| ||| --…-- ||| |||>
d) none of the above

Q.8

HTML tables are created using _____ tag?
a) <||| ||| t ||| |||>
b) <||| ||| tab ||| |||>
c) <||| ||| table ||| |||>
d) <||| ||| tt ||| |||>

Q.9

<||| ||| TD ||| |||> … <||| ||| /TD ||| |||> tag is used for _______?
a) Table heading
b) Table Records
c) Table row
d) none of the above

Q.10

<||| ||| SCRIPT ||| |||> … <||| ||| /SCRIPT ||| |||> tag can be placed within ________?

a) Header
b) Body
c) Both a and b
d) none of the above

Your Score: 0/10

Other Chapters of Class 10

⇒   EXPLORE   ⇒

70%