22,80 €
Mehr erfahren.
- Herausgeber: John Wiley & Sons
- Kategorie: Wissenschaft und neue Technologien
- Serie: Simplified
- Sprache: Englisch
The easiest way to learn how to create a Web page for yourfamily or organizationDo you want to share photos and family lore with relatives faraway? Have you been put in charge of communication for yourneighborhood group or nonprofit organization? A Web page is the wayto get the word out, and Creating Web Pages Simplified offers aneasy, visual way to learn how to build one. Full-colorillustrations and concise instructions take you through all phasesof Web publishing, from laying out and formatting text toenlivening pages with graphics and animation.This easy-to-follow visual guide shows you the building blocksof a Web page and how to work with images, create links and forms,generate dynamic content using JavaScript, use style sheets, andpublish a page on the Web. You'll learn to use HTML, create simpleyet attractive Web pages, and enhance them with frames, multimediaeffects, links, and more.* Features full-color illustrations with step-by-stepinstructions* Covers everything you need to get started, including how to useHTML, how to lay out pages and format text, and how to add graphicsand visual effects* Shows how to make your pages more interesting with animationand sound, add links to other sites, include e-mail addresses, andmore* Includes a tear card with HTML tag references and a web-safecolor chart to keep handy as you build your pagesIf you've ever thought about building a web page, CreatingWeb Pages Simplified is simply the easiest way to make ithappen.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 283
Veröffentlichungsjahr: 2011
Ähnliche
Creating Web Pages, Simplified®
Table of Contents
Creating Web Pages
Second Edition
by Mike Wooldridge, Brianna Stuart
Creating Web PagesSimplified®Second Edition
Published byJohn Wiley & Sons, Inc.10475 Crosspoint BoulevardIndianapolis, IN 46256
www.wiley.com
Published simultaneously in Canada
Copyright© 2011 by John Wiley & Sons, Inc., Indianapolis, Indiana
No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization through payment of the appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600. Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, 201-748-6011, fax 201-748-6008, or online at www.wiley.com/go/permissions.
Wiley also publishes its books in a variety of electronic formats and by print-on-demand. Some content that appears in standard print versions of this book may not be available in other formats. For more information about Wiley products, visit us at www.wiley.com.
Library of Congress Control Number: 2011936912
ISBN: 978-1-118-06351-4
Manufactured in the United States of America
10 9 8 7 6 5 4 3 2 1
Trademark Acknowledgments
Wiley, the Wiley Publishing logo, Visual, the Visual logo, Simplified, Read Less - Learn More and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates. All other trademarks are the property of their respective owners. Wiley Publishing, Inc. is not associated with any product or vendor mentioned in this book.
LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY: THE PUBLISHER AND THE AUTHOR MAKE NO REPRESENTATIONS OR WARRANTIES WITH RESPECT TO THE ACCURACY OR COMPLETENESS OF THE CONTENTS OF THIS WORK AND SPECIFICALLY DISCLAIM ALL WARRANTIES, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE. NO WARRANTY MAY BE CREATED OR EXTENDED BY SALES OR PROMOTIONAL MATERIALS. THE ADVICE AND STRATEGIES CONTAINED HEREIN MAY NOT BE SUITABLE FOR EVERY SITUATION. THIS WORK IS SOLD WITH THE UNDERSTANDING THAT THE PUBLISHER IS NOT ENGAGED IN RENDERING LEGAL, ACCOUNTING, OR OTHER PROFESSIONAL SERVICES. IF PROFESSIONAL ASSISTANCE IS REQUIRED, THE SERVICES OF A COMPETENT PROFESSIONAL PERSON SHOULD BE SOUGHT. NEITHER THE PUBLISHER NOR THE AUTHOR SHALL BE LIABLE FOR DAMAGES ARISING HEREFROM. THE FACT THAT AN ORGANIZATION OR WEBSITE IS REFERRED TO IN THIS WORK AS A CITATION AND/OR A POTENTIAL SOURCE OF FURTHER INFORMATION DOES NOT MEAN THAT THE AUTHOR OR THE PUBLISHER ENDORSES THE INFORMATION THE ORGANIZATION OR WEBSITE MAY PROVIDE OR RECOMMENDATIONS IT MAY MAKE. FURTHER, READERS SHOULD BE AWARE THAT INTERNET WEBSITES LISTED IN THIS WORK MAY HAVE CHANGED OR DISAPPEARED BETWEEN WHEN THIS WORK WAS WRITTEN AND WHEN IT IS READ.
FOR PURPOSES OF ILLUSTRATING THE CONCEPTS AND TECHNIQUES DESCRIBED IN THIS BOOK, THE AUTHOR HAS CREATED VARIOUS NAMES, COMPANY NAMES, MAILING, E-MAIL AND INTERNET ADDRESSES, PHONE AND FAX NUMBERS AND SIMILAR INFORMATION, ALL OF WHICH ARE FICTITIOUS. ANY RESEMBLANCE OF THESE FICTITIOUS NAMES, ADDRESSES, PHONE AND FAX NUMBERS AND SIMILAR INFORMATION TO ANY ACTUAL PERSON, COMPANY AND/OR ORGANIZATION IS UNINTENTIONAL AND PURELY COINCIDENTAL.
Contact Us
For general information on our other products and services please contact our Customer Care Department within the U.S. at 877-762-2974, outside the U.S. at 317-572-3993 or fax 317-572-4002.
For technical support please visit www.wiley.com/techsupport.
Sales
Contact Wiley at (877) 762-2974 or fax (317) 572-4002.
Credits
Acquisitions Editor
Aaron Black
Project Editor
Terri Edwards
Technical Editor
Namir Shammas
Copy Editor
Scott Tullis
Editorial Director
Robyn Siesky
Business Manager
Amy Knies
Senior Marketing Manager
Sandy Smith
Vice President and Executive Group Publisher
Richard Swadley
Vice President and Executive Publisher
Barry Pruett
Project Coordinator
Katherine Crocker
Graphics and Production Specialists
Joyce HaugheyHeather Pope
Quality Control Technician
Dwight Ramsey
Proofreading
Jacqui Brownstein
Indexing
Potomac Indexing, LLC
Screen Artists
Ana CarrilloNoah Hart
About the Authors
Mike Wooldridge is a web developer based in the San Francisco Bay Area. He’s authored dozens of books for the Visual series. For more information about creating web pages and the example files used in this book, visit his website: www.wooldridge.net/html5
Brianna Stuart is a writer and busy mom based in the Seattle area. This is her first book.
Authors’ Acknowledgments
Mike and Brianna thank Terri Edwards and everyone else at Wiley for their help on this book. Mike dedicates the book to his wonderful wife.
Brianna thanks Mike for bringing her onto this project, Ed Stuart for his support, and her mom for giving her a love of all types of books. Brianna dedicates this book to her one-year-old twins, Beckett and Owain, who assisted on this project by providing well-timed raspberries, growls, and general cuteness.
How to Use This Book
Who This Book Is For
This book is for the reader who has never used this particular technology or software application. It is also for readers who want to expand their knowledge.
The Conventions in This Book
Steps
This book uses a step-by-step format to guide you easily through each task. Numbered steps are actions you must do; bulleted steps clarify a point, step, or optional feature; and indented steps give you the result.
Notes
Notes give additional information — special conditions that may occur during an operation, a situation that you want to avoid, or a cross reference to a related area of the book.
Icons and Buttons
Icons and buttons show you exactly what you need to click to perform a step.
Simplify It
Simplify It sections offer additional information, including warnings and shortcuts.
Bold
Bold type shows command names, options, and text or numbers you must type.
Italics
Italic type introduces and defines a new term.
Chapter 1: Getting Started with HTML5 and Web Pages
Are you interested in building your own web pages? This chapter introduces you to HTML5, the newest version of the language used to create web pages. It also explains the basics behind HTML editors and web browsers, which you use to design and view your web content.
With a web browser, you can view HTML code for any page on the web and save the HTML to your computer. This can serve as a starting point for creating your pages.
Internet Basics
Introducing HTML5
Explore Web Browsers
Explore HTML Editors
Understanding HTML5 Syntax
New Features in HTML5
View HTML5 Code in a Browser
Internet Basics
The Internet is a worldwide collection of interconnected computer networks that enables businesses, organizations, governments, and individuals to communicate in a variety of ways. One of the most popular ways users communicate on the Internet is by publishing and interacting with web pages. You can create web pages from scratch using HTML. You can also use the Internet to send and receive e-mail, chat with other users, and transfer files between computers.
The Internet began as a military research project in the late 1960s. In 2010, the number of Internet users around the globe topped 2 billion.
Types of Connections
Users connect to the Internet through a variety of methods. A relatively inexpensive but slow way to connect is with dial-up service, which involves using a modem and a phone line. Faster ways to connect include DSL (Digital Subscriber Line), cable modem, satellite, and fiber-optic access. Networks include special wireless transmitters that allow computers, mobile phones, and other devices to access the Internet wirelessly. Connection speeds can play an important part in a user’s Internet experience because slower connections result in slower file transfers and web page viewing. Companies that help you connect to the Internet are known as Internet service providers, or ISPs.
Internet Devices
People have traditionally connected to the Internet through desktop computers. In recent years, more and more users access it through wireless devices such as laptops, mobile phones, and, most recently, tablets such as the iPad. Screen sizes on these devices can vary widely, which can make designing web pages that look good and work well on all screens a challenge. A graphically rich website that looks beautiful on a large desktop monitor might be difficult to use on a mobile phone. Writing correct HTML can help make your online content accessible to everyone no matter what device they view it with.
Communication Standards
The Internet infrastructure relies on a variety of standards that dictate how computers and networks talk to each other. For example, Transmission Control Protocol/Internet Protocol, or TCP/IP, is a set of rules that control how Internet messages flow between computers. Hypertext Transfer Protocol, or HTTP, is a set of rules that determine how browsers should request web pages and how server computers should deliver them. Having agreed-upon protocols allows seamless communication among the many different types of computers that connect to the Internet.
The World Wide Web
The World Wide Web is a giant collection of documents, or pages, stored on computers around the globe. Commonly called the web, this collection of pages represents a wealth of text, images, audio, and video available to anyone with a computer and an Internet connection. Web pages are stored on servers, which are Internet-connected computers running software that allows them to serve up information to other computers. When you place a text file, image, or other document in a special web directory on a server, that information is available for other web users to view. Chapter 15 talks about how to transfer information to a web server.
URLs and Links
Every page on the web has a unique address called a URL, which is short for Uniform Resource Locator. A URL looks like this:
http://www.example.com/index.html
If you know a page’s URL, you can type it into a web browser to view that page over the Internet. You can also view pages by way of hyperlinks, or links, which are clickable words or images on web pages. Every link on a web page is associated with a URL that connects it to another page, media file, or other resource on the Internet. Users can jump from one web page to another by clicking links. Chapter 7 discusses how to create links with HTML5.
Browsers
A web browser is software that enables you to view and interact with web pages. When you type a URL or click a link in a web browser, the browser retrieves the appropriate page from a server on the Internet and displays that page. Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, and Apple Safari are the four most popular browsers in use today. Each program has evolved through a number of versions, with newer versions supporting more recent web features. As you build your pages using HTML code, remember that different browsers may display your pages slightly differently depending on the version.
Introducing HTML5
You can build web pages using HTML, which is short for Hypertext Markup Language, and HTML5 is the latest version of the language. HTML5 documents are made up of text content and special codes known as tags that tell web browsers how to display the content. HTML5 documents are identified by their .html or .htm file extensions. You can edit the code in an HTML5 document by opening the document in a text editor.
For the most part, HTML5 is platform independent, which means you can view web pages on any computer operating system, including Windows, Mac, and Linux.
HTML Tags
HTML consists of text interspersed with special instructions known as tags. Surrounded by brackets, < >, HTML tags tell a browser how to organize and present text, images, and other web page content. Many tags are written using an opening tag and a closing tag that surround content that appears on the page. When writing HTML tags, you can use upper- or lowercase letters. To make the coding easier to read and understand, you can add extra white space, which web browsers ignore. For details, see the section Understanding HTML5 Syntax.
Rendering HTML
When a browser displays a web page, it retrieves the HTML file for that page from a server, parses the HTML tags to determine how the content should be formatted, and renders the page. The HTML tags tell the browser what images, video, audio, and other content need to be downloaded and integrated into the page. The HTML may also tell the browser to download style sheets and interactive scripts to further enhance the page. To view the HTML underlying a web page, see the section View HTML5 Code in a Browser.
HTML Standards
The World Wide Web Consortium, or W3C, is the primary group guiding the evolution of the HTML language. The W3C is made up of hundreds of companies and organizations including web industry leaders such as Microsoft, Apple, and Google. The standards developed by the W3C give developers of web servers and browsers a set of common guidelines with which to develop their products. You can visit the W3C’s website at www.w3.org. The HTML5 standard was originally developed by a separate organization called the Web Hypertext Application Technology Working Group (WHATWG). In 2007, the W3C adopted WHATWG’s version as the starting point for its version of HTML5.
HTML Versions
The most recent version of HTML is HTML5. As this book is being written, the HTML5 specification is still under development, but many popular web browsers already support much of the HTML5 functionality. Version 5 includes rules for using more than 100 different HTML tags, most of which are covered in this book. HTML5 improves on previous versions by including new tags for defining common types of page content, better support for audio and video, and drawing capability with the new <canvas> tag. HTML5 succeeds HTML 4.01, which was released in 1999.
Browser Support
The development of a new HTML5 standard and the appearance of new features in web browsers are both gradual processes. As the specification of new HTML5 features became more complete, browsers began to support the features. Current versions of Google Chrome, Microsoft Internet Explorer, Mozilla Firefox, and Apple Safari support most of the HTML5 features described in this book. Google Chrome, which is used in the book examples, currently provides the widest HTML5 support of the four browsers.
XHTML
XHTML, or Extensible Hypertext Markup Language, is an alternative version of HTML that conforms to the stricter standards of XML, or Extensible Markup Language. XHTML is tag based and uses many of the same tags as HTML. However, in XHTML, all tags must be closed, tag names and attributes must be coded in lowercase, and attribute values for tags must be surrounded by quotes. For a time, the W3C group was developing a new XHTML 2.0 standard to take the place of HTML 4.01. In 2009, the group switched course to focus instead on HTML5. For more about XHTML, visit the W3C site at www.w3.org.
Explore Web Browsers
A web browser is software that can retrieve HTML documents from the web, parse the HTML instructions, and display the resulting web pages. In addition to retrieving the HTML, the browser takes care of downloading all the associated images, style sheets, scripts, and other information needed for the page to appear and function properly.
You can also use a browser to display HTML documents you save locally on your computer. When coding your HTML, you can use a web browser to test your work.
Finding a Browser
Most computer operating systems come with a web browser already installed. Internet-connected mobile phones and tablets also come with web browsers. Microsoft Windows 7 computers include the Internet Explorer browser, whereas Apple Mac computers include the Safari browser. Google Chrome and Mozilla Firefox are other web browsers that have become increasingly popular in recent years. Chrome, which currently includes excellent HTML5 support, is used in the examples in this book. You can learn more about Chrome and download it for free at www.google.com/chrome. For more information about web browsers, see www.wooldridge.net/html5.
Browser Discrepancies
There are many web browsers in use today, and numerous versions of each. Although most of them interpret HTML essentially the same way, differences in interpretation mean that not all of them display web pages in exactly the same manner. These differences are especially apparent with new HTML5 features. The current versions of Google Chrome, Microsoft internet Explorer, Mozilla Firefox, and Apple Safari support most but not all of the HTML5 features discussed in this book. Given the fact that some HTML5 features are still under development, it will be some time before all of the major browsers support the complete standard. As always, you can avoid surprises by writing clean, well-formed HTML code and testing your pages in different browsers and on different devices as you work.
Explore HTML Editors
Because HTML documents are plain-text documents, you can use any text-editing program to code HTML5 and create a web page. All computer operating systems come with some sort of text editor installed. You can also use a variety of web-specific coding environments that write your HTML5 code, validate it, and upload it to a web server. Higher-end editing tools help you write style sheets, scripts, and other types of code in addition to HTML5.
Simple Text Editors
Simple text editors, also called plain-text editors, are easy to find. Microsoft Windows 7 comes with Notepad, whereas Apple Mac computers come with TextEdit. Simple text editors offer no-frills word processing and are often the best choice when you are learning to write HTML5. This book uses the Notepad editor in its examples. For more about text editors, visit www.wooldridge.net/html5.
HTML Editors
HTML editors, such as Adobe Dreamweaver and Microsoft Expression, are dedicated programs for writing HTML5 code and managing web pages. These programs can shield you from having to write HTML5 code by offering a graphical environment for building web pages as well as a text-based environment. Most HTML editors also color your HTML5 tags for easier viewing, validate your code, and help you upload finished pages to a server.
Word Processing Programs
You can also use word processing programs, such as Microsoft Word, to write HTML5. In Word, you can select Web Page as the file type when you save a document, and the program automatically adds the appropriate HTML5 tags and saves the document as a text file. However, commercial word processors tend to store lots of extra information with your HTML5, which can make it a challenge to edit the files in other editors. It is generally better to use a text editor for working with HTML5 if you are going to be directly editing the code.
Understanding HTML5 Syntax
HTML5 is a language for describing web page content. HTML5 rules, or syntax, govern the way in which code is written and how web browsers interpret it. HTML5 with incorrect syntax can result in words, images, and other elements on your web page showing up in unexpected places or not at all. It can also result in your pages appearing differently in different web browsers. Learning the correct way to write your code can save you time and confusion later and ensure that web users see your pages as you intended them to be seen.
Writing HTML5
In HTML5, as in all versions of HTML, tags determine how page content is organized and formatted. Tags consist of words or abbreviations surrounded by angle brackets, < >. This HTML code creates a paragraph in your page:
<p>Hello, world!</p>
Tags can be written using upper- or lowercase letters. The following are all legal versions of the line break tag:
<BR> <br> <Br>
You can type tag names in uppercase to distinguish the code from other text. Lowercase tag names is the convention used in this book. Because web browsers read the tags as instructions rather than page content, the bracketed information does not appear in the browser window when the page is rendered.
Tag Structure
Certain structural HTML5 tags identify different parts of your document. For example, the <body> and </body> tags surround the main body content that appears in the browser window. The <head> and </head> tags surround accessory information, including references to style sheets and metadata, that does not appear directly in the browser window. The <html> and </html> tags appear at the very beginning and very end of the document, respectively. Many tags, such as the paragraph tags <p> and </p>, are written using an opening tag and a closing tag, whereas others, such as the image tag (<img>), stand alone. Closing tags must always include a slash (/) before the tag name.
Text Styling
One of the key changes in HTML5 is the removal of many style-related instructions from HTML tags. In HTML5, tags are meant to tell a browser what text on a page means rather than how it looks. For example, an <h1> tag defines text as an important heading but does not specify what color or font it is, or how it is aligned on a page. When using HTML5, you provide style instructions for your text by including Cascading Style Sheets, or CSS. CSS works in concert with HTML to specify colors, alignment information, and other details about how content looks on the page. CSS is introduced in Chapter 4.
Other Tags
Among the central features of web pages are the hyperlinks that enable you to navigate from one page to another and one site to another. The <a>, or anchor, tag lets you define text or other page elements as clickable hyperlinks. Links are covered in Chapter 7. You can organize page content into rows and columns using table tags, which include <table>, <tr>, <td>, and others. Tables are covered in Chapter 8.
Attributes and Values
Each HTML tag has specific attributes that you can assign to it to customize its behavior. Most attributes work by setting a numeric or descriptive value. For example, you can apply a CSS style to a paragraph on your page by using the style attribute. Some attributes are required for an HTML tag to function properly. The <img> tag requires an src attribute so that the browser can insert the correct image file on the page. Attributes always go inside the opening HTML tag, and enclosing attribute values in quotation marks is good form.
Entities
You can add special characters to a page, such as a copyright symbol or a fraction, by using special codes called entities. Entities represent characters not readily available on the keyboard. All entities are preceded by an ampersand (&) and followed by a semicolon (;). Entities are also useful for displaying characters that have special meaning in HTML. For example, to create a less-than symbol on your web page, you use the following code:
<
You cannot use a plain less-than symbol (<) because in HTML it is used to start a tag. For more about entities and special characters, see Chapter 3.
Avoiding Syntax Errors
To avoid errors in your pages, always take the time to proofread your code. Most HTML editors have features that highlight bad syntax. Make sure your tags have brackets, your closing tags include a slash, and your attribute values are surrounded by quotation marks. Multiple HTML tags should be properly nested, meaning your closing tags should be in the reverse order of the opening tags.
To help make your HTML readable, consider using new lines to type code instead of running everything together on one long line. Doing so does not affect how your page appears because web browsers ignore extra white space. Testing your web pages in multiple web browsers can also be a good way to discover syntax errors because browsers can vary in their leniency to certain types of errors.
New Features in HTML5
HTML5 rolls out many new features that web designers have been requesting for years. New tags in HTML5 enable designers to more accurately describe the content on an average web page. HTML5 tags also add native support for video and audio — content that has become integral to the typical online experience. The newest versions of web browsers are beginning to support these new HTML5 features, and this book covers these features in detail.
Semantic Tags
HTML5 introduces a host of new tags that help you define the semantics, or meaning, of your web page content. The tags include <nav> for defining sections that include site navigation, <heading> for defining the titles and tag lines at the beginning of your pages, and <footer> for defining the copyright information and boilerplate text at the end. These tags make your pages easier to understand by search engines, enabling them to generate more useful search results. The tags also help web browsers determine what parts of your pages are the most important; if there is limited room on the screen, web browsers will know what content to feature more prominently.
Richer Multimedia
HTML5 offers a new <video> tag for embedding video clips into your pages and an <audio> tag for integrating sound. In the past, developers used the nonstandard <embed> tag and the generic <object> tag for adding multimedia. The <embed> and <object> tags passed the duties for playing the video or sound to third-party plug-ins. Web browsers that support the new <video> and <audio> tags include native support for certain video and audio files, which means the browsers play the content directly. With the tags, web developers can create custom player controls, style the media with CSS, and more. The new multimedia tags are covered in Chapter 14.
Drawing on Canvases
A new <canvas> tag enables you to define a rectangular area on your page on which you can draw. You can use scripting commands to create shapes, draw straight and curved lines, apply color gradients, and even add images or parts of images within the area. In the past, designers needed to create such visual content in a separate image editor or drawing program and then embed the result as an image. With HTML5, you can create drawings using the <canvas> tag and JavaScript. The drawings can change depending on the data that a user submits or actions performed on the page. The <canvas> tag is covered in Chapter 13.
Fancier Forms
HTML5 adds a number of new input elements for web forms. For example, you can create text fields that accept only e-mail addresses or web URLs. If a user submits a form with invalid data entered into such fields, you can highlight the form field using CSS styles. Some web browsers also pop up alert text when you submit wrong data. New time elements in HTML5 display menus for setting a date, month, week, or time in a form. There is also a new slider element that allows users to select a value from within a range of numbers by clicking and dragging a control. These new features mean that developers can provide rich functionality in their web forms with simple HTML5 tags. Previously, developers have had to resort to using complicated, custom scripts to provide such features.
Moving Styles to CSS
In addition to adding new features, the standards groups that designed HTML5 have also taken some features away. Most of these deprecated features are tags and attributes that previously enabled you to apply formatting to content on your page. For example, in HTML 4.01 you could use the following align attribute with your <p> tag to define a paragraph’s alignment:
<p align=”right”>My old aligned paragraph.</p> (Invalid in HTML5!)
This align attribute has been removed from HTML5. Instead, you can use Cascading Style Sheets, or CSS, to define alignment rules. You can then apply those rules, as CSS classes, in your HTML code:
<p class=”align-right”>My new aligned paragraph.</p> (Valid in HTML5.)
Moving style-related commands out of HTML and into CSS reduces repetition in your code and makes it easier to maintain a consistent look and feel across a website. CSS styles are introduced in Chapter 4.
View HTML5 Code in a Browser
You can view the HTML5 code for any web page that you have loaded into your web browser. Viewing HTML5 from different websites is a good way to learn how to write your own code and can spawn new ideas for your own pages. You can also save a web page locally for use as a template or to study later.
In Microsoft Windows 7, Google Chrome opens the HTML5 code in a separate browser tab with the tags highlighted in color. To view an HTML5 page that you have saved locally, see Chapter 2.
View HTML5 Code in a Browser
View the Source Code
Open a web page in your browser window.
Click the Chrome tools button .
Click Tools.
Click View source.
Note: Other web browsers have the View Source command under a View menu. See your browser’s documentation for more information.
A new browser tab appears, displaying the HTML source code for the page.
Click the Close button () when finished.
The tab closes.
Save the Source Code
Click the Chrome tools button .
Click Save page as.
The Save As dialog box appears.
Click here to navigate to the folder where you want to store the page.
Type a name for the page.
HTML pages should have an .html file extension.
Click Save.
Chrome saves the page.
Will the HTML5 documents that I save to my computer work when I open them in a browser?
Possibly. It depends on how the HTML5 is coded. In addition to the HTML5 instructions, you may have to download images, style sheets, scripts, and other external content separately and then edit the HTML5 so that the page references them correctly. For more about referencing other content from your document, see Chapter 7.
How else can I save a web page in my browser?
In Chrome, you can click the Chrome tools button and then Save page as. Under the Save as type menu, the browser gives you two ways to save your page. Web Page, HTML Only is the default type and saves a single HTML page. Web Page, Complete saves the HTML and external content to a separate folder on your computer.
