Essential HTML – Page 2 – Discussions/Tutorials About HTML (and sometimes CSS)

Regular Expression for Pattern Attribute in Form Field

MySQL databases accept dates in many different formats. For example, YY-MM-DD, YYYY:MM:DD, YYYYMMDD, and YYYY-MM-DD, among the myriad options for date formatting. (Y is for year, M is for month, and D is for day.)

Embracing HTML5’s pattern form attribute, which accepts a regular expression pattern, I wanted to accept dates from 0000-00-00 through 2015-12-31. The result is…

<input type="text" name="dob" id="dob" placeholder="YYYY-MM-DD" pattern="([0-1][0-9][0-9][0-9]|20[0-1][0-5])-(0[0-9]|1[0-2])-([0-2][0-9]|3[0-1])">

If a user enters a date in the wrong format, HTML5 browsers will complain:

[Screen capture of Chrome’s error message relating to a wrong date-based pattern match] — Screen capture of Chrome’s error message relating to a wrong date-based pattern match.

HTML5 Audio Tutorial

HTML5 audio has matured significantly since it was introduced in 2009. In its early days, for example, none of the major browsers supported the same audio file types, of which there are many. Today, however, they all support MP3, making it easy to render basic audio in a browser.

A more elaborate tutorial is available on GitHub, where you can contribute to the discussion.

UPDATE (29 April 2015): This project is now responsive. Try it on a phone: http://roy.vanegas.org/html5-audio

Ajax-based Email Check Web App

The initial page of the check Email Availability app. — The initial page of the Check Email Availability app.

When teaching Ajax concepts, I’ve always shared a small web app that checks whether an email exists in a database. The code is now on Bitbucket and a video on how it works is on YouTube.

Each of the US States Listed Inside Option Tags for HTML Forms

If you’re working with all the US states and you need to list all of them in a form, download the following Gist from GitHub:

https://gist.github.com/code-warrior/acbd72bb34cc64b8137b#file-states-php

It’s a self-submitting form (in PHP) and defaults to the GET method for posting.

Width Before Height

When listing the HTML dimension attributes belonging to tags such as <img> and <video>, we have the option of including width before height, and vice versa. For example:

<video width="320" height="240">

which is the equivalent to

<video height="240" width="320">

<img src="shihtzu.jpg" width="50" height="50" alt="">

which is equal to

<img src="shihtzu.jpg" height="50" width="50" alt="">

The convention, however, is to list width before height. Browsers do it. Image previewers do it.

In Firefox, for example, if you hover your mouse over an image and perform a context-click (right-click for right handers), choose View Image…

[Hover, then context-click over image] — Hover, then context-click over image

then hover your mouse over the title tab, you’ll see the image’s width listed before its height.

[Hover mouse over browser tab] — Hover mouse over browser tab

And, lastly, in Windows 8.1, if you view an image in Windows Photo Viewer and bring up the Properties panel (Alt + Enter), then click the Details tab, you’ll see the image’s width listed before height under the Image heading.

[The Dimensions option in Windows’ Photo Viewer Properties panel] — The Dimensions option in Windows’ Photo Viewer Properties panel

Hope I’ve convinced you.

The Difference Between a Tag and an Element

A Tag

A tag is simply a less than sign (<), followed by a forward slash (/) if it’s a closing/ending tag, followed by a string of one or more pre-defined characters (a, li, body, etc), followed by a greater than sign (>). For example, the starting/opening body tag:

<body>

Or the closing paragraph tag:

</p>

If you make a mistake in the spelling of a tag, that is, if you spell a tag that is not defined by HTML, then browsers will typically ignore it. If your misspelled tags contain content, the tags are ignored, but the content is rendered in a browser. The content “Here’s my misshapen document” in the following example will be rendered in the browser, but the tags will be ignored.

<boddyy>
Here’s my misshapen document
</boddyy>

An Element

An element consists of the opening/starting tag, all its allowable content, and the closing/ending tag. If it’s an empty element, like, for example, the image tag, then the element consists of only the opening/starting tag. Here’s the image element:

<img src="shihtzu.jpg"
     width="300"
     height="300"
     alt="[A 5-year old Shih Tzu]">

And here’s the paragraph element:

<p>This is a paragraph.</p>

Definitions: User Agent, User, and Author

It’s important to understand the distinction between the terms “user agent,” “user,” and “author” when discussing CSS’s cascade.

A user agent, or UA, refers to any browser when the term is used to discuss web-based technologies. Firefox, Chrome, and Opera are all user agents.

A user is synonymous with a computer user. For example, I visit every web page on the Internet as a user.

And finally, when I write CSS code, I am wearing the hat of an author. Similarly, when I write an HTML, I am the author of that document.

Logging in to MySQL From The Terminal

Although this video is over two years old, it’s still helpful in showing how to connect to MySQL from The Terminal.

All The Meanings of “head” in HTML

The word “head” takes on various meanings in HTML. For example, as the head of a document, the head of a table, or the heading of a section. There are other uses.

Inside an HTML Tag

Within a tag, head appears—or is implied—in <head>, <header>, <thead>, <th>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, and <hgroup>, which appeared in HTML5 and is deprecated in HTML5.1.

The <head> Element

At the top of your HTML’s source code, as the first descendant of the <html> element, is the <head> element. This is defined as the head section of your source code.

<!DOCTYPE html>
<html>
   <head>
      <!-- The head section of the source document -->
   </head>
   <body>
   </body>
</html>

The <header> Element

