adamm
~ School of Mathematics
/ Institute of Technology
/ U of M Home
| |
| math.umn.edu / ~adamm / WebMarkUp | |
Web Mark-Up
|
|
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 HTMLTo 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.
Layout: Table versus CSSA 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 TagsBasic 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.)
HTML Intro GuidesThe 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.
Wiki Markup in MediaWiki/WikipediaHere'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.
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
Casual review quality of Britanica and Wikipedia science articles12/2005
CreoleWiki Creole collects common wiki conventions from multiple wiki implementations and provides a map from wiki's ASCII markup to an XHTML representation.
MarkdownMarkdown 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 ReferencesComparison SheetCharacter 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 :: - − – —
Cascading Style SheetCSS 2.1, Property TableIE 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. 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. Well Formed HTMLCheck 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-OnsWeb Simplifiers
Web Developer Tools
MiscDublin Core MetaDataUsing Dublin CoreThe 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, rightsExpressing Dublin Core in HTML/XHTML meta and link elements Put the meta data in the HEAD section of the html page.Architecture of the World Wide Web, Volume One<meta name="DC.element" content="Value" /> <meta name="DCTERMS.element" content="Value" />
Temporary Text SamplesWhen 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 guerrcraprfAlternatively, 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 URLsIn 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 BackgroundsCSS3 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 ContentUse http://wave.webaim.org/ to check code for accessiblity with screen readers like NVDA. Also use resources on accessibility.umn.eduPrimary and Secondary ColorsBelow is a partial set of primary and seconday colors from University of Minnesota colors
| ||||||||||||||||||||||||||||||||||||
