HTML

From DesigningPatterns

Jump to: navigation, search

Contents

General Characteristics

  • A markup language simply is a way to describe how a document should be structured, formatted, and displayed. The concept originally was developed in the publishing industry (not at all in the context of computers) as a way for publishers to "mark up" a manuscript with instructions. HTML brought this concept to web pages.
  • HTML is a markup language originally defined by SGML and more recently by XML (XHTML).
  • HTML is described as an SGML language by this DTD.
  • HTML is an embedded markup language, as the mark up is inlined into the content.
  • HTML is case insensitive, but XHTML is not (all tags must be lowercase).
  • Information about the document goes into the HTML header section, but no content.
  • A tag is a command, while an element is a tag and what the tag is operating on. Attributes modify the interpretation of tags.
  • Style tags can be either descriptive or physical. Descriptive tags describe a given piece of content (as a citation or code fragment, for example) and instruct the browser to display the content appropriately. Physical tags, on the other hand, instruct the browser to display content in a particular way (i.e., in bold or underline). Descriptive tags are preferred because they are self-documenting, and they allow user customization of content display (so a user could alter how code fragments are displayed, for instance).
  • Frames either are defined as rows or columns.
  • Frames are not supported by XHTML 1.1, but there is not really any good replacement out there yet (although the W3C is working on XFrames).
  • Table data cells can contain virtually anything (including text, images, other tables, etc.).
  • Table colors or background images can be specified for the whole table, for specified rows, for specified columns, or for specified cells.
  • HTML is a structural markup language (that is, its original purpose was structuring text for human consumption on a computer). Later, descriptive (describing the content) and stylistic (describing how the content should be display) commands were added.
  • XML is a purely descriptive language.
  • CSS is a purely stylistic language.
  • CSS was created in order to allow all stylistic elements to be eliminated from HTML.
  • XHTML is much more strict than HTML, but it is unclear how many browsers offer good compatibility.
  • XHTML is extensible (in fact, it stands for eXtensible HTML).
  • XHTML body content is divided into blocks; all text (and so all text elements) must appear within a block. Blocks are created by paragraph, div, heading, etc. tags.
  • There are many kinds of URLs that can be specified in the href attribute of a hyperlink tag (<a>). Common ones include: http, javascript, ftp, file, mailto, telnet
  • Non-xhtml can be embedded in an xhtml document. Examples include images, Java applets, movies, audio, etc.

Document Type

The document type specified at the top of an html/xhtml document references a dtd. To paraphrase W3C, the dtd describes in precise, computer-readable language, the allowed syntax and grammar of the HTML, or XHTML markup. Example DTDs are: HTML Strict, HTML Transitional, HTML Frameset, XHTML Strict, etc.. See here for a description of the different DOCTYPE values.

Example: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Should I use XHTML Strict, XHTML Transitional, or XHTML Frameset? Presentational tags deprecated in XHTML Transitional, are prohibited in XHTML Strict. If you can specify all your presentation in css), use XHTML Strict. If you need to use frames, use XHTML Frameset (XHTML Strict and XHTML Transitional do not allow frames).

The DOCTYPE tag has also been overloaded to specify the presentation mode used by the browser to render the page. Certain css rules are rendered differently depending on the mode. The browser presentation modes are "quirks", "standard", and in some cases, "almost standard". For further details, see a description of quirks mode. For the most part, if a full DOCTYPE tag (dtd included) is present, and the DOCTYPE tag is the first line, the browser presentation mode will be standard (or almost standard), not quirks!

The DOCTYPE declaration should always be the first line in an XHTML document. This is important, as in IE 6, if there is a line prior (including the xml line), IE 6 will render the page in quirks mode regardless of the DOCTYPE.

