HTML 5 AND
CSS
LEARNING
OBJECTIVE
◼ Identify the importance
of HTML and its tools to
create an HTML
document.
◼ Explore the functions of
basic tags in HTML
2
INTRODUCTION
◼ A webpage is a page containing text, images, audio , videos and links to
other pages.
◼ These pages are written using a special language called HTML (hypertext
markup language)
◼ It describes the content , format and layout of the webpage.
3
HISTORY OF HTML
◼ HTML was invented by Tim Berners Lee, in 1990
◼ It is derived from SGML (Standard General Markup Language)
4
TOOLS USED TO
WRITE AN HTML
DOCUMENT
HTML editor
Web browser
5
HTML EDITOR
TWO TYPES OF HTML EDITORS:-
WYSIWYG editor Text editor
▪ WYSIWYG stands for – What You See ◼ These editors create HTML documents
Is What You Get. by writing HTML programs.
▪ These editors provide an interface ◼ Eg:- Notepad , Wordpad
where you can create webpages without
writing programs.
▪ Eg:- Adobe dreamweaver , Kompozer.
6
WEB BROWSER
◼ Web browsers are used to view the webpages .
◼ Eg:- Google Chrome, Mozilla Firefox
7
HTML TAGS
◼ Commands in HTML are known as tags.
◼ All HTML tags are enclosed within angle brackets (< >)
◼ A tag can be a container tag or an empty tag.
8
HTML TAGS
Container tags Empty tag
▪ A container tag is a tag ▪ An empty tag is the
Commands in HTML are
that needs to be known as tags. tag that need not be
closed. closed.
▪ A tag is closed by All HTML tags are ▪ It has only opening
putting a forward enclosed within angle tag
slash(/) in front of the brackets (< >)
tag name
▪ Egs:- <HI> Hello </HI> A tag can be a container ▪ Eg:- <br>, <img>
tag or an empty tag.
9
STRUCTURE OF AN HTML DOCUMENT
◼ An HTML document has two main components – HEAD and BODY.
◼ HEAD section contains the title and other information about the HTML document.
◼ BODY section contains all information that is displayed on the web page.
<html>
<head>
<title>.......</title>
</head>
<body>
..........
........
</body>
</html>
10
RULES FOR WRITING AN HTML PROGRAM
◼ The names of HTML tags are case-insensitive, which means it can be written in any
case (upper, small or mixed)
◼ Container tags must always be closed.
◼ Tag names should not have spaces.
◼ There should not be any space between < and > in a tag.
◼ When two or more tags are used the inner tag should be closed before closing the
outer tag.
11
BASIC HTML TAGS
◼ <HTML>
This is a container tag. An HTML program always begins with <HTML> tag and ends with </HTML>
tag. The complete program is written within the opening and closing of <HTML> tags.
◼ <HEAD>
<HTML> tag is followed by the <HEAD> tag. It contains the <title> tag which is used to display the
title of the web page.
◼ <TITLE>
<TITLE> tag is also a container tag. The title is displayed on the title bar of the browser window.
◼ <BODY>
This is also a container tag. It contains all the other formatting tags used in the HTML program. It is
the main portion of the webpage.
12
CREATING, SAVING AND VIEWING A WEB PAGE
◼ Go to Start and Open Notepad.
◼ Type the HTML code.
◼ Save the file using the extension .html
◼ The saved file can be viewed with the help of a web browser.
13
