Differences

This shows you the differences between two versions of the page.

--- eg-146:lecture13 [2012/03/08 18:53] – [Specifying an aside] eechris
+++ eg-146:lecture13 [2012/03/12 09:18] (current) – [The document template] eechris
@@ Line 22: / Line 22: @@
   * [[#Commenting your code]]
+===== Session Example =====
+This is the example that we will use throughout this session: [[/eg-146/basic-html/gaudi.html|gaudi.html]]
+It is based on one of the example on page 85 of [[http://www.bruceontheloose.com/htmlcss/examples/#chapter-3|Chapter 3 in Castro and Hyslop]] that is available online [[http://www.bruceontheloose.com/htmlcss/examples/chapter-03/improving-accessibility-aria.html|here]].
+----
+<code html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>
+      Antoni Gaud&iacute; - Introduction
+    </title>
+    <link rel="stylesheet" href="http://www.bruceontheloose.com/htmlcss/examples/chapter-03/common/css/0326-layout-with-divs.css" />
+  </head>
+  <body>
+    <div id="container">
+      <header role="banner">
+        <nav role="navigation">
+          <ul id="toc" title="Table of Contents">
+            <li lang="es" title="Learn about Antoni Gaudí">
+              <a href="#gaudi">Antoni Gaud&iacute;</a>
+            </li>
+            <li lang="es"><a href="#sagrada-familia">La Casa Mil&agrave;</a></li>
+            <li lang="es"><a href="#park-guell">La Sagrada Fam&iacute;lia</a></li>
+          </ul>
+        </nav>
+      </header>
+      <article role="main" class="architect">
+        <h1 id="gaudi">Barcelona's Architect</h1>
+        <p>Antoni Gaudí's incredible buildings bring millions of tourists to Barcelona each year.</p>
+        <p>Gaudí's non-conformity, already visible in his teenage years, coupled with his quiet but firm devotion to the church, made a unique foundation for his thoughts and ideas. His search for simplicity, based on his careful observations of nature are quite apparent in his work, from the <a href="#park-guell">Park Guell</a> and its incredible sculptures and mosaics, to the Church of the <a href="#sagrada-familia">Sacred Family</a> and its organic, bulbous towers.</p>
+        <section class="project">
+          <h2 id="sagrada-familia" lang="es">La Sagrada Família</h2>
+          <p><img src="http://www.bruceontheloose.com/htmlcss/examples/chapter-03/img/towers.jpg" width="75" height="100" alt="Sagrada Família Towers" /> The complicatedly named and curiously unfinished masterpiece that is the Expiatory Temple of the Sacred Family is the most visited building in Barcelona. In it, Gaudí combines his vision of nature and architecture with his devotion to his faith. The Sagrada Família attracts even the non-religious to its doors in large part due to its tragic story and its still unfinished state, of which the everpresent scaffolding and cranes are permanent reminders.</p>
+        </section>
+        <section class="project">
+          <h2 id="park-guell" lang="es">Park Guell</h2>
+          <p><img src="http://www.bruceontheloose.com/htmlcss/examples/chapter-03/img/dragon.jpg" width="100" height="75" alt="Park Guell Dragon" /> The Park Guell always reminds me of Howard Roark in Ayn Rand's <a href="http://en.wikipedia.org/wiki/Fountainhead"><cite>The Fountainhead</cite></a>. Gaudí's project in the Park Guell was to build a residential community whose residents would love where they lived. It was never finished.</p>
+          <p>Perhaps that is for the best, since now we <em>all</em> get to enjoy it. The Park Guell is set on a hill overlooking practically all of Barcelona. Its beautiful and even comfortable serpentine bench is filled with foreigners and locals alike every day of the week. Its mosaic lizards have become synonymous with the city itself.</p>
+        </section>
+      </article>
+      <aside role="complementary">
+        <h1>Architectural Wonders of Barcelona</h1>
+        <p>Barcelona is home to many architectural wonders in addition to Gaudí's work. Some of them include:</p>
+        <ul>
+          <li lang="es">Arc de Triomf</li>
+          <li>The cathedral <span lang="es">(La Seu)</span></li>
+          <li lang="es">Gran Teatre del Liceu</li>
+          <li lang="es">Pavilion Mies van der Rohe</li>
+          <li lang="es">Santa Maria del Mar</li>
+        </ul>
+        <p>Credit: <a href="http://www.barcelona.de/en/barcelona-architecture-buildings.html" rel="external"><cite>Barcelona.de</cite></a>.</p>
+      </aside>
+      <footer role="contentinfo">
+        <p><small>&copy; Copyright 2011</small></p>
+      </footer>
+    </div>
+  </body>
+</html>
+</code>
 ===== The document template =====
@@ Line 30: / Line 102: @@
     <meta charset="utf-8" />
     <title>...</title>
-  <head>
+  </head>
   <body>
@@ Line 144: / Line 216: @@
   * Without the sections: [[/eg-146/basic-html/outline3.html|outline3.html]]
   * Outline with content wrapped in an article: [[/eg-146/basic-html/outline4.html|outline4.html]]
-  * As recommended today (using both sectioning elements and ''h1-h6''}} to define structure: [[/eg-146/basic-html/outline5.html|outline5.html]]
+  * As recommended today (using both sectioning elements and ''h1-h6'' to define structure: [[/eg-146/basic-html/outline5.html|outline5.html]]
@@ Line 254: / Line 326: @@
 </note>
 ===== Creating a footer =====
+<code html>
+<footer>
+  <p><small>&copy; Copyright 2011</small></p>
+</footer>
+</code>
 ===== Generic containers =====
+Sometimes you need a container that has no particular semantic meaning but which is useful for the purpose of styling and JavaScript. The ''div'' element can be used for this purpose.
+Examples:
+  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-03/no-divs.html|Use of a div to demarcate the content]]
+  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-03/divs-with-ids.html|divs with ids]]
+----
+<note>
+Before HTML5 ''<div id="container-name">...</div>'' was the only way to create the sectioning features that we have just described. In fact it was a survey of the common ways that divs where used by web designers that led the designers of HTML5 to the collection of sectioning elements that we now have. For example ''<div id="header">'', ''<div id="footer">'', ''<div id="nav">'', etc can still be observed in many "legacy" web sites that are not marked up in HTMl5.
+</note>
 ===== Improving Accessibility with ARIA =====
