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


Objectives and Skills edit

Objectives and skills for this lesson include:[2]

  • 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 edit

  1. Wikipedia: HTML
  2. Wikipedia: HTML editor

Multimedia edit

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

Student Presentations edit

  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 edit

  1. Complete one or more of the following tutorials:
  2. Create a simple web page.
  3. Validate your web page.
  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 edit

  • Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications.[3]
  • Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages.[4]
  • HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.[5]
  • HTML elements are the building blocks of HTML pages.[6]
  • With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page.[7]
  • HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.[8]
  • 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.[9]
  • HTML can embed programs written in a scripting language such as JavaScript which affect the behavior and content of web pages.[10]
  • Inclusion of CSS defines the look and layout of content.[11]
  • 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.[12]
  • The current HTML standard is HTML5, completed and standardized on 28 October 2014.[13]
  • HTML markup consists of several key components, including those called tags (and their attributes), character-based data types, character references and entity references.[14]
  • 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.[15]
  • The general form of an HTML element is <tag attribute1="value1" attribute2="value2">content</tag>.[16]
  • Some HTML elements are defined as empty elements and take the form <tag attribute1="value1" attribute2="value2">.[17]
  • If attributes are not mentioned, default values are used in each case.[18]
  • A typical HTML document includes:[19]
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <p>Hello world!</p>
  • The HTML document type declaration, DOCTYPE, triggers standards mode rendering.[20]
  • <html> and </html> tags describe the web page.[21]
  • <head> and </head> tags describe page metadata.[22]
  • meta charset describes page character encoding. The default encoding for HTML5 is UTF-8.[23]
  • <title> and </title> tags describe the page title.[24]
  • <body> and </body> tags describe the visible page content.[25]
  • <p> and </p> tags describe paragraphs.[26]
  • <a> and </a> tags describe anchors (hyperlinks).[27]
  • <br> tags describe line breaks.[28]
  • <h1> and </h1> and similar tags describe content headings.[29]
  • <img> tags describe images.[30]
  • <!-- and --> enclose comments.[31]
  • Special characters may be entered using &code; syntax. Examples include:[32]
    • & - &amp;
    • < - &lt;
    • > - &gt;
  • Semantic HTML is a way of writing HTML that emphasizes the meaning of the encoded information over its presentation (look).[33]
  • Presentational markup tags are deprecated in current HTML in favor of using CSS to describe content presentation.[34]

Key Terms edit

A modifier of an HTML element type.[35]
An individual component of an HTML document or web page.[36]
HTML (Hypertext Markup Language)
The standard markup language for creating web pages and web applications.[37]
HTML tags
Are the hidden keywords within a web page that define how your web browser must format and display the content.[38]
HTTP (Hypertext Transfer Protocol)
An application protocol for distributed, collaborative, and hypermedia information systems.[39]
markup language
A system for annotating a document in a way that is syntactically distinguishable from the text.[40]
Is used by browsers (how to display content or reload page), search engines (keywords), and other web services.[41]
SGML (Standard Generalized Markup Language)
A standard for defining generalized markup languages for documents.[42]
W3C (World Wide Web Consortium)
The main international standards organization for the World Wide Web.[43]
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.[44]

Assessments edit

See Also edit

References edit