Frontend Engineering, Volume I

HTML Chapter 3 Companion

© 2012, Martin Rinehart


History—Birth of the Internet

Lorem Ipsum

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?

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

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

# # #