HTML5 and CSS3 All-in-One For Dummies
Overview
A new edition of a bestseller covers the latest advances in web development!
HTML5 and CSS3 are essential tools for creating dynamic websites and boast updates and enhanced features that can make your websites even more effective and unique. This friendly, all-in-one guide covers everything you need to know about each of these technologies and their latest versions so that you can use them together. Building on the bestselling formats of the first two editions, this new edition teaches you the fundamentals of HTML5 and CSS3, and then presents ways for using them with JavaScript, MySQL, and Ajax to create websites that work.
- Covers using JavaScript, PHP, MySQL, and Ajax in the context of programming
dynamic web pages with CSS3 and HTML5
HTML5 and CSS3 All-in-One For Dummies, 3rd Edition serves as the perfect reference for both web development beginners and seasoned professionals looking to learn more about how to get the most out of the powerful combination of HTML5 and CSS3.
Read More
About The Author
Andy Harris earned a degree in Special Education from Indiana University/Purdue University–Indianapolis (IUPUI). He taught young adults with severe disabilities for several years. He also taught himself enough computer programming to support his teaching habit with freelance programming.
Those were the exciting days when computers started to have hard drives, and some computers connected to each other with arcane protocols. He taught programming in those days because it was fun.
Eventually, Andy decided to teach computer science full time, and he still teaches at IUPUI. He lectures in the applied computing program and runs the streaming media lab. He also teaches classes in whatever programming language is in demand at the time. He has developed a large number of online video-based courses and international distance education projects.
Andy has written several books on various computing topics and languages including Java, C#, mobile computing, JavaScript, and PHP/MySQL.
Andy welcomes comments and suggestions about his books. He can be reached at [email protected].
Sample Chapters
html5 and css3 all-in-one for dummies
CHEAT SHEET
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.HTML5 TemplateThis is the basic HTML5 template. Use it as the starting place for all your of HTML5 documents. Some editors allow you to add a template file for quickly creating a file.
View Cheat Sheet
View Cheat Sheet
HAVE THIS BOOK?
View Book Companion Site
Access practice tests
Additional Book Resources
Articles from
the book
HTML5
There's more than one kind of address when programming in HTML5 and CSS3. You’re probably familiar with absolute references, used for links to outside pages. Another kind of reference — a relative reference — links multiple pages inside your own website.
Absolute references
The type of link used in basicLinks.
The jQuery library is impressive on its own, and when you add libraries like jQuery UI and jQuery Mobile, you can see exactly how powerful this tool is. But that's not all. The developers of jQuery built in an incredible extension mechanism that makes it easy for third parties to add new extensions called plug-ins to jQuery.
To get a true feel for the power of CMSs, you should test-drive a few for your HTML5 and CSS3 site. The wonderful resource www.opensourcecms.com allows you to log in to hundreds of different CMSs as a user and as an administrator to see how they work.
Moodle
Often, you have a special purpose in mind. For example, Moodle is useful for managing online courses.
HTML5
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.HTML5 TemplateThis is the basic HTML5 template. Use it as the starting place for all your of HTML5 documents. Some editors allow you to add a template file for quickly creating a file.
HTML5
Typically, you'll want to work with additional templates for your HTML5 and CSS3 website. Fortunately, there are hundreds of great templates available, and you can easily build your own. Here's how to add additional templates.
Locate the template you want online.
A number of web places offer great, free templates for WebsiteBaker.
HTML5
HTML has supported images for a long time, but now it works just as well with audio files. This is a major breakthrough, as audio previously required external programs like Flash.
It's quite easy to add audio to a web page in HTML5 with the new tag. Here's the code for creating this page:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>audio.
HTML5
You can use CSS3 to draw borders around any HTML5 element. You have some freedom in the border size, style, and color. Here are two ways to define border properties: using individual border attributes, and using a shortcut. Borders don't actually change the layout, but they do add visual separation that can be appealing, especially when your layouts are more complex.
HTML5
The jQuery library adds another extremely powerful capability to JavaScript. It allows HTML5 and CSS3 programmers to easily attach an event to any jQuery object. Take a look at hover.html.
When you move your cursor over any list item, a border appears around the item. This isn't a difficult effect to achieve in ordinary CSS but it's even easier in jQuery.
HTML5
Every time you explore the web, you're bound to run into tons of pictures on just about every HTML5 and CSS3 page you visit. Typically, images are used in four ways on web pages:
External link: The page has text with a link embedded in it. When the user clicks the link, the image replaces the page in the web browser.
HTML5
Objects in JavaScript have other characteristics besides properties. They can also have methods. A method is simply a function attached to an object. To see what this means, take a look at this example:
//create the critter
//from addingMethods.html
var critter = new Object();
//add some properties
critter.
HTML5
The jQuery theme tool makes it quite easy to decorate your elements through CSS3. The great thing about jQuery themes is that they are semantic; that is, you specify the general purpose of the element and then let the theme apply the appropriate specific CSS. You can use the themeRoller application to easily create new themes or modify existing ones.
HTML5
The ability to play videos through HTML is a major breakthrough, and it's not difficult to implement. You can use a tag to add video to your web page, and the video plays directly in the browser without requiring a plugin like Flash.
Of course, it isn't perfect. There are a number of competing video standards, and the browsers cannot agree on which standard to accept.
HTML5
In HTML5 and CSS3 programming, the hallmark of a CMS is the ability of users with limited technical knowledge to add content to the system. This very simple CMS illustrates a limited way to add data to the CMS.
This page allows authorized users to add new blocks to the system.
After a few entries, a user can build a complete second page.
Tables are pretty great. They're a terrific way to present certain kinds of data using HTML5. When you add the and concepts, you can use tables to create some pretty interesting layouts. In fact, because old-school HTML didn't really have any sort of layout technology, a lot of developers came up with some pretty amazing layouts based on tables.
HTML5
Many times, it can be useful in PHP to break a string into an array, especially when reading input from a file for HTML5 and CSS3 programming. Here are the two different ways of doing this:
explode: explode takes one parameter as a delimiter and splits the string into an array based upon that one parameter.
preg_split: If you require regular expressions, using preg_split is the way to go.
HTML5
Check boxes are a useful tool for HTML5 and CSS3 web page developers. Check boxes are used when you want the user to turn a particular choice on or off.
Each check box represents a true or false value that can be selected or not selected, and the status of each check box is completely independent from the others.
HTML5
Sometimes, you want horizontal button bars. Because HTML5 lists tend to be vertical, you might be tempted to think that a horizontal list is impossible. In fact, CSS3 provides all you need to convert exactly the same HTML to a horizontal list.
There's no need to show the HTML again because it hasn't changed at all.
HTML5
Most of the form elements on HTML5 and CSS3 web pages are variations of the same tag. The tag can create single-line text boxes, password boxes, buttons, and even invisible content (such as hidden fields). Most of these objects share the same basic attributes, although the outward appearance can be different.
How to make a standard text field
The most common form of the input element is a plain text field.
HTML5
Nearly every commercial HTML5 and CSS3 website has a banner graphic — a special graphic, usually with a set size (900×100 is common), that appears on every page. Normally, if you're modifying a CSS template, you have a default banner graphic. You'll want to copy this graphic in order to start with the right size and shape.
HTML5
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.
HTML5
There's a very popular approach among HTML5 and CSS3 programmers to building mobile-friendly websites with AJAX, and that's to use an add-on library to jQuery called jQuery Mobile. Jquery Mobile is a powerful combination of JavaScript and CSS code built on top of the library.
The jQuery library works by taking a normal HTML5 page and modifying it in ways that emulate a native look and feel.
HTML5
Fixed-width layouts are common, but they look a little strange if the browser isn't the width specified in the CSS3. If the browser is too narrow, the layout won't work, and the second column will (usually) drop down to the next line.
If the browser is too wide, the page appears to be scrunched onto the left margin with a great deal of white space on the right.
HTML5
Although it's possible to build a WebsiteBaker template from scratch for your HTML5 and CSS3 website, it's generally not a good idea. It's much smarter to begin with a template that's close and add those features you need to make it your own. That way the general structure is already proven, and you only need to customize it to your specifications.
HTML5
You can usually assume that a large web project can be done in straight HTML5 and CSS3. That's always a good starting point, but if your program needs data or interactivity, you probably have a data back end.
Most data-enabled sites fail because they weren't planned properly.
The reason is almost always that the data normalization wasn't incorporated into the plan early enough, and the other parts of the project inevitably depend on a well-planned data back end.
HTML5
Fluid layouts are terrific. They're very flexible, and they're not hard to build in HTML5 and CSS3. Sometimes, though, it's nice to use a fixed-width layout, particularly if you want your layout to conform to a particular background image.
The primary attribute of a fixed-width layout is the use of a fixed measurement (almost always pixels), rather than the percentage measurements used in a fluid layout.
HTML5
It's great being able to pare down an HTML5 and CSS3 web page so it fits on a mobile device, but obviously if the page is smaller, you'll need more of them. Mobile apps often use a page-flipping metaphor to pack more data in a small piece of screen real estate, and the jQuery mobile library has another wonderful tool to make this easy.
HTML5
PHP has used a number of mechanisms available to HTML5 and CSS3 programmers for connecting to SQL databases over the years. PHP 5.1 and later now includes a library called PDO (PHP Data Objects) and it's a significant improvement over the mysql library. Here are a few key features:
It works with multiple backends: In the old days, changing a database engine meant re-writing all your code.
HTML5
A pattern is used in JavaScript to define an image to be used as a fill or stroke. You can use any image on your HTML5 page as a pattern, but it's generally best to find or create an image that is designed to be tiled. Many sources of tiled patterns exist on the web as well.
After you've got an image you want to use as a fill pattern, here's how to implement it in the tag:
function draw(){
//from pattern.
HTML5
What if you want to build several objects in Javascript with the same definition? JavaScript supports an idea called a constructor, which allows you to define an object pattern and reuse it.
//building a constructor
//from constructor.html
function Critter(lName, lAge){
this.name = lName;
this.age = lAge;
this.
HTML5
Submit buttons are usually used in server-side programming. In this form of HTML5 programming, the code is on the web server. You can use PHP to create server-side code. The tag is used to make a Submit button, too!
<input type = "submit" />
Although they look the same, the Submit button is different than the ordinary button in a couple subtle ways:
The attribute is optional.
HTML5
An important technique in HTML5 and CSS3 web development is the use of a tabbed interface in AJAX. This allows the user to change the contents of a segment by selecting one of a series of tabs.
In a tabbed interface, only one element is visible at a time, but the tabs are all visible. The tabbed interface is a little more predictable than the accordion because the tabs (unlike the accordion's headings) stay in the same place.
HTML5
Often, you want a background image to cover the entire page on your HTML5 and CSS3 website. This can be harder than it seems because you don't know how large the page will be in the user's browser.
Worse, large images can take a huge amount of space and slow down the user's experience. The common solution is to use a tiled image that's designed to repeat in the background.
HTML5
Transformations are math operations in JavaScript that can be applied to any drawing or image on you HTML5 and CSS3 page to change the appearance. There are three major transformations:
translation: Move a particular amount in X and Y
rotation: Rotate around a particular point
scale: Change the size of the drawing in X and Y
The element allows all these operations on any type of drawing.
HTML5
You can use absolute positioning to create anHTML5 and CSS3 page layout. This process involves some trade-offs. You tend to get better control of your page with absolute positioning (compared to floating techniques), but absolute layout requires more planning and more attention to detail.
The technique for creating an absolutely positioned layout is similar to the floating technique (in the general sense).
HTML5
Of course, if you have access to PHP, it’s really quite easy to build HTML5 and CSS3 pages dynamically. Take a look at the csInclude.php program to see how this is done:
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<title>CS PHP Includes</title>
<link rel = "stylesheet"
type = "text/css"
href = "csStd.
Often, the initial work on a major site involves creating a plan for the HTML5 and CSS3 site design. Doing this step early helps you see the true scope of the project. A site plan is an overview of a website. Normally, it's drawn as a hierarchy chart.
Imagine you are asked to help design a website for an academic department at a major university.
HTML5
The PHP mechanisms for object-oriented programming (OOP) are important to learn because many of the advanced libraries you're likely to use are object-oriented, and because properly implemented OOP can tame complex programs in a big way.
Start your experiments in OOP by looking over a simple PHP file:
<?php
//SimpleCritter.
HTML5
Sometimes, you'll encounter data that fits best in a tabular format instead of a list. HTML5 supports several table tags for this kind of work. Here, you can see a very basic table.
Sometimes, the best way to show data in a meaningful way is to organize it in a table. HTML defines a table with the tag. The table contains a number of table rows (defined with the tag).
HTML5
The definition list in HTML5 is very useful, even if it's used infrequently. The definition list was originally designed to format dictionary-style definitions, but it's really useful any time you have name and value pairs.
Definition lists don't use bullets or numbers. Instead, they have two elements. Definition terms are usually words or short phrases.
HTML5
With a page layout in place, you can finally start writing some HTML5 code. Begin with your standard page layout diagram and create an HTML template to implement the diagram in working code. The HTML template is quite simple because most of the design should happen in the CSS. Keep these guidelines in mind:
Remember that the template is simply a framework.
HTML5
The birthday value is stored in the hero table in SQL, but what you really want to know as an HTML5 programmer is the hero's age. It's very common to have a date stored in a database. You often need to calculate the time from that date to the current date in years, or perhaps in years and months. Functions can help you do these calculations.
HTML5
Part of SQL data normalization means that you eliminate fields that can be calculated for HTML5 and CSS3 programming. In the hero database, data normalization meant that you don't store the hero's age, but his or her birthday instead. Of course, if you really want the age, you should be able to find some way to calculate it.
HTML5
Real-life HTML5 and CSS3 programming is dangerous. Lots of things can go wrong in PHP. So the smart way to program data is defensive programming. This practice involves anticipating errors and trying to resolve them gracefully. PHP has some advanced error-handling techniques available which are perfect for the task.
HTML5
Changing image formats for your HTML5 and CSS3 web pages with IrfanView is really easy. For example, find an image file on your computer and follow these steps to change image format:
Load the image into IrfanView by dragging the image into IrfanView or using the File→Open menu command.
Make any changes you may want to the image before saving.
HTML5
One of the primary goals of a CMS is to separate the visual layout from the contents of your HTML5 and CSS3 website. You'll want to change the appearance of the page. The visual settings of a site are all based on a template concept. You can easily overlay a new template onto the existing site without changing the contents at all.
HTML5
You can use the img tag to add an image to your HTML5 page, but sometimes you want to use images as a background for a specific element or for the entire page. You can use the background-image CSS rule to apply a background image to a page or elements on a page.
Background images are easy to apply. The code for backgroundImage.
HTML5
Frequently, you'll have an image that's great for your HTML5 and CSS3 site, but not the right color. For example, you may want to change the color of a person's clothing, or make part of a logo fit the color scheme of the rest of your site. Gimp makes performing this effect quite easy:
Load your starting image into Gimp and make any other adaptations you wish to the original image.
HTML5
Colors can seem overwhelming when working with HTML5 and CSS3 web pages. With a little bit of practice, and a little bit of patience, you'll be managing colors with style.
Start with web-safe colors
The webSafe.html program works by letting you quickly enter a web-safe value. To make red, press the FF button in the red column.
HTML5
With so many different web image format options available for your HTML5 and CSS3 web pages, it may seem overwhelming. But, choosing an image format is easy because each format has its own advantages and disadvantages. Take a look to find out which format is best for you:
GIF is best when you need transparency or animation.
HTML5
Check boxes fulfill another useful data input function in JavaScript for HTML5 and CSS3 programming. They're useful any time you have Boolean data. If some value can be true or false, a check box is a good tool.
Check boxes are independent of each other. Although they're often found in groups, any check box can be checked or unchecked regardless of the status of its neighbors.
HTML5
The most obvious way to use JavaScript to ensure that the user enters something valid on your HTML5 page is to supply him with valid choices. The drop-down list is an obvious and easy way to do this.
The list-box approach has a lot of advantages over text field input:
The user can input with the mouse, which is faster and easier than typing.
HTML5
A simple list of buttons can look better than ordinary HTML5 links, but sometimes, your page needs to have a more complex navigation scheme. For example, you may want to create a menu system to help the user see the structure of your site.
Building a nested list
Begin by creating a system of nested lists without any CSS at all.
HTML5
Sometimes, you'll want to create outlines or other kinds of complex data in your HTML5 pages. You can easily nest lists inside each other, if you want. You can see a more complex list describing popular cat names in the U.S. and Australia.
This example uses a combination of lists to do its work. This contains a list of two countries: the U.
HTML5
Ordered lists in HTML5 are almost exactly like unordered lists. Ordered lists traditionally have numbers rather than bullets (although you can change this through CSS if you don’t want numbers).
How to view an ordered list
Here is a page with a basic ordered list — basicOL.html.
You can see a list where the items are numbered.
HTML5
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.
HTML5
Radio buttons are used for HTML5 and CSS3 web pages when you want to let the user pick only one option from a group. You can see an example of a radio button group in action.
Radio buttons might seem similar to check boxes, but they have some important differences:
Only one can be checked at a time. The term radio button came from the old-style car radios.
HTML5
It's much more difficult to set up a working server system by hand than it is to start programming HTML5 and CSS3 with it. Web hosting solutions can often be intimidating.
Setting up your own system by hand isn’t recommended. It's simply not worth the frustration because very good options are available.
XAMPP is an absolutely wonderful open-source tool.
HTML5
JavaScript makes it trivially easy to build an object for HTML5 and CSS3 programming. Because a variable can contain any value, you can simply start treating a variable like an object and it becomes one.
Take a look at the following code:
//from basicObject.html //create the critter var critter = new Object(); //add some properties critter.
HTML5
AJAX lets HTML5 and CSS3 programmers make custom dialog boxes. JavaScript supplies a few dialog boxes (the alert and prompt dialog boxes), but these are quite ugly and relatively inflexible. The jQuery UI includes a technique for turning any div into a virtual dialog box. The dialog box follows the theme and is resizable and movable.
HTML5
The drop-down list is a favorite selection tool of HTML5 and CSS3 web developers. The drop-down list has some very useful elements that make it a huge web developing crowd pleaser:
It saves screen space. Only the current selection is showing. When the user clicks the list, a series of choices drop down and then disappear again after the selection is made.
HTML5
You can use the JavaScript select object in a powerful way for your HTML5 and CSS3 programming needs. To make multiple selection work, you have to make a few changes to both the HTML and the JavaScript code. Check out this page with a multiple-selection list box.
How to code a multiple selection select object
You modify the select code in two ways to make multiple selections:
Indicate multiple selections are allowed.
HTML5
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.
HTML5
All the list types in HTML5 are closely related. The simplest and most common kind of list is an unordered list. You can also use ordered lists and nested lists in HTML.
Look at an unordered list
Look at the simple page. In addition to a couple of headers, it has a list of information.
This list of browsers has some interesting visual characteristics:
The items are indented.
HTML5
The Developer Tools window in JavaScript has another really wonderful tool called the console. There's so much you can do for your HTML5 pages with this wonderful tool. Try this exercise to see some of the great ways you can use the console:
Begin with the forLoops.html page.
You can debug any page, but forLoops.
HTML5
You can easily apply a style to all the elements of a particular type in a HTML5 page, but sometimes you might want to have tighter control of your styles. For example, you might want to have more than one paragraph style. As an example, look at the classes.html page.
Once again, multiple formats are on this page:
Questions have a large italic sans serif font.
HTML5
Sometimes, you may want a number of elements on your HTML5 and CSS3 based web page to share similar styles. Take a look at this example to see this in action.
The top three headings all have very similar styles. Creating three different styles would be tedious, so CSS includes a shortcut:
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<title>multiStyle.
HTML5
Writing jQuery UI code isn't difficult, but getting the right parts of the library can be a bit confusing for HTML5 and CSS3 programmers. The jQuery UI library is much larger than the standard jQuery package, so you may not want to include the entire thing if you don't need it.
Previous versions of jQuery UI allowed you to download the entire package but stored each of the various elements in a separate JavaScript file.
HTML5
Although HTML has long had support for images, JavaScript's canvas interface adds new life to web images. Images can be displayed inside a canvas, where they can be integrated with the vector-drawing techniques of the canvas API. You can also select a portion of an image to display and apply the various transformations to your image to create interesting compositions and animations.
HTML5
A few primitive shapes can be drawn directly onto the graphics context in JavaScript. The most common shapes for HTML5 and CSS3 programming that most web developers use are rectangles and text.
Rectangle functions
You can draw three different types of rectangles:
clearRect(x, y, w, h): Erases a rectangle with the upper-left corner (x,y) and size (w,h).
HTML5
Of course, the purpose of a database is to manage data. Sometimes, you want to edit data after it’s already in the table. SQL includes handy commands for this task: UPDATE and DELETE. The UPDATE command modifies the value of an existing record, and the DELETE command removes a record altogether.
How to update a record
Say that you decide to modify Bill Gates’s address to reinforce a recent marketing triumph.
HTML5
Sometimes, you can make improvements to an image on your HTML5 and CSS3 web page by modifying the colors with IrfanView. The Color corrections dialog box on the Images menu gives you a wide range of options.
You can do a surprising number of helpful operations on an image with this tool:
Brightness: When adjusted to a higher value, the image becomes closer to white.
HTML5
As an HTML5 and CSS3 programmer, it’s almost a guarantee that you can build a wonderful SQL data structure. And because it’s wonderful, you probably will want to export it for a number of reasons:
You want a backup. Just in case something goes wrong!
You want to move to a production server. It’s smart to work on a local (offline) server while you figure things out, but eventually you’ll need to move to a live server.
HTML5
Paragraphs and other block-level elements have a well-defined default behavior in CSS3. They take the entire width of the page, and the next element appears below. When you apply the element to a paragraph, the behavior of that paragraph doesn't change much, but the behavior of succeeding paragraphs is altered.
HTML5
After you normalize the SQL data, you've created the entities (tables). As an HTML5 and CSS4 programmer, you need to investigate the relationships among these entities. Three main types of data relationships exist (and of these, only two are common):
One-to-one relationship: Each element of table A is related to exactly one element of table B.
HTML5
When you've got a SQL database, you can build a table for HTML5 and CSS3 programming. When you've defined a table, you can add data. When you've got data, you can look at it. Begin by building a table to handle the contact data.Be sure you're logged into phpMyAdmin.The phpMyAdmin page will have your database name available in the left column.
HTML5
To install a CMS for your HTML5 and CSS3 site, you need to download these components and install them on your server. A CMS package typically contains many different kinds of files. Most are primarily PHP programs with HTML/HTML pages and CSS. Most CMSs also include databases written in MySQL.
Download the latest version of WebsiteBaker.
HTML5
Getting information from a group of radio buttons in JavaScript requires a slightly different technique for your HTML5 page than most of the form elements. Unlike the select object, there is no container object that can return a simple value. You also can't just go through every radio button on the page because you may have more than one group.
HTML5
Sometimes you want to repeat something as an HTML5 and CSS3 programmer. PHP (like most programming languages) supports a number of looping constructs. Begin with the humble but lovable loop.
This prints 100 dice. This would be tedious to do by hand, but that’s exactly the kind of stuff computers are so good at.
HTML5
Many web pages turn out to be lists of links in HTML5 and CSS3 programming. Because lists and links go so well together, it's good to look at an example. Notice this list of links to books written by a certain author.
This example has no new code to figure out, but the page shows some interesting components:
The list: An ordinary unordered list.
HTML5
You may have a situation where you want the user to choose from a list of elements. AJAX allows HTML5 and CSS3 programmers that option. The selectable widget is a great way to create this functionality from an ordinary list. The user can drag or Ctrl+click items to select them. Special CSS classes are automatically applied to indicate that the item is being considered for selecting or selected.
HTML5
The while loop is the primary way, other than a for loop, of repeating code in PHP. As an HTML5 and CSS3 programmer, there may be times when you choose one over the other, but it is important to understand the differences between the two.
while loops are much like for loops. They require the same thought:
A sentry variable: This special variable controls access to the loop.
Typically, you do the primary development of your HTML5 and CSS3 website on a server that isn't in public view. Follow these simple steps to take the site to production:
Test your design.
Do some usability testing with real users. Watch people solve typical problems on the site and see what problems they encounter.
HTML5
The uncertainty of knowing whether your fonts will be displayed correctly on your HTML5 and CSS3 web page is frustrating, but you can take some control. You can specify an entire list of font names if you want. The browser tries each font in turn. If it can't find the specified font, it goes to the next font and on down the line.
HTML5
HTML5 and CSS3 web developers can use AJAX to make a responsive mobile site. One way to make a site work well on multiple resolutions is to provide different CSS rules based on the detected media type.
CSS3 has a marvelous new feature called the media query, which allows you to specify a media type and determine various features of the display.
HTML5
Although all the modern browsers manage CSS3 pretty well these days, Internet Explorer (especially the earlier versions) is well known for doing things in non-standard ways. Here are a few tricks to help you deal with the incompatibility.
How to make Internet Explorer–specific code
It’s a little easier for you to see how conditional comments work by viewing a simple example and then seeing how to use the conditional comment trick to fix CSS incompatibility problems.
HTML5
It won't take long before you find situations where JavaScript’s standard for or while loops do not seem adequate for HTML5 programming. Consider a password box. You want to ask for a password until the user gets the password correct or guesses incorrectly three times. Think about how you would build that code.
HTML5
HTML5 and CSS3 websites often work with databases. Your hosting service may have features for working with MySQL databases remotely. You should understand how this process works because it's often slightly different from working with the database on your local machine.
Create your database
Often, a tool allows you to pick a defined database or create a new one.
HTML5
HTML5 and CSS3 web developers have long used the simple SSI (Server Side Include) trick as a quick and easy way to manage content. It involves breaking the code into smaller code segments and a framework that can be copied.
Even if you view the source code in the browser, you don’t find anything unusual about the page.
HTML5
By the time you're writing loops and conditions in JavaScript, things can go pretty badly in your HTML5 code. Sometimes it's very hard to tell what exactly is going on. Fortunately, modern browsers have some nice tools that help you look at your code more carefully.
A debugger is a special tool that allows you to run a program in “slow motion,” moving one line at a time so you can see exactly what is happening.
HTML5
Inner joins are a perfect way to implement one-to-many SQL relationships for HTML5 and CSS3 programming. If you look at ER diagrams, you often see many-to-many relationships, too. Of course, you also need to model them. Here's the secret: You can't really do it. The relational data model doesn't really have a good way to do many-to-many joins.
HTML5
Perhaps the most intriguing application of the DOM in JavaScript is the ability to let the user communicate with the program through the HTML5 web page, without all those annoying dialog boxes. Here is a page with a web form containing two textboxes and a button.
When you click the button, something exciting happens.
HTML5
The tag in JavaScript has one more incredible trick up its sleeve for HTML5 and CSS3 programmers. You can extract the data of a tag into the underlying pixel data. If you know how to manipulate this data, you can have extensive control of your image in real time. You can use this data for color balancing, as well as experimenting with custom blurs, sharpens, and chroma-key effects.
HTML5
Often you'll prefer to move an element on JavaScript's canvas. This process is actually very similar to the rotation mechanism for HTML5 programming. Here's some code that moves an image and wraps it to the other side when it leaves the canvas.
//from wrap.html
var drawing;
var con;
var goofyPic;
CANV_HEIGHT = 200;
CANV_WIDTH = 200;
SPR_HEIGHT = 50;
SPR_WIDTH = 40;
var x = 0;
var y = 100;
var dx = 10;
var dy = 7;
function init(){
drawing = document.
HTML5
There are a few variations of the if structure you'll sometimes run across in JavaScript when programming your HTML5 pages. One variation is the nested if statement. This simply means you can put if statements inside each other for more complex options. For example, look at the following code:
function checkTemp(){
//from nestedIf.
With inherited CSS3 styles comes the ability to override an inherited style rule. For example, take a look at the following code to get an idea of what this could mean:
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<title>overRide.html</title>
<style type = "text/css">
body { color: red; }
p {color: green; }
.
HTML5
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>
<?
HTML5
If you can write data to a file in PHP, it would make sense that you could read from that file for HTML5 and CSS3 programming as well. The readContact.php program pulls the data saved in the previous program and displays it to the screen.
It is not difficult to write a program to read a text file. Here's the code:
<!
HTML5
The keyboard is a primary input technology for HTML5 programmers, especially for desktop machines. The standard way to read the keyboard in JavaScript's canvas is to set up special functions called event-handlers. JavaScript has a number of pre-defined event handlers you can implement. The keyDemo.html program illustrates a basic keyboard handler in action.
HTML5
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:Log in to the service.Log in to your hosting service administration panel.
HTML5
All the other image-manipulation tricks may be optional, but you should really resize the images on your HTML5 and CSS3 web pages. Although high-speed connections may have no trouble with a huge image, nothing makes a web page inaccessible to users with weaker connectivity faster than bloated image sizes.
To resize an image with IrfanView, perform the following steps:
Load the image into IrfanView.
HTML5
Logic errors in JavaScript are troublesome. In fact, they're nearly impossible to resolve on your HTML5 page without some sort of debugging tool. However, like a syntax error, when you can find a logic error, it's usually quite easy to repair.
function getPassword(){
var correct = "HTML5";
var guess = ";
while (guess == correct){
guess = prompt("Password?
HTML5
The most common type of JavaScript error in HTML5 is a crash or syntax error, usually meaning you misspelled a command or used a function incorrectly. From the user's point of view, browsers don't usually tell you directly when a syntax error occurs, but simply sit there and pout. The best way to discover what's going wrong is to call up the debugging console.
HTML5
As an HTML5 and CSS3 programmer, you can use PHP to retrieve SQL data. After a PDO connection is set up, it's pretty easy to use. Here's the overall plan for retrieving data from the PDO connection:
Put all PDO code in an exception-handler.
Data access is inherently dangerous. It's a perfect place for things to go wrong, so use an exception-handler to protect from potential errors.
HTML5
phpMyAdmin provides terrific features for working with SQL scripts for HTML5 and CSS3 programming. You can write your script directly in phpMyAdmin, or you can use any text editor. Your editor can really help you. Consider a text editor like Notepad++ or Komodo Edit, which both support syntax coloring for SQL.
HTML5
Sometimes, you may want to select only particular segments on your HTML5 and CSS3 web page. Take a look at how you should refer to someone who doesn't appreciate your web development prowess.
Defining more than one kind of paragraph
Apart from its cultural merit, this page is interesting because it has three different paragraph styles.
HTML5
The Color Scheme Designer works by letting you pick one main hue for your HTML5 web page and then uses one of a number of schemes for picking other hues that work well with the base one. To choose the base hue you want for your page, click a color on the color wheel.
The color wheel is arranged according to the traditional artist's color scheme based on HSV rather than the RGB scheme used for computer graphics.
HTML5
To use the tag in JavaScript, build an HTML5 and CSS3 web page with a element in it to begin. Typically you'll provide width, height, and id parameters:
<canvas id = "drawing"
width = "200"
height = "200">
<p>Your browser does not support the canvas tag...</p>
</canvas>
Inside the tag, you can put any HTML code you wish.
HTML5
Sometimes, you need a little more flexibility in your HTML5 table design. Take a look at a page from an evil overlord's daily planner. Being an evil overlord is clearly a complex business. From a code standpoint, the items that take up more than one cell are the most interesting. Designing traps takes two mornings, and improving the hideout takes three.
HTML5
Many times, you need to specify the size of something in CSS3. Of course, font size is one of these cases. The different types of measurement have different implications. It's important to know there are two distinct kinds of units in CSS.
Absolute measurements attempt to describe a particular size, as in the real world.
HTML5
Relative measurement is a much wiser choice than absolute measurement in HTML5 and CSS3 web development. You can use these schemes to change sizes in relationship to the standard size.
Named sizes
CSS has a number of font size names built in:
xx-small
x-small
small
medium
large
x-large
xx-large
It may bother you that there's nothing more specific about these sizes: How big is large?
HTML5
This basic mechanism for storing data in PHP is great for small amounts of data, but it will quickly become unwieldy for HTML5 and CSS3 programming if you're working with a lot of information. If you're expecting hundreds or thousands of people to read your forms, you'll need a more organized way to store the data.
HTML5
As far as the HTML5 code is concerned, it's simply a list of links. There's nothing special here that makes this act like a group of buttons, except the creation of a div called menu. All the real work is done in CSS:
#menu li {
list-style-type: none;
width: 7em;
text-align: center;
margin-left: -2.5em;
}
#menu a {
text-decoration: none;
color: black;
display: block;
background-color: #EEEEFF;
box-shadow: 5px 5px 5px gray;
margin-bottom: 2px;
}
#menu a:hover {
background-color: #DDDDEE;
box-shadow: 3px 3px 3px gray;
border: none;
}
The process for turning an ordinary list of links into a button group like this is simply an application of CSS tricks:
Begin with an ordinary list that will validate properly.
HTML5
AJAX can give you the same effects for your HTML5 and CSS3 that Server Side Includes (SSI) does. The page will look exactly the same but an entirely different method will be used to achieve your goal.
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<title>csAJAX.html</title>
<link rel = "stylesheet"
type = "text/css"
href = "csStd.
HTML5
Although many outstanding AJAX/JavaScript libraries are available for HTML5 and CSS3 programmers, jQuery has quickly become one of the most prominent. Here are some reasons for the popularity of jQuery:
It's a powerful library. The jQuery system is incredibly powerful. It can do all kinds of impressive things to make your JavaScript easier to write.
HTML5
Many HTML5 and CSS3 pages require an initialization function. The body onload mechanism is frequently used in DOM/JavaScript to make pages load as soon as the document has begun loading. This is a function that's run early to set up the rest of the page. While body onload does this job well, a couple of problems exist with the traditional technique:
It requires making a change to the HTML.
HTML5
Everybody wants to make mobile apps these days. Here's the big secret. Many apps are really written in HTML5, CSS, and JavaScript. You already know everything you need to make apps that work on mobile devices. Better yet, you don't need to learn a new language or get permission from the app store or purchase a license, as you do for native apps.
HTML5
Let’s begin the absolute positioning adventure by considering the default layout mechanism. Here, you can see an HTML5 page with two paragraphs on it. You can use CSS to give each paragraph a different color and to set a specific height and width. The positioning is left to the default layout manager, which positions the second (black) paragraph directly below the first (blue) one.
The transform behavior is pretty cool, but CSS3 promises an even more exciting form of animation called the (wait for it) animation mechanism. Here is an animation of a box moving around the screen.
Here's the basic strategy for building a CSS animation:
Generate a set of keyframes.
Animations are based on the notion of keyframes.
A CSS3 gradient (which is a blend between two or more colors) can be a nice background. Previously, developers would create a gradient by building a thin gradient strip in an image editor, and then using the repeat-x or repeat-y rules to make that smaller image replicate across the page. This was a nice technique, but it was not terribly flexible, and only relatively simple linear gradients were possible.
CSS3 allows you to apply some interesting special effects to your HTML5 pages. These effects can be applied to any element, but they generally are applied to images and headlines. Note that these are still considered experimental, so the browser implementations vary.
Transparency
CSS3 has complete support for adjustable opacity.
The most significant improvement to text in CSS3 is the @font mechanism that allows you to define your own fonts and package them with your website. CSS3 has other text-formatting tricks available, too. The text-stroke and text-shadow rules allow you to make interesting transformations on text in your pages.
Both of these rules are used to decorate text, but they can impact readability, so you should use them carefully.
HTML5
As browsers become more powerful, interesting new capabilities for HTML5 and CSS3 programming are emerging. One of the more exciting developments is the formation of 3D transformations. A 3D transform is similar to the traditional transformations, but it allows for a virtual third axis.
Ordinary, 2D animations utilize the 2D coordinate system, with an X axis going side-to-side and a Y axis traversing top-to-bottom.
CSS3 includes the ability to apply geometric transformations onto any element in your HTML5 web page. This provides a remarkable level of visual control not previously available to web developers.
The transform attribute allows you to apply a mathematical transformation to any div. When you apply transform to an element, you need to apply one or more of the following parameters to describe the type of transformation:
translate: Moves the object from its default position.
It's already possible to change CSS properties on the fly through pseudo-classes (like hover) or with JavaScript code. Prior to CSS3, all CSS state changes happened instantly. With the new transition attribute, you can cause transitions to happen over time.
Look at a simple h1 heading:
<h1>Transition Demo</h1>
The CSS code is mainly quite straightforward:
h1 { color: black font-size: 300%; transition:color 1s ease-in; }
h1:hover { color: red; }
Begin by ignoring the transition attribute.
HTML5
Using color names in CSS3 seems like the easiest solution, and, for basic colors, they work fine. However, here are some problems with color names that make them troublesome for web developers:
Only 16 color names will validate. Although most browsers accept hundreds of color names, only 16 are guaranteed to validate in CSS and HTML validators.
HTML5
Although an HTML5 web developer can suggest any font for a web page, the font files are traditionally a client-level asset. If the client doesn't have the font installed, she won't see it. Fortunately, CSS3 supports a sensible solution for providing downloadable fonts.
The style does not work like most CSS elements.
HTML5
You may be shocked to know that HTML5 doesn't allow italics or bold. Old-style HTML had the tag for italics and the tag for bold. These seem easy to use and understand.
Unfortunately, they can trap you. In your HTML5, you shouldn't specify how something should be styled. You should specify instead the purpose of the styling.
HTML5
As an HTML5 and CSS3 programmer, you can solve all the problems with the SQL database by breaking the single table into a series of smaller, more specialized tables. The typical way of working with data design is to use a concept called an Entity-Relationship (ER) diagram. This form of diagram usually includes the following:
Entities: Typically, a table is an entity, but you see other kinds of entities, too.
HTML5
Many page layout problems appear to require tables. Some clever use of the CSS3 float can help elements with multiple columns without the overhead of tables. Forms cause a particular headache because a form often involves labels in a left column followed by input elements in the right column.
You'd probably be tempted to put such a form in a table.
HTML5
You can assign an HSL value wherever you use colors on your HTML5 and CSS3 web page. The code for HSLcolors shows how the HSL scheme can be used on your page:
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<title>HSLcolors.html</title>
<style type = "text/css">
body {
background-color: HSL(180, 75%, 75%);
}
h1 {
color: HSL(180, 75%, 25%);
background-color: HSL(180, 75%, 90%);
}
p {
color: HSL(0, 75%, 25%);
}
</style>
</head>
<body>
<h1>This is a headline</h1>
<p>
This is a paragraph
</p>
</body>
</html>
To specify a color using the HSL scheme, do this:
Set up your selectors as usual.
The basic unit of structure in SQL is called a table because it’s usually displayed in a tabular format. HTML5 also has a table structure, which is ideal for outputting SQL data. ContactTable.php, displays the contact information inside an HTML table.
Tables are a very common way to output SQL results. There’s one big difference between table output and the basic version of a table.
HTML5
Colors in HTML5 are a strange thing. The “easy” way (color names) turns out to have many problems. The method most web developers really use sounds a lot harder, but it isn't as bad as it may seem at first. The hex color scheme uses a seemingly bizarre combination of numbers and letters to determine color values.
HTML5
Generally, you should use standard fonts for the HTML5 and CSS3 web page's main content, so having a limited array of fonts isn't such a big problem. Sometimes, though, you want to use fonts in your headlines. You can use a graphical editor, like GIMP, to create text-based images and then incorporate them into your pages.
HTML5
It's not quite a background, but you can also use images for list items for your HTML5 and CSS3 web page. Sometimes, you might want some type of special bullet for your lists.
On this page, several varieties of peppers have been listed. For this kind of list, a custom pepper bullet is just the thing. Of course, CSS is the answer:
<!
HTML5
Object-oriented programming in PHP has another feature which makes it very useful for large projects. Many objects are related to each other, and you can use a family tree relationship to simplify your programming.
How to build a critter based on another critter
There's a new critter in town. This one has the same basic features, but a worse attitude.
HTML5
IrfanView, by Irfan Skiljan, is a freeware program that can handle the basic image manipulation needs for your HTML5 and CSS3 web pages and quite a bit more. Of course, you can use any software you want, but if something's really good and free, it's a great place to start.
A web developer needs to have an image manipulation program to help with all these chores.
HTML5
Often, you'll have a lot of images to modify at one time that will go on your HTML5 and CSS3 web page. IrfanView has a wonderful batch-processing tool that allows you to work on several images at once. You can use this tool to take all the images you want to use on a page and convert them to a particular size and format.
HTML5
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.Image Effects BrowserThe Image Effects browser is often a better choice because it gives you a little more control of most effects and provides interactive feedback on what the effect will do.
HTML5
JavaScript objects and arrays are incredibly flexible for HTM5 and CSS3 programming. In fact, they are so well known for their power and ease of use that a special data format called JavaScript Object Notation (JSON) has been adopted by many other languages.
JSON is mainly used as a way to store complex data (especially multidimensional arrays) and pass the data from program to program.
HTML5
The standard for loop in JavaScript counts the values between 1 and 10. The “count to ten” button triggers the count()function for your HTML5 and CSS3 programming. Here's the code for count():
function count(){
output.innerHTML = ";
for (i = 1; i <= 10; i++){
output.innerHTML += i + "<br />";
} // end for loop
} // end count
Although the count() function clearly prints ten lines, it only has one line that modifies the output div.
HTML5
JavaScript, like a number of languages, supports another decision-making structure called switch. This is a useful alternative in HTML5 and CSS3 programming when you have a number of discrete values you want to compare against a single variable. Take a look at this name program:
function checkName(){
//from switch.
HTML5
Here, you can see a dialog box asking for a password. When programming your HTML5 web page, you can use JavaScript to achieve this same box with a while loop. The program keeps asking for a password until the user enters the correct password.
Here's the HTML code used for two different while examples:
<body>
<h1>While Loop Demo</h1>
<p>The password is 'HTML5'</p>
<form action = ">
<fieldset>
<button type = "button"
onclick = "getPassword()">
guess the password
</button>
<button type = "button"
onclick = "threeTries()">
guess the password in three tries
</button>
</fieldset>
</form>
</body>
The first version keeps popping up a dialog box until the user gets the answer correct.
HTML5
The length property is kind of cool, but the string object has a lot more up its sleeve. Objects also have methods. Strings in JavaScript have all kinds of methods (things they can do). Here are a few favorites:
toUppercase() makes an entirely uppercase copy of the string.
toLowercase() makes an entirely lowercase copy of the string.
HTML5
Komodo Edit is a great text editor for HTML5 and CSS3 programming.. This editor is extremely powerful, but is not quite as intimidating as some of the older tools. It has a modern streamlined interface, but more power than you might realize at first.
Komodo edit is actually the open-source cousin to a commercial Integrated Development Environment (IDE) called Komodo IDE.
HTML5
A style can be defined directly in the HTML5 body. Here is an example of this type of code. A local style is also sometimes called an element-level style because it modifies a particular instance of an element on the page.
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<title>localStyles.
CSS3 supports several new selectors with interesting new capabilities that you should become familiar with. You can use these new capabilities to enhance pages in even better ways than before.
Attribute selection
You can now apply a style to any element with a specific attribute value. For example, the input tag takes different forms, all determined by the type attribute.
HTML5
Trying to cram all your data into a single SQL table usually causes problems for HTML5 and CSS3 programming. The process for solving these problems is called data normalization. Normalization is really a set of rules. When your database follows the first rule, it's said to be in first normal form. Here, you get to the third normal form, which is suitable for most applications.
HTML5
The most basic array in PHP is a one-dimensional array, which is basically just one container with slots for HTML5 and CSS3 programming. Each slot has only one variable in it. Here, you find out how to create this type of array and fill it.
How to create an array
Array creation is pretty simple. First, you need to create a variable and then tell PHP that you want that variable to be an array:
$theVar = array();
Now, $theVar is an array.
HTML5
Sometimes, you may need PHP to work with files in a directory for HTML5 and CSS3 programming. Say you have a reporting tool for a client. Each week, you generate a new report for the client and place it in a directory.
You don't want to have to alter the page each time you do this, so instead, make a page that automatically generates a list of all the report files for the client to select from.
HTML5
PHP arrays and loops are like peanut butter and jelly; they just go together. When you start to use arrays in HTML5 and CSS3 programming, eventually, you'll want to go through each element in the array and do something with it. The for loop is the perfect way to do this.
Look at the loopingArrays.php code to see an array with a couple of variations of the for loop.
HTML5
A PHP variable can be named almost anything in HTML5 and CSS3 programming. There are some reserved words that you can't name a variable (like print, which already has a meaning in PHP), so if your program isn't working and you can't figure out why, try changing some variable names or looking at the reserved words list (at www.
HTML5
An especially important application of the if structure is unique to PHP server-side programming. Up to now, many of your PHP programs required two separate files: an HTML page to get information from the user and a PHP program to respond to that code.
Wouldn't it be great if the PHP program could determine whether it had the data or not?
HTML5
For an example of using PHP to build more complex HTML5 forms, look over monty.html. This program is a tribute to one of the best movies of all time. (You might just have to rent this movie if you’re really going to call yourself a programmer. It’s part of the culture.)
The HTML form poses the questions. Here’s the code:
<!
HTML5
Often, you run across a situation in HTML5 and CSS3 programming where you have one expression that can have many possible values. You can always use the structure to manage this situation, but PHP supplies another interesting option.
The code for this program uses the switch structure. Take a look at how it’s done:
switch.
PHP is a different language than HTML5, but the two are very closely related. It may be best to think of PHP as an extension that allows you to do things you cannot do easily in HTML.
Every time you run getTime.php, it generates the current date and time and returns these values to the user. This would not be possible in ordinary HTML because the date and time (by definition) always change.
HTML5
Once you have some style going in your HTML5 and CSS3 web pages, you may be a bit concerned about how ugly links are. The default link styles are useful, but they may not fit with your color scheme.
How to style a standard link
Adding a style to a link is easy. After all, (the tag that defines links) is just an HTML tag, and you can add a style to any tag.
HTML5
As web developers began using floating layout techniques, they almost always created divs called nav, header, and footer. The developers of HTML5 decided to create new elements with these names. Take a look at the following code to see the semantic tags in action.
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>semantic</title>
<meta charset="UTF-8">
<style type = "text/css">
header {
border-bottom: 5px double black;
}
nav {
float: left;
width: 20%;
clear: left;
min-height: 400px;
border-right: 1px solid black;
}
section {
float: left;
width: 75%;
padding-left: 1em;
}
article {
float: left;
width: 75%;
padding-left: 1em;
}
footer {
clear: both;
border-top: 5px double black;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>This is my header</h1>
</header>
<nav>
<h2 id="tab1" >Navigation</h2>
<ul>
<li><a href="#">link a</a></li>
<li><a href="#">link b</a></li>
<li><a href="#">link c</a></li>
<li><a href="#">link d</a></li>
<li><a href="#">link e</a></li>
</ul>
</nav>
<section id = "1">
<h2 id="tab2" >Section 1</h2>
<p>Section body.
HTML5
Text-decoration can be used to add a couple other interesting formats to your HTML5 and CSS3 web page text, including underline, strikethrough, overline, and blink. For example, the following code produces an underlined paragraph:
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<title>underline.
A great resource — HTML Tidy — can be used to fix your pages. You can download Tidy or just use the online version. Here is the online version with oxWheels1.html being loaded.
Unlike W3C's validator, Tidy actually attempts to fix your page. This is how Tidy suggests the oxWheels1.html page be fixed.
Tidy examines the page for a number of common errors and does its best to fix the errors.
HTML5
If you want to make your own data based CMS to manage HTML5 and CSS3 content, you need to move from storing data in files to storing in a relational database. Each page in a content management system is often the same structure, and only the data is different. What happens if you move away from text files altogether and store all the content in a database?
HTML5
Digital cameras and scanners are amazing these days. You can use them to add images to your HTML5 and CSS3 web pages. Even moderately priced cameras can now approach the resolution of old-school analog cameras. Scanners are also capable of taking traditional images and converting them into digital formats that computers use.
HTML5
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!
HTML5
As an HTML5 and CSS3 programmer, you can use inner joins to combine SQL tables. When you normalize the databases, it often makes sense to break it up into several tables. Take a quick look at the hero table.
You probably noticed that most of the mission information is now gone from this table, except one important field.
HTML5
The jQuery object in AJAX is interesting because it is easy to create from a variety of DOM elements for HTML5 and CSS3 programming, and because it adds wonderful, new features to these elements.
How to change the style of an element
If you can dynamically change the CSS of an element, you can do quite a lot to it.
HTML5
Some of the most powerful jQuery tools are actually the easiest to use in HTML5 and CSS3 programming. The accordion widget has become an extremely popular part of the jQuery UI toolset.
Here, you see book headings. The details for the first one are available, but the other books’ details are hidden.
This marvelous effect allows the user to focus on a particular part of a larger context while seeing the overall outline.
HTML5
An animation in JavaScript generally requires a special organization called an animation loop. The basic structure of the animation loop in HTML5 and CSS3 programming works the same in any language:
Initialization.
Create the assets, including the background and any of the objects you will be using. Objects that will be manipulated in real time are normally called sprites.
HTML5
There should be some way to make the form work right, regardless of the container's width. CSSS3 provides exactly such a mechanism that is easy to work with when designing your HTML5 pages.
The clear attribute is used on elements with a float attribute. The clear attribute can be set to left, right, or both. Setting the clear attribute to left means you want nothing to the left of this element.
HTML5
Some people have great color sense when designing their HTML5 and CSS3 web pages. Others struggle a little bit because it all seems a little subjective. If you get perplexed in a paint store, you might find it helpful to know that some really useful tools are available.
One great way to get started is with a free tool: the Color Scheme Designer.
HTML5
CSS3 supplies a couple techniques for layout. The preferred technique for most applications is a floating layout. The basic idea of this technique is to leave the HTML layout as simple as possible, but to provide style hints that tell the various elements how to interact with each other on the screen.
In a floating layout, you don't legislate exactly where everything will go.
HTML5
A long time ago, browsers couldn't even agree on what colors they'd display reliably. HTML5 and CSS3 web developers responded by working within a predefined palette of colors that worked pretty much the same on every browser. Today's browsers have no problems showing lots of colors, but the so-called web-safe color palette is still sometimes used because it's an easy starting point.
HTML5
Although you can use phpMyAdmin to build SQL databases, all it really does is write and execute SQL code for you for HTML5 and CSS3 programming. As a programmer, you should know how to write SQL code.
SQL syntax rules
The rules and traditions of SQL are a bit unique because this language has a different purpose than more traditional programming languages:
Keywords are in uppercase.
HTML5
Here, you will find details about the functions needed to access and write to a file in PHP, such as how to request access to a file from PHP with the fopen() function, write to the file using the fwrite() function, and let PHP know you are done with the file with the fclose() function.
fopen()
To do any file manipulations, you must tell PHP about the file you would like to manipulate and tell PHP how you would like to manipulate that file.
HTML5
Often, you'll want to do something in PHP as simple as record information from a form into a text file for HTML5 and CSS3 programming. Here is a simple program that responds to a form and passes the input to a text form.
The code for this form is basic HTML.
When the user enters contact data into this form, it will be passed to a program that reads the data, prints out a response, and stores the information in a text file.
HTML5
The advantage of using a data-based approach for your HTML5 and CSS3 site is scalability. If you decide to make a change in the template, you have to change hundreds of pages. If you use data, you can write one PHP program that can produce any page in the system. All this page needs is a page-number parameter.
HTML5
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.
Borders have been a part of CSS from the beginning, but CSS3 adds some really exciting new options. Modern browsers now support borders made from an image as well as rounded corners and box shadows. These techniques promise to add exciting new capabilities to your designs.
Image borders
CSS3 allows you to use an image for an element border.
HTML5 and CSS3 add a few more tricks to simplify validation, and they are absolutely wonderful. While you can always use JavaScript and regular expressions to validate your pages, HTML5 promises a much easier solution. When you use the special-purpose input elements, the browser will automatically check the form field to ensure it is in a proper format.
The CSS language is flexible, powerful, and consistent. However, it's not perfect. Two ideas are floating around in the CSS/web development community that you might find interesting.
The first concept is called the CSS reset styles. This is a special CSS document that explicitly sets layout specifications for each element, overriding browser defaults.
MySQL is the most popular database manager for PHP, but there are other alternatives. There are other database packages that work much like MySQL, but in a different way. There are also some new ideas floating around in the web data world that may very well gain traction.
A number of alternatives to MySQL have gained prominence recently.
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.
HTML5
Many web development books are really books about how to use a particular type of software with HTML. Microsoft's Expression Web and Adobe Dreamweaver are the two primary applications in this category. These tools are powerful and offer some seemingly great features:
WYSIWYG editing: What you see is what you get is an idea borrowed from word processors.
HTML5
Because a text editor is such an important tool when programming for HTML5 and CSS3, it might depend a bit on your preferences, but here are a few good ones. Note that every editor here is entirely free.
A noteworthy editor: Notepad++
A number of developers have come up with good text editors. Some of the best are free, such as Notepad++ by Don Ho.
HTML5
A text editor may be a simple program, but that doesn't mean they're all the same for coding HTML5 and CSS3. Some programs have a history of causing problems for beginners (and experienced developers, too). There's usually no need to use some of these weaker choices.
Microsoft Word
Just don't use it for web development.
JavaScript is a very powerful programming language and it can be extended in some very powerful ways. Besides the well-known jQuery library, there are many other intriguing libraries that extend the power of JavaScript. Here are a few:
Modernizr: The Modernizr web library is a fascinating library that tests the features of your browser and allows you to use HTML5 and CSS3 on older browsers.
HTML is a terrific tool for writing documents, but every once in a while, you come across a character that can't easily be printed in HTML. For example, what if you're writing about math and you want to use the less than ( symbol? HTML normally interprets the less than symbol as the beginning of an HTML tag.
Likewise, you might find yourself wanting to use the yen sign, adding an inverted exclamation point for text written in Spanish, or some other unique character.
As web development becomes standardized, the Model-View-Controller (MVC) architecture has become more popular. The basic idea of this mechanism is to separate the data elements (the model), the user interface (the view), and the code that connects the model and the view (the controller).
Many programming instructors emphasize separating content, layout, and data.
HTML5
It’s always a good idea to think ahead before jumping into programming a large HTML5 and CSS3 site. Here are some questions you need to ask yourself when designing a larger website:
What's the point of the site? The site doesn't have to be serious, but it does have to have a theme. If you don't know what your site is about, neither do your users (and they'll leave in a hurry).
HTML5
Understanding your audience is one of the trickiest parts of HTML5 and CSS3 web planning. You need to anticipate the audience in a number of ways in order for your site to be functional.
Determine whom you want to reach
Before you make a lot of design decisions, you need to think carefully about the type of person you're trying to reach with the website.
While it's always dangerous to predict the future, particularly in an environment as fluid, dynamic, and evolutionary as web development, here are seven trends worth watching:
Convergence of design and development: Although there are still specialist front-end web developers, web designers, and back-end devs, all of these specific elements of web development are converging.
HTML5
The browser is the primary tool of the web. So for HTML5 and CSS3 programming, you should have a working knowledge because all your users view your page with one browser or another.
Microsoft Internet Explorer 10
Microsoft Internet Explorer (IE) remains a dominant player on the Internet. Explorer is still extremely prevalent because it comes installed with Microsoft Windows.
Load More Articles
Related Books
0:00
0:00
https://cdn.prod.website-files.com/6630d85d73068bc09c7c436c/69195ee32d5c606051d9f433_4.%20All%20For%20You.mp3
Frequently Asked Questions
No items found.
