HTML 101

Web Programming Course

SUT • Fall 2019

TOC

  • History
  • How?
  • Basics
    • DOCTYPE
    • <html>, <head> & <body>
    • Nesting Elements
    • Empty Elements
    • Block-level & Inline Elements
    • Attributes
    • Comments
    • Whitespace
    • Entities
  • Elements (part I)
  • Global Attributes
  • Elements (part II)
  • Validation

History

Image © CERN

Web technologies invented by

Sir Tim Berners-Lee at CERN

  • HTML
  • URI
  • HTTP

(more)

How?

WHAT TOOLS DO YOU NEED?

  • A text editor; a program that allows you to edit plain text files. (Notepad++, Sublime Text, VS Code, Brackets, etc.)
  • A web browser; that’s the application you use to view web sites. (Chrome, Firefox, Safari, or Opera.)

Anatomy

Markup NOT a programming language

Image © MDN

Anatomy

Structure

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>

  <body>
    <p>My cat is <strong>very</strong> grumpy.</p>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

Online Demo

Basics

DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html>

HTML5

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Transitional

More on Wikipedia

Basics

<html>, <head> and <body>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>

  <body>
    <!-- visible content goes here... --->
    <p>My cat is <strong>very</strong> grumpy.</p>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

Basics

<head> contains info and metadata of the page

More on MDN

  • Page title <title>
  • Internal Style <style>
  • External Stylesheet <link>
  • Character Set <meta charset>
  • JavaScript <script>
  • ...

Basics

Nesting elements

<!-- Valid HTML -->
<p>My cat is <strong>very</strong> grumpy.</p>

<!-- Invalid HTML -->
<p>My cat is <strong>very grumpy.</p></strong>
<img src="images/firefox-icon.png" alt="My test image">

<!-- horizontal line -->
<hr>

<!-- a line break in text -->
<p> The HTML <br> element produces a line break in text</p>

Empty elements

Basics

<!-- inline elements are placed on the baseline
     beside each other -->
<a href="..."> link </a>
<strong> an important thing </strong>

<!-- block-level elements take their
     parent horizontal space -->
<p> paragraphs are block-level elements </p>

Elements' Levels

Basics

Attributes

<!DOCTYPE html>
<html dir="ltr" lang="en">
    <body>
        <img src="images/firefox-icon.png" alt="My test image">
        <!--
          src:  the image source
          alt:  an alternative text for the image
        -->
        
        <a href=https://www.google.com/ target=_blank>Google</a>
        <!--
            href:    the link url address
            target:  where to display
        -->
    </body>
</html>

More on MDN

Basics

Comments

<!-- this is a comment -->

Online Demo

Whitespace

<p>Dogs are silly.</p>
<!-- IS equal to: -->
<p>Dogs        are
         silly.</p>

<!-- But not for the <pre> element -->
<pre>Dogs        are
         silly.</pre>

Basics

Entities

<p>
    In HTML, you define a paragraph
    using the &lt;p&gt; element.
</p>

More on Wikipedia

In HTML, the characters <, >,",' and & are special characters.

Character Reference
< &lt;
> &gt;
" &quot;
' &apos;
& &amp;
&nbsp;

In HTML, you define a paragraph using the <p> element.

Elements (part I)

Headings

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

More on MDN

Elements (part I)

Paragraphs

<h1>The Crushing Bore</h1>
<p>By Chris Mills</p>

<h2>Chapter 1: The dark night</h2>
<p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p>

<h2>Chapter 2: The eternal silence</h2>
<p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p>

<h3>The specter speaks</h3>
<p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p>

More on MDN

Elements (part I)

Paragraphs - Live Demo

More on MDN

Elements (part I)

Text formatting

More on MDN

<!-- emphasis -->
<p>I am <em>glad</em> you weren't <em>late</em>.</p>

<!-- strong importance -->
<p>This liquid is <strong>highly toxic</strong>.</p>
<p>I am counting on you. <strong>Do not</strong> be late!</p>

<!-- HTML5 redefined <b>, <i> and <u> with new, somewhat confusing, semantic roles. -->

<!-- scientific names -->
<p>
  The Ruby-throated Hummingbird (<i>Archilochus colubris</i>)
  is the most common hummingbird in Eastern North America.
</p>

Elements (part I)

Lists - Unordered

More on MDN

<ul>
  <li>milk</li>
  <li>eggs</li>
  <li>bread</li>
  <li>hummus</li>
</ul>
  • milk
  • eggs
  • bread
  • hummus

Elements (part I)

Unordered List - Live Demo

More on MDN

Elements (part I)

Lists - Ordered

More on MDN

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ol>
  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5

Elements (part I)

Nested Lists

More on MDN

Online Demo

<ol>
    <li>Main Item 1</li>
    <li>Main Item 2</li>
    <li>Main Item 3</li>
    <li>Main Item 4
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
        </ul>
    </li>
</ol>
  1. Main Item 1
  2. Main Item 2
  3. Main Item 3
  4. Main Item 4
    • Sub Item 1
    • Sub Item 2

Elements (part I)

Links

 

More on MDN

<p>
    I'm creating a link to
    <a href="https://www.mozilla.org/en-US/"
       title="The best place to find 
       more information about Mozilla's
       mission and how to contribute">the Mozilla homepage
    </a>.
</p>

I'm creating a link to the Mozilla homepage.

Elements (part I)

Images

More on MDN

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
     width="400"
     height="341"
     title="A T-Rex on display in the Manchester University Museum">
The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth

Global Attributes

Global attributes may be specified on all HTML elements

More on MDN

<!-- dir specifies the direction of contents -->
<html dir="rtl"> ... </html>

<!-- id should be unique in the document -->
<table id="top-rated-products"> ... </table>

<!-- title contains information related to the element -->
<a href="..." title="more info on this link"> ... </a>

<!-- class attribute values are separated w/ whitespace -->
<p class="paragraph small gray"> ... </p>

<!-- style is used to set inline CSS -->
<p style="font-size: 14px; color: gray"> ... </p>

Elements (part II)

Tables

See Basics and Tables on MDN

<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
</table>
Header content 1 Header content 2
Body content 1 Body content 2
Footer content 1 Footer content 2

Elements (part II)

Forms

See Forms on MDN

<form action="/my-handling-form-page" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name">
  </div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_mail">
  </div>
  <div>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>

HTML Validator

Try Online

Made with Slides.com