HTML
- HTML: Hypertext Markup Language
- What is hypertext?
- What is Markup?
- Key idea was for content (information) to be marked up with the structure of the document
and let the client present it appropriately. (Monitor, teletype, command-line)
- Give brief introduction to HTML
- Start with text document with a heading, a couple paragraphs, and a list
- Add
<p>, <ul>, and <li> tags.
<html> surrounds entire document<head> contain metadata
- Title
- Info for search engines
- CSS
- Javascript
- Main content goes in
<body> tag
- Ideally, we separate content from presentation.Why?
- Different technologies (monitor, command line)
- Some presentation crept into HTML (think “bold”, “i”, “center”, etc.)
- In light of this principle, <strong> is better than <b>, <em> is better than <i>, etc.
- People weren’t happy with the way the browsers presented things; Wanted more control.
- Addressed (mostly) with CSS.
- Now that web pages are almost exclusively viewed in web browsers (no more text),
why bother with separation of structure and content?
- Can easily apply the same look and feel to many pages.
- Easy to “reskin” pages
- May all be screens; but, screens are of very differnt sizes now (mobile, tablet, desktop)
- Terms
- Tag: Just the tag itself:
<li>
- Element: The entire “subtree”
<li>, <\li>, and everything between
- Attribute: The
href in <a href='foo.com'>
- Node: Everything is a type of node — Even the plain text between
<p> tags.
- inline vs block tags
- Block tags effectively begin a new paragraph. (Begin on a new line and take full width available)
- inline tags are, well, inline. (Do not begin a newline and take up only as much space as necessary)
<div> is the generic block tag: Used primarily as a placeholder for styling.<span> is the generic inline tag: Used primarily as a placeholder for styling.
- Misc
<img><href>- absolute vs. relative file paths
- Which is better? Why?
- Relative, because then they don’t break if you move the document.
<, >, - Comments:
<!-- this is a comment ->
- HTML derives from SGML – a system for defining markup languages like HTML.
- SGML contains
- “Declaration” of characters and delimiters (e.g., spaces / newlines)
- “Document Type definition” (DTD) – what the elements are, their attributes, and where they can be used
(e.g, where they can be nested)
- The semantics of the elements (i.e., what
<ul> means)
- SGML provides concepts like
- elements (e.g., an entire paragraph, list, etc)
- attributes (e.g., the “href” in the anchor element)
- escape mechanisms: \&\lt; \&\amp;
- SGML is complicated, partly because it is flexible
- no closing
</li>
<br> is fine (as opposed to <br/>)
- Some sources that HTML “descends from” SGML. It seems to me more like HTML is an example
markup language that could be defined using SGML:
- XML is also based on SGML, but is much more precisely structured.
<br> is fine in HTML; but, XML will insist upon <br/> (i.e., closed)- In HTML,
</li> not required
- What are the advantages and disadvantages of HTML vs XML?
- HTML is more forgiving: Easier to write stuff that works
- XML is more precise: Easier to write parsers.
- HTML 4.0 ==> xhtml
- Tried xhtml: html with precise requirements. Didn’t stick. Got HTML5 instead
- With the maturity of CSS, HTML 5 refocused on structure over presentation.
- It introduced more tags to better describe the structure of a document, including:
<header><nav><section><article><aside><footer>- (Previously, this was done with
<div> tags and CSS)
- HTML (before 5) also tags with semantic meaning
<strong> instead of <b><em> instead of <i>- These tags describe the semantic meaning of the section rather than spelling out how to style it.
- Given structure vs. presentation, when should Tables be used?
- Only to display tabular data (i.e., when the structure of the data itself is a table)
- If you are simply trying to style a page, use CSS.
- Notice that HTML/XML structure forms a tree:
- head
- body
- paragraph
- h1
- ul
- paragraph
- HTML is not the only markup language. What are some others?
Tutorial: http://www.w3schools.com/html/default.asp