The required, structural HTML codes



Notes on

Web Page Creation

& Publishing

at Fuqua

Winter 1999

Table of Contents

Page

Understanding the Web Publishing Model 1

Creating a Web Document (& HTML Codes)

Getting Your Document “On the Web”

What Publishing Method to Use

The Web Page that Supports this Tutorial 2

Creating the Basic Web Page: Codes & Structure

Introduction to HTML Codes 2

What the Codes Look Like 3

The Basic Structure of an HTML Document 3

The Four Required, Structural Codes 4

HTML

HEAD

TITLE

BODY

Optional Formatting Body Codes

Headings 6

Paragraph 6

Lists 6

Numbered list

Definition list

An Extended Quotation 8

Line Break 9

Horizontal Rule 9

Font formatting 10

Special Characters 11

Codes for Linking

What is Linking? 11

The Anchor 12

A Note on File References 13

Relative File Reference

Absolute File Reference

Page

The Named Anchor 14

The Download Link 17

The Mail-to Link 17

A Bulletin Board Link 18

HTML Code Examples

The required, structural HTML codes 20

Header code examples 21

Basic formatting: bolding and italicizing 22

Line break and paragraph codes 23

Code for a bulleted list 24

Code for a numbered list 25

Examples of several horizontal lines 26

A link to a different HTML document 27

A link to a document that’s not a web page 28

A link to another section of the same page 29

Understanding the Web Publishing Model

Creating A Web Document (& HTML Codes)

Publishing on the World Wide Web is much like publishing on paper. The difference is that web publishing requires you to use particular “mark-up codes” to indicate how you want your document displayed when someone views it online with a web browser. These formatting codes are called “HTML”, or Hyper Text Markup Language. HTML codes function in a similar way to formatting codes used by a word processor like Microsoft Word. When you use a modern word processor, however, the word processing software shields you from having to see most of the codes. You can create an HTML document for the web using DreamWeaver software and use DreamWeaver much like you’d use Microsoft Word. That is, without having to work with or even see the HTML codes. But becoming familiar with the basic set of HTML codes is useful. If you understand the codes, it can help you get out of the kind of software ‘jam’ that most of us find ourselves in from time-to-time. And the basic set of codes is small and easy to understand.

Getting Your Document “On the Web”

Once you have your web document created (with all its HTML codes) the finishing step is to actually publish the document so anyone browsing the web can see it. Publication is simple. You put a copy of your web file on a web server computer. Once your file resides on a web server, anyone surfing the web that knows the document’s address (URL[1]) can view it. If your page will be part of Fuqua’s web site, you can also arrange to have links established from Fuqua web pages to your web page so browsers can find your page using web links instead of having to know the page’s URL.

What Publishing Method to Use

The publishing method you use depends on who you are at Fuqua.

Faculty: If you’re a faculty member, you can publish personal pages on the web by putting a copy of your file in a special folder established on your Fuqua network H: drive. The special folder is named public_html. You can establish whatever hierarchy of subfolders beneath your public_html folder that you like. The URL to your space is . If you want to publish not personal, but – say – area or other “shared” pages to Fuqua’s web site, you’ll likely use the method described below, for staff.

Staff: If you’re a staff member publishing to Fuqua’s web space, you’ll use Fuqua’s security and version control software to publish. As of this writing, I have little information about that software other than to describe it’s function as a way to keep the latest version of a page available and to help users avoid unfortunate page “collisions” that tend to happen when more than one user is working on a page.

Student: If you’re a student, you’ll publish your web pages on Duke University’s web server computer, named acpub. Duke publishes information about how to use its web server at this URL:

The Web Page That Supports This Tutorial

I’ve published a web page to support this paper-based tutorial. Collected on that page are links to other web pages that discuss various aspects of web page creation. The page is located at:



Creating the Basic Web Page: Codes & Structure

What follows is an introduction to what’s “behind” a basic[2] web page: its codes and structure. If you’re using a sophisticated web editing tool (like DreamWeaver) you may not want or need to know this information. But if you’d like to have more control over the look of your pages, or if you’re curious about what goes into making a basic page, read on.

Introduction to HTML Codes[3]

HTML is an acronym for HyperText Markup Language. HTML is a way to mark text in a document so a web browser can display the text online the way you intend for the text to be seen. Although it’s common to hear the phrase “HTML coding” in relation to creating a web page, working with HTML isn’t the same as coding in the traditional programming sense of the term. You don’t write programs with HTML. HTML is the use of codes or “codes” as formatting elements in a text document. Examples are HTML codes that control the look of headers, tables, paragraphs, and lists in a document.

What the Codes Look Like

Most HTML codes consist of a left angle bracket, the code name, and a right angle bracket, like this:

Most codes are paired. That is, there’s a code to start an instruction and then another, similar code to end the instruction. The end code looks just like the start code except a slash (/) precedes the text within the brackets. For example the text below is designated as a header with a start and end header “1” or code:

This is a Header

HTML is not case sensitive. The code is equivalent to or .

Some codes may include an attribute, which is additional information included inside the start code. For example, you can specify the alignment of a paragraph (left, center, or right) by including the appropriate attribute with the paragraph code:

