Introduction to HTML. Today’s Discussion What is HTML ? What is HTML ? What is Web Page ? What is...

Introduction to HTMLIntroduction to HTML

Today’s DiscussionToday’s Discussion

What is HTML ? What is HTML ? What is Web Page ?What is Web Page ? Web ServerWeb Server Web BrowserWeb Browser What is Internet ?What is Internet ? Services Provided by InternetServices Provided by Internet

e-mail, ftp, wiki-pedia, blogs, java e-mail, ftp, wiki-pedia, blogs, java appletsapplets

Tools used in creating Web PagesTools used in creating Web Pages HTML coding …… using an editorHTML coding …… using an editor

What is HTML ? What is HTML ?

HHyper yper TText ext MMarkup arkup LLanguageanguage

Web authoring software languageWeb authoring software language Specifically created to make World Specifically created to make World

Wide Web pagesWide Web pages The inventor of HTML - Tim The inventor of HTML - Tim

Berners-Lee Berners-Lee

What is HTML ? What is HTML ?

HTML filesHTML files

Text filesText files Contain mark-up tagsContain mark-up tags Tags direct how page is to be Tags direct how page is to be

displayed by browserdisplayed by browser Can be created from a simple text Can be created from a simple text

editoreditor File extension “File extension “.htm.htm” or “” or “.html.html””

What is Web Page ?What is Web Page ?

Web page : Single disk file with a single file Web page : Single disk file with a single file name – composed of:name – composed of: Text, Images, Animations, Hyperlinks, etc.Text, Images, Animations, Hyperlinks, etc.

Home page : First page of a websiteHome page : First page of a website Web site: A collection of one or more web Web site: A collection of one or more web

pagespages Static WebsiteStatic Website Dynamic WebsiteDynamic Website

What is Web Server ?What is Web Server ?

A system on the internet containing one or A system on the internet containing one or more web sites.more web sites.

It a software which enabling Internet services.It a software which enabling Internet services. Personal Web Server (PWS)Personal Web Server (PWS) Internet Information Server (IIS)Internet Information Server (IIS) Apache ServerApache Server Tomcat ServerTomcat Server

What is Web Browser ?What is Web Browser ?

A client software which is used to render web A client software which is used to render web pages.pages. Internet ExplorerInternet Explorer Mozilla FirefoxMozilla Firefox Windows ChromeWindows Chrome Netscape NavigatorNetscape Navigator MosaicMosaic

Web Browser and Web Web Browser and Web Server Server

--

Client and Server Client and Server User uses HTTP client (Web User uses HTTP client (Web

Browser)Browser) It has a URL (e.g. It has a URL (e.g.

http://www.yahoo.com/)http://www.yahoo.com/) Makes a Makes a requestrequest to the server to the server Server sends back data (the Server sends back data (the

responseresponse)) User clicks on the client side...User clicks on the client side...

request (URL)

response (HTML, …)Client Server

What is Internet ?What is Internet ?

The largest network of networks in The largest network of networks in the worldthe world


A network of networks, joining many A network of networks, joining many government, university and private government, university and private computers together and providing computers together and providing an infrastructure for the use of E-an infrastructure for the use of E-mail, bulletin boards, file archives, mail, bulletin boards, file archives, hypertext documents, databases and hypertext documents, databases and other computational resources.other computational resources.

Continue……


The vast collection of computer The vast collection of computer

networks which form and act as a networks which form and act as a

single huge network for transport of single huge network for transport of

data and messages across distances data and messages across distances

which can be anywhere from the which can be anywhere from the

same office to anywhere in the same office to anywhere in the

world.world.

Continue……

Services provided by Services provided by InternetInternet

Electronic Mail (e-mail)Electronic Mail (e-mail) World Wide WebWorld Wide Web TelnetTelnet File Transfer Protocol (FTP)File Transfer Protocol (FTP) Internet TelephoneInternet Telephone Web TV/RadioWeb TV/Radio Internet Relay ChatInternet Relay Chat News GroupsNews Groups

Electronic Mail (e-mail)Electronic Mail (e-mail)

Distributes e-mail messages and Distributes e-mail messages and attached files to one or more attached files to one or more electronic mailboxes.electronic mailboxes.

Eg:- e-mail addressesEg:- e-mail addresses [email protected] [email protected] [email protected]@mesmarampally.org


