Frontend Engineering, Volume I
HTML Chapter 8 Companion
© 2012, Martin Rinehart
History—HTML Was X-Rated
SP, a markup language conforming to SGML: jclark.com/sp .
The W3C's take on SGML and HTML: www.w3.org/TR/html4/intro/sgmltut.html.
Tutorial re XML from an HTML perspective: www.ibm.com/developerworks/xml/tutorials/xmlintro/section2.html.
Early hype re the virtues of XHTML: www.webreference.com/xml/column6.
Websites—Backend Engineering
What languages to backend engineers use? This list shows the choices made by the largest sites: en.wikipedia.org/wiki/Programming_languages_used_in_most_popular_websites.
Tools—caniuse and google
caniuse.com: caniuse.
google.com: google.
Our take on HTML 5 meters: Artists > Other > Meters HTML5.
HTML 5 rocks! (not necessarily recommended for its balanced viewpoint): html5rocks.com.
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! google.com (No URL scheme.)
<a href='google.com'></a>
This is the real link! http://google.com (With scheme: http://. Don't forget the forward slashes.)
<a href='http://google.com'></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.
- -—a hyphen.
- –—an en dash, –.
- ——an em dash, —.
Which is which and when do you use what?
One nice, simple explanation: www.grammarbook.com/punctuation/dashes.asp.
If you want to know how to get the dashes in your word processor: grammar.ccc.commnet.edu/grammar/marks/dash.htm.
And if you really like the fine points of grammar: www.chicagomanualofstyle.org/qanda/data/faq/topics/HyphensEnDashesEmDashes.html?old=HyphensEnDashesEmDashes07.html.
Feedback: MartinRinehart at gmail dot com
# # #