Introduction to HTML

Terms and Topics

• Markup - A type of ASCII text document which marks or decorates content with tags that designate what that content or section of represents. Markup documents are usually not meant for human consumption, but are meant for human creation and publishing. A client application will usually read in a markup document and render it for human consumption.
• Elements - Units or markup; either text or nodes.
• Hierarchy - The notion that certain items main contain other items, and control attribute of sub items.
• Inheritance - The notion that elements  that are contained by higher level elements derive settings from their superiors.
• Node - A unit of markup content, a node is a single element. It has only one parent, and can have many or no children.
• Parent - The item up one level in a document's hierarchy. A node can have one and only one parent.
• Child - The sub nodes of an element, both direct and in any sub node's content. A node can have many or no children.
• Tags - Containers for content, analogous to nodes. Tags may contain other tags, text content, or no content. Tags must always have a beginning and an end.
• Attributes - Items in a tag that designate properties, or refinements to a tags definition. Attributes are properties which may be inherited from a parent.
• Syntax - The proper method of content format, based on well-defined rules. Syntax can be correct if it follows all rules, or incorrect if it does not.
• Semantics - The proper method of order to a document. For example, only certain content can be nested within other content. Syntax and semantics, for the most part, are mutually exclusive, therefore a document can be syntactically correct and semantically incorrect at the same time.
• Well-formed - A document is well formed if it is semantically and syntactically correct.
• DOM - Document Object Model. DOM is the manner in which browsers interpret a tree markup structure such as HTML. DOM retains all information about a document, such as hierarchy and inheritance, but is programmatically accessible.
• HTML - Hyper Text Markup Language. A subset of markup which incorporates hypertext links, which are methods of linking one document to another. HTML is meant for electronic content formatting for web client consumption.
• XML - Extensible Markup Language. A type of markup meant for the description of raw data in a hierarchical format. Not meant for the format of any particular type of data, and not inherently meant for consumption by any certain type of client.
• XHTML - A type of HTML which abides by the syntax rules for XML, thus making it a subset of XML. XHTML still retains most of HTML facilities, only modified to ensure XML compliance.
• Source -The ASCII text of a document. Source is interpreted for use by an end user, and usually will not look anything like it's user consumable version.
• Block Element - A logical unit of grouped HTML content.
• Relative path - A URL which points to web content in relationship to it's enclosing HTML page. Thus, if the enclosing page moves, this URL may in turn be broken.
• Absolute path -A URL which fully qualifies a path to content. It will include all aspects of a URL, domain and path.
• Site root - The main point of entry for a web site. This is usually the base location, past the domain name, where site documents are located.
• Hexadecimal color - A way of describing a color in hexadecimal value. Represents RGB (red, green, and blue) in a single numeric value. For example, white is hexadecimal FFFFFF and black is 000000. The first two digits represent red saturation, the middle two are green, and the last two are blue saturation.

Tools

• Chrome developer tools

Reading

• HTML & XHTML: The Definitive Guide, 6th Edition : Chapter 2. Quick Start
• HTML & XHTML: The Definitive Guide, 6th Edition : Chapter 3. Anatomy of an HTML Document
• HTML & XHTML: The Definitive Guide, 6th Edition : Chapter 6. Links and Webs

Reference

• HTML Color Codes
• HTML Help Sheet. Panic Over.
• Relative URLs

Materials

• Word Document Essay

Notes

Markup

• Markup is a specialized document format meant for information translation and dissemination. There are many types of markup, SGML, HTML, XML, and XHTML are just a few.

XML

• XML is a subset of SGML, it defines nested data structures using a tag-based format.
• XML is very pervasive in modern web development. HTML has migrated to an XML compliant format in it's move to XHTML.
• HTML is not XML. HTML includes unclosed nodes, nodes without parents, etc. XHTML resolves these inconsistencies.

The anatomy of a tag

• Tag names are structures that begin with and open (<) token and a close token (>) . Tags begin and end with a tag name definition.

