HTML Tutorial: Basic Formatting

Structure | Style | Headings | Emphasis | Tables | Images | Links | MS Word


General Tips

  • To view the code used for a given page, right click on the page, then choose "View Source."
  • Internet Explorer will show you the code in Notepad.
  • Copy and paste what you like, edit as necessary, then save the new file with an .htm or .html extension (not as a .txt file).
  • Open the new file in Internet Explorer to see how the browser renders your page.
  • Repeat this process of editing and viewing until you have what you would like to put online.


Structure

  • The web page should have this basic structure:

    <html>

    <head>
    <title>Name of page for browser heading.</title>
    </head>

    <body>

    Content.

    </body>

    </html>

  • Think of opening and closing tags like bookends--if you have one, you need the other.

  • When you want to break to the next line, use a <br /> tag, a shortcut for an opening and closing break tag.

  • Use a <p> tag to start a paragraph, and a </p> tag to end it.
  • Paragraphs are by default left-justified, but you can specify other settings:
    <p align="center">,
    <p align="right">, or
    <p align="justify">.
  • The indented text above was bookended by a <blockquote> tag and a </blockquote> tag.

  • The <dl>, <dt>, and <dd> tags are also useful for formatting indented information.
    • <dl>
    <dt>heading or title
    <dd>information
    <dd>information
    </dl>

top


Style


  • Define the background color (bgcolor) for the page, the link color, the active link color (alink), and the visited link color (vlink).
    <body bgcolor="#FFFFFF" link="#000066" alink="#000066" vlink="#000066">

  • Pick a series of fonts for display, in order of preference. If a user does not have your first option, the second will be displayed.
    <font-family: Verdana, Arial, Helvetica, sans serif>

  • Change fonts on a given page with <font face="Georgia">a new tag around what you want to change</font>.

    Choose a font color and size.

    <font color="black" size="3"> = text

    <font color="blue" size="4"> = text

    <font color="green" size="5"> = text

    <font color="maroon" size="6"> = text

  • While some color names (like red, white, black) work just fine, hexadecimal color codes are more reliable and consistent across browsers (Netscape and Internet Explorer) and platforms (PC and Mac).
  • They are defined using a hexadecimal notation for the combination of Red, Green, and #14197C color values (RRGGBB).
  • The range goes 0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F, so that the lowest value that can be given to one light source is "#00," and the highest value is "#FF".


w3schools.com


top


Headings


<h1>Level I Heading</h1>

Heading



<h2>Level II Heading</h2>

Heading



<h3>Level III Heading</h3>

Heading



<h4>Level IV Heading</h4>

Heading



<h5>Level V Heading</h5>
Heading


top


Emphasis


<b>bold text</b>
<i>italicized text</i>
<u>underlined text</u>

<ul> starts an Unordered List. </ul> ends it.
<li> starts a bulleted item. </li> ends it.

Heading
  • bulleted item
  • bulleted item
  • bulleted item

<ol> starts an Ordered List. </ol> ends it.
<li> starts a numbered item. </li> ends it.

Heading
  1. numbered item
  2. numbered item
  3. numbered item


top


Tables


  • Define the width, border, cellspacing, cellpadding, and background color for the table.
    <table width="500" align="left" border="2" bordercolor="black" cellspacing="0" cellpadding="2" bgcolor="white">

  • Numbers are in pixels, align is for placing the table on the page (if not specified, "left" is the default), and bgcolor is the background color for the table.

    <tr> begins a row. </tr> ends it.
    <td> begins a cell. </td> ends it.
    <td align="center"> will center the contents of the cell within that cell.
    <td valign="top"> will vertically align multi-line cells at the top.
    </table> ends a table.

CRITERIA POINTS
criterion ??
Criterion ??
Criterion ??
Criterion ??
TOTAL ???


  • Adjust the attributes for the table.
    <table border="2" bordercolor="white" cellspacing="0" cellpadding="4" bgcolor="#14197C">

  • If a width is not specified, the table will be as wide as its contents.

