Linear structure vs augmented structure vs indexed structure
advertisement
Quick Review: 1- Markup languages are used to identify elements within a document and indicate to a displaying software how that element should be treated, stored, displayed, and manipulated. 2- Elements are objects within the document such as a block of text. 3- Tags are a part of the HTML that identifies the element in the text. 4- Tags can be either two-sided or empty-tags. 5- Two sided tags have an open tag <element> and a close tag, which is indicated by a forward slash </element> 6- Empty-tags must follow empty-tag rules, by placing a space after the element name and then closing the tag with a forward slash: <element /> 7- Element attributes are placed in the open tag for two-sided elements. 8- Element attributes must be placed in quotes. 9- An element can have multiple attributes, but they must be separated by white space. 10- HTML documents have the following basic structure: <html> <head> <title> </title> </head> <body> body content </body> </html> 11- The root <html> tag indicates to the parsing software that the file is written in HTML. The closing </html> tag indicates the end of the document and should not be followed by any other information or tags. 12- The <head> section contains information about the document, such as its title, any metadata, or any styles applied to the document. Information in this section will not be displayed on the page. 13- The <body> section contains the content displayed by the web browser. The <body> element is placed after the <head> and no elements can be inserted between the <head> and <body> elements. 14- There are Block Level and Inline markup elements 15- Inline elements are nested inside block level elements. For example: A bold sentence goes within a paragraph element. HTML in-depth More about the primary HTML elements: <head> Document information provided to the displaying software. Only the <title> information will be displayed to the user o Displayed in browser’s title bar. Only the following elements may be nested within the <head> element (elements in bold indicate head elements most commonly used): o <base> Original URL for a moved document o <basefont> Sets a font for the document, overrides browser default font o <bgsound> IE only, plays a sound when page is loaded o <isindex> Deprecated – provided textfield to the user o <link> Defines a relationship between two documents/files o <meta> Provides meta-information, such as search terms o <nextid> Deprecated – no longer used o <object> Supplies the browser with information to load and render an object not native the browser or document. Some examples are: Flash documents Java applets A plugin o <script> Contains executable program scripts or references to a file containing program scripts. o <style> Embeds style sheet instructions for formatting the document body. o <title> Document title displayed to the user Label placed in the bookmarks menu when the page is book marked. Titles Should be short and descriptive The preferred length of 60 characters or less Examples of good titles: <title>ISC325 paper on document parsing</title> <title>Dan’s Devil sticks electronic catalog</title> Examples of bad titles: <title>Introduction</title> <title>All you wanted to know about frogs, including color vs toxic information, croaking sound databases, primary species of insects consumed, average size and weight charts, mating calls and times, and uses in popular culture. </title> <meta> <meta> tags are empty tags Optional elements Provides information about the document Document may have any number of <meta> tags Two common uses of the <meta> tag: <head> <meta name=”author” content=”J. Doe” /> <meta name=”keywords” content=”word1, w2, w3, etc” /> </head> <body> Contains the content of the page Part of the document displayed to the user Body attributes are used to modify or override the default display of the document in order to change things like the color of the links, text, or set a background image. A list of <body> attributes: alink background bgcolor bgproperties Bottommargin leftmargin link marginheight marginwidth nowrap rightmargin scroll text topmargin vlink Example: Links can have three states: Unvisited, active, and visited. Each one of these links has a color to represent its state to the user. By changing the body attribute, it is possible to override the default link colors by indicating new ones. Example code for a <body> attribute that changes the color of a visited link: <body vlink=”#FF0000”> Character and Entity references HTML provides two mechanisms for representing a symbol. Character references (Unicode location) o UTF-8 (default Unicode set) o Other sets: ASCII Latin-1 ISO 8859-1 An example of a character reference for the “<” less-than sign: &#60; = In Text: A<B “<” In Code: A &#60; B Entity references (special semantic name) o Predefined names XHTML defined via an Entity Catalog An example of an entity reference for the “<” less-than sign: &lt; = In Text: A<B “<” In Code: A &lt; B White Space HTML ignores white space unless specified otherwise. White space is: Two or more spaces between words Tabbed Line breaks in text spaces Inserting white space: Spaces can be inserted via the entity reference: &nbsp; Spaces can be included using the <pre> tag. <pre> This preserves the space</pre> Final comments on page design: Some design principles: Visibility of information and controls Feedback Constraints Consistency Affordance Always keep the user in mind and ask yourself these three questions as if you were the user. 1- Where am I? 2- What’s here? 3- Where can I go?