The Basic Structure of an HTML Document

Every HTML document must contain certain standard HTML codes that indicate sections of the document, such as the HEAD and BODY codes. The Head contains the title, and the Body contains the paragraphs, lists, graphics, and any other elements you want included on your page. When a browsers encounters an HTML file it expects to find specific markers in specific locations in the document. That’s what these basic HTML codes provide.

The required HTML codes are shown in the example that follows. This is a simple but complete HTML document that’s ready to be published on the web.

| |

| |

| |

|A Simple HTML Example |

| |

| |

|HTML is Easy To Learn |

|Welcome to the world of HTML. This is the first paragraph. |

|And this is the second and last paragraph. |

| |

| |

Notice the paired codes. In this example, only the paragraph code () can

be an unpaired code.

As displayed in a web browser, the example would look something like this:

| |

|HTML is Easy To Learn |

| |

|Welcome to the world of HTML. This is the first paragraph. |

| |

|And this is the second and last paragraph. |

| |

The required codes in the example above are the , , , and start codes and their corresponding end codes.

What follows are descriptions of the four required structural codes. Following the required codes are descriptions of codes that can be used in the body or main content part of a web page.

The Four Required, Structural Codes

These four paired, structural codes are required in any web page you create: HTML, HEAD, TITLE, and BODY.

HTML

This paired code tells your browser that the file contains HTML-coded information. The and codes should be the first and last codes that appear in your document.

(The file extension in the name of the HTML file you create also indicates that your document is an HTML document. While your file name can be anything you choose, your file extension should be either .htm or .html.)

HEAD

The paired head code identifies the first part of your HTML-coded document. It surrounds the part of your document that contains the title. For example:

This is my document title.

The title you specify in your document displays in the title bar of your browser's window and is also used by many search engines to locate your document. (More below.)

TITLE

The paired title code contains your document title and should give the user some idea of the page’s content. Whatever title you supply is displayed in the title bar at the top of the browser window (it doesn’t appear in the document inside the window itself). The title is also what’s displayed when a user bookmarks your page, so it’s helpful if you choose a title that’s descriptive, unique, and relatively short. A title is also used to identify your page for search engines. Keep titles to 64 characters or fewer.

Example:

NCSA Mosaic Guide (Windows): Installation

Would be more useful as a title than simply

Installation

BODY

The largest part of your HTML document is the body. The body contains the content of your document. Whatever you include in the body is displayed within the text area of the browser window. The opening BODY code belongs below the code. The dclosing BODY code belongs immediately before the ending code. For example:

xxx

.

. the bulk of your web page contents here

.

Optional Formatting Body Codes

The codes explained below are not structural codes and none of them are required. Use these codes within the body of your HTML document to achieve the page formatting you want.

H (Headings)

HTML has six levels of headings, numbered 1 through 6, with 1 indicating the largest in size and 6 the smallest. Headings are typically displayed bolded and in larger fonts than normal body text and include surrounding white space.

This is My Heading

is the header code syntax where y is a number between 1 and 6 specifying the heading size. The largest header would look like this:

This is a Big Header

P (Paragraph)

Unlike a document you might create in a word processor, carriage returns you include as you compose an HTML document aren't significant. In fact, any amount of white space you include – such as spaces, line feeds, and carriage returns -- is automatically compressed by the browser into a single space when your HTML document is displayed online. For this reason, the code is very important. It indicates the start of a new paragraph by creating a blank line with text starting left justified after the blank line.

NOTE: You can generally omit the closing code. However, there may be occasions when you want to use it. For example, by using both the starting code and the closing code as a paragraph container you can center just a particular paragraph by including the ALIGN=alignment attribute with the P code. For example:

This is a centered paragraph.

ALIGN=LEFT is the default alignment. Right-align using ALIGN=RIGHT.

Lists

If you want to include some body text in list format, HTML offers codes to create both bulleted and numbered lists as well as a “definition list” type that has neither bullets nor numbers but uses special indenting to set off list items.

To make a bulleted list

1.Start with the code (for unnumbered list).

2. On the next line enter the code (list item) followed by the text for the item. No closing code is needed.

3. Use a code for each item in the list.

4.End the entire list with a closing list code.

Code for a bulleted list: The result when displayed:

| | |

| |Apples |

| Apples |Bananas |

| Bananas |Oranges |

| Oranges | |

| | |

If you like, each item can contain multiple paragraphs. Indicate the paragraphs with the paragraph codes.

To make a numbered list

A numbered list (also called an ordered list, from which the code name derives) is identical to a bulleted except it uses instead of and a number precedes each item displayed. The items are codeged using the same code.

Code for a numbered list: What’s displayed:

| | |

| |Apples |

| Apples |Bananas |

| Bananas |Oranges |

| Oranges | |

| | |

To make a definition list

A definition list is a particular kind of indented list. consists of alternating a definition term (coded as ) and a definition (coded as ), surrounded by and codes.

Code for a definition list: What’s displayed:

| | |

| |GEMBA |

| GEMBA |GEMBA, Fuqua’s Global Executive MBA program, enrolls approximately |

