Authors: Richard Campbell Daniel Egan Wallace McClure Michael Palermo Dan Wahlin

Size: px
Start display at page:

Download "Authors: Richard Campbell Daniel Egan Wallace McClure Michael Palermo Dan Wahlin"

Transcription

1 HTML5:Jump Start Authors: Richard Campbell Daniel Egan Wallace McClure Michael Palermo Dan Wahlin

2 About the Authors 1 About the Authors Richard Campbell is an architecture and infrastructure consultant, as well as a Microsoft Regional Director and MVP. He hosts RunAs Radio, and he cohosts.net Rocks and The Tablet Show. Follow him on Daniel Egan is a Microsoft Developer Evangelist based in Los Angeles and the man behind the awardwinning Windows Phone 7 Unleashed events. Learn more about Daniel at his blog or follow him on Wallace Wally B. McClure (wallym@scalabledevelopment.com) is a Microsoft MVP, ASPInsider, member of the national INETA Speakers Bureau, author of seven programming books, and a partner in Scalable Development. He blogs at and co-hosts the ASP.NET Podcast (www. aspnetpodcast.com). Follow Wally on J. Michael Palermo IV is a Microsoft Developer Evangelist based in Phoenix. Michael s current passion is all things HTML5. You can find Michael blogging at or follow him on Twitter Dan Wahlin is a Microsoft MVP and founded The Wahlin Group, which specializes in ASP.NET MVC, jquery, Silverlight, and SharePoint consulting and training solutions. Dan has written several books on.net and writes for several different technical magazines. He blogs at weblogs.asp.net/dwahlin.

3 2 Contents Contents About the Authors...1 Introduction...3 Chapter 1: The Past, Present, and Future of HTML5...5 Chapter 2: Three of the Most Important Basic Elements in HTML Chapter Three: HTML5 Is in Style: Working with CSS3 and HTML Chapter 4: HTML5 Form Input Enhancements: Form Validation, CSS3, and JavaScript...32 Chapter 5: HTML5 Syntax and Semantics: Why They Matter...38 Chapter 6: Introduction to HTML5 for Mobile App Development...50 Chapter 7: HTML5 for the ASP.NET Developer...63 Chapter 8: Getting Started Using HTML5 Boilerplate...74 Chapter 9: Start Using HTML5 in Your Web Apps Today!...82 Chapter 10: Ease HTML5 Web Development with jquery, Knockout, and Modernizr Libraries...95 Chapter 11: Build a jquery HTML5 Web Application: The Account at a Glance App...97 Chapter 12: How to Build a jquery HTML5 Web Application with Client-Side Coding...106

4 Contents 3 Chapter 13: Explore the New World of JavaScript Focused Client-Side Web Development Chapter 14: Storing Your Data in HTML Chapter 15: Using the HTML5 Canvas Tag Chapter 16: HTML5 Tutorial: Build a Chart with JavaScript and the HTML5 Canvas...139

5 4 Introduction Introduction This is an exciting time to be a web developer! Whether you are building public-facing website applications or creating internal sites for your company, HTML5 has much to offer in providing sorely needed features that are native to the browser. With growing support among all the major browsers and with new sites emerging that consistently use it, HTML5 is a must-visit technology for any serious web developer today. This ebook, with chapters written by five HTML5 experts, is designed to jump start you into using HTML5. Not only will you learn the history of HTML and web development, you ll find tutorials, boilerplates, and detailed discussions that will help shorten your HTML5 learning curve.

6 Chapter 1: The Past, Present, and Future of HTML5 5 Chapter 1: The Past, Present, and Future of HTML5 Ready, set, start your HTML5 learning with a look at the evolution of HTML and basic HTML5 coding By Michael Palermo and Daniel Egan Stop and think for a moment about how long you ve been a developer. For some of you, that journey started recently. For others, it has been years. However long it s been, do you realize that less than a decade ago, the.net revolution had not officially started? Classic ASP was the primary way we developed for the web, and HTML was at version wait a minute is still at version 4.01! Despite sluggish transformations regarding HTML overall, small to very dramatic changes in technologies that are based on HTML have occurred. Think of the changes that have occurred in web browsers, JavaScript, and Cascading Style Sheets (CSS). Think of how AJAX has changed the way many web developers approach communications between the browser and server-side resources. The web has seen many changes but with virtually no change to its core language, HTML. However, that logjam is about to bust with HTML5. A Brief History of HTML5 Before we discuss what HTML5 has to offer, we should note that attempts have been made to change HTML. Note the word is change, not upgrade or revise. But what does that mean? Why is it important to consider the failed attempts to change HTML? So that you can appreciate why HTML5 is worth investigating and why it is here to stay. For these reasons, let s take a brief journey down memory lane and consider the series of events that led to where we are today. Then we ll discuss where we ll be tomorrow. You probably already know who Tim Berners-Lee is and that HTML came into existence as far back as You also probably know that the Internet took off in the 1990s, and so on. So instead of strolling through a step-by-step timeline, let s focus on the attempts to replace HTML with something else. Fast-forward to January The World Wide Web Consortium (W3C) recommended Extensible HyperText Markup Language (XHTML) 1.0. For an XHTML document to be served correctly, the

7 6 Chapter 1: The Past, Present, and Future of HTML5 author had to use the new application/xhtml+xml MIME type. However, Appendix C of W3C s XHTML 1.0 specification made provision for pages to be served by using the common text/html MIME type. More than a year later, in May 2001, the W3C recommended XHTML 1.1. The abstract of the recommendation stated, The purpose of this document type is to serve as the basis for future extended XHTML family document types, and to provide a consistent, forward-looking document type cleanly separated from the deprecated, legacy functionality of HTML 4 that was brought forward into the XHTML 1.0 document types. According to the abstract, XHTML was prepped to be the future of the web. The abstract boldly referred to HTML 4 as deprecated, legacy functionality. And version 1.1 of XHTML removed the Appendix C version 1.0 provision that allowed a page to be served with the text/html MIME type. So why didn t this recommended standard replace HTML altogether? The answer is simple: Developers didn t implement it. To be sure, many developers tried to implement XHTML in their websites. XHTML mandated a wellformed XML document using the classic HTML tags. To be well-formed, a web page would need to be served with no overlapping tags and no missing end tags, and the values of all attributes had to be enclosed in quotation marks. The notion of cleaning up our web pages wasn t unpopular, but it wasn t strictly enforced either. And even if a web developer created a well-formed web document, was it served with the application/xhtml+xml MIME type? Likely not. In fact, it is estimated that 99 percent of web pages on the Internet today contain at least one violation of the XHTML standard, which, if enforced, would cause the page to stop rendering and post an error to the end user. Ouch! So now what? Exactly. WHAT was born. The Web Hypertext Applications Technology (WHAT) Working Group, actually known as WHATWG, came into existence in 2004 to put life back into HTML. This group s intent was to move forward in a manner consistent with how the web was actually being used and to spearhead innovations in HTML while maintaining backward compatibility. Instead of breaking 99 percent of the web, why not embrace the way in which web pages are actually served? Browsers have been forgiving. Why make page-breaking changes? Therefore, the WHATWG came up with Web Applications 1.0 while the W3C worked toward version 2.0 of XHTML. However, near the end of 2006, it was clear that the WHATWG was gaining momentum while XHTML 2.0 was lacking support by any major browser. Thus, the W3C announced it would collaborate with the WHATWG. One of the outcomes of this union was to rename Web Applications 1.0 as HTML5. Is there a lesson in this for us? Absolutely. Despite noble aims and grand ambitions, whatever the masses choose to adopt wins. The growing adoption of HTML5 makes it the winner. HTML5 cannot be ignored. Our brief history lesson demonstrates that HTML5 is here because we willed it to be here. (For more in-depth coverage of the history leading up to HTML5, check out Mark Pilgrim s Dive into HTML5.) Start Using HTML5 HTML5 is not an official specification yet, but it will likely have a prominent place in website development, given that the major browsers are gradually incorporating HTML5 features and Microsoft s

8 recently stated intention to incorporate native HTML5 in Windows. So it s a good idea to start getting familiar with HTML5 now and you can do so without making dramatic changes to the pages you already have. Let s consider a minimalistic HTML5 document, such as in Figure 1. Figure 1: Minimalistic HTML5 document <!DOCTYPE html> <title>a relatively minimal HTML document</title> <p>hello World!</p> Notice the omission of the <html> and <head> tags. According to the current specs, this is still a valid document. If these tags are omitted, the browser will still parse the document, and the tags will be implied. This represents a shift from the strict conformity imposed by the current HTML standard. Here is another example of how easy it is to adapt to HTML5: Chapter 1: The Past, Present, and Future of HTML5 7 <!DOCTYPE html> The doctype syntax has been simplified. Compare this to examples of what we have been accustomed to, shown in Figure 2. Figure 2: Doctype examples <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.1//EN > <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN w3.org/tr/1999/rec-html /loose.dtd > The doctype declaration is required. Although it is clearly easier to type the normal HTML5 doctype, the deprecated doctypes in Figure 2 are still accepted formats. By the way, the doctype declaration is not case sensitive, so any of the following are acceptable: <!doctype html> <!doctype HTML> <!DOCTYPE HTML> Now take a look at Figure 3 to see a more realistic starting point for an HTML5 document. Figure 3: Simple HTML5 document <!DOCTYPE html> <html lang= en > <head> <meta charset= UTF-8 > <title>getting Started With HTML5</title> </head> <body>

