HTML5 Articles
HTML5 is like the DNA of the worldwide web. Yeah, it's that important. Learn how it works and what it can do, here.
Articles From HTML5
Filter Results
Article / Updated 07-10-2023
The primary purpose of an AJAX library like jQuery is to simplify AJAX requests for HTML5 and CSS3 programmers. It's hard to believe how easy this can be with jQuery. How to include a text file with AJAX Check out this clean code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax.html</title> <script type = "text/javascript" src = "jquery-1.10.2.min.js"></script> <script type = "text/javascript"> $(document).ready(getAJAX); function getAJAX(){ $("#output").load("hello.txt"); } </script> </head> <body> <div id = "output"></div> </body> </html> The HTML is very clean. It simply creates an empty div called output. This example does use AJAX, so if it isn't working, you might need to remember some details about how AJAX works. A program using AJAX should be run through a web server, not just from a local file. Also, the file being read should be on the same server as the program making the AJAX request. The load() mechanism described here is suitable for a basic situation where you want to load a plain-text or HTML code snippet into your pages. Building a poor man's CMS with AJAX AJAX and jQuery can be a very useful way to build efficient websites, even without server-side programming. Frequently a website is based on a series of smaller elements that can be swapped and reused. You can use AJAX to build a framework that allows easy reuse and modification of web content. Although nothing is all that shocking about the page from the user's perspective, a look at the code can show some surprises: <!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title>CMS Using AJAX</title> <link rel = "stylesheet" type = "text/css" href = "cmsStd.css" /> <script type = "text/javascript" src = "jquery-1.10.2.min.js"></script> <script type = "text/javascript"> $(init); function init(){ $("#heading").load("head.html"); $("#menu").load("menu.html"); $("#content1").load("story1.html"); $("#content2").load("story2.html"); $("#footer").load("footer.html"); }; </script> </head> <body> <div id = "all"> <!-- This div centers a fixed-width layout → <div id = "heading"> </div><!-- end heading div → <div id = "menu"> </div> <!-- end menu div → <div class = "content" id = "content1"> </div> <!-- end content div → <div class = "content" id = "content2"> </div> <!-- end content div → <div id = "footer"> </div> <!-- end footer div → </div> <!-- end all div → </body> </html> Look over the code, and you can see these interesting features: The page has no content! All the divs are empty. None of the text shown in the screen shot is present in this document, but all is pulled from smaller files dynamically. The page consists of empty named divs. Rather than any particular content, the page consists of placeholders with IDs. It uses jQuery. The jQuery library is used to vastly simplify loading data through AJAX calls. All contents are in separate files. Look through the directory, and you can see very simple HTML files that contain small parts of the page. For example, story1.html looks like this: <h2>Book I - Creating the HTML Foundation</h3> <ol> <li>Sound HTML Foundations</li> <li>It's All About Validation</li> <li>Choosing your Tools</li> <li>Managing Information with Lists and Tables</li> <li>Making Connections with Links</li> <li>Adding Images</li> <li>Creating forms</li> </ol> The init() method runs on document.ready. When the document is ready, the page runs the init() method. The init() method uses AJAX calls to dynamically load content. It's nothing more than a series of jQuery load() methods. This approach may seem like a lot of work, but it has some very interesting characteristics: If you're building a large site with several pages, you usually want to design the visual appearance once and reuse the same general template repeatedly. Also, you'll probably have some elements that will be consistent over several pages. You could simply create a default document and copy and paste it for each page, but this approach gets messy. What happens if you have created 100 pages according to a template and then need to change the header? You need to make the change on 100 different pages. The advantage of the template-style approach is code reuse. Just like the use of an external style allows you to multiply a style sheet across hundreds of documents, designing a template without content allows you to store code snippets in smaller files and reuse them. All 100 pages point to the same menu file, so if you want to change the menu, change one file and everything changes with it. Here's how you use this sort of approach: Create a single template for your entire site. Build basic HTML and CSS to manage the overall look and feel for your entire site. Don't worry about content yet. Just build placeholders for all the components of your page. Be sure to give each element an ID and write the CSS to get things positioned as you want. Add jQuery support. Make a link to the jQuery library, and make a default init() method. Put in code to handle populating those parts of the page that will always be consistent. Duplicate the template. After you have a sense of how the template will work, make a copy for each page of your site. Customize each page by changing the init() function. The only part of the template that changes is the init() function. All your pages will be identical, except they have customized init() functions that load different content. Load custom content into the divs with AJAX. Use the init()function to load content into each div. This is a great way to manage content, but it isn't quite a full-blown content-management system. Even AJAX can't quite allow you to store content on the web. More complex content management systems also use databases rather than files to handle content. You'll need some sort of server-side programming (like PHP) and usually a database (like mySQL) to handle this kind of work.
View ArticleArticle / Updated 06-28-2023
With an HTML framework in place, you can start working on the CSS to create page styles on your site. The best way to incorporate CSS3 is by following these steps: Begin with the page template diagram. It should have all the information you need. Test your CSS in a browser. Begin with a simple CSS implementation that ensures you have the right names for all the page elements. Then modify each element according to your design document, testing as you go. Implement the CSS from your diagram. You should be implementing the design you already created, not designing the page. (That already happened in the diagramming process.) Save the design. For multi-page projects, external CSS in a separate file is definitely the way to go. As you work, save the CSS in the normal way so the browser will be able to read it. Test and tweak. Things are never quite what they seem with CSS because browsers don't conform to standards equally. You need to test and tweak on other browsers. If users with older technologies are a concern, you may have to use a secondary style sheet for older versions of IE. You may also want to make a mobile version. Repeat for other templates. Repeat this process for each of the other templates you identified in your site diagram. The result of this process should be a number of CSS files that you can readily reuse across your site. Here's the CSS code for the primary page: body { background-color: #000000; } h1 { text-align: center; font-family: sans-serif; color: white; text-shadow: 0 0 10px black; } #all { background-color: white; border: 1px solid black; width: 800px; margin-top:2em; margin-left: auto; margin-right: auto; min-height: 600px; } #heading { background-color: #A11204; background-image: url("cbBackground.png"); color: #FFFFFF; height: 100px; font-size: 2em; padding-left: 1em; border-bottom: 3px solid black; margin-top: -1.5em; } #menu { background-image: url("cbBackground.png"); background-color: #A11204; color: #FFFFFF; float: left; width: 100px; min-height: 500px; } #menu li { list-style-type: none; margin-left: -2em; margin-right: .5em; text-align: center; } #menu a { color: #FFFFFF; display: block; border: #A11204 3px outset; text-decoration: none; } #menu a:hover { border: #A11204 3px inset; } .content { border: 3px double #A11204; margin: 1em; margin-left: 110px; padding-left: 1em; padding-bottom: 1em; padding-right: 1em; border-radius: 5px; box-shadow: 5px 5px 5px gray; } .content h2 { background-color: #A11204; background-image: url("cbBackground.png"); color: #FFFFFF; text-align: right; } #footer { color: #FFFFFF; background-color: #000000; border: 1px solid #A11204; float: left; clear: both; width: 100%; text-align: center; }
View ArticleArticle / Updated 05-03-2023
To assign a font family to part of your page, use some new CSS. As an example, this page has the heading set to Comic Sans MS. If this page is viewed on a Windows machine, it generally displays the font correctly because Comic Sans MS is installed with most versions of Windows. If you're on another type of machine, you may get something else. Look at the simple case. Here's the code: <!DOCTYPE html> <html lang = "en-US"> <head> <meta charset = "UTF-8"> <title>comicHead.html</title> <style type = "text/css"> h1 { font-family: "Comic Sans MS"; } </style> </head> <body> <h1>This is a heading</h1> <p> This is ordinary text. </p> </body> </html> The secret to this page is the CSS attribute. Like most CSS elements, this can be applied to any HTML tag on your page. In this particular case, it was applied it to the level one heading. h1 { font-family: "Comic Sans MS"; } You can then attach any font name you wish, and the browser attempts to use that font to display the element. Even though a font may work perfectly fine on your computer, it may not work if that font isn't installed on the user's machine. If you run exactly the same page on an iPad, you might see this result. The specific font Comic Sans MS is installed on Windows machines, but the MS stands for Microsoft. This font isn't always installed on Linux or Mac. (Sometimes it's there, and sometimes it isn't.) You can't count on users having any particular fonts installed. The Comic Sans font is fine for an example, but it has been heavily over-used in web development. Serious web developers avoid using it in real applications because it tends to make your page look amateurish.
View ArticleArticle / Updated 09-19-2022
Arrays are groups of variables in JavaScript with a name. Arrays are similar to functions because they're used to manage complexity for HTML5 and CSS3 programming. An array is a special kind of variable. Use an array whenever you want to work with a list of similar data types. The following code shows a basic demonstration of arrays: <script type = "text/javascript"> //from genres.html //creating an empty array var genre = new Array(5); //storing data in the array genre[0] = "flight simulation"; genre[1] = "first-person shooters"; genre[2] = "driving"; genre[3] = "action"; genre[4] = "strategy"; //returning data from the array alert ("I like " + genre[4] + " games."); //]]> </script> The variable is a special variable because it contains many values. Essentially, it's a list of genres. The array(5) construct creates space in memory for five variables, all named genre. Accessing array data After you specify an array, you can work with the individual elements using square-bracket syntax. An integer identifies each element of the array. The index usually begins with. genre[0] = "flight simulation"; The preceding code assigns the text value “flight simulation” to the genre array variable at position 0. Most languages require all array elements to be the same type. JavaScript is very forgiving. You can combine all kinds of stuff in a JavaScript array. This flexibility can sometimes be useful, but be aware that this trick doesn't work in all languages. Generally, try to keep all the members of an array the same type. After you store the data in the array, you can use the same square-bracket syntax to read the information. The line alert ("I like " + genre[4] + " games."); finds element 4 of the genre array and includes it in an output message. Using arrays with for loops The main reason to use arrays is convenience. When you have a lot of information in an array, you can write code to work with the data quickly. Whenever you have an array of data, you commonly want to do something with each element in the array. Take a look at to see how you can do so: <script type = "text/javascript"> //from games.html //pre-loading an array var gameList = new Array("Flight Gear", "Sauerbraten", "Future Pinball", "Racer", "TORCS", "Orbiter", "Step Mania", "NetHack", "Marathon", "Crimson Fields"); var text = "; for (i = 0; i < gameList.length; i++){ text += "I love " + gameList[i] + "n"; } // end for loop alert(text); </script> Notice several things in this code: The array called gameList. This array contains the names of some great freeware games. The array is preloaded with values. If you provide a list of values when creating an array, JavaScript simply preloads the array with the values you indicate. You don't need to specify the size of the array if you preload it. A for loop steps through the array. Arrays and for loops are natural companions. The for loop steps through each element of the array. The array's length is used in the for loop condition. Rather than specifying the value 10, the array's length property was used in the loop. This practice is good because the for loop automatically adjusts to the size of the array when you add or remove elements. Do something with each element. Because goes from 0 to 9 (the array indices), you can easily print each value of the array. In this example, an output string was added to. Note the newline characters. The n combination is a special character that tells JavaScript to add a carriage return, such as you get by pressing the Enter key. If you want to completely ruin your productivity, Google some of these game names. They're absolutely incredible, and every one of them is free. You can't beat that.
View ArticleArticle / Updated 08-11-2022
Lists are powerful tools for grouping similar elements, and lists give visitors to your site an easy way to zoom in on groups of information. Just about anything fits in a list, from sets of instructions to collections of links. Definition lists group terms and definitions into a single list and require three elements to complete the list: : Holds the list definitions (dl = definition list) : Defines a term in the list (dt = definition term) : Defines a definition for a term (dd = definition list definition) You can have as many terms (defined by ) in a list () as you need. Each term can have one or more definitions (defined by ). Creating a definition list with two items requires tags and content in the following order: First term name Content for the definition of the first item Second term name Content for the definition of the second item The following definition list includes three terms, one of which has two definitions: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Definition Lists</title> </head> <body> <h1>Markup Language Definitions</h1> <dl> <dt>SGML</dt> <dd>The Standard Generalized Markup Language</dd> <dt>HTML</dt> <dd>The Hypertext Markup Language</dd> <dd>The markup language you use to create web pages.</dd> <dt>XML</dt> <dd>The Extensible Markup Language</dd> </dl> </body> </html> The figure shows how a browser displays this HTML. If you think items in a list are too close together, you can use CSS styles to carefully control all aspects of list appearance. Note that definition lists often display differently inside different browsers, and they aren’t always handled the same by search engines or text-to-speech translators. About.com has a nice discussion of definition lists on their Web Design / HTML page. Alas, this means that definition lists may not be the best choice of formatting for lists you create (even lists of definitions). For a more detailed discussion, see the excellent coverage of this topic on Max Design.
View ArticleArticle / Updated 08-02-2022
Two big categories of strategies have been employed over the years to support web design for mobile devices: graceful degradation and progressive enhancement. Much of the web is currently nearly unusable on mobile devices because it was designed for desktop browsers and doesn't adapt well to small screens. Mobile web users are often forced to zoom, scroll, pinch, squint, and make their fingers as small as possible to use the majority of websites designed more than a couple years ago. Graceful degradation web design strategy for mobile devices The idea behind graceful degradation is to design your website primarily for desktop users, but to also design it in such a way that features of the desktop site that won't work or fit on mobile devices will still be usable — if not pretty or as functional — on mobile devices. Graceful degradation was a good design philosophy in the days before smartphones with full-featured browsers existed. However, graceful degradation does have major problems. Most importantly, graceful degradation forces the user to download your whole website, only to be shown a degraded version of it. On mobile devices, which often have limited bandwidth, this is not a good thing. Progressive enhancement web design strategy for mobile devices As a result of graceful degradation's limitations, a new strategy called progressive enhancement has become popular. Progressive enhancement starts with the very most basic website and adds on features depending on what the user's browser supports. Progressive enhancement enables websites to be usable even when using a very basic mobile phone. The mobile browser doesn't need to download a lot of CSS and JavaScript code (for example) that it doesn't know what to do with. One way to visualize progressive enhancement is as a system that adds layers onto a website depending on the size of the browser or the features the browser supports. Here's a simple example of how two style sheet links can be used to enhance a mobile webpage for larger browsers: <link rel="stylesheet" type="text/css" href="style.css" media="screen, handheld" /> <link rel="stylesheet" type="text/css" href="enhanced.css" media="screen and (min-width: 800px)" /> The first link includes style.css for any screen or handheld device. In this case, style.css contains styles that are optimized for a mobile device. The second link is for a style sheet called enhanced.css. If you look at the media attribute for this link, you'll notice that it has a min-width condition. The enhanced.css file will only be included if the device is larger than 800px. Inside enhanced.css, the web designer can override properties from the style.css style sheet to make the browser scale up for larger browser widths. Mobile first design solves the browser size issue Mobile first is a design philosophy that employs the ideas of progressive enhancement to build mobile websites first and then enhance them for desktop. The great thing about mobile first design is that when you build the mobile site first, as opposed to the other way around, you get a functional desktop site for free! Think about all the websites you've seen that don't fit in mobile browsers. Now, imagine visiting a mobile website with a desktop computer. A website that is optimized for a small screen will always work on a desktop browser — even if it does end up not filling the entire browser window.
View ArticleCheat Sheet / Updated 03-18-2022
Hypertext Markup Language (HTML) and the Cascading Style Sheet (CSS) language are the lifeblood of web pages. Even experienced web designers and authors need help sometimes. This Cheat Sheet provides a quick color code guide, a table of HTML5 elements, and a table of CSS properties.
View Cheat SheetCheat Sheet / Updated 02-28-2022
Check out these handy references on an HTML5 template you can use to start every document, selected MySQL commands, useful JavaScript syntax and CSS attributes, and selected HTML syntax.
View Cheat SheetArticle / Updated 10-29-2021
CSS3 supports external style sheets. This technique allows you to define a style sheet as a separate document and import it into your web pages. To see why this might be attractive, take a look at the example. When you look at the code for externalStyle.html, you might be surprised to see no obvious style information at all! <!DOCTYPE html> <html lang = "en-US"> <head> <meta charset = "UTF-8"> <title>externalStyle.html</title> <link rel = "stylesheet" type = "text/css" href = "myStyle.css" /> </head> <body> <h1>External Style</h1> <p> This page has styles set for paragraphs, body, and header 1. </p> <p> The styles are defined in an external style sheet. </p> </body> </html> Where you normally see style tags (in the header), there is no style. Instead, you see a tag. This special tag is used to connect the current document with another document. How to define the external style When you use an external style, the style elements aren’t embedded in the page header but in an entirely separate document. In this case, the page is connected to a special file called myStyle.css. This file contains all the CSS rules: /* myStyle.css */ body { background-color: #333300; color: #FFFFFF; } h1 { color: #FFFF33; text-align: center; font: italic 200% fantasy; } p { background-color: #FFFF33; color: #333300; text-align: right; border: 3px groove #FFFF33; } The style sheet looks just like a page-level style, except for a few key differences: The style sheet rules are contained in a separate file. The style is no longer part of the HTML page but is an entirely separate file stored on the server. CSS files usually end with the .css extension. There are no tags. These aren’t needed because the style is no longer embedded in HTML. The code begins with a comment. The /* */ pair indicates a comment in CSS. Truthfully, you can put comments in CSS in the page level. External CSS files frequently have comments in them. The style document has no HTML. CSS documents contain nothing but CSS. This comes closer to the goal of separating style (in the CSS document) and content (in the HTML document). The document isn’t tied to any particular page. The great advantage of external CSS is reuse. The CSS document isn’t part of any particular page, but any page can use it. How to reuse an external CSS style External style sheets are really fun when you have more than one page that needs the same style. Most websites today use multiple pages, and they should share a common style sheet to keep consistency. The code shows how easily this is done: <!DOCTYPE html> <html lang = "en-US"> <head> <meta charset = "UTF-8"> <title>SecondPage.html</title> <link rel = "stylesheet" type = "text/css" href = "myStyle.css" /> </head> <body> <h1>Second Page</h1> <p> This page uses the same style as <a href = "externalStyle.html">externalStyle.html</a>. </p> </body> </html> External style sheets have some tremendous advantages: One style sheet can control many pages: Generally, you have a large number of different pages in a website that all share the same general style. You can define the style sheet in one document and have all the HTML files refer to the CSS file. Global changes are easier: If you’re using external styles, you make a change in one place and it’s automatically propagated to all the pages in the system. Separation of content and design: With external CSS, all the design is housed in the CSS, and the data is in HTML. Easy upgrades: Because the design parameters of the entire site are defined in one file, you can easily change the site without having to mess around with individual HTML files. The link tag The tag is the key to adding a CSS reference to an HTML document. The tag has the following characteristics: The tag is part of the HTML page. Use a tag in your HTML document to specify which CSS document will be used by the HTML page. The tag only occurs in the header. Unlike the tag, the tag can occur only in the header. The tag has no visual presence. The user can’t see the tag, only its effects. The <link> tag is used to relate the document with another document. You use the tag to describe the relationship between documents. The tag has a rel attribute, which defines the type of relationship. For now, the only relationship you’ll use is the stylesheet attribute. The tag also has an href attribute, which describes the location of the other document. Link tags are often used to connect a page to an externally defined style document. Most people refer to the hyperlinks created by the anchor () tag as hyperlinks or links. This can lead to some confusion because, in this sense, the link tag doesn’t create that type of link. How to specify an external link To use the tag to specify an external style sheet, follow these steps: Define the style sheet. External style sheets are very similar to the ones you already know. Just put all the styles in a separate text document without the </span> and <span class="code"> tags. Create a link element in the HTML page’s head area to define the link between the HTML and CSS pages. My link element looks like this: <link rel = "stylesheet" type = "text/css" href = "myStyle.css" /> Set the link’s relationship by setting the rel = "stylesheet" attribute. Honestly, stylesheet is almost the only relationship you’ll ever use, so this should become automatic. Specify the type of style by setting type = "text/css". Determine the location of the style sheet with the href attribute.
View ArticleArticle / Updated 03-24-2017
XML is a great way to store data with JavaScript. However, it isn’t the easiest way to see the data. All of the tags tend to hide the data rather than make it easy to understand. A generated XML file tends to lack whitespace, which makes viewing it even more difficult. Some developers use a Cascading Style Sheet (CSS) method, but most developers prefer to use XML Stylesheet Language for Transformations (XSLT). Using XSLT has some significant advantages in flexibility and the ability to work with complex data over CSS, but XSLT is also a little harder to learn. Check here for an XSLT tutorial. Nothing works quite so well as a quick example to demonstrate how XSLT works. To use XSLT with an XML file, you need to add a processing instruction to the XML file. The following processing instruction tells the browser displaying the Customer2.XML file to use the CustomerOut.XSLT file to format the information. This is the only difference between the Customers2.XML file and the Customers.XML file. <?xml-stylesheet type="text/xsl" href="CustomerOut.xslt"?> To transform an XML document into a document you can see, you build an HTML document from it. The following code provides a typical example of XSLT code that you might use for transformation purposes: <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="/"> <html> <body> <h1>Customer Listing</h1> <table border="1"> <tr> <th>Name</th> <th>Age</th> <th>Favorite Color</th> </tr> <xsl:for-each select="Customers/Customer"> <tr> <td> <xsl:value-of select="Name" /> </td> <td> <xsl:value-of select="Age" /> </td> <td> <xsl:value-of select="FavoriteColor" /> </td> </tr> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet> That’s right: XSLT is actually another form of XML, so it starts out with the XML declaration. The root node defines the document as providing XSLT support. It includes a namespace attribute that tells the browser where to find information on how to interpret XSLT. Check here to find out more about namespaces. The tag tells the browser what information to retrieve from the XML file for display purposes. This document retrieves everything in the XML file. The next steps begin creating the HTML document, complete with the tags required to do so. This is an abbreviated page. Normally, you’d include all the required tags. The page includes a heading and the start of a table. The tag processes each of the entries in the file. The file then builds the rows and data cells for the table. The tag retrieves the data values of the , , and elements. Some browsers encounter problems using the example from the local drive. For example, Chrome displays a blank page when you access Customers2.XML from the local drive. To test this technique in a way that works for most browsers, copy the files to your web server and then access the XML file from the web server.
View Article