L. Anne Spencer (c) 2001 Basic Web Design Document, text, & layout formatting tags & attributes
L. Anne Spencer (c) 2001 HTML Features Hyper Text Markup Language Syntax or rules for display of documents For use with Web browsers Code in text-only documents (using an “editor”) Linked pages Cross platform Browser display controlled by use of document “tags”
L. Anne Spencer (c) 2001 HTML Tags Usually come in pairs that enclose the text to be formatted Control all aspects of the visible page Document formatting tags Layout formatting tags Text formatting tags Navigation tags Graphics and multimedia tags Input tags
L. Anne Spencer (c) 2001 HTML Tags Usually come in pairs that enclose the text to be formatted Control all aspects of the visible page Document formatting tags Layout formatting tags Text formatting tags Navigation tags Graphics and multimedia tags Input tags We’ll start with these
L. Anne Spencer (c) 2001 Document Formatting Tags Set up the overall document structure Identify the file as a Web browser file Establish the sections of the document (much like the header, footer, and margins of a Word document)
L. Anne Spencer (c) 2001 Document Formatting Tags … Identifies the beginning & ending of the Web page … Housekeeping stuff that includes Title bar for window (required) Meta keywords for search bots JavaScript functions
L. Anne Spencer (c) 2001 Document Formatting Tags … Specifies the text for the window’s title bar … The visible page itself
L. Anne Spencer (c) 2001 Layout Formatting Tags Define how the text on the page is organized Paragraph separators Paragraph indentations Line spacing Horizontal line dividers
L. Anne Spencer (c) 2001 Layout Formatting Tags … Specifies beginning & ending of paragraph text Allows for extra room between paragraphs … Sets off long quotes or citations. Usually rendered as indented on both sides.
L. Anne Spencer (c) 2001 Layout Formatting Tags Forces a single-line break in the text instead of adding extra spacing between paragraphs Does not have a closing tag Creates a horizontal line divider between lines of text Does not have a closing tag
L. Anne Spencer (c) 2001 Text Formatting Tags Define how the text looks on the page Bold, italic, underlined … Predefined styles (such as text used for headings, footnotes, bibliography)
L. Anne Spencer (c) 2001 Text Formatting Tags … … (etc.) Specifies style, size, or weight of font … Creates graduated headings from h1 to h6
L. Anne Spencer (c) 2001 Text Formatting Tags … Used for addresses, authorship, etc. Usually rendered as small italics … Used for short quotes or citations Usually rendered as italics
L. Anne Spencer (c) 2001 Text Formatting Tags … Displays text as superscript in smaller font … Preserves monospacing of text – especially useful for material in tabbed columns
L. Anne Spencer (c) 2001 Text Formatting Tags … Specifies face, size, color of font This text formatting tag has no effect on the format of text unless attributes are specified
L. Anne Spencer (c) 2001 Tag Attributes Many tags have attributes which are specified in the “on” tag. Common attributes are Color Size Width Align
L. Anne Spencer (c) 2001 Tag Attributes Observe the partial page displayed below. Horizontal lines Font specification
L. Anne Spencer (c) 2001 Tag Attributes The attribute is in quotation marks. Mary Student Baker University Colors are frequently designated as hexadecimal numbers preceded by a # sign
L. Anne Spencer (c) 2001 Special Characters & Followed by code name or number of special characters Examples   (one blank space) © (copyright symbol)
L. Anne Spencer (c) 2001 Comment Tags Non-printing explanation about what the HTML code does These tags are especially helpful when dealing with input forms and JavaScript elements