Web Foundations/HTML Documents

From Wikiversity
Jump to navigation Jump to search
Internet word cloud

This lesson introduces HTML documents.

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.

Readings[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

Multimedia[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]

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

Head[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 define 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>

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.

Key Terms[edit]

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

See Also[edit]

References[edit]