CRITERIA POINTS
Criterion ??
Criterion ??
Criterion ??
Criterion ??
TOTAL ???


  • You can also place an entire page within a table in order to keep the words and paragraphs from running as far as the given screen will allow.
  • Most monitors can easily display a page around 700-800 pixels wide, so set the table width accordingly.
  • The alignment of the table on the page should be either "left" or "center".
  • And if you'd like margins for your paragraphs, just adjust the cellpadding width.
  • If you want to have fun with colors, try different settings for the bgcolor in the <table> tag and the bgcolor in the page's <body> tag.
    <body bgcolor="#990033">

    <table width="750" align="center" border="0" cellspacing="0" cellpadding="15" bgcolor="#FFFFFF">
    <tr>
    <td>
    Content.
    </td>
    </tr>
    </table>

top


Images


Sizing Images:

normal: <img src="procrastination.jpg">



width="50%" of frame (or here, 50% of centered, white table): <img src="procrastination.jpg" width="50%">



width="50" pixels: <img src="procrastination.jpg" width="50">




Space Around Images

Provide a buffer zone of space around your image with the hspace="10" vspace="10" attributes, the "10" representing 10 pixels of horizontal space and 10 pixels of vertical space around the image. Increase or decrease the number of pixels as needed.


Borders Around Images

When using an image as a link (for more, see section below), you may want to use the attribute border="0" so that the image will not be surrounded by a line that is the color for the links on your page. Here are two examples, one without and another with the border="0" attribute.

<a href="http://www.uky.edu"><img src="uky.jpg">



<a href="http://www.uky.edu"><img src="uky.jpg" border="0">




top


Links


External Links:
  • The University of Kentucky <a href="http://www.uky.edu">Homepage</a>
  • The University of Kentucky <a href="http://www.uky.edu/AS/English/writprog/">Writing Program</a>
  • Open a link in a new window using target="_blank":
    The University of Kentucky <a href="http://www.uky.edu/AS/English/" target="_blank">English Department</a>
  • Send an e-mail to <a href="mailto:write@uky.edu">write@uky.edu</a>.
  • If this tutorial included multiple pages, the code would include <a href="page2.html">page 2</a> | <a href="page3.html">page 3</a> | <a href="page4.html">page 4</a> links at the top and/or bottom of the page for users.

Internal Links:
  • Place anchors where you want the links to lead, giving each anchor a specific name.
  • The top of this page has an anchor: <a name="top" />.
  • Use a # sign when you reference that anchor: "#top" means to the place called "top".
  • Return to the <a href="#top">top</a> of this page.
  • You can also send someone to a particular place on a given page, so that a link like <a href="http://www.uky.edu/AS/English/writprog/htmlhelp/basic/index.html#images">html help with images</a> would send someone to the "images" section of index.html.

Image as a Link:

<a href="http://www.despair.com"><img src="procrastination.jpg"></a>




top


MS Word


Getting Started
  • Click "File"-"New".
  • Select "Web Pages" and pick the sort of page you would like to build.
  • You may want to avoid the "Web Page Wizard", since it can actually be quite complicated.
  • Insert text, images, and hyperlinks as appropriate, referring to "Help" whenever you get stuck trying to make something work.

Saving Files
  • When saving what you create, click "File"-"Save As", then make sure the "Save as type" selection reads "Web Page".
  • Word will save the document as "document.html" and create a folder called "document files".
  • A good name for the starting page of a given site is "index.html".

Editing Files
  • When viewing a Word-generated web page in a browser (e.g., Internet Explorer), you usually have an option to click "File"-"Edit with Microsoft Word".
  • This will open your web page in Word and allow you to edit it there.
  • Otherwise, while in Word, open your local copy that needs editing, and make the necessary changes.

Organizing Files
  • Keep both the .html file and this folder in the same main folder so that the page displays correctly.
  • If the file and folder are being transferred to the server, remember to place both of them in the same main folder.
  • So, conceivably, you could have the following file structure:



top