Line break: <br>

forces a line break in the middle of a block element (inline)

<p>The Lord is my shepherd, I lack nothing.<br /> He makes me
lie down in green pastures,<br />
he leads me beside quiet waters,<p>

• Warning: Don't over-use br (guideline: >= 2 in a row is probably too many)

Phrase elements : <em>, <strong>

em: emphasized text (usually rendered in italic)
strong: strongly emphasized text (usually rendered in bold)

<p>
	HTML is <em>really</em>,
	<strong>REALLY</strong> fun!
</p>

• as usual, the tags must be properly nested for a valid page

Nesting tags

<p>
	HTML is <em>really,
	<strong>REALLY</em> lots of</strong> fun!
</p>

• tags must be correctly nested
• (a closing tag must match the most recently opened tag)
• the browser may render it correctly anyway, but it is invalid HTML
  • (how would we get the above effect in a valid way?)

Comments: <!-- ... -->

comments to document your HTML file or "comment out" text

<!-- My web page, by Anthony Aardvark
     CPS353 Fall 2012       -->
<p>Computer science courses are <!-- NOT --> a lot of fun!</p>

• many web pages are not thoroughly commented (or at all)
• still useful at top of page and for disabling code
• comments cannot be nested and cannot contain a --

Unordered list: <ul>, <li>

ul represents a bulleted list of items (block)
li represents a single item within the list (block)

<ul>
	<li>No shoes</li>
	<li>No shirt</li>
	<li>No soup for you!</li>
</ul>

More about unordered lists

• a list can contain other lists:

<ul>
	<li>Tribes:
		<ul>
			<li>Levi</li>
			<li>Judah</li>
			<li>Benjamin</li>
		</ul>
	</li>
	<li>Apostles:
		<ul>
			<li>Peter</li>
			<li>John</li>
		</ul>
	</li>
</ul>

Ordered list: <ol>

ol represents a numbered list of items (block)

<p>RIAA business model:</p>
<ol>
	<li>Sue customers</li>
	<li>???</li>
	<li>Profit!</li>
</ol>

Definition list: <dl>, <dt>, <dd>

dl represents a list of definitions of terms (block)
dt represents each term, and dd its definition

<dl>
	<dt>newbie</dt> <dd>one who does not have mad skills</dd>
	<dt>own</dt> <dd>to soundly defeat
		(e.g. I owned that newbie!)</dd>
	<dt>frag</dt> <dd>a kill in a shooting game</dd>
</dl>

Quotations: <blockquote>

a lengthy quotation (block)

<p>As Lincoln said in his famous Gettysburg Address:</p>
<blockquote>
	<p>Fourscore and seven years ago, our fathers brought forth
		on this continent a new nation, conceived in liberty, and
		dedicated to the proposition that all men are created equal.</p>
</blockquote>

Inline quotations: <q>

a short quotation (inline)

<p>Quoth the Raven, <q>Nevermore.</q></p>

• Why not just write the following?
  <p>Quoth the Raven, "Nevermore."</p>

HTML Character Entities

a way of representing any Unicode character within a web page

• Complete list of HTML entities (How would you display the text & on a web page?)

HTML-encoding text

<p>
	<a href="http://google.com/search?q=aardvark&ie=utf-8">
		Search Google for Aardvark
	</a>
</p>

• To display the link text in a web page, its special characters must be encoded as shown above

Computer code: <code>

a short section of computer code (usually shown in a fixed-width font)

<p>
	The <code>ul</code> and <code>ol</code>
	tags make lists.
</p>

Preformatted text: <pre>

a large section of pre-formatted text (block)

<pre>
         Steve Jobs speaks loudly
            reality distortion
           Apple fans bow down
</pre>

      Steve Jobs speaks loudly
	 reality distortion
	Apple fans bow down

• displayed with exactly the whitespace / line breaks given in the text
• shown in a fixed-width font by default
• how would it look if we had instead enclosed it in code tags?

