Articles From Andy Harris
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 ArticleCheat 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-01-2017
If you’re working with delimited data is PHP for HTML5 and CSS3 programming, you may want to read in the CSV data yourself. It's not too difficult to do. Look over the following code for readContactCSV.php: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>readContactCSV.php</title> </head> <body> <h1>Contacts</h1> <div> <?php print <<< HERE <table border = "1"> <tr> <th>First</th> <th>Last</th> <th>email</th> <th>phone</th> </tr> HERE; $data = file("contacts.csv"); foreach ($data as $line){ $lineArray = explode("t", $line); list($fName, $lName, $email, $phone) = $lineArray; print <<< HERE <tr> <td>$fName</td> <td>$lName</td> <td>$email</td> <td>$phone</td> </tr> HERE; } // end foreach //print the bottom of the table print "</table> n"; ?> </div> </body> </html> In this program, the contents of a CSV file were read and it was displayed in an HTML table. It's not terribly different than reading any other text file, but there are some new twists. Print the table heading. It's easiest to manually print out the table heading with the field names. A simple heredoc will do the job. print <<< HERE <table border = "1"> <tr> <th>First</th> <th>Last</th> <th>email</th> <th>phone</th> </tr> HERE; Load the data into an array. PHP has a marvelous tool called file. This function takes a filename as its only input. It then opens that file and places all the contents in an array, placing each line in its own element of the array. There's no need to make a file pointer, or to open or close the file. In this example, the contents of contacts.csv are loaded into an array called $data. $data = file("contacts.csv"); Use a foreach loop to step through the contents. Now you can walk through the contents of the file with a simple foreach loop. The current line is placed in a variable called $line. foreach ($data as $line){ Explode each line into its own array. You have got to love a function with a violent name, especially when it's really useful. Use the explode command to separate the line into its component parts. $lineArray = explode("t", $line); Use the list() function to store each element of the array into its own variable. You could just use the array, but it's easier to pass the data back to the same variable names you used when creating the program. The list()construct does exactly that. Feed it a bunch of variable names and assign an array to it, and now each element of the array will be assigned to the corresponding variable. list($fName, $lName, $email, $phone) = $lineArray; Print the variables in an HTML table row. All the variables fit well in an HTML table, so just print out the current row of the table. print <<< HERE <tr> <td>$fName</td> <td>$lName</td> <td>$email</td> <td>$phone</td> </tr> HERE; Clean up your playthings. There's a little housekeeping to do. Finish the loop and close up the HTML table. There's no need to close the file because that was automatically done by the file() function. } // end foreach //print the bottom of the table print "</table> n"; These shortcuts — the file() function and list() — make it very easy to work with CSV data. That's one reason this type of data is popular for basic data problems. The list() construct works only on numerically indexed arrays and assumes that the array index begins at 0. If you want to use the list() function with associative arrays, surround the array variable with the array_values() function. Technically, list() is not a function but a language construct. The file() function is appealing, but it isn’t perfect for every situation. It’s great as long as the file size is relatively small, but if you try to load in a very large file, you will run into memory limitations. The “line at a time” approach used in readContact.php doesn’t have this problem because there’s only a small amount of data in memory at any given time. HTML purists tend to freak out whenever they see an HTML table. It's true that HTML tables were once horribly abused as a layout technique, but that doesn't mean they should never be used.
View ArticleArticle / Updated 01-31-2017
The query that converts a birthday into a formatted age in SQL is admittedly complex for HTML5 programming. Normally, you'll have this query predefined in your PHP code so that you don't have to think about it anymore. If you have MySQL 5.0 or later, though, you have access to a wonderful tool called the VIEW. A view is something like a virtual table. The best way to understand a view is to see a sample of it in action. Take a look at this SQL code: CREATE VIEW heroAgeView AS SELECT name as 'hero', CONCAT( YEAR(FROM_DAYS(DATEDIFF(NOW(), birthday))), ' years, ', MONTH(FROM_DAYS(DATEDIFF(NOW(), birthday))), ' months' ) AS 'age' FROM hero; If you look closely, it's exactly the same query used to generate the age from the birth date, just with a CREATEVIEW statement added. When you run this code, nothing overt happens, but the database stores the query as a view called heroView. This code doesn't look really fancy, but look at the output. It's just like you had a table with all the information you wanted, but now the data is guaranteed to be in a decent format. After you create a view, you can use it in subsequent SELECT statements as if it were a table! Here are a couple of important things to know about views: They aren't stored in the database. The view isn't really data; it's just a predefined query. It looks and feels like a table, but it's created in real time from the tables. You can't write to a view. Because views don't contain data (they reflect data from other tables), you can't write directly to them. You don't use the INSERT or UPDATE commands on views, as you do ordinary tables. They're a relatively new feature of MySQL. Useful as they are, views weren't added to MySQL until Version 5.0. If your server uses an earlier version, you'll have to do some workarounds. You can treat views as tables in SELECT statements. You can build SELECT statements using views as if they were regular tables. Some database packages make it appear as though you can update a view, but that's really an illusion. Such programs reverse-engineer views to update each table. This approach is far from foolproof, and you should probably avoid it.
View ArticleStep by Step / Updated 01-27-2017
Here, you will find out how to register a domain for your HTML5 and CSS3 site using Freehostia.com. Check the documentation on your hosting service. Chances are that the main technique is similar, even if the details are different. To add a domain name to your site, follow these steps:
View Step by StepStep by Step / Updated 03-27-2016
IrfanView has a few other effects available that can sometimes be extremely useful on your HTML5 and CSS3 web page. These effects can be found individually on the Image menu or with the Image Effects browser on the Image menu.
View Step by Step