jqjacobs.net/web
Creating a Web Page
|
HTML Basics | Formatting Text | List Formatting | Special Characters | Useful Links In 1989 Timothy Berners-Lee and other researchers at the CERN Nuclear Research Facility in Switzerland developed a system of hypertext documents to facilitate moving from one document to another on a computer network. Their creation laid the foundation for today's global 'network of networks' known as the World Wide Web. What distinguishes hypertext from ordinary text files is markups, hence Hypertext Markup Language (HTML). In HTML the 'lesser than' and 'greater than' symbols are reserved to distinguish computer instructions from the text in a file. For example, an HTML file begins with the tag <html>. This tag informs the browser software of the file type. Tags and their contents are not displayed in the browser window. Another form of tag, an anchor (also termed a link) with a hypertext reference such as <a href="index.htm">, enables the movement of the browser from page to page on a drive, a computer, a network, or the World Wide Web. This development has transformed the way people the world over communicate information. The fundamental medium of this new form of information exchange is the Web page. Web pages are also called hypertext documents. Browsers typically display links using different colored text and underlining, hence hypertext. Selecting the hypertext link, typically by clicking it with a mouse pointer, directs the browser to retrieve the referenced document, or move to another position in the same document. The document can be on the same drive, computer or network, or on an entirely different computer elsewhere in the world. The Web browser, the software application that finds and displays files, accesses a Web server to retrieve remote documents. A Web server is a computer connected to the World Wide Web which provides access to files. Browsers can be text-based, speech capable, Braille, or, most commonly today, graphical. Browsers are available for virtually every computer platform. HTML works on different platforms, a feature known as portability. Transfer protocols enable communication between different platforms. Browsers allow the user to control the
appearance of Web pages, Like any code, HTML is governed by rules, called its syntax. Specifications and standards have been developed by the World Wide Web Consortium. HTML 1.0 prevailed until 1995, when HTML 2.0 released. Since 1999 HTML 4.01 has been the standard, superseding HTML 3.2. Standards reinforce cross-platform portability and multiple browser support. If you use code released with HTML 4.0, older browsers may not support your tags. You may also wish to test your pages in older browsers. HTML files are simple text documents and can be created with text editors. Newer versions of word processors will save files as HTML documents. Software is available to convert files to HTML or to create HTML as you work in a 'What You See Is What You Get' (WYSIWYG) editor. HTML editors are very convenient, but it is also very important to learn the code and develop the capability to write or edit code. This page focuses on learning basic HTML code. To begin creating a Web page with an HTML editor I suggest using Netscape Composer first, a free software, or, for a more advanced editor, you might try a 30-day free trial of Dreamweaver or GoLive. HTML BasicsA basic HTML file will have two distinct parts, the <head> and the <body>. Only the <body> displays in the browser. The <head> and <body> tags are not strictly required, but they are very useful in organizing the page. The <head> section tags contain information about the page, tags such as the <title> which instructs the browser what to display in the title bar. The keywords used by search engines to database the Web page's contents (and by Web page authors to get their pages noticed by search engines) are also part of the <head>. Here follows a simple HTML page's code. This page has the title "Hello World" and the browser window displays the same text as page contents.
To create this page you simply type this code in a word processor and save the file as a text file with an extension of .htm or .html. If you do not save as a text file other characters may appear in the browser window. Notice that the <html>, <head>, and <body> opening tags all have closing tags. Some tags require closing tags, others do not. Browsers apply opening tags that require closing tags until the closing tag is encountered. A slash ( "/" ) distinguishes the closing version of the tags. Formatting TextTags can contain elements and attributes. The text "Hello World" can be formatted with attributes. Color is an attribute of a font. HTML uses a hexadecimal code number (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F) to represent red, green and blue colors. To format the text as red in color the following tags are added:
In this example the "FF" represents the red, and the "00"s are the green and blue components. White is #FFFFFF and black is #000000. Browsers also understand 16 predefined color names. About one in ten Internet users are viewing pages with 8-bit (256 color) monitors. If you want your pages to display on these monitors exactly as you created the colors, you need to limit your color use to the 216 so-called "browser safe colors." Paragraph is an HTML element. The paragraph element results in a blank line following the end of a paragraph. A return without a blank line is accomplished with the <br> (break) tag. In HTML text automatically wraps. Alignment is an attribute of a paragraph. In the first example the paragraph aligns left and the attribute is in the paragraph tag. In the second example the paragraph aligns center and the alignment attribute is in its own tag and requires a separate closing tag.
Face and size can also be attributes of the font tag. The following example of the font tag has two attributes, one specifying a font face and the other increasing the size of the text. Since computers can have different font suitcases, and different platforms have different standard fonts, it is recommendable to specify a font family instead of a single font face.
Size and emphasis of text can also be controlled using "header" formatting. The title in the <body> of this page is formatted as a header, and the size is controlled with a Cascading Style Sheet. There are six levels of headers, <h1> to <h6>, as illustrated in the table that follows. Header tags also act like paragraph tags in that they are followed by a blank line. The title is enclosed in header tags as follows:
In this example the header is also italicized.
In the next example the bold tag <b> and a size tag are used to emphasis text. The tags <em> and <strong> do the same, but are less commonly used. Other uncommon character tags are <code>, <cite> and <var>. They are presented in the table following the code sample.
The body tag can include attributes controlling page background color or background image file, text and link colors, and margins. In the following <body> tag "grey.jpg" is the background, the text is black, colors are specified for links, visited links and active link, and the width margin is 30.
The source code in this page is indented using the <blockquote> tag.
List FormattingAnother method of setting off text is list formatting. The <ol> tag creates ordered lists. A default ordered list is a list in numeric order. The type attribute will modify the symbol of the list items. For example, the tag <ol type=a> creates a list with lowercase letters instead of numbers. Other types include the default "1" for numerals, "A" for uppercase letters, and "i" and "I" for Roman numerals. The <li> tag creates list items. The <li> tag does not need to be two-sided. Here is an ordered list followed by its source code:
The <ul> tag creates an unordered list. The type attribute can define the bullet shape. Using a type attribute (disc, circle, square) in a <li> tag will override the type in the <ul> tag. Here follows an unordered list with default bullets, followed by its source code.
The <dl> tag creates a definition list. A definition list has a unique form of indentation. An item is followed by an indented definition. This example is followed by abbreviated code. Notice the difference between the term tag <dt> and the definition tag <dd>.
You can also nest one type of list in another list.
Special CharactersOne of the advantages of plain text is the small file size due to 8-bit coding. A bit can be a one or a zero, in other words a binary number system. Two to the eighth power, or 256, is the possible number of combinations in 8-bit processing of binary input. Of course, in a global community with numerous languages, scripts, and symbols, some method of displaying more than 256 characters is essential. Special characters are represented by code numbers or names enclosed by a form of markup, an ampersand (&) and a semicolon (;). These two characters, like the 'greater than' (>), 'lesser than' (<), and quotation (") symbols, have reserved meanings in HTML because they are used in the code. To display an ampersand in the browser window the code must read &, while the 'greater than' and 'lesser than' symbols are displayed by > and <:. The number for the copyright symbol is 169 and the code name is copy, so it is represented in HTML as © or as ©. Because browsers use only one space even if a series of spaces occur in the code, a special character is used to insert spaces that are not ignored, the non-breaking space character ( or  ). A list of special character codes is available online. This link leads to the character entity reference for the ISO-8859-1 character set, the character set used for Western (Latin 1) languages such as English. You should specify your character set in the <head> with a meta tag as follows:
In order to display the markup symbols (reserved characters) in this page the source has to use special characters, so the meta tag (abbreviated) appears as follows in the code:
Useful LinksWorld Wide Web Consortium. The official specifications. This is W3C's home page for HTML. Here you will find pointers to specifications for HTML, guidelines on how to use HTML to the best effect, and pointers to related work at W3C. Also available, a Getting Started with HTML Tutorial site. HTML 4.01 Specification. This specification defines the HyperText Markup Language (HTML), the publishing language of the World Wide Web. The XHTML 1.0 Specification, a reformulation of HTML 4 as an XML 1.0 application, is the current W3C recommendation.
HTML Documentation and Beginner's Guide to HTML. HTML tutorials. |
|||||||||||||||||||||
such as the face, size and color of text
and links, or whether or not images are loaded. Each
browser displays pages somewhat differently, or
interprets tags differently. Different platforms do
not render pages exactly the same even when the same
browser is used. Therefore, an important aspect of Web
page creation is previewing your pages in different
browsers and on different platforms. Be sure to check
the preferences settings of the browsers before you do
this. Set them to use page-specified fonts. To see if
the fonts you specified are displaying you might set
the browser to a different font. The adjacent graphic
illustrates the Fonts Preferences dialog box in
Netscape Navigator 4.7.