Scribd
Upload
219 views

SVKM J.V. Parekh International School: Igcse/ Grade Vii / Ict / Worksheet/29-01-2021

HTML is the standard markup language used to create web pages. It was created by Tim Berners-Lee in 1991. HTML uses tags to define headings, paragraphs, images and other content. Common tags include <html>, <head>, <title>, <body>, <p>, <img>, <b>, <i> and <u>. Attributes provide additional information about elements, and comments can be added for notes.

Uploaded by

Dhaval Desai
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
219 views

SVKM J.V. Parekh International School: Igcse/ Grade Vii / Ict / Worksheet/29-01-2021

HTML is the standard markup language used to create web pages. It was created by Tim Berners-Lee in 1991. HTML uses tags to define headings, paragraphs, images and other content. Common tags include <html>, <head>, <title>, <body>, <p>, <img>, <b>, <i> and <u>. Attributes provide additional information about elements, and comments can be added for notes.

Uploaded by

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

SVKM J.V.

PAREKH INTERNATIONAL SCHOOL


Grade: VII Subject: ICT Topic: HTML Notes
Name of the Student: _________________ Roll No: ______ Date: 29-01-2021

What is HTML?
HTML stands for Hyper Text Markup Language, which is the most widely used
language on Web to develop web pages. HTML was created by Berners-Lee in
late 1991 but "HTML 2.0" was the first standard HTML specification which
was published in 1995.
HTML 4.01 was a major version of HTML and it was published in late 1999.
Though HTML 4.01 version is widely used but currently we are having HTML-
5 version which is an extension to HTML 4.01, and this version was published
in 2012.
Advantages of learning HTML:
• Create Web site - You can create a website or customize an existing web
template if you know HTML well.
• Become a web designer - If you want to start a carrer as a professional
web designer, HTML and CSS designing is a must skill.
• Understand web - If you want to optimize your website, to boost its speed
and performance, it is good to know HTML to yield best results.
• Learn other languages - Once you understands the basic of HTML then
other related technologies like javascript, php, or angular are become
easier to understand.
Applications of HTML
• Web pages development - HTML is used to create pages which are
rendered over the web. Almost every page of web is having html tags in
it to render its details in browser.
• Internet Navigation - HTML provides tags which are used to navigate
from one page to another and is heavily used in internet navigation.
• Responsive UI - HTML pages now-a-days works well on all platform,
mobile, tabs, desktop or laptops owing to responsive design strategy.

IGCSE/ GRADE VII / ICT / WORKSHEET/29-01-2021 Page 1


• Offline support HTML pages once loaded can be made available offline
on the machine without any need of internet.
• Game development- HTML5 has native support for rich experience and
is now useful in gaming developent arena as well.
Basic HTML Document
<!DOCTYPE html>
<html>

<head>
<title>This is document title</title>
</head>

<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>

</html>

HTML Tags
HTML is a mark-up language and makes use of various tags to format the
content.
These tags are enclosed within angle braces <Tag Name>.
Except few tags, most of the tags have their corresponding closing tags.
For example, <html> has its closing tag </html> and <body> tag has its
closing tag </body> tag etc.
Above example of HTML document uses the following tags –

IGCSE/ GRADE VII / ICT / WORKSHEET/29-01-2021 Page 2


The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration tag is used by the web browser to understand the
version of the HTML used in the document. Current version of HTML is 5 and
it makes use of the following declaration −
<!DOCTYPE html>

Heading Tags
Any document starts with a heading. You can use different sizes for your
headings. HTML also has six levels of headings, which use the elements <h1>,
<h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser
adds one line before and one line after that heading.
<!DOCTYPE html>
<html>

<head>
<title>Heading Example</title>

IGCSE/ GRADE VII / ICT / WORKSHEET/29-01-2021 Page 3


</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>

</html>

Output:

HTML - <head> Tag


The HTML <head> tag is used for indicating the head section of the HTML
document. Tags included inside head tags are not displayed on browser
window.
<!DOCTYPE html>
<html>

<head>
<title>HTML head Tag</title>
</head>

