Web Foundations/HTML Documents

From Wikiversity
Jump to navigation Jump to search
Internet word cloud
Internet word cloud

This lesson introduces HTML documents.

Objectives and Skills[edit | edit source]

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 | edit source]

  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 | edit source]

  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 | edit source]

Comments[edit | edit source]

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

<!-- comment text -->

HTML[edit | edit source]

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

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

Head[edit | edit source]

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

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

Title[edit | edit source]

The title element defines a document title.[5]

<title>title</title>

Style Sheet[edit | edit source]

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 | edit source]

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

<meta charset="UTF-8">

Body[edit | edit source]

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

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

Basic HTML5 Page[edit | edit source]

<!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 | edit source]

  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 | edit source]

  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 | edit source]

References[edit | edit source]