Building a Personal Web Page


http://sjpc.org/baker/firstpage/





Alan Baker



San Jose IBM PC Club

March 8, 2011
April 12, 2011






















Overview

  1. Introduction to HTML and KompoZer
  2. Create a web page with frequently-used elements




  3. Dynamic content and style
  4. Do-it-yourself resources


Some Preliminaries

  • HTML:  Hypertext Markup Language
  • Why use tables for a first web page?
    1. Linear: too simple to be visually appealing
    2. CSS divisions:  too complex for a first page
    3. HTML tables:  "just right"

















Create an HTML file

    1. Create a folder for the web page
    2. Copy an image file into the folder
  • Create an HTML document in the folder using KompoZer
    • A word processor for web pages
 toolbar
    1. Open KompoZer then click Format then Page Title and Properties...
    2. Fill in the title, author and description then click OK.
    3. Click File > Save as > in your folder > your file name.html.



Create a Heading

    1. Change 'Body Text' to 'Heading 1'. 
    2. Type in 'My First Web Page'  then press enter.




Review What You Created

  • Document elements (click DOM Explorer)
    1. html
    2. head
    3. body
    4. h1
  • HTML Tags View (change Normal)
  • HTML Source (click Source)
  1. doctype
  2. html
  3. head
  4. title
  5. meta: charset
  6. meta: author
  7. meta: description
  8. body
  9. h1
  10. br
 htmlheadbody

Table

    1. Click the Table icon tableicon  then click the second row, second column
    2. Add a Heading 3 in the top left cell and press enter.  Note how the table changes.
    3. Review what you have created in the DOM Explorer and Source.


Lists and Links

  • Add a List
    1. Click below the Heading 3 then click the icon for Numbered List or Bulleted List.
    2. Type in some text for the first list item and press enter.
    3. Type in some text for the second item and press enter twice.
  • Add a Link and a Tooltip
    1. In your web browser, copy a URL to the Windows clipboard.
    2. In KompoZer, select the text you want to link from, then click the Link icon.  linkicon
    3. Paste the URL into the Link Location field then click on Advanced Edit.
    4. Click on the pulldown for Attribute and select 'title'.
    5. Enter the tooltip text in the Value field and click OK.
    6. Save the HTML file.
  • Review What You Created
    1. Note the tags for unordered list, list item, and anchor in the DOM Explorer
    2. Look at the source and note the href= attribute of the anchor tag.
    3. Try out the link and tooltip in the browser.

bullets



Pictures

  • Add an image
    1. Click in the upper right cell of your table then click the Image icon.  imageicon
    2. Click on the open folder icon and select the image file you copied in earlier.
    3. Fill in text for the Tooltip and Alternate text then click OK.
  • Adjust the table, remove its border
    1. Click in the table's top left cell.
    2. Click the Table icon tableicon2 then click the Table tab. 
    3. Change the table width to 100% of the window.
    4. Click Advanced Edit.  Change border to 0 then click OK.
    5. Click the Cells tab. Change its width to 50% of the table.
    6. Click OK and note the change.
  • Reduce the image size
    1. Click Source and review your HTML img tag.
    2. Change the image dimensions to a percentage of the cell width.
      • <img style="width: 40%;"...>
    3. Review your changes in Kompozer's Preview mode.


image


Improve the Appearance

  • Adjust the headings
    1. Select the heading 1 text then click the Align Center icon.  aligncentericon
    2. Click at the beginning of the heading 3 text then click the Indent text icon.
  • Enlarge the text in the table
    1. Mark the text you want to enlarge.
    2. Click the Larger font size icon  larger
  • Insert a blank line between the two lines of text.
    1. Click at the end of the first line.
    2. Press enter twice then backspace once.
  • Add horizontal lines above and below the table.
    1. Click just above the table.  Click Insert then Horizontal Line.
    2. Click just below the table.  Click Insert then Horizontal Line.
  • Adjust the vertical spacing of the horizontal lines.
    1. Click Source.  Select the <br> below the table.  Cut it and paste it above the table.
    2. Review your changes in the browser.  Other changes?


















improved

Changing Your Looks With Style

    1. To modify one HTML tag, use inline style.  Add a style attribute to the HTML tag.  Kompozer does this automatically.
      2. <h1 style="text-align: center;">
    2. To modify one page, use  an internal style sheet.  Put it in the HTML head's style tag.
      Example in this web page
    3. To modify all pages, use an external style sheet.
      Example in http://vietnamairlift.com/3column.css







Server-Side Includes (SSI)

  1. 'Included' header, footer, or sidebar, e.g. http://sir141.org/
  2. Variables such as current date or last modified date
  3. Clickable list of documents, e.g. http://sir141.org/bulletin/









Resources

  1. HTML Reference, Try-It-Yourself Editor, Tutorials, Examples
  2. Style (CSS) Reference
    1. HTML comments, CSS comments
      2. ../../sir/bulletin/.htaccess
    2. Open a link in a new tab using target="_blank"
    3. Abbr: a tooltip with no link needed
    4. Blockquote, span, big, internal style sheet








Review