+[[http://www.w3.org/WAI/intro/aria|WAI-ARIA]] (Web Accessibility Initiative's Accessible Rich Internet Applications), or ARIA for short, adds additional attributes to elements that can help further improve the accessibility of web pages.
+Examples:
+  * ''role="application"'', ''role="banner"'', ''role="complementary"''
+  * ''role="contentinfo"'', ''role="form"'', ''role="main"'',
+  * ''role="navigation"'', ''role="search"''
+[[http://www.bruceontheloose.com/htmlcss/examples/chapter-03/improving-accessibility-aria.html|Example]]
 ===== Naming elements =====
+Use ''class'' or ''id''.
+  * id is unique in the document: ''id="document-unique-name"''
+  * class can apply to a number of document elements: ''class="name"''
+  * There can be multiple class names in a single class attribute: ''classs="name anothername"''
+[[http://www.bruceontheloose.com/htmlcss/examples/chapter-03/naming-with-class-id.html|Example]]
+----
+<note>
+  * Use id to identify a single element that you later want to be able to refer to later, for example as the target of a link, for styling, or for JavaScript.
+  * Use class for elements that have a common purpose that you want to be able to style all in one go.
+</note>
+===== Adding the Title Element to Your Code =====
+<code html>
+<element ... title="A sentence or two describing the element's content. Usually shown in a tooltip">
+ ...
+</element>
+</code>
+[[http://www.bruceontheloose.com/htmlcss/examples/chapter-03/adding-title-attribute.html|Example]]
 ===== Commenting your code =====
+<code html>
+<!-- anything between these symbols is ignored by the browser -->
+</code>
+[[http://www.bruceontheloose.com/htmlcss/examples/chapter-03/adding-comments.html|Example]]