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.
Lab 1 exercises
Lab 1: Basic HTML - create a basic "About Me" HTML page.
About Me Page
- Courses @ HYU
- Favorite Movie, Thing, and Quote
- Fun Facts About My Neighbors
- YouTube Video
- Additional Content
- Validation Links
- Validate Your Page
- Upload Your Page
Ex : Basic
About Me Page
Create a page
aboutme.html that describes you. The page should include the followings:
- page title: About your name!
- character encoding: UTF-8
- page heading: your name
- favicon: attach your favorite icon or image
- a description of you in <= 2 sentences
- emphasize an important word in italic
- strongly emphasize more important words in bold
- a horizontal line
This example page describes course lecturer Scott Lee.
Look at the about HTML to see examples of the right tags to use.
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:
- heading: My Courses @ HYU
- indicate that the abbreviation, HYU, stands for
- unordered list in the form of - Course Code: Course Title
This part of the example page describes courses that Scott teaches.
Ex : Favorite Movies
Create a list of your 3 favorite movies in reverse order. This part of the page should include the followings:
- make a link to an interesting site about each movie, such as its page
- look up the most favorite movie on imdb.com and
reproduce director, genre, and stars information about the film in a nested list under that movie's bullet.
- These info is in short topic: → value pairs, such as Genre: Comedy.
- Therefore, represent it as an HTML definition list.
This part of the example page describes Scott's 3 favorite movies.
Ex : Favorite Thing
Present images of your 3 favorite things. This part of the page should include the followings:
- choose your thing, such as cars, drinks, places, people, ...
- select your 3 favorite things
- look up images of the 3 things with
- add brief description about the things and present them in your page
This part of the example page describes Scott's 3 favorite cars.
Ex : Favorite Quote
Present your favorite quote. This part of the page should include the followings:
- choose your favorite quote and present it in your page
- represent your quote using blockquote
- wrap the text with double quotation marks
- emphasize the person from whom this quote comes and add a horizontal line in front using character entity
This part of the example page describes Scott's favorite quote.
Ex : Fun Facts About Neighbors
Create a table that presents fun facts about your neighbors. This part of the page should include the followings:
- the table with :
- caption describing the table
- First Name and Facts as headings
- use deleted and inserted texts
This part of the example page describes fun facts about Scott's SE Lab members.
Ex : YouTube Video
Embedd a YouTube video that you like.
- select any YouTube video that you like and embed it in your page
- use object element of HTML5
- chosen video must be playable when embedded
- present a short description about the chosen video
This part of the example page shows a short Youtube video embedded in Scott's "About Me" page.
Ex : Additional Content
Present an additional content to your page. This part of the page should include the followings:
- use one of new features in HTML5
This part of the example page shows Scott's favorite jazz song embeded in his "About Me" page.
Ex : Validation Links
Add links on your page to the HTML and CSS Validators, using the URLs below.
- image: http://selab.hanyang.ac.kr/courses/cse326/2017/lecture/images/w3c-html.png
- link URL: http://validator.w3.org/check/referer
- image: http://selab.hanyang.ac.kr/courses/cse326/2017/lecture/images/w3c-css.png
- link URL: http://jigsaw.w3.org/css-validator/check/referer
(These links work only if you view your page on server, not on your computer's hard drive.)
This part of the example page indicates the validation links in Scott's "About Me" page.
Exercise : Validate your page
Validate the syntax of your HTML code:
- open http://validator.w3.org
- validate your page by either
Validate by File Upload and then browse to your
Validate by Direct Input and then copy.paste your code into the text box
- 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
Use APMSETUP/MAMP and upload your page to your Apache root directory
Put your files in a folder named
lab1 within your
Check the page by viewing it in the web browser. Its URL should be:
If you finish them all...
If you finish all the exercises:
- you can add any other content you like to your page
- check in with a TA to get credit for your work
- submit your
html file at
Online Lecture site
- you may be able to be dismissed