Web Foundations/HTML Documents
Jump to navigation
Jump to search
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]
- Wikipedia: HTML
- Wikipedia: HTML5
- Wikipedia: Character encodings in HTML
- Wikipedia: Website wireframe
- Wikipedia: W3C Markup Validation Service
- Wikibooks: HyperText Markup Language/Head and Body
Videos[edit | edit source]
- YouTube: HTML5 Tutorial for Beginners
- YouTube: Let's create our first HTML project and document
- 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]
- DOCument TYPE Declaration <!DOCTYPE>
- Html tag
- Head tag
- Body tag
- Title tag
- Meta tag
- Link tag
Activities[edit | edit source]
- Complete the tutorials:
- 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.
- Add an appropriate
- Validate your HTML code using the W3C Markup Validation Service.
- 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]