< Web Foundations
Internet word cloud

This lesson introduces HTML documents.

Objectives and Skills

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.

Readings

  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

Multimedia

  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

Comments

<!-- comment text -->

HTML

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

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

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

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

Title

The title element define a document title.[5]

<title>title</title>

Style Sheet

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

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

<meta charset="UTF-8">

Body

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

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

Basic HTML5 Page

<!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>

Activities

  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.

Key Terms

document type declaration (<!DOCTYPE>)
body tag
head tag
html tag
link tag
meta tag
title tag

See Also

References

This article is issued from Wikiversity. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.