Introduction to HTML

1
Introduction to HTML
2
Todays 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

3
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

4
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

5
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

6
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

7
What is Web Browser ?

• A client software which is used to render web
  pages.
• Internet Explorer
• Mozilla Firefox
• Windows Chrome
• Netscape Navigator
• Mosaic

8
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)
response (HTML, )
Client
Server
9
What is Internet ?

• The largest network of networks in the world

10
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.

11
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.

12
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

13
Electronic Mail (e-mail)

• Distributes e-mail messages and attached files to
  one or more electronic mailboxes.
• Eg- e-mail addresses
• thomas_at_mes.edu.in
• murugan_at_mesmarampally.org

14
Electronic Mail (e-mail)
Continue

• thomas _at_ mes . edu . in
• murugan _at_ mesmarampally . org

Type of Organization
Country
Name of Person
Organization
15
Electronic Mail (e-mail)
Continue

• Different e-mail service providers
• G-Mail
• Yahoo Mail
• Hot Mail

16
(No Transcript)
17
(No Transcript)
18
(No Transcript)
19
(No Transcript)
20
(No Transcript)
21
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.

22
(No Transcript)
23
(No Transcript)
24
(No Transcript)
25
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)

26
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,

27
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.

28
Naming Convention

• All elements are enclosed in lt gt brackets.
• Most elements require a start tag and end tag.
• Eg- lttitlegtMy First Web Pagelt/titlegt
• The end tag has a forward slash (/).
• Elements names are not case sensitive.

29
Document Structure

• lthtmlgt
• ltheadgtlttitlegtMy First Web Pagelt/titlegt
• lt/headgt
• ltbody bgcolor"white"gt
• ltpgtA Paragraph of Text.lt/pgt
• lt/bodygt
• lt/htmlgt

30
Nested Tags

• Like a tree, each element is contained inside a
  parent element
• Each element may have any number of attributes

ltbody bgcolor"white gt...lt/bodygt
31
Basic Tags

• lthtmlgt
• ltheadgtlttitlegtMy First Web Pagelt/titlegt
• lt/headgt
• ltbody bgcolor"white"gt
• ltpgtA Paragraph of Text.lt/pgt
• lt/bodygt
• lt/htmlgt

32
HTML Elements

• ltHTMLgt Elements
• It encloses the entire HTML document.
• Starting tag ltHTMLgt
• Ending tag lt/HTMLgt
• ltHEADgt
• It encloses the head section of the document.
• Starting tag ltHEADgt
• Ending tag lt/HEADgt

33
HTML Elements

• ltTITLEgt Elements
• Found only in head section.
• Denotes the title of the document.
• Starting tag ltTITLEgt
• Ending tag lt/TITLEgt
• ltBODYgt
• It encloses the body section of the document.
• Starting tag ltBODYgt
• Ending tag lt/BODYgt

34
HTML Elements

• ltH1gt Elements
• Denotes the first level headline of an HTML
  document.
• Starting tag ltH1gt
• Ending tag lt/H1gt
• ltBgt
• To make characters bold.
• Starting tag ltBgt
• Ending tag lt/Bgt

35
HTML Elements

• ltPgt Elements
• For start of a new paragraph.
• ltAgt
• To add hyper link to the document.
• ltA HREFhttp//www.lsp4you.comgt Tutorials lt/Agt

36
Basic Tags

• lthrgt horizontal rule
• ltbrgt new line
• ltbgt...lt/bgt bold
• ltigt...lt/igt italicize text in between

37
Lists

• Unordered Lists
• ltulgt
• ltligt Apples
• ltligt Oranges
• lt/ulgt
• Ordered Lists
• ltolgt
• ltligt One
• ltligt Two
• lt/olgt
• Can be nested

• Apples
• Fuji
• Granny Smith
• Oranges

38
Image Files

• ltimg src"URL of image file"gt

39
Tables

• lttablegt...lt/tablegt
• lttrgt...lt/trgt for each row
• lttdgt...lt/tdgt for each element in a row
• ltthgtlt/thgt for header row

40
Table Example

• lttable border"1"gt
• lttrgt
• lttdgtrow 1, cell 1lt/tdgt
• lttdgtrow 1, cell 2lt/tdgt
• lt/trgt
• lttrgt
• lttdgtrow 2, cell 1lt/tdgt
• lttdgtrow 2, cell 2lt/tdgt
• lt/trgt
• lt/tablegt

41
Comments

• lt!-- This is a comment --gt
• lt!--
• This paragraph,
• is also a
• comment...
• --gt

42
Special HTML

• lt ? lt
• gt ? gt
• amp ?
• nbsp ? space

43
Anchor Tag (Links)

• Absolute HREFs specify fully qualified URLs.
• lta href"http//www.yahoo.com/"gtYahoo!lt/agt
• lta href"reldoc.html"gtIn this directory!lt/agt
• lta href"a/doc.html"gtIn sub-directory a!lt/agt
• Relative HREFs are relative to the directory
  containing the current HTML file.

44
What is the WWW?

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