Monitor

Lesson 2: Introducing HTML

 

Links

Your home page

Creating Websites home

Beginnings
   Introduction to the Web
   Introducing HTML
   Marking up text
   Setting Up
   FTP and FileZilla
   Links and anchors
   Getting some style

Intermediate topics
   Style sheets
   Testing and debugging
   Lists
   Images and maps
   Audio and video
   Intro to JavaScript
   The DOM and scripting
   Logic and Arrays
   Functions and document.write
   Forms and INPUT
   Other controls
   Misc. topics
   Cookies
   HTML tables
   Structuring tables
   Scripting w/ tables
   Inline frames
   Loose ends

An HTML document has two major parts: the head and the body

The head element sets the stage for the body, and that's what this lesson is about: setting the stage for the body of the document by giving the overall picture of a document structure and the fundamental definitions and rules for elements and attributes.

In this first video we describe the structure of an HTML page, then introduce the doctype statement, and then explore the general rules for elements and attributes. We then discuss the HTML elements HTML, HEAD, TITLE and an Introduction to META.

 

Note: I strongly suggest you view all our videos in full screen mode: click the icon in the lower right corner of the video area (it shows four arrows pointing to the corners of the screen). When you are done, the Esc ("escape") key returns you to regular mode.

 


Lesson 2: Introducing HTML

Click here for the video transcript. IntroductionToHTML.pdf

 

 

The video below explores the META element in more depth. It is an optional video because, while it is interesting, it is not necessary for progressing in the course. Consider it more background, or nice-to-know instead of need-to-know.

 


Optional video: META in more depth

Click here for the video transcript, MoreMETA.pdf

 

Supplemental materials

    Here's some thoughts on the big picture: the Web is not the Internet
    Here's a kind of nerdy description of Unicode
    A cumulative summary of the contents of the course so far

 

Hands on exercise

For those who want to practice using what we cover in this class, most lessons have an opportunity for you to learn on your PC. The exercise for this lesson works with some text that includes Japanese characters.

Many browsers can support HTML files that don't follow all the rules. In this lab we will work with two files from your WebFiles directory:

unibody.html.ascii - the body of a file that contains data with both English and Japanese characters, but no <html>, <head>, <title>, or <meta> tags

unitop - which contains the missing top lines of unibody.html.ascii
 

First, just point your browser to unibody.html.ascii to see how it displays.

Next, combine unitop and unibody.html.ascii, saving it as unirpt1.html (be sure to save it with utf-8 encoding)

Then open unirpt1.html in your browser

Optional experiment: Remove (or comment out) the META element, save, and try again to see if it makes a difference.

 

The video below emphasizes the importance of new lines when writing code

 


Lesson 2: Introducing HTML
Accent piece: Writing Poetry and Code

Click here for the video transcript, WritingPoetryAndCode.pdf

 

 Lesson navigation 

 

 

Email us if you would like additional information. We would love to see your comments and recommendations for our site.