<body>
actual content goes here
</body>

</html>

HTML - <title> Tag


The HTML <title> tag is used for indicating the title of the HTML document.
The body title is placed between the <head> and the </head> tags.

IGCSE/ GRADE VII / ICT / WORKSHEET/29-01-2021 Page 4


HTML document title is visible via browser’s title bar.
<!DOCTYPE html>
<html>

<head>
<title>Title comes here</title>
</head>

<body>
<p>title tag is used for indicating the title of the HTML
document. HTML document
title is visible via browser’s title bar.</p>
</body>

</html>

Output:

HTML - Comments
Comment is a piece of code which is ignored by any web browser.
It is a good practice to add comments into your HTML code, especially in
complex documents, to indicate sections of a document, and any other notes to
anyone looking at the code.
Comments help you and others understand your code and increases code
readability.
HTML comments are placed in between <!-- ... --> tags. So, any content placed
with-in <!-- ... --> tags will be treated as comment and will be completely
ignored by the browser.
<!DOCTYPE html>
<html>

<head> <!-- Document Header Starts -->


<title>This is document title</title>
</head> <!-- Document Header Ends -->

<body>
<p>Document content goes here.....</p>
</body>

</html>

IGCSE/ GRADE VII / ICT / WORKSHEET/29-01-2021 Page 5


HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
Double quotes around attribute values are the most common in HTML, but
single quotes can also be used.

Example:
The src Attribute

The <img> tag is used to embed an image in an HTML page. The src attribute
specifies the path to the image to be displayed:

<img src="img_girl.jpg">

The width and height Attributes

The <img> tag should also contain the width and height attributes, which
specifies the width and height of the image (in pixels):

<img src="img_girl.jpg" width="500" height="600">

HTML Paragraphs
A paragraph always starts on a new line, and is usually a block of text.
The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some
white space (a margin) before and after a paragraph.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML Images
Images can improve the design and the appearance of a web page.
The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web
pages. The <img> tag creates a holding space for the referenced image.

IGCSE/ GRADE VII / ICT / WORKSHEET/29-01-2021 Page 6


The <img> tag is empty, it contains attributes only, and does not have a closing
tag.
The src Attribute
The required src attribute specifies the path (URL) to the image.
<img src="img_chania.jpg" alt="Flowers in Chania">

Image Size - Width and Height


You can use the style attribute to specify the width and height of an image.

HTML <b> Tag


The <b> tag specifies bold text without any extra importance.
<p>This is normal text - <b>and this is bold text</b>.</p>

HTML <body> Tag


The <body> tag defines the document's body.
The <body> element contains all the contents of an HTML document, such as
headings, paragraphs, images, hyperlinks, tables, lists, etc.
Note: There can only be one <body> element in an HTML document.

HTML <br> Tag


The <br> tag inserts a single line break.
The <br> tag is useful for writing addresses or poems.
The <br> tag is an empty tag which means that it has no end tag.
<p>To force<br> line breaks<br> in a text,<br> use the
br<br> element.</p>

HTML <i> Tag


The <i> tag defines a part of text in an alternate voice or mood. The content
inside is typically displayed in italic.
The <i> tag is often used to indicate a technical term, a phrase from another
language, a thought, a ship name, etc.
<p><i>Lorem ipsum</i> is the most popular filler text in history.</p>

<p>The <i>RMS Titanic</i>, a luxury steamship, sank on April 15, 1912


after striking an iceberg.</p>

IGCSE/ GRADE VII / ICT / WORKSHEET/29-01-2021 Page 7


HTML <pre> Tag
The <pre> tag defines preformatted text.

Text in a <pre> element is displayed in a fixed-width font, and the text


preserves both spaces and line breaks. The text will be displayed exactly as
written in the HTML source code.

HTML <u> Tag


The <u> tag represents some text that is unarticulated and styled differently
from normal text, such as misspelled words or proper names in Chinese text.
The content inside is typically displayed with an underline.

<p>This is some <u>mispeled</u> text.</p>

IGCSE/ GRADE VII / ICT / WORKSHEET/29-01-2021 Page 8

You might also like