Basic Web Page Design--Online!
(+ Resources for Further Consultation:

This is mostly a collection of links, but there is a bit of information here, especially on editors, correcting your code, and font style.)

  
 

Tips for Getting Started
(What is HTML? What you need to edit and test it.)

  • A web page A web page is a simple text page, with markup. The markup indicates to a web browser how the display is to be formatted. Traditionally, web pages have been marked up as html pages. Today they may also be marked up as xhtml pages, which are very similar to html pages, but which are designed so that they can be used with the semantic web.
    Web page markup includes
    • The page content, including text and visual content
    • The HTML (or XHTML) tags, that is the elements in the page
    • The style codes, which set the style of the page elements
  • Editing Web pages can be edited with a variety of editors (including MS FrontPage, if you can afford it), but it's also really easy to edit the page in HTML using a simple text editor (such as notepad or wordpad, both of which come with your browser and are usually kept with the accessories in your programs!).
    Notepad
    allows lines of text to overflow the visual window and does not wrap them till they are quite long! Thus you may need to scroll with Notepad.
    Wordpad
    wraps lines of text so that they fit in the window, making them easier to see and edit--but you must be careful saving files in Wordpad because Wordpad provides several file formats, including text (the default file extension is .txt), rich text format (with the extension .rtf), and Word 6.0 document format (with the extension .doc). (Ultimately your page must be saved as text, sans any Wordpad formatting, but with the extension .html or .htm, rather than .txt; in Wordpad you actually have a choice of two text formats, plain text or Ansi format, and Unicode format.Note 1)
    (Text files can be displayed in a browser window. However, your browser will display the markup tags for files with the extension .txt and will not use the codes to format the page.
    You can also view the text markup of a page by clicking on [View] in your menu bar, and then [Page Source]; this lets you see how other people markup pages; sometimes the code is easy to follow; sometimes a bit trickier; however, some pages today do not use that much basic text markup; instead most of their markup is in a JavaScript or another file that the page file links to)
  • Testing There are several browsers out today (Internet Explorer in various versions, Netscape, Mozilla, and Opera, among others), and, while all browsers display html code in a uniform way, not all browsers display other kinds of markup (including the CSS style codes that are used today to format the style of html pages, and javascript events) in a uniform fashion. Nor do all browsers handle errors in your coding in a uniform fashion. So it's a good idea to open your page and see how it looks in as many browsers as possible.
