Web Design

Chapter 1   HTML

(1) Introduction to HTML

∗ HTML

▸ Hypertext markup language (HTML): the standard markup language for documents designed to be displayed in a web browser.

▸ History of HTML

✶ 1991: HTML appeared
✶ 1995: HTML2, simple (or ugly) web page formats
✶ 1997: HTML3.2, HTML4.0
✶ 1999: HTML4.01
# During the time of HTML3 and HTML4, people expected the web sites look beautiful. Hence, browser vendors competed intensively, and they defined their own, incompatible HTML specifications. Hence, it was very difficult to reach cross-platform HTMLs
✶ 2000: XHTML1.0 appeared
✶ 2000 – 2005: CSS has been clearly defined, but browser supports still varied. Different versions of a same browser may even be incompatible (e.g., IE); Cross-platform HTML was still a big problem.
✶ 2005 – 2008: Most browsers supported CSS, except the very popular IE 5 then
✶ 2011: HTML5
# W3C stopped developing XHTML, and finally HTML5 become the main stream
# 2009 and later: users may safely assumed that all browsers support CSS (except IE 6 and IE 7). After 18 years, HTML and CSS finally stablized

∗ History of HTML5

▸ 2004, W3C decided to give up HTML and turned to XHTML, which is based on XML

▸ People from Apple, Mozilla, and Opera were not very happy about this and they formed "Web Hypertext Application Technology Working Group (WHATWG) and continued developing HTML

▸ April 2007, Apple, Mozilla, and Opera proposed that W3C should adopt HTML5 developed by WHATWG

▸ May 2007, W3C's HTML working group agreed to accept HTML5. HTML5 finally became the main stream, and XHTML became history

▸ October 2014, W3C formally released the HTML5 standards

(2) Web systems

∗ A web system (Web-based system) consists of two parts:

▸ Web design: to design and produce web pages, also called "client-side design," "browser-side design", or "front-end design"

▸ Web programming: programming the web applications, also called "server-side programming" or "back-end programming"

∗ Web systems use the client/server architecture:

clientserver

▸ Client: users use browsers to access the resources on the networks and send data to the web server for processing

✶ Client-side techniques: browsers, HTML, CSS, JavaScript, ...

▸ Server: provides resources and services, accepts the data sent by users, and handles most of the computing

✶ Server-side techniques: web servers (Apache, Nginx, MS IIS, ...), server-side scripting (PHP, ASP.NET, JSP, Java, Python, Ruby, Perl, ...), database systems (MySQL, Postgres, Oracle, MS SQL, ...)

(3) Main jobs and techniques of the front-end design/engineering

frontend

▸ Front-end designers: design the style of web pages

✶ Visual effects, page layout, UI/UX, image processing, graphing, art, styles, ...

▸ Front-end engineers: produce the web page according to the page design

✶ HTML, CSS, JavaScript, CSS preprocessors, CSS frameworks, API, AJAX, JSON, JavaScript frameworks,...
✶ May include web site deployment or content management systems (CMS)

▸ Intersection: HTML, CSS, JavaScript

✶ May not necessary for front-end designers, but it's a must for front-end engineers

(4) The structure of a web page

∗ Basic HTML format

▸ An HTML document is a text file containing formatting instructions called "tags," which decide how the document should look like

▸ Functions of tags: styles of texts (e.g., boldface, italic), widgets that users may interact with the document (e.g., checkboxes), or multimedia (e.g., images, audio, video)

✶ An opening tag consists of a "less than" character (<), the tag name, and a "greater than" character (>); for example, <p> is a paragraph's opening tag
✶ A closing tag consists of a "less than" character (<), a slash, the tag name, and a "greater than" character (>); for example, </p> is a paragraph's closing tag
✶ To actually show < and > characters: use &lt; and &gt;

▸ The opening tag, closing tag, and the data they enclose are together called an "HTML element." The data they enclose is called the "content." For example, <p>This is a paragraph.</p> is a paragraph element and its content is This is a paragraph.

▸ Tag attributes

