Introduction to HTML
Today’s Discussion








What is HTML ?
What is Web Page ?
Web Server
Web Browser
What is Internet ?
Services Provided by Internet
 e-mail, ftp, wiki-pedia, blogs, java applets
Tools used in creating Web Pages
HTML coding …… using an editor
What is HTML ?

Hyper Text Markup Language
Web authoring software language
 Specifically created to make World Wide Web
pages
 The inventor of HTML - Tim Berners-Lee

What is HTML ?

HTML files
Text files
 Contain mark-up tags
 Tags direct how page is to be displayed by
browser
 Can be created from a simple text editor
 File extension “.htm” or “.html”

What is Web Page ?

Web page : Single disk file with a single file
name – composed of:

Text, Images, Animations, Hyperlinks, etc.

Home page : First page of a website

Web site: A collection of one or more web
pages

Static Website

Dynamic Website
What is Web Server ?

A system on the internet containing one or
more web sites.

It a software which enabling Internet services.

Personal Web Server (PWS)

Internet Information Server (IIS)

Apache Server

Tomcat Server
What is Web Browser ?

A client software which is used to render web
pages.

Internet Explorer

Mozilla Firefox

Windows Chrome

Netscape Navigator

Mosaic
Web Browser and Web Server
-
Client and Server





User uses HTTP client (Web Browser)
It has a URL (e.g. http://www.yahoo.com/)
Makes a request to the server
Server sends back data (the response)
User clicks on the client side...
request (URL)
Client
response (HTML, …)
Server
What is Internet ?

The largest network of networks in the world
What is Internet ?
Continue……

A network of networks, joining many
government, university and private computers
together and providing an infrastructure for the
use of E-mail, bulletin boards, file archives,
hypertext documents, databases and other
computational resources.
What is Internet ?
Continue……

The vast collection of computer networks which
form and act as a single huge network for
transport of data and messages across distances
which can be anywhere from the same office to
anywhere in the world.
Services provided by Internet








Electronic Mail (e-mail)
World Wide Web
Telnet
File Transfer Protocol (FTP)
Internet Telephone
Web TV/Radio
Internet Relay Chat
News Groups
Electronic Mail (e-mail)

Distributes e-mail messages and attached files to
one or more electronic mailboxes.

Eg:- e-mail addresses
thomas@mes.edu.in
 murugan@mesmarampally.org

Electronic Mail (e-mail)
Continue……
thomas @ mes . edu .
Name of Person
murugan
Organization
in
Type of Organization
@ mesmarampally .
org
Country
Electronic Mail (e-mail)
Continue……

Different e-mail service providers

G-Mail

Yahoo Mail

Hot Mail
WIKIPEDIA



A wiki is a publishing platform on which many
people can contribute new content and revise
existing content.
The content benefits from the collective
knowledge of the contributors, so wikis can be
very beneficial for group projects.
Some businesses and organizations use wikis to
maintain documents.
Blog



An online diary for expressing our thoughts and
passion.
Also called Weblogs
Blogging – The activity of creating blog.

Client (Browser) defines the appearance


Font preferences, window width, …
Pours into Browser (PDAs, Bigger/Smaller)
HTML Characteristics

Just a Text File!
+ Portable
+ Human Readable/Writable

HTML Defines the Structure (not Appearance)
of the Document

Client (Browser) defines the appearance

Font preferences, window width, …
HTML Characteristics
Continue……

HTML is a set of instructions – called Elements.

These elements are grouped into sections:

HEAD elements section


Only elements that are allowed in the HEAD section of
the document.
BODY elements section

Only elements that are allowed in the BODY section of
the document.
Naming Convention

All elements are enclosed in < > brackets.

Most elements require a start tag and end tag.

Eg:- <title>My First Web Page</title>

The end tag has a forward slash (/).

Elements names are not case sensitive.
Document Structure
<html>
<head><title>My First Web Page</title>
</head>
<body bgcolor="white">
<p>A Paragraph of Text.</p>
</body>
</html>
Nested Tags


Like a tree, each element is contained inside a parent
element
Each element may have any number of attributes
<html>...</html>
<body bgcolor="white” >...</body>
<head>...</head>
<title>...</title>
other stuff
<p>...</p>
<br>
This is some text!
<table>...</table>
Basic Tags
<html>
<head><title>My First Web Page</title>
</head>
<body bgcolor="white">
<p>A Paragraph of Text.</p>
</body>
</html>
HTML Elements

<HTML> Elements
It encloses the entire HTML document.
 Starting tag <HTML>
 Ending tag </HTML>


<HEAD>
It encloses the head section of the document.
 Starting tag <HEAD>
 Ending tag </HEAD>

HTML Elements

<TITLE> Elements
Found only in head section.
 Denotes the title of the document.
 Starting tag <TITLE>
 Ending tag </TITLE>


<BODY>
It encloses the body section of the document.
 Starting tag <BODY>
 Ending tag </BODY>

HTML Elements

<H1> Elements
Denotes the first level headline of an HTML
document.
 Starting tag <H1>
 Ending tag </H1>


<B>
To make characters bold.
 Starting tag <B>
 Ending tag </B>

HTML Elements

<P> Elements


For start of a new paragraph.
<A>
To add hyper link to the document.
 <A HREF=“http://www.lsp4you.com”> Tutorials
</A>

Basic Tags




<hr> horizontal rule
<br> new line
<b>...</b> bold
<i>...</i> italicize text in between
Lists

Unordered Lists
<ul>
<li> Apples
<li> Oranges
</ul>

Ordered Lists
<ol>
<li> One
<li> Two
</ol>

Can be nested
o
o
Apples
1.
2.
Fuji
Granny Smith
Oranges
Image Files

<img src="URL of image file">
Tables




<table>...</table>
<tr>...</tr> for each row
<td>...</td> for each element in a row
<th>…</th> for header row
Table Example
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Comments


<!-- This is a comment -->
<!-This paragraph,
is also a
comment...
-->
Special HTML




&lt; → <
&gt; → >
&amp; → &
&nbsp; → space
Anchor Tag (Links)
Absolute HREFs specify fully qualified URLs.



<a href="http://www.yahoo.com/">Yahoo!</a>
<a href="reldoc.html">In this directory!</a>
<a href="a/doc.html">In sub-directory a!</a>
Relative HREFs are relative to the directory containing the current
HTML file.
What is the WWW?

A hypertext system that runs on top of the
Internet, based on Three Main Standards
URL
 HTTP
 HTML
