Advanced HTML

Web Architecture [./]
Fall 2011 — INFO 253 (CCN 42598)

Dilan Mahendran, UC Berkeley School of Information
2011-09-13

Creative Commons License [http://creativecommons.org/licenses/by/3.0/]

This work is licensed under a CC
Attribution 3.0 Unported License
[http://creativecommons.org/licenses/by/3.0/]

Contents D. Mahendran: Advanced HTML

Contents

D. Mahendran: Advanced HTML

(2) Abstract

This lecture covers linking in general and in header information, and a more general view of HTML layout based on the box model used by browsers. The concept of frames is introduced, which can be used in a combination of framesets and pages, or as inline frames. Finally, image maps are introduced as a way of how images can be turned not only into links, but into a set of various linked areas overlayed over the image.



Header Information

Outline (Header Information)

  1. Header Information [6]
  2. Creating Content [2]
  3. HTML/CSS Box Model [4]
  4. Frames [6]
    1. Regular Frames [2]
    2. IFrames [2]
  5. Image Maps [3]
Header Information D. Mahendran: Advanced HTML

(4) Other Links



Header Information D. Mahendran: Advanced HTML

(5) HTML Document Structure

HTML Document Structure

Header Information D. Mahendran: Advanced HTML

(6) HTML Document Type

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


Header Information D. Mahendran: Advanced HTML

(7) Document Metadata

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>HTML Syntax and Structure</title>
  <link href="simple.css" rel="stylesheet" type="text/css">
 </head>
 <body>
  <h1>HTML Syntax and Structure</h1>


Header Information D. Mahendran: Advanced HTML

(8) Essential Metadata



Header Information D. Mahendran: Advanced HTML

(9) Additional Metadata



Creating Content

Outline (Creating Content)

  1. Header Information [6]
  2. Creating Content [2]
  3. HTML/CSS Box Model [4]
  4. Frames [6]
    1. Regular Frames [2]
    2. IFrames [2]
  5. Image Maps [3]
Creating Content D. Mahendran: Advanced HTML

(11) All-Purpose Elements



Creating Content D. Mahendran: Advanced HTML

(12) Retain Content Structures



HTML/CSS Box Model

Outline (HTML/CSS Box Model)

  1. Header Information [6]
  2. Creating Content [2]
  3. HTML/CSS Box Model [4]
  4. Frames [6]
    1. Regular Frames [2]
    2. IFrames [2]
  5. Image Maps [3]
HTML/CSS Box Model D. Mahendran: Advanced HTML

(14) Structure and Layout

box-intro.png

HTML/CSS Box Model D. Mahendran: Advanced HTML

(15) Box Structure

box.png

HTML/CSS Box Model D. Mahendran: Advanced HTML

(16) Floating Boxes Layout

float-box.png

HTML/CSS Box Model D. Mahendran: Advanced HTML

(17) Floating Boxes Markup

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 <head>
  <title>Float example</title>
  <style type="text/css">
  body { font-size : 300% ; }
  body, p, img { margin : 1em ; }
  img { float : left ; width : 50% ; }
  </style>
 </head>
 <body>
  <p>
  <img src="../img/float-box.png" alt="This image will illustrate floats"/>
  Some sample text that has no other purpose than to show how floating elements are moved to the side of the parent element while honoring margins, borders, and padding. Note how adjacent vertical margins are collapsed between non-floating block-level elements.</p>
 </body>
</html>


Frames

Outline (Frames)

  1. Header Information [6]
  2. Creating Content [2]
  3. HTML/CSS Box Model [4]
  4. Frames [6]
    1. Regular Frames [2]
    2. IFrames [2]
  5. Image Maps [3]
Frames D. Mahendran: Advanced HTML

(19) Combining Documents in the Browser



Frames D. Mahendran: Advanced HTML

(20) Problems with Frames



Regular Frames

Outline (Regular Frames)

  1. Header Information [6]
  2. Creating Content [2]
  3. HTML/CSS Box Model [4]
  4. Frames [6]
    1. Regular Frames [2]
    2. IFrames [2]
  5. Image Maps [3]
Regular Frames D. Mahendran: Advanced HTML

(22) Framesets and Frames

  • HTML pages can be HTML content or framesets [http://www.w3.org/TR/REC-html40/present/frames.html#h-16.1]
  • For framesets, the page only defines a frameset skeleton
    • the frameset [http://www.w3.org/TR/REC-html40/present/frames.html#h-16.2.1] described the structure of the page
    • individual frame [http://www.w3.org/TR/REC-html40/present/frames.html#h-16.2.2]s point to actual HTML content
  • The browser retrieves the frameset and all frame contents
    • rendering a frameset results in a compound document
  • Links in the frameset can load content into individual frames
    • a frame's name identifies a frame with a name
    • a's target instructs the browser to load content into that frame


Regular Frames D. Mahendran: Advanced HTML

(23) Frameset and Frame Content

<html>
 <head>
  <title>Lecture Browser</title>
 </head>
 <frameset cols="20%, 80%">
  <frame src="lectures-toc.html"/>
  <frame name="slides" src="../intro"/>
 </frameset>
</html>
<html>
 <head>
  <title>Lecture Table of Contents</title>
 </head>
 <body>
  <ul>
   <li><a href="../intro" target="slides">Introduction</a></li>
   <li><a href="../browsers" target="slides">Browsers</a></li>
   <li><a href="../html" target="slides">HTML</a></li>
   <li><a href="../html-advanced" target="slides">Advanced HTML</a></li>
   <li><a href="../css" target="slides">CSS</a></li>
  </ul>
 </body>
</html>


IFrames

IFrames D. Mahendran: Advanced HTML

(25) Embedding HTML into HTML

  • Inline frames [http://www.w3.org/TR/REC-html40/present/frames.html#h-16.5] embed HTML pages in HTML pages
    • Regular Frames [Regular Frames (1)] segment the window and then load HTML into the parts
    • iframe is a box somewhere in an HTML page and contains an HTML page
  • IFrames have the same usability/accessibility issues as frames
    • printing is a problem (scrolled content in scrolled content)
    • navigation is a problem (complex navigation in the context of one page)
    • addressing (bookmarks/search) is a problem


IFrames D. Mahendran: Advanced HTML

(26) IFrame Example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 <head>
  <title>IFrames Lectures</title>
 </head>
 <body style="height : 100%">
  <table style="width : 100% ; height : 100% ; ">
   <tr style="height : 50%">
    <td><iframe src="../intro" width="100%" height="300">Intro</iframe></td>
    <td><iframe src="../browsers" width="100%" height="300">Setup</iframe></td>
   </tr>
   <tr style="height : 50%">
    <td><iframe src="../html" width="100%" height="300">HTML</iframe></td>
    <td><iframe src="../html-advanced" width="100%" height="300">Advanced HTML</iframe></td>
   </tr>
  </table>
 </body>
</html>


Image Maps

Outline (Image Maps)

  1. Header Information [6]
  2. Creating Content [2]
  3. HTML/CSS Box Model [4]
  4. Frames [6]
    1. Regular Frames [2]
    2. IFrames [2]
  5. Image Maps [3]
Image Maps D. Mahendran: Advanced HTML

(28) Clickable Images



Image Maps D. Mahendran: Advanced HTML

(29) Server-Side Image Maps

<a href="server-side-program"><img src="grid.png" ismap="ismap"/></a>
grid.png [server-side-program]

Image Maps D. Mahendran: Advanced HTML

(30) Client-Side Image Maps

grid.png [square22] [square36]
<img src="grid.png" usemap="#gridmap">
<map name="gridmap">
	<a title="Square 2/2" href="square22" shape="rect" coords="60,60,96,96"/>
	<a title="Square 3/6" href="square36" shape="rect" coords="106,244,142,282"/>
</map>
				


2011-09-13 Web Architecture [./]
Fall 2011 — INFO 253 (CCN 42598)