Tips for Getting Started
(What is HTML? What you need to edit and test it.)
Introduction
(Basic HTML Page Structure. Tutorials that explain the basic page structure! + how to put in Images, Links. Troubleshooting the page.)
Images
(Where to Find Images, Styling Images)
The Language of Your Page
(Setting the Page Language--so that users get served pages in the language of their choice; so that browsers can process the text)
More Ways to Style Your Page
(backgrounds, font, neat effects with links, aligning and indenting text, creating a text box with a different background color and a border, don't forget to's)
& More on Making Your Web Page Accessible
(How to make your web page accessible to more users: Some Quick Do's and Dont's)
Creating & Using Tables
(Basic Tables, styling Tables, Tables & Accessibility, When to Use Tables)
Create A Menu Using an Image Map
(from Dave Raggett's tutorial, "Advanced HTML")
CSS Page Layout
(Layout the Elements on Your Page, Using CSS)
Places to Hang Your Site
(free sites, ad-free sites, private, password-only access sites)
More Resources
(For further study: (Language Tagging, Accessibility, CSS Style, Frames, Forms & JavaScript)
Language Tagging
Accessibility
CSS Style Codes
Frames
Forms & JavaScript

HTML Basics
(Basic HTML Page Structure. Tutorials that explain the basic page structure! + how to put in Images, Links. Troubleshooting the page.)

  • Hypertext Markup Language or HTML

    is the language the browser uses to read and display web content. It consists of various codes that are used to structure a document. The hypertext markup codes indicate the various elements of the HTML document, including paragraphs (the p elements) and divisions (the div elements). There are also headers (or headings, the h elements), and finally the span element.

    (Other elements are the "anchors" [the a elements] which used to be common for specifying "anchors" in the page that could be linked to; table elements [which are more complex elements], and font elements, which style the font. All the elements listed here and above are part of the body element.)

    Below is a simple paragraph, created by a p element:

    Here is a simple paragraph.

    Here is the code:

    <p> Here is a simple paragraph</p>

    Here is the code again, inside the code for a whole page (the only thing missing is the document type declaration; don't worry about that now; it's something you can copy and paste in at the end):

    <html>
    <head>
    <title>This is the page title that prints when you print this page</title>
    </head>
    <body>
    <p> Here is a simple paragraph</p>
    </body>
    </html>

    Besides the elements, there are attributes which can be used to specify additional information about an element. But there is no need to worry about those right away, as they are optional. That is, you do not need to specify any attributes for an element.



  • HTML Tutorials



  • Troubleshooting Your Page

    As Raggett notes, HTML is not that difficult. You can use upper case or lower case characters to type the codes for the HTML elements. And the closing tag for paragraphs </p>, as well as for some of the main parts of the document structure, including the page header (</head>), the page body (</body>), and the html document heading (</html>) is optional--except it's a good idea to use it, because when you start setting the style of paragraphs, that style will be continued throughout the document until the closing tag is reached! (Do use the closing tags for everything else, including list items, lists, links, headers, font styling (including the tags <i> <b>), and the document title, to avoid having the browser interpret those as continuing throughout the page.) Here are some tricks for catching errors:
    Part of your code does not display?
    Missing closing > on one of the tags. Alternately, missing closing quotation mark (if you used quotation marks).
    The link underline goes on and on, all over the page?
    Missing closing tag for a link element--or missing opening 'bracket,' < on the closing tag (in the latter case, you should see the the following displayed where the link should end: />).
    Bold facing or other font style continues throughout a page?
    Missing closing tag--or missing opening 'bracket' on the closing tag.
    List elements which belong to the same level of the list indent successively further and further?
    A good possibility is that the closing tags on the list items has been omitted (thus the list items appear to the browser to be imbedded in the items above) (Alternately, the opening brackets, <, on the closing tags are omitted--but you probably don't make this typo every time, so if it happens every time, you've left out the tag!)
    Styling not applied?
    Typo in the tag where style is applied/declared.


Images
(Where to find images, styling images)

The Language of Your Page
(setting the page language--so that users get served pages in the language of their choice; so that browsers can process the text)

Language Tag Tutorials, Language Tag Registry

More Ways to Style Your Page
(backgrounds, fonts, neat effects with links, aligning and indenting text, creating a text box with a different background color and a border, don't forget to's [hide style codes from older browsers, choose colors that do not clash, & that make your page accessible for the color blind])

  • Font Style

    Font style can be specified in the body, using the attributes face, color and size on a font element:

    <font face="script" size="+3" color="#660066"> Welcome! </font>

    Which displays as:

    Welcome!

    Because not all fonts display in all browsers, you might want to list several font faces (or font-families), separated by commas, in order of preference (if the first font face is not available, the browser will display the second; the generic fonts "serif" and "sans-serif" are almost always available):

    <font face="script, Forte, Comic Sans MS, sans-serif" size="+3" color="#660066"> Welcome! </font>

    Here's the display:

    Welcome!

    You can use the codes, b, i, and u, in separate tags, to make your font bold-faced, italicized, or underlined. For example, inserting a b tag in the above code:

    <font face="script, Forte, Comic Sans MS, sans-serif" size="+3" color="#660066"> <b> Welcome! </b> </font>

    results in the following:

    Welcome!

    Note: the above text should be enclosed in a structural element, such as a p (paragraph), a div (division), or a span element (or else in a more complex table element). Here is the original code for the font style again, enclosed in a paragraph:

    <p> <font face="script" size="+3" color="#660066"> <b> Welcome! </b> </font> </p>

    Alternately, font may be specified in the CSS style definitions for a page element, using the attributes, font-family, color (which colors the text of an element), font-size, font-style, font-weight, and text-decoration.

  • CSS Style Basics

    • Basic Introduction to CSS Style Codes

    • Hiding Style Codes from Older Browsers

      • W3C Style Tutorial (http://www.w3.org/Style/LieBos2e/enter/).
        This tutorial points out that it's possible to use the comment tags,

        <!-- -->

        to comment out style codes, which are not otherwise enclosed as tags, so that these will not be displayed by really old browsers.
        For example:

        <style type="text/css">
        <!-- body { margin-left: 2%; } -->
        </style>

        Here's another commented-out style definition for the page body, but with the font-family, color, and font-weight, and font-size specified (note that the style of the font used in this page's body will be similar to the style of the purple font a bit above):

        <style type="text/css">
        <!-- body { font-family: script; color: #660066; font-weight: bold; font-size: 3em; } -->
        </style>

  • Choosing Background and Font Colors, Creating Borders: Tutorials

  • Aligning and Indenting Text

    Align text to the left or right (or center) using text-align; align the content in an element vertically using vertical-align; indent text to the right (normally, unless you're writing in say Hebrew or Arabic) using text-indent:

  • The Style of Links

    You can change the color, font style, and underlining of links, to distinguish links from the page, and links that the user's mouse is over or that the user has clicked on from other links.
    The classes of links include links that have not been clicked on yet (link), links that the mouse is over (hover), links that are currently open somewhere (active; the old name for these was focus--check), and links that have been visited (visited). The style (text-decoration, color, and font-family) for these classes can be specified in the CSS style codes at the top of the page, so that the link changes color, underlining, etc. when the mouse is over it! Here's the code I used to style the links on this page:

    <style type="text/css">
    <!-- this kind of enclosure is used to comment out style codes so they do not display --> <!--
    a:link { color: rgb(0,0,153); text-decoration: none; font-family: sans-serif; }
    a:visited {color: rgb(102,0,51); text-decoration: none; font-family: sans-serif; }
    a:active { color: rgb(153,0,0); text-decoration: none; font-family: serif; }
    a:focus { color: rgb(153,0,0); text-decoration: none; font-family: serif; }
    a:hover { color: rgb(153,0,0); text-decoration: underline; font-family: sans-serif; }
    -->
    </style>

    The order of the style codes above is important: a:link precedes a:visited which in turn precedes a:active which precedes a:hover. The reason? With style definitions, the last set of definitions that applies to an element is the one that is used; previous definitions are overwritten. For example, both the 'a:hover' definitions and the 'a:link' definitions apply to a previously visited link element that you have the mouse 'hovering' over; if the 'a:link' definitions follow the 'a:hover' then those definitions will overwrite the 'a:hover' ones and there will be no special effects when you hover over a previously visited link.
    Here is the code for a link, embedded in a paragraph which is in turn embedded in a list element, which is itself embedded in the page body (lists and paragraphs are always embedded in the body of course!):

    <body>
    <ul> <li> <p> <a href="#textboxes">[Go to "Creating a Text Box"]</a> </p> </li> <li id="textboxes"> </li> </ul>
    </body>

    The link above goes to another element in the list, which is specified with the id attribute (today an attribute id on any element is often used instead of an anchor [a] element.) Here is the display for the above link to the next section--so you can check the text effects out:

    [Go to "Creating a Text Box"]

    What does rgb stand for? The amounts of red, green, and blue used to color something, that is the amount of red, green, and blue pixels turned on; the more pixels turned on, the lighter and brigher the color; the fewer pixels turned on, the darker and subdued the color. (In the style definitions above, rgb specifies the value of the red, green, and blue pixels for the attribute color, which is used to color the anchor or a element [the anchor or a element is used to specify links, and anchors for links, in a page], either when it serves as an unvisited link, when you make the mouse hover over it, when it is active or in focus, that is when you click on it, or when it has been visited.)

  • Creating a Text Box

    The element div is often used to create a text box. You can use the CSS style codes to give a div a particular width (width), a background color (background-color) or image, a text color (color), and a border (border) of a particular width or thickness (border-width) and color (border-color). See Dave Raggett's "A Touch of Style"(http://www.w3.org/MarkUp/Guide/Style.html) tutorial for examples of text box declarations.

    NOTE: Be careful choosing background images for divisions (or table cells) that might resize to hold the contents; unless you are able to control size exactly for a division, a large image that is supposed to fit the entire division may not display properly; that is part of the image may repeat to fit the resized box! So either use small images, that you do not mind repeating, or do not use background images (an alternative is to use a program such as Paint (in your accessories for your programs) to write on an image, then insert the image, fit to approximately the size of the division, into that division. If you do this, make sure to also include the content written on the image in the alt attribute of the image, since some people choose not to download images (that saves them time online).

& More on Making Your Web Page Accessible
(How to make your web page accessible to more users: Some Quick Do's and Dont's)

  • Some Basics

    • Make sure page content is fast loading
    • Keep essential stuff to the top left of the page
    • Use tables appropriately (to hold data, in rows and columns) Note 2
    • Use the attribute alt (to describe images and tables)
    • Use the tagging, <noscript></noscript> (with JavaScript, to give the essentials for people whose scripting is disabled or who have really old browsers)
    • Specify the scope of column headers in your tables.

  • Tutorials and Fact Sheets

Creating & Using Tables
(Basic Tables, Styling Tables, Tables & Accessibility, When to Use Tables)

  • Dave Raggett's "Advanced HTML" on Tables

    (See http://www.w3.org/MarkUp/Guide/Advanced.html)

    • Basic Tables
    • More Complex Tables
    • Sizing Tables--setting the widths (and maybe heights) of the table and of individual columns (and rows) within it (with CSS or in the cell).
      (TIP: I might set the width of a table used to create a family tree in em (a size based on the standard font size used) or in pixels (a fixed size), and then set the width of individual columns to be percentages of the total width (using % to specify these);
      then, if I want to keep the total look the same but make the table a bit wider, I just have to reset the total width for the table--
      and the columns will remain the same percentage of the total width!
      I do not set the table width as a percentage of the screen width because some people download data on a device as small as a cell phone--so the screen width is not always the appropriate size for data!
      For more on the different sizes and on how to use the em to create layouts, see "Greating Elastic Layouts with the em Unit" by Zoe Gillenwater ( http://www.communitymx.com/content/article.cfm?cid=DB750).      )
    • Styling Tables--aligning text in cells (with CSS or in the cell)
    • Styling Tables--setting margins (with CSS)
    • Styling Tables--setting background colors, font colors (with CSS or in the cell)
    • Styling Tables--background images (be careful! tables resize to fit content according to the font style and such chosen by the end user (unless you have specified these as absolutely fixed) so . . . )
     

    A NOTE on Tables: the text-formatting attributes, word-wrap (which lets you--not the browser--decide, whenever text is set to be wrapped according to word boundaries, whether words should be broken only at word boundaries, normal, or at other points, break-word), and text-wrap (which lets you again decide whether text in a line that exceeds the allotted space should only be wrapped at word boundaries, normal, not at all, none, or--two other options-- unrestricted, or suppress ), do not work in table cells; if you want to specify word-wrap and text-wrap for table cells, you need to insert an additional element inside the cells--a div (division), a p (paragraph), or a span element, and then specify the values of word-wrap and/or text-wrap for these elements. For more on word-wrap, see The W3C's CSS Text Level 3, "Force Wrapping: the 'word-wrap' property". For more on text-wrap see The W3C's CSS Text Level 3, "Text Wrapping". See also the tutorials listed at the end of this page for more information on sizing and formatting using CSS.

Create A Menu Using an Image Map
(from Dave Raggett's tutorial, "Advanced HTML"--really cute)

  • Dave Raggett's "Advanced HTML" on Image Maps

    (See http://www.w3.org/MarkUp/Guide/Advanced.html)

    Create distinct links on your page that are mapped to a particular image; the image is thus displayed with the clickable regions which you have specified.

    (Tips:

    • I've never had much luck with using anything but circles in a 'map' where there are multiple clickable shapes; but the rectangles work fine if you just want an alternative way to have a single clickable shape that fits over an image, an arrow, for example, or whatever. [Perhaps these work better in all browsers today!]
    • To create the shapes, you'll need first to find out what size your image is, so that the shapes fit on it; if they overlap with one another they will interfere with each other, so make sure each shape is laid out in a distinct space--unless you want to have your regions overlap!
    )

CSS Page Layout
(Layout the Elements on Your Page, Using CSS)

Places to Hang Your Site
(free sites, ad-free sites, private, password-only access sites)

More Resources
(For further study: Language Tagging, Accessibility, CSS Style, Frames, Forms & JavaScript)

 
Notes
  1. Ansi files work at sites like Geocities; as do UTF-8 files created by Wordpad and Notepad (but these require an escape sequence at the end of the file, perhaps a simple slash in brackets <br />). Unicode files (other than UTF-8), which store characters differently, allowing more character types, are not supported by Geocities, at least. (I still need to check other sites to see if/where these Unicode files can be used!)

    (Alternately instead of inserting an escape sequence in utf-8 files produced by Wordpad and Notepad, the characters in such a file can be gotten rid of -- if the file is at geocities -- by using the text editor to edit the file at geocities; in the text editor, remove the first few odd characters before the first tag at the top of the document.)

  2. Tables without borders--usually a single table, sometimes multiple tables--have been used to format web pages for older browsers that do not support all of--or sometimes any of--the CSS style codes (the comment tag <!-- > is used to hide the CSS style declarations so that these will not display as text for the browsers that do not make sense of them). However the use of complex table grids may make page information difficult for voice browsers to read, so use tables wisely if you use them to format pages. For example, if you put a picture in a table cell, include the caption in the same cell or else indicate the id attribute of the cell containing the caption in a headers attribute for the cell containing the picture. If you use a column in a table to hold the site menu, then specify that the menu is to be browsed as a column using the attribute scope, and ideally have a cell with the text, Menu, as the first cell in the column, which thus serves as the header for the menu. And so on. The easiest and sometimes best solution is not to use a table to format the page, or to use only a table with a few cells containing content!
 
 
 
[Genealogy Links]
[Home]
[Back to Top]		  

(This page last updated by C. E. Whitehead April, 2007)