HTML Basics

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: CGS 2100 

<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>
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>
Inside the <html></html> tag
Each web page has a body part described in <body></body> ta

g:
<html>
<head>
</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 ...
<html>
<head>
</head>
<body>
 Here is the first paragraph. 
 Here is the second paragraph. 
</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)

HTML Basics

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML Basics

Hochgeladen von

Copyright:

Verfügbare Formate

HTML (Hyper Text M

Outline of the Presentation

How the Web Works?

WWW use classical client / server architect

is text-based request-response protocol

How the Web works

WWW documents are just word processing

HTML describes the content and format

Its the job of the web browser to interpret t

Actual content appears in

Examples: <p> CGS 2100 </p>

Structure of the web page

Starting with the tag <html>...</html>

Structure of the web page

Inside the <html></html> tag

web page has a head part described in <head>

The title of the

Structure of the web page

Inside the <html></html> tag

Each web page has a body part described in <body></body> ta

Create a basic HTML file

Open your text editor (notepad).

Create a basic HTML file (cont)

Save the file as sample.htm

Basic HTML tags

Introduction to some common tags

Paragraph tags <p>...</p>

a particular order. The syntax is:

<a href= http://www.ucf.edu> Link to UCF </a>

Attribute of the tag: the address of

Link to web site

href= http://www.ucf.edu> Link to UCF </a>

Alok Prasad ( 158902)

Das könnte Ihnen auch gefallen