Getting Started with HTML5 - HTML, CSS, and Dynamic HTML - page 1

1 1 Getting Started

with HTML5
Creating a Product Page for a Small
Business

TUTORIAL TUTORIAL

OBJECTIVES
Session 1.1
• Explore the history of the
Internet, the Web, and HTML
• Compare the different versions
of HTML
• Study the syntax of HTML tags
and attributes
• Defi ne a Web page head,
body, and title
• Work with the HTML5
structural elements
Session 1.2
• Mark page headings,
paragraphs, block quotes, and
addresses
• Create unordered and
ordered lists
• Apply an external style sheet to
a Web page
• Run a JavaScript program
• Mark text-level elements
including strong and
emphasized text
• Insert inline images and
line breaks
• Insert special characters from
extended character sets

Case | The J-Prop Shop

Dave Vinet owns a small business called the J-Prop Shop that builds
and sells circus props and equipment. Dave is looking to expand
his business and his visibility by upgrading his Web site. Dave has
already written the text for the Web site's home page and has gener-
ated some of the graphic images for it. He has come to you for help
in designing a Web page and writing the code. Dave hopes to build
on his Web page in the future as his business expands, so he would
like you to write code that takes advantage of the latest Web stan-
dards, including HTML5. Your job will be to create a sample home
page that Dave can use as a foundation for his new Web site.

STARTING DATA FILES

tutorial.01 tutorial review case1

case2

jpslogo.png
jpsstyles.css
modernizr-1.5.js

basiclogo.png
basicstick.png
basicstyles.css
stick.txt
modernizr-1.5.js

mhlogo.jpg
mhstyles.css
mhtxt.htm
modernizr-1.5.js

macbeth.jpg
macbethtxt.htm
macstyles.css
modernizr-1.5.js

case3 case4 demo

dessertstyles.css
dessertweb.jpg
modernizr-1.5.js
torte.jpg
tortetxt.htm

logo.jpg
smith.jpg
smith.txt

cengage.jpg
demo.gif
demo_characters.htm
demo_html.htm
demo2.gif
modernizr-1.5.js

HTML 1