Scribd
Upload
91 views

Creating A Basic Web Page: CS134 Web Design & Development

CS134 teaches how to create basic web pages using HTML and XHTML. Key points covered include: - HTML source documents describe the content and layout of web pages and are interpreted by browsers. - HTML/XHTML documents consist of tags enclosed in angle brackets used to lay out content, and can be created in simple text editors. - XHTML is a more standardized version of HTML that inherits XML syntax rules. - Basic page structure includes DOCTYPE, head, title, and body sections. - Common tags include paragraphs <p>, headings <h1>-<h6>, emphasis <em>, strong <strong>, line breaks <br>, and comments <!-- --> .

Uploaded by

Mohsin Awan
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
91 views

Creating A Basic Web Page: CS134 Web Design & Development

CS134 teaches how to create basic web pages using HTML and XHTML. Key points covered include: - HTML source documents describe the content and layout of web pages and are interpreted by browsers. - HTML/XHTML documents consist of tags enclosed in angle brackets used to lay out content, and can be created in simple text editors. - XHTML is a more standardized version of HTML that inherits XML syntax rules. - Basic page structure includes DOCTYPE, head, title, and body sections. - Common tags include paragraphs <p>, headings <h1>-<h6>, emphasis <em>, strong <strong>, line breaks <br>, and comments <!-- --> .

Uploaded by

Mohsin Awan
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

CS134 Web Design & Development

Creating a Basic Web Page


Mehmud Abliz

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

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

XHTML
Tags are extensible

Tags are not caseOnly lowercase tags are sensitive allowed Possible to leave off and Tags should appear in ending tag like </body> 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