Transcript Tutorial 1
Tutorial 8: Creating Effective Web Pages Objectives • Session 8.1 – Define HTML and understand how it works – Examine the tools used to create HTML documents – Create an HTML document – Use tags, attributes, and anchors – Add images and links to an HTML document New Perspectives on the Internet, 9th Edition 2 Objectives • Session 8.2 – Plan the content for a Web site – Examine Web site creation and management programs – Learn about JavaScript, Flash, and Shockwave – Learn about the different types of images that you can use in a Web page and the programs that create them – Understand the questions to ask when selecting a Web hosting service – Understand the issues involved when publishing a Web site – Learn about search engine submission and search engine optimization New Perspectives on the Internet, 9th Edition 3 Session 8.1 Visual Overview Understanding HTML New Perspectives on the Internet, 9th Edition 4 Understanding Markup Languages • A markup language is a general term that indicates the separation of the formatting of a document and the content of a document • Before HTML, Standard Generalized Markup Language (SGML)—a metalanguage that is used to create other languages—was the standard for formatting documents that were not dependent on the operating system or environment in which the documents were created or viewed • The World Wide Web Consortium (W3C) establishes specifications, or sets of standards, that identify how a browser interprets the HTML code New Perspectives on the Internet, 9th Edition 5 Understanding Markup Languages • Extensible Markup Language (XML) is another popular markup language that is used to describe the format and structure of data • Extensible Hypertext Markup Language (XHTML), the most recent markup language specification from the W3C, combines the formatting features of HTML with a stricter syntax that works to combine HTML and XML so that Web content is more readily and easily delivered to all devices that are connected to the Internet • HTML specifications that are not included when newer specifications are released or are not included in the XHTML specification are referred to as deprecated New Perspectives on the Internet, 9th Edition 6 Understanding Tags and Attributes • Tags must identify all the elements in a Web page • Tags that are included within other tags are called nested tags • Tags are either two-sided, such as <p></p>, or they are one-sided, such as <br/> • Some tags include attributes that specify additional information about the content to be formatted by the tag • Some attributes are optional, some are not New Perspectives on the Internet, 9th Edition 7 Planning an HTML Document • You can create Web pages using a text editor or a program that includes multiple features for working with Web pages and Web sites • The Web-safe color palette is a collection of 216 colors that all computers render in the same way • The fonts that are available on your computer are not always the same ones that are available on other computers; use fonts that are considered to be common on all computers New Perspectives on the Internet, 9th Edition 8 Planning an HTML Document New Perspectives on the Internet, 9th Edition 9 Creating an HTML Document • Creating the HTML Document Structure – The first section, called the head section, includes the <head> tag and includes general information about the document – The second required section in an HTML document is the body section, which includes the content of the Web page along with the tags needed to format the content – A document type declaration (DTD) is a one-sided tag that tells a browser which syntax version of a markup language your document uses New Perspectives on the Internet, 9th Edition 10 Creating an HTML Document • Adding a Comment to an HTML Document – A comment tag is a one-sided tag that the browser ignores and does not display in the Web page • Inserting and Formatting Headings – To create a level-one heading, use the <h1> tag – Attributes may be added to tags – Separate multiple attribute values with a semicolon New Perspectives on the Internet, 9th Edition 11 Creating an HTML Document • Inserting and Formatting a Paragraph – Content can be added to a Web page by copying text from a document and inserting it between <p> and </p> – Enclose text in additional tags to change to bold or italic • Creating a List – HTML supports three kinds of lists: • Bulleted or unordered • Numbered or ordered • Definition list New Perspectives on the Internet, 9th Edition 12 Creating an HTML Document New Perspectives on the Internet, 9th Edition 13 Using Images in an HTML Document • In HTML, an image is any file that contains a picture, logo, or computer-generated file • To include an image in a Web page, it must be stored as a file • The height and width attributes describe the image’s height and width in pixels; a pixel is a single point in an image • A relative path specifies a file’s location relative to the location of the current file • An absolute path specifies a file’s location with absolute precision; there is no reference to the current file New Perspectives on the Internet, 9th Edition 14 Using Images in an HTML Document New Perspectives on the Internet, 9th Edition 15 Using Anchors • The HTML tag that creates a hyperlink is the anchor tag <a> • The most common use of a hyperlink is to connect the different Web pages in a Web site together • The page that opens when a hyperlink is clicked is called the hyperlink’s target or target page • The Web page that contains the hyperlink is called the source page New Perspectives on the Internet, 9th Edition 16 Using Anchors • The syntax of a hyperlink that connects a source page with a target page is as follows: <a href=“default.html”>Home Page</a> • Most browsers underline hyperlinks and display them in a blue font so they are easy to identify in a Web page • When a hyperlink is used to link to a location on the same page, it is sometimes called a bookmark New Perspectives on the Internet, 9th Edition 17 Adding a Link to a Web Page • You can create a hyperlink at any time during Web page development • It’s important to make sure that the page is stored in the correct location when creating a link New Perspectives on the Internet, 9th Edition 18 Session 8.2 Visual Overview Creating a Web Site New Perspectives on the Internet, 9th Edition 19 Evaluating Web Site Content • A storyboard can help identify the general content for each page, the number of pages in the site, and the relationship between the site’s pages New Perspectives on the Internet, 9th Edition 20 Using a Web Site Management Tool • Most Web developers rely on Web Site Management tools rather than Notepad and HTML • Microsoft Expression Web and Adobe Dreamweaver are two Web site creation and management tools – They use a graphical user interface (GUI) to generate the HTML documents for Web pages – Their toolbars and panels include tools that let you format text, create hyperlinks, and perform other tasks that are supported by HTML and XHTML New Perspectives on the Internet, 9th Edition 21 Using a Web Site Management Tool • Expression Web uses styles to define text formatting, instead of the tags that you used in the HTML document you created in Notepad • A style is a collection of formatting instructions that the Web browser applies to text New Perspectives on the Internet, 9th Edition 22 Using a Web Site Management Tool • Dreamweaver generates code that is compatible with XHTML 1.0 New Perspectives on the Internet, 9th Edition 23 Using a Web Site Management Tool • Using a Web site management tool reduces the burden on the developer to understand the syntax of all the HTML tags and attributes that create Web pages • Web site management tools simplify some of the tasks needed to complete a Web site • These programs include: – Code snippets that create animations – Tools that let you check the entire Web site for broken links and other problems New Perspectives on the Internet, 9th Edition 24 Choosing Other Development Tools • Some Web pages include content that is beyond the capabilities of HTML, such as dynamic content • Programming with JavaScript – JavaScript is a scripting language that was originally developed as “LiveScript” by a Netscape Communications Corp. programmer – A scripting language is a programming language that is executed by a Web browser – A scripting engine translates the code in the script into a format that a browser can execute New Perspectives on the Internet, 9th Edition 25 Choosing Other Development Tools • Programming with JavaScript (continued) – The most common use of JavaScript is to perform tasks that are not possible in the static world of HTML documents – Many Web sites include resources for downloading and using free scripts written in JavaScript New Perspectives on the Internet, 9th Edition 26 Choosing Other Development Tools • Creating Animated Content – Browser extensions allow a Web browser to perform tasks it was not originally designed to perform; types include: • Plug-in: browser uses plug-in to display or play a specific file that you request • Helper application: programs installed on the user’s computer that the browser starts and uses to “help” display or play a file • Add-on: includes tools that enhance the browsing experience, such as toolbars that let you access a search engine without opening its Web site New Perspectives on the Internet, 9th Edition 27 Choosing Other Development Tools • Creating Animated Content (continued) – Flash Player lets your Web browser display simple animations, user interfaces, images, movies, sound, and text that was created using Adobe Flash software – Shockwave Player is a more fully featured browser plug-in – Shockwave Player lets you view animated, threedimensional interfaces, interactive advertisements and product demonstrations, multiuser games, streaming CD-quality audio, and video that was created using Adobe Director software New Perspectives on the Internet, 9th Edition 28 Choosing Other Development Tools • Choosing Image Editing and Illustration Programs – Computer-generated graphics come in two basic varieties: • Raster graphics (also called bitmaps) are composed of pixels • Vector graphics are composed of paths New Perspectives on the Internet, 9th Edition 29 Choosing Other Development Tools • Choosing Image Editing and Illustration Programs (continued) – Raster graphics have the following file extensions: • .bmp • .gif • .jpg • .png • .tif New Perspectives on the Internet, 9th Edition 30 Choosing Other Development Tools • Choosing Image Editing and Illustration Programs (continued) – Vector graphics have the following file extensions: • .ai • .wmf • .cdr • .dxf – Vector graphics are scalable, which means their edges are smooth at any resolution New Perspectives on the Internet, 9th Edition 31 Choosing Other Development Tools • Choosing Image Editing and Illustration Programs (continued) – Raster graphics require the use of a category of programs called image editing programs – Vector graphics require the use of a category of programs called illustration software – Some programs, such as Fireworks and Photoshop, do both, but most programs are geared primarily toward one category of graphic or the other New Perspectives on the Internet, 9th Edition 32 Choosing a Web Hosting Service • Ideally you choose a Web hosting service before you begin working on a Web site • It’s important to understand your web site’s technical requirements when choosing a hosting service • Understanding Types of Web Servers – A secure server encrypts data, which changes it into a format that prevents unauthorized parties from being able to read or use it – A dedicated server is a Web server that hosts only one site – A shared server hosts several sites New Perspectives on the Internet, 9th Edition 33 Choosing a Web Hosting Service • Understanding the Site’s File Size and Transfer Requirements – The amount of data that is transferred from the Web server is known as the site’s bandwidth or data transfer – Most companies sell server space based on a file size limit and a daily or monthly data transfer limit – Make sure that the Web hosting service can handle current needs as well as anticipated needs New Perspectives on the Internet, 9th Edition 34 Choosing a Web Hosting Service • Evaluating Other Services Offered by a Web Hosting Service – Other useful services offered by the Web hosting service include site statistics, email accounts, Web site templates, Web site construction tools, database software, domain name management services, and technical support – You must secure a domain name for your Web site; some Web hosting services include domain name registration (and renewal) as part of their service New Perspectives on the Internet, 9th Edition 35 Publishing a Web Site • After finding a Web hosting service, the next step is publishing the site • The Web hosting service should provide the information you need to upload the Web site files • A control panel is a Web page that includes all the tools you need to access and manage your Web site • A local Web site is a copy of the Web site stored on a hard or local drive • The Web site stored on the Web server is called the remote Web site New Perspectives on the Internet, 9th Edition 36 Search Engine Submission and Optimization • The last major task in publishing a Web site is promotion • You can be proactive and use <meta> tags to teach search engines how to list your site • Search engine submission is the process of submitting your site’s URL to one or more search engines so they will list your site in their indexes • Search engine optimization (SEO) is the process of fine-tuning your site so that it ranks well in a search engine’s results when a user searches the Web using your site’s keywords New Perspectives on the Internet, 9th Edition 37 Search Engine Submission and Optimization New Perspectives on the Internet, 9th Edition 38