Web Page Design Notes, Part I

A Few Acronyms Defined

HTTP

HyperText Transfer Protocol, a set of rules that control how World Wide Web information is transferred and formatted.

HTML

HyperText Markup Language, the original language allowing an application to specify HTTP rules and thereby control the appearance of your information on a user’s computer screen. HTML is a “markup” language, with HTML commands (tags) embedded in the information being sent. Commands are indicated (delimited) by special characters (‘<‘and ‘>’). Information enclosed in the delimiters is treated as instructions to the Web browser program, not as text to be displayed.

XHTML

Extensible Hypertext Markup Language, a revised version of HTML, with a richer set of features than the original. XHTML allows designers to focus on separating content of a web page from appearance of a web page.

CSS

Cascading Style Sheets, a set of user-definable rules that determine how and where content delimited by HTML tags should appear within a web page. CSS in conjunction with XHTML makes it easy to define a common “look and feel” to use across all your web pages.

DHTML

Dynamic HyperText Markup Language, a combination of standard HTML, JavaScript, and Cascading Style Sheets to allow users to build dynamically generated (as opposed to static) web pages.

CGI

Common Gateway Interface, a set of rules and instructions for processing interactive information such as forms. CGI instructions are written as scripts, in programming languages such as PERL or C++.


Basic Web Page Structure

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>A Title For Your Web Page</title>

<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″ />

</head>

<body>

The information you want displayed on the page, containing html commands.

</body>

</html>

 


About HTML Tags

  1. Any text appearing between a left angle bracket (<) and a right angle bracket (>) will be treated as an HTML instruction by a web browser.
  2. If the text between the brackets is not defined as an HTML command that your browser understands, the browser will ignore it completely (if you are lucky) or display it as text (if you aren’t so lucky).
  3. Most HTML tags come in pairs indicating the beginning and end of the information affected by that tag. Beginning tags are the specific tag with any modifiers; ending tags are a slash (‘/’) followed by the specific tag, no modifiers. See the <html> </html>, <head> </head>, <title> </title>, and <body> </body> examples above. Although older versions of HTML often allowed the designer to omit the end tag of a pair, it should NOT be omitted to conform to XHTML standards.
  4. HTML tags that do not have a specific end tag will have a backslash in the tag itself just before the ending >, i.e. <br />.
  5. HTML tags can be nested inside one another. However, for correct display and conformance to XHTML standards, you should make sure that tag pairs do not overlap, e.g.:
    <strong><em>strong AND emphasized text</em></strong>
    rather than
    <strong><em>strong AND emphasized text</strong></em>
  6. The structure of HTML tags means that some characters cannot be typed directly into your text. these characters must be typed as special HTML codes, beginning with an ampersand and ending with a semicolon, in order to display properly. A few of the more commonly used special character codes include:
    Character Code
    < &lt;
    > &gt;
      (blank space) &nbsp;
    & &amp;
    ¢ &cent;
    © (copyright symbol) &copy;
    ™ (trademark) &trade;
    ® (registered trademark) &reg;
  7. Tabs, blank lines, and other white space in your typed text will be stripped out as your information is processed for presentation in a Web browser. thus, you must use HTML tags to break paragraphs, position items, and include blank lines in your documents.
  8. Different Web browser programs will render your HTML/XHTML marked-up file differently — what you see on your computer with your browser is not necessarily what your reader will see!
  9. The most common error in Web pages is probably omitting the right angle bracket (>) of an HTML tag. this will cause the tag to not be recognized, but instead to display as text!

Basic HTML Commands for Web Pages

Document Structure Tag

<doctype>

This tag, the first tag in a web page file, is required by web pages conforming to the XHTML standards. It states that this document conforms to a specific document standard by using the indicated document type specification. For XHTML documents, the tag states whether the web page uses strict XHTML, transitional (non-strict) XHTML, or frameset XHTML:

Strict XHTML: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Transitional XHTML: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Frameset XHTML: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

Most current users will want to use transitional XHTML to avoid problems with older browsers.

Page Structure Tags

<html xmlns=”http://www.w3.org/1999/xhtml”> </html>

This tag pair marks the scope of a document formatted using html language commands. <html> should be the first tag in your document after the doctype tag; the matching </html> tag should be the last tag in your document. The xmlns attribute is not required, but should be included for any document conforming to the XHTML standard.

<head> </head>

