Scribd
Upload
181 views

HTML Basics

HTML (Hyper Text Markup Language) is used to structure and present content for the web. It uses tags to indicate how elements like text, links, images etc should be displayed in a web browser. An HTML file contains tags that tell the web browser how to interpret and display the document. Common tags include paragraph tags <p> for text, list tags <ul> and <ol> for unordered and ordered lists, and hyperlink tags <a> for links to other pages or files. HTML allows creation of basic static web pages and is supported by all web browsers. [/SUMMARY]

Uploaded by

Bhanu Sharma
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
181 views

HTML Basics

HTML (Hyper Text Markup Language) is used to structure and present content for the web. It uses tags to indicate how elements like text, links, images etc should be displayed in a web browser. An HTML file contains tags that tell the web browser how to interpret and display the document. Common tags include paragraph tags <p> for text, list tags <ul> and <ol> for unordered and ordered lists, and hyperlink tags <a> for links to other pages or files. HTML allows creation of basic static web pages and is supported by all web browsers. [/SUMMARY]

Uploaded by

Bhanu Sharma
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 29

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:[email protected]> 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)

You might also like