PHP 64 Lec 1

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>
</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
 “” ends it
Comments Example
<html>
<header>
</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>


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

PHP 64 Lec 1

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

PHP 64 Lec 1

Caricato da

Copyright:

Formati disponibili

Introduction to HTML

 Two other important HTML tags are the

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

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

 Save file as “index.html”

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

This is an example of a paragraph.

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

 Makes a request to the server

 Server sends back data (the response)

 User clicks on the client side...

Client response (HTML, …) Server

Potrebbero piacerti anche