Html introduction

INTRODUCTION TO
HTML
Dr.Ranjitha M
Kristu Jayanti college(Autonomous)
Bangalore

What is HTML?
• HTML, otherwise known as HyperText Markup Language,
is the language used to create Web pages
• Using HTML, you can create a Web page with text,
graphics, sound, and video

3
Definitions
 W W W – World Wide Web.
 HTML – HyperText Markup Language – The Language
of Web Pages on the World Wide Web.
HTML is a text formatting language.
 URL – Uniform Resource Locator.
 Browser – A software program which is used to show web
pages.

4
“Normal text” surrounded by
bracketed tags that tell browsers
how to display web pages
Pages end with “.htm” or “.html”
HTML Editor – A word processor
that has been specialized to make
the writing of HTML documents
more effortless.

5
Tags
Codes enclosed in brackets
Usually paired
<TITLE>My Web Page</TITLE>
Not case sensitive
<TITLE> = <title> = <TITLE>

6
Choosing Text Editor
 There are many different programs that you can use to
create web documents.
 HTML Editors enable users to create documents quickly
and easily by pushing a few buttons. Instead of entering
all of the HTML codes by hand.
 These programs will generate the HTML Source Code for
you.

7
Choosing Text Editor
 HTML Editors are excellent tools for experienced web
developers; however; it is important that you learn and
understand the HTML language so that you can edit code
and fix “bugs” in your pages.
 For this Course, we will focus on using the standard
Microsoft Windows text editors, NotePad.

8
Starting NotePad
NotePad is the standard text editor that comes with the
microsoft windows operating system. To start NotePad
in windows follow the steps bellow:
 Click on the “Start” button located on your Windows
task bar.
 Click on “Programs” and then click on the directory
menu labeled “Accessories”.
 Locate the shortcut “NotePad” and click the shortcut
once.

9
HTML Page Creation & Editing
In this chapter you will learn to create HTML
pages with a standard text editor.
Objectives
Upon completing this section, you should be able to
1. Choose a Text Editor.
2. Create a Basic Starting Document.
3. Understand and set Document Properties.
4. View Your Results in a Browser.

10
Creating a Basic Starting Document
<HTML>
<HEAD>
<TITLE>Kristu Jayanti College </TITLE>
</HEAD>
<BODY>
This is what is displayed.
</BODY>
</HTML>

Tags
• The essence of HTML programming is tags
• A tag is a keyword enclosed by angle brackets ( Example:
<I> )
• There are opening and closing tags for many but not all
tags; The affected text is between the two tags

More Tags...
• The opening and closing tags use the same command
except the closing tag contains and additional forward
slash /
• For example, the expression <B> Warning </B> would
cause the word „Warning‟ to appear in bold face on a Web
page

Nested Tags
• Whenever you have HTML tags within other HTML tags,
you must close the nearest tag first
• Example:
<H1> <I> The Nation </I> </H1>

Structure of a Web Page
• All Web pages share a
common structure
• All Web pages should
contain a pair of
<HTML>, <HEAD>,
<TITLE>, and
<BODY> tags
<HTML>
<HEAD>
<TITLE> Example </TITLE>
</HEAD>
<BODY>
This is where you would include
the text and images on your Web
page.
</BODY>
</HTML>

15
Previewing Your Work
 Once you have created your basic starting
document and set your document properties it
is a good idea to save your file.
 To save a file, in NotePad, follow these steps:
1. Locate and click on the menu called “File”.
2. Select the option under File Menu labeled
“Save As”.
3. In the “File Name” text box, type in the entire
name of your file (including the extension
name .html).

16
Edit, Save and View Cycle
 To preview Your Work, open a web browser and do the
following:
1. Click on the menu labeled “File”.
2. Locate the menu option, “Open”.

17
Edit, Save and View Cycle
3. In the “Open” dialog box, click on the
“Browse” button and locate your web
document.
4. Click “OK” once you have selected your file.
 The web browser will load the same
document but with the new revisions. This
process is the Edit, Save and View Cycle.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

• The <!DOCTYPE html> declaration defines that this
document is an HTML5 document
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the
HTML page
• The <title> element specifies a title for the HTML page
(which is shown in the browser's title bar or in the page's
tab)
• The <body> element defines the document's body, and is
a container for all the visible contents, such as headings,
paragraphs, images, hyperlinks, tables, lists, etc.
• The <h1> element defines a large heading
• The <p> element defines a paragraph

What is an HTML Element?
• An HTML element is defined by a start tag, some content,
and an end tag:
• <tagname> Content goes here...</tagname>
• The HTML element is everything from the start tag to the
end tag:
• <h1>My First Heading</h1>
• <p>My first paragraph.</p>

Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none

Steps
Step 1: Open Notepad (PC)
• Windows 8 or later:
• Open the Start Screen (the window symbol at the bottom
left on your screen). Type Notepad.
• Windows 7 or earlier:
• Open Start > Programs > Accessories > Notepad
• Step 1: Open TextEdit (Mac)
• Open Finder > Applications > TextEdit
• Also change some preferences to get the application to
save files correctly.
• Then under "Open and Save", check the box that says
"Display HTML files as HTML code instead of formatted
text".
• Then open a new document to place the code

Steps
Step 2: Write Some HTML
• Write or copy the following HTML code into Notepad:
• <!DOCTYPE html>
<html>
<body>
</body>
</html>

Example 2-Heading
<!DOCTYPE html>
<html>
<body>
</body>
</html>

Paragraph
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

To do-Class work
• Title- My first HTML Page
• Heading – Resume
• Contents
• Name
• Register Number
• Class
• Course
• College with Address

Html introduction

More Related Content

What's hot (20)

Similar to Html introduction (20)

More from RanjithaM32 (14)

Recently uploaded (20)

Html introduction