9 8 Chapter 1: The Past, Present, and Future of HTML5 <p>simple text.</p> </body> </html> You might find slight differences in this HTML5 document compared to what you are used to. Apart from the doctype, you might notice the attribute on the <html> tag and the contents of the <meta> tag. Let s focus first on the <html> tag: <html lang= en > The lang= en attribute informs the browser that the contents of this document are in English. This is much simpler than the following: <html xmlns= lang= en xml:lang= en > Look at how much was removed. There is no longer any need to specify the namespace of the document because all elements in HTML5 (unless otherwise noted) belong to the xhtml namespace. The xml:lang attribute is left over from the XHTML era. So, once again, HTML5 presents a simpler way to do things, but for what it is worth, the older syntax is still acceptable. Now, how about that <meta> tag? This is how we used to handle it: <meta http-equiv= Content-Type content= text/html; charset=utf-8 > And as you have noticed, it is now this simple: <meta charset= UTF-8 > Of course if you want to use the old style, that s still okay. It s a good practice to make this meta charset tag the first child of the <head> tag because the specification states that the character encoding declaration must appear within the first 1024 bytes of the document. Why set the encoding for the document? Failing to do so can cause security vulnerabilities. Although the encoding can also be set in the HTTP headers, it s still a good practice to declare the encoding in the document. These subtle differences clearly confirm the WHATWG s commitment to maintaining backward compatibility while allowing changes that simplify or enhance HTML. However, not everything from the past is preserved in HTML5. For good reason, some tags, such as those in Figure 4, have been given a proper burial.

10 Chapter 1: The Past, Present, and Future of HTML5 9 Figure 4: Elements absent from HTML5 Tags such as <basefont>, <big>, <center>, <font>, <strike>, <tt>, and <u> are purely presentational in their function and are better handled through CSS. In addition to these retired elements, a number of attributes have been removed for similar reasons. All absent or removed items in HTML5 can be found at New Features in HTML5 But what about the changes that give us new features in HTML5? Let s briefly consider some of the more popular additions that you can start using today. First are the new elements that are in line with how the web works today. These new tags, shown in Figure 5, are structural or semantic in nature. Figure 5: Semantic elements in HTML5 A good number of websites today have very similar structures. Think of footers, for example: Many sites display footers, which usually contain author information, links, and copyright information. A typical approach to footers would look something like this: <div id= footer > Copyright 2011 Egan & Palermo</div>

11 10 Chapter 1: The Past, Present, and Future of HTML5 How many <div> tags would you guess there are on the web functioning as the container for footer information? Well, the count is so high it became obvious that a tag was needed to represent this information. In HTML5, the tag looks like this: <footer> Copyright 2011 Egan & Palermo</footer> The main purpose of semantic elements is to provide context to the data. These tags are not about how the content looks. Rather, they are more concerned about the substance of the content. You modify the appearance of these elements through CSS. The <input> tag in HTML5 supports new attribute types, shown in Figure 6. Figure 6: New input attributes Although not all browsers support these new attribute types, it is clear that these types will map nicely with our modern entry forms. Audio and Video Capabilities Support for multimedia via the <audio> and <video> tags is another welcome addition to HTML5. What used to require a plug-in is now accomplished with simple HTML tags. Getting started is very easy. Observe the following markup and the screen shot in Figure 7:

12 Chapter 1: The Past, Present, and Future of HTML5 11 <video src= big_buck_bunny.mp4 controls> Sorry, your browser does not support the video tag. </video> With just a few lines of code, you can have a video up and running with interactive controls for your users to manage! The controls attribute can stand by itself, or you can use controls= controls to provide the XML-friendly approach. Also, note that within the tags you can provide optional text that will be displayed if the browser does not support the video tag. As you select your video formats, remember that not all browsers support the same video types. If adding video seems easy, HTML5 makes it just as easy to add audio to your site. The markup is fairly similar: <audio src= music.mp3 controls> Sorry, your browser does not support the audio tag. </audio> Like the <video> tag, the <audio> tag contains a controls attribute for visual display to manage volume and positioning of audio, as Figure 8 shows. Figure 8: HTML5 audio control Although this example features an MP3 audio file, be aware that not all browsers support the same audio types. A very exciting addition to HTML5 is the <canvas> tag. With this new feature, developers can add rich graphical experiences to their web pages. Think of a canvas as you would visual art in the real world. A painting canvas is usually a blank rectangle waiting to be drawn or painted upon. Likewise, in your web page, a canvas is a designated section of the page that you can draw on. By using the <canvas> tag, you eliminate the need for plug-ins that provide animations. Here is an example of how to declare a simple <canvas> tag:

13 12 Chapter 1: The Past, Present, and Future of HTML5 <canvas id= myartwork width= 200 height= 200 > Your browser does not support the canvas element. </canvas> To begin your artwork, you need calls in JavaScript are needed. Using the canvas from the preceding example, Figure 9 shows how to draw a simple blue square. Figure 9: JavaScript for canvas <script type= text/javascript > var art=document.getelementbyid( myartwork ); var ctx=art.getcontext( 2d ); ctx.fillstyle= #FF0000 ; ctx.fillrect(0,0,150,75); </script> To what degree can the <canvas> tag enhance the user experience? You really must try it yourself to experience the difference. However, to give you an idea, Figure 10 presents a screen shot of the game Pirates Love Daisies. This tower-defense game is packed with action, animation, and stimulating sounds. It is so well done that you might find yourself doubting it is a pure HTML5 page. Figure 10: Pirates Love Daisies game Another striking demo that showcases a variety of HTML5 features, including Scalable Vector Graphics (SVG) support, is found at director.bonjovi.com. This page, shown in Figure 11, allows a fan to drag and drop clips onto a circular timeline, add effects, and publish a custom Bon Jovi video.

14 Chapter 1: The Past, Present, and Future of HTML5 13 Figure 11: Custom Bon Jovi video Web Storage Web storage represents another nice addition to HTML5. Web storage is a highly anticipated feature that allows larger amounts of data to be stored locally in the browser without generating a performance hit on round trips. The primary way developers handle local storage today is through cookies. The disadvantage of cookies is that the data is passed back and forth with every HTTP request or response. In HTML5, developers can use one of two options: local or session storage. The difference is that session storage expires when the browser session ends, while local storage has no time limit. This webstorage feature is available through objects in JavaScript. Here is an example of how to store a display name in local storage: <script type= text/javascript > localstorage.displayname= Egan-Palermo ; </script> Note that in the preceding example, DisplayName was made up on the fly. The property name can be whatever you want it to be. No Better Time to Be a Web Developer What we have covered so far is just a taste of the new features in HTML5. In upcoming articles in this series, we will demonstrate how to leverage specific features in greater depth.

15 14 Chapter 1: The Past, Present, and Future of HTML5 This is an exciting time to be a web developer! Whether you are developing publicly for the web or creating internal sites for your company, HTML5 has much to offer in providing sorely needed features that are native to the browser. With growing support among all the major browsers and with new sites emerging that consistently use it, HTML5 is a must-visit technology for any serious web developer today.

16 Chapter 2: Three of the Most Important Basic Elements in HTML5 15 Chapter 2: Three of the Most Important Basic Elements in HTML5 New HTML5 elements--header, nav, and footer--improve consistency of web page coding By Michael Palermo and Daniel Egan In Chapter 1 we discussed the evolution from HTML to HTML5 in order to provide a firm foundation for understanding HTML5 coding. Now we re ready to dive into some of the most important and useful HTML5 elements. In the HTML5 world, much emphasis has been placed on features such as animation, the <video> tag, and hardware acceleration. However, in our opinion, only a small percentage of developers will be working with these high-profile elements. While the cool factor of sites like html5gallery.com is definitely a draw for developers and designers, the more mundane but nevertheless important elements will make a much bigger impact. In this article, we will discuss some of the new elements that are now available in HTML5, specifically <header>, <nav>, and <footer>. Although these elements are not technically difficult to use, it is important to address why we use them. A few years ago, I (Daniel Egan) got my first taste of HTML5 at a code camp. As the speaker discussed elements such as <header>, <footer>, and <article>, I thought, What s the big deal? Won t more elements just serve to clutter up HTML even more? Why should I even care about this? What we have learned since then is that these elements are important for a variety of reasons. Reasons to Care about HTML5 Although these new elements are quite simple to use, their implications for the web are both subtle and profound. For example, web developers and designers are very accustomed to the universal, catch-all <div> element which no longer exists in HTML5. The division element, as the name implies, divides markup into appropriate sections. But in practice, the <div> element is used for everything. Therefore, it loses its effectiveness as an element itself. Even worse, the IDs used within the div element aren t consistent, as Figure 1 shows.

