CSE326: Web Application Development
Lab 1: Basic HTML


Scott Uk-Jin Lee

Except where otherwise noted, the contents of this document are Copyright 2013 Scott Uk-Jin Lee. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

Valid HTML5 Valid CSS

Lab 1 exercises

Lab 1: Basic HTML - create a basic "About Me" HTML page.

  1. Basic About Me Page
  2. Courses @ HYU
  3. Favorite Movie, Thing, and Quote
  4. Fun Facts About My Neighbors
  5. YouTube Video
  6. Additional Content
  7. Validation Links
  8. Validate Your Page
  9. Upload Your Page

Ex : Basic About Me Page

Create a page aboutme.html that describes you. The page should include the followings:

Ex example

This example page describes course lecturer Scott Lee.
Look at the lecture slides about HTML to see examples of the right tags to use.


expected output

Ex : Courses @ HYU

Create a list of courses that you are taking right now at HYU. This part of the page should include the followings:

Ex example

This part of the example page describes courses that Scott teaches.


expected output

Ex : Favorite Movies

Create a list of your 3 favorite movies in reverse order. This part of the page should include the followings:

Ex example

This part of the example page describes Scott's 3 favorite movies.


expected output

Ex : Favorite Thing

Present images of your 3 favorite things. This part of the page should include the followings:

Ex example

This part of the example page describes Scott's 3 favorite cars.


expected output

Ex : Favorite Quote

Present your favorite quote. This part of the page should include the followings:

Ex example

This part of the example page describes Scott's favorite quote.


expected output

Ex : Fun Facts About Neighbors

Create a table that presents fun facts about your neighbors. This part of the page should include the followings:

Ex example

This part of the example page describes fun facts about Scott's SE Lab members.


expected output

Ex : YouTube Video

Embedd a YouTube video that you like.

Ex example

This part of the example page shows a short Youtube video embedded in Scott's "About Me" page.


expected output

Ex : Additional Content

Present an additional content to your page. This part of the page should include the followings:

Ex example

This part of the example page shows Scott's favorite jazz song embeded in his "About Me" page.


expected output

Ex : Validation Links

Add links on your page to the HTML and CSS Validators, using the URLs below.

(These links work only if you view your page on server, not on your computer's hard drive.)

Ex example

This part of the example page indicates the validation links in Scott's "About Me" page.


expected output

Exercise : Validate your page

Validate the syntax of your HTML code:

  1. open http://validator.w3.org
  2. validate your page by either
    • Validate by File Upload and then browse to your aboutme.html file
    • Validate by Direct Input and then copy.paste your code into the text box
  3. If there are any errors, fix them all
    • try to get the green bar for 0 errors. Warnings are ok
    • if you do not understand the error messages, ask TA for help

Exercise : Upload your page

If you finish them all...

If you finish all the exercises:

  1. you can add any other content you like to your page
  2. check in with a TA to get credit for your work
  3. submit your html file at Online Lecture site
  4. you may be able to be dismissed

Great work!