<head> marks the heading section of your html document. The heading section contains your document’s title and any meta-information that may be desired.

<title> </title>

<title> indicates the title of your page. The title should be a short but descriptive phrase indicating the purpose of this page, and will appear in the title bar of the viewer’s browser as they access your page. Titles become the entries in bookmark or favorites files when users bookmark your page. they are also used by many of the search engines to help determine whether your page meets someone’s specific search criteria. thus, titles like “My Page” are all but useless. If you don’t put a title in your document, the title that appears will be something like “Untitled” this is not helpful either — be specific!

<body> </body>

<body> marks the main portion of your page, the actual content to be viewed. All your actual information will appear in your source file between the <body> and </body> tags.

The <body> tag may be modified in a style sheet to set up a background pattern or color. It should NOT be modified in the .htm file.

<hn> </hn>

<hn> indicates a heading, with n a value between 1 and 6. Headings may optionally be centered or right-justified by adding the align=center or align=right modifier to the tag after the hn.

Examples:

HTML Code Results
<h1>This is a first level heading.</h1>

This is a first level heading.

<h2>This is a second-level heading.</h2>

This is a second-level heading.

<h3>This is a third-level heading</h3>

This is a third-level heading.

<h4>This is a fourth-level heading</h4>

This is a fourth-level heading.

<p> </p>

the <P> tag indicates a new paragraph. You MUST use this tag when you want to start a new paragraph. The </P> tag to end your paragraphs was optional under earlier versions of HTML, but is required for conformance to XHTML standards.

<br />

<br /> ends the current line of text and begins a new one at the designated point. No separate end tag is required, only the slash at the end of the tag.

<hr />

The <hr /> tag places a thin (2 pixels high) gray line across the full width of the web page at the indicated location. The size, color, and width of the tag are easily modified using a CSS stylesheet.

 

Text emphasis tags

<strong> </strong>, <em> </em>, <cite> </cite>

Format the enclosed text as strongly emphasized, emphasized or as a citation respectively. The exact appearance will depend on the viewer’s browser; however, strong tends to produce a boldface effect while emphasized tends to produce an italicized effect. Citations are also usually italicized.

Note:

The <font>, <b>, and <i> tags, commonly used for text formatting, are deprecated in XHTML; designers should use style sheets instead of the <font> tag, the <strong> and </strong> tags instead of the <b> and </b> tags, and the <em> and </em> or the <cite> and </cite> tags instead of the <i> and </i> tags.

List tags

<ul> </ul>, <ol> </ol>

Delimit unordered (bulleted) or ordered lists respectively.

<li> </li>

Indicates a single list item within an unordered or ordered list.

Example of lists:

HTMLCode Results
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>
  • list item 1
  • list item 2
  • list item 3
  • list item 4
<ol>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
</ol>
  1. list item 1
  2. list item 2
  3. list item 3
  4. list item 4

Linking tags

<a name=”linkname” />

Anchor tag used to mark a target point for an internal hyperlink. No ending tag is necessary for this form of the anchor tag.
Example of a target point: <a name=”top” />

<a href=”#linkname”> </a>

Anchor tag indicating a hyperlink to the internal target point defined with the name linkname.
Example of an internal link to an internal target point: <a href=”#top”>Return to top</a>

<a href=”path/document.htm”> </a>

Anchor tag indicating an external hyperlink to the document named by the href modifier.
Example of an external hyperlink: <a href=”http://www.gpc.edu/~jbenson/”>Professor Benson’s Homepage</a>

With both forms of the <A href=> tag, the enclosed phrase generally appears in a special color, and often underlined. Additionally, the hyperlink enclosed by an <A href=> tag can be either text or an image.

Image tag

<img src=”graphic file name” alt=”alternate text” />

The <img> tag is used to place graphical images in your file. The src modifier specified the path and file name of the image you want in your file. The alt modifier indicates alternate text which should be displayed instead of the graphic for text-only browsers or for users who have turned off the image loading capability of their browser. the src field is required (obviously); The alt field is required in XHTML. At the very least, include alt=”” for images where you do not want to display any text at all; otherwise the browser will automatically display [IMAGE] if it cannot display the graphic.

If you are using large graphics, you will also want to use the width= and height= modifiers for faster page loading. The width= and height= modifiers allow you to specify the actual size of the image, in pixels. By using these modifiers to the img tag, a browser can continue loading the content of the page as the image is being downloaded rather than waiting until the image is fully downloaded before continuing to show content.