Web page metadata: <meta>

information about your page (for a browser, search engine, etc.)

<meta http-equiv="Content-Type"
         content="text/html; charset=iso-8859-1" />
<meta name="description"
   content="Authors' web site for Building Java Programs." />
<meta name="keywords" content="java, textbook" />

• placed in the head section of your HTML page
• meta tags often have both the name and content attributes
  • some meta tags use the http-equiv attribute instead of name
• using a meta tag Content-Type explicitly specifies what kind of content is in the web page
  • stops validator "tentatively valid" warnings

Favorites icon ("favicon")

<link href="filename" type="MIME type" rel="shortcut icon" />

<link href="yahoo.gif" type="image/gif" rel="shortcut icon" />

• the link tag, placed in the head section, attaches another file to the page
  • in this case, an icon to be placed in the browser title bar and bookmarks
• IE6: Doesn't work; must put a file favicon.ico in the root of the web server (info)

HTML tables: <table>, <tr>, <td>

A 2D table of rows and columns of data (block element)

<table>
	<tr><td>1,1</td><td>1,2 okay</td></tr>
	<tr><td>2,1 real wide</td><td>2,2</td></tr>
</table>

• table defines the overall table, tr each row, and td each cell's data
• tables are useful for displaying large row/column data sets
• NOTE: tables are sometimes used by novices for web page layout, but this is not proper semantic HTML and should be avoided

Table headers, captions: <th>, <caption>

<table>
	<caption>My important data</caption>
	<tr><th>Column 1</th><th>Column 2</th></tr>
	<tr><td>1,1</td><td>1,2 okay</td></tr>
	<tr><td>2,1 real wide</td><td>2,2</td></tr>
</table>

• th cells in a row are considered headers; by default, they appear bold
• a caption at the start of the table labels its meaning

Web Standards

• It is important to write proper HTML code and follow proper syntax.
• Why use valid HTML and web standards?
  • more structured, parse-able, and secure language
  • more interoperable across different web browsers
  • more likely that pages will display correctly in the future
  • can be interchanged with other XML data: SVG (graphics), MathML, MusicML, etc.

W3C HTML Validator

<p>
	<a href="http://validator.w3.org/check/referer">
		<img src="http://validator.w3.org/images/valid_icons/valid-xhtml10g"
		alt="Validate" />
	</a>
</p>

• validator.w3.org
• checks your HTML code to make sure it follows the official HTML syntax
• more picky than the browser, which may render invalid HTML correctly

What is HTML 5?

• a new W3C standard version of the HTML markup language
• successor to HTML 4.01 and XHTML 1.1
• balance between too-loose-ness of HTML 4 and too-strict-ness of XHTML
• reduces the browser's need for plugins to display content, e.g. multimedia
• make web content richer, semantically meaningful, descriptive, accessible
• more easily enable the web as an application platform (Web 2.0)

What's new in HTML 5?

• semantic tags: nav, aside, header, footer, section, aside, article
• Forms 2.0: sliders, search bars, color/number/email/url/date/time, placeholders, ...
  
• audio and video tags for embedding multimedia
  
• canvas tag for drawing 2D shapes in HTML/JS (like DrawingPanel) (ref 1, 2, 3)
  

What's new, continued

• semantic web / microdata attributes: rel="...", itemscope, itemtype, itemprop
  
• accessibility features ("ARIA")
• embedding of rich XML-like formats such as SVG vector graphics
• other stuff: offline apps, geolocation, cross-document messaging, MIME type registration, history management, ...

File formats

• some differ in features (animation, 5.1 stereo, transparency)
• many multimedia formats use compression to reduce file size
  • compression algorithms are also called codecs (list)
  • some compression algorithms are "lossless", others are "lossy"
• some formats are patented (unusable in free software)
• some formats are encrypted to protect information inside
  • Digital Rights Management (DRM) restricts what user can do with file
  • can be broken: DVD (DeCSS), HD DVD (09f911029d74e35bd84156c5635688c0)