Placed at the top of a section, or, more typically, at the top of the <body> element, the <header> element defines a header of a section, which typically contains a heading.

For example:

<section>
   <header>
      <h1>Heading of Section</h1>
      <nav>
         <ul>
            <li>Thing one</li>
         </ul>
      </nav>
   </header>
</section>

<header>
   <nav>
      <ul>
         <li>Home</li>
         <li>About</li>
      </ul>
   </nav>
</header>
<main>
</main>
<footer>
</footer>

The <thead> Element

Short for table heading group, the <thead> element encompasses a block of rows that defines a table’s headings or labels. As such, it’s referred to as the table’s heading. In the following example, First Name and Last Name are in the table’s heading.

<table>
   <thead>
      <tr>
         <th>First Name</th><th>Last Name</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Arvo</td><td>Pärt</td>
      </tr>
   </tbody>
</table>

Note: Placing a table immediately after a heading doesn’t make the heading the table’s heading. Consider the following:

<h1>Composers</h1>
<table>
   <thead>
      <tr>
         <th>First Name</th><th>Last Name</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Arvo</td><td>Pärt</td>
      </tr>
   </tbody>
</table>

Composers is the section’s heading, not the table’s heading. As mentioned before, First Name and Last Name are in the table’s heading.

The <th> Element

Short for table header cell, the <th> element represents a heading cell, often within a table’s heading section (<thead>), that defines the heading of a column or a row. Thus, this element represents a column heading or a row heading.

Reconsider the previous example:

<table>
   <thead>
      <tr>
         <th>First Name</th><th>Last Name</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Arvo</td><td>Pärt</td>
      </tr>
   </tbody>
</table>

First Name is a column heading, as is Last Name. Now, consider the following example, where the table is defined vertically, not horizontally:

<table>
   <tbody>
      <tr>
         <th>First Name</th><td>Arvo</td>
      </tr>
      <tr>
         <th>Last Name</th><td>Pärt</td>
      </tr>
   </tbody>
</table>

First Name and Last Name are now row headings.

As an Attribute

The keyword “head” also appears within the attribute headers. See the second and third rows below. (headers is useful when marking up accessible tables read by screen readers.) Here’s an example:

<table>
   <thead>
      <tr>
         <th colspan="3" id="apples">Apples</th>
         <th colspan="3" id="pears">Pears</th>
      </tr>
      <tr>
         <th headers="apples" id="braeburn">Braeburn</th>
         <th headers="apples" id="gala" >Gala</th>
         <th headers="apples" id="fuji">Fuji</th>
         <th headers="pears" id="bosc">Bosc</th>
         <th headers="pears" id="starkrimson">Starkrimson</th>
         <th headers="pears" id="forelle">Forelle</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td headers="apples braeburn">$4.00</td>
         <td headers="apples gala">$3.00</td>
         <td headers="apples fuji">$2.00</td>
         <td headers="pears bosc">$1.00</td>
         <td headers="pears starkrimson">$4.00</td>
         <td headers="pears forelle">$3.00</td>
      </tr>
   </tbody>
</table>

The Outlining Algorithm

In each of the six tags ending in a number (<h1>...<h6>), the “h” stands for “heading,” with each incrementally larger number representing a deeper element in the outlining algorithm, or outlining structure. An example:

<h1>New York City Neighborhoods</h1>
<h2>Queens</h2>
<h3>Forest Hills</h3>
<h2>Brooklyn</h2>
<h3>Red Hook</h3>
<h2>The Bronx</h2>
<h3>Parkchester</h3>
<h2>Manhattan</h2>
<h2>East Village</h2>
<h2>Staten Island</h2>
<h3>St George</h3>

In closing, here’s a full document combining each of the previous examples.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>HTML5 Template</title>
   </head>
   <body>
      <!-- A header section -->
      <header>
         <!-- A DEPRECATED heading group -->
         <hgroup>
            <!-- A level one heading -->
            <h1>Headings</h1>
            <!-- A level two heading acting as a sub header -->
            <h2>All About Them</h2>
         </hgroup>
      </header>
      <table>
         <!-- A table heading group -->
         <thead>
            <tr>
               <!-- A table heading cell-->
               <th colspan="3" id="apples">Apples</th>
               <th colspan="3" id="pears">Pears</th>
            </tr>
            <tr>
               <!-- The headers attributes that map to IDs above -->
               <th headers="apples" id="braeburn">Braeburn</th>
               <th headers="apples" id="gala" >Gala</th>
               <th headers="apples" id="fuji">Fuji</th>
               <th headers="pears" id="bosc">Bosc</th>
               <th headers="pears" id="starkrimson">Starkrimson</th>
               <th headers="pears" id="forelle">Forelle</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td headers="apples braeburn">$4.00</td>
               <td headers="apples gala">$3.00</td>
               <td headers="apples fuji">$2.00</td>
               <td headers="pears bosc">$1.00</td>
               <td headers="pears starkrimson">$4.00</td>
               <td headers="pears forelle">$3.00</td>
            </tr>
         </tbody>
      </table>=
      <section>
         <!-- A section header -->
         <header>
            <h1>Heading of Section</h1>
            <nav>
               <ul>
                  <li>Thing one</li>
                  <li>Thing two</li>
               </ul>
            </nav>
         </header>
      </section>
   </body>
</html>

Simple Drop Down Menu in Sass/CSS

[Screenshot of simple drop down menu.] — Screenshot of simple drop down menu.

I’ve shown this drop down menu in class multiple times over the years, but I have never shared it. The project is now available on GitHub. You’ll need Sass to compile the CSS.