Tables

<table> </table>

<table> lets you set up tables of information. tables may or may not have borders; borderless tables are the proper way to set up columnar information. Tthe default for tables is left-aligned with no border (in Netscape). Use the AliGN=CENTER or AliGN=RIGHT modifier to change the alignment of the entire table. The BORDER modifier gives a bordered table.

<tr> </tr>

Delimits a row for a table.

<th> </th>

Delimits a header cell for a column of a table. Must be enclosed within <tr> </tr>.

<td> </td>

Delimits a regular cell in a table. Must be enclosed within <tr> </tr>.


A Few Selected References

Campbell, Marc. Web Design Garage. Prentice-Hall, 2005.

Castro, Elizabeth. HTML for the World Wide Web with XHTML and CSS: Visual Quickstart Guide, Fifth Edition. Peachpit Press, 2002.

Meyer, Eric. Cascading Style Sheets: the Definitive Guide, Second Edition. O’Reilly Books, 2004.

Morris and Hinrichs. Web Page Design: a Different Multimedia. SunSoft Press/Prentice Hall, 1996. ISBN 0-13-239880-X.

Musciano and Kennedy. HTML: the Definitive Guide, Fourth Edition. O’Reilly Books, 2000.

Niederst, Jennifer. Web Design in a Nutshell. O’Reilly Books, 1998.

Shea, Dave and Holzschlag, Molly. The Zen of CSS Design: Visual Enlightenment for the Web. Peachpit Press, 2005.

Spainhour & Quercia. Webmaster in a Nutshell, Second Edition. O’Reilly Books, 1999.

Teague, Jason Cranford. DHTML & CSS for the World Wide Web: Visual Quickstart Guide, third Edition. Peachpit Press, 2003.

Ullman, Larry. PHP for the World Wide Web: Visual Quickstart Guide, Second Edition. Peachpit Press, 2004.

Negrino & Smith. JavaScript for the World Wide Web: Visual Quickstart Guide, Fifth Edition. Peachpit Press, 2003.

Castro, Elizabeth. XML for the World Wide Web: Visual Quickstart Guide. Peachpit Press, 2000.


Sample Web Page HTML Text

<!doctype html public “-//W3C//DTD HTML 4.0 Transitional//EN”>

<html>

<head>

<title>John Doe, Georgia Perimeter College, Dunwoody Campus, Dept. of Computer Science</title>

<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″ />

</head>

<body>

<h1>John Doe</h1>

<h2>Georgia Perimeter College, Dunwoody Campus<br />

Department of Computer Science</h2>

<table>

<tr><th>Mailing Address</th><th>Office</th></tr>

<tr><td>2101 Womack Rd.<br />Dunwoody, GA 30338</td>

<td>Room E-2800<br />Phone: (770) 551-0000</td></tr>

</table>

<h3>Schedule: Fall Semester, 2000</h3>

<table border>

<tr><th colspan=4>Class Schedule</th></tr>

<tr><td>MWF</td><td>8:00 a.m.</td><td>CSCI 1301 200</td><td>E0280</td></tr>

<tr><td>MW</td><td>5:20 p.m.</td><td>CSCI 1301 240</td><td>E0280</td></tr>

<tr><td>TTH</td><td>10:00 a.m.</td><td>CSCI 1302 200</td><td>A1170</td></tr>

<tr><td>TTH</td><td>12:20 a.m.</td><td>CSCI 1300 202</td><td>A1170</td></tr>

<tr><th colspan=4>Office Hours</th></tr>

<tr><td>MWF</td><td colspan=3>9:30 a.m. – 12:00 p.m.</td></tr>

<tr><td>MW</td><td colspan=3>4:15 p.m. – 5:15 p.m.</td></tr>

<tr><td>TTH</td><td colspan=3>9:00 a.m. – 10:00 a.m.</td></tr>

</table>

<h3>Course Materials</h3>

<ul>

<li><a href=”csci1301/syllabus.htm”>CSCI 1301 Syllabus</a> </li>

<li><a href=”csci1302/syllabus.htm”>CSCI 1302 Syllabus</a> </li>

<li><a href=”csci1401/syllabus.htm”>CSCI 1300 Syllabus</a> </li>

</ul>

</body>

</html>

Print Friendly, PDF & Email

Comments are closed