teaching_web_development

HTML

Overview

HTML (HyperText Markup Language) is the standard markup language used to create web pages.

It provides the basic structure of a webpage, which is then enhanced and modified by other technologies like CSS and JavaScript.

Key Concepts

  1. Elements and Tags: HTML uses elements defined by tags (e.g., <html>, <head>, <body>, <div>, <p>, etc.) to structure content.
  2. Attributes: Elements can have attributes that provide additional information about the element (e.g., id, class, src, href).
  3. Document Structure: A typical HTML document includes a <!DOCTYPE html> declaration, <html>, <head>, and <body> sections.
  4. Semantic HTML: Using HTML elements according to their meaning (e.g., <article>, <section>, <nav>, <header>, <footer>) to improve accessibility and SEO.
  5. Forms and Input: HTML provides various form elements (e.g., <input>, <textarea>, <select>, <button>) to collect user data.
  6. Links and Navigation: Hyperlinks are created using the <a> tag, allowing navigation between different pages or sections.
  7. Multimedia: HTML supports embedding images, audio, and video using tags like <img>, <audio>, and <video>.

Basic Structure of an HTML Document

Video explaining HTML Document Structure by Dr. Chuck Severance

Basic HTML Structure

Here is the structure of a basic HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a simple HTML document.</p>
</body>
</html>

File names

href attribute

The href attribute in HTML is used within the <a> (anchor) tag to specify the URL of the page or resource that the link points to. It stands for “hypertext reference.”

Here is an example of how to use the href attribute:

<a href="https://www.example.com">Visit Example.com</a>

In this example, the text “Visit Example.com” will be displayed as a clickable link. When a user clicks on this link, they will be directed to https://www.example.com.


<a href="https://www.example.com" target="_blank">Visit Example.com</a>

Pretag in HTML

The <pre> tag in HTML is used to define preformatted text. Text within a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks. This is useful for displaying code snippets, ASCII art, or any text where the formatting (such as indentation) is important.

Here is an example of how to use the <pre> tag:

<pre>
function helloWorld() {
    console.log("Hello, World!");
}
</pre>

This will render the text exactly as it appears within the <pre> tags, maintaining the indentation and line breaks.

Document Object Model (DOM)

Historical Context

HTML was created by Tim Berners-Lee in 1991 as a way to share documents over the internet. Since then, it has evolved through various versions, with HTML5 being the latest standard, introducing new elements and APIs for modern web development.

The Next browser was one of the earliest web browsers developed at CERN, where Tim Berners-Lee worked. It played a crucial role in the initial adoption of the World Wide Web.

NCSA Mosaic was one of the first web browsers to gain widespread popularity, significantly contributing to the growth of the World Wide Web in the early 1990s.

Here is an image of the NCSA Mosaic browser (created using an AI image generator):

Image of NCSA Mosaic browser

The Wayback Machine is a digital archive of the World Wide Web, allowing users to access and view historical versions of web pages. It serves as a valuable resource for understanding the evolution of web design and content over time.

For example, here is what the Yahoo homepage looked like in 1996: Yahoo 1996

HTML is interpreted, not compiled

Concept: HTML is a markup language that is interpreted by web browsers. Unlike programming languages that require compilation, HTML code is read and rendered directly by the browser to display web pages.

Early web browsers, such as the WorldWideWeb developed by Tim Berners-Lee, interpreted HTML code to present content to users. This interpretation process allows for immediate rendering of web pages without the need for a separate compilation step.

When a user requests a web page, the browser retrieves the HTML file from the server and interprets the markup to construct the Document Object Model (DOM). The DOM represents the structure of the web page, which the browser then uses to render the visual layout and content.

Early HTML could also tolerate minor syntax errors, allowing browsers to display content even if the HTML code was not perfectly formatted. This leniency helped in the rapid adoption of HTML as a standard for web content.

This motivated the creation of the W3C Consortium to establish formal standards for HTML and other web technologies, ensuring consistency and compatibility across different browsers and platforms.

W3C Consortium

The World Wide Web Consortium (W3C) is an international community that develops open standards to ensure the long-term growth of the Web. Founded in 1994 by Tim Berners-Lee, the W3C aims to lead the Web to its full potential by creating protocols and guidelines that ensure interoperability and accessibility.

HTML validation

HTML special characters

In HTML, certain characters have special meanings and cannot be used directly in the content. To include these characters in your HTML document, you need to use character entities or escape sequences.

Here are some common HTML special characters and their corresponding entities: | Character | Entity Code | Description | |———–|————-|———————-| | < | &lt; | Less than | | > | &gt; | Greater than | | & | &amp; | Ampersand | | " | &quot; | Double quotation mark| | ' | &apos; | Single quotation mark| |   | &nbsp; | Non-breaking space |

To use these special characters in your HTML content, simply replace them with their corresponding entity codes. For example, to display the text “5 < 10”, you would write:

<p> 5 &lt; 10 

</p>

HTML Comments

In HTML, comments are used to add notes or explanations within the code that are not displayed in the web browser. Comments can be helpful for documenting the code, explaining complex sections, or temporarily disabling parts of the code during development.

HTML comments are created using the following syntax:

<!-- This is a comment in HTML -->

Comments start with <!-- and end with -->. Any text placed between these markers will be treated as a comment and ignored by the browser.

Absolute vs. Relative URLs

When linking to resources in HTML, you can use either absolute or relative URLs.

Tables in HTML

Tables in HTML are created using the <table> element, which contains rows defined by <tr> (table row) elements. Each row can contain header cells (<th>) and data cells (<td>).

Here is a simple example of an HTML table:

<table border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
  <tr>
    <td>Data 3</td>
    <td>Data 4</td>
  </tr>
</table>

Resources

This site is open source. Improve this page.