✶ We may add attributes to a tag to add its properties; for example, <link href="..." ...>

▸ Some elements don't have a closing tag and they are referred to as "empty elements;" for example, horizontal rules <hr>, line breaks <br>, images <img src=...>, etc.

∗ Creating an HTML document with a text editor

▸ HTML and CSS documents are both text files, which can be edited by a text editor. Popular HTML and CSS editors: Sublime Text 3, Brackets, Atom, Bluefish, notepad++, Gedit, and so on

▸ Install Brackets: from Brackets web site http://brackets.io/, download the installation file and then install

✶ Ubuntu: Brackets.Release.x.x.64-bit.deb
✶ Windows: Brackets.Release.x.x.msi
✶ Mac: Brackets.Release.x.x.dmg
x.x is the version numbers

▸ Note: in Ubuntu, it is also possible to install Brackets using the PPA

$ sudo add-apt-repository ppa:webupd8team/brackets
$ sudo apt update
$ sudo apt install brackets

▸ Setting Brackets

✶ Select fonts: View Themes ... select your favorite "Current Theme" and set the appropriate font size:
# Ubuntu: DejaVu Sans Mono
# MS Windows: Consolas
# Mac: Consolas
✶ Set space units to be 2 spaces, disable smart indent, and disable javascript linting
# Debug Open Preferences File edit the brackets.json file, and add the following lines
{
    ...,
    "spaceUnits": 2,
    "smartIndent": false,
    "linting.enabled": false
}

▸ There are also "What you see is what you get" (WYSIWYG) editors

✶ For example: MS Word (Save as HTML), Dreamweaver, KompoZer, etc. They are very handy but the HTML files created not only have large sizes but also have bad HTML formats. Hence, they are not recommended.
✶ Editors often used on major platforms: Linux, Windows, Mac

∗ The directory structure

▸ The desired directory structure:

webdesign/
  css/
  img/

▸ First create the top-level webdesign directory (in the directory of your choice). Such a directory will be the working directory and is used for storing HTML files:

✶ Ubuntu: /home/<username>/webdesign
✶ Windows: C:\Users\<username>\webdesign
✶ Mac: /Users/<username>/webdesign
<username> is the user name used to login the operating system

▸ And then, create the css/ and img/ directories in webdesign/ for storing CSS and image files, respectively

▸ Next, start Brackets and open the webdesign/ directory

File Open Folder Select the webdesign directory Open
brackets

∗ The structure of an HTML5 document

▸ Create a new file in Brackets:

File New ctrl-s (i.e., save it) Select webdesign directory, filename: simplest.html Save
Add the content of the file:
<!doctype html>
<html>
<head>
<title>Simplest page</title>
<meta charset="utf-8">
</head>
<body>
<p>The simplest web page</p>
</body>
</html>
✶ Activate Brackets' server (the lightening icon on the upper right), and the web page will show up in the default browser with the url: 127.0.0.1:xxxxxx/simplest.html

▸ The building blocks of HTML: <!doctype html>, <html>, <head>, and <body>

phaserLogo
<!doctype html> tells the browser that the file is an HTML document
<html> is called the "root" element, which contains all other elements
✶ The<head> element follows <html> tag and is called the "Document head." It includes:
# the <title> element: appears in the tab
# the <meta charset="utf-8"> element: indicates the character encoding type
✶ The <body> element follows the <head> element, and is called the "Document body"

▸ Browsers ignore extra line breaks and spaces in HTML

▸ HTML tags are case-insensitive; hence, <br> can also be written as <BR>. However, the convention prefers lower cases.

▸ Attributes are used to set additional features of an HTML element. The attribute follows the opening tag with the format: attribute="value"

✶ For example, the attribute src (source) specifies the path of the image file <img src="myPicture.jpg" alt="My picture">
✶ The quotes of an attribute may be omitted (but not recommended), but if there are multiple attributes, they have to be encolosed by quotes. E.g., <div style="width:200px; margin:0 auto;">

▸ When the browser opens an HTML document, it follows the HTML tags to format the content. Such a procedure is called "parsing" or "rendering." E.g., to show the text with boldface:

