HTML 5

Les Pinter


HTML | Examples | Conclusion

HyperText Markup Language (HTML) was first proposed by Tim Berners-Lee, a contract physicist at CERN in Switzerland in 1989. It was based on a formatting markup language used for internal documents at CERN. Berners-Lee added the notion of a hyperlink to link to another HTML document and load it into the browser. He called the result hypertext.

HTML has gone through several revisions. The latest is version 5, hence HTML 5. It's distinguished by the inclusion of <!doctype html> as the first line in the file. What the server does with the file is determined by the file's extension: .htm or .html files are served without modification; other extensions invoke specific language processors. For example, .asp files are processed by the IIS as Active Server Pages; JavaScript (or VBScript) programming code is executed to emit dynamic html which is created as the page is being rendered. The code tells the IIS what code to produce. .jsp files are processed by the Java Server Pages engine; files with the extension .cshtml are processed by the Razor engine. There are dozens of language alternatives, each of which is invoked by the appropriate language processor.

Once the code is rendered, it contains only three types of content, because Internet browsers are only capable of working with three technologies:

Right-click on any text in a web page and select View Source, and you'll see what the browser has to work with. You can use Ctrl+A to select all, copy and paste it into NotePad, make changes, save it as an .html file on your desktop, and then doubleclick on the file's icon on your desktop to run it (note that certain internal references, e.g. links to local files, like images, scripts and stylesheets, won't be properly resolved. But you'll get the idea.

There are many browsers; Internet Explorer, which comes with Windows, is widely used. However, some other browsers, like Mozilla Firefox and Google Chrome, have more features. In addition, more recent versions have additional capabilities, and if you design your pages for the latest versions, your users may not see what your wanted them to see. There are javascript libraries that you can link to inside your page that will correct for most of these issues. However, if your users don't turn on JavaScript, they won't work. So if you're relying on such 'shims', be sure to include a test to ensure that they've enabled JavaScript.

HTML

At its most basic, an HTML file consists of these tags:

<!doctype html>
<head>
<title>A title</title>
</head>
<body>
</body>
</html>

HTML consists of tags, which generally appear as a pair of delimiters, e.g. <p>This is a paragraph</p> Directives like script and link are placed in the head section; content appears in the body section. (Scripts can also be included in the body, as we'll see later.)

Blank spaces beyond the first blank are ignored, as are carriage returns. So

<p>Hello
to
you</p>
and
<p>Hello            to           you     </p>

would both be displayed as

Hello to you

There are over a hundred tags, although most web pages seem to use only 30 or so. The most common are shown in Listing 1:


All text is added to the current paragraph until a new tag is encountered. The Line Break tag <br /> can also be used.

For many years it was customary to try to position content using tables, often nested to several levels (The cell borders don't have to be visible, so tables were often used for this purpose):

A pictureSome text
More textAnother picture

The use of <div> and <span> tags is preferred these days, because it allows content to flow to the next line if the display page is narrowed. Copy and paste the following HTML into a file called C:\users\{your username]\x.html. Double-click on the file icon to open it in a browser, and then resize the browser window to see how it changes:

Listing 2 - Using divs to reposition content

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style>
        .movable
        { width: 200px;
          float: left;
          box-shadow: 3px 3px 3px #300;
          margin-left: 20px;
          margin-bottom: 10px;
          padding: 5px;
          background-color: lightseagreen }
    </style>
</head>
<body>
    <div class="movable" >
        <p>This is some content</p>
    </div>
    <div class="movable" >
        <p>This is some more content</p>
    </div>
    </body>
</html>

Attributes

Almost all tags can have one or more attributes, used to specify parameters for the tag, e.g.

Global attributes can be used with any html tag:

Each tag has one or more attributes specific to that tag. W3Schools has the definitive list of attributes for each tag.

Styles

Styling is what gives personality to your web pages. Anything you've ever seen on any web page, you can do with your own pages using styles. Be prepared to spend some time mastering them. I've been using styles for 20 years, and I learn something new literally every day.

There are three ways to apply styling, although as you'll see, the third way is pretty much the only one that the pros use. (Style attributes (like "width=100" can be included with tags, but such attributes are included for backward compatibility. Explicit styles are what you're supposed to use.)

Inline styles

Any tag can include a <style=""> attribute with all sorts of styling directives. Here's an example for a specific paragraph:

<p style="font-size: 14pt; color: blue; background-color: lightGray; margin-left: 20px;">Good morning!</p>

Each tag has a predetermined list of attributes that can be used with that tag. As usual, W3Schools.com/HTML has the definitive list of attributes for each tag.

Document-level styles

You can declare styles for tags, tags having a specific ID, or tags with a class="" specification listing one or more classes to be applied to a tag. These are specified in a <Style>...</Style> section embedded within the <Head> section.

Example:

<style>
 * { color: blue }
 p { font-family: Times New Roman; font-size: 11pt; text-indent: 10px; }
 .first { margin-left: 20px; color: firebrick; text-style: italic; }
 #MainPoint { text-shadow: 3px 3px 3px #300 }
</style>

There are four levels of styling: Global, Tag, ID and Class:

Classes are used in preference to the other three techniques. A complex list of styles can be hundreds or even thousands of lines in length. For that reason, it's preferable to use external style sheets using the link statement.

External stylesheets

External stylesheets with the extension .css are referenced with a link statement in the head section:

<link rel="stylesheet" type="text/css" href="filename.css" />

You can link to a stylesheet in your website's local folder and its subfolders, or on a computer identified by a url, e.g.

<link rel="stylesheet" type="text/css" href="http://www.Googleapi.com/stylesheet.css" />

You can link to multiple stylesheets additively. If a specification is present in more than one linked stylesheet, only the last one referenced will be used.

External style sheets have the additional advantage of being available for use in all of your web pages, giving your site a consistent look and feel, and making collaboration with other developers much easier. The same is true of shared scripts. If you train yourself to use external styles and script libraries, you'll create a better and more professional product.

Examples

(Note that I'll be using a <style>...</style> section within the <head> section for these examples. In practice you would preferably use an external local style sheet.)

A typical scenario

A typical web page would look something like this:

Listing 3 - a typical HTML web page
<!doctype html>
<html>
<head>
<title>The title you want at the top of the page</title>

<style>
body  { max-width: 1000px; }
h1    { color: Red; font-size: 24pt; text-shadow: 3px 3px 3px #300 }
h2    { color: Purple; font-size: 18pt; }
h3    { color: fireBrick; font-size: 14pt; }
p,li  { text-indent: 10px; font-size: 14pt;                        }
pre   { font-family: Courier New; font-size: 10pt; color: green; font-weight: bold;  }
aside { margin-left: 20px; margin-right: 20px; background-color: lightgray; }
.button1 { color: white; background-color: green; box-shadow: 3px 3px 3px #300; title: "Toggle visibility"; }
#blockQuote { background-color: lightYellow; width: 200px; float: right; border: 1px solid black; }
</style>

<link rel="stylesheet" href="jquery-ui.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui-1.10.3.js"></script>

</head>

<body style="background-color: lightYellow">
<h1>Document title</h1>
<p>First paragraph.
<p>First paragraph.

<figure style="float: right">
<img src="MyPicture.jpg">
<figcaption>My best shot</figcaption>
</figure>

<p>In conclusion...
<hr />
</body>

</html>

@Media tags

In 2017, various source report that the percentage of web traffic viewed on mobile devices (phones, and increasing, tablets) is anywhere from 43% to 56%. If your web pages don't respond to smaller displays, the text will probably be too small to read. You can't sell what you can't pitch.

That's where @media tags come in. They let you specify what to do when the screen is smaller (mainly, when it's narrower). Essentially, you add @media styles that apply alternative styles to certain HTML elements when the screen is narrower. The instant the conditions are fulfilled, the alternative styles are applied. Since this happens in real time, e.g. as you change the width of a web page, you can test it on your desktop or laptop simply by grabbing the right margin of the browser window and dragging it to the left to decrease window size. (You can also use debugging tools built into your browswer, as you'll see below.)

Type this into C:\users\{your userid}\Desktop\x.html:

Listing 4 - A Responsive Page Using @Media Tags

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style>
    	span { display: none; }
        .movable
        { width: 200px;
          float: left;
          box-shadow: 3px 3px 3px #300;
          margin-left: 20px;
          margin-bottom: 10px;
          padding: 5px;
          background-color: lightseagreen }
        .disappearing { display: none; }
        @media only screen and (max-width: 400px)
        { div  { display: none; }
		  span { display: block; }
        }
    </style>
</head>
<body>
    <div class="movable" >
        <p>This is some content</p>
    </div>
    <div class="movable" >
        <p>This is some more content</p>
    </div>
    <span><h1>With a small screen, this is all you get.</h1></span>
    </body>
</html>

Double-click to run it, and then grab the right side of the browser window and drag it to the left. That's what your users will see if they open the web page in a device with a smaller display.

There are developer tools built into each of the browsers to let you see exactly what your page will look lke on smaller devices:

Many experts recommend that you start by developing your pages for mobile devices, and then make any modifications necessary to display the page properly as well on laptops and desktops only as a final step. That shift of parallax that might seem extreme, but it's really just adapting to the evolution of the web.

Conclusion

If you want to build web pages that take full advantage of HTML, you should plan for a long and intimate relationship with HTML 5 - the lingua franca of the web.

❑❑❑