• some formats are streaming (can play while downloading)

Image file formats

• JPEG : uses "lossy compression"; small file size; good for photos
• GIF : 256 colors; LZW run-length encoding lossless compression
  • allows transparency (can see behind parts of image)
  • possible to create animated GIFs
• PNG : free format created to avoid patent and color issues in GIF format; lossless compression, transparency
• others: TIFF, BMP
• image format comparisons: text, photo, PNG

Raster and vector graphics

• the image formats on the previous slide are raster or bitmap formats
  • they describe the pixels that should be drawn on the screen
• vector graphics formats such as SVG describe shapes/lines rather than pixels
  • advantage: infinite precision; good for zooming, printing
  • disadvantage: not supported on all platforms; computationally expensive

Audio file formats

• MP3 : uses lossy compression that eliminates inaudible sounds
• AAC : Apple's iTunes audio file format
• WMA / ASF: Microsoft Windows Media Audio format
• OGG : Linux hippie audio/video format
• RA / RM / RAM : Real Audio format
• other formats: WAV (MS), AU (Sun), AIFF / SND (Apple), FLAC
• Sequenced Music: MID, MOD

Video file formats

• MPEG : Motion Picture standard video format
  • DVDs are encoded using MPEG-2
  • HD DVDs are often compressed with MPEG-4 (H.264) codec
• MOV : Apple's QuickTime movie format
• WMV / ASF : Microsoft's Windows Media Video format
• AVI : classic Microsoft video format that can be encoded in many ways
• SWF / FLC : Macromedia Flash multimedia format
• RV : Real Video format

Flash

• format for graphics, video, audio developed by Macromedia/Adobe
• widely used for many reasons:
  • supported in most major platforms/browsers
  • lightweight
  • can produce impressive interactive animated content
• downsides: proprietary; editing software costs money (viewer is free), does not work on Apple's iOS
• examples: Duck Hunt, Homestar Runner

Linking to multimedia files

<a href="video.avi">My video</a>

• browser has a list of default applications to associate with each file type
• if it has an associated app, it will run it
• some file types are displayed within the browser using plugins
• if it doesn't know what to do, it will just download the file

File types and browser plugins

• plugin: helper app launched within the browser to view certain file types
  • examples: Flash player, QuickTime, Windows Media Player, Acrobat Reader, Java
• about:plugins URL will show you list of plugins in Firefox
• enter preferences, then choose Content, File Types, Manage...
  • can change which app/plugin will be used to open particular file types

HTML 5 embedding a video

<video src="video.ogv" width="425" height="350"></video>

• yes, please
• it'll also be easy to manipulate (play/pause/stop/etc.) the video via the JS DOM
• one drawback: drama over codecs such as MPEG 4 / H.264, Ogg Theora / VP3, WebM, AVI

Embedded objects: <object>

<object data="video.avi" type="video/avi"></object>

• this is how you used to (still) embed a video prior to HTML5
• attributes: archive, classid, codebase, codetype, data, declare, height, name, standby, type, usemap, width
• type attribute specifies file's MIME type
• IE6 requires non-standard classid attribute to specify which plugin to use (list)

Parameters: <param>

<object id="slider1" width="100" height="50">
	<param name="BorderStyle" value="thick" />
	<param name="MousePointer" value="hourglass" />
	<param name="Enabled" value="true" />
	<param name="Min" value="0" />
	<param name="Max" value="10" />
</object>

• indicates a parameter to be passed to the embedded object
• required name and value attributes tell the object what parameter this is and what value it should have

Embedding a YouTube video

<object width="width" height="height"
 type="application/x-shockwave-flash"
 data="videoURL">
	<param name="wmode" value="transparent" />
	parameters
</object>

<object width="425" height="350"
 type="application/x-shockwave-flash"
 data="http://www.youtube.com/v/eKgPY1adc0A">
	<param name="wmode" value="transparent" />
</object>

• this code is HTML5-compliant