Scribd
Upload
74 views18 pages

Creating A Basic Web Page

The document discusses the basics of HTML and web page design. It covers how a web browser interprets and displays an HTML source document, the structure of an HTML document including tags, and some common HTML tags such as <p>, <br>, <h1>-<h6>, <em>, <strong>, and <blockquote>. It also discusses the differences between HTML, XML, and XHTML.

Uploaded by

csucc2014elective3
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
74 views18 pages

Creating A Basic Web Page

The document discusses the basics of HTML and web page design. It covers how a web browser interprets and displays an HTML source document, the structure of an HTML document including tags, and some common HTML tags such as <p>, <br>, <h1>-<h6>, <em>, <strong>, and <blockquote>. It also discusses the differences between HTML, XML, and XHTML.

Uploaded by

csucc2014elective3
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 18

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
Tags arent extensible Tags are not casesensitive Possible to leave off and ending tag like </body>

XHTML
Tags are extensible Only lowercase tags are allowed Tags should appear in pairs

Overlapping tags

No overlapping tags

For this course, we use XHTML

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/xhtml1strict.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 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
is used to specify keywords that describe a documents contents as well as a short description.

Two necessary attributes "name" & "content"


<meta name="keywords" content="baseball, soccer, tennis"/> <meta name="description" content="Sports information page"/>

<p> paragraph tag

<p> tag
The paragraph tag. Used so 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 <h2>This <h3>This <h4>This <h5>This <h6>This is is is is is is header header header header header header 1</h1> 2</h2> 3</h3> 4</h4> 5</h5> 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.

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>

You might also like