The document discusses HTML (Hypertext Markup Language) and how to write HTML code using Notepad. It provides examples of basic HTML tags like <html>, <head>, <title>, <body>, <h1>, <p>, and <br>. It explains that HTML tags come in pairs, with a start and end tag. The document also discusses how to save an HTML file and introduces container tags and empty tags.
1. TRINITY INSTITUTE OF PROFESSIONAL STUDIES
Sector – 9, Dwarka Institutional Area, New Delhi-75
Affiliated Institution of G.G.S.IP.U, Delhi
HTML
BBA CA 208
By : Ruchika Bajaj
Assistant Professor (IT)
2. TRINITY INSTITUTE OF PROFESSIONAL STUDIES
Sector – 9, Dwarka Institutional Area, New Delhi-75
HTML
• HTML stands for Hyper Text Markup Language
• It is a language with the help of which we can create
your own Web site.
• A markup language is a set of markup tags
• HTML documents are described by HTML tags
• Each HTML tag describes different document content
3. TRINITY INSTITUTE OF PROFESSIONAL STUDIES
Sector – 9, Dwarka Institutional Area, New Delhi-75
HTML Example: Document Tag
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
4. TRINITY INSTITUTE OF PROFESSIONAL STUDIES
Sector – 9, Dwarka Institutional Area, New Delhi-75
HTML Example
The DOCTYPE declaration defines the document type to be HTML
The text between <html> and </html> describes an HTML
document
The text between <head> and </head> provides information about
the document
The text between <title> and </title> provides a title for the
document
The text between <body> and </body> describes the visible page
content
The text between <h1> and </h1> describes a heading
The text between <p> and </p> describes a paragraph
Using this description, a web browser can display a document with a
heading and a paragraph.
5. TRINITY INSTITUTE OF PROFESSIONAL STUDIES
Sector – 9, Dwarka Institutional Area, New Delhi-75
HTML Tags
• HTML tags are keywords (tag names) surrounded
by angle brackets:
• <tagname>content</tagname>
• HTML tags normally come in pairs like <p> and </p>
• The first tag in a pair is the start tag, the second tag is
the end tag
• The end tag is written like the start tag, but with
a slash before the tag name
• The start tag is often called the opening tag. The end
tag is often called the closing tag.
6. TRINITY INSTITUTE OF PROFESSIONAL STUDIES
Sector – 9, Dwarka Institutional Area, New Delhi-75
Write HTML Using Notepad or Text
Edit
• HTML can be edited by using a professional
HTML editor like:
• Adobe Dreamweaver
• Microsoft Expression Web
• CoffeeCup HTML Editor
7. TRINITY INSTITUTE OF PROFESSIONAL STUDIES
Sector – 9, Dwarka Institutional Area, New Delhi-75
Step 1: Open Notepad
• To open Notepad in Windows 7 or earlier:
• Click Start (bottom left on your screen).
Click All Programs. Click Accessories.
Click Notepad.
• To open Notepad in Windows 8 or later:
• Open the Start Screen (the window symbol at
the bottom left on your screen).
Type Notepad.
8. TRINITY INSTITUTE OF PROFESSIONAL STUDIES
Sector – 9, Dwarka Institutional Area, New Delhi-75
Step 2: Write Some HTML
• Write or copy some HTML into Notepad.
• <!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
9. TRINITY INSTITUTE OF PROFESSIONAL STUDIES
Sector – 9, Dwarka Institutional Area, New Delhi-75
10. TRINITY INSTITUTE OF PROFESSIONAL STUDIES
Sector – 9, Dwarka Institutional Area, New Delhi-75
Step 3: Save the HTML Page
• Save the file on your computer.
• Select File > Save as in the Notepad menu.
• Name the file "index.htm" or any other name
ending with htm.
11. TRINITY INSTITUTE OF PROFESSIONAL STUDIES
Sector – 9, Dwarka Institutional Area, New Delhi-75
12. TRINITY INSTITUTE OF PROFESSIONAL STUDIES
Sector – 9, Dwarka Institutional Area, New Delhi-75
HTML Paragraphs
• HTML paragraphs are defined with the <p> tag:
• Example
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
13. TRINITY INSTITUTE OF PROFESSIONAL STUDIES
Sector – 9, Dwarka Institutional Area, New Delhi-75
HTML Line Breaks
• The HTML <br> element defines a line break.
• Use <br> if you want a line break (a new line)
without starting a new paragraph:
• Example
• <p>This is<br>a para<br>graph with line
breaks</p>
• Result:
• This is
a para
graph with line breaks
14. TRINITY INSTITUTE OF PROFESSIONAL STUDIES
Sector – 9, Dwarka Institutional Area, New Delhi-75
Container Tags
• Container tags are those tags which contains
content in it.
• Ex :
• <p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
• Hence p tag is a container tag
15. TRINITY INSTITUTE OF PROFESSIONAL STUDIES
Sector – 9, Dwarka Institutional Area, New Delhi-75
Empty Tag
• <br > is an empty element without a closing
tag (the <br> tag defines a line break).
• It does not require any content in it.