Frontend Engineering, Volume I

HTML Chapter 8 Companion

© 2012, Martin Rinehart

History—HTML Was X-Rated

Websites—Backend Engineering

Tools—caniuse and google

Input Widgets

The widgets below are all functioning HTML widgets. None of them are connected to anything, so any inputs you make are discarded when you leave the page.

The <input> Tag Widgets

Other Input Widgets

Link to Foreign Sites

Your project here is to do something like our sample project's "Credits" page, where we thank (and link to) our contributors. First, let's begin with links to foreign pages:

URL Scheme Required

This link doesn't work! (No URL scheme.)

<a href=''></a>

This is the real link! (With scheme: http://. Don't forget the forward slashes.)

<a href=''></a>

Sample Credits Page

This is our sample project's Credits Page.

If you didn't do so already, try clicking on one of the portraits. It links!

Graphics as Links

So far we've shown text between the <a ...> and the </a> tags. This is by far the most common content. However, it's not the only content.

The <a> tag is an inline element tag. The <img> tag is also an inline element tag. Inline elements nest. If you put an image inside the link, your image is a clickable part of the link content. Try it!

If you use your browser's "View Source" capability, you will see that our Credits page also gets a little tricky. You might find it informative.

Now it's your turn. Create a credits page for your site that links to foreign sites. If your site is about your family reunion and your sheepdog speaks lorem ipsum, link to your lorem ipsum generator. (Or link to Facebook, or Twitter, Tumblr or whatever you like.)

Character Entities—Dashes

The hyphen isn't really a "dash" but we include it for comparison.

Feedback: MartinRinehart at gmail dot com

# # #