<p>This is the <strong>main point</strong> of this paragraph.</p>

(5) Rendering texts

∗ Text markups

Header: <h1>, <h2>, ..., <h6> Paragraph: <p>
Boldface: <b> Italic: <i>
Underline: <u> Superscript: <sup>
Subscript: <sub> Line break: <br>
Horizontal rule: <hr> Non-breakable space: &nbsp;

▸ Exercise: create the dessert1-1.html file in the webdesign/ directory, enter the following content, and view it in the browser

<!doctype html>
<html>
<head>
<title>Dessert Shop</title>
<meta charset="utf-8">
</head>
<body>

<h1>Dessert Shop</h1>
<p>We make beautiful, creative, and healthy desserts.</p>
<hr>

<h2>What do you want?</h2>
<p>Cookies: $0.50 each</p>
<p>Cakes and pies: $5.00 each</p>
<p>Chocolate: $2.00 each</p>
<br>

<h2>Opening:</h2>
<p>
  Monday to Thursday, 7:45 a.m. -- 9:45 p.m.<br> Friday, 7:45 a.m. -- 4:30 p.m.<br>
  Saturday, 9:00 a.m. -- 4:00 p.m.<br> Sunday, noon -- 9:00 p.m.
</p>
<br>

<h2>Payment methods:</h2>
<p>Cash, ATM, credit cards, American Express, Discovery, ...</p>
<br>

</body>
</html>
phaserLogo

∗ Semantic markups

▸ HTML5 uses semantic markups to describe the tags, and it is very useful for document analysis and web accessibility

Main page <header> Navigation <nav> Side bar <aside>
Main <main> Summary <summary> Section <section>
Footer <footer> Article <article> Address <address>
Strong <strong> Abbreviation <abbr> Deletion <del>
Emphasis <em> Citation <cite> Insertion <ins>
Quotation <blockquote> Definition <dfn> Strike through <s>
Quotation <q>

▸ E.g., page layout with semantic tags:

<header>
<nav>
<aside> <section>
<article>
<footer>

▸ Exercise: save dessert1-1.html as dessert1-2.html, and modify as follows:

...
<header>
  <h1>Dessert Shop</h1>
  <p>We make beautiful, creative, and healthy desserts.</p>
</header>
...
<p>Cookies: <s>$0.50 each</s>&nbsp;&nbsp;<ins>$0.45 each</ins></p>
...
<p>Chocolate: $2.00 each</p>
<p>What is <dfn>cake</dfn>? --> Eggs + flour + harding-working + love</p>
<br>
<h2>Customers' statements: </h2>
<blockquote>
  The taste of this desserts is really great. Whenever I get off my work, I came here to
  try various desserts. I enjoyed the unique atmosphere of the shop, which made the pressure of my work disappear.
</blockquote>
<br>
<h2>Opening:</h2>
...<br><strong>Sunday, noon -- 9:00 p.m.</strong>
</p>
...
<br>
<address>Address: No. 1, Taiwan Avenue, Taichung</address>
<br>
</body>
</html>
phaserLogo

(6) List

▸ Ordered list

<ol>
  <li> ... </li>
  <li> ... </li>
  ...
</ol>
✶ Order numbers: <ol type="1 | a | A | i | I"> (Note, it is not suggested to use such an attribute; use CSS instead.)

▸ Unordered list

<ul>
  <li> ... </li>
  <li> ... </li>
  ...
</ul>
✶ Item symbole: <ul type="disc | circle | square"> (Note, it is not suggested to use such an attribute; use CSS instead.)

▸ Definition list (dl: definition list, dt: definition term, dd: definition description)

<dl>
  <dt> ... </dt>
  <dd> ... </dd>
  <dt> ... </dt>
  <dd> ... </dd>
   ...
</dl>

▸ Exercise: save dessert1-2.html as dessert1-3.html, and modify as follows:

