Web Foundations/HTML Documents
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
titleto 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]