Internet Fundamentals/HTML

Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. This lesson introduces HTML.

HTML

Objectives and Skills

Objectives and skills for this lesson include:

• Understand basic HTML page structure.
• Create simple web pages.
• Review the requirements
  • Review the requirements of the document
  • Select the appropriate markup language, based on organizational standards
  • Review the document structure
• Create the document structure
  • Create and assign, the basic elements of the document
  • Mark-up sections of the document to depict the structure
• Validate the documents
  • Validate the markup of the language document, against the requirements
  • Validate the markup of the language document, in different browsers

Readings

1. Wikipedia: HTML
2. Wikipedia: HTML editor

Multimedia

1. YouTube: The Internet: HTTP and HTML
2. YouTube: Learn HTML in 12 Minutes

Student Presentations

1. YouTube: How to Link Bitbucket to Visual Studio Code (Using GIT)
2. YouTube: How to Use a Online HTML Editor
3. YouTube: HTML Basics
4. YouTube: How to Create a Simple HTML page
5. YouTube: HTML Tags to Create a Website
6. YouTube: Internet Fundamentals: Getting Started with HTML
7. YouTube: Installing Visual Studio Code and Essential Plugins

Activities

1. Complete one or more of the following tutorials:
   • W3Schools: Introduction to HTML
   • TutorialsPoint: HTML
   • Mozilla: Getting Started with HTML
   • SoloLearn: HTML Course
2. Create a simple web page.
   • Review ShayHowe: Building Your First Web Page.
   • Use HTML Online: Editor to create a simple web page about your favorite hobby.
   • Include an <img> tag to add one or more free images from Wikimedia Commons to your page.
3. Validate your web page.
   • Review W3C: Validating your HTML.
   • Use the W3C: Validator to validate your web page. Make any necessary corrections to pass the validation test.
4. Research free web hosting services. Select a free hosting service and add your new web page to the web server. Access the web page using a web browser to confirm that it displays correctly. See Bitbucket/Website Hosting for a free source code control and HTML/CSS/JavaScript hosting option.
5. Research free HTML editors. Consider downloading and installing an HTML editor.

Lesson Summary

• Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications.
• Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages.
• HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
• HTML elements are the building blocks of HTML pages.
• With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page.
• HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
• HTML elements are delineated by tags, written using angle brackets. Browsers do not display the HTML tags, but use them to interpret the content of the page.
• HTML can embed programs written in a scripting language such as JavaScript which affect the behavior and content of web pages.
• Inclusion of CSS defines the look and layout of content.
• The World Wide Web Consortium (W3C), maintainer of both the HTML and the CSS standards, has encouraged the use of CSS over explicit presentational HTML since 1997.
• The current HTML standard is HTML5, completed and standardized on 28 October 2014.
• HTML markup consists of several key components, including those called tags (and their attributes), character-based data types, character references and entity references.
• HTML tags most commonly come in pairs, although some represent empty elements and so are unpaired. The first tag in such a pair is the start tag, and the second is the end tag. They may also be called opening tags and closing tags.
• The general form of an HTML element is <tag attribute1="value1" attribute2="value2">content</tag>.
• Some HTML elements are defined as empty elements and take the form <tag attribute1="value1" attribute2="value2">.
• If attributes are not mentioned, default values are used in each case.
• A typical HTML document includes:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <p>Hello world!</p>
  </body>
</html>

• The HTML document type declaration, DOCTYPE, triggers standards mode rendering.
• <html> and </html> tags describe the web page.
• <head> and </head> tags describe page metadata.
• meta charset describes page character encoding. The default encoding for HTML5 is UTF-8.
• <title> and </title> tags describe the page title.
• <body> and </body> tags describe the visible page content.
• <p> and </p> tags describe paragraphs.
• <a> and </a> tags describe anchors (hyperlinks).
• <br> tags describe line breaks.
• <h1> and </h1> and similar tags describe content headings.
• <img> tags describe images.
• <!-- and --> enclose comments.
• Special characters may be entered using &code; syntax. Examples include:
  • & - &
  • < - <
  • > - >
• Semantic HTML is a way of writing HTML that emphasizes the meaning of the encoded information over its presentation (look).
• Presentational markup tags are deprecated in current HTML in favor of using CSS to describe content presentation.

Key Terms

attribute

A modifier of an HTML element type.

element

An individual component of an HTML document or web page.

HTML (Hypertext Markup Language)

The standard markup language for creating web pages and web applications.

HTML tags

Are the hidden keywords within a web page that define how your web browser must format and display the content.

HTTP (Hypertext Transfer Protocol)

An application protocol for distributed, collaborative, and hypermedia information systems.

markup language

A system for annotating a document in a way that is syntactically distinguishable from the text.

metadata

Is used by browsers (how to display content or reload page), search engines (keywords), and other web services.

SGML (Standard Generalized Markup Language)

A standard for defining generalized markup languages for documents.

W3C (World Wide Web Consortium)

The main international standards organization for the World Wide Web.

WYSIWYG (What You See Is What You Get)

A system in which content (text and graphics) can be edited in a form closely resembling its appearance when printed or displayed as a finished product.

Assessments

• Flashcards: Quizlet: HTML
• Quiz: Quizlet: HTML

See Also

• HTML
• Web Foundations
• Training.gov.au: Create a simple markup language document
• ShayHowe: Building Your First Web Page
• Saylor: HTML and CSS for Beginners
• PHP-T-POINT: HTML Tutorial

References

← Security

Internet Fundamentals

CSS →