HTML (Hyper Text M
arkup Language)
Outline of the Presentation
Introduction ( Definition & working of web
page)
History of HTML
Syntax
Structure of Web page
Creating a basic HTML file
Advantages & Disadvantages
References
How the Web Works?
WWW use classical client / server architect
ure
HTTP
is text-based request-response protocol
HTTP
Page request
HTTP
Server response
Client running a
Web Browser
3
Server running
Web Server
Software (IIS,
Apache, etc.)
How the Web works
WWW documents are just word processing
documents
Written in HTML Hyper Text
Markup Language
The HTML language tells a Web Browser how to
interpret the document - i.e. where to put text, how
big to make the words, where to place pictures,
etc.
What is HTML
Hyper Text Markup Language
It is a text file containing small markup tag
s
The markup tags tells the Web browser ho
w to display the page
What is HTML
HTML describes the content and format
of web pages using tags.
Ex. Title Tag:<title>A title </title>
Its the job of the web browser to interpret t
ags and display the content accordingly.
History of HTML
1992 : HTML 1.0 by Tim Berners-Lee
1994 : HTML 2.0
1996 : HTML 3.2
1997 : HTML 4.0
1999 : HTML 4.01
2008 : HTML 5.0
HTML Syntax
An HTML file contains both formatting ta
gs and content
Document content is what we see on the
webpage.
Tags are the HTML codes that control the
appearance of the document content.
HTML Syntax
HTML syntax:
Closing
tag
two-sided tag:
<tag attributes>document content</tag>
Starting
tag
Properties of the
tag.
Optional!
Actual content appears in
webpage. It could be empty
Examples: <p> CGS 2100 </p>
<body bgcolor = yellow> UCF </body>
Structure of the web page
Starting with the tag <html>...</html>
Everything about
the web page
should be
enclosed here
<html>
.......
</html>
Structure of the web page
Inside the <html></html> tag
Each
web page has a head part described in <head>
</head> tag:
The title of the
web page
should be put
here
<html>
<head>
<title> CGS 2100 </title>
</head>
</html>
Structure of the web page
Inside the <html></html> tag
Each web page has a body part described in <body></body> ta
g:
<html>
<head>
<title> CGS 2100 </title>
</head>
The content of
the whole web
page should be
put here
<body>
This is a sample HTML file.
</body>
</html>
Title
Body
Create a basic HTML file
Open your text editor (notepad).
Type the following lines of code into the document:
<html>
<head>
<title> CGS2100 lab section</title>
</head>
<body>
This is a sample HTML file.
</body>
</html>
Create a basic HTML file (cont)
Save the file as sample.htm
sample.html
Basic HTML tags
Introduction to some common tags
Paragraph
List
tag
tag
Hyperlink tags
Paragraph tags <p>...</p>
<html>
<head>
<title> CGS 2100 </title>
</head>
<body>
<p> Here is the first paragraph. </p>
<p> Here is the second paragraph. </p>
</body>
</html>
result
First paragraph
Space between
paragraphs
Second paragraph
List tags
Ordered list: used to display information in a numeric orde
r. The syntax for creating an ordered list is:
<ol >
<li>item1 </li>
<li>item2 </li>
</ol>
Result:
e.g.
<ol >
<li> Name: Your name </li>
<li> Section: ### </li>
<li> Instructor: Yuping </li>
</ol>
List tags
Unordered list: list items are not listed in
a particular order. The syntax is:
<ul >
<li>item1 </li>
<li>item2 </li>
</ul>
Result
e.g.
<ul>
<li> Name: Your name </li>
<li> Section: ### </li>
<li> Instructor: Yuping </li>
</ul>
Hyperlink
Link to another location or file
Syntax:
<a href= http://www.ucf.edu> Link to UCF </a>
Content displayed on
the page
Starting
Tag
Result:
Attribute of the tag: the address of
the hyperlink
Ending tag
Link
Link to web site
<a
href= http://www.ucf.edu> Link to UCF </a>
Link to document
<a href=http://www.eecs.ucf.edu/images/building.jpg>Link</a>
Email link
<a href= mailto:name@domain.com> Link to email </a>
Include a Picture
<img src=FILENAME />
<img src=FILENAME alt=text />
E.g.
<img src=logo.gif alt=Google logo />
<img src=logo.gif />
Advantages of HTML
Highly Flexible & Widely used
Supported on every browser
User friendly
Consistent & efficient
Easy to understand & no training required
Easier to maintain & update any site
Disadvantages of HTML
Can create only static and plain pages
Need to write lot of code for making simple
web page
Concerns with security features
Complexity in writing long codes
References
HTML book HTML and XHTML
Various web tutorials
A presentation by
Alok Prasad ( 158902)
Bhanu Prakash Sharma G (158906)
Sowmya. E (158911)
Ajith Meruga (158921)
Ranadheer . J (158926)
Shershawh (158931)
Sumantha Pal (158936)
