(\textbf{this element is required in the head section}) \item <style> \item <base> \item <link> \item <meta> \item <script> \item <noscript> \end{itemize} \end{quote} \subsection{\texttt{<body>}} The body part contains the actual page content. \subsection{Opening and closing tags} For most, but not all, of the HTML5 tags, there is an opening and a closing tag, as in \texttt{<body></body>}. There are a few standalone tags, such as \texttt{<hr>} to display a horizontal line. \subsection{Tabs, new lines and spaces} \textbf{Browsers ignore tabs, new lines and most spaces.} For instance, the following two HTML documents produce exactly the same output except for the words "a well", which have been replaced with "an ill": \\ \sloppy\noindent\url{\fthtml spacedemo1.html} {\scriptsize \inputminted[tabsize=2, linenos=true]{html}{HTML5/spacedemo1.html}} \noindent\url{\fthtml spacedemo2.html} {\scriptsize \inputminted[tabsize=2, linenos=true]{html}{HTML5/spacedemo2.html}} \subsection{Comments} In order to help others (and ourselves) understand our HTML documents, it is a good idea to include comments where appropriate. Comments are embedded between \texttt{<!-{}-} and \texttt{-{}->}. A comment can span several lines and is not displayed by the browser. Example: \noindent\url{\fthtml comments1.html} {\scriptsize \inputminted[tabsize=2, linenos=true]{html}{HTML5/comments1.html}} \section{Validation} In order to be sure that our HTML5 document complies with the official standard and should thus run according to our plans in all compliant browsers, we need to validate our HTML5 and CSS3 files either using the official validators at \url{http://validator.w3.org} and \url{http://jigsaw.w3.org/css-validator} or using the Firefox extension \sloppy \url{http://users.skynet.be/mgueury/mozilla/index.html}. The latter will install a validation button in the Firefox add-on bar. A simple double click will display the source code of the current page and run it automatically through the official HTML5 validator. With a right click on the button we launch the CSS3 validator via the \texttt{Advanced} menu. Here are the outputs of the validators for the solution of the next exercise: \noindent\includegraphics[width=\linewidth]{htmlvalidator1.png} %\caption{\label{fig:htmlvalidation1}The W3C HTML validator} \vspace*{\baselineskip} \noindent\includegraphics[width=\linewidth]{htmlvalidator2} %\caption{\label{fig:htmlvalidation2}The HTML validation Firefox extension} \vspace*{\baselineskip} \noindent\includegraphics[width=\linewidth]{cssvalidator1} %\caption{\label{fig:cssvalidation1}Launching the W3C CSS validator} \vspace*{\baselineskip} \noindent\includegraphics[width=\linewidth]{cssvalidator2} %\caption{\label{fig:cssvalidation2}The W3C CSS validator} \vspace*{\baselineskip} The warning messages can be safely ignored. They just tell us that the validator is still experimental. Given that the HTML5 standard is not expected to be finalized for many years, this is unlikely to change any time soon. \begin{Exercise}[difficulty=1, name={HTML5 Exercise}, counter=exchtml] Write an HTML5 document with the title \texttt{My first HTML5 page} that includes the empty files \texttt{ex1.css} (CSS3) and \texttt{ex1.js} (JavaScript), which you create. Your page displays the text \texttt{I'm learning HTML5!} and passes HTML5 and CSS3 validation without errors. \end{Exercise} \section{Planning} In order to produce a top notch web site, we need to plan our work carefully. \subsection{Brain storming} First we need to think about the purpose of our web site. What are the big concepts and ideas that will drive our content? A useful tool in this respect is a mind map. We'll be using the open source FreeMind software, which is available from \url{http://freemind.sourceforge.net/wiki/index.php/Main_Page}. As an example, here's the mind map for WMOTU Lab v1 (cf. \ref{WMOTULabv1}): \noindent\includegraphics{WMOTU_Lab_v1_mind_map} \subsection{Blueprint} Now that we have clarified the big picture content of our site, it's time to sketch out the rough and basic structure. For this purpose we'll use an open source vector drawing software named Inkscape, available from \url{http://www.inkscape.org}. \noindent\includegraphics{WMOTU_Lab_v1_structure} \subsection{Requirements specification} The standard professional approach to project planning is to produce a requirements specification. Such a document specifies the project requirements, including: \begin{enumerate} \item Functionality \item Prototype/model \item Logical site structure \item Physical site structure \item Time plan \item Development environment and technologies \end{enumerate} Here is a minimalist example for the WMOTU Address Book app developed in \ref{WMOTUAddressBook}: \subsubsection{Functionality} The app serves as an electronic address book. New users need to sign up by providing a login name and password. After logging in, the user enters the main page, where he can logout and view a listing of all his addresses. He can delete or edit each address as well as add a new one. All addresses are stored in a MySQL database on the server. \subsubsection{Prototype/model} \sloppy\url{https://foxi.ltam.lu/PROF/evegi144/T2IF2_WSERS/WAD/HTML5/WMOTUAddressBookPrototype.html} \subsubsection{Logical site structure} \noindent\includegraphics[width=\linewidth]{WMOTU_Address_Book} \subsubsection{Physical site structure} \noindent\includegraphics{WMOTU_Address_Book_Physical} \subsubsection{Time plan} The final product will be delivered electronically on 24.6.14. \subsubsection{Development environment and technologies} Development will be done mainly with PhpStorm. Main technologies used will be HTML5, CSS3, PHP5 and MySQL5. \section{\texttt{<br>}} As we have seen, new lines in our source code are converted to a single space by the browser. To split our text into different lines, we use the \texttt{<br>} tag, which inserts a line break. As already mentioned in this chapter, for most, but not all, HTML5 tags there is an opening and a closing tag. \texttt{<br>} is one of the exceptions. It is a so called empty tag, meaning it has no closing tag. This tag should not be used to separate paragraphs. For the latter purpose we use the \texttt{<p>} tag, cf. \ref{paragraph}. Example: \noindent\includegraphics{br1} \noindent\url{\fthtml br1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/br1.html}} \section{\label{paragraph}\texttt{<p>}} This tag is used to mark up a paragraph. The browser automatically adds margin above and below each paragraph (see section \ref{BlockVsInline}). Example: \noindent\includegraphics[width=\linewidth]{p1} \noindent\url{\fthtml p1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/p1.html}} Resize your browser and observe the behavior of your paragraphs. Note that we've given each paragraph an id attribute. This allows us to style each paragraph's background color individually using CSS. More on this in \ref{CSS3}. \section{Phrase tags} Phrase tags are used to convey special meaning to text: \begin{tabu}{|l|l|} \hline \textbf{Name} & \textbf{Description} \\ \hline \texttt{<em>} & emphasized text \\ \hline \texttt{<strong>} & important text \\ \hline \texttt{<dfn>} & definition term \\ \hline \texttt{<code>} & computer code \\ \hline \texttt{<samp>} & sample output from a computer program \\ \hline \texttt{<kbd>} & keyboard input \\ \hline \texttt{<var>} & variable \\ \hline \end{tabu} \vspace*{\baselineskip} Here is a simple application: \noindent\includegraphics[width=\linewidth]{phrasetags1} \noindent\url{\fthtml phrasetags1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/phrasetags1.html}} \begin{Exercise}[difficulty=1, name={HTML5 Exercise}, counter=exchtml] Create an HTML5 document, which produces the following output (without the border): \noindent\includegraphics[width=\linewidth]{ex2html} Make sure to choose tags that are semantically correct, i.e. convey the right meaning. Don't forget to validate your page. \end{Exercise} \section{HTML entities} Some characters, such as \texttt{<} or \texttt{>}, are reserved in HTML. We thus cannot use them directly in our text as the browser would try to interpret them as part of a tag. To get around this problem, we use character entities. A character entity has the form \texttt{\&entity\_name} or \texttt{\&\#entity\_number}. The following table lists the reserved characters and their corresponding entities (see \url{http://dev.w3.org/html5/html-author/charref} for the complete list and \url{http://digitalmediaminute.com/reference/entity} for the Unicode codes): \\ \begin{tabu}{|l|l|l|l|} \hline \textbf{Character} & \textbf{Entity number} & \textbf{Entity name} & \textbf{Description} \\ \hline \texttt{"} & \texttt{\&\#34;} & \texttt{\"} & quotation mark \\ \hline \texttt{'} & \texttt{\&\#39;} & \texttt{\'} & apostrophe \\ \hline \texttt{\&} & \texttt{\&\#38;} & \texttt{\&} & ampersand \\ \hline \texttt{<} & \texttt{\&\#60;} & \texttt{\<} & less than \\ \hline \texttt{>} & \texttt{\&\#62;} & \texttt{\>} & greater than \\ \hline \end{tabu} \vspace*{\baselineskip} Application example: \noindent\url{\fthtml entities1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/entities1.html}} \section{\texttt{<header>}} The \texttt{<header>} tag specifies a header for a document or section. It should be used for introductory content or navigation elements. You can have several of these in one document, but they cannot be placed within a \texttt{<footer>}, \texttt{<address>} or another \texttt{<header>} element. \section{\texttt{<h1>} ... \texttt{<h6>}} These tags specify headings at different levels: \noindent\url{\fthtml heading1.html} \begin{figure}[h] \begin{minipage}[t]{0.5\textwidth} \vspace{0pt} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/heading1.html}} \end{minipage} \begin{minipage}[t]{0.5\textwidth} \vspace{0pt} \includegraphics[scale=0.5]{heading1} \end{minipage} % \caption{\label{fig:heading1}\texttt{<h1>} ... \texttt{<h6>}} \end{figure} \section{Lists} We can choose between unordered and ordered lists. In each case, every list item is enclosed in \texttt{<li></li>} tags. \begin{mdframed}[linecolor=red, linewidth=3pt, leftmargin=1cm, rightmargin=1cm] \textbf{A paragraph may not contain lists}. \end{mdframed} \subsection{\texttt{<ul>}} %\begin{figure}[h] % \begin{minipage}[t]{0.5\textwidth} % \vspace{0pt} % {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/ul1.html}} % \end{minipage} %\begin{minipage}[t]{0.5\textwidth} % \vspace{0pt} % \includegraphics[scale=0.5]{ul1} % \end{minipage} % \caption{\label{fig:ul1}An unordered list} %\end{figure} %\piccaption[An unordered list]{\label{fig:ul1}An unordered list} \parpic[l]{\includegraphics[scale=0.5]{ul1}} \picskip{0} \vspace*{\baselineskip} \noindent\url{\fthtml ul1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/ul1.html}} \subsection{\texttt{<ol>}} This element supports the following particular attributes: \begin{tabu}{|X|X|X|} \hline \everyrow{\tabucline[0.5pt]{-}} \textbf{Name} & \textbf{Value} & \textbf{Description} \\ \texttt{reversed} & & descending list order \\ \texttt{start} & number & start value \\ \texttt{type} & 1, A, a, I, i & list marker \\ \end{tabu} \vspace*{\baselineskip} %\piccaption[3 ordered lists]{\label{fig:ol1}3 ordered lists} \parpic[l]{\includegraphics[scale=0.5]{ol1}} %\caption{\label{fig:ol1}3 ordered lists} \picskip{0} \vspace*{\baselineskip} \noindent\url{\fthtml ol1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/ol1.html}} The \texttt{style} attribute value of \texttt{float: left} means that the list is floated left. As a result, the following element is placed right to the list instead of underneath. Remove the three style attributes and compare the result. \begin{Exercise}[difficulty=1, name={HTML5 Exercise}, counter=exchtml] Create an HTML5 document with a header and an ordered list that uses the three attributes described above. \end{Exercise} \subsection{Nested lists} We can nest lists. This means we can have a list inside a list inside a list inside a list ... as many times as we want. The only thing we need to watch is the correct nesting, i.e. we need to close the last opened list tag before we close the second last etc. \\ Example: \noindent\includegraphics[width=\linewidth]{nestedlists1} {\url{\fthtml nestedlists1.html}} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/nestedlists1.html}} Like the animation? We'll do plenty of these in section \ref{CSS3Animation}. \subsection{\texttt{<dl>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-dl-element}: \begin{quote} The dl element represents an association list consisting of zero or more name-value groups (a description list). A name-value group consists of one or more names (dt elements) followed by one or more values (dd elements), ignoring any nodes other than dt and dd elements. Within a single dl element, there should not be more than one dt element for each name. \end{quote} \noindent\includegraphics[width=\linewidth]{dl1} \url{\fthtml dl1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/dl1.html}} \begin{Exercise}[difficulty=1, name={HTML5 Exercise}, counter=exchtml] Create an HTML5 document with a description list that describes the 8 competences of the SYSEX1 module (cf. \url{\ft Docs/REFEVAL_2014_2015_DT_IF_INPT1_SYSEX1_22_D.pdf}). \end{Exercise} \section{\label{Hyperlinks}\texttt{<a>}} From \url{http://www.w3schools.com/tags/tag_a.asp}: \begin{quote} The \verb|<a>| tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the \verb|<a>| element is the \verb|href| attribute, which indicates the link's destination. By default, links will appear as follows in all browsers: \begin{enumerate} \item An unvisited link is underlined and {\color{blue}blue}. \item A visited link is underlined and {\color{purple}purple}. \item An active link is underlined and {\color{red}red}. \end{enumerate} \end{quote} This element supports the following particular attributes: \begin{longtabu}{|l|X|X|} \hline \textbf{Name} & \textbf{Value} & \textbf{Description} \\ \hline \texttt{download} & filename & target will be downloaded instead of opened. If filename is omitted it will be saved under the original filename. This works only for files located on the same server than the current page \\ \hline \texttt{href} & URL & URL of the page \\ \hline \texttt{hreflang} & language\_code & language of the linked document \\ \hline \texttt{media} & media\_query & the medium that the document is optimized for \\ \hline \texttt{rel} & alternate, author, bookmark, help, license, next, nofollow, noreferrer, prefetch, prev, search, tag & relationship between the current and the linked document. rel=noreferrer will prevent the destination page from learning which page you came from. \\ \hline \texttt{target} & \texttt{\_blank} \texttt{\_parent} \texttt{\_self} \texttt{\_top} framename & where to open the linked document \\ \hline \end{longtabu} \vspace*{\baselineskip} Here is an example that illustrates different values for the \texttt{href} attribute: \noindent\includegraphics{a1} \url{\fthtml a1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/a1.html}} \url{\fthtml a1contact.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/a1contact.html}} Note that we need to provide the correct path to the file that the hyperlink is linking to via the \texttt{href} attribute. If we are linking to a page on the Internet, we need to specify the complete Unified Resource Locator (URL, cf. \url{https://en.wikipedia.org/wiki/URL}), which consists of the protocol, a colon, two slashes, a host, normally given as a domain name but sometimes as a literal Internet Protocol (IP) address, optionally a port number and finally the full path of the resource. The protocol used to access Internet pages is called Hypertext Transfer Protocol (HTTP). If we link to a file within our web site, we use a relative URL, as shown in line 12 of \texttt{a1.html}. If we link to a file on another server, we need to provide an absolute URL as shown in line 9. If we want to allow the user to send an email by clicking on a hyperlink, we use \texttt{mailto}, as shown in lines 11 to 12 of \verb|a1contact.html|. Note that we can pass additional parameters such as carbon copy (\texttt{cc}) and black carbon copy (\texttt{bcc}) as well as the subject and body. We put a \texttt{?} in front of the parameters. We assign a value to a parameter using \texttt{=} and each parameter/value pair is separated by a \texttt{\&}. Also note that we need to encode spaces using \texttt{\%20}, which is the corresponding hexadecimal (32 decimal) ASCII code (cf. \url{http://www.w3schools.com/tags/ref_ascii.asp}). The example above gives a validation error because of the new lines in the \verb|href| attribute string. The whole string should be in a single line, but this would not allow the clean printing of the code in the book. A hyperlink can also point to another place on the same page. For this purpose, we can use the \texttt{id} attribute on any tag. This is useful if our page contains a huge amount of content and we want to give the user the option to jump directly to a specific location on the page, instead of having to scroll down manually. Here is an example: \url{http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_a_href_anchor} \begin{Exercise}[difficulty=1, name={HTML5 Exercise}, counter=exchtml] Create two HTML5 documents that look like this: \\ % \begin{minipage}[t]{0.5\textwidth} % \vspace{0pt} % \noindent\includegraphics[width=0.5\linewidth]{ex5html} % \end{minipage} % \begin{minipage}[t]{0.5\textwidth} % \vspace{0pt} % \noindent\includegraphics[width=0.5\linewidth]{ex5p2html} % \end{minipage} \\ \noindent\includegraphics[width=0.5\linewidth]{ex5html} \\ \noindent\includegraphics[width=0.5\linewidth]{ex5p2html} \vspace*{\baselineskip} The first page is named \texttt{ex5.html}, the second \texttt{ex5p2.html}. The first link opens the second page in the same window/tab. The second link opens the page \url{http://www.ltam.lu}, also in the same window/tab. The first page includes the following external style sheet, which you should save under the name \texttt{ex5.css}: {\scriptsize\inputminted[tabsize=2, linenos=true]{css}{Exercises/HTML5/ex5.css}} \end{Exercise} \section{\texttt{<img>}} The <img> tag is used to insert an image. This element supports the following particular attributes: \begin{longtabu}{|l|X|X|} \hline %\rowcolor{gray!50} \textbf{Name} & \textbf{Value} & \textbf{Description} \\ \hline \texttt{alt} & text & alternate text for image, \textbf{required for successful validation} \\ \hline \texttt{crossorigin} & anonymous, use-credentials & use third-party site images with canvas (cf. \url{https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes}) \\ \hline \texttt{height} & pixels & image height \\ \hline \texttt{ismap} & ismap & image is a server-side map (cf. \url{http://www.w3schools.com/tags/att_img_ismap.asp}) \\ \hline \texttt{src} & URL & image URL \\ \hline \texttt{usemap} & \#mapname & image is a client-side map (cf. \url{http://www.w3schools.com/tags/att_img_usemap.asp} \\ \hline \texttt{width} & pixels & image width \\ \hline \end{longtabu} The alt attribute is required for successful validation. It can be used by screen readers, search engines and others. It will also be displayed by the browser in case the image cannot be displayed. \textbf{We should always specify the exact width and height of an image, as they allow the browser to allocate the space required to display the image before the image is loaded.} Without them, the browser will have to adjust the page layout after the image has finished loading. We do not use the width and height attributes to change the size of an image, as the full image will still be loaded by the browser. In order to produce a thumbnail for instance, we use a drawing program such as GIMP (\url{http://www.gimp.org}) or an online editor, e.g. \url{http://pixlr.com/editor} (cf. sub section \ref{ImageResizing}). Be careful to specify the correct path and name of the image. Use \texttt{..} to go up to the parent folder and \texttt{/} to separate folder and file names. We can embed images inside hyperlinks, like so: \noindent\includegraphics[width=\linewidth]{img1} \noindent\url{\fthtml img1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/img1.html}} Notice that we have to use quotes here for the value of the \texttt{href} and \texttt{alt} attributes, as they span several lines. The validator won't like this. \subsection{Image formats} The three main image formats used on the Web are JPEG, PNG and GIF. There is a new kid on the block, called Scalable Vector Graphics (SVG), which requires a much deeper understanding to handle but offers a number of advantages, that we'll look into in section \ref{SVG}. The key characteristics of the main image formats are summarized in the following table:\\ \noindent\begin{tabu}{|l|l|X|l|l|} \hline \textbf{Format} & \textbf{Compression} & \textbf{Colors} & \textbf{Transparency} & \textbf{Animation} \\ \hline PNG & lossless & 256 (8 bit), 16.7 million (24 bit) or 4.3 billion (32 bit) & yes & no \\ \hline JPEG & lossy & 16.7 million (24 bit) & no & no \\ \hline GIF & lossless & 256 (8 bit) & yes & yes \\ \hline \end{tabu} \vspace*{\baselineskip} If you don't need animation, PNG is the preferred format, particularly for web graphics. If you want to create animated GIFs, take a loot at GifCam (\url{http://blog.bahraniapps.com/gifcam}), which allows you create and edit screencasts and save them as compact GIF images that can be easily embedded in your HTML5, like so: \subsection{\label{ImageResizing}Image resizing} Resizing an image with GIMP is easy: \\ \noindent\includegraphics[width=\linewidth]{GIMP1} \noindent\includegraphics{GIMP2} \vspace*{\baselineskip} After you've resized the image, export it under a new name: \\ \noindent\includegraphics[width=\linewidth]{GIMP3} \subsection{Adding transparency} We can either use a program such as Online Image Editor (cf. \url{http://www.online-image-editor.com/help/transparency}) or use GIMP (cf. \url{http://www.bogotobogo.com/Gif/gimp-tutorial-transparency.php}) \subsection{\texttt{<map>}} The <map> tag is used to define a client-side image-map. See \url{http://www.w3schools.com/tags/att_img_usemap.asp} for the details. Here is a simple example application: \noindent\url{\fthtml map1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/map1.html}} \subsection{Logo creation} With Inkscape we can create a logo very easily. \noindent\includegraphics{inkscape1} \noindent\includegraphics{inkscape1a} \noindent\includegraphics{inkscape1b} \noindent\includegraphics[width=\linewidth]{inkscape2} \noindent\includegraphics{inkscape2a} \noindent\includegraphics[width=\linewidth]{inkscape3} \noindent\includegraphics[width=\linewidth]{inkscape4} \noindent\includegraphics[width=\linewidth]{inkscape5} %\noindent\includegraphics[width=\linewidth]{inkscape6} \vspace*{\baselineskip} Export the bitmap using Ctrl + Shift + E and select page as export area. %\noindent\includegraphics[width=\linewidth]{inkscape7} \subsection{\texttt{figure} and \texttt{figcaption}} \section{\texttt{<nav>}} This element is used to create the main navigation on a site: \noindent\includegraphics{navigation1} \noindent\url{\fthtml navigation1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/navigation1.html}} Here the CSS3 file (don't worry, we'll address that topic in the next chapter): \noindent\url{\fthtml navigation1.css} {\scriptsize\inputminted[tabsize=2, linenos=true]{css}{HTML5/navigation1.css}} \section{\texttt{<main>}} From the W3C working group (\url{http://www.w3.org/TR/html51/semantics.html#the-main-element}): \begin{quote}The main element represents the main content section of the body of a document or application. The main content section consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application. Note: the main element is not sectioning content and has no effect on the document outline. The main content section of a document includes content that is unique to that document and excludes content that is repeated across a set of documents such as site navigation links, copyright information, site logos and banners and search forms (unless the document or applications main function is that of a search form). Authors MUST NOT include more than one main element in a document. Authors MUST NOT include the main element as a child of an article, aside, footer, header or nav element. \end{quote} \begin{Exercise}[difficulty=2, name={HTML5 Exercise}, counter=exchtml] Create an HTML5 document that uses an image, that you have created, as navigation bar. The user can click on different parts of the image, which will take him to other pages. The main part of the document can be empty. Here is a sample solution: \url{http://youtu.be/-H2x_tGAxSM} \end{Exercise} \section{\texttt{<section>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-section-element}: \begin{quote} The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading. \end{quote} Example: \noindent\includegraphics{section1} \parbox{\textwidth}{\url{\fthtml section1.html}} {\scriptsize \inputminted[tabsize=2, linenos=true]{html}{HTML5/section1.html}} %\begin{Exercise}[difficulty=1, name={HTML5 Exercise}, counter=exchtml] %As fledgling web masters of the universe (WMOTU), we'll develop WMOTU Lab, the ultimate web app development resource site. Create a new project named WMOTULab. The main page contains the following: %\begin{enumerate} %\item A header with a main title. %\end{enumerate} %\end{Exercise} \section{\texttt{<footer>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-footer-element}:\begin{quote} The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like. When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.\end{quote} Example:\\ \url{\fthtml footer1.html} {\scriptsize \inputminted[tabsize=2, linenos=true]{html}{HTML5/footer1.html}} \section{\texttt{<article>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-article-element}: \begin{quote} The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content. \end{quote} Example:\\ \url{\fthtml article1.html} {\scriptsize \inputminted[tabsize=2, linenos=true]{html}{HTML5/article1.html}} \section{\texttt{<aside>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-aside-element}: \begin{quote} The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography. The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page. \end{quote} The link above provides usage examples. \section{\texttt{<div>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-div-element}: \begin{quote} The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements. \textbf{Note}: Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors. \end{quote} \section{\texttt{<q>}} To mark up a short quotation, we use the \texttt{<q>} tag. This element has one special attribute, \texttt{cite}, that can be used to specify the source URL of the quote. Example: \noindent\url{\fthtml q1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/q1.html}} \section{\texttt{<blockquote>}} To mark up a longer quotation from another source, use the \texttt{<blockquote>} tag: \noindent\includegraphics[width=\linewidth]{blockquote1} \noindent\url{\fthtml blockquote1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/blockquote1.html}} \section{Firefox console and Firebug} By pressing \texttt{Shift F2} you open the Firefox console, which is a great tool to analyse web pages: \\ \noindent\includegraphics[width=\linewidth]{FirefoxConsole1.png} %\caption{\label{fig:firefoxconsole1}Firefox console} %\vspace*{\baselineskip} The console tab displays information, warning and error messages and will be one of our most important development tools throughout our web app development journey. The inspector enables us to take a closer look at the styling of a particular element. The debugger will be very helpful to track errors in our JavaScript adventures. The style editor permits the real time changing of the current web page's styles. Try it! The profiler serves to analyse the performance of our app and detect bottleneck. The network tab displays detailed information about what happens on the network. This will be very helpful once we start using HTTP forms and Ajax. By pressing \verb|F12| you open Firebug, if this plugin is installed in your Firefox browser. If not, you should install it by selecting \verb|Add-ons| from the \verb|Tools| menu. Search for Firebug and install it. Firebug provides even more advanced analysis functionality than the console. \section{\texttt{<base>}} \url{http://www.w3schools.com/tags/tag_base.asp} \section{\texttt{<link>}} \url{http://www.w3schools.com/tags/tag_link.asp} \subsection{Style sheet} We have already seen at the beginning of this chapter an example of an external style sheet inclusion. We just have to include a link with the correct relationship attribute in the head of our document: \begin{scriptsize} \begin{minted}[tabsize=2, linenos=true, startinline=true]{html} <link rel="stylesheet" href="style.css"> \end{minted} \end{scriptsize} \subsection{Favicon} \url{https://en.wikipedia.org/wiki/Favicon} \noindent\includegraphics{favicon1} \noindent\url{\fthtml favicon1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/favicon1.html}} We can even have animated favicons, at least in Firefox: \noindent\url{\fthtml favicon2.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/favicon2.html}} Icon files can be 16×16, 32×32, 48×48, or 64×64 pixels in size, and 8-bit, 24-bit, or 32-bit in color depth. \section{\texttt{<meta>}} The \texttt{<meta>} tag is used to provide metadata, i.e. data that describes the document. This data is not displayed on the page, but can be processed by the browser, search engines or other web services. This element supports the following particular attributes: \begin{tabu}{|l|X|X|} \hline \textbf{Name} & \textbf{Value} & \textbf{Description} \\ \hline \texttt{charset} & character set & character encoding for the document, we use utf-8 \\ \hline \texttt{content} & text & value associated with the http-equiv or name attribute \\ \hline \texttt{http-equiv} & content-type, default-style, refresh & create HTTP header for content attribute \\ \hline \texttt{name} & application-name, author, description, generator, keywords & name for the metadata \\ \hline \end{tabu} \vspace*{\baselineskip} We use the charset attribute to specify the character encoding of our document. This should be set to Unicode, i.e. \texttt{utf-8}, as it allows us to use language specific characters such as é and ä. A list of all available character encodings can be found here: \url{http://www.iana.org/assignments/character-sets/character-sets.xhtml}. Before the advent of HTML5, \emph{http-equiv} was used to set the character encoding, but no more. The value \emph{default-style} can be used to specify the preferred stylesheet from a selection of link or style elements in case there are several in your document. The value \emph{refresh} can be used to specify after how many seconds a page should be automatically refreshed (i.e. reloaded) or if it should redirect to another page. This can be useful for a site whose content changes rapidly and where you don't want to use JavaScript. For instance, let's assume you have a new web site and you want users to be automatically transferred from your old site to the new one. On your old site, you'd have the following main page: \par\noindent\url{\fthtml metaredirect1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/metaredirect1.html}} \noindent\url{\fthtml metaredirect2.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/metaredirect2.html}} See also \url{http://www.w3.org/TR/WCAG20-TECHS/H76.html}. The \emph{name} attribute can take one of the following values: \begin{tabu}{|l|X|} \hline \textbf{Value} & \textbf{Description} \\ \hline \texttt{application-name} & name of the Web application \\ \hline \texttt{author} & document author \\ \hline \texttt{description} & description of the page content, can be used by search engines \\ \hline \texttt{generator} & if the page was generated by a specific software \\ \hline \texttt{keywords} & comma-separated list of keywords relevant to the page content targeted at search engines \\ \hline \end{tabu} \vspace*{\baselineskip} Let's look at an example: \noindent\url{\fthtml metaname1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/metaname1.html}} \section{\texttt{<table>}} Tables are used to display tabular data, for instance the current national football league rankings. HTML5 tables must not be used for layout purposes. We'll look at a number of appropriate ways to create a tabular layout later on. A table consists of rows (\texttt{<tr>}) and cells (\texttt{<td>}). Thus, a Tic Tac Toe table would look like this: \noindent\includegraphics{table1} \noindent\url{\fthtml table1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/table1.html}} The \texttt{<table>} tag supports only one attribute, \texttt{border}. It can have no value, \texttt{""} or \texttt{1}. In each of these cases, the table and each cell will have a border 1 pixel wide. Without this attribute the table and cells will have no border. In most cases it is useful to have a table header, which contains the name or description of the data for each column. We may also need a table footer (cf. \url{http://www.w3.org/TR/html51/tabular-data.html#the-tfoot-element}). For this purpose, we split the table into a head, a body and a footer part, using the \texttt{<thead>}, \texttt{<tbody>} and \texttt{<tfoot>} tags. Header cells are displayed centered and bold using the \texttt{<th>} tag instead of \texttt{<td>}. We can add a caption using the \texttt{<caption>} tag. Here's an example: \noindent\includegraphics{table2} \noindent\url{\fthtml table2.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/table2.html}} We can have cells span several columns and/or several rows, using the \texttt{colspan} and \texttt{rowspan} attributes. Example: \noindent\includegraphics{table3} \noindent\url{\fthtml table3.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/table3.html}} The \texttt{<th>} and \texttt{<td>} tags can have a \texttt{headers} attribute. It links a cell to a given header cell. For this to work, the header cell needs an id. This has no impact on the page display, but may be used by screen readers. See \url{http://www.w3schools.com/tags/att_th_headers.asp} for an example. The \texttt{<th>} tag can have a \texttt{scope} attribute, which indicates whether a header cell is a header for a column, row, or group of columns or rows. See \url{http://www.w3schools.com/tags/att_th_scope.asp}. For formatting purposes, we can use the \texttt{<colgroup>} tag, see \url{http://www.w3schools.com/tags/tag_colgroup.asp}. Soon, we'll see how we can style tables with CSS. Here's a little foretaste: \noindent\includegraphics[width=\linewidth]{table4} \noindent\url{\fthtml table4.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/table4.html}} \section{\label{HTMLForms}Forms} HTML forms (\url{http://www.w3.org/TR/html51/semantics.html#forms}) are used to pass data to a server. They are the building blocks that allow the user to provide data to our application. When you use a search engine or buy something in an online shop, you use forms to enter your information. An HTML form can consist of different input elements such as text fields, check boxes, radio-buttons, submit buttons, selection lists, text areas, labels etc. Here's the full list of form tags to be used within \texttt{<form>}: \begin{minipage}{\textwidth} \begin{tabu}{|l|X|} \tabucline[0.5pt black]{-} \everyrow{\tabucline[0.5pt black]{-}} \textbf{Tag} & \textbf{Description} \\ \texttt{<input>} & single line text field \\ \texttt{<textarea>} & multi line text area \\ \texttt{<label>} & label, i.e. a text to be displayed next to a form element \\ \texttt{<fieldset>} & groups related elements \\ \texttt{<legend>} & caption (short description) for a field set \\ \texttt{<select>} & drop-down list \\ \texttt{<optgroup>} & group of related options in a drop-down list \\ \texttt{<option>} & option in a drop-down list \\ \texttt{<button>} & clickable button \\ \texttt{<datalist>} & option list \\ \texttt{<keygen>} & key-pair generator field \\ \texttt{<output>} & result of a calculation \\ \end{tabu} \end{minipage} \vspace*{\baselineskip} All form elements are enclosed within the \texttt{<form>} tag. Here's a simple example: \noindent\includegraphics{HTML_forms1} \noindent\url{\fthtml forms1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/forms1.html}} When you submit your input, the \texttt{forms1.php} script gets executed on the server: {\scriptsize\inputminted[tabsize=2, linenos=true]{html+php}{HTML5/forms1.php}} Don't worry about the PHP part, we'll get into that later. Our example uses two of the most important \texttt{<form>} tag attributes: \texttt{action} and \texttt{method}. The former specifies the script on the server that should receive the form data. The latter indicates the method that should be used to send the data to the server, either \texttt{GET}, which sends the data via the URL or \texttt{POST}, which sends the data embedded within the HTTP (cf. section \ref{Hyperlinks}) request. Run our first form example, open the Firefox console and select the Network tab. Now enter your first and last names and submit the form. You should see something similar to this: \noindent\includegraphics[width=\linewidth]{forms1} %\vspace*{\baselineskip} Now click on the \texttt{forms1.php} line and select the Params tab on the right: \noindent\includegraphics[width=\linewidth]{forms2} \vspace*{\baselineskip} As you can see, your input has been sent as form data, i.e. embedded inside the form. \\ Now let's check what happens if we use the \texttt{GET} method: \noindent\url{\fthtml forms2.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/forms2.html}} When you submit your input, the \texttt{forms2.php} script gets executed on the server: {\scriptsize\inputminted[tabsize=2, linenos=true]{html+php}{HTML5/forms2.php}} If you perform the same network analysis as before, you get this: \noindent\includegraphics[width=\linewidth]{forms3} \vspace*{\baselineskip} You should notice two changes: \begin{enumerate} \item The URL contains a \texttt{?} and an \texttt{\&} as well as the data you entered in the form. \item The parameter tab says that the data has been sent as query string, i.e. as part of the URL and not embedded as form data. \end{enumerate} This means that the form data is visible to everyone and can be easily intercepted, whereas for the \texttt{POST} method this is a little bit more difficult. \texttt{GET} submissions can be bookmarked and URLs are usually stored in log files on the server, whereas the body of HTTP requests usually is not and can also not be bookmarked. We therefore prefer to use the \texttt{POST} method.\\ Here is an overview of all the attributes specific to the \texttt{<form>} tag: \\ \begin{tabu}{|l|X|X|} \tabucline[0.5pt black]{-} \everyrow{\tabucline[0.5pt black]{-}} \textbf{Attribute} & \textbf{Value} & \textbf{Description} \\ \texttt{accept-charset} & character set & character encoding to be used for form submission \\ \texttt{action} & URL & script to receive the form data \\ \texttt{autocomplete} & on/off & turn autocomplete on or off \\ \texttt{enctype} & application/x-www-form-urlencoded, multipart/form-data, text/plain & how the data should be encoded (only for \texttt{POST} method) \\ \texttt{method} & \texttt{GET} or \texttt{POST} & HTTP method to be used \\ \texttt{name} & text & name of the form \\ \texttt{novalidate} & & the form should not be validated upon submission \\ \texttt{target} & \_blank, \_self, \_parent, \_top & display response from server in a new, the current, the parent or the top window/tab \\ \end{tabu} \vspace*{\baselineskip} Given the excellent documentation on W3Schools regarding all form elements, I will not repeat the details here but instead refer you to their site \url{http://www.w3schools.com/html/html_forms.asp}. \textbf{Go through the examples and get a feel for forms. We'll use them throughout our Web app development journey.} Here is a more complete example: \noindent\includegraphics{HTML_forms3} \noindent\url{\fthtml forms3.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/forms3.html}} \subsection{\texttt{<input>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-input-element}: \begin{quote} The \texttt{input} element represents a typed data field, usually with a form control to allow the user to edit the data. \end{quote} Excellent examples can be found at \url{http://www.w3schools.com/tags/tag_input.asp}. Please note that you can prevent the copying, pasting and cutting of input field contents by setting the corresponding event handlers (cf. \ref{Events}) as shown in the password input in the example above. \subsubsection{Input validation with regular expressions} \url{http://www.htmlgoodies.com/html5/markup/telerik-takes-cross-platform-mobile-development-to-the-next-level-for-.net-developers-with-latest-telerik-devcraft-release.html#fbid=WNBB-6q5PXU} \url{http://www.htmlgoodies.com/html5/javascript/understanding-how-html5-validation-works.html#fbid=pLIOaPZ67cu} %\pagebreak %This element supports the following specific attributes: \\ %\begin{longtabu}{|l|X|X|} %\tabucline[0.5pt black]{-} %\everyrow{\tabucline[0.5pt black]{-}} %\textbf{Attribute} & \textbf{Value} & \textbf{Description} \\ %accept & audio/*, video/*, image/*, MIME type & file type accepted by the server for input type \texttt{file} \\ %alt & text & alternate text for input type \texttt{image} \\ %autocomplete & can be set to \texttt{on} or \texttt{off}, but presence of the attribute without value is enough to turn it on & enable autocomplete \\ %autofocus & & activate autofocus for this element \\ %checked & & pre-selects \texttt{checkbox} or \texttt{radio} element \\ %disabled & & disables element \\ %form & form id & form(s) the element belongs to \\ %formaction & URL & URL that will handle the input control and override the \texttt{action} attribute of the form element \\ %formenctype & application/x-www-form-urlencoded, multipart/form-data, text/plain & encoding of the form data for submission to the server for input types \texttt{submit} and \texttt{image} \\ %formmethod & get, post & HTTP method for sending data to the action URL \\ %formnovalidate & & form elements won't be validated on submission \\ %formtarget & \_blank, \_self, \_parent, \_top, framename & where to display the server response for type \texttt{submit} and \texttt{image} \\ %height & pixels & height of an image input element \\ %list & datalist id & id of a datalist element with predefined options for the input element \\ %max & number, date & maximum value \\ %maxlength & number & maximum number of input characters \\ %min & number, date & minimum value \\ %multiple & & user can enter more than one value \\ %name & text & name of element \\ %pattern & regular expression & value is checked against regular expression \\ %placeholder & text & user hint regarding expected content \\ %readonly & & element is read-only (useful if other information needs to be provided first before enabling this element) \\ %required & & field must be filled in before submission is enabled \\ %size & number & width, in characters, of element \\ %src & URL & URL of the image (only for type \texttt{image}) \\ %step & number & legal number intervals \\ %type & button, checkbox, color, date, datetime, datetime-local, email, file, hidden, image, month, number, %password, radio, range, reset, search, submit, tel, text, %time, url, week & type of input element \\ %value & text & value \\ %width & pixels & width for type \texttt{image} \\ %\end{longtabu} %\vspace*{\baselineskip} \subsection{\texttt{<textarea>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-textarea-element}: \begin{quote} The \texttt{textarea} element represents a multiline plain text edit control for the element's raw value. The contents of the control represent the control's default value. The raw value of a \texttt{textarea} control must be initially the empty string. \end{quote} For examples see \url{http://www.w3schools.com/tags/tag_textarea.asp}. \subsection{\texttt{<label>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-label-element}: \begin{quote} The \texttt{label} element represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element's labeled control, either using the \texttt{for} attribute, or by putting the form control inside the label element itself. \end{quote} For examples see \url{http://www.w3schools.com/tags/tag_label.asp}. \subsection{\texttt{<fieldset>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-fieldset-element}: \begin{quote} The \texttt{fieldset} element represents a set of form controls optionally grouped under a common name. The name of the group is given by the first \texttt{legend} element that is a child of the \texttt{fieldset} element, if any. The remainder of the descendants form the group. \end{quote} For examples see \url{http://www.w3schools.com/tags/tag_fieldset.asp}. \subsection{\texttt{<legend>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-legend-element}: \begin{quote} The \texttt{legend} element represents a caption for the rest of the contents of the \texttt{legend} element's parent \texttt{fieldset} element, if any. \end{quote} For examples see \url{http://www.w3schools.com/tags/tag_legend.asp}. \subsection{\texttt{<select>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-select-element}: \begin{quote} The \texttt{select} element represents a control for selecting amongst a set of options. The \texttt{multiple} attribute is a boolean attribute. If the attribute is present, then the \texttt{select} element represents a control for selecting zero or more options from the list of options. If the attribute is absent, then the select element represents a control for selecting a single option from the list of options. The size attribute gives the number of options to show to the user. The size attribute, if specified, must have a value that is a valid non-negative integer greater than zero. The display size of a \texttt{select} element is the result of applying the rules for parsing non-negative integers to the value of element's \texttt{size} attribute, if it has one and parsing it is successful. If applying those rules to the attribute's value is not successful, or if the \texttt{size} attribute is absent, then the element's display size is 4 if the element's \texttt{multiple} content attribute is present, and 1 otherwise. The list of options for a \texttt{select} element consists of all the \texttt{option} element children of the \texttt{select} element, and all the \texttt{option} element children of all the \texttt{optgroup} element children of the \texttt{select} element, in tree order. \end{quote} For examples see \url{http://www.w3schools.com/tags/tag_select.asp}. \subsection{\texttt{<optgroup>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-optgroup-element}: \begin{quote} The \texttt{optgroup} element represents a group of \texttt{option} elements with a common label. \end{quote} For examples see \url{http://www.w3schools.com/tags/tag_optgroup.asp}. \subsection{\texttt{<option>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-option-element}: \begin{quote} The \texttt{option} element represents an option in a \texttt{select} element or as part of a list of suggestions in a \texttt{datalist} element. \end{quote} For examples see \url{http://www.w3schools.com/tags/tag_option.asp}. \subsection{\texttt{<button>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-button-element}: \begin{quote} The \texttt{button} element represents a button labeled by its contents. \end{quote} For examples see \url{http://www.w3schools.com/tags/tag_button.asp}. \subsection{\texttt{<datalist>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-datalist-element}: \begin{quote} The \texttt{datalist} element represents a set of option elements that represent predefined options for other controls. \end{quote} For examples see \url{http://www.w3schools.com/tags/tag_datalist.asp}. \subsection{\texttt{<keygen>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-keygen-element}: \begin{quote} The \texttt{keygen} element represents a key pair generator control. When the control's form is submitted, the private key is stored in the local keystore, and the public key is packaged and sent to the server. \end{quote} For examples see \url{http://www.w3schools.com/tags/tag_keygen.asp}. \subsection{\texttt{<output>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-output-element}: \begin{quote} The \texttt{output} element represents the result of a calculation or user action. \end{quote} For examples see \url{http://www.w3schools.com/tags/tag_output.asp}. \section{\label{BlockVsInline}Block vs inline elements} From \url{http://www.w3schools.com/css/css_display_visibility.asp}: \begin{quote} A block element is an element that takes up the full width available, and has a line break before and after it. Examples of block elements: \begin{itemize} \item \texttt{<h1>} \item \texttt{<p>} \item \texttt{<div>} \end{itemize} An inline element only takes up as much width as necessary, and does not force line breaks. Examples of inline elements: \begin{itemize} \item \texttt{<span>} \item \texttt{<a>} \end{itemize} \end{quote} \noindent\includegraphics[width=\linewidth]{display1} \noindent\url{\fthtml display1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/display1.html}} A complete list of block elements can be found at \url{https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements}. Likewise a list of inline elements is at \url{https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente}. \section{\texttt{<video>}} The \texttt{<video>} tag does what its name suggests, i.e. it defines video. It supports the following particular attributes: \begin{tabu}{|l|l|X|} \hline \everyrow{\hline} \textbf{Name} & \textbf{Value} & \textbf{Description} \\ \texttt{autoplay} & & play video automatically \\ \texttt{controls} & & display video controls \\ \texttt{height} & pixels & height of the video player \\ \texttt{loop} & & video will loop indefinitely (if supported by browser) \\ \texttt{muted} & & muted video output \\ \texttt{poster} & URL & image to be shown while video is downloading and playback has not started \\ \texttt{preload} & \texttt{auto}, \texttt{metadata}, \texttt{none} & how the video should be loaded (cf. \url{http://www.w3schools.com/tags/att_audio_preload.asp}) \\ \texttt{src} & URL & video URL \\ \texttt{width} & pixels & width of the video player \\ \end{tabu} \vspace*{\baselineskip} \subsection{Video file formats} There are three video file formats currently supported. They are MP4, WebM and OGG. Here is a comparison of their main features: \begin{tabu}{|l|X|X|X|} \hline \everyrow{\hline} & \textbf{MP4} & \textbf{WebM} & \textbf{OGG} \\ Firefox & yes & yes & yes \\ Chrome & yes & yes & yes \\ Internet Explorer & yes & no & no \\ Safari & yes & no & no \\ MIME type & video/mp4 & video/webm & video/ogg \\ \end{tabu} \vspace*{\baselineskip} Within the \texttt{<video>} tag we use the \texttt{<source>} tag to specify multiple video sources that the browser can choose from, based on its file format support. If we need to convert between the different video file formats we can use a number of free tools, such as Miro Video Converter (\url{http://www.mirovideoconverter.com}) or Handbrake (\url{http://handbrake.fr}). Here is a simple example of the \texttt{<video>} tag in action: \noindent\includegraphics[width=\linewidth]{video1} \noindent\url{\fthtml video1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/video1.html}} Text inside the \texttt{<video>} opening and closing tag will be shown in browsers that do not support the tag. \subsection{Embedding YouTube videos} An excellent explanation can be found at \url{http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3480061/How-To-Add-a-YouTube-Video-to-Your-Web-Site.htm}. \section{\texttt{<audio>}} The \texttt{<audio>} tag does what its name suggests, i.e. it defines sound. It supports the following particular attributes: \begin{tabu}{|l|l|X|} \hline \everyrow{\hline} \textbf{Name} & \textbf{Value} & \textbf{Description} \\ \texttt{autoplay} & & play audio automatically \\ \texttt{controls} & & display audio controls \\ \texttt{loop} & & audio will loop indefinitely (if supported by browser) \\ \texttt{muted} & & muted audio output \\ \texttt{preload} & \texttt{auto}, \texttt{metadata}, \texttt{none} & how the audio should be loaded (cf. \url{http://www.w3schools.com/tags/att_audio_preload.asp}) \\ \texttt{src} & URL & audio URL \\ \end{tabu} \vspace*{\baselineskip} \subsection{Audio file formats} There are three audio file formats currently supported. They are MP3, WAV and OGG. Here is a comparison of their main features: \begin{tabu}{|l|X|X|X|} \hline \everyrow{\hline} & \textbf{MP3} & \textbf{OGG} & \textbf{WAV} \\ Firefox & yes & yes & yes \\ Chrome & yes & yes & yes \\ Internet Explorer & yes & no & no \\ Safari & yes & yes & no \\ MIME type & audio/mpeg & audio/ogg & audio/wav \\ lossless & no & no & usually yes \\ compressed & yes & yes & usually no \\ \end{tabu} \vspace*{\baselineskip} If we need to convert between the different audio file formats we can use a number of free tools, such as Audacity (\url{http://audacity.sourceforge.net}). To produce our own music, we can use the outstanding LMMS (\url{http://lmms.sourceforge.net}) or AudioTool (\url{http://www.audiotool.com}). Here is a simple example of the \texttt{<audio>} tag in action: \noindent\url{\fthtml audio1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/audio1.html}} Note that the browser will use the first file format that it supports from those listed. The current versions of the main browsers all support MP3. If we only want to support those we can omit the \texttt{<source>} tag: \noindent\url{\fthtml audio2.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/audio2.html}} Text inside the \texttt{<audio>} opening and closing tag will be shown in browsers that do not support the tag. \section{Additional elements} \subsection{\texttt{<pre>}} The <pre> tag defines preformatted text. Text is displayed in a fixed-width font and preserves both spaces and line breaks (cf. \url{http://www.w3schools.com/tags/tag_pre.asp}). Example: \parpic[l]{\includegraphics[scale=0.7]{pre1.png}} \picskip{0} \vspace*{\baselineskip} \parbox{\textwidth}{\url{\fthtml pre1.html}} \\{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/pre1.html}} %\piccaption[Display preformatted text with \texttt{<pre>}]{\label{fig:pre1}Display preformatted text with \texttt{<pre>}} \subsection{\texttt{<mark>}} This element is used to highlight text (cf. \url{http://www.w3schools.com/tags/tag_mark.asp}). Example: \parpic[l]{\includegraphics[scale=0.7]{mark1.png}} \picskip{0} \vspace*{\baselineskip} \noindent\url{\fthtml mark1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/mark1.html}} %\piccaption[Highlight text with \texttt{<mark>}]{\label{fig:mark1}Highlight text with \texttt{<mark>}} \subsection{\texttt{<address>}} This element is used to display contact information for the nearest \texttt{article} or \texttt{body} element (cf. \url{http://www.w3.org/html/wg/drafts/html/CR/sections.html#the-address-element}). Example: \noindent\includegraphics{address1.png} \noindent\url{\fthtml address1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/address1.html}} %\caption{\label{fig:address1}Display contact information with \texttt{<address>}} \vspace*{\baselineskip} \subsection{\texttt{<s>}} \subsection{\texttt{<time>}} \subsection{\texttt{<ins>}} \subsection{\texttt{<del>}} \section{\texttt{<iframe>}} \noindent\url{http://www.w3schools.com/tags/tag_iframe.asp} \noindent\url{http://www.w3.org/TR/html5/embedded-content-0.html#the-iframe-element} \noindent\url{https://www.w3.org/wiki/HTML/Elements/iframe} \noindent\includegraphics[width=\linewidth]{iframe1} \noindent\url{\fthtml iframe1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/iframe1.html}} \noindent\includegraphics[width=\linewidth]{iframe2} \noindent\url{\fthtml iframe2.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/iframe2.html}} \section{\texttt{<embed>}} This tag creates a container for a plug-in, such as Adobe Reader (cf. \url{}): \noindent\includegraphics[width=\linewidth]{embed1} \noindent\url{\fthtml embed1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/embed1.html}} \section{Global attributes} \url{http://www.w3schools.com/tags/ref_standardattributes.asp} \section{Event attributes} \url{http://www.w3schools.com/tags/ref_eventattributes.asp} \section{Copyright} \url{http://creativecommons.org/} \section{Quiz} Take the w3schools quiz at \url{http://www.w3schools.com/quiztest/quiztest.asp?qtest=HTML5} as a fun way to check you are as good as you think you are.

\chapter{\label{HTML5}HTML5} HTML stands for Hyper Text Markup Language. HTML5 is the latest version of this markup language for describing web documents or pages. It consists of a series of \emph{tags}. An element or tag is like a command or instruction that tells the browser about the structure and meaning (also called semantics) of the content of a specific part of our web page. \begin{mdframed}[linecolor=red, linewidth=3pt, leftmargin=1cm, rightmargin=1cm] The official standard can be found at \url{http://www.w3.org/TR/html51}. The complete set of HTML elements can be found at \url{http://www.w3.org/TR/html-markup/elements.html}. An excellent cheat sheet is at \url{http://media.mediatemple.netdna-cdn.com/wp-content/uploads/images/html5-cheat-sheet/html5-cheat-sheet.pdf}. \end{mdframed} \section{Basic structure} \noindent\url{\fthtml skeleton1.html} %\ifpe {\scriptsize \inputminted[tabsize=2, linenos=true]{html}{HTML5/skeleton1.html}} %\else %{\scriptsize %\href{\fthtml skeleton1.html}{\parbox{\textwidth}{ %\inputminted[tabsize=2, linenos=true]{html}{HTML5/skeleton1.html}}}} %\fi \noindent\url{\fthtml style1.css} {\scriptsize \inputminted[tabsize=2, linenos=true]{css}{HTML5/style1.css}} \noindent\url{\fthtml script1.js} {\scriptsize \inputminted[tabsize=2, linenos=true]{javascript}{HTML5/script1.js}} The first line of an HTML5 document should tell the browser how to process the document by specifying the Document Type Definition (DTD). After the DTD comes the \texttt{} tag, which specifies the language using the \texttt{lang} attribute. See \url{http://www.w3schools.com/tags/ref_language_codes.asp} for a list of available language codes. The \texttt{} tag encompasses the whole HTML document consisting of a \texttt{} and a \texttt{} part. \subsection{\texttt{}} In the head part we specify the title and the character encoding, which for our purposes will be \texttt{UTF-8}. \verb|UTF-8| has the advantage that it handles special characters, e.g. ö and é, correctly. To learn more about character encodings, see \url{http://www.w3.org/International/tutorials/tutorial-char-enc}. Then we include our external CSS and JavaScript files (more on those in the following chapters). From \url{http://www.w3schools.com/tags/tag_head.asp}: \begin{quote} The following elements can go inside the \texttt{} element: \begin{itemize} \item (\textbf{this element is required in the head section}) \item <style> \item <base> \item <link> \item <meta> \item <script> \item <noscript> \end{itemize} \end{quote} \subsection{\texttt{<body>}} The body part contains the actual page content. \subsection{Opening and closing tags} For most, but not all, of the HTML5 tags, there is an opening and a closing tag, as in \texttt{<body></body>}. There are a few standalone tags, such as \texttt{<hr>} to display a horizontal line. \subsection{Tabs, new lines and spaces} \textbf{Browsers ignore tabs, new lines and most spaces.} For instance, the following two HTML documents produce exactly the same output except for the words "a well", which have been replaced with "an ill": \\ \sloppy\noindent\url{\fthtml spacedemo1.html} {\scriptsize \inputminted[tabsize=2, linenos=true]{html}{HTML5/spacedemo1.html}} \noindent\url{\fthtml spacedemo2.html} {\scriptsize \inputminted[tabsize=2, linenos=true]{html}{HTML5/spacedemo2.html}} \subsection{Comments} In order to help others (and ourselves) understand our HTML documents, it is a good idea to include comments where appropriate. Comments are embedded between \texttt{<!-{}-} and \texttt{-{}->}. A comment can span several lines and is not displayed by the browser. Example: \noindent\url{\fthtml comments1.html} {\scriptsize \inputminted[tabsize=2, linenos=true]{html}{HTML5/comments1.html}} \section{Validation} In order to be sure that our HTML5 document complies with the official standard and should thus run according to our plans in all compliant browsers, we need to validate our HTML5 and CSS3 files either using the official validators at \url{http://validator.w3.org} and \url{http://jigsaw.w3.org/css-validator} or using the Firefox extension \sloppy \url{http://users.skynet.be/mgueury/mozilla/index.html}. The latter will install a validation button in the Firefox add-on bar. A simple double click will display the source code of the current page and run it automatically through the official HTML5 validator. With a right click on the button we launch the CSS3 validator via the \texttt{Advanced} menu. Here are the outputs of the validators for the solution of the next exercise: \noindent\includegraphics[width=\linewidth]{htmlvalidator1.png} %\caption{\label{fig:htmlvalidation1}The W3C HTML validator} \vspace*{\baselineskip} \noindent\includegraphics[width=\linewidth]{htmlvalidator2} %\caption{\label{fig:htmlvalidation2}The HTML validation Firefox extension} \vspace*{\baselineskip} \noindent\includegraphics[width=\linewidth]{cssvalidator1} %\caption{\label{fig:cssvalidation1}Launching the W3C CSS validator} \vspace*{\baselineskip} \noindent\includegraphics[width=\linewidth]{cssvalidator2} %\caption{\label{fig:cssvalidation2}The W3C CSS validator} \vspace*{\baselineskip} The warning messages can be safely ignored. They just tell us that the validator is still experimental. Given that the HTML5 standard is not expected to be finalized for many years, this is unlikely to change any time soon. \begin{Exercise}[difficulty=1, name={HTML5 Exercise}, counter=exchtml] Write an HTML5 document with the title \texttt{My first HTML5 page} that includes the empty files \texttt{ex1.css} (CSS3) and \texttt{ex1.js} (JavaScript), which you create. Your page displays the text \texttt{I'm learning HTML5!} and passes HTML5 and CSS3 validation without errors. \end{Exercise} \section{Planning} In order to produce a top notch web site, we need to plan our work carefully. \subsection{Brain storming} First we need to think about the purpose of our web site. What are the big concepts and ideas that will drive our content? A useful tool in this respect is a mind map. We'll be using the open source FreeMind software, which is available from \url{http://freemind.sourceforge.net/wiki/index.php/Main_Page}. As an example, here's the mind map for WMOTU Lab v1 (cf. \ref{WMOTULabv1}): \noindent\includegraphics{WMOTU_Lab_v1_mind_map} \subsection{Blueprint} Now that we have clarified the big picture content of our site, it's time to sketch out the rough and basic structure. For this purpose we'll use an open source vector drawing software named Inkscape, available from \url{http://www.inkscape.org}. \noindent\includegraphics{WMOTU_Lab_v1_structure} \subsection{Requirements specification} The standard professional approach to project planning is to produce a requirements specification. Such a document specifies the project requirements, including: \begin{enumerate} \item Functionality \item Prototype/model \item Logical site structure \item Physical site structure \item Time plan \item Development environment and technologies \end{enumerate} Here is a minimalist example for the WMOTU Address Book app developed in \ref{WMOTUAddressBook}: \subsubsection{Functionality} The app serves as an electronic address book. New users need to sign up by providing a login name and password. After logging in, the user enters the main page, where he can logout and view a listing of all his addresses. He can delete or edit each address as well as add a new one. All addresses are stored in a MySQL database on the server. \subsubsection{Prototype/model} \sloppy\url{https://foxi.ltam.lu/PROF/evegi144/T2IF2_WSERS/WAD/HTML5/WMOTUAddressBookPrototype.html} \subsubsection{Logical site structure} \noindent\includegraphics[width=\linewidth]{WMOTU_Address_Book} \subsubsection{Physical site structure} \noindent\includegraphics{WMOTU_Address_Book_Physical} \subsubsection{Time plan} The final product will be delivered electronically on 24.6.14. \subsubsection{Development environment and technologies} Development will be done mainly with PhpStorm. Main technologies used will be HTML5, CSS3, PHP5 and MySQL5. \section{\texttt{<br>}} As we have seen, new lines in our source code are converted to a single space by the browser. To split our text into different lines, we use the \texttt{<br>} tag, which inserts a line break. As already mentioned in this chapter, for most, but not all, HTML5 tags there is an opening and a closing tag. \texttt{<br>} is one of the exceptions. It is a so called empty tag, meaning it has no closing tag. This tag should not be used to separate paragraphs. For the latter purpose we use the \texttt{<p>} tag, cf. \ref{paragraph}. Example: \noindent\includegraphics{br1} \noindent\url{\fthtml br1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/br1.html}} \section{\label{paragraph}\texttt{<p>}} This tag is used to mark up a paragraph. The browser automatically adds margin above and below each paragraph (see section \ref{BlockVsInline}). Example: \noindent\includegraphics[width=\linewidth]{p1} \noindent\url{\fthtml p1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/p1.html}} Resize your browser and observe the behavior of your paragraphs. Note that we've given each paragraph an id attribute. This allows us to style each paragraph's background color individually using CSS. More on this in \ref{CSS3}. \section{Phrase tags} Phrase tags are used to convey special meaning to text: \begin{tabu}{|l|l|} \hline \textbf{Name} & \textbf{Description} \\ \hline \texttt{<em>} & emphasized text \\ \hline \texttt{<strong>} & important text \\ \hline \texttt{<dfn>} & definition term \\ \hline \texttt{<code>} & computer code \\ \hline \texttt{<samp>} & sample output from a computer program \\ \hline \texttt{<kbd>} & keyboard input \\ \hline \texttt{<var>} & variable \\ \hline \end{tabu} \vspace*{\baselineskip} Here is a simple application: \noindent\includegraphics[width=\linewidth]{phrasetags1} \noindent\url{\fthtml phrasetags1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/phrasetags1.html}} \begin{Exercise}[difficulty=1, name={HTML5 Exercise}, counter=exchtml] Create an HTML5 document, which produces the following output (without the border): \noindent\includegraphics[width=\linewidth]{ex2html} Make sure to choose tags that are semantically correct, i.e. convey the right meaning. Don't forget to validate your page. \end{Exercise} \section{HTML entities} Some characters, such as \texttt{<} or \texttt{>}, are reserved in HTML. We thus cannot use them directly in our text as the browser would try to interpret them as part of a tag. To get around this problem, we use character entities. A character entity has the form \texttt{\&entity\_name} or \texttt{\&\#entity\_number}. The following table lists the reserved characters and their corresponding entities (see \url{http://dev.w3.org/html5/html-author/charref} for the complete list and \url{http://digitalmediaminute.com/reference/entity} for the Unicode codes): \\ \begin{tabu}{|l|l|l|l|} \hline \textbf{Character} & \textbf{Entity number} & \textbf{Entity name} & \textbf{Description} \\ \hline \texttt{"} & \texttt{\&\#34;} & \texttt{\"} & quotation mark \\ \hline \texttt{'} & \texttt{\&\#39;} & \texttt{\'} & apostrophe \\ \hline \texttt{\&} & \texttt{\&\#38;} & \texttt{\&} & ampersand \\ \hline \texttt{<} & \texttt{\&\#60;} & \texttt{\<} & less than \\ \hline \texttt{>} & \texttt{\&\#62;} & \texttt{\>} & greater than \\ \hline \end{tabu} \vspace*{\baselineskip} Application example: \noindent\url{\fthtml entities1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/entities1.html}} \section{\texttt{<header>}} The \texttt{<header>} tag specifies a header for a document or section. It should be used for introductory content or navigation elements. You can have several of these in one document, but they cannot be placed within a \texttt{<footer>}, \texttt{<address>} or another \texttt{<header>} element. \section{\texttt{<h1>} ... \texttt{<h6>}} These tags specify headings at different levels: \noindent\url{\fthtml heading1.html} \begin{figure}[h] \begin{minipage}[t]{0.5\textwidth} \vspace{0pt} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/heading1.html}} \end{minipage} \begin{minipage}[t]{0.5\textwidth} \vspace{0pt} \includegraphics[scale=0.5]{heading1} \end{minipage} % \caption{\label{fig:heading1}\texttt{<h1>} ... \texttt{<h6>}} \end{figure} \section{Lists} We can choose between unordered and ordered lists. In each case, every list item is enclosed in \texttt{<li></li>} tags. \begin{mdframed}[linecolor=red, linewidth=3pt, leftmargin=1cm, rightmargin=1cm] \textbf{A paragraph may not contain lists}. \end{mdframed} \subsection{\texttt{<ul>}} %\begin{figure}[h] % \begin{minipage}[t]{0.5\textwidth} % \vspace{0pt} % {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/ul1.html}} % \end{minipage} %\begin{minipage}[t]{0.5\textwidth} % \vspace{0pt} % \includegraphics[scale=0.5]{ul1} % \end{minipage} % \caption{\label{fig:ul1}An unordered list} %\end{figure} %\piccaption[An unordered list]{\label{fig:ul1}An unordered list} \parpic[l]{\includegraphics[scale=0.5]{ul1}} \picskip{0} \vspace*{\baselineskip} \noindent\url{\fthtml ul1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/ul1.html}} \subsection{\texttt{<ol>}} This element supports the following particular attributes: \begin{tabu}{|X|X|X|} \hline \everyrow{\tabucline[0.5pt]{-}} \textbf{Name} & \textbf{Value} & \textbf{Description} \\ \texttt{reversed} & & descending list order \\ \texttt{start} & number & start value \\ \texttt{type} & 1, A, a, I, i & list marker \\ \end{tabu} \vspace*{\baselineskip} %\piccaption[3 ordered lists]{\label{fig:ol1}3 ordered lists} \parpic[l]{\includegraphics[scale=0.5]{ol1}} %\caption{\label{fig:ol1}3 ordered lists} \picskip{0} \vspace*{\baselineskip} \noindent\url{\fthtml ol1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/ol1.html}} The \texttt{style} attribute value of \texttt{float: left} means that the list is floated left. As a result, the following element is placed right to the list instead of underneath. Remove the three style attributes and compare the result. \begin{Exercise}[difficulty=1, name={HTML5 Exercise}, counter=exchtml] Create an HTML5 document with a header and an ordered list that uses the three attributes described above. \end{Exercise} \subsection{Nested lists} We can nest lists. This means we can have a list inside a list inside a list inside a list ... as many times as we want. The only thing we need to watch is the correct nesting, i.e. we need to close the last opened list tag before we close the second last etc. \\ Example: \noindent\includegraphics[width=\linewidth]{nestedlists1} {\url{\fthtml nestedlists1.html}} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/nestedlists1.html}} Like the animation? We'll do plenty of these in section \ref{CSS3Animation}. \subsection{\texttt{<dl>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-dl-element}: \begin{quote} The dl element represents an association list consisting of zero or more name-value groups (a description list). A name-value group consists of one or more names (dt elements) followed by one or more values (dd elements), ignoring any nodes other than dt and dd elements. Within a single dl element, there should not be more than one dt element for each name. \end{quote} \noindent\includegraphics[width=\linewidth]{dl1} \url{\fthtml dl1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/dl1.html}} \begin{Exercise}[difficulty=1, name={HTML5 Exercise}, counter=exchtml] Create an HTML5 document with a description list that describes the 8 competences of the SYSEX1 module (cf. \url{\ft Docs/REFEVAL_2014_2015_DT_IF_INPT1_SYSEX1_22_D.pdf}). \end{Exercise} \section{\label{Hyperlinks}\texttt{<a>}} From \url{http://www.w3schools.com/tags/tag_a.asp}: \begin{quote} The \verb|<a>| tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the \verb|<a>| element is the \verb|href| attribute, which indicates the link's destination. By default, links will appear as follows in all browsers: \begin{enumerate} \item An unvisited link is underlined and {\color{blue}blue}. \item A visited link is underlined and {\color{purple}purple}. \item An active link is underlined and {\color{red}red}. \end{enumerate} \end{quote} This element supports the following particular attributes: \begin{longtabu}{|l|X|X|} \hline \textbf{Name} & \textbf{Value} & \textbf{Description} \\ \hline \texttt{download} & filename & target will be downloaded instead of opened. If filename is omitted it will be saved under the original filename. This works only for files located on the same server than the current page \\ \hline \texttt{href} & URL & URL of the page \\ \hline \texttt{hreflang} & language\_code & language of the linked document \\ \hline \texttt{media} & media\_query & the medium that the document is optimized for \\ \hline \texttt{rel} & alternate, author, bookmark, help, license, next, nofollow, noreferrer, prefetch, prev, search, tag & relationship between the current and the linked document. rel=noreferrer will prevent the destination page from learning which page you came from. \\ \hline \texttt{target} & \texttt{\_blank} \texttt{\_parent} \texttt{\_self} \texttt{\_top} framename & where to open the linked document \\ \hline \end{longtabu} \vspace*{\baselineskip} Here is an example that illustrates different values for the \texttt{href} attribute: \noindent\includegraphics{a1} \url{\fthtml a1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/a1.html}} \url{\fthtml a1contact.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/a1contact.html}} Note that we need to provide the correct path to the file that the hyperlink is linking to via the \texttt{href} attribute. If we are linking to a page on the Internet, we need to specify the complete Unified Resource Locator (URL, cf. \url{https://en.wikipedia.org/wiki/URL}), which consists of the protocol, a colon, two slashes, a host, normally given as a domain name but sometimes as a literal Internet Protocol (IP) address, optionally a port number and finally the full path of the resource. The protocol used to access Internet pages is called Hypertext Transfer Protocol (HTTP). If we link to a file within our web site, we use a relative URL, as shown in line 12 of \texttt{a1.html}. If we link to a file on another server, we need to provide an absolute URL as shown in line 9. If we want to allow the user to send an email by clicking on a hyperlink, we use \texttt{mailto}, as shown in lines 11 to 12 of \verb|a1contact.html|. Note that we can pass additional parameters such as carbon copy (\texttt{cc}) and black carbon copy (\texttt{bcc}) as well as the subject and body. We put a \texttt{?} in front of the parameters. We assign a value to a parameter using \texttt{=} and each parameter/value pair is separated by a \texttt{\&}. Also note that we need to encode spaces using \texttt{\%20}, which is the corresponding hexadecimal (32 decimal) ASCII code (cf. \url{http://www.w3schools.com/tags/ref_ascii.asp}). The example above gives a validation error because of the new lines in the \verb|href| attribute string. The whole string should be in a single line, but this would not allow the clean printing of the code in the book. A hyperlink can also point to another place on the same page. For this purpose, we can use the \texttt{id} attribute on any tag. This is useful if our page contains a huge amount of content and we want to give the user the option to jump directly to a specific location on the page, instead of having to scroll down manually. Here is an example: \url{http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_a_href_anchor} \begin{Exercise}[difficulty=1, name={HTML5 Exercise}, counter=exchtml] Create two HTML5 documents that look like this: \\ % \begin{minipage}[t]{0.5\textwidth} % \vspace{0pt} % \noindent\includegraphics[width=0.5\linewidth]{ex5html} % \end{minipage} % \begin{minipage}[t]{0.5\textwidth} % \vspace{0pt} % \noindent\includegraphics[width=0.5\linewidth]{ex5p2html} % \end{minipage} \\ \noindent\includegraphics[width=0.5\linewidth]{ex5html} \\ \noindent\includegraphics[width=0.5\linewidth]{ex5p2html} \vspace*{\baselineskip} The first page is named \texttt{ex5.html}, the second \texttt{ex5p2.html}. The first link opens the second page in the same window/tab. The second link opens the page \url{http://www.ltam.lu}, also in the same window/tab. The first page includes the following external style sheet, which you should save under the name \texttt{ex5.css}: {\scriptsize\inputminted[tabsize=2, linenos=true]{css}{Exercises/HTML5/ex5.css}} \end{Exercise} \section{\texttt{<img>}} The <img> tag is used to insert an image. This element supports the following particular attributes: \begin{longtabu}{|l|X|X|} \hline %\rowcolor{gray!50} \textbf{Name} & \textbf{Value} & \textbf{Description} \\ \hline \texttt{alt} & text & alternate text for image, \textbf{required for successful validation} \\ \hline \texttt{crossorigin} & anonymous, use-credentials & use third-party site images with canvas (cf. \url{https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes}) \\ \hline \texttt{height} & pixels & image height \\ \hline \texttt{ismap} & ismap & image is a server-side map (cf. \url{http://www.w3schools.com/tags/att_img_ismap.asp}) \\ \hline \texttt{src} & URL & image URL \\ \hline \texttt{usemap} & \#mapname & image is a client-side map (cf. \url{http://www.w3schools.com/tags/att_img_usemap.asp} \\ \hline \texttt{width} & pixels & image width \\ \hline \end{longtabu} The alt attribute is required for successful validation. It can be used by screen readers, search engines and others. It will also be displayed by the browser in case the image cannot be displayed. \textbf{We should always specify the exact width and height of an image, as they allow the browser to allocate the space required to display the image before the image is loaded.} Without them, the browser will have to adjust the page layout after the image has finished loading. We do not use the width and height attributes to change the size of an image, as the full image will still be loaded by the browser. In order to produce a thumbnail for instance, we use a drawing program such as GIMP (\url{http://www.gimp.org}) or an online editor, e.g. \url{http://pixlr.com/editor} (cf. sub section \ref{ImageResizing}). Be careful to specify the correct path and name of the image. Use \texttt{..} to go up to the parent folder and \texttt{/} to separate folder and file names. We can embed images inside hyperlinks, like so: \noindent\includegraphics[width=\linewidth]{img1} \noindent\url{\fthtml img1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/img1.html}} Notice that we have to use quotes here for the value of the \texttt{href} and \texttt{alt} attributes, as they span several lines. The validator won't like this. \subsection{Image formats} The three main image formats used on the Web are JPEG, PNG and GIF. There is a new kid on the block, called Scalable Vector Graphics (SVG), which requires a much deeper understanding to handle but offers a number of advantages, that we'll look into in section \ref{SVG}. The key characteristics of the main image formats are summarized in the following table:\\ \noindent\begin{tabu}{|l|l|X|l|l|} \hline \textbf{Format} & \textbf{Compression} & \textbf{Colors} & \textbf{Transparency} & \textbf{Animation} \\ \hline PNG & lossless & 256 (8 bit), 16.7 million (24 bit) or 4.3 billion (32 bit) & yes & no \\ \hline JPEG & lossy & 16.7 million (24 bit) & no & no \\ \hline GIF & lossless & 256 (8 bit) & yes & yes \\ \hline \end{tabu} \vspace*{\baselineskip} If you don't need animation, PNG is the preferred format, particularly for web graphics. If you want to create animated GIFs, take a loot at GifCam (\url{http://blog.bahraniapps.com/gifcam}), which allows you create and edit screencasts and save them as compact GIF images that can be easily embedded in your HTML5, like so: \subsection{\label{ImageResizing}Image resizing} Resizing an image with GIMP is easy: \\ \noindent\includegraphics[width=\linewidth]{GIMP1} \noindent\includegraphics{GIMP2} \vspace*{\baselineskip} After you've resized the image, export it under a new name: \\ \noindent\includegraphics[width=\linewidth]{GIMP3} \subsection{Adding transparency} We can either use a program such as Online Image Editor (cf. \url{http://www.online-image-editor.com/help/transparency}) or use GIMP (cf. \url{http://www.bogotobogo.com/Gif/gimp-tutorial-transparency.php}) \subsection{\texttt{<map>}} The <map> tag is used to define a client-side image-map. See \url{http://www.w3schools.com/tags/att_img_usemap.asp} for the details. Here is a simple example application: \noindent\url{\fthtml map1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/map1.html}} \subsection{Logo creation} With Inkscape we can create a logo very easily. \noindent\includegraphics{inkscape1} \noindent\includegraphics{inkscape1a} \noindent\includegraphics{inkscape1b} \noindent\includegraphics[width=\linewidth]{inkscape2} \noindent\includegraphics{inkscape2a} \noindent\includegraphics[width=\linewidth]{inkscape3} \noindent\includegraphics[width=\linewidth]{inkscape4} \noindent\includegraphics[width=\linewidth]{inkscape5} %\noindent\includegraphics[width=\linewidth]{inkscape6} \vspace*{\baselineskip} Export the bitmap using Ctrl + Shift + E and select page as export area. %\noindent\includegraphics[width=\linewidth]{inkscape7} \subsection{\texttt{figure} and \texttt{figcaption}} \section{\texttt{<nav>}} This element is used to create the main navigation on a site: \noindent\includegraphics{navigation1} \noindent\url{\fthtml navigation1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/navigation1.html}} Here the CSS3 file (don't worry, we'll address that topic in the next chapter): \noindent\url{\fthtml navigation1.css} {\scriptsize\inputminted[tabsize=2, linenos=true]{css}{HTML5/navigation1.css}} \section{\texttt{<main>}} From the W3C working group (\url{http://www.w3.org/TR/html51/semantics.html#the-main-element}): \begin{quote}The main element represents the main content section of the body of a document or application. The main content section consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application. Note: the main element is not sectioning content and has no effect on the document outline. The main content section of a document includes content that is unique to that document and excludes content that is repeated across a set of documents such as site navigation links, copyright information, site logos and banners and search forms (unless the document or applications main function is that of a search form). Authors MUST NOT include more than one main element in a document. Authors MUST NOT include the main element as a child of an article, aside, footer, header or nav element. \end{quote} \begin{Exercise}[difficulty=2, name={HTML5 Exercise}, counter=exchtml] Create an HTML5 document that uses an image, that you have created, as navigation bar. The user can click on different parts of the image, which will take him to other pages. The main part of the document can be empty. Here is a sample solution: \url{http://youtu.be/-H2x_tGAxSM} \end{Exercise} \section{\texttt{<section>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-section-element}: \begin{quote} The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading. \end{quote} Example: \noindent\includegraphics{section1} \parbox{\textwidth}{\url{\fthtml section1.html}} {\scriptsize \inputminted[tabsize=2, linenos=true]{html}{HTML5/section1.html}} %\begin{Exercise}[difficulty=1, name={HTML5 Exercise}, counter=exchtml] %As fledgling web masters of the universe (WMOTU), we'll develop WMOTU Lab, the ultimate web app development resource site. Create a new project named WMOTULab. The main page contains the following: %\begin{enumerate} %\item A header with a main title. %\end{enumerate} %\end{Exercise} \section{\texttt{<footer>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-footer-element}:\begin{quote} The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like. When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.\end{quote} Example:\\ \url{\fthtml footer1.html} {\scriptsize \inputminted[tabsize=2, linenos=true]{html}{HTML5/footer1.html}} \section{\texttt{<article>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-article-element}: \begin{quote} The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content. \end{quote} Example:\\ \url{\fthtml article1.html} {\scriptsize \inputminted[tabsize=2, linenos=true]{html}{HTML5/article1.html}} \section{\texttt{<aside>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-aside-element}: \begin{quote} The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography. The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page. \end{quote} The link above provides usage examples. \section{\texttt{<div>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-div-element}: \begin{quote} The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements. \textbf{Note}: Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors. \end{quote} \section{\texttt{<q>}} To mark up a short quotation, we use the \texttt{<q>} tag. This element has one special attribute, \texttt{cite}, that can be used to specify the source URL of the quote. Example: \noindent\url{\fthtml q1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/q1.html}} \section{\texttt{<blockquote>}} To mark up a longer quotation from another source, use the \texttt{<blockquote>} tag: \noindent\includegraphics[width=\linewidth]{blockquote1} \noindent\url{\fthtml blockquote1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/blockquote1.html}} \section{Firefox console and Firebug} By pressing \texttt{Shift F2} you open the Firefox console, which is a great tool to analyse web pages: \\ \noindent\includegraphics[width=\linewidth]{FirefoxConsole1.png} %\caption{\label{fig:firefoxconsole1}Firefox console} %\vspace*{\baselineskip} The console tab displays information, warning and error messages and will be one of our most important development tools throughout our web app development journey. The inspector enables us to take a closer look at the styling of a particular element. The debugger will be very helpful to track errors in our JavaScript adventures. The style editor permits the real time changing of the current web page's styles. Try it! The profiler serves to analyse the performance of our app and detect bottleneck. The network tab displays detailed information about what happens on the network. This will be very helpful once we start using HTTP forms and Ajax. By pressing \verb|F12| you open Firebug, if this plugin is installed in your Firefox browser. If not, you should install it by selecting \verb|Add-ons| from the \verb|Tools| menu. Search for Firebug and install it. Firebug provides even more advanced analysis functionality than the console. \section{\texttt{<base>}} \url{http://www.w3schools.com/tags/tag_base.asp} \section{\texttt{<link>}} \url{http://www.w3schools.com/tags/tag_link.asp} \subsection{Style sheet} We have already seen at the beginning of this chapter an example of an external style sheet inclusion. We just have to include a link with the correct relationship attribute in the head of our document: \begin{scriptsize} \begin{minted}[tabsize=2, linenos=true, startinline=true]{html} <link rel="stylesheet" href="style.css"> \end{minted} \end{scriptsize} \subsection{Favicon} \url{https://en.wikipedia.org/wiki/Favicon} \noindent\includegraphics{favicon1} \noindent\url{\fthtml favicon1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/favicon1.html}} We can even have animated favicons, at least in Firefox: \noindent\url{\fthtml favicon2.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/favicon2.html}} Icon files can be 16×16, 32×32, 48×48, or 64×64 pixels in size, and 8-bit, 24-bit, or 32-bit in color depth. \section{\texttt{<meta>}} The \texttt{<meta>} tag is used to provide metadata, i.e. data that describes the document. This data is not displayed on the page, but can be processed by the browser, search engines or other web services. This element supports the following particular attributes: \begin{tabu}{|l|X|X|} \hline \textbf{Name} & \textbf{Value} & \textbf{Description} \\ \hline \texttt{charset} & character set & character encoding for the document, we use utf-8 \\ \hline \texttt{content} & text & value associated with the http-equiv or name attribute \\ \hline \texttt{http-equiv} & content-type, default-style, refresh & create HTTP header for content attribute \\ \hline \texttt{name} & application-name, author, description, generator, keywords & name for the metadata \\ \hline \end{tabu} \vspace*{\baselineskip} We use the charset attribute to specify the character encoding of our document. This should be set to Unicode, i.e. \texttt{utf-8}, as it allows us to use language specific characters such as é and ä. A list of all available character encodings can be found here: \url{http://www.iana.org/assignments/character-sets/character-sets.xhtml}. Before the advent of HTML5, \emph{http-equiv} was used to set the character encoding, but no more. The value \emph{default-style} can be used to specify the preferred stylesheet from a selection of link or style elements in case there are several in your document. The value \emph{refresh} can be used to specify after how many seconds a page should be automatically refreshed (i.e. reloaded) or if it should redirect to another page. This can be useful for a site whose content changes rapidly and where you don't want to use JavaScript. For instance, let's assume you have a new web site and you want users to be automatically transferred from your old site to the new one. On your old site, you'd have the following main page: \par\noindent\url{\fthtml metaredirect1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/metaredirect1.html}} \noindent\url{\fthtml metaredirect2.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/metaredirect2.html}} See also \url{http://www.w3.org/TR/WCAG20-TECHS/H76.html}. The \emph{name} attribute can take one of the following values: \begin{tabu}{|l|X|} \hline \textbf{Value} & \textbf{Description} \\ \hline \texttt{application-name} & name of the Web application \\ \hline \texttt{author} & document author \\ \hline \texttt{description} & description of the page content, can be used by search engines \\ \hline \texttt{generator} & if the page was generated by a specific software \\ \hline \texttt{keywords} & comma-separated list of keywords relevant to the page content targeted at search engines \\ \hline \end{tabu} \vspace*{\baselineskip} Let's look at an example: \noindent\url{\fthtml metaname1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/metaname1.html}} \section{\texttt{<table>}} Tables are used to display tabular data, for instance the current national football league rankings. HTML5 tables must not be used for layout purposes. We'll look at a number of appropriate ways to create a tabular layout later on. A table consists of rows (\texttt{<tr>}) and cells (\texttt{<td>}). Thus, a Tic Tac Toe table would look like this: \noindent\includegraphics{table1} \noindent\url{\fthtml table1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/table1.html}} The \texttt{<table>} tag supports only one attribute, \texttt{border}. It can have no value, \texttt{""} or \texttt{1}. In each of these cases, the table and each cell will have a border 1 pixel wide. Without this attribute the table and cells will have no border. In most cases it is useful to have a table header, which contains the name or description of the data for each column. We may also need a table footer (cf. \url{http://www.w3.org/TR/html51/tabular-data.html#the-tfoot-element}). For this purpose, we split the table into a head, a body and a footer part, using the \texttt{<thead>}, \texttt{<tbody>} and \texttt{<tfoot>} tags. Header cells are displayed centered and bold using the \texttt{<th>} tag instead of \texttt{<td>}. We can add a caption using the \texttt{<caption>} tag. Here's an example: \noindent\includegraphics{table2} \noindent\url{\fthtml table2.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/table2.html}} We can have cells span several columns and/or several rows, using the \texttt{colspan} and \texttt{rowspan} attributes. Example: \noindent\includegraphics{table3} \noindent\url{\fthtml table3.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/table3.html}} The \texttt{<th>} and \texttt{<td>} tags can have a \texttt{headers} attribute. It links a cell to a given header cell. For this to work, the header cell needs an id. This has no impact on the page display, but may be used by screen readers. See \url{http://www.w3schools.com/tags/att_th_headers.asp} for an example. The \texttt{<th>} tag can have a \texttt{scope} attribute, which indicates whether a header cell is a header for a column, row, or group of columns or rows. See \url{http://www.w3schools.com/tags/att_th_scope.asp}. For formatting purposes, we can use the \texttt{<colgroup>} tag, see \url{http://www.w3schools.com/tags/tag_colgroup.asp}. Soon, we'll see how we can style tables with CSS. Here's a little foretaste: \noindent\includegraphics[width=\linewidth]{table4} \noindent\url{\fthtml table4.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/table4.html}} \section{\label{HTMLForms}Forms} HTML forms (\url{http://www.w3.org/TR/html51/semantics.html#forms}) are used to pass data to a server. They are the building blocks that allow the user to provide data to our application. When you use a search engine or buy something in an online shop, you use forms to enter your information. An HTML form can consist of different input elements such as text fields, check boxes, radio-buttons, submit buttons, selection lists, text areas, labels etc. Here's the full list of form tags to be used within \texttt{<form>}: \begin{minipage}{\textwidth} \begin{tabu}{|l|X|} \tabucline[0.5pt black]{-} \everyrow{\tabucline[0.5pt black]{-}} \textbf{Tag} & \textbf{Description} \\ \texttt{<input>} & single line text field \\ \texttt{<textarea>} & multi line text area \\ \texttt{<label>} & label, i.e. a text to be displayed next to a form element \\ \texttt{<fieldset>} & groups related elements \\ \texttt{<legend>} & caption (short description) for a field set \\ \texttt{<select>} & drop-down list \\ \texttt{<optgroup>} & group of related options in a drop-down list \\ \texttt{<option>} & option in a drop-down list \\ \texttt{<button>} & clickable button \\ \texttt{<datalist>} & option list \\ \texttt{<keygen>} & key-pair generator field \\ \texttt{<output>} & result of a calculation \\ \end{tabu} \end{minipage} \vspace*{\baselineskip} All form elements are enclosed within the \texttt{<form>} tag. Here's a simple example: \noindent\includegraphics{HTML_forms1} \noindent\url{\fthtml forms1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/forms1.html}} When you submit your input, the \texttt{forms1.php} script gets executed on the server: {\scriptsize\inputminted[tabsize=2, linenos=true]{html+php}{HTML5/forms1.php}} Don't worry about the PHP part, we'll get into that later. Our example uses two of the most important \texttt{<form>} tag attributes: \texttt{action} and \texttt{method}. The former specifies the script on the server that should receive the form data. The latter indicates the method that should be used to send the data to the server, either \texttt{GET}, which sends the data via the URL or \texttt{POST}, which sends the data embedded within the HTTP (cf. section \ref{Hyperlinks}) request. Run our first form example, open the Firefox console and select the Network tab. Now enter your first and last names and submit the form. You should see something similar to this: \noindent\includegraphics[width=\linewidth]{forms1} %\vspace*{\baselineskip} Now click on the \texttt{forms1.php} line and select the Params tab on the right: \noindent\includegraphics[width=\linewidth]{forms2} \vspace*{\baselineskip} As you can see, your input has been sent as form data, i.e. embedded inside the form. \\ Now let's check what happens if we use the \texttt{GET} method: \noindent\url{\fthtml forms2.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/forms2.html}} When you submit your input, the \texttt{forms2.php} script gets executed on the server: {\scriptsize\inputminted[tabsize=2, linenos=true]{html+php}{HTML5/forms2.php}} If you perform the same network analysis as before, you get this: \noindent\includegraphics[width=\linewidth]{forms3} \vspace*{\baselineskip} You should notice two changes: \begin{enumerate} \item The URL contains a \texttt{?} and an \texttt{\&} as well as the data you entered in the form. \item The parameter tab says that the data has been sent as query string, i.e. as part of the URL and not embedded as form data. \end{enumerate} This means that the form data is visible to everyone and can be easily intercepted, whereas for the \texttt{POST} method this is a little bit more difficult. \texttt{GET} submissions can be bookmarked and URLs are usually stored in log files on the server, whereas the body of HTTP requests usually is not and can also not be bookmarked. We therefore prefer to use the \texttt{POST} method.\\ Here is an overview of all the attributes specific to the \texttt{<form>} tag: \\ \begin{tabu}{|l|X|X|} \tabucline[0.5pt black]{-} \everyrow{\tabucline[0.5pt black]{-}} \textbf{Attribute} & \textbf{Value} & \textbf{Description} \\ \texttt{accept-charset} & character set & character encoding to be used for form submission \\ \texttt{action} & URL & script to receive the form data \\ \texttt{autocomplete} & on/off & turn autocomplete on or off \\ \texttt{enctype} & application/x-www-form-urlencoded, multipart/form-data, text/plain & how the data should be encoded (only for \texttt{POST} method) \\ \texttt{method} & \texttt{GET} or \texttt{POST} & HTTP method to be used \\ \texttt{name} & text & name of the form \\ \texttt{novalidate} & & the form should not be validated upon submission \\ \texttt{target} & \_blank, \_self, \_parent, \_top & display response from server in a new, the current, the parent or the top window/tab \\ \end{tabu} \vspace*{\baselineskip} Given the excellent documentation on W3Schools regarding all form elements, I will not repeat the details here but instead refer you to their site \url{http://www.w3schools.com/html/html_forms.asp}. \textbf{Go through the examples and get a feel for forms. We'll use them throughout our Web app development journey.} Here is a more complete example: \noindent\includegraphics{HTML_forms3} \noindent\url{\fthtml forms3.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/forms3.html}} \subsection{\texttt{<input>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-input-element}: \begin{quote} The \texttt{input} element represents a typed data field, usually with a form control to allow the user to edit the data. \end{quote} Excellent examples can be found at \url{http://www.w3schools.com/tags/tag_input.asp}. Please note that you can prevent the copying, pasting and cutting of input field contents by setting the corresponding event handlers (cf. \ref{Events}) as shown in the password input in the example above. \subsubsection{Input validation with regular expressions} \url{http://www.htmlgoodies.com/html5/markup/telerik-takes-cross-platform-mobile-development-to-the-next-level-for-.net-developers-with-latest-telerik-devcraft-release.html#fbid=WNBB-6q5PXU} \url{http://www.htmlgoodies.com/html5/javascript/understanding-how-html5-validation-works.html#fbid=pLIOaPZ67cu} %\pagebreak %This element supports the following specific attributes: \\ %\begin{longtabu}{|l|X|X|} %\tabucline[0.5pt black]{-} %\everyrow{\tabucline[0.5pt black]{-}} %\textbf{Attribute} & \textbf{Value} & \textbf{Description} \\ %accept & audio/*, video/*, image/*, MIME type & file type accepted by the server for input type \texttt{file} \\ %alt & text & alternate text for input type \texttt{image} \\ %autocomplete & can be set to \texttt{on} or \texttt{off}, but presence of the attribute without value is enough to turn it on & enable autocomplete \\ %autofocus & & activate autofocus for this element \\ %checked & & pre-selects \texttt{checkbox} or \texttt{radio} element \\ %disabled & & disables element \\ %form & form id & form(s) the element belongs to \\ %formaction & URL & URL that will handle the input control and override the \texttt{action} attribute of the form element \\ %formenctype & application/x-www-form-urlencoded, multipart/form-data, text/plain & encoding of the form data for submission to the server for input types \texttt{submit} and \texttt{image} \\ %formmethod & get, post & HTTP method for sending data to the action URL \\ %formnovalidate & & form elements won't be validated on submission \\ %formtarget & \_blank, \_self, \_parent, \_top, framename & where to display the server response for type \texttt{submit} and \texttt{image} \\ %height & pixels & height of an image input element \\ %list & datalist id & id of a datalist element with predefined options for the input element \\ %max & number, date & maximum value \\ %maxlength & number & maximum number of input characters \\ %min & number, date & minimum value \\ %multiple & & user can enter more than one value \\ %name & text & name of element \\ %pattern & regular expression & value is checked against regular expression \\ %placeholder & text & user hint regarding expected content \\ %readonly & & element is read-only (useful if other information needs to be provided first before enabling this element) \\ %required & & field must be filled in before submission is enabled \\ %size & number & width, in characters, of element \\ %src & URL & URL of the image (only for type \texttt{image}) \\ %step & number & legal number intervals \\ %type & button, checkbox, color, date, datetime, datetime-local, email, file, hidden, image, month, number, %password, radio, range, reset, search, submit, tel, text, %time, url, week & type of input element \\ %value & text & value \\ %width & pixels & width for type \texttt{image} \\ %\end{longtabu} %\vspace*{\baselineskip} \subsection{\texttt{<textarea>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-textarea-element}: \begin{quote} The \texttt{textarea} element represents a multiline plain text edit control for the element's raw value. The contents of the control represent the control's default value. The raw value of a \texttt{textarea} control must be initially the empty string. \end{quote} For examples see \url{http://www.w3schools.com/tags/tag_textarea.asp}. \subsection{\texttt{<label>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-label-element}: \begin{quote} The \texttt{label} element represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element's labeled control, either using the \texttt{for} attribute, or by putting the form control inside the label element itself. \end{quote} For examples see \url{http://www.w3schools.com/tags/tag_label.asp}. \subsection{\texttt{<fieldset>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-fieldset-element}: \begin{quote} The \texttt{fieldset} element represents a set of form controls optionally grouped under a common name. The name of the group is given by the first \texttt{legend} element that is a child of the \texttt{fieldset} element, if any. The remainder of the descendants form the group. \end{quote} For examples see \url{http://www.w3schools.com/tags/tag_fieldset.asp}. \subsection{\texttt{<legend>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-legend-element}: \begin{quote} The \texttt{legend} element represents a caption for the rest of the contents of the \texttt{legend} element's parent \texttt{fieldset} element, if any. \end{quote} For examples see \url{http://www.w3schools.com/tags/tag_legend.asp}. \subsection{\texttt{<select>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-select-element}: \begin{quote} The \texttt{select} element represents a control for selecting amongst a set of options. The \texttt{multiple} attribute is a boolean attribute. If the attribute is present, then the \texttt{select} element represents a control for selecting zero or more options from the list of options. If the attribute is absent, then the select element represents a control for selecting a single option from the list of options. The size attribute gives the number of options to show to the user. The size attribute, if specified, must have a value that is a valid non-negative integer greater than zero. The display size of a \texttt{select} element is the result of applying the rules for parsing non-negative integers to the value of element's \texttt{size} attribute, if it has one and parsing it is successful. If applying those rules to the attribute's value is not successful, or if the \texttt{size} attribute is absent, then the element's display size is 4 if the element's \texttt{multiple} content attribute is present, and 1 otherwise. The list of options for a \texttt{select} element consists of all the \texttt{option} element children of the \texttt{select} element, and all the \texttt{option} element children of all the \texttt{optgroup} element children of the \texttt{select} element, in tree order. \end{quote} For examples see \url{http://www.w3schools.com/tags/tag_select.asp}. \subsection{\texttt{<optgroup>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-optgroup-element}: \begin{quote} The \texttt{optgroup} element represents a group of \texttt{option} elements with a common label. \end{quote} For examples see \url{http://www.w3schools.com/tags/tag_optgroup.asp}. \subsection{\texttt{<option>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-option-element}: \begin{quote} The \texttt{option} element represents an option in a \texttt{select} element or as part of a list of suggestions in a \texttt{datalist} element. \end{quote} For examples see \url{http://www.w3schools.com/tags/tag_option.asp}. \subsection{\texttt{<button>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-button-element}: \begin{quote} The \texttt{button} element represents a button labeled by its contents. \end{quote} For examples see \url{http://www.w3schools.com/tags/tag_button.asp}. \subsection{\texttt{<datalist>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-datalist-element}: \begin{quote} The \texttt{datalist} element represents a set of option elements that represent predefined options for other controls. \end{quote} For examples see \url{http://www.w3schools.com/tags/tag_datalist.asp}. \subsection{\texttt{<keygen>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-keygen-element}: \begin{quote} The \texttt{keygen} element represents a key pair generator control. When the control's form is submitted, the private key is stored in the local keystore, and the public key is packaged and sent to the server. \end{quote} For examples see \url{http://www.w3schools.com/tags/tag_keygen.asp}. \subsection{\texttt{<output>}} From \url{http://www.w3.org/TR/html51/semantics.html#the-output-element}: \begin{quote} The \texttt{output} element represents the result of a calculation or user action. \end{quote} For examples see \url{http://www.w3schools.com/tags/tag_output.asp}. \section{\label{BlockVsInline}Block vs inline elements} From \url{http://www.w3schools.com/css/css_display_visibility.asp}: \begin{quote} A block element is an element that takes up the full width available, and has a line break before and after it. Examples of block elements: \begin{itemize} \item \texttt{<h1>} \item \texttt{<p>} \item \texttt{<div>} \end{itemize} An inline element only takes up as much width as necessary, and does not force line breaks. Examples of inline elements: \begin{itemize} \item \texttt{<span>} \item \texttt{<a>} \end{itemize} \end{quote} \noindent\includegraphics[width=\linewidth]{display1} \noindent\url{\fthtml display1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/display1.html}} A complete list of block elements can be found at \url{https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements}. Likewise a list of inline elements is at \url{https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente}. \section{\texttt{<video>}} The \texttt{<video>} tag does what its name suggests, i.e. it defines video. It supports the following particular attributes: \begin{tabu}{|l|l|X|} \hline \everyrow{\hline} \textbf{Name} & \textbf{Value} & \textbf{Description} \\ \texttt{autoplay} & & play video automatically \\ \texttt{controls} & & display video controls \\ \texttt{height} & pixels & height of the video player \\ \texttt{loop} & & video will loop indefinitely (if supported by browser) \\ \texttt{muted} & & muted video output \\ \texttt{poster} & URL & image to be shown while video is downloading and playback has not started \\ \texttt{preload} & \texttt{auto}, \texttt{metadata}, \texttt{none} & how the video should be loaded (cf. \url{http://www.w3schools.com/tags/att_audio_preload.asp}) \\ \texttt{src} & URL & video URL \\ \texttt{width} & pixels & width of the video player \\ \end{tabu} \vspace*{\baselineskip} \subsection{Video file formats} There are three video file formats currently supported. They are MP4, WebM and OGG. Here is a comparison of their main features: \begin{tabu}{|l|X|X|X|} \hline \everyrow{\hline} & \textbf{MP4} & \textbf{WebM} & \textbf{OGG} \\ Firefox & yes & yes & yes \\ Chrome & yes & yes & yes \\ Internet Explorer & yes & no & no \\ Safari & yes & no & no \\ MIME type & video/mp4 & video/webm & video/ogg \\ \end{tabu} \vspace*{\baselineskip} Within the \texttt{<video>} tag we use the \texttt{<source>} tag to specify multiple video sources that the browser can choose from, based on its file format support. If we need to convert between the different video file formats we can use a number of free tools, such as Miro Video Converter (\url{http://www.mirovideoconverter.com}) or Handbrake (\url{http://handbrake.fr}). Here is a simple example of the \texttt{<video>} tag in action: \noindent\includegraphics[width=\linewidth]{video1} \noindent\url{\fthtml video1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/video1.html}} Text inside the \texttt{<video>} opening and closing tag will be shown in browsers that do not support the tag. \subsection{Embedding YouTube videos} An excellent explanation can be found at \url{http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3480061/How-To-Add-a-YouTube-Video-to-Your-Web-Site.htm}. \section{\texttt{<audio>}} The \texttt{<audio>} tag does what its name suggests, i.e. it defines sound. It supports the following particular attributes: \begin{tabu}{|l|l|X|} \hline \everyrow{\hline} \textbf{Name} & \textbf{Value} & \textbf{Description} \\ \texttt{autoplay} & & play audio automatically \\ \texttt{controls} & & display audio controls \\ \texttt{loop} & & audio will loop indefinitely (if supported by browser) \\ \texttt{muted} & & muted audio output \\ \texttt{preload} & \texttt{auto}, \texttt{metadata}, \texttt{none} & how the audio should be loaded (cf. \url{http://www.w3schools.com/tags/att_audio_preload.asp}) \\ \texttt{src} & URL & audio URL \\ \end{tabu} \vspace*{\baselineskip} \subsection{Audio file formats} There are three audio file formats currently supported. They are MP3, WAV and OGG. Here is a comparison of their main features: \begin{tabu}{|l|X|X|X|} \hline \everyrow{\hline} & \textbf{MP3} & \textbf{OGG} & \textbf{WAV} \\ Firefox & yes & yes & yes \\ Chrome & yes & yes & yes \\ Internet Explorer & yes & no & no \\ Safari & yes & yes & no \\ MIME type & audio/mpeg & audio/ogg & audio/wav \\ lossless & no & no & usually yes \\ compressed & yes & yes & usually no \\ \end{tabu} \vspace*{\baselineskip} If we need to convert between the different audio file formats we can use a number of free tools, such as Audacity (\url{http://audacity.sourceforge.net}). To produce our own music, we can use the outstanding LMMS (\url{http://lmms.sourceforge.net}) or AudioTool (\url{http://www.audiotool.com}). Here is a simple example of the \texttt{<audio>} tag in action: \noindent\url{\fthtml audio1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/audio1.html}} Note that the browser will use the first file format that it supports from those listed. The current versions of the main browsers all support MP3. If we only want to support those we can omit the \texttt{<source>} tag: \noindent\url{\fthtml audio2.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/audio2.html}} Text inside the \texttt{<audio>} opening and closing tag will be shown in browsers that do not support the tag. \section{Additional elements} \subsection{\texttt{<pre>}} The <pre> tag defines preformatted text. Text is displayed in a fixed-width font and preserves both spaces and line breaks (cf. \url{http://www.w3schools.com/tags/tag_pre.asp}). Example: \parpic[l]{\includegraphics[scale=0.7]{pre1.png}} \picskip{0} \vspace*{\baselineskip} \parbox{\textwidth}{\url{\fthtml pre1.html}} \\{\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/pre1.html}} %\piccaption[Display preformatted text with \texttt{<pre>}]{\label{fig:pre1}Display preformatted text with \texttt{<pre>}} \subsection{\texttt{<mark>}} This element is used to highlight text (cf. \url{http://www.w3schools.com/tags/tag_mark.asp}). Example: \parpic[l]{\includegraphics[scale=0.7]{mark1.png}} \picskip{0} \vspace*{\baselineskip} \noindent\url{\fthtml mark1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/mark1.html}} %\piccaption[Highlight text with \texttt{<mark>}]{\label{fig:mark1}Highlight text with \texttt{<mark>}} \subsection{\texttt{<address>}} This element is used to display contact information for the nearest \texttt{article} or \texttt{body} element (cf. \url{http://www.w3.org/html/wg/drafts/html/CR/sections.html#the-address-element}). Example: \noindent\includegraphics{address1.png} \noindent\url{\fthtml address1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/address1.html}} %\caption{\label{fig:address1}Display contact information with \texttt{<address>}} \vspace*{\baselineskip} \subsection{\texttt{<s>}} \subsection{\texttt{<time>}} \subsection{\texttt{<ins>}} \subsection{\texttt{<del>}} \section{\texttt{<iframe>}} \noindent\url{http://www.w3schools.com/tags/tag_iframe.asp} \noindent\url{http://www.w3.org/TR/html5/embedded-content-0.html#the-iframe-element} \noindent\url{https://www.w3.org/wiki/HTML/Elements/iframe} \noindent\includegraphics[width=\linewidth]{iframe1} \noindent\url{\fthtml iframe1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/iframe1.html}} \noindent\includegraphics[width=\linewidth]{iframe2} \noindent\url{\fthtml iframe2.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/iframe2.html}} \section{\texttt{<embed>}} This tag creates a container for a plug-in, such as Adobe Reader (cf. \url{}): \noindent\includegraphics[width=\linewidth]{embed1} \noindent\url{\fthtml embed1.html} {\scriptsize\inputminted[tabsize=2, linenos=true]{html}{HTML5/embed1.html}} \section{Global attributes} \url{http://www.w3schools.com/tags/ref_standardattributes.asp} \section{Event attributes} \url{http://www.w3schools.com/tags/ref_eventattributes.asp} \section{Copyright} \url{http://creativecommons.org/} \section{Quiz} Take the w3schools quiz at \url{http://www.w3schools.com/quiztest/quiztest.asp?qtest=HTML5} as a fun way to check you are as good as you think you are.