Frontend Engineering, Volume I

HTML: Chapter 3 Companion

© 2012, Martin Rinehart


History—Birth of the Internet

Packet switching: www.pbs.org/opb/nerds2.0.1/geek_glossary/packet_switching_flash.html.

Lorem Ipsum

Free Lorem Ipsum: lipsum.org.

There are many other sources, too. Try googling "lorem ipsum" and choose one you like.

Adding to Your Template

While we won't address CSS (Volume II of this series) or JavaScript (Volume III), this is a good time to add the tags to your template.html, as shown here:

<!doctype html>

<!-- folder/???.html - ??? -->

<html>

    <head>

        <style>

        </style>
    </head>

    <body>

        <script type='text/JavaScript'>

        </script>
    </body>

</html>

<!-- end of folder/???.html -->

Placing <script> Where?

This was a controversial topic. Today, however, the controversy is mostly settled.

The StackOverflow forum is where experts go for answers (not recommended until you get to JavaScript). These are three discussions from that forum re this topic.

StackOverflow 1: stackoverflow.com/questions/496646/how-does-the-location-of-a-script-tag-in-a-page-affect-a-javascript-function-tha.

StackOverflow 2: stackoverflow.com/questions/4396849/does-the-script-tag-position-in-html-affects-performance-of-the-webpage.

StackOverflow3: stackoverflow.com/questions/436411/where-is-the-best-place-to-put-script-tags-in-html-markup.

Colors

Selected Colors
Name Hex
white #ffffff
black #000000
red #ff0000
green #00ff00
blue #0000ff
yellow #ffff00
magenta #ff00ff
cyan #00ffff

Note: The color 'green' is not the pure green #00ff00.

Decreasing Red, Constant GB
#fff4f0 #fcf4f0 #f8f4f0 #f4f4f0 #f0f4f0 #ecf4f0 #e8f4f0
Decreasing RG, Constant Blue
#ffffff #fdfdff #fbfbff #f9f9ff #f7f7ff #f5f5ff #f3f3ff
Increasing Green, Magenta (RB)
#ff30ff #ff50ff #ff70ff #ff90ff #ffb0ff #ffd0ff #fff0ff

Your Colors

Open your template. Save it immediately as colors.html in your "learning" folder. Copy the table below. Paste several copies into your colors.html and edit in some colors that make you curious. Run enough experiments so that you can choose the color for the pages in your project website.

In your browser:

Change This Caption!
#ffffff #ffffff #ffffff #ffffff #ffffff #ffffff #ffffff #ffffff

In Notepad++:

<table bgcolor='#f0f0ff' border=1 cellpadding=5 style='font-family: monospace'>
	<caption>Change This Caption!</caption>
	<tr>
		<td bgcolor='#ffffff'>#ffffff</td>
		<td bgcolor='#ffffff'>#ffffff</td>
		<td bgcolor='#ffffff'>#ffffff</td>
		<td bgcolor='#ffffff'>#ffffff</td>
		<td bgcolor='#ffffff'>#ffffff</td>
		<td bgcolor='#ffffff'>#ffffff</td>
		<td bgcolor='#ffffff'>#ffffff</td>
		<td bgcolor='#ffffff'>#ffffff</td>
	</tr>
</table>

Edit in your own colors. We suggest varying one color, holding the other two constant until you really feel like you know what you are doing. For starters, you could vary a color by ones. Counting backward from ff in hex:

By ones: ff, fe, fd, fc, fb, fa, f9, f8, f7, f6, ..., f1, f0, ef, ee, ed, ...

Varying a single color by ones shows how close together colors are. Varying the same color by twos or threes shows more visible differences:

By twos: ff, fd, fb, f9, f7, f5, f3, f1, ef, ed, ...

By threes: ff, fc, f9, f6, f3, f0, ed, ea, e8, e5, e2, df, ...

More on Colors

One interesting color chooser widget: www.w3schools.com/tags/ref_colorpicker.asp.

From the same folks, a list of names (if you really think you can remember the difference between "AliceBlue" and "Azure"): www.w3schools.com/colors/colors_names.asp.

We don't like the 3-digit option for specifying hex colors. But that's us; you're you, so: html-color-codes.com.

Another good color chooser, for 6-digit work: html-color-codes.info.

Ordered Lists

Following is a simple, ordered list:

  1. First
  2. Second
  3. Third

This is the HTML that created the above list:

<ol>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ol>

Now, here's a preview of what's coming in the next two chapters. The following list nests an <ol type='A'> inside the first <li> of an <ol type='I'>. Stay tuned!

  1. First Main Topic
    1. One Subtopic
    2. Another Subtopic
  2. Second Main Topic
  3. Third Main Topic

Character Entities—Footnote Superscripts

Use Name HTML Result
in Browser
Superscript 1 sup1 &sup1;
 ¹ (Note here)
Superscript 2 sup2 &sup2;
 ² (Note here)
Superscript 3 sup3 &sup3;
 ³ (Note here)


Feedback: MartinRinehart at gmail dot com

# # #