Beginning HTML5 and CSS3 For Dummies
Overview
Your full-color, friendly guide to getting started with HTML5 and CSS3!
HTML and CSS are essential tools for creating dynamic websites and help make your websites even more effective and unique. This friendly-but-straightforward guide gets you started with the basics of the latest versions of HTML and CSS: HTML5 and CSS3. Introducing you to the syntax and structure of the languages, this helpful guide shows you how to create and view a web page, explains ideal usage of HTML5 and CSS3, walks you through the CSS3 rules and style sheets, addresses common mistakes and explains how to fix them, and explores interesting
HTML5 tools.
- Serves as an ideal introduction to HTML5 and CSS3 for beginners with little to no web development experience
- Details the capabilities of HTML5 and CSS3 and how to use both to create responsive, practical, and well-designed websites
- Helps you understand how HTML5 and CSS3 are the foundation upon which hundreds of millions of web pages are built
- Features full-color illustrations to enhance your learning process
Beginning HTML5 and CSS3 For Dummies is the perfect first step for getting started with the fundamentals of web development and design.
Read More
About The Author
Ed Tittel is a 30-year veteran of the technology industry with more than 140 computing books to his credit, including the bestselling HTML For Dummies.
Chris Minnick runs Minnick Web Services. He teaches, speaks, and consults on web-related topics and has contributed to numerous books, including WebKit For Dummies.
Sample Chapters
beginning html5 and css3 for dummies
CHEAT SHEET
Hypertext Markup Language (HTML) and the Cascading Style Sheet (CSS) language are the lifeblood of web pages. Even experienced web designers and authors need help sometimes. This Cheat Sheet provides a quick color code guide, a table of HTML5 elements, and a table of CSS properties.Named colors and hex values in HTMLThe following table contains a list of named colors you can use in HTML and CSS code to create a more colorful website.
View Cheat Sheet
View Cheat Sheet
HAVE THIS BOOK?
View Book Companion Site
Access practice tests
Additional Book Resources
Articles from
the book
All web developers have essential sites they refer to over and over. Some resources are so good and so important that they make pretty much everyone's list, no matter what your skill level or how many years (or days?) of experience you may have. The following sites are some of the best of the best resources for any budding or experienced HTML5 developer.
HTML5
The CSS specifications, created by the World Wide Web Consortium (W3C), define the syntax and possible values of all CSS properties. To make definitions as precise as possible, the W3C uses a formal system called CSS value definition syntax.
Although the definition syntax defines possible values very precisely, reading the syntax that CSS value definitions are written in can be difficult without a key.
HTML document structure is hierarchical, so an entire document includes a head section. Thus, immediately following the opening element is where you define the head section, starting with an opening element and ending with a closing element.
Meeting the himself
The head is one of two main components in any HTML document; the body is the other main component.
Creating HTML documents differs from creating word processor documents using an application such as Microsoft Word. The difference comes from having to use two applications with HTML document creation:
Your text or HTML editor, where you create the web pages
Your web browser, where you view the results
Even though many HTML editors, such as Dreamweaver and HTML-Kit, provide a browser preview, it’s still important to preview your web pages inside actual web browsers (such as Internet Explorer, Chrome, Firefox, and Safari) so you can see them as your end users do.
Hypertext Markup Language (HTML) and the Cascading Style Sheet (CSS) language are the lifeblood of web pages. Even experienced web designers and authors need help sometimes. This Cheat Sheet provides a quick color code guide, a table of HTML5 elements, and a table of CSS properties.Named colors and hex values in HTMLThe following table contains a list of named colors you can use in HTML and CSS code to create a more colorful website.
Elements are the building blocks for HTML. You use them to describe each piece of text on your web page. Elements are made up of tags and the content within (or between) those tags. In HTML, there are two main kinds of elements:
Elements with content made up of a tag pair and whatever text sits between the opening and closing tags in the pair
Elements that insert something into the page, using a single tag
Tag pairs in HTML
Elements that describe content use a tag pair to mark the beginning and end, with everything in between representing the element content.
The following table shows CSS properties that are supported by most browsers today, along with their allowed values. Some of these properties are part of CSS3 specifications and are still experimental, so be sure to check with the Can I Use site for the latest information on browser support. (For help reading the Values column of this chart, see the article “A Quick Guide to the CSS Value Definition Syntax” at www.
HTML5
Encodings for the ISO Latin-1 character set are supplied by default in all modern web browsers. (Search for “ISO Latin-1 character set” to find a complete table of values.) Thus, the character entities in that set may be used directly in HTML markup without going through any special contortions.
However, using other encodings requires inclusion of special markup to tell the browser to interpret Unicode character codes.
Any HTML document can include style information written using CSS markup. Nevertheless, most web developers isolate CSS markup in separate style sheet documents and use links to those independent external style sheets in their web pages (HTML documents).
This technique helps keep content separate from presentation, encourages reuse of style sheets, and makes it easy to update presentation for multiple pages by editing the style sheets they reference rather than having to incorporate changes into a whole raft of web pages.
HTML’s primary job is to label and accommodate content on web pages. But HTML comes in various versions, each of which handles content, but each of which is slightly different from the other. The basic rules and components stay more or less the same, but some important details differ.
HTML stands for HyperText Markup Language, markup developed in the late 1980s and early 1990s to describe web pages.
Take a look at this code listing. Careful examination of this short listing shows quite a bit of HTML, but only indirect references to CSS. It’s the listing for the HTML5 Café Home Page.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 Cafe: Home</title>
<meta name="description" content="sample site for 9781118657201">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/normalize.
Hyperlinks, or simply links, connect HTML pages and other resources on the web. You can link your website, or pages on your website, to a variety of online resources:
Other HTML pages (either on your website or on another website)
Different locations on the same HTML page
Resources that aren’t even HTML pages at all, such as e-mail addresses, pictures, and text files or downloads for visitors
Link locations, captions, and destinations exert a huge influence on how site visitors perceive links.
HTML documents include text, images, multimedia files, links, and other bits of content that you mold into a web page by using markup elements and attributes. You use blocks of text to create such things as headings, paragraphs, and lists. The first step in creating a solid HTML document is laying a firm foundation to establish the document’s structure.
The framework for a simple HTML document consists of a head and body. The head provides information about the document to the browser (and sometimes also to the web server), and the body contains content that appears in the browser window. The first step in creating any HTML document is to define its framework.
Every web resource — site, page, or image — has a unique URL. Even one incorrect letter in a URL creates a broken link, which leads to an error page (usually the HTTP error 404 File or directory not found).
URLs are so finicky that a simple typo — sometimes even a mistake in capitalization — breaks a link. Be sure to proofread your work and heed the following tips, which help you steer clear of avoidable missteps.
Web pages often use images for navigation. They’re prettier than plain-text links, and you can add both form and function on your page with one element. When you use an element with an anchor element to create a linking image, you can attach only one link to that image. To create a larger image that connects links to different regions on the page, you need an image map.
Blocks of text build the foundation of your web page. You use blocks of text to create such things as headings, paragraphs, and lists. You can break those blocks into smaller pieces to better guide readers through your content.
Block quotes
A block quote is a quotation, or an excerpt from a copyrighted source, that you set apart on a page.
A bulleted list contains one or more items each prefaced by a bullet (often a big dot). Use this kind of list on your web page if the items’ order isn’t necessary for understanding the information it presents.
A bulleted list requires the following:
The unordered list element () specifies a bulleted list.
A list item element () marks each item in the list.
Lists are powerful tools for grouping similar elements, and lists give visitors to your site an easy way to zoom in on groups of information. Just about anything fits in a list, from sets of instructions to collections of links. Definition lists group terms and definitions into a single list and require three elements to complete the list:
: Holds the list definitions (dl = definition list)
: Defines a term in the list (dt = definition term)
: Defines a definition for a term (dd = definition list definition)
You can have as many terms (defined by ) in a list () as you need.
Drop-down lists in forms on your website are a great way to give users lots of options in a small amount of screen space. You use two HTML tags to create a drop-down list:
creates the list.
Use a name attribute with the element to name your list.
A collection of elements identifies individual list options.
An HTML web form can receive documents and other files, such as images, from users. When a user submits the form, the browser grabs a copy of the file and sends it with the other form data. To create a file upload field, this is what you do:
Use the element with the type attribute set to file.
The file itself is the form field value.
Headings break a document into sections. Most books use headings and subheadings to divide each chapter into sections, for example, and you can do the same with your web page. Headings
Create an organizational structure.
Break up the text flow on the page.
Provide visual cues as to how pieces of content are grouped.
Hyperlinks, or simply links, connect HTML pages and other resources on the web. When you include a link on your page, you enable visitors to travel from your page to another website, another page on your site, or even another location on the same page.
Without links, a page stands alone, disconnected from the rest of the web.
Just about anything fits in a list, from sets of instructions to collections of links. You can create subcategories by nesting lists within lists. Some common uses for nested lists include the following:
Site maps and other navigation tools
Tables of content for online books and papers
Outlines
You can combine any of the three kinds of lists to create nested lists, such as a multilevel table of contents or an outline that mixes numbered headings with bulleted list items as the lowest outline level.
Lists are powerful tools to group similar elements, and lists give visitors to your site an easy way to zoom in on groups of information. Just about anything fits in a list, from sets of instructions to collections of links. A numbered list consists of at least two items, each prefaced by a number. Use a numbered list when the order or priority of items is important.
Paragraphs appear more often than any other text block in web pages. Remember, though, that HTML browsers don’t recognize hard returns that you enter when you create your page inside an editor. You must use a tag to tell the browser to package all text up to the next closing tag as a paragraph.
To create a paragraph, follow these steps:
Add in the body of the document.
Submit and Reset buttons help the user tell the browser what to do with a form on your website. You can use HTML to create buttons to either submit or reset your form, using the element with the following type and value attributes:
Submit: Visitors have to tell a browser when they’re done with a form and want to send the contents.
The primary markup container for tables in HTML is the table element. That is, you use the opening tag to denote the start of a table, and you add the closing tag to end it.
Also, the basic building blocks for table data in HTML are the table row () and table data () elements, when a table consists of as many rows as there are elements (plus any header or footer rows) and as many columns as the maximum number of elements in any given table row.
HTML forms can present information to users, using text and images. Every form has the same basic structure. Which input elements you use depends upon the data you’re presenting and collecting.
The element is a content and input container: It works much like the paragraph () element, which contains paragraph text, or like the division () element, which contains various types of sub-elements in a logical document section.
You can create and save graphics in many ways, but only a few formats are actually appropriate for images you intend to use on the web. As you create web-friendly images, you must pay attention to file formats and sizes.
Often, graphics file formats are specific to operating systems or software applications. Because you can’t predict what a visitor’s computer and software will be (other than he or she will use some sort of web browser), you need images that anyone can view with any browser.
Designing useful forms in HTML is a different undertaking from designing easy-to-use forms. Your form may gather the data that you need, but if your form is difficult for visitors to use, they may abandon it before they’re done.
As you use the markup elements and other elements that drive page layout, keep the following guidelines in mind:
Provide textual clues for all your forms.
HTML5
One of the exciting new parts of HTML5 is the canvas element. Using canvas, you can draw bitmap graphics inside the browser window. What's even more impressive and useful is that you can write a program that will draw graphics on the fly inside the browser window.
How does canvas work?
The canvas element creates a container, or canvas, upon which you can draw graphics.
Links can connect to virtually any kind of file, such as word processing documents, spreadsheets, PDFs, compressed files, and multimedia. Two typical uses for non-HTML links are software and PDF download pages.
File downloads
Non-web files must nevertheless be accessed via the Internet, so they possess unique URLs, just like HTML pages.
Links can help users navigate a single web page. Locations within web pages can be marked for direct access by links on the same page. Intradocument hyperlinks include such familiar features as
Back to Top links.
Tables of contents.
An intradocument hyperlink, also known as a named document link, uses a URL like this:
<a href="#top">Back to top</a>
The pound sign (#) indicates that you’re pointing to a spot on the same page, not on another page.
HTML5
The web works because you can link pages on your website to pages on other people’s websites by using a simple anchor element. When you link to someone else’s site, though, you send users away from your own site.
To keep users on your site, HTML can open the linked page in a new window or in a new tab inside the same browser window.
Beyond their mandatory division into head and body sections, text in the body of an HTML document may be organized in any number of ways.
Credit: ©iStockphoto.com/Chimpinski
Document heads
Inside the section, you may (and probably should) define all kinds of labels and information, including a title. Such definitions help you describe the document that follows, including the character sets it uses, metadata for search engines and page descriptions, and instructions to the web server that delivers your page, default style sheets, page refresh behavior, and lots more.
You can use metadata in your header to send messages to web browsers about how they should display (or otherwise handle) your web pages. Web builders commonly use the element this way to redirect page visitors from one page to another automatically.
For example, if you’ve ever come across a page that reads This page has moved.
For this table-construction exercise, you’re going to draw some data from the hard-working economists and statisticians at the U.S. Bureau of Labor Statistics. On the website, scroll down to Table B-9: Indexes of Aggregate Weekly Hours and Payroll, shown in this figure. (The figure no-doubt shows teeny-tiny type, but it should nonetheless give you some idea of what you’re looking for.
HTML5
When creating a data collection form for your website, if only a finite set of possible values is available to the user, you can give him a collection of options to choose from:
Check boxes: Choose more than one option.
Radio buttons: Choose only one option.
Radio buttons differ from check boxes in an important way: Users can select a single radio button from a set of options but can select any number of check boxes (including none, one, or more than one).
The tags you use to solicit input from your site visitors make up the bulk of any form. HTML supports a variety of input options, from text fields to radio buttons and from files to images.
Every input control associates some value with a name:
When you create the control, you give it a name.
The control sends back a value based on what the user does in the form.
HTML5
A password field is a special text field on a web form that doesn’t display what the user types. Each keystroke is represented on the screen by a placeholder character, such as an asterisk or a bullet, so that someone looking over the user’s shoulder can’t see what they type.
You create a password field by using the element with the type attribute set to password, as follows:
<form action="bin/guestbook.
You can use a variety of input field types in your forms, such as text, password, radio (button), checkbox, hidden, search, tel (telephone number), url, email (address), datetime, date, month, week, time, datetime-local, number, range (sets a range of numeric values), color, and more.
Not all fields require values for name and type attributes (for example, text box or password fields), but it’s a good idea to provide users with explanatory labels and examples of input data any time they might have questions about formats — such as when pondering whether to include dashes or spaces in credit card numbers.
HTML meta elements provide information about an HTML document. A web page may have many meta elements, or very few (and sometimes none at all). When present, they must always appear in the document head. This article explains some of the uses of the meta element.
meta format and attributes
Here's a sample meta element:
<meta name="description" content="This is a document about the meta element.
Appearing in alphabetical order is a list of all the HTML5 elements contained in the current HTML5 specification. A brief description is included as a quick reference when looking for the perfect element.
Element Description
A
Use to create hyperlinks
Abbr
Use for abbreviations
address
Contact information
Area
Hyperlink in an image-map
article*
Provides section formatting for short expository items like articles, blogs, etc.
In HTML, tables make it easy to lay out data, text, and even images in a grid. Tables help make it easy to present numerical data (which naturally appears in tabular form in spreadsheets and other similar applications).
But tables also make it easy and convenient to present all kinds of information that naturally falls into rows and columns, and to help maximize space when introducing lots of terms or other items that would waste too much white space if run up against the left or right margins on a page.
Simply stated, there are two primary media elements for HTML5, both of which are absurdly easy to use. The audio element is named , and the video element is named . In HTML5, the browser determines which players are built-in and thus available for use. You need to plan your use of audio and video accordingly.
Here’s a simplified version of what audio markup looks like:
<audio src="sounds.
Two big categories of strategies have been employed over the years to support web design for mobile devices: graceful degradation and progressive enhancement. Much of the web is currently nearly unusable on mobile devices because it was designed for desktop browsers and doesn't adapt well to small screens.
Mobile web users are often forced to zoom, scroll, pinch, squint, and make their fingers as small as possible to use the majority of websites designed more than a couple years ago.
The following table contains a list of named colors you can use in HTML and CSS code to create a more colorful website. The colors are shown with their corresponding RGB hexcode values along with a representative color swatch.
Name
Hexcode
Aqua
#00FFFF
Black
#000000
Blue
#0000FF
Fuchsia
#FF00FF
HTML is called a markup language for a very good reason: It grabs ordinary, normal text and inserts various strings into that text to define, organize, and manage the flow and sequence of content on web pages.
The inserted strings define the markup, which web browsers — or other special programs known as user agents — pore over and use (along with CSS, of course) to guide their display of the content included.
Cascading Style Sheets (CSS) manage web page presentation and govern how pages look and behave when on display to users (or being printed to paper or listened to in a text-to-speech converter).
CSS is another markup language that mixes special symbols and keywords to define rules for handling specific HTML elements (and even specific instances of HTML elements when “special handling” is needed).
HTML5
HTML form markup elements give you a healthy collection of tags and attributes for creating forms to collect information from visitors to your site. The web contains millions of forms, and every form is driven by the same set of markup tags. Web forms can be short or long, simple or complex, with myriad uses. But forms all fall into one of two broad categories:
Search forms that let users search a site or the entire web
Data collection forms that provide information for online shopping, technical support, site preferences, personalization, and more
Before you create any form, you must determine what kind of data your visitors will search for on your site and/or what kind of data you need to collect from visitors.
When an image is ready for the web, you need to use the correct HTML5 markup to add it to your page, but you also need to know where to store your image.
You can store images for your website in several places. Image storage works best if it uses relative URLs stored somewhere on the website with your other HTML files.
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.
