adamm ~ School of Mathematics / College of Science & Engineering / U of M Home

Web Mark-Up
Last Modified 15 May 13, 10:51

This page is a set of references for web related topics and is primarily HTML and CSS focused.

An overview of the 2012 state of web design is portrayed in the 7 minute episode The Art of Web Design from the PBS web series Off Book.

HTML is a plain text markup language using tags, like <title>, that have attributes, like class="inline_img rounded", and behaviors that can be defined with javascript.

Minimal HTML

To put words on the web, you only need a subset of knowledge that a web professional needs. Those curious about other HTML features can look at browser support for HTML5.

html
Surrounds the document; has two child tags: head and body
head
Contains organizing info in tags like title, style and meta
body
Content for the webpage, which may include advertisements, menus and other secondary content that isn't the primary value for readers
title
Holds a string of text for user-interface windows, tabs or bookmarks; doesn't appear on the page
h1,
Most important header, suitable for the title of the page
h2, h3, h4, h5, h6
Section headers of decreasing importance; small documents might not find headers 4 to 6 useful
p
Paragraph break, or properly, the tags that surround a paragraph.
a
The anchor tag links to other URLs which are typically other web pages but may be inside the same document or to a non-http resource

Layout: Table versus CSS

A CSS intro titled Why table layout is stupid: problems defined, solutions offered which has a 'toungue in cheek' style but has helpful hints and good examples.

The 960 Grid System is a sensible way to stop doing layout with <table> techniques used since HTML 2.0 in the 1990s.

Given the poor and uneven support for CSS in email, the non-CSS layout techniques are still worth knowing when sending email mass email.

XHTML Basic Tags

Basic XHTML Tags are a set of XHTML Modules where each module is a collection of HTML Elements.  HTML tags must be closed like <foo></foo>
¿Como punctuación en español?  ¡Sí, como español!  Es decir, clase de. (Untranslated from what I hope is correct spanish: Like punctuation in spanish? Yes, like spanish! Well, sort of.)

Structure Module*
body, head, html, title
Text Module*
abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var
Hypertext Module*
a
List Module*
dd, dl, dt, li, ol, ul
Basic Forms Module
form, input, label, option, select, textarea
Basic Tables Module
caption, table, td, th, tr
Image Module
img
Object Module
object, param
Metainformation Module
meta
Link Module
link
Base Module
base

HTML Intro Guides

The folks behind WebPlatform.org hope to make a reference site that is more humane than reading standards and avoids hunting the net for usable information (See the video on the right).

The world's shortest introduction to HTML by Paul Garrett

Covers html tags in a spirit similar to the W3C's xhtml basic tag set.
HTML from "Software Engineering for Internet Applications" by Eve Andersson, Philip Greenspun, and Andrew Grumet
Demonstrates several ways to include images, forms and tables. Also touches on style sheets and when HTML is inappropriate.

HTML Tutorials from the W3 Consortium

Why This Site Has Almost No Graphics by Jakob Nielsen. Use images and graphics sparingly to reduce bandwidth requirements and maintenence costs.

Jakob Nielsen's essay on How Users Read on the Web contains plenty of links, but the visible text has no URLs. Don't make link text a repetition of the url.

Usability.gov has an almost 300 page book on Research Based Web Design & Usability Guidelines. Take a look at the Guidelines by Chapter for portions of the book in pdf.

Use TeX math mode for equations, and put in a <pre> or <samp> tag pair.

Mapping Markup: Basic HTML and Wiki Markup

Wed Dec 14 2005, minor updates 12/2008
Wiki markup might be easier to learn than HTML markup. Various wiki's have their own varient of wiki markup, and are part of the family of
lightweight markup languages.

Wiki Markup in MediaWiki/Wikipedia

Here's a comparison of XHTML Basic tags and the wiki markup from Wikipedia (which runs on MediaWiki). The HTML and wiki markup are seperated by a tilde (~) with HTML listed first. The lack of either half just means I haven't balanced the similarity.

Text Module*

abbr acronym  ~ 
address  ~ 
blockquote  ~  <blockquote> </blockquote>
br  ~  <br/>
cite  ~ 
code  ~ 
dfn  ~ 
div  ~ 
h1  ~  Key word or phrase appended to wiki url 
h2  ~  == ==
h3  ~  === ===
h4  ~  ==== ====
h5  ~  ===== =====
h6  ~  ====== ======
kbd  ~ 
p  ~  /\n\n/, aka 'an empty line'
pre  ~  /^ /, aka 'leading space on a line'
q  ~ 
samp  ~ 
span  ~ 
em i  ~  '' ''
strong b  ~  ''' '''
<b><i>  ~  '''' ''''
var  ~ 