Guidelines

  • XHTML should be used to present content, not for precision formatting. The content, not the formatting, should be the focus.
  • The most important part of presenting content is describing and structuring the content correctly.
  • Specifiying the precision formatting, or style, should be done via style sheets.
  • Use a heading at the top of the page to duplicate the title, so that the title will be visible if the page is printed (research a way to automatically do this so that the duplication is eliminated).
  • If you include a hyperlink in html which specifies a directory name without a final file name, it is good form to still include the final slash after the directory. This is for clarity and performance reasons.
  • Height and width should be specified for all images because it allows the browser to set aside space for the image before it is loaded, rather than having to redraw the page to fit each new image as it is loaded.
  • It is good to define a table width as a percentage of the screen. If you need to define a table width to a fixed set of pixels, do so consistently. These days, the default monitor is probably 800 pixels wide. This means your tables should be no wider than 750 pixels.
  • The CSS property line-height is an inherited value. When specifying this, specify it without any units (http://www.w3.org/TR/CSS2/visudet.html#line-height). This will designate it as a multiplier, from which the line-height is computed. Otherwise, the exact line-height you have specified will be inherited (and make no sense when you have sub-tags with different font sizes).

Minimum Document

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>the document title goes here</title>
    <-- the rest of the header info goes here -->
  </head>
  <body>
    <-- the content of the document goes here -->
  </body>
</html>

CSS

The CSS Specification is a great CSS reference for understanding the details of the CSS language. For a comprehensive list of properties complete with their definitions, see the CSS Specification Appendix F: Full Property List. For a more user-friendly list complete w/ examples, see the W3Schools CSS Reference.

Quick Intro

A css rule is composed by a selector(s), followed by a declaration block. The declaration block contains a list of property name and value pairs. 

h1, h2 {color: green; background-color: yellow }

HTML class attributes can be specified in CSS selectors as .class_name, and id attributes as .id_name. A specific html tag with a specific class or id can also be specified in a selector. Eg. 

h1.class_name { color: purple }   /* specifies all h1 tags w/ class class_name: <h1 class="class_name"> */
h2#id_name { color: black }       /* specifies all h2 tags w/ id id_name: <h2 id="id_name"> */

The notion of descendants can be captured in CSS selectors as well. Eg. If you want to set the color of all html paragraph elements to blue inside the div whose class is name "class_name". 

div.class_name p { color: blue }

There are many more types of selectors (child selectors, adjacent sibling selectors, etc.). See the CSS Specification's section on selectors for a comprehensive list.

CSS includes a large number of properties. Each property has a definition (See CSS Specification Property Definitions). This describes things such as the property's default value, possible values, whether the property value is inherited by the children of an element, etc. Example: 

Property Name : background-color
Values        : <color> | transparent | inherit 	
Initial Value : transparent 	  	
Applies To    : All HTML Tags
Inherited     : no

See CSS Specification Appendix F: Full Property List for a full list.

The style STYLE of a given HTML element ELEMENT is loosely calculated as follows:

  • Calculate the inherited properties of ELEMENT. Do this by traversing the document tree from the root down to the ELEMENT, applying the inherited properties of each element in order to STYLE.
  • Get a list of all of the css rules who's selectors match ELEMENT.
  • Assign a specificity (A-B-C-D) to each of the matching selectors. See CSS Specification - Calculating a selector's specificity for instructions.
  • Apply the css rules to STYLE in order from least specificity to highest specificity.

The specificity values for a given html element can be quite unintuitive to a newcomer to CSS (or at least to me :)). Lets walk through an example.

Example CSS rules: 

    body {
    font-family: Verdana;
    color: red
    }

    .page p {
    color: blue;
    line-height: 30px;
    }

    .title_class {
    color: green;
    background-color: yellow;
    }
    
    #title_id {
    color: orange;
    }

Example HTML body: 

<body>
  <div class="page">
    <p class = "title_class" id="title_id">Hello world!</p>
  </div>  
</body>

Lets calculate the style of the HTML paragraph element referenced above.

The list of HTML antecedents of the paragraph element in the document tree, in order from the root to the paragraph element, is: body, div. The aggregate inherited rule is simple, as the div tag has no matching rules, and both font-family and color are inherited properties. 

    font-family: Verdana;
    color: red

The list of selectors that match the paragraph element are (in order from least to most specific): 

.title_class           //Specificity: 0-0-1-0
.page p                //Specificity: 0-0-1-1
#title_id              //Specificity: 0-1-0-0

Now, lets go through each of the rules (starting with the aggregated inherited css rule, and then iterating through each of the rules of the matching selectors above. For each rule, lets apply it to the HTML paragraph element's style. The resulting style of the paragraph element is: 

    font-family: Verdana;
    line-height: 30px;
    background-color: yellow;
    color: orange;

In the case where two matching selectors have the same specificity, the order of application is determined by the order of the rules in the css file. Note: If the div element's class tag ("page") had been an id tag instead, the corresponding selector (#page p) would've had the highest specificity (0-1-0-1)!

Tips

  • A floated element doesn't register the height that it takes up with its parent's element. Thus, if you have a div A containing a div B, where B has a specified height and is floated, div B will not be drawn inside div B. A clear after div B fixes this. 
<style type="text/css">
#A {
  border: 1px solid red;
}

#B {
  float: left;
  height: 50px;
  background: pink;
}

.clr {
  clear: both;
}

</style>   

<div id="A">
  <div id="B">
    Left Title Bar!
  </div>
  <div class="clr"></div>
</div>
  • You can specify a css selector that only matches nodes that have 2 classes defined. Eg. the css selector div.box.featured will match the following element 
    <div class="box featured">Box contents</div>
    . However, see the article Multiple class selectors do not work in IE6 for a related caveat.

Browser Differences

Tables

  • border-spacing is not supported by IE6. Thus, add the html cellspacing attribute to the table element to achieve the effect.

Web Design

Fonts

  • Fonts are broken down into serif and sans serif fonts.
  • Each OS comes with a different list of default fonts. This is why it is important to have list a number of fonts instead of 1 when specifying a font in css (eg. font-family: Arial, Helvetica, Sans-Serif). Here, Arial is a Microsoft font; Helvetica a Mac font.

Here are a few references on the subject:

Links

Links

TODO

  • XHTML places many constraints on where certain tags may appear, as well as which tags may be parents or children of other tags.
  • Read and understand this (Javascript frames).
  • Learn about CSS frames.
Retrieved from "http://wiki.designingpatterns.com/index.php/HTML"
Personal tools