...
<h2>What do you want?</h2>
<ol>
  <li>Cookies: <s>$0.50 each</s> <ins>$0.45 each</ins></li>
  <li>Cakes and pies: $5.00 each</li>
  <li>Chocolate: $2.00 each</li>
</ol>
<dl>
  <dt>What is cake?</dt>
  <dd>Eggs + flour + hard-working + love</dd>
</dl>
...
<h2>Opening:</h2>
<ul>
  <li>Monday to Saturday, 7:45 a.m. -- 9:45 p.m.</li>
  <li>Friday, 7:45 a.m. -- 4:30 p.m.</li>
  <li>Saturday, 9:00 a.m. -- 4:00 p.m.</li>
  <li><strong>Sunday, noon -- 9:00 p.m.</strong></li>
</ul>
<br>
dessert1-3

(7) Links

<a href=...> ... </a>

<a> : anchor

href : Hypertext reference

▸ Exercise: save dessert1-3.html as dessert1-4.html, and modify as follows:

...
<address>Head quarter address: No. 1, Taiwan Avenue, Taichung</address>
<p>Branches:</p>
<ul>
  <li><a href="http://taipeishop.com">Taipei shop</a></li>
  <li><a href="http://hsinchushop.com">Hsing-Chu shop</a></li>
  <li><a href="http://tainanshop.com">Tainan shop</a></li>
  <li><a href="http://kaohsungshop.com">Kaoshung shop</a></li>
</ul>
</body>
</html>
phaserLogo

(8) Images

<img src=... alt=... >

src: source of the image

alt: alternative, if the image cannnot be displayed, show the text instead

▸ Considerations for preparing images:

✶ Use an appropriate image size: too large wastes band width; too small poor image quality
✶ Resizing on the server side, not on the client side
✶ Image formats used: jpg, png, gif
# Captured images: jpg
# Generated images or transparency needed: png
# Animation: gif
Top 10 mistakes in handling website images and how to solve them
✶ Usually, a sub-directory called img/ is create for storing the images. Image source may be a link, too. For example:
<img src="https://web.cyut.edu.tw/var/file/0/1000/img/780902510.png" alt="CYUTLogo">

▸ HTML5 tags:

<figure>: combines <img> and <figcaption>

▸ Exercise:

✶ Download the following dessert.jpg file and save it to the img/ directory
dessert image
✶ Save dessert1-4.html as dessert1-5.html, and modify as follows:
...
<body>
<header>
...
</header>
<hr>
<h2>Dessert styles</h2>
<figure>
  <img src="img/dessert.jpg" alt="Dessert image"><br>
  <figcaption>We use best-quality materials and provide our customers with safe
    and nutritious cakes.</figcaption>
</figure>
<br>
<h2>What do you want?</h2>
dessert 1-5

▸ The image path (img/dessert.jpg) is a form of "relative path"; Do not use an "absolute path," e.g.: /home/m514/Desktop/img/dessert.jpg, or the image may not be displayed correctly if the environment is different.

(9) Tables

▸ A table is an arrangement of data in rows and columns containing cells that make comparing easier

▸ Main table elements: <table>, <tr>, <th>, <td> (table, table rows, table headings, table data)

<table border="1">
<tr>
  <th></th>
  <th>Saturday</th>
  <th>Sunday</th>
</tr>
<tr>
  <td>Tickets sold</td>
  <td>120</td>
  <td>135</td>
</tr>
<tr>
  <td>Total</td>
  <td>NT$60,000</td>
  <td>NT$67,500</td>
</tr>
</table>
✶ Note, it is not suggested to use the border="1" attribute; use CSS instead

▸ A cell spans multiple rows: <td rowspan="[number-of-rows]">

<table border="1">
  <tr>
    <td>Upper left</td>
    <td rowspan="2">Right</td>
  </tr>
  <tr>
    <td>Bottom left</td>
  </tr>that make comparing
  easier
</table>

▸ A cell spans multiple columns: <td colspan="[number-of-columns]">

<table border="1">
  <tr>
    <td>Upper left</td>
    <td>Upper right</td>
  </tr>
    <tr>
    <td colspan="2">Bottom</td>
  </tr>
