Tutorials - Fab Academy at AS220 Labs - Providence, RI

HTML Basics

History of HTML

http://www.w3.org/People/Raggett/book4/ch02.html

1. GetSimple CMS

GetSimple is a flat file CMS (no database). You will use GetSimple to create your weekly Fab Academy documention, unless you prefer to code the HTML yourself.

I have set up an example test site here, populated with dummy content and the weekly units: http://mercurial.as220.org/hg/test.site/

To set up your GetSimple site, follow this link, then add your lastname.firstname to the path.

2. Images

Before uploading any images to GetSimple, you must first resize them. Your digital camera will create very large image files that are both too large to display on your webpages and are enormous in file size.

  • Resize your images to a maximum width of 565px.
  • You can use any image editing software that you already have (ex: Fireworks, Photoshop)
  • Or you can use The Gimp (free, opensource, cross platform)
  • Download The Gimp
Resizing Images with the Gimp

3. HTML & CSS Basics

We will review the slides in class.

4. Create (your first?) Webpage

Hello World
  1. Open your text editor
  2. Type in the following markup 
    <!Doctype HTML public "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Hello World! Test Page</title>
    </head>
    <body>
    <h1>Hello World!</h1>
    </body>
    </html>
  3. Save the file as hello_world.html
  4. Navigate to the hello_world.html file
  5. Double click on the hello_world.html file to open it in your default browser.
  6. You have just created your first webpage!

5. Work Through Tutorials

Learn About HTML

Work through these tutorials - they are all very short and will teach you the basics of HTML markup. Once you start, you can use the "Next Chapter" navigation to go through the next chapter.

Absolute vs. Relative Pathnames
http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/