Tài liệu Module 3: Basic HTML pdf

Module 3: Basic HTML Contents Overview Web Site Design Considerations Creating a Web Page Adding Images to a Web Page 29 Creating Tables 41 Formatting Tables 47 Nesting Tables 54 Lab 3: Creating Web Pages Using HTML 55 Review 60 Information in this document is subject to change without notice The names of companies, products, people, characters, and/or data mentioned herein are fictitious and are in no way intended to represent any real individual, company, product, or event, unless otherwise noted Complying with all applicable copyright laws is the responsibility of the user No part of this document may be reproduced or transmitted in any form or by any means, electronic or mechanical, for any purpose, without the express written permission of Microsoft Corporation If, however, your only means of access is electronic, permission to print one copy is hereby granted Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering subject matter in this document Except as expressly provided in any written license agreement from Microsoft, the furnishing of this document does not give you any license to these patents, trademarks, copyrights, or other intellectual property  2000 Microsoft Corporation All rights reserved Microsoft, ActiveX, BackOffice, FrontPage, Internet Explorer, MS-DOS, Personal Web Server, Notepad, Visual Basic, Windows, and Windows NT are either registered trademarks or trademarks of Microsoft Corporation in the U.S.A and/or other countries The names of companies, products, people, characters, and/or data mentioned herein are fictitious and are in no way intended to represent any real individual, company, product, or event, unless otherwise noted Other product and company names mentioned herein may be the trademarks of their respective owners Program Manager: Steve Merrill Development Lead: Basabjit Chakrabarty (NIIT) Instructional Designers: Sangeeta Nair, Vijayalakshmi Narayanaswamy (NIIT); Veena Nambier, Yatinder Walia (NIIT) Technical Contributors: Scott Swigart (3 Leaf Solutions); Gary Gumbiner (Great Barrier Technologies, Inc.) Graphic Artist: Scott Serna (Creative Assets) Editing Manager: Jennifer Linn Editor: Reid Bannecker Production Manager: Miracle Davis Production Coordinator: Linda Lu Cannon (The Write Stuff) Build Coordinator: Eric Wagoner Testing Lead: Eric Meyers Testing: Bryan Urakawa, Chris and Edward Lead Product Manager, Internet Services: Hilary Vandal Manufacturing Manager: Rick Terek Operations Coordinator: John Williams Manufacturing Support: Laura King; Kathy Hershey Lead Product Manager, Release Management: Bo Galford Group Manager, Courseware Infrastructure: David Bramble General Manager: Robert Stewart Module 3: Basic HTML iii Instructor Notes Presentation: 165 Minutes Lab: 30 Minutes This module provides students with an overview of HTML and Microsoft FrontPage 2000 It explains how to create Web pages with images, image maps, and hyperlinks by using HTML and FrontPage 2000 It also explains how to create tables by using HTML and FrontPage 2000 After completing this module, students will be able to: ! Identifying the considerations for designing the user interface for a Web site ! Create a Web page by using basic HTML tags and FrontPage 2000 ! Add images to a Web page by using HTML and FrontPage 2000 ! Identify the various imagemap tags ! Identify the issues related to image design ! Create tables by using HTML and FrontPage 2000 ! Format table using html format tags Materials and Preparation This section provides you with the required materials and preparation tasks that are needed to teach this module Required Materials To teach this module, you need the following materials: ! Microsoft PowerPoint file 1912A_03.ppt ! Module 3, “Basic HTML” ! Lab 3, “Creating Web Pages Using HTML” Preparation Tasks To prepare for this module, you should: ! Read all of the materials for this module ! Complete the lab iv Module 3: Basic HTML Module Strategy Use the following strategy to present this module: ! Web Page Design Considerations This topic covers the guidelines for designing Web pages Explain each guideline and why it needs to be considered while designing a Web page ! Creating a Web Page This topic explains how to create a Web page First, introduce the basic HTML tags Then, explain the tag syntax Explain the content tags to the students Then explain the hyperlink tag and show students an example of a hyperlink by opening the htm file, Hyperlink.htm, from the Student CDROM Finally, demonstrate how to create a Web page using FrontPage 2000 ! Adding Images to a Web Page Begin by explaining how to add an image to a Web page using HTML Then, introduce image maps and show students an example of an image map by opening the htm file, Imagemap.htm, from the Student CD-ROM Next, explain how to create image maps Explain the points to be kept in mind while adding an image to a Web page Finally, demonstrate how to add an image to a Web page using FrontPage 2000 ! Creating Tables Begin by explaining the need for tables and then show students an example of a table by opening the htm file, Airlinetable.htm, from the Student CDROM folder Explain the table tags in HTML by examining the source code of the table Then, explain how to format tables with formatting tags Finally, demonstrate how to create a table using FrontPage 2000 Module 3: Basic HTML # Overview Slide Objective To provide an overview of the module topics and objectives Lead-in In this module, you will learn to create Web pages by using HTML and FrontPage2000 ! Web Site Design Considerations ! Creating a Web Page ! Adding Images to a Web Page ! Creating Tables ! Formatting Tables ! Lab: Creating Web Pages Using HTML ! Review While browsing the Web, you must have come across sites that contain interactive content You can create a highly interactive Web site for your users but, before you so, you must begin by learning how to create basic Web pages Hypertext Markup Language (HTML) is the language used to create Web pages HTML uses tags to tell the Web browser how to present information on a Web page For example, there are HTML tags for headings, graphics, paragraphs, and hyperlinks Apart from HTML, there are other tools that allow you to create Web pages Microsoft® FrontPage® 2000 is one such tool When you use FrontPage to create Web pages, it automatically inserts the appropriate HTML tags into the document you have created However, you can also create HTML files with any text editor, such as Notepad, or edit the HTML tags directly in the HTML window in FrontPage If you create simple Web pages that contain static text and graphics, understanding HTML syntax is not essential FrontPage manages the HTML code behind the Web page you create You can create Web pages that take advantage of advanced features, such as Microsoft Visual Basic® Scripting Edition (VBScript) or Microsoft ActiveX® controls, by using a text editor and then entering HTML tags manually, or by using FrontPage 2000 After completing this module, you will be able to: ! Identify the considerations for designing the user interface for a Web site ! Create a Web page by using basic HTML tags and FrontPage 2000 ! Add images to a Web page using HTML and FrontPage 2000 ! Identify the various image map tags ! Identify the issues related to image design ! Create tables using HTML and FrontPage 2000 ! Identify features for formatting tables Module 3: Basic HTML Note All the sample applications for this module are stored under the \Inetpub\WWWRoot\1912\Sampapps folder The files for the sample Web site “Exotic Excursions” are stored under the \Inetpub\WWWRoot\1912\Sampsite folder Module 3: Basic HTML Web Site Design Considerations Slide Objective To identify the issues related to designing the user interface for a Web site Lead-in When designing the user interface for a Web site, you should consider certain issues ! Minimize download time ! Keep information accessible ! Provide alternative media ! Minimize the use of sound ! Coordinate colors ! Text considerations ! Consistency ! Legal issues Have you ever been frustrated while browsing some Web pages because they take a long time to download or their content is poorly organized? These are only some of the issues that you should keep in mind when you design Web pages HTML is not only a page description and formatting language; it is also used to display information and graphics and to allow for user interaction There are certain considerations that should be kept in mind when designing the user interface for a Web site ! Minimize download time Keep the design of your site simple Minimize the use of complex graphics that take a long time to download ! Keep information accessible The main information on a Web site should be within two hyperlinks of the home page Users often get confused and frustrated when they have to follow more than two hyperlinks to reach the information they want ! Provide alternative media Some browsers not support all the functionality provided by a Web site, such as graphics, video, and sound files You should provide an alternative method for delivering similar information, such as a graphic instead of a video file, or text in place of a graphic You should also keep people with disabilities in mind when creating a Web site You can find the complete Web Content Accessability Guidelines at http://www.w3.org/TR/WAI-WEBCONTENT ! Minimize the use of sound Transferring sound across the Internet requires high bandwidth This means that users with low-bandwidth connections will experience a very long download time for Web sites that include sound files Module 3: Basic HTML ! Coordinate colors Use color to convey information or to draw attention to where it is actually needed If you use a background image, make sure that it does not overpower the information on the Web site Some background images make text unreadable The standard Web interface displays hyperlinks to other pages in colors that stand out from the rest of the text Additionally, a link that has already been visited appears in a different color Not all browsers can display all colors correctly If you are developing a Web site for the general public, you should only use the 216 Web-safe colors ! Text considerations The text should be big enough to read Background colors or images should not make the text more difficult to read ! Consistency Consistency is paramount in creating a good Web site The structure and metaphors used in a Web site should remain consistent throughout If you are designing a Web site for an intranet, you should focus on easy access and critical information, such as forms and corporate databases On the other hand, when designing an Internet site, you should focus on issues such as corporate branding and marketing messages In both cases, you should strive to create a Web site that provides easy navigation, making it simple for users to find what they are looking for ! Legal Issues As a general rule, the contents of a Web site can be freely copied by users However, you can copyright information on your site This will notify users that they are not free to copy information on your site without your permission For more information about good and bad Web design, go to http://www.websitesthatsuck.com Module 3: Basic HTML # Creating a Web Page Slide Objective To present an overview of the topics covered in this section Lead-in To create a Web page, you require a markup language ! Basic HTML Tags ! HTML Tag Syntax ! Practice: Creating a Web Page Using Notepad ! Practice: Creating a Web Page Using FrontPage 2000 ! Content Tags ! Practice: Creating Headings, Paragraphs, and Lists ! HTML Tag Attributes ! Hyperlink Tags ! Practice: Adding Hyperlinks (View default.htm from Sampsite) Delivery Tip Open the file default.htm from the folder \\Inetpub\wwwroot\1912\Sa mpsite Tell students about the main features of the sample site (contains Web pages, tables, hyperlinks, and images) and that they should be able to create a similar Web page at the end of the module Web pages are created with HTML An HTML document is composed of two basic elements: tags and content The tags provide information that the browser needs to display the content Module 3: Basic HTML Basic HTML Tags Slide Objective ! To introduce the basic HTML tags Lead-in Behind every HTML Web page is a document that is formatted with HTML tags ! ! HTML Tag $ $ Contains a head and a body section HEAD Tag $ $ Requires the tag BODY Tag $ $ Holds the entire content of the Web page (View mysite.htm from Sampapps) Delivery Tip Open mysite.htm from \Inetpub\WWWRoot\1912\S ampapps\Ch03 to show students how HTML tags are used in a code There are some basic HTML tags that are common to all Web pages These tags are the building blocks of an HTML document ! The tags indicates that the document is an HTML document All HTML documents are enclosed within the and tags and contain a head and a body section ! The tags defines the head section This section contains the tags The tags specify the title to be displayed in the title bar of the browser when a user views the Web page The head section can also contain metadata about a document Metadata can include keywords pertaining to the document For example, metadata about a document might be the author of that document Information in the head section is not displayed to the user ! All the content of a Web page is held between the tags ... 3: Basic HTML Basic HTML Tags Slide Objective ! To introduce the basic HTML tags Lead-in Behind every HTML Web page is a document that is formatted with HTML tags ! ! HTML Tag $ < /HTML> ... prepare for this module, you should: ! Read all of the materials for this module ! Complete the lab iv Module 3: Basic HTML Module Strategy Use the following strategy to present this module: ! Web... students how HTML tags are used in a code There are some basic HTML tags that are common to all Web pages These tags are the building blocks of an HTML document ! < /HTML> The < /HTML> tags