</table>

▸ Exercise: save dessert1-5.html as dessert1-6.html, and modify as following:

...

<address>Head quarter address: No. 1, Taiwan Avenue, Taichung</address>
<p>Branches:</p>
<table border="1">
  <tr>
    <th>Branch</th>
    <th>Address</th>
    <th>Phone</th>
  </tr>
  <tr>
    <td><a href="http://taipeishop.com">Taipei shop</a></td>
    <td>No. 1, Taipei Avenue, Taipei</td>
    <td>(02) 1234-5678</td>
  </tr>
  <tr>
    <td><a href="http://hsinchushop.com">Hsinchu shop</a></td>
    <td>No. 1, Hsinchu Avenue, Hsinchu</td>
    <td>(03) 1234-5678</td>
  </tr>
  <tr>
    <td><a href="http://tainanshop.com">Tainan shop</a></td>
    <td>No. 1, Tainan Avenue, Tainan</td>
    <td>(06) 1234-5678</td>
  </tr>
  <tr>
    <td><a href="http://kaohsungshop.com">Kaohsiung</a></td>
    <td>No. 1, Kaohsiung Avenue, Kaohsiung</td>
    <td>(07) 1234-5678</td>
  </tr>
</table>
<br><br>

</body>
</html>

▸ Assignment 1

(10) Forms

∗ Form: for collecting information from users

▸ Form syntax

<form method=... action=... >
...
</form>

method: GET or POST

action: server URL (Uniform resource locator)

▸ Example:

<p>Registration</p>
<form method="post" action="#">
  Username: <input type="text" name="username"><br>
  Password: <input type="password" name="password"><br>
  <input type="submit" value="Submit">
</form>

∗ Form fields

▸ Text input: <input type="text" name=...>

▸ Password input: <input type="password" name=...>

▸ Text area: <textarea rows=... cols=...> ... </textarea>

▸ Radio choice:

<input type="radio" name=... value=... checked> ...
<input type="radio" name=... value=...> ...
<input type="radio" name=... value=...> ...
✶ All fields have the same name attribute, and checked is the default option

▸ Check box:

<input type="checkbox" name=... value=...> ...
<input type="checkbox" name=... value=... checked> ...
<input type="checkbox" name=... value=...> ...
✶ All fields have the same name attribute, and checked is the default option

▸ Drop-down select box

<select name=...>
  <option value=...> ... </option>
  <option value=...> ... </option>
  <option value=... selected> ... </option>
  <option value=...> ... </option>
</select>
selected is the default option

▸ File upload

<form ... enctype="multipart/form-data">
<input type="file" value=...>

▸ Button

<button> ... </button>

▸ Email

<input type="email" name=...>

▸ Number

<input type="number" name=...>

▸ Required

<input type=... name=..." required>

▸ Date picker

<input type="date" name=...>

▸ Form submit

<input type="submit" value=...>

∗ Adding labels to radio buttons or check boxes

▸ Enclose radio buttons or check boxes with the <label> tag, for example:

<label><input type="radio" name="sex" value="F">Female</label>
<label><input type="radio" name="sex" value="M">Male</label>

▸ With the <label> tag, users may click the tag or the text, which is more convinient

∗ Grouping form elements

▸ The <fieldset> tag may be used to enclose form elements such that the form looks cleaner

▸ The browser will add a box around the fieldset element to show the elements as groups

▸ It is common to add a <legend> element to the <fieldset> element as a title

▸ Example:

<fieldset>
  <legend>Contact details</legend>
  <p>Email: <input type="email" name="email"></p>
  <p>Mobile phone: <input type="text" name="mobile"></p>
  <p>Phone: <input type="text" name="telephone"></p>
</fieldset>

∗ Exercise

▸ Save dessert1-6.html as dessert1-7.html, and modify as following:

▸ Before </body> tag, add the following form:

...
</table>
<br><br>