17 16 Chapter 2: Three of the Most Important Basic Elements in HTML5 Figure 1: Inconsistent IDs used in the <div> element Although it would be nice if each and every developer used the same nomenclature, as shown in Figure 1, we know that individuality reigns supreme. Without consistency, there is no way to have any hooks into a web page. Hooks might include readers for the visually impaired or keystrokes that hook into certain areas of a site or that direct the user s focus onto a particular section of a page. None of this can be done at the browser or machine level because there is no consistent naming at that level. That s where this very simple and sometimes overlooked portion of the HTML5 specifications come in handy. Although you can t count on certain sections of HTML pages to have the same name, a great majority of developers do use consistent naming practices for particular sections. In 2004, Ian Hickson, editor of the HTML5 specifications, did a Google search to determine the most common names used by developers. The names used by HTML5 for the new elements include many of these commonly used names; you can see the HTML5 and class-name mapping here. Of course, that doesn t mean you can easily map your HTML code to the new elements; what it does mean, however, is that developers have a certain comfort level by using these names. While this simplicity might seem like a small detail, anyone who has ever done a redesign of a system knows that easing the transition is a big part of making the redesign successful. Simplicity is sometimes both overlooked and underestimated. Now that we have discussed why we care about these elements, let s dive right into their use. If you like digging into functional specifications, go to the W3C HTML5 spec overview page. There you will find the definition and usage specification for each of these elements.

