Web Design & Development
Creating a Basic Web Page
HTML Source Document
• When you connect to a web page by entering its
URL into the browser
– Browser instructs your computer to send a message
out over the Internet to the computer specified by that
URL requests that it sends back a certain document
(HTML source doc)
– HTML source doc describes the content and layout
of the web page
– After your computer receives the html, your browser
interprets the html and displays the resulting web
page (text/graphics/links etc)
HTML Source Document
• HTML source document
– A text-only document
– Consists of (1) actual text, and (2) tags
• A tag is an html code that is enclosed in angel
brackets <>; used to lay out the web page.
• XHTML is a simple, more standardized version
of HTML
• XHTML/HTML can be created using a simple
text editor like notepad
• File extension must be .html or .htm
Sample HTML
HTML Source Firefox display of the html source
HTML, XML, XHTML
• XML (eXtensible Markup Language):
– is a set of rules that lets web designers classify their
data in a way customized to their needs.
– Extendable by creating new types of tags.
• XHTML (eXtensible HyperText Markup
Language):
– A new version of HTML based on XML
– Inherits strict syntax rules of XML
HTML vs. XHTML
• Some comparisons of HTML vs. XHTML
HTML XHTML
Tags aren’t Tags are extensible
extensible
Tags are not case- Only lowercase tags
sensitive are allowed
Possible to leave off Tags should appear
ending tag like in pairs
</body>
Composition of a XHTML Document
• An XHTML document consists of three
main parts:
– the DOCTYPE
– the Head
– the Body
Composition of a XHTML Document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8" />
...
<title>…</title>
</head>
<body>
…
</body>
</html>
Creating XHTML
The code inside red rectangle
(<!DOCTYPE … dtd”>) is a
Document Type Definition
(DTD), it specifies what type
of document this is – in this
case an XHTML document.
The code inside green
rectangle, xmlns specifies the
namespace, it tells the browser
that all tags contained within
the <html> tag belong to the
XHTML namespace as
defined by the W3C(World
Wide Web Consortium ) and
located at the given URL.
XHTML Tags/Elements
• Tags are also called elements
• An attribute is a special code that can
enhance or modify a tag. They are
generally located in the starting tag after
the tag name.
• Basic syntax for xhtml tags and attributes
– <tag attribute="value"> </tag>
– All tags must be lower case
– all values of attributes need to surrounded by
quotes
XHTML Tags/Elements
• Example
– <strong>This is bold text…</strong>
– <p style =“text-align:center">This text will
appear aligned to the center…</p>
<meta> tag
• <meta> tag
Describe metadata within an HTML document:
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,Ja
vaScript">
<meta name="author" content="Hege Refsnes">
Two necessary attributes – "name" &
"content"
<meta> tag
• Metadata is data (information) about data.
• The <meta> tag provides metadata about the HTML
document. Metadata will not be displayed on the page,
but will be machine parsable.
• Meta elements are typically used to specify page
description, keywords, author of the document, last
modified, and other metadata.
• The metadata can be used by browsers (how to display
content or reload page), search engines (keywords), or
other web services.
<p> paragraph tag
• <p> tag
– The paragraph tag. Used to separate text
within a web page.
– Container type
– Will provide line breaks
• Optional attribute : align (not allowed in
XHTML 1.0 Strict though)
<p align="center">
<br/> tag
• <br/> tag
– Is used for line break
• Example
<p>
Contact<br />
6150 Sennott Square<br />
University of Pittsburgh<br />
Pittsburgh, PA 15260
</p>
Headings
• <h1> to <h6>
– Define headers. <h1> defines the largest
header. <h6> defines the smallest header.
• Example
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<h3>This is header 3</h3>
<h4>This is header 4</h4>
<h5>This is header 5</h5>
<h6>This is header 6</h6>
<em> & <strong> tags
• <em> tag
– Renders text as emphasized text
• <strong> tag
– Renders text as strong emphasized text
• Example
<em>Emphasized text</em><br />
<strong>Strong text</strong><br />
Commenting Source Code
• Comments are inclosed in <!-- and -->
• Example
<!--This comment will not be
displayed-->
<p>This is a regular paragraph</p>
<blockquote> tag
• <blockquote> tag
– tag defines the start of a long quotation.
– The <blockquote> tag specifies a section that is
quoted from another source.
– Browsers usually indent <blockquote> elements.
• To validate the page as strict XHTML, you must add a
block-level element around the text within the
<blockquote> tag, like this:
<blockquote>
<p>here is a long quotation here is a
long quotation</p>
</blockquote>
• <dfn> tag
– It defines a definition term.
– <dfn>Definition term</dfn>