<form method="post" action="#"> <!-- No server-side scripts so far -->
  <fieldset>
    <legend>Registration</legend>
    <p>Username: <input type="text" name="username" required></p>
    <p>Password: <input type="password" name="password" required></p>
    <p><label><input type="checkbox" name="rememberme" value="True" checked>Remember the password</label></p>
    <p>Sex: 
    <label><input type="radio" name="sex" value="female" checked>Female</label>
    <label><input type="radio" name="sex" value="male">Male</label></p>
    <p>Favorites:
      <select name="favorite">
        <option value="vanilla">Vanilla</option>
        <option value="peach">Peach</option>
        <option value="apple">Apple</option>
        <option value="chocolate">Chocolate</option>
        <option value="butter">Butter</option>
      </select>
    </p>
    <p>Note: <br>
    <textarea name="memo" cols="50" rows="5"></textarea></p>
    <p><input type="submit" value="Submit"></p>
  </fieldset>
</form>
<br><br>

</body>
</html>

▸ Assignment 2

(11) Inline or block elements

▸ HTML elements can be categorized into "inline elements" and "block elements"

∗ Inline elements

▸ An inline element is just like a text: the width is determined by the content and inline elements may flow from left to right

▸ Inline elements that define functions, e.g.:<a>, <img>, ...

▸ Inline elements that define styles, e.g.:<b>, <em>, <span>, <i>, ...

▸ Example 1:

<p>
The word <b>cake</b> has a long history. Originally it came from <a
href="http://en.wikipedia.org/wiki/Vikings">Vikings'</a> <a
href="http://en.wikipedia.org/wiki/Norse">Old Norse language</a>, called
"<strong>kaka</strong>".
</p>
phaserLogo

▸ Example 2:using the <span> tag to mark the texts, and then set its CSS styles later

<p>This is why our shop is so <span id="charming">charming</span>!</p>

∗ Block elements

▸ A block element is just like a box, which is used to establish the "structure" of the page by dividing the page into blocks

▸ A block elment starts in a new line by default, and blocks flow from top to bottom

▸ The default width of a block is the same as that of its enclosing element; the default height is determined by its content

▸ Block tags:<hn>, <p>, <ul>, <ol>, <li>, <div>, <header>, <nav>, <aside> <blockquote>, <section>, <article>, ...

▸ Example 1:

<h1> Cake <img src="img/cake.jpg"> </h1>
<p>Cake is a form of bread-like food and modern cakes are baked desserts. But
  The early cake was actually fried bread or cheesecake, mostly with a round shape.
  It's very difficult to deferentiate bread, cake, or pastry.</p>
<ol>
  <li>Cake with special purposes</li>
  <li>Shapes of cakes</li>
  <li>Decoration of cakes</li>
</ol>
phaserLogo

▸ Example 2:using <div> tags to contain blocks and inline elements

<div id="cake">
  <h1>The secret of making cakes</h1>
  <ul>
    <li><a href="ingredient.html">Ingredients</a></li>
    <li><a href="prepare.html">Process of preparation</a></li>
    <li><a href="bake.html">Baking</a></li>
    <li><a href="taste.html">Tasting</a></li>
  </ul>
</div>

▸ A block elment may contain other block or inline elements, in such a case it is callled the "containing element" or the "parent element"

▸ A block elment may contain other block or inline elements; however, an inline element cannot contain block elements. Some block element may not contain other block elements, e.g., <p>

(12) Other HTML tags

∗ Comments:

<!-- ... -->

▸ The content of a comment will not appear in the browser

▸ In the production environment, comments are usually removed to speed up transmission

▸ Remove comments: http://jsfiddle.net/DerekL/BUVkS/show/

▸ Web speed test: http://tools.pingdom.com

∗ The "id" attribute

▸ The id attribute of an element is used to indicate its uniqueness, for example, <p id="firstParagraph"> ... </p>

▸ The id attribute has to be unique in a page

▸ The value of an id should start with an English letter or underscore

▸ The CSS or JavaScript may reference the id attribute to set one element's styles or functions

∗ The "class" attribute

▸ The class attribute of an element is used to indicate the group it belongs to, for example, <p class="paragraph"> ... </p>