18 Header Element We might as well start at the head of the class: the <header> element. According to the aforementioned W3.org site, The header element represents a group of introductory or navigational aids [It] is intended to usually contain the section s heading (an h1 h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section s table of contents, a search form, or any relevant logos. In other words, the header element contains the stuff developers have been putting in their <div id= header > tag for many years. Figure 2 shows an example of the header element. Figure 2: The HTML5 <header> element Chapter 2: Three of the Most Important Basic Elements in HTML5 17 <!doctype html > <html lang=en> <head> <title>this is my sample</title> <meta charset= utf-8 /> </head> <body> <header> <a href= / ><img src= HighFive.png alt= main /></a> <hgroup> <h1>highfive HTML5 Training</h1> <h2>the one stop shop for all things HTML5</h2> </hgroup> </header> <footer> </footer> </body> </html> You may notice from the code in Figure 2 that the syntax that starts with <!doctype html> is quite different from what you re used to. The syntax has been simplified and no longer requires the long URL that we have become accustomed to. Additionally, the tag is not case sensitive. For example, <!DOC- TYPE html> is the same as <!DoCtyPe html>. As a matter of fact, you can even leave out the <html>, <head>, and <body> tags because they are implied in HTML5. However, we do not recommend leaving them out. You will also notice that the <header> section entails a logical grouping of an image and <h1> and <h2> tags, all contained within an <hgroup> tag. Nav Element Developers frequently want to put menus in the header when menus are used as global resources across the site. This leads us to the use of the next new element, <nav>. The specification for this element states, The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Of course, this specification identifies the basic use for the <nav> element, but as we discussed earlier, the real importance of these elements resides in their broader application. The specification goes on to say, User agents (such as screen readers) that

19 18 Chapter 2: Three of the Most Important Basic Elements in HTML5 are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip and/or provide on request. The code in Figure 3 shows a <nav> element. Figure 3: The HTML5 <nav> element <header> <a href= / ><img src= HighFive.png alt= main /></a> <hgroup> <h1>highfive HTML5 Training</h1> <h2>the one stop shop for all things HTML5</h2> </hgroup> <nav> <ul> <li>home</li> <li>talks</li> <li>training</li> <li>about Us</li> </ul> </nav> </header> Of course, this code would normally put hyperlinks inside the <li> elements, but we ll leave it as is for simplicity s sake. The specification also helps users determine where not to use this element. For example, simple links to terms of service or to copyright information in a footer do not typically use the <nav> element. The Footer Element At first glance, you might assume that the <footer> element is meant for the bottom of your page. It is, but its intended use is broader than that. According to the specification, The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. This means that <footer> can go at the end of <article>, <include>, <aside>, <nav>, <section>, <blockquote>, or <body> elements (all new elements that will need to be discussed in a later article in this series). There are restrictions to where footer elements can be placed. For instance, you cannot put a <footer> at the end or <nav> above because they cannot be nested inside a <header>, <footer>, or <address> element. Keeping It Simple Hopefully, by now in this series, it s clear why we should care about HTML5. Like most things in programming, simple constructs can have deep underpinnings. Simple elements like <header>, <nav>, and <footer> can have deeper implications than what initially meets the eye. Understanding why these elements were created can help us master best practices for their use. We hope you continue

20 Chapter 2: Three of the Most Important Basic Elements in HTML5 19 this journey with us into the dynamic world of HTML5 as we explore additional elements, their uses, and their implications.

21 20 Chapter Three: HTML5 Is in Style: Working with CSS3 and HTML5 Chapter Three: HTML5 Is in Style: Working with CSS3 and HTML5 Use HTML5 with new CSS3 features to optimize user experience on your website By Michael Palermo and Daniel Egan If you peer into the HTML5 specifications, you ll find plenty of documentation on HTML5, the fifth major installment of HTML. And if you nose around the latest tweets, blogs, and articles, you ll discover many references to HTML5 as a platform. Among the associated technologies that are often assumed when HTML5 is referenced is Cascading Style Sheets (CSS). In this article, we ll cover many of the enhancements to the latest version of CSS (version 3) and explain how CSS3 ties into HTML5. Obviously, most web developers today are acquainted with CSS, so our focus will remain primarily on the popular new features in CSS3. To showcase those CSS3 features, we ll use a simple HTML5 document from a file named default.htm, shown in Figure 1, containing markup that highlights typical usage scenarios found in many websites today. Figure 2 shows the final rendering of this page. Figure 1: An HTML5 default.htm page <!doctype html> <html lang= en > <head> <meta charset= utf-8 /> <title>css3 Demos</title> <link rel= stylesheet href= styles/reset.css /> <link rel= stylesheet href= styles/core.css /> <link rel= stylesheet href= styles/css3.css /> <script src= scripts/modernizr.js type= text/javascript > </script> </head>

22 Chapter Three: HTML5 Is in Style: Working with CSS3 and HTML5 21 <body> <header> <h1>html5 & CSS3</h1> </header> <nav> <ul> <li class= selected ><a href= # >Home</a></li> <li><a href= # >Demos</a></li> <li><a href= # >About</a></li> <li><a href= # >Contact</a></li> <li class= subscribe ><a href= # >RSS</a></li> </ul> </nav> <aside id= banner > <header> <h2>demo Site</h2> </header> <p class= upsidedown >Your world, upside-down</p> <figure class= headingphoto > <img src= images/devconsocial.jpg alt= devconnections social /> <figcaption>the conversation begins here</figcaption> </figure> </aside> <section id= content > <section id= blogs > <article class= blogpost > <header> h2>html5 is in Style!</h2> <p>posted by <a href= >Michael Palermo</a> - <a href= >@palermo4</a></p> </header> <div> <figure id= figuread > <img src= images/ad.jpg alt= ad /> <figcaption>the next event!</figcaption> </figure> <p> The purpose of this sample web page is to showcase the features of CSS3 with HTML5. Consider the list below of the topics that will be demonstrated: </p> <ul>

23 22 Chapter Three: HTML5 Is in Style: Working with CSS3 and HTML5 <li>table Display</li> <li>fonts</li> <li>rounded Corners</li> <li>color Techniques</li> <li>box Shadows</li> <li>transforms</li> <li>media Queries</li> </ul> <p> Once you start down the path of developing HTML5 with CSS3, you will not want to develop or design for the web without it! </p> </div> </article> </section> <aside id= sidebar > <section> <header> <h3>why HTML5?</h3> </header> <ul> <li><a href= # >Less is More</a></li> <li><a href= # >It s All Semantics</a></li> <li><a href= # >Hear is Another Reason</a></li> <li><a href= # >Lights, Camera, Video!</a></li> <li><a href= # >The Web is Your Canvas</a></li> <li><a href= # >More Storage</a></li> <li><a href= # >Better Script</a></li> </ul> </section> <section> <header> <h3>your Thoughts?</h3> </header> <p contenteditable= true > [replace with your feedback!] </p> <input type= button value= Submit /> </section> </aside> </section> <footer> <p>copyright Please don t steal stuff, etc.</p> </footer> </body> </html>

24 Chapter Three: HTML5 Is in Style: Working with CSS3 and HTML5 23 Figure 2: The final rendering of the default.htm page Let s first observe HTML5 s relationship with CSS. The document in Figure 1 references three CSS files: <link rel= stylesheet href= styles/reset.css /> <link rel= stylesheet href= styles/core.css /> <link rel= stylesheet href= styles/css3.css /> The first link is to the reset.css file. Typically, web designers provide a master or reset type of CSS file to equalize the defaults across all browsers. In this example, we are using the reset.css file made publicly available by CSS guru Eric Meyer. The next link is to core.css, which contains CSS features up to version 2.1. The final link is to css3.css (see Figure 3). This file contains features exclusive to CSS3. By separating CSS into multiple files, we can show how easy it is to distinguish CSS features from one another. However, all the CSS used in this example could have easily been rolled into one complete file as well. Figure 3: utf-8 { font-family src font-weight font-style h1, h2 { font-family : TitleFont ; : url( michroma.woff ) format( woff ); : bold; : normal; : TitleFont ;

25 24 Chapter Three: HTML5 Is in Style: Working with CSS3 and HTML5 #sidebar section { border-radius -webkit-border-radius -moz-border-radius -o-border-radius #banner, #banner img { border-radius -webkit-border-radius -moz-border-radius -o-border-radius #banner figcaption { border-radius -webkit-border-radius -moz-border-radius -o-border-radius background-color #content { display #blogs, #sidebar { display : 11px; : 11px; : 11px; : 11px; : 22px; : 22px; : 22px; : 22px; : px 22px; : px 22px; : px 22px; : px 22px; : rgba(0,0,0,0.4); : table; : table-cell; #figuread { box-shadow : 11px 11px 11px #777; -webkit-box-shadow : 11px 11px 11px #777; -moz-box-shadow : 11px 11px 11px #777; -o-box-shadow : 11px 11px 11px #777; #figuread:hover { transform -ms-transform -webkit-transform -moz-transform -o-transform.upsidedown:hover { transform -ms-transform : scale(1.5) rotate(-10deg); : scale(1.5) rotate(-10deg); : scale(1.5) rotate(-10deg); : scale(1.5) rotate(-10deg); : scale(1.5) rotate(-10deg); : rotate(180deg); : rotate(180deg);

26 -webkit-transform : rotate(180deg); -moz-transform : rotate(180deg); -o-transform : (max-width: 1000px) { nav ul li a { margin-right : 0px; #content { margin-top : 50px; margin-left : 15px; display : inherit; #blogs, #sidebar { display : inherit; #banner { display : none; Chapter Three: HTML5 Is in Style: Working with CSS3 and HTML5 25 You may have noticed the <script> tag reference to modernizr.js below the <link> tags in the default. htm page in Figure 2. Publicly available at the Modernizr JavaScript library lets us design for the future using HTML5 and CSS3 without sacrificing control over experience in older browsers. We immediately benefit from this file by simply referencing it. Using Tables to Define Layouts How many of us recall using <table> tags to create web page layouts? Don t worry. This old method is not what we re talking about in this section. In CSS3, we can define a table-like layout without using <table> tags. For example, in Figure 4, look at the layout for the content portion of default.htm.

27 26 Chapter Three: HTML5 Is in Style: Working with CSS3 and HTML5 Figure 4: Layout for the content portion of default.htm The old approach, using <table> tags, would probably look something like what you see in Figure 5. Figure 5: HTML5 table layout <!-- content element surrounds table --> <table> <tr> <td><!-- blogs in first column --></td> <td><!-- sidebar in second column --></td> </tr> </table> The CSS3 way of doing things is much easier. Here s how we get a simple two-column layout in the css3.css file: #content {display : table; #blogs, #sidebar {display : table-cell; The <section> tag that has an ID of content is defined visually as a table. The two child tags with IDs of blogs and sidebar are defined in the CSS file as table-cell, causing each to render visually as a column in the table. Fancy Fonts Made Easy Bringing unique fonts to web pages has always been a challenge. To introduce a nonstandard font, developers often had to use images. In CSS3, this is no longer the case. CSS3 allows us to welcome new fonts to our web pages by using definition. Consider the following definition, as found in the css3.css { font-family src font-weight font-style : TitleFont ; : url( michroma.woff ) format( woff ); : bold; : normal; definition first establishes what the friendly name of the font will be by using the font-family property. In our example, we named the font TitleFont. The src property requires the URL of the.woff file that contains the desired font. You can find custom.woff selections at sites such as The other properties define default behaviors for weight and style. When serving a web page that uses custom fonts, the web server must be configured to understand the.woff extension and its MIME type. For Microsoft IIS, this can be accomplished by updating the web.config file, as we have done in Figure 6. Figure 6: The web.config file

28 Chapter Three: HTML5 Is in Style: Working with CSS3 and HTML5 27 <configuration> <system.webserver> <staticcontent> <mimemap fileextension=.woff mimetype= application/x-woff /> </staticcontent> </system.webserver> </configuration> definition makes the font available only within the web page. We need to define the location in which we want the font to be used; we do this by referring to the friendly name elsewhere in the CSS file. In our example, this is how to use the custom font: h1, h2 {font-family : TitleFont ; In this example, the custom font that has the friendly name of TitleFont will be applied to all <h1> and <h2> tags in the HTML. Corners, Shadows, and Colors Although it is true that the little things sometimes matter the most, it is also true that the little feature requests often cause the most fuss. Rounded corners, color enhancements, and box shadows are all features that have usually required meticulous tweaking with using images and JavaScript. Once again, CSS3 comes to our rescue. Let s see how simple it is to apply rounded corners using CSS3. In the sidebar sections of default.htm, let s apply a rounded corner as follows: #sidebar section {border-radius : 11px; The border-radius property defines the radius as either a unit value or a percentage value. The example here eliminates the need to explicitly specify the radius for each corner. So that s it. Well sort of. To support older browsers or other browsers, vendor-prefixed versions should also be applied. Here is the example again, this time with support for Mozilla, WebKit, and Opera: #sidebar section { border-radius : 11px; -webkit-border-radius : 11px; -moz-border-radius : 11px; -o-border-radius : 11px; Don t let the duplication bother you too much. If the browser doesn t understand a property, that property is ignored. And if repetition feels wrong to you, welcome to the world of multiple-browser support. Now let s look at an example of applying the rounded effect to just some of the corners. Here, we want only the bottom-right and bottom-left corners to be rounded: #banner figcaption {

29 28 Chapter Three: HTML5 Is in Style: Working with CSS3 and HTML5 border-radius -webkit-border-radius -moz-border-radius -o-border-radius : px 22px; : px 22px; : px 22px; : px 22px; Shadow effects are just as easy to implement. The following example adds a shadow to the <figure> tag that has an ID of figuread : #figuread { box-shadow : 11px 11px 11px #777; -webkit-box-shadow : 11px 11px 11px #777; -moz-box-shadow : 11px 11px 11px #777; -o-box-shadow : 11px 11px 11px #777; Like the border-radius property, vendor prefixes are added to support multiple browsers. The values for the property indicate the depth of the horizontal shadow, the depth of the vertical shadow, the depth of the blur effect, and the color of the shadow, in that order. The first two values are required. If negative values are supplied, the shadow goes in the opposite direction. Color effects are also fairly simple to add. Consider the convention of dimming a photo when it is not the main attraction. In the past, we had to create a duplicate of the photo and add the dimming effect with image-editing software. With CSS3, we can define this effect without a modified version of the original image. Here is an example of applying a dimming effect to the <figcaption> tag associated with an <img> tag: #banner figcaption { /* other definitions removed for brevity */ background-color : rgba(0,0,0,0.4); The rgba value uses four arguments. The first three define red, green, and blue (RGB) intensities with a value range of 0 through 255. The remaining value determines opacity, where 1.0 is opaque and 0 is completely transparent. Since the RGB values are all 0 in our example, the color is black, and the remaining value indicates 40-percent opacity. The effect is a grayish see-through layer above the image. The <figcaption> tag is absolutely positioned over the <img> in the core.css file. To cover the entire image with this effect, simply make <figcaption> the same dimensions as the image. Transformations In CSS3, transformations take the user experience to the next level. Let s consider just two transformations: scale and rotate. The scale transformation causes any UI element to shrink or grow when a user hovers over it. Suppose we want a portion of a page to pop out and rotate somewhat when we hover over it. We can apply the scale transformation to make it grow and the rotate transformation to

30 Chapter Three: HTML5 Is in Style: Working with CSS3 and HTML5 29 provide a rotation effect. In the following example, we want to see the <figure> tag that has the ID of figuread grow by 150 percent. We also want to see this tag rotate counter-clockwise by 10 degrees: #figuread:hover { transform -ms-transform -webkit-transform -moz-transform -o-transform : scale(1.5) rotate(-10deg); : scale(1.5) rotate(-10deg); : scale(1.5) rotate(-10deg); : scale(1.5) rotate(-10deg); : scale(1.5) rotate(-10deg); The vendor prefixes are all displayed in this example. Did you notice the -ms- prefix? While CSS3 transformations are under development, each browser will continue to have its own implementation. The first property that contains no prefix is there for future compatibility. Figure 7a shows the UI element before the user hovers the mouse over it; Figure 7b shows the element after hovering over it. Figure 7a: UI element before hover Figure 7b: UI element after hover Media Queries When using CSS, not only do we factor in the various browsers as if that wasn t enough to worry about we also have to consider various devices, such as mobile phones. With large and small screen

31 30 Chapter Three: HTML5 Is in Style: Working with CSS3 and HTML5 dimensions, certain features may need to be tweaked to display correctly. With CSS3 media queries, we can alter the state of the display based on factors such as screen dimensions. Consider the media query syntax in Figure 8. Figure 8: Media (max-width: 1000px) { nav ul li a { margin-right : 0px; #content { margin-top : 50px; margin-left : 15px; display : inherit; #blogs, #sidebar { display : inherit; #banner { display : none; If the screen width is less than 1,000 pixels, we apply new styles accordingly. In our case, we adjusted margins in the menu, removed the table layout features so the sidebar would fit under the content, and removed the banner from the display. Figure 9 shows the effect of the media query on the page.

32 Chapter Three: HTML5 Is in Style: Working with CSS3 and HTML5 31 Figure 9: Media query impact Continuing on the HTML5 Path Obviously, we haven t covered all the new features in CSS3, and the features we did cover can be explored much further. We simply aimed to provide an easy place to start with HTML5 and CSS3. Most of the new features can save you needless grunt work. With just one line of code in CSS, you can sometimes do what used to take a lot of work and many lines of code. We are confident that once you start down the path of creating web sites with HTML5 and CSS3, you will never go back to anything else!

33 32 Chapter 4: HTML5 Form Input Enhancements: Form Validation, CSS3, and JavaScript Chapter 4: HTML5 Form Input Enhancements: Form Validation, CSS3, and JavaScript Get to know HTML5 form input features, which improve form validation and enhance CSS3 form styling By Michael Palermo Can you imagine what the web would be like if it were truly read-only? What if there were no way for a user to interact with a site by providing personal data? With no way to input data, the Internet would be full of brochure-ware sites that could not engage in any real business exchanges. The value of the Internet would be insignificant compared with what it is today. So it goes without saying that a required factor for many successful websites is the ability to acquire data from a user. And because user interaction plays such a key role in the overall web experience, it isn t surprising that among the many improvements found in HTML5 are feature enhancements to form input. In this article, I will introduce these new form features, exploring some of the new elements and attributes, how to apply styles, and new ways to control validation in script. Rather than try to cover everything that is new, instead I will focus on some practical aspects of HTML5 form development that you can start using today. Examining a Simple HTML Form To provide some context for the new features, let s first peer into a simple HTML form that doesn t use any of the new features, as shown in Figure 1. With some Cascading Style Sheets (CSS) styles applied, the rendering of the simple form, shown in Figure 2, is a grouping of text boxes with a submit button. Figure 1: Simple HTML form <form> <!-- action & method attributes supplied by developer --> <label for= name >Name</label> <input id= name name= name type= text /> <label for= > </label> <input id= name= type= text /> <label for= site >Site</label> <input id= site name= site type= text />

34 Chapter 4: HTML5 Form Input Enhancements: Form Validation, CSS3, and JavaScript 33 <label for= phone >Phone</label> <input id= phone name= phone type= text /> <input id= submit name= submit type= submit value= Send Data /> </form> Figure 2: Simple HTML form, rendered in a browser The simple form is functional, but it poses some common data-collection challenges. For example, consider the same form containing data entered by a user, as shown in Figure 3. When the user clicks the Send Data button, will the data entered be valid according to the requirements of the web developer? In the simple HTML form, the data will be submitted as is. Figure 3: Data entered into simple HTML form As web developers, when we observe how users might use (or abuse) our forms, we should contemplate the following questions when developing an application: Are all fields required? Does the user understand what data is being requested? Will the data entered by the user adhere to format requirements? If the user does not complete the form accurately, what should happen?

35 34 Chapter 4: HTML5 Form Input Enhancements: Form Validation, CSS3, and JavaScript A consideration of these typical scenarios will help us to appreciate the addition of the new HTML5 form input features. In the remainder of this article, I will discuss the advantages of what s new while walking through the process of upgrading the simple HTML form one feature at a time. New Form Elements and Attributes HTML5 supports most of the existing form inputs and elements, as well as new features to support data entry in the modern world. Figure 4 lists the input types supported in HTML5. Figure 4: Input type values in HTML5 Looking over the data being requested in the simple HTML form, we can see an obvious opportunity to explore three new input types: , url, and tel. What would be the advantage of using these new input types instead of text? The first advantage is semantics. Applying a more specific type than text to form data gives parsing engines a better understanding of what the data means. The other advantages all lie in the power of the browser, which raises a valid concern: What browsers support these new features? To answer the browser support question, I will first acknowledge what browsers I used to support the examples in this article: Internet Explorer (IE) 10.0 (Platform Preview) and Google Chrome (14.0).

36 Chapter 4: HTML5 Form Input Enhancements: Form Validation, CSS3, and JavaScript 35 Although other modern browsers also support many of the new form features, I wanted to keep the focus primarily on the what and how, not on the where. As browsers (and standards) continue to evolve, we will have plenty of opportunities to learn about varying implementations. What about browsers that do not support the new HTML5 form input features? Depending on what new feature is being introduced, there is a different impact and possible way to manage. For example, consider the following type-attribute changes to these input elements in the simple HTML form: <input id= name= type= /> <input id= site name= site type= url /> <input id= phone name= phone type= tel /> What will happen when a browser that does not support the new type values renders these inputs? The browser will render these the same as type= text. In other words, the form will behave just as it did prior to the changes. Yet what will happen if the browser supports the new features? Using the same data input, notice how the browser responds to the click of the Send Data button in Figure 5. Figure 5: Invalid format on submit As you might suspect, the input asking for a site URL will give a similar validation message if the data isn t entered properly (i.e., the URL must begin with The input requiring a phone number, however, still behaves like a free-text input. Because there are so many ways to represent a phone number across the world, the initial benefit to indicating an input with a type= tel is the metadata it provides the parsing engine. However, with the new pattern attribute, we can enforce a custom telephone format using a regular expression, as follows: <input id= phone name= phone type= tel pattern= \(\d\d\d\) \d\d\d\-\d\d\d\d /> The preceding pattern would require the data to be entered as: (444)

HTML5 & CSS3. ( What about SharePoint? ) presented by @kyleschaeffer

HTML5 & CSS3. ( What about SharePoint? ) presented by @kyleschaeffer HTML5 & CSS3 ( What about SharePoint? ) presented by @kyleschaeffer The Agenda HTML5 What is it? What can it do? Does SharePoint do HTML5? CSS3 What is it? What can it do? Does SharePoint do CSS3? HTML5

More information

Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence

Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e.

More information

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages

More information

JJY s Joomla 1.5 Template Design Tutorial:

JJY s Joomla 1.5 Template Design Tutorial: JJY s Joomla 1.5 Template Design Tutorial: Joomla 1.5 templates are relatively simple to construct, once you know a few details on how Joomla manages them. This tutorial assumes that you have a good understanding

More information

Microsoft Expression Web Quickstart Guide

Microsoft Expression Web Quickstart Guide Microsoft Expression Web Quickstart Guide Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program, you ll find a number of task panes, toolbars,

More information

Dreamweaver and Fireworks MX Integration Brian Hogan

Dreamweaver and Fireworks MX Integration Brian Hogan Dreamweaver and Fireworks MX Integration Brian Hogan This tutorial will take you through the necessary steps to create a template-based web site using Macromedia Dreamweaver and Macromedia Fireworks. The

More information

COMMONWEALTH OF PENNSYLVANIA DEPARTMENT S OF Human Services, INSURANCE, AND AGING

COMMONWEALTH OF PENNSYLVANIA DEPARTMENT S OF Human Services, INSURANCE, AND AGING COMMONWEALTH OF PENNSYLVANIA DEPARTMENT S OF Human Services, INSURANCE, AND AGING INFORMATION TECHNOLOGY GUIDELINE Name Of Guideline: Domain: Application Date Issued: 03/18/2014 Date Revised: 02/17/2016

More information

We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file.

We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file. Creative Specs Gmail Sponsored Promotions Overview The GSP creative asset will be a ZIP folder, containing four components: 1. Teaser text file 2. Teaser logo image 3. HTML file with the fully expanded

More information

Responsive Web Design Creative License

Responsive Web Design Creative License Responsive Web Design Creative License Level: Introduction - Advanced Duration: 16 Days Time: 9:30 AM - 4:30 PM Cost: 2197 Overview Web design today is no longer just about cross-browser compatibility.

More information

Differences between HTML and HTML 5

Differences between HTML and HTML 5 Differences between HTML and HTML 5 1 T.N.Sharma, 2 Priyanka Bhardwaj, 3 Manish Bhardwaj Abstract: Web technology is a standard that allow developing web applications with the help of predefined sets of

More information

How To Customize A Forum On Vanilla Forum On A Pcode (Forum) On A Windows 7.3.3 (For Forum) On An Html5 (Forums) On Pcode Or Windows 7 (Forforums) On Your Pc

How To Customize A Forum On Vanilla Forum On A Pcode (Forum) On A Windows 7.3.3 (For Forum) On An Html5 (Forums) On Pcode Or Windows 7 (Forforums) On Your Pc 1 Topics Covered Introduction Tool Box Choosing Your Theme Homepage Layout Homepage Layouts Customize HTML Basic HTML layout Understanding HTML Layout Breaking down and customizing the code The HTML head

More information

Advanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication

Advanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication Advanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication HTML5 HTML5 is the most recent version of Hypertext Markup Language. It's evolution

More information

CIS 467/602-01: Data Visualization

CIS 467/602-01: Data Visualization CIS 467/602-01: Data Visualization HTML, CSS, SVG, (& JavaScript) Dr. David Koop Assignment 1 Posted on the course web site Due Friday, Feb. 13 Get started soon! Submission information will be posted Useful

More information

Basic tutorial for Dreamweaver CS5

Basic tutorial for Dreamweaver CS5 Basic tutorial for Dreamweaver CS5 Creating a New Website: When you first open up Dreamweaver, a welcome screen introduces the user to some basic options to start creating websites. If you re going to

More information

Coding HTML Email: Tips, Tricks and Best Practices

Coding HTML Email: Tips, Tricks and Best Practices Before you begin reading PRINT the report out on paper. I assure you that you ll receive much more benefit from studying over the information, rather than simply browsing through it on your computer screen.

More information

SPELL Tabs Evaluation Version

SPELL Tabs Evaluation Version SPELL Tabs Evaluation Version Inline Navigation for SharePoint Pages SPELL Tabs v 0.9.2 Evaluation Version May 2013 Author: Christophe HUMBERT User Managed Solutions LLC Table of Contents About the SPELL

More information

Web Development I & II*

Web Development I & II* Web Development I & II* Career Cluster Information Technology Course Code 10161 Prerequisite(s) Computer Applications Introduction to Information Technology (recommended) Computer Information Technology

More information

Citrix StoreFront. Customizing the Receiver for Web User Interface. 2012 Citrix. All rights reserved.

Citrix StoreFront. Customizing the Receiver for Web User Interface. 2012 Citrix. All rights reserved. Citrix StoreFront Customizing the Receiver for Web User Interface 2012 Citrix. All rights reserved. Customizing the Receiver for Web User Interface Introduction Receiver for Web provides a simple mechanism

More information

HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL

HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL HTML CSS Basic Structure HTML [Hypertext Markup Language] is the code read by a browser and defines the overall page structure. The HTML file or web page [.html] is made up of a head and a body. The head

More information

Unlocking the Java EE Platform with HTML 5

Unlocking the Java EE Platform with HTML 5 1 2 Unlocking the Java EE Platform with HTML 5 Unlocking the Java EE Platform with HTML 5 Overview HTML5 has suddenly become a hot item, even in the Java ecosystem. How do the 'old' technologies of HTML,

More information

Programming exercises (Assignments)

Programming exercises (Assignments) Course 2013 / 2014 Programming exercises (Assignments) TECHNOLOGIES FOR DEVELOPING WEB USER INTERFACES Websites (HTML5 and CSS3) Table of contents Technologies for developing web user interfaces... 1 Websites

More information

Web Authoring CSS. www.fetac.ie. Module Descriptor

Web Authoring CSS. www.fetac.ie. Module Descriptor The Further Education and Training Awards Council (FETAC) was set up as a statutory body on 11 June 2001 by the Minister for Education and Science. Under the Qualifications (Education & Training) Act,

More information

How To Change Your Site On Drupal Cloud On A Pcode On A Microsoft Powerstone On A Macbook Or Ipad (For Free) On A Freebie (For A Free Download) On An Ipad Or Ipa (For

How To Change Your Site On Drupal Cloud On A Pcode On A Microsoft Powerstone On A Macbook Or Ipad (For Free) On A Freebie (For A Free Download) On An Ipad Or Ipa (For How-to Guide: MIT DLC Drupal Cloud Theme This guide will show you how to take your initial Drupal Cloud site... and turn it into something more like this, using the MIT DLC Drupal Cloud theme. See this

More information

Contents. Downloading the Data Files... 2. Centering Page Elements... 6

Contents. Downloading the Data Files... 2. Centering Page Elements... 6 Creating a Web Page Using HTML Part 1: Creating the Basic Structure of the Web Site INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 2.0 Winter 2010 Contents Introduction...

More information

Fast track to HTML & CSS 101 (Web Design)

Fast track to HTML & CSS 101 (Web Design) Fast track to HTML & CSS 101 (Web Design) Level: Introduction Duration: 5 Days Time: 9:30 AM - 4:30 PM Cost: 997.00 Overview Fast Track your HTML and CSS Skills HTML and CSS are the very fundamentals of

More information

Module 6 Web Page Concept and Design: Getting a Web Page Up and Running

Module 6 Web Page Concept and Design: Getting a Web Page Up and Running Module 6 Web Page Concept and Design: Getting a Web Page Up and Running Lesson 3 Creating Web Pages Using HTML UNESCO EIPICT M6. LESSON 3 1 Rationale Librarians need to learn how to plan, design and create

More information

38 Essential Website Redesign Terms You Need to Know

38 Essential Website Redesign Terms You Need to Know 38 Essential Website Redesign Terms You Need to Know Every industry has its buzzwords, and web design is no different. If your head is spinning from seemingly endless jargon, or if you re getting ready

More information

SmallBiz Dynamic Theme User Guide

SmallBiz Dynamic Theme User Guide SmallBiz Dynamic Theme User Guide Table of Contents Introduction... 3 Create Your Website in Just 5 Minutes... 3 Before Your Installation Begins... 4 Installing the Small Biz Theme... 4 Customizing the

More information

Shopping Cart Manual. Written by Shawn Xavier Mendoza

Shopping Cart Manual. Written by Shawn Xavier Mendoza Shopping Cart Manual Written by Shawn Xavier Mendoza Table of Contents 1 Disclaimer This manual assumes that you are using Wix.com for website creation, and so this method may not work for all other online

More information

RADFORD UNIVERSITY. Radford.edu. Content Administrator s Guide

RADFORD UNIVERSITY. Radford.edu. Content Administrator s Guide RADFORD UNIVERSITY Radford.edu Content Administrator s Guide Contents Getting Started... 2 Accessing Content Administration Tools... 2 Logging In... 2... 2 Getting Around... 2 Logging Out... 3 Adding and

More information

WP Popup Magic User Guide

WP Popup Magic User Guide WP Popup Magic User Guide Plugin version 2.6+ Prepared by Scott Bernadot WP Popup Magic User Guide Page 1 Introduction Thank you so much for your purchase! We're excited to present you with the most magical

More information

HTML5 and CSS3. new semantic elements advanced form support CSS3 features other HTML5 features

HTML5 and CSS3. new semantic elements advanced form support CSS3 features other HTML5 features HTML5 and CSS3 new semantic elements advanced form support CSS3 features other HTML5 features fallback solutions HTML5 and CSS3 are new and evolving standards two levels of fallback different browsers

More information

But have you ever wondered how to create your own website?

But have you ever wondered how to create your own website? Foreword We live in a time when websites have become part of our everyday lives, replacing newspapers and books, and offering users a whole range of new opportunities. You probably visit at least a few

More information

GUIDE TO CODE KILLER RESPONSIVE EMAILS

GUIDE TO CODE KILLER RESPONSIVE EMAILS GUIDE TO CODE KILLER RESPONSIVE EMAILS THAT WILL MAKE YOUR EMAILS BEAUTIFUL 3 Create flawless emails with the proper use of HTML, CSS, and Media Queries. But this is only possible if you keep attention

More information

Web Design Specialist

Web Design Specialist UKWDA Training: CIW Web Design Series Web Design Specialist Course Description CIW Web Design Specialist is for those who want to develop the skills to specialise in website design and builds upon existing

More information

How To Use Dreamweaver With Your Computer Or Your Computer (Or Your Computer) Or Your Phone Or Tablet (Or A Computer)

How To Use Dreamweaver With Your Computer Or Your Computer (Or Your Computer) Or Your Phone Or Tablet (Or A Computer) ITS Training Introduction to Web Development with Dreamweaver In this Workshop In this workshop you will be introduced to HTML basics and using Dreamweaver to create and edit web files. You will learn

More information

Guidelines for Effective Email Creative

Guidelines for Effective Email Creative Guidelines for Effective Email Creative While the need for quality and effective design has always existed from a marketing standpoint, challenges unique to the email space require a different look at

More information

HTML TIPS FOR DESIGNING

HTML TIPS FOR DESIGNING This is the first column. Look at me, I m the second column.

More information

Mobile Web Site Style Guide

Mobile Web Site Style Guide YoRk University Mobile Web Site Style Guide Table of Contents This document outlines the graphic standards for the mobile view of my.yorku.ca. It is intended to be used as a guide for all York University

More information

CLASSROOM WEB DESIGNING COURSE

CLASSROOM WEB DESIGNING COURSE About Web Trainings Academy CLASSROOM WEB DESIGNING COURSE Web Trainings Academy is the Top institutes in Hyderabad for Web Technologies established in 2007 and managed by ITinfo Group (Our Registered

More information

01/42. Lecture notes. html and css

01/42. Lecture notes. html and css web design and applications Web Design and Applications involve the standards for building and Rendering Web pages, including HTML, CSS, SVG, Ajax, and other technologies for Web Applications ( WebApps

More information

Why HTML5 Tests the Limits of Automated Testing Solutions

Why HTML5 Tests the Limits of Automated Testing Solutions Why HTML5 Tests the Limits of Automated Testing Solutions Why HTML5 Tests the Limits of Automated Testing Solutions Contents Chapter 1 Chapter 2 Chapter 3 Chapter 4 As Testing Complexity Increases, So

More information

Outline. CIW Web Design Specialist. Course Content

Outline. CIW Web Design Specialist. Course Content CIW Web Design Specialist Description The Web Design Specialist course (formerly titled Design Methodology and Technology) teaches you how to design and publish Web sites. General topics include Web Site

More information

HTML5 and CSS3: New Markup & Styles for the Emerging Web. Jason Clark Head of Digital Access & Web Services Montana State University Libraries

HTML5 and CSS3: New Markup & Styles for the Emerging Web. Jason Clark Head of Digital Access & Web Services Montana State University Libraries HTML5 and CSS3: New Markup & Styles for the Emerging Web Jason Clark Head of Digital Access & Web Services Montana State University Libraries twitter #hashtag #cilhtml5 pinboard.in #tag pinboard.in/u:jasonclark/t:cil-html5/

More information

Web Design for Programmers. Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission

Web Design for Programmers. Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission Web Design for Programmers Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission Quick Disclaimers This is a crash course! Many topics are simplified

More information

Contents. Introduction... 2. Downloading the Data Files... 2

Contents. Introduction... 2. Downloading the Data Files... 2 Creating a Web Page Using HTML Part 3: Multi-page Management and Uploading INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 1.1 Summer 2009 Contents Introduction... 2 Downloading

More information

The Essential Guide to HTML Email Design

The Essential Guide to HTML Email Design The Essential Guide to HTML Email Design Emailmovers Limited, Pindar House, Thornburgh Road Scarborough, North Yorkshire, YO11 3UY Tel: 0845 226 7181 Fax: 0845 226 7183 Email: enquiries@emailmovers.com

More information

Web Authoring. www.fetac.ie. Module Descriptor

Web Authoring. www.fetac.ie. Module Descriptor The Further Education and Training Awards Council (FETAC) was set up as a statutory body on 11 June 2001 by the Minister for Education and Science. Under the Qualifications (Education & Training) Act,

More information

Improving Magento Front-End Performance

Improving Magento Front-End Performance Improving Magento Front-End Performance If your Magento website consistently loads in less than two seconds, congratulations! You already have a high-performing site. But if your site is like the vast

More information

Introduction to web development and JavaScript

Introduction to web development and JavaScript Objectives Chapter 1 Introduction to web development and JavaScript Applied Load a web page from the Internet or an intranet into a web browser. View the source code for a web page in a web browser. Knowledge

More information

JISIS and Web Technologies

JISIS and Web Technologies 27 November 2012 Status: Draft Author: Jean-Claude Dauphin JISIS and Web Technologies I. Introduction This document does aspire to explain how J-ISIS is related to Web technologies and how to use J-ISIS

More information

Responsive Web Design for Teachers. Exercise: Building a Responsive Page with the Fluid Grid Layout Feature

Responsive Web Design for Teachers. Exercise: Building a Responsive Page with the Fluid Grid Layout Feature Exercise: Building a Responsive Page with the Fluid Grid Layout Feature Now that you know the basic principles of responsive web design CSS3 Media Queries, fluid images and media, and fluid grids, you

More information

SEO Optimization A Developer s Role

SEO Optimization A Developer s Role Copyright 2010. www.anubavam.com. All Rights Reserved. Page 1 Contents Overview 3 What is SEO? 3 Role of a Developer in SEO 4 SEO friendly URLs 4 Page Title 5 Meta Tags 6 Page Heading 7 Amplify the First

More information

Development Perspective: DIV and CSS HTML layout. Web Design. Lesson 2. Development Perspective: DIV/CSS

Development Perspective: DIV and CSS HTML layout. Web Design. Lesson 2. Development Perspective: DIV/CSS Web Design Lesson 2 Development Perspective: DIV/CSS Why tables have been tabled Tables are a cell based layout tool used in HTML development. Traditionally they have been the primary tool used by web

More information

Kentico CMS, 2011 Kentico Software. Contents. Mobile Development using Kentico CMS 6 2 Exploring the Mobile Environment 1

Kentico CMS, 2011 Kentico Software. Contents. Mobile Development using Kentico CMS 6 2 Exploring the Mobile Environment 1 Contents Mobile Development using Kentico CMS 6 2 Exploring the Mobile Environment 1 Time for action - Viewing the mobile sample site 2 What just happened 4 Time for Action - Mobile device redirection

More information

WEB DEVELOPMENT IA & IB (893 & 894)

WEB DEVELOPMENT IA & IB (893 & 894) DESCRIPTION Web Development is a course designed to guide students in a project-based environment in the development of up-to-date concepts and skills that are used in the development of today s websites.

More information

Google Sites: Creating, editing, and sharing a site

Google Sites: Creating, editing, and sharing a site Google Sites: Creating, editing, and sharing a site Google Sites is an application that makes building a website for your organization as easy as editing a document. With Google Sites, teams can quickly

More information

IE Class Web Design Curriculum

IE Class Web Design Curriculum Course Outline Web Technologies 130.279 IE Class Web Design Curriculum Unit 1: Foundations s The Foundation lessons will provide students with a general understanding of computers, how the internet works,

More information

Lesson Overview. Getting Started. The Internet WWW

Lesson Overview. Getting Started. The Internet WWW Lesson Overview Getting Started Learning Web Design: Chapter 1 and Chapter 2 What is the Internet? History of the Internet Anatomy of a Web Page What is the Web Made Of? Careers in Web Development Web-Related

More information

Web Designing with UI Designing

Web Designing with UI Designing Dear Student, Based upon your enquiry we are pleased to send you the course curriculum for Web Designing Given below is the brief description for the course you are looking for: Web Designing with UI Designing

More information

css href title software blog domain HTML div style address img h2 tag maintainingwebpages browser technology login network multimedia font-family

css href title software blog domain HTML div style address img h2 tag maintainingwebpages browser technology login network multimedia font-family technology software href browser communication public login address img links social network HTML div style font-family url media h2 tag handbook: id domain TextEdit blog title PORT JERVIS CENTRAL SCHOOL

More information

Intro to Web Design. ACM Webmonkeys @ UIUC

Intro to Web Design. ACM Webmonkeys @ UIUC Intro to Web Design ACM Webmonkeys @ UIUC How do websites work? Note that a similar procedure is used to load images, etc. What is HTML? An HTML file is just a plain text file. You can write all your HTML

More information

By Glenn Fleishman. WebSpy. Form and function

By Glenn Fleishman. WebSpy. Form and function Form and function The simplest and really the only method to get information from a visitor to a Web site is via an HTML form. Form tags appeared early in the HTML spec, and closely mirror or exactly duplicate

More information

The Essential Guide to HTML Email Design

The Essential Guide to HTML Email Design The Essential Guide to HTML Email Design Index Introduction... 3 Layout... 4 Best Practice HTML Email Example... 5 Images... 6 CSS (Cascading Style Sheets)... 7 Animation and Scripting... 8 How Spam Filters

More information

Hypercosm. Studio. www.hypercosm.com

Hypercosm. Studio. www.hypercosm.com Hypercosm Studio www.hypercosm.com Hypercosm Studio Guide 3 Revision: November 2005 Copyright 2005 Hypercosm LLC All rights reserved. Hypercosm, OMAR, Hypercosm 3D Player, and Hypercosm Studio are trademarks

More information

HTML5 & CSS3. Jens Jäger Freiberuflicher Softwareentwickler JavaEE, Ruby on Rails, Webstuff Blog: www.jensjaeger.com Mail: mail@jensjaeger.

HTML5 & CSS3. Jens Jäger Freiberuflicher Softwareentwickler JavaEE, Ruby on Rails, Webstuff Blog: www.jensjaeger.com Mail: mail@jensjaeger. HTML5 & CSS3 and beyond Jens Jäger Freiberuflicher Softwareentwickler JavaEE, Ruby on Rails, Webstuff Blog: www.jensjaeger.com Mail: mail@jensjaeger.com 1 Content A short of history Html New Markup Webforms

More information

Building Your First Drupal 8 Company Site

Building Your First Drupal 8 Company Site Building Websites with Drupal: Learn from the Experts Article Series Building Your First Drupal 8 Company Site by Todd Tomlinson July, 2014 Unicon is a Registered Trademark of Unicon, Inc. All other product

More information

Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates

Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates What is a DIV tag? First, let s recall that HTML is a markup language. Markup provides structure and order to a page. For example,

More information

ART 379 Web Design. HTML, XHTML & CSS: Introduction, 1-2

ART 379 Web Design. HTML, XHTML & CSS: Introduction, 1-2 HTML, XHTML & CSS: Introduction, 1-2 History: 90s browsers (netscape & internet explorer) only read their own specific set of html. made designing web pages difficult! (this is why you would see disclaimers

More information

Search Engine Optimization

Search Engine Optimization Search Engine Optimization Search An Introductory Guide How to improve the effectiveness of your web site through better search engine results. As you ve probably learned, having a Web site is almost a

More information

AEGEE Podio Guidelines

AEGEE Podio Guidelines AEGEE Podio Guidelines EUROPEAN STUDENTS FORUM Contains What is Podio?... 3 Podio vs Facebook... 3 Video Tutorial Podio Basics... 3 Podio for AEGEE-Europe... 3 How to get it?... 3 Getting started... 4

More information

Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com

Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com Essential HTML & CSS for WordPress Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com HTML: Hypertext Markup Language HTML is a specification that defines how pages are created

More information

Developers Guide. Designs and Layouts HOW TO IMPLEMENT WEBSITE DESIGNS IN DYNAMICWEB. Version: 1.3 2013.10.04 English

Developers Guide. Designs and Layouts HOW TO IMPLEMENT WEBSITE DESIGNS IN DYNAMICWEB. Version: 1.3 2013.10.04 English Developers Guide Designs and Layouts HOW TO IMPLEMENT WEBSITE DESIGNS IN DYNAMICWEB Version: 1.3 2013.10.04 English Designs and Layouts, How to implement website designs in Dynamicweb LEGAL INFORMATION

More information

Beginning Web Development with Node.js

Beginning Web Development with Node.js Beginning Web Development with Node.js Andrew Patzer This book is for sale at http://leanpub.com/webdevelopmentwithnodejs This version was published on 2013-10-18 This is a Leanpub book. Leanpub empowers

More information

Dreamweaver CS5. Module 2: Website Modification

Dreamweaver CS5. Module 2: Website Modification Dreamweaver CS5 Module 2: Website Modification Dreamweaver CS5 Module 2: Website Modification Last revised: October 31, 2010 Copyrights and Trademarks 2010 Nishikai Consulting, Helen Nishikai Oakland,

More information

Web Browser. Fetches/displays documents from web servers. Mosaic 1993

Web Browser. Fetches/displays documents from web servers. Mosaic 1993 HTML5 and CSS3 Web Browser Fetches/displays documents from web servers Mosaic 1993 Firefox,IE,Chrome,Safari,Opera,Lynx,Mosaic,Konqueror There are standards, but wide variation in features Desktop Browser

More information

Using Adobe Dreamweaver CS4 (10.0)

Using Adobe Dreamweaver CS4 (10.0) Getting Started Before you begin create a folder on your desktop called DreamweaverTraining This is where you will save your pages. Inside of the DreamweaverTraining folder, create another folder called

More information

This document will describe how you can create your own, fully responsive. drag and drop email template to use in the email creator.

This document will describe how you can create your own, fully responsive. drag and drop email template to use in the email creator. 1 Introduction This document will describe how you can create your own, fully responsive drag and drop email template to use in the email creator. It includes ready-made HTML code that will allow you to

More information

Joomla! template Blendvision v 1.0 Customization Manual

Joomla! template Blendvision v 1.0 Customization Manual Joomla! template Blendvision v 1.0 Customization Manual Blendvision template requires Helix II system plugin installed and enabled Download from: http://www.joomshaper.com/joomla-templates/helix-ii Don

More information

Introduction to web development using XHTML and CSS. Lars Larsson. Today. Course introduction and information XHTML. CSS crash course.

Introduction to web development using XHTML and CSS. Lars Larsson. Today. Course introduction and information XHTML. CSS crash course. using CSS using CSS 1 using CSS 2 3 4 Lecture #1 5 6 using CSS Material using CSS literature During this, we will cover server side web with JavaServer Pages. JSP is an exciting technology that lets developers

More information

Level 1 - Clients and Markup

Level 1 - Clients and Markup Level 1 - Clients and Markup The design for the email we ll build In this level The skills you ll need to compete Power Moves HTML and CSS Media queries Signature Move Using external resources An HTML

More information

Style & Layout in the web: CSS and Bootstrap

Style & Layout in the web: CSS and Bootstrap Style & Layout in the web: CSS and Bootstrap Ambient intelligence: technology and design Fulvio Corno Politecnico di Torino, 2014/2015 Goal Styling web content Advanced layout in web pages Responsive layouts

More information

HOW Interactive Design Conference 2013

HOW Interactive Design Conference 2013 HOW Interactive Design Conference 2013 Photoshop to HTML Chris Converse Use this QR code to get the mobile schedule for this conference. Get session and speaker info, lunch ideas, and links for getting

More information

Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design

Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design Contents HTML Quiz Design CSS basics CSS examples CV update What, why, who? Before you start to create a site, it s

More information

maximizing IT productivity

maximizing IT productivity HTML5 jquery.net SharePoint Silverlight ASP.NET Consulting & Training Time is money and productive software developers save time. The Wahlin Group specializes in helping software developers learn development

More information

How To Create A Web Page On A Windows 7.1.1 (For Free) With A Notepad) On A Macintosh (For A Freebie) Or Macintosh Web Browser (For Cheap) On Your Computer Or Macbook (

How To Create A Web Page On A Windows 7.1.1 (For Free) With A Notepad) On A Macintosh (For A Freebie) Or Macintosh Web Browser (For Cheap) On Your Computer Or Macbook ( CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS The following exercises illustrate the process of creating and publishing Web pages with Notepad, which is the plain text editor that ships as part of

More information

NDSU Technology Learning & Media Center. Introduction to Google Sites

NDSU Technology Learning & Media Center. Introduction to Google Sites NDSU Technology Learning & Media Center QBB 150C 231-5130 www.ndsu.edu/its/tlmc Introduction to Google Sites Get Help at the TLMC 1. Get help with class projects on a walk-in basis; student learning assistants

More information

Lesson Review Answers

Lesson Review Answers Lesson Review Answers-1 Lesson Review Answers Lesson 1 Review 1. User-friendly Web page interfaces, such as a pleasing layout and easy navigation, are considered what type of issues? Front-end issues.

More information

NJCU WEBSITE TRAINING MANUAL

NJCU WEBSITE TRAINING MANUAL NJCU WEBSITE TRAINING MANUAL Submit Support Requests to: http://web.njcu.edu/its/websupport/ (Login with your GothicNet Username and Password.) Table of Contents NJCU WEBSITE TRAINING: Content Contributors...

More information

Basic Website Creation. General Information about Websites

Basic Website Creation. General Information about Websites Basic Website Creation General Information about Websites Before you start creating your website you should get a general understanding of how the Internet works. This will help you understand what goes

More information

Getting Started with WebSite Tonight

Getting Started with WebSite Tonight Getting Started with WebSite Tonight WebSite Tonight Getting Started Guide Version 3.0 (12.2010) Copyright 2010. All rights reserved. Distribution of this work or derivative of this work is prohibited

More information

Generate Android App

Generate Android App Generate Android App This paper describes how someone with no programming experience can generate an Android application in minutes without writing any code. The application, also called an APK file can

More information

Chapter 7 Page Layout Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D

Chapter 7 Page Layout Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D Chapter 7 Page Layout Basics Key Concepts Copyright 2013 Terry Ann Morris, Ed.D 1 Learning Outcomes float fixed positioning relative positioning absolute positioning two-column page layouts vertical navigation

More information

How to Properly Compose E-Mail HTML Code : 1

How to Properly Compose E-Mail HTML Code : 1 How to Properly Compose E-Mail HTML Code : 1 For any successful business, creating and sending great looking e-mail is essential to project a professional image. With the proliferation of numerous e-mail

More information

Web Design with CSS and CSS3. Dr. Jan Stelovsky

Web Design with CSS and CSS3. Dr. Jan Stelovsky Web Design with CSS and CSS3 Dr. Jan Stelovsky CSS Cascading Style Sheets Separate the formatting from the structure Best practice external CSS in a separate file link to a styles from numerous pages Style

More information

Introduction to Web Technologies

Introduction to Web Technologies Introduction to Web Technologies Tara Murphy 17th February, 2011 The Internet CGI Web services HTML and CSS 2 The Internet is a network of networks ˆ The Internet is the descendant of ARPANET (Advanced

More information

White Paper Using PHP Site Assistant to create sites for mobile devices

White Paper Using PHP Site Assistant to create sites for mobile devices White Paper Using PHP Site Assistant to create sites for mobile devices Overview In the last few years, a major shift has occurred in the number and capabilities of mobile devices. Improvements in processor

More information

U.S. Coast Guard Auxiliary Department of User Services Dynamic Web Template User Guide. Version: 10.0.1

U.S. Coast Guard Auxiliary Department of User Services Dynamic Web Template User Guide. Version: 10.0.1 U.S. Coast Guard Auxiliary Department of User Services Dynamic Web Template User Guide Version: 10.0.1 Date: August 2, 2011 [ This page is intentional left blank ] Page: ii Table of Contents List of Figures...

More information

04 Links & Images. 1 The Anchor Tag. 1.1 Hyperlinks

04 Links & Images. 1 The Anchor Tag. 1.1 Hyperlinks One of the greatest strengths of Hypertext Markup Language is hypertext the ability to link documents together. The World Wide Web itself consists of millions of html documents all linked together via

More information