Web Foundations/HTML Documents

This lesson introduces HTML documents.

Internet word cloud
Internet word cloud

Objectives and Skills

edit

Objectives and skills for this lesson include:[1][2]

  • Demonstrate knowledge required to create a web page.
  • Use the most current version of Hypertext Markup Language (HTML5) to create web pages.
  • Design web pages to industry standards.

Articles

edit
  1. Wikipedia: HTML
  2. Wikipedia: HTML5
  3. Wikipedia: Character encodings in HTML
  4. Wikipedia: Website wireframe
  5. Wikipedia: W3C Markup Validation Service
  6. Wikibooks: HyperText Markup Language/Head and Body

Videos

edit
  1. YouTube: HTML5 Tutorial for Beginners
  2. YouTube: Let's create our first HTML project and document
  3. YouTube: How to start an HTML5 document

Examples

edit

Comments

edit

Comments are to write text that will not be shown in an HTML document.

<!-- comment text -->

HTML

edit

The html element is the root element of an HTML document and contains all other elements.[3]

<html>
  <!-- head -->
  <!-- body -->
</html>
edit

The head element contains the processing information and metadata for an HTML document.[4]

<head>
  <!-- title -->
  <!-- style sheet links -->
  <!-- metadata -->
</head>

Title

edit

The title element defines a document title.[5]

<title>title</title>

Style Sheet

edit

The link element points the browser at a style sheet to use when presenting the HTML document to the user.[6]

<link href="style.css" rel="stylesheet" type="text/css">

Metadata

edit

The meta element can be used to specify additional metadata about a document.[7]

<meta charset="UTF-8">

Body

edit

The body element contains the displayable content of an HTML document.[8]

<body>
  <!-- page content -->
</body>

Basic HTML5 Page

edit
<!DOCTYPE html>
<html>
  <head>
    <title>title</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <meta charset="UTF-8">
  </head>
  <body>
    <!-- page content -->
  </body>
</html>

Key Vocabulary

edit
  1. DOCument TYPE Declaration <!DOCTYPE>
  2. Html tag
  3. Head tag
  4. Body tag
  5. Title tag
  6. Meta tag
  7. Link tag

Activities

edit
  1. Complete the tutorials:
  2. Using your selected HTML editor, create a basic HTML5 page.
    • Add an appropriate title to the page.
    • Include your name, such as Hello Wikiversity!, in the body of the page.
  3. Validate your HTML code using the W3C Markup Validation Service.
  4. Add your HTML page to your free web hosting service. Access the web page using a web browser to confirm that it displays correctly.

See Also

edit

References

edit