Introduction to
HTML
CL ASS 1: INTRODUCTION
GRADE 6
Diagnostic Test
1. __________ is the language used to make webpages.
(HTML, Python, Scratch)
2. The text with special instructions in HTML is called ____________
(command, tag, syntax)
3. HTML file is saved with ____________ extension.
(.doc, .xls, .html)
4. Which of the following is a web browser ____________?
(YouTube, Facebook, Google Chrome)
5. HTML code is written in _________.
(Notepad, MS Excel, MS PowerPoint)
Diagnostic Test -Answers
1. __________ is the language used to make webpages.
(HTML, Python, Scratch)
2. The text with special instructions in HTML is called ____________
(command, tag, syntax)
3. HTML file is saved with ____________ extension.
(.doc, .xls, .html)
4. Which of the following is a web browser ____________?
(YouTube, Facebook, Google Chrome)
5. HTML code is written in _________.
(Notepad, MS Excel, MS PowerPoint)
KWL
• Websites are made of Webpages created using HTML
K
• To create HTML documents
W
L
Class 1
Topic
• Introduction To HTML 5
Learning Objective
• To define HTML
• To create, save and view HTML document
HTML
Definition Information
• HTML (HyperText Markup • Developed by Tim Berner Lee
Language) • In 1989
• HTML is a markup language • Subset of SGML (Standard
that describes the structure Generalized Markup
of a webpage. Language)
Some Important Terms
Internet
• A network of computer networks that connects millions of computers
around the globe.
Server
• Powerful computers that keeps and serves files and information to other
computers/users on the network.
Some Important Terms
Webpage
• A document, commonly written in HTML, that is viewed in an Internet
browser
Website
• A collection of publicly accessible, interlinked webpages that share a single
domain name
Home Page
• The first page of any website.
Some Important Terms
Domain Name
• A domain name is a unique and human-readable address that
is used to identify and locate websites on the internet.
URL
• A complete web address that can direct visitors to a specific
page on a site.
HyperText Markup
Language
HyperText Markup Language
• HyperText is text • Is a language that
which contains links uses tags to Markup
to other documents text content and
or web pages. instructs the browser
how to display it.
How does markup language
work
INPUT OUTPUT
Tools to create a
webpage
Editor Browser Server
• - Used to create or • - To display and view • Store and publish HTML
compose HTML HTML documents document on Web.
documents. • Examples : Google • Any computer that holds
• Examples : Notepad (Text chrome, Internet and serves webpages
Editor) Explores, Mozilla Firefox
• brackets (HTML Editor)
• Dreamweaver(WYSIWYG
editor)
Features of HTML
• HTML is a platform-independent language.
• HTML documents are written in text editors (notepad.)
• HTML files are viewed using web browsers (google chrome).
• It is not a case sensitive language
• Spaces and tabs can be used anywhere in the document. It doesn’t affect
the appearance of the document.
• HTML documents are saved with .htm or .html extension.
HTML as a computer
language
Syntax in languages
Syntax is the grammatical structure of words and phrases to create coherent
sentences.
Syntax in HTML
the structure and arrangement of tags, its attributes and content in HTML
HTML : Tags and
Elements
Tags :
◦ Tags are special instructions to format the content in an HTML document.
E.g. <h1>
◦ Tags tell the browser how to organize and present the contents on the web page.
◦ Tags do dot appear in the browser window.
◦ Tags are always enclosed in a pair of angular brackets. <,>
Elements :
◦ HTML elements are the building blocks of HTML pages
E.g. <h1>Abu Dhabi Indian School</h1>
◦ Elements consist of opening and closing tags, and the content is placed between them.
TAGS - Classification 1
Container Tag
Empty Tag
(Non-Empty)
• Pairs of tags • Single tag (Opening Tag).
• Opening tag and Closing • Does not require a
tag closing tag
• Eg: <title>ADIS</title> • Eg : <hr>,<br>
TAGS - Classification 2
Block Level Tags Text Level Tags
• Takes up full width • Markup parts of text
available • Do not start at a new
• Begins on a new line. line
• Eg: <p>, <H1>, <HR> • Eg : <B>, <I>
ATTRIBUTES
• Attributes are additional information or properties that you can add to an HTML tag.
• They enhances the functionality of a tag.
• They are written in the opening tag.
• They are written as name = “value” pair
• Values should be enclosed in double quote (“ “)
• There can be more than one attribute for a tag. They are written one after the other with a
space between them.
ATTRIBUTES
• Syntax <TAG attribute-name = “attribute value”>
Eg : <body bgcolor=“red”> …………………</body>
Attribute of <body> : bgcolor = “red”
Name of the attribute : bgcolor
Value of the attribute : “red”
HTML 5 Document
Structure
<!DOCTYPE html>
<html>
<head>
<title>Title of the Web Page</title>
</head>
<body>
Content of the web page
</body>
</html>
HTML 5 Document
Structure Tags
• Not an element.
<!DOCTYLE HTML> • It’s a declaration that tells the browser about the version of HTML
<HTML> … … </HTML> • Tells the browser that text contained between them is a webpage.
• Defines the header area of your webpage.
<HEAD> … … </HEAD> • The information given here is not shown in the webpage.
• This tag contains the title of the webpage which is displayed in the
<TITLE> … … </TITLE>
Title Bar.
• Text contained between these tags will be displayed in the
<BODY> … … </BODY>
webpage.
Creating and Saving HTML
Documents
Open text editor : Notepad
Type the codes in
Click on File Save As
Browse to your folder
Enter the name of your file followed by .html (eg: [Link])
Click on Save button
Viewing HTML documents
Open the folder in which you have saved HTML document
Locate the file and double click it.
Webpage opens in your default web browser window.
Lab Activity 1
Create an html document as follows, save it and view it using your browser