Structure Module*

body, head, title  ~  implicit
title  ~  Key word or phrase appended to wiki url

Hypertext Module*

a  ~  [[]]

List Module*

dd dl dt  ~  : term : definition
li ol ul  ~  # or *

Image Module

img  ~  [[Image: ]]

Misc. Non Basic Tags

hr  ~  ----
math  ~  <math> </math>
small  ~  <small> </small>
strike  ~  <s> </s>, <del> </del>
u  ~  <u> </u>, <ins> </ins>
&*;  ~  &*;

The Mediawiki software package offers a math tag that supports TeX's math mode to be rendered to an image (using Texvc). XHTML doesn't offer an equation mode on par with TeX. The W3C offers MathML as a recomendation to preserve meaning for equations on the web, but it isn't yet commonly supported in web clients.

Use Wikipedia:Sandbox to experiment with wiki and TeX.

The article title is implied by the article keyword or phrase, and isn't actually defined in the body of the article though style dictates it should occur early in the first sentence. The first usage of the article title should be in bold, like '''article title'''.

Naming conventions - Wikimedia
Manual of Style - Wikimedia

Casual review quality of Britanica and Wikipedia science articles12/2005

Creole

Wiki Creole collects common wiki conventions from multiple wiki implementations and provides a map from wiki's ASCII markup to an XHTML representation.

Markdown

Markdown date's from before 2004, and is a similar to wikitext, but simpler. The idea is to write in markdown and have a script convert the .text file into valid xhtml (or html) output. Presumably checking the stock readme file produces errors from the "showing code" examples.
$ ./markdown < README.text  | tidy - > /dev/null
line 1 column 1 - Warning: missing <!DOCTYPE> declaration
line 176 column 6 - Warning: missing </code> before <pre>
line 176 column 1 - Warning: missing </pre> before <pre>
line 180 column 8 - Warning: inserting implicit <pre>
line 182 column 1 - Warning: discarding unexpected </code>
line 1 column 1 - Warning: inserting missing 'title' element
Info: Document content looks like HTML 3.2
6 warnings, 0 errors were found!


To learn more about HTML Tidy see http://tidy.sourceforge.net
Please send bug reports to html-tidy@w3.org
HTML and CSS specifications are available from http://www.w3.org/
Lobby your company to join W3C, see http://www.w3.org/Consortium

Character Entity References

Comparison Sheet
Character Reference Standard
Horizontal lines at mid-character height are available for four different widths. The - character is available on keyboards, others need to be entered as character entities. The variations follow what was available in printing presses, which in turn influenced computerized typesetting systems— like TeX.
Dash, minus, ndash, mdash :: - − – —

HTML doesn't have "tabs", but you can use spaces with &nbsp; and &emsp; instead of formating with tables.
 Non breaking space
 Em Space

Cascading Style Sheet

CSS 2.1, Property Table
IE Css support
WebStandards.org portal for web standardization efforts
The Anatomy of Web Fonts
sIFR good web fonts without bitmaps or flash

Firebug to inspect CSS and make one-time changes.
Greasemonkey is javascript that can make changes for all web pages.
The userContent.css is a profile specific css sheet that can apply changes to global or specific host domains.

CSS can get rid of layout markup hidden in pages with tables and spacer gifs and let multiple pages use a single layout specification. This means 1 page to change for a different layout. CSS can also show hidden tables on pages.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux/x86 (vers 1st March 2004), see www.w3.org" />
<title>
</title>
<meta name="copyright" content="" />
<meta name="author" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<meta name="Description" content="" />
<meta name="keywords" content="" />
<link rel="SHORTCUT ICON" href="/favicon.ico" />
<link href="umn.css" type="text/css" rel="stylesheet" />
<link href="umn_custom.css" type="text/css" rel="stylesheet" />
<style type="text/css">
/*<![CDATA[*/
<!--
@import url(umnglobalbkgimg.css);
-->
/*]]>*/
</style>
</head>
<body bgcolor="#FFFFFF">
To use a style, put "class=foo" inside a tag where "foo" is the style to use like crumbs in "<i class=crumbs>The quick brown fox jumped over the lazy brown dog.</i>"

stroke The quick brown fox jumped over the lazy brown dog.
bold The quick brown fox jumped over the lazy brown dog.
headline The quick brown fox jumped over the lazy brown dog.
bodysubtitle The quick brown fox jumped over the lazy brown dog.
leftnav The quick brown fox jumped over the lazy brown dog.
leftnavsubtitle The quick brown fox jumped over the lazy brown dog.
searchbar The quick brown fox jumped over the lazy brown dog.
footer The quick brown fox jumped over the lazy brown dog.
footeritalic The quick brown fox jumped over the lazy brown dog.
headerbkgimage The quick brown fox jumped over the lazy brown dog.
footerbkgimage The quick brown fox jumped over the lazy brown dog.
headernav The quick brown fox jumped over the lazy brown dog.
crumbs The quick brown fox jumped over the lazy brown dog.
headlineblue The quick brown fox jumped over the lazy brown dog.
headlineorange The quick brown fox jumped over the lazy brown dog.
bodysubtitleblue The quick brown fox jumped over the lazy brown dog.
bodysubtitleorange The quick brown fox jumped over the lazy brown dog.
linksblue The quick brown fox jumped over the lazy brown dog.
linksorange The quick brown fox jumped over the lazy brown dog.
normal The quick brown fox jumped over the lazy brown dog.
headerbkimghome1 The quick brown fox jumped over the lazy brown dog.
headerbkimghome2 The quick brown fox jumped over the lazy brown dog.
crumbs Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
leftnavspaced Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
normalbold Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
bodynavspaced Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
smtxt Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
smtxtblk Lorem ipsum dolor sit amet, consectetuer adipiscing elit,

Well Formed HTML

Check that the mark up language is well formed. You can use the W3C Markup Validation Service online, or with the tidy software package.
$ tidy index.html
tidy -access 1 index.html  > /dev/null
line 86 column 2 - Warning: <embed> is not approved by W3C
line 89 column 1 - Warning: <embed> is not approved by W3C
line 90 column 1 - Warning: <embed> is not approved by W3C
line 91 column 1 - Warning: <embed> is not approved by W3C
Info: Doctype given is "-//W3C//DTD XHTML 1.0 Transitional//EN"
Info: Document content looks like HTML Proprietary
4 warnings, 0 errors were found!
                                                                                                                                                             
                                                                                                                                                             
Accessibility Checks: Version 0.1
 
line 12 column 1 - Access: [6.1.1.1]: style sheets require testing (link).
line 13 column 1 - Access: [6.1.1.1]: style sheets require testing (link).
line 14 column 1 - Access: [6.1.1.1]: style sheets require testing (link).
line 15 column 1 - Access: [6.1.1.2]: style sheets require testing (style element).
line 64 column 9 - Access: [2.1.1.1]: ensure information not conveyed through color alone (image).
line 64 column 9 - Access: [1.1.2.1]: <img> missing 'longdesc' and d-link.
line 74 column 9 - Access: [7.1.1.5]: remove flicker (animated gif).
line 74 column 9 - Access: [2.1.1.1]: ensure information not conveyed through color alone (image).
line 75 column 9 - Access: [1.1.2.1]: <img> missing 'longdesc' and d-link.
line 75 column 9 - Access: [7.1.1.5]: remove flicker (animated gif).
line 75 column 9 - Access: [2.1.1.1]: ensure information not conveyed through color alone (image).
line 75 column 9 - Access: [1.1.2.1]: <img> missing 'longdesc' and d-link.
line 79 column 1 - Access: [6.3.1.2]: programmatic objects require testing (object).
line 79 column 1 - Access: [6.2.2.3]: text equivalents require updating (object).
line 79 column 1 - Access: [8.1.1.2]: ensure programmatic objects are accessible (object).
line 79 column 1 - Access: [7.1.1.2]: remove flicker (object).
line 79 column 1 - Access: [2.1.1.3]: ensure information not conveyed through color alone (object).
line 79 column 1 - Access: [1.1.5.1]: <object> missing alternate content.
line 87 column 2 - Access: [1.4.1.1]: multimedia requires synchronized text equivalents.
line 87 column 2 - Access: [6.3.1.3]: programmatic objects require testing (embed).
line 87 column 2 - Access: [8.1.1.4]: ensure programmatic objects are accessible (embed).
line 87 column 2 - Access: [7.1.1.3]: remove flicker (embed).
line 90 column 1 - Access: [1.4.1.1]: multimedia requires synchronized text equivalents.
line 90 column 1 - Access: [6.3.1.3]: programmatic objects require testing (embed).
line 90 column 1 - Access: [8.1.1.4]: ensure programmatic objects are accessible (embed).
line 90 column 1 - Access: [7.1.1.3]: remove flicker (embed).
line 91 column 1 - Access: [1.4.1.1]: multimedia requires synchronized text equivalents.
line 91 column 1 - Access: [6.3.1.3]: programmatic objects require testing (embed).
line 91 column 1 - Access: [8.1.1.4]: ensure programmatic objects are accessible (embed).
line 91 column 1 - Access: [7.1.1.3]: remove flicker (embed).
line 92 column 1 - Access: [1.4.1.1]: multimedia requires synchronized text equivalents.
line 92 column 1 - Access: [6.3.1.3]: programmatic objects require testing (embed).
line 92 column 1 - Access: [8.1.1.4]: ensure programmatic objects are accessible (embed).
line 92 column 1 - Access: [7.1.1.3]: remove flicker (embed).


You are recommended to use CSS to specify the font and
properties such as its size and color. This will reduce
the size of HTML files and make them easier to maintain
compared with using <FONT> elements.
                                                                                                                                                             
To learn more about HTML Tidy see http://tidy.sourceforge.net
Please send bug reports to html-tidy@w3.org
HTML and CSS specifications are available from http://www.w3.org/
Lobby your company to join W3C, see http://www.w3.org/Consortium

Firefox Add-Ons

Web Simplifiers

  1. AdBlock Plus
  2. Flashblock
  3. NoScript

Web Developer Tools

  1. FireBug
  2. Greasemonkey
  3. ScreenGrab
  4. QuickProxy

Misc

Dublin Core MetaData

Using Dublin Core
The Dublin Core metadata standard is a simple yet effective element set for describing a wide range of networked resources. The Dublin Core standard includes two levels: Simple and Qualified. Simple Dublin Core comprises fifteen elements; Qualified Dublin Core includes an additional element, Audience, as well as a group of element refinements (also called qualifiers) that refine the semantics of the elements in ways that may be useful in resource discovery. The semantics of Dublin Core have been established by an international, cross-disciplinary group of professionals from librarianship, computer science, text encoding, the museum community, and other related fields of scholarship and practice.
Dublin Core Metadata Element Set
title, creator, subject, description, publisher, contributor, date, type, format, identifier, source, language, relation, coverage, rights
Expressing Dublin Core in HTML/XHTML meta and link elements
Put the meta data in the HEAD section of the html page.
	<meta name="DC.element" content="Value" />
	<meta name="DCTERMS.element" content="Value" />
Architecture of the World Wide Web, Volume One

Temporary Text Samples

When prototyping a design, it can be helpful to put dummy text in place of real data. One option is to rot13 some random words, but it doesn't quite match the spacing of real language and punctuation.
abafcvevghnyvgl nagvtnynpgvp oevtug-uhrq fzryyvarff bofgercrengr errkcerff haflzcngurgvparff funxrfprar inythf cnvagevk Nrnrn fhoonff flzobyvpnyarff Xbenu uryy-yvxr hanofbeovat fhcreurngrq dhrrafjner cevbefuvc cerfhccbfvgvbaf Znprtna nppryrebzrgref qhobaarg Urcmn cragnzrebvq frys-rkvyr qvffvzhyngvir abagentrqvrf fhysbevpvavp cnyrfgeny gbbyfurq Tencuvhz bireivtbebhfyl Nagvtbaba guerrcraprf
Alternatively, a block of 'lorem ipsum' text has been used as a type specimen since the 1500s. The lorem ipsum text comes from Cicero's in 45 AD (BC?). The text below shows the first 160 character (limit for cell phone SMS messages) with italics to show cuttoff for a Twitter post.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost

via Ironic Sans

A user-interface design class in the late 90s suggested replacing text with m's, which is easy to to with regular expressions. A drawback of this substitution is the lack of a font's ascending and descending parts.

Mmmmm mmmmm mmmmm mmm mmmm, mmmmmmmmmm mmmmmmmmmm mmmm, mmm mm mmmmmm mmmmmm mmmmmmmmm mm mmmmmm mm mmmmmm mmmmm mmmmmm. Mm mmmm mm mm

SpaceIpsum.com/N generates N random paragraphs of space related text... if the URL ever stops working you could subsittute the fortune command from Unix.

Redirecting to New URLs

In a pinch, you can put a tag in the HTML for a page to send folks to a new location.
<meta http-equiv="Refresh" content="0;url=http://www.example.com/">

Or if you have access to the server config, or a .htaccess file, you can set a permanent redirect.

Redirect 301 /old_and_broken http://www.example.org/new_and_working

Transparent Backgrounds

CSS3 supports transparency, but older browsers will need tricks to support background transparency.

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000); /*AARRGGBB for ie7 */

Accessible Content

Use http://wave.webaim.org/ to check code for accessiblity with screen readers like NVDA. Also use resources on accessibility.umn.edu

Primary and Secondary Colors

Below is a partial set of primary and seconday colors from University of Minnesota colors

                             

                             

                             


www.math.umn.edu/~adamm/WebMarkUp/index.shtml
                                                                        
The views and opinions expressed in this page are strictly those of the page author.
The contents of this page have not been reviewed or approved by the University of Minnesota.

     
         
   

  Enter keyword search