| GEMBA, Fuqua’s Global Executive MBA program, |90 students each year. |

|enrolls approximately 90 students each year. |MBA Program |

| MBA Program |Fuqua’s daytime MBA program enrolls approximately 350 students each|

| Fuqua’s daytime MBA program enrolls approximately|year. |

|350 students each year. | |

| | |

The and entries can contain multiple paragraphs (indicated by paragraph codes), lists, or other definition information. For example:

GEMBA

Enrolls 90 students each year.

… Targets full-time executives.

Daytime MBA

… Enrolls 350 students each year.

… Targets rising managers for full-time residential studies.

An Extended Quotation

Use the code to include a lengthy quotation that’s displayed online as a block of text. A browser will increase the indentation for text marked to separate it from surrounding text.

Example code: As displayed online:

|Omit needless words. |Omit needless words. |

| | |

|Vigorous writing is concise. A sentence should contain no |Vigorous writing is concise. A sentence should contain no unnecessary|

|unnecessary words, a paragraph no unnecessary sentences, for the |words, a paragraph no unnecessary sentences, for the same reason that|

|same reason that a drawing should have no unnecessary lines and a|a drawing should have no unnecessary lines and a machine no |

|machine no unnecessary parts. |unnecessary parts. |

|--William Strunk, Jr., 1918 | |

| |--William Strunk, Jr., 1918 |

Line Break

The code forces a line break with no extra space between lines. This is in contrast to the code, which generates a blank line of space between lines of text. Here’s an example of the difference between and :

The code: What displays:

| | |

|This is a line with a break specified. |This is a line with a |

| But this is a new paragraph. |break specified. |

| | |

| |But this is a new paragraph. |

Horizontal Rule

The unpaired code produces a Horizontal Rule or line across the browser window. Horizontal rules are often used as a visual separators between sections of a page.

You can simply enter the code to get a thin line that extends the width of the page. Or, use the SIZE and WIDTH attributes with the code to vary the rule's thickness and the percencodee of the window covered by the rule. Experiment with the settings until you’ve got the look you want.

In these examples assume that the HR code is located in a centered paragraph:

or

or

How the code displays:

Font Formatting

There are a number of paired codes available for font formatting. Here are three common codes. For more information on how to easily include additional font formatting codes in your document see the section in this tutorial on the HTML Font & Body Code Wizard utility.

- Bold the text. Bolded displays as Bolded.

- Italicize text. Italicized displays as Italicized.

- Underline the text. Underlined displays as Underlined.

- Use a fixed-width font. Displays text in a font where each letter takes the same space as every other letter., or: Displays text in a font where each letter takes the same space as every other letter.

Combine codes to add more than one feature to a font.

Code: As displayed:

| | |

|Examples of Some Font Changes |Examples of Some Font Changes |

|This is text in a fixed width font. | |

|This is bolded text in a proportional font. |This is text in a fixed width font. |

|This is italicized. |This is bolded text in a proportional font. |

|This is underlined. |This is italicized. |

|And this is bolded, italicized, underlined, |This is underlined. |

|AND fixed width. |And this is bolded, italicized, underlined, AND fixed width. |

Note that using the underlining code does not create a link of any kind. It just makes text appear underlined when viewed in the browser. (The reader of your page should understand that plain underlined text isn’t a link if you’re careful not to color your underlined text so it looks like a link.)

Special Characters

Special HTML codes allow you to display characters not available in the plain ASCII character set (e.g., primarily characters with diacritical marks). For example, you can display accented characters using codes such as these[4]:

ö - displays as a lowercase o with an umlaut: ö

ñ - displays as a lowercase n with a tilde: ñ

È - displays as an uppercase E with a grave accent: È

Three regular ASCII characters--the left angle bracket (), and the ampersand (&)--have special meanings in HTML and therefore can’t be used "as is" in an HTML document. To use one of the three characters in an HTML document you must enter its special code instead:

< - displays as <

> - displays as >

& - displays as &

NOTE: Unlike the rest of HTML, these special codes are case sensitive. You cannot, for instance, use < instead of < to display the < symbol.

The code below generates a space. You often see it used to create special indenting on a line:

  - displays as a blank space

Codes for Linking

What is Linking?

The chief power of HTML comes from its ability to let a user easily move from one web page to a new section of text on that page or to a new page or to an image or to a file, depending on what that user wants to see next. This ability to jump or move is accomplished by means of a hypertext link (often shortened to “hyperlink” or just “link”). A browser highlights a segment of text or an image with color and/or underlining to indicate that it’s a link. Then when the user clicks the link they then jump to whatever information that colored and/or underlined item is linked to.

Covered in this section are five kinds of links:

1. The Anchor – to link to another HTML document

2. The Named Anchor – to link to a particular section of another (or the same) HTML document

3. A Download Link – to distribute files to readers of your page

4. The Mailto Link – to allow readers of your page to contact you via e-mail

5. The Bulletin Board Link – to let readers directly access an online bulletin-board from a link on your page

The Anchor

The basic code used for linking is , which stands for anchor. To include an anchor in your web page that would provide a link to another web page you’d do the following:

1. Start the anchor with ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download