thomas @ mes . edu . in thomas @ mes . edu . in

murugan @ mesmarampally . org murugan @ mesmarampally . org

Continue……

Organization Type of OrganizationName of PersonName of Person Country


Different e-mail service providersDifferent e-mail service providers

G-MailG-Mail

Yahoo MailYahoo Mail

Hot MailHot Mail

Continue……

WWIKIPEDIIKIPEDIAA A wiki is a publishing platform on A wiki is a publishing platform on

which many people can contribute new which many people can contribute new content and revise existing content. content and revise existing content.

The content benefits from the The content benefits from the collective knowledge of the collective knowledge of the contributors, so wikis can be very contributors, so wikis can be very beneficial for group projects. beneficial for group projects.

Some businesses and organizations Some businesses and organizations use wikis to maintain documents. use wikis to maintain documents.

BlogBlog

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 CharacteristicsHTML 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 CharacteristicsHTML Characteristics

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.

Continue……

Naming ConventionNaming 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 StructureDocument Structure

<html><head><title>My First Web

Page</title></head><body bgcolor="white"><p>A Paragraph of Text.</p></body></html>

Nested TagsNested Tags

Like a tree, each element is contained inside a parent element

Each element may have any number of attributes

<body bgcolor="white” >...</body>

<html>...</html>

<head>...</head>

<title>...</title> other stuff <p>...</p> <br> <table>...</table>

This is some text!

Basic TagsBasic Tags

<html><head><title>My First Web

Page</title></head><body bgcolor="white"><p>A Paragraph of Text.</p></body></html>

HTML ElementsHTML Elements

<HTML> Elements<HTML> Elements It encloses the entire HTML document. It encloses the entire HTML document. Starting tag <HTML>Starting tag <HTML> Ending tag </HTML>Ending tag </HTML>

<HEAD><HEAD> It encloses the head section of the It encloses the head section of the

document. document. Starting tag <HEAD>Starting tag <HEAD> Ending tag </HEAD>Ending tag </HEAD>


<TITLE> Elements<TITLE> Elements Found only in head section.Found only in head section. Denotes the title of the document. Denotes the title of the document. Starting tag <TITLE>Starting tag <TITLE> Ending tag </TITLE>Ending tag </TITLE>

<BODY><BODY> It encloses the body section of the It encloses the body section of the

document. document. Starting tag <BODY>Starting tag <BODY> Ending tag </BODY>Ending tag </BODY>


<H1> Elements<H1> Elements Denotes the first level headline of an Denotes the first level headline of an

HTML document. HTML document. Starting tag <H1>Starting tag <H1> Ending tag </H1>Ending tag </H1>

<B><B> To make characters bold. To make characters bold. Starting tag <B>Starting tag <B> Ending tag </B>Ending tag </B>


<P> Elements<P> Elements For start of a new paragraph. For start of a new paragraph.

<A><A> To add hyper link to the document. To add hyper link to the document. <A HREF=“http://www.lsp4you.com”> <A HREF=“http://www.lsp4you.com”>

Tutorials </A>Tutorials </A>

Basic TagsBasic Tags

<hr> horizontal rule <br> new line <b>...</b> bold <i>...</i> italicize text in between

ListsLists Unordered Lists

<ul><li> Apples<li> Oranges</ul>

Ordered Lists<ol><li> One<li> Two</ol>

Can be nested

o Apples1.1. FujiFuji2.2. Granny SmithGranny Smith

o Oranges

Image FilesImage Files <img src="URL of image file">

TablesTables

<table>...</table> <tr>...</tr> for each row <td>...</td> for each element in a

row <th>…</th> for header row

Table ExampleTable Example

<table border="1"><table border="1">

<tr><tr>

<td>row 1, cell 1</td><td>row 1, cell 1</td>


</tr></tr>

<tr><tr>



</tr></tr>

</table></table>

CommentsComments

 -->

Special HTMLSpecial HTML

< → < > → > & → & → 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?What is the WWW?

A hypertext system that runs on top of the Internet, based on Three Main Standards URL HTTP HTML

Introduction to HTML. Today’s Discussion What is HTML ? What is HTML ? What is Web Page ? What is...

Documents

Transcript of Introduction to HTML. Today’s Discussion What is HTML ? What is HTML ? What is Web Page ? What is...