▸ There may be more than one element having the same class

▸ The value of a class should start with an English letter or underscore

▸ The CSS or JavaScript may reference the class attribute to set the styles or functions of a group of elements

∗ Meta element

▸ The <meta> element describes the information of the page, e.g.,

✶ The author of the page, expiration date, ...
✶ Commonly used to indicate the character encoding: <meta charset="utf-8">

∗ Escape characters

¢ &cent;     £ &pound;     ¥ &yen;       € &euro;       © &copy;
® &reg;      ™ &trade;     × &times;     ÷ &divide;

(13) Video and audio

<audio src=...></audio>

<video src=...></video>

▸ May add other attributes, e.g.:

<video src=... width=... height=... controls autoplay preload="auto" loop poster=...></video>
controls: playing controls
autoplay: play automatically
preload: what to do before page loading
# none: don't load the media, to be activated by the user
# auto: load the media automatically
# metadata: only load necessary data, e.g.: file size, the first frame, media length, etc.
loop: replay in loop
poster: the image shown before or during loading

▸ Examples:

<video src="demo.mp4" controls autoplay loop preload="auto" poster="demo.jpg">
<audio src="demo.mp3" controls preload="auto">

▸ Except width , height, and poster, the usage of <audio> is the same as <video>

▸ Exercise:

✶ Download avatar.jpg, avatar.ogv, avatar.mp4, 18_and_life.ogg, 18_and_life.mp3 and put images, video, and audio files into img, film and music directories, respectively
✶ Save dessert1-7.html as dessert1-8.html, and modify as follows:
...

<video width="640" height="480" controls preload="auto"
poster="img/avatar.jpg">
  <source src="film/avatar.ogv" type="video/ogg">
  <source src="film/avatar.mp4" type="video/mp4">
  Your browser does not support HTML5 video
</video>
<br><br>
<audio controls preload="auto">
  <source src="music/18_and_life.ogg" type="audio/ogg">
  <source src="music/18_and_life.mp3" type="audio/mpeg">
  Your browser does not support HTML5 audio
</audio>

</body>
</html>

(14) Supports for HTML5 and web document validation

∗ HTML5 tags lookup

▸ All tags: Here

▸ Deprecated tags: Here

∗ Validating web documents

▸ When a ill-formatted page is displayed, the browser will ignore the format problems and render the page as much as possible

▸ Online web document validation:

✶ W3C Markup validation service: http://validator.w3.org

(15) HTML5 syntax suggestions

▸ Reference: http://www.w3schools.com/html/html5_syntax.asp

▸ Use lowercases for all tags

Bad Good
<SECTION>
  <p>This is a paragraph.</p>
</SECTION> 
<section>
  <p>This is a paragraph.</p>
</section> 
<!DOCTYPE html> or <!doctype html>

▸ Indentation: 2 spaces

▸ Omitting closing tags is allowed (but not suggested)

Bad Good
<SECTION>
  <p>First paragraph
  <p>Second paragraph
</SECTION>
<section>
  <p>First paragraph</p>
  <p>Second paragraph</p>
</section>

▸ Closing tags of empty elements

Bad Good
<meta charset="utf-8"/> 
<meta charset="utf-8">

▸ Double quotes may by ommitted (required if there are multiple attributes)

Allowed Allowed Wrong
<p class="important"> 
<p class=important> 
<p class=important center>

▸ The image tag should have an alt attribute, and it is suggested to set the image size to reserve the space (avoid flicking)

允許
<img class="html5Size" src="html5.png" alt="This is an HTML5 image">
CSS:
img.html5Size {
  width: 200px;
  height: 200px;
}

▸ No space before and after the equal sign of an attribute

Bad Good
<meta charset = "utf-8"> 
<meta charset="utf-8">

▸ The element starts from a new line

Bad Good
<table>
  <tr><th>Tag name</th><th>Description</th></tr>
  <tr><td>table</td><td>Table</td></tr>
</table>
<table>
  <tr>
    <th>Tage name</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>table</td>
    <td>Table</td>
  </tr>
</table>