• A tag is analogous to a node.
• A tag may contain text content or another node or nodes
  • Text content in a node: <myTag> Text Content </myTag>
  • A tag with a sub tag or sub node : <myTag><innerTag> </innerTag></myTag>
    • In the above example, myTag is the parent of innerTag, and innerTag is a child of myTag.
• Tags may have property settings, know as attributes
  • <myTag attribute1="something" attribute2="something"></myTag>
    • Only open tag definitions may have attributes.
    • An attribute may only be listed once, for example <myTag att="1" att="2"></myTag> is not valid
• Tags should close all inner tags opened within the tag before closing itself
  • For example, this is invalid : <a><b></a></b>
  • This is valid: <a><b></b></a>
• Tags that do not contain content may close themselves
  • For example, <myTag></myTag> could also be written as <myTag/>
• tag names are case sensitive in XHTML, but not in HTML
• tag attributes are always case sensitive

HTML markup

• A bare bones HTML document

<html>
<head>
<title></title>
</head>
<body>

</body>
</html>

• All HTML documents contain a html, head, title, and body tag.

Common HTML Tags

• html
  • All html documents must begin and end with a html tag. Therefore, html is the root node of all html documents, and all other content are child nodes.
• head
  • Contains informational content not shown to the user but used by the browser for page rendering
• title
  • the page title that is displayed in the browser window chrome
• body
  • The main "meat" of a HTML document. Contains all content intended for display.
• headers (h1, h2, h3)
  • Breaks documents into well-defined sections
• line break (br)
  • Places a return in text content
• strong (bold text)
• paragraph (p)
• italics (i)
• comments (<!-- -->)
  • Anything between the comment begin and end tokens is not rendered in the page and therefore not visible to the end user
• span (display-less grouping of elements)
• div (display based grouping of elements)

Special Characters

• Used for XHTML compliant text values
  • < (&lt;)
  • > (&gt;)
  • & (&amp;)
  • [space] (&nbsp;)
• Eventually, tools like Dreamweaver will automatically escape your text

Absolute URL

• http://domain/path_to_resource/resource_document_name
• Good for documents whose location never changes

Relative URL

• All links are located relative to your site root
• Good for linking to items within your site
• Path elements
  • nothing - current directory
  • / - site root
  • ./ -  current directory
  • ../ - directory up

Index page

• When no absolute document name is given, this is the page that the server will display by default. Also known as the default page. This is a web server setting, and it varies from host to host.
• Some common names are index.html, index.htm, default.htm, index.php
• ACCAD web servers use index.html and index.php as the default index page names

Anchor tags (a tags or hrefs)

• Links are the base interactive elements of the web. Links are why XHTML can even be referred to as an "interactive" media, since traversing links requires user interaction.
• Example : <a href="http://www.yahoo.com">Link to Yahoo</a>
  • The text content of the anchor tag is displayed to the user as the link text
  • The href attribute is the location that the anchor points to
  • The title attribute is the logical or abbreviated name for the link
  • The target advises the browser to open the link in the same window (_self) or a new window (_new)
  • Anything placed within the anchor tag will be "hot", meaning that the user may click on the content to access the target URL
  • acceskey and tabindex attributes allow for quick keyboard shortcuts to links

img tag - inline image display

• Browsers support inline display of JPEG and GIF images.
  • Some browsers supports PNG images, but this support is buggy in Internet Explorer for Windows.
• Example: <img src="img.gif" />
• src attribute is a url that points to the image file that will be displayed inline in the page rendering
• align attribute takes top, middle, bottom parameters. This attribute suggests how the image should align with the adjacent text in the page.
• When embedding an image in an anchor link, sometime the image will display a border. This border can be removed by setting the img tag's border attribute to 0.
  

Ordered/Ordered Lists

• Great way to organize links. Used most often for site navigation lists.
• Ordered list: shows links in numeric order
• Unordered list: Shows links in bullet list, without order

Tables

• Used to render tabular data
• <table> - Defines a table body
• <th> - Table header
• <tr> - Table row
• <td> - Table column
• Example: