Scribd
Upload
53 views

PHP 64 Lec 1

This document provides an introduction to HTML and the basic structure and syntax of HTML documents. It discusses the key components of an HTML page including the <html>, <head>, and <body> tags. It also covers common text formatting tags like <p> and <h1>-<h6> and explains how to add comments to HTML code. The document concludes with a brief overview of how web pages are served from a client/server model on the internet.

Uploaded by

Zia Rehman
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
53 views

PHP 64 Lec 1

This document provides an introduction to HTML and the basic structure and syntax of HTML documents. It discusses the key components of an HTML page including the <html>, <head>, and <body> tags. It also covers common text formatting tags like <p> and <h1>-<h6> and explains how to add comments to HTML code. The document concludes with a brief overview of how web pages are served from a client/server model on the internet.

Uploaded by

Zia Rehman
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 36

Introduction to HTML

EVS_PHP_64_LEC_1
05/03/2011
ZIA-UR-REHMAN
PROGRAM MANAGER
The World Wide Web
A document on the Web is called a Web
page, identified by a unique address called
the Uniform Resource Locator, or URL
 URL commonly referred to as a Web
address
The World Wide Web
A URL is a type of Uniform Resource
Identifier (URI), which is a generic term for
many types of names and addresses on the
World Wide Web
The World Wide Web
A Web site refers to the location on the
Internet of the Web pages and related files
(such as graphic files) that belong to a
company, organization, or individual
HTML Documents
 Originally,
people created Web pages using
Hypertext Markup Language
 Hypertext Markup Language (HTML) is a
simple language used to create the Web
pages that appear on the World Wide Web
HTML Documents
A markup language is a set of characters or
symbols that define a document’s logical
structure or how a document should be
printed or displayed
HTML Documents
 HTML is based on an older language called
Standard Generalized Markup Language,
or SGML, which defines the data in a
document independently of how the data will
be displayed
HTML Documents
A target output format refers to the medium
in which a document will be displayed, such
as a Web page or an online help system
Basic HTML Syntax
 HTML documents are text documents that
contain:
 formatting instructions, called tags
 the text that is to be displayed on a Web
page
Basic HTML Syntax
 HTML tags range from formatting commands
to controls that allow user input
 Tags are enclosed in brackets (< >), and
most consist of a starting tag and an ending
tag that surround the text or other items they
are formatting or controlling
Common Structure and
Formatting HTML Tags
Basic HTML Syntax
 AllHTML documents begin with <html> and
end with </html>

 Two other important HTML tags are the


<head> tag and the <body> tag
Basic HTML Syntax
 The <head> tag contains information that is
used by the Web browser, and you place it at
the start of an HTML document, after the
opening <html> tag
Basic HTML Syntax
 The <head> tag pair and the tags it contains
are referred to as the document head
 Following the document head is the <body>
tag, which contains the document body
Basic HTML Syntax
 You use various parameters, called
attributes, to configure many HTML tags
 You place an attribute before the closing
bracket of the starting tag, and separate it
from the tag name or other attributes with a
space
Basic HTML Syntax
Web Page Design and
Authoring
 Web page design, or Web design, refers to
the visual design and creation of the
documents that appear on the World Wide
Web
Web Page Design and
Authoring
 Web page authoring refers to the creation
and assembly of the tags, attributes, and data
that make up a Web page
The W3C
 Web page authors began to find it necessary
to write slightly different HTML code for each
Web browser in which they anticipated their
Web page would be opened
The W3C
 Toaddress the growing need for standards,
Tim Berners-Lee established the World Wide
Web Consortium, or W3C, in 1994 at MIT to
oversee the development of Web technology
standards
Web Browsers
 At the time of this writing, Internet Explorer
browsers are being used by more than 85%
of the market.
 Netscape Navigator also makes up a large
part of the browser market.
Web Browsers
 Three additional browsers that are worth
noting are:
 Amaya (http://w3.org/amaya)
 Mozilla (http://www.mozilla.org)
 Opera (http://www.opera.com)
Web Browsers
 You must test your Web pages in every
browser and browser version in which you
anticipate they will be opened.
HTML Document Structure
<html>
<head><title>My First Web Page</title>
</head>
<body bgcolor="white">
<p>A Paragraph of Text.</p>
</body>
</html>
Nested Tags
Like a tree, each element is contained inside
a parent element
Each element may have any number of
attributes
<html>...</html>

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

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


<table>...</table>
This is some text!
Basic Tags
<html>
<head><title>My First Web Page</title>
</head>
<body bgcolor="white">
<p>A Paragraph of Text.</p>
</body>
</html>
Creating an HTML file
 Notepad / HTML Editor
 First tag: <html>
 Indicates that you are starting an HTML document
 Last tag: </html>
 Indicates that you are ending an HTML document
 *Note* the open & close structure to HTML
 Fictional example: <sleep> and </sleep>

 Save file as “index.html”


 This is a typical default title for home pages
 Windows may seem to prefer “.htm” but “.html” will also work just fine.
Index.html Example
<html>

</html>
Creating an HTML file (cont.)
 Header information
 <head> to begin, and </head> to end
 Gives information about the page that is not displayed on
the page itself
 Page Title
 <title> to begin, and </title> to end
 Example: <title>EVS_PHP_64</title>
The title tag:
<html>
<head>
<title>EVS_PHP_64</title>
</head>

</html>
Creating Text in HTML
 Body Tags
 <body> and </body>
 *Note* that all text that appears on the page must be
encapsulated within the body tags
 Text headings
 <h1> and </h1>
 There are six defined heading sizes
 <h1> (largest) through <h6> (smallest)
 Paragraphs
 <p> and </p>
Text Example
<html>
<header>
<title>EVS_PHP_64</title>
</header>
<body>

<h1>This is a big heading!</h1>


<h2>This is a smaller heading</h2>
<p>This is an example of a paragraph.</p>

</body>
</html>
Text Example output (cont.)
This is a big heading!
This is a smaller heading!

This is an example of a paragraph.


HTML Organization
 Spacing
 Spacing organizes your work!
 Spacing makes your files easy to read!
 Spacing makes no functional difference to your
web browser
 Comments
 Comments are notes in your HTML file
 Comments make no functional difference to
your web browser
 “<!--” begins a comment, and “ -->” ends it
Comments Example
<html>
<header>
<title>EVS_PHP_64</title>
</header>
<body>

<h1>This is a big header!</h1>


<h2>This is a smaller heading</h2>
<p>This is an example of a paragraph.</p>

</body>
</html>

<!-- This is an example of a comment.-->


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)

Client response (HTML, …) Server

You might also like