INTRO TO HTML

Chia sẻ: Tran Nhu | Ngày: | Loại File: PDF | Số trang:178

Thêm vào BST

Báo xấu

130
lượt xem 38
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Hypermedia is where the user simply selects the next item of interest and is immediately transported to that new location. A good example is an audio CD where you can choose song 5 and listen to it almost immediately. Contrast this with an audiotape where you would have to scan through from your current location on the tape to the beginning of the song.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: INTRO TO HTML

Copyrights and Trademarks No part of this document may be reproduced, stored in a retrieval system, or transmitted in any form or by any means – electronic, mechanical, recording, or otherwise – without the prior written consent of the publisher. Netscape Navigator is a trademark of Netscape Communications Corp. Windows 3.1, Windows 95, Windows NT, and Internet Explorer are trademarks of Microsoft Corporation. All trademarks and brand names are acknowledged as belonging to their respective owners. Published by XtraNet 180 Attwell Dr., Suite 130 Toronto, Ontario, Canada M9W 6A9 Phone: 416-675-1881 Fax: 416-675-9217 E-mail: info@xnu.com Copyright © 1999 by XtraNet All Rights Reserved January 1999 First Edition 12345678
Share these FREE Courses! Why stuff your friend’s mailbox with a copy of this when we can do it for you! Just e-mail them the link info – http://www.trainingtools.com Make sure that you visit the site as well: • MORE FREE COURSES • Weekly Tool Tips • Updated course versions • New courses added regularly So don’t copy files or photocopy - Share! End User License Agreement Use of this package is governed by the following terms: A. License TrainingTools.com Inc, ("we", "us" or "our"), provides the Licensee ("you" or "your") with a set of digital files in electronic format (together called "the Package") and grants to you a license to use the Package in accordance with the terms of this Agreement. Use of the package includes the right to print a single copy for personal use. B. Intellectual Property Ownership of the copyright, trademark and all other rights, title and interest in the Package, as well as any copies, derivative works (if any are permitted) or merged portions made from the Package shall at all times remain with us or licensors to us. This Package is protected by local and international intellectual property laws, which apply but are not limited to our copyright and trademark rights, and by international treaty provisions. C. Single-User License Restrictions 1. You may not make copies of the files provided in the Package 2. You may not translate and/or reproduce the files in digital or print format 3. You may not rent, lease, assign or transfer the Package or any portion thereof 4. You may not modify the courseware
Table of Contents Chapter 1 - HTML Introduction ..................................................................... 1 Linear Media ................................................................................................................................ 2 Hypermedia ................................................................................................................................. 2 What is HTML Markup................................................................................................................. 3 Document Structure..................................................................................................................... 4 A Basic Document ....................................................................................................................... 4 Review Questions........................................................................................................................ 6 Summary ..................................................................................................................................... 7 Chapter 2 - Overview of HTML Page Creation......................................... 8 Choosing a Text Editor, ............................................................................................................... 9 Starting NotePad, .................................................................................................................................................... 9 Creating a Basic Starting Document, ........................................................................................ 10 Setting Document Properties,.................................................................................................... 11 Color Codes, ......................................................................................................................................................... 11 The BODY Element, .............................................................................................................................................. 12 BODY Text Color,.................................................................................................................................................. 12 LINK, VLINK and ALINK, ....................................................................................................................................... 13 Body Image Backgrounds,..................................................................................................................................... 13 HTML Tip: Image Backgrounds................................................................................................. 14 Previewing Your Work, .............................................................................................................. 15 Edit, Save & View Cycle ............................................................................................................ 15 Using Netscape Navigator ..................................................................................................................................... 15 Using Microsoft Internet Explorer........................................................................................................................... 16 Exercise ..................................................................................................................................... 17 Review Questions...................................................................................................................... 18 Summary ................................................................................................................................... 19 Chapter 3 - Headings, Paragraphs and Breaks ..................................... 20 Headings, .............................................................................................................. 21 Paragraph, ................................................................................................................. 22 HTML Tip: Multiple Spaces ....................................................................................................... 22 Break, ................................................................................................................... 23 Horizontal Rule, ............................................................................................................... 24 Exercise – Headings.................................................................................................................. 25 Exercise – Horizontal Rules ...................................................................................................... 26 Exercise – Paragraphs & Breaks............................................................................................... 27 Review Questions...................................................................................................................... 28 Summary ................................................................................................................................... 29 Chapter 4 - Character Formatting.............................................................. 30 Bold & Italic and other Character Formatting ............................................................................ 31 Alignment................................................................................................................................... 32 Special Characters & Symbols .................................................................................................. 32 Additional Character Formatting Elements................................................................................ 33 Strike Through Text ............................................................................................................................................... 33 Big Text ................................................................................................................................................................. 33 Small Text ............................................................................................................................................................. 33 Subscript Text........................................................................................................................................................ 33 Superscript Text .................................................................................................................................................... 33 Defining instance of enclosed term ........................................................................................................................ 33 Formatting extracts of program code ..................................................................................................................... 33 Formatting sample output from programs .............................................................................................................. 33 Formatting Keyboard text....................................................................................................................................... 33 Formatting variables .............................................................................................................................................. 33 Basefont ................................................................................................................................................................ 34 HTML Tip: BlockQuotes ............................................................................................................ 34 Exercise 1 .................................................................................................................................. 35 Exercise 2 .................................................................................................................................. 36 Optional Exercise....................................................................................................................... 36 Review Questions...................................................................................................................... 37 HoTMetaL PRO 6.0 the ultimate web development tool www.hotmetalpro.com i
Table of Contents Summary ................................................................................................................................... 38 Chapter 5 - Lists ............................................................................................ 39 List Elements ............................................................................................................................. 40 Unordered List ....................................................................................................................................................... 40 Ordered List........................................................................................................................................................... 41 Definition List......................................................................................................................................................... 42 Nesting Lists .............................................................................................................................. 42 Exercise – Ordered List ............................................................................................................. 43 Optional Exercises..................................................................................................................... 44 Review Questions...................................................................................................................... 45 Summary ................................................................................................................................... 46 Chapter 6 - Images ....................................................................................... 47 Supported Image Formats......................................................................................................... 48 GIF ........................................................................................................................................................................ 48 GIF Interlacing ....................................................................................................................................................... 48 GIF Transparency.................................................................................................................................................. 48 GIF Animated ........................................................................................................................................................ 48 JPEG..................................................................................................................................................................... 49 Limited Support or Non-Supported Image Formats .................................................................. 49 Inserting Images ............................................................................................................ 50 Additional Image Attributes........................................................................................................ 50 Horizontal Space HSPACE.................................................................................................................................... 50 Vertical Space VSPACE ........................................................................................................................................ 50 HTML Tip: Images ..................................................................................................................... 50 Exercise 1 .................................................................................................................................. 51 Optional Exercise....................................................................................................................... 51 Review Questions...................................................................................................................... 52 Summary ................................................................................................................................... 53 Chapter 7 - Anchors, URLs and Image Maps ......................................... 54 Link Elements .................................................................................................. 55 Link Types ................................................................................................................................. 55 Internal Links ......................................................................................................................................................... 55 Local Links ............................................................................................................................................................ 55 External Links........................................................................................................................................................ 55 URLs – Uniform Resourced Locators........................................................................................ 56 HTTP – HyperText Transport Protocol................................................................................................................... 56 FTP – File Transfer Protocol.................................................................................................................................. 56 News – News Groups ............................................................................................................................................ 56 Gopher .................................................................................................................................................................. 57 E-mail .................................................................................................................................................................... 57 Telnet – Remote Terminal Emulation..................................................................................................................... 57 Internal Links ............................................................................................................................. 58 HTML Tip: Links ................................................................................................................... 58 Image Maps ............................................................................................................................... 59 Server-side Image Maps..................................................................................................................... 59 Client-side Image Maps ......................................................................................................................................... 60 Exercise – Mailto and HTTP Link .............................................................................................. 61 Review Questions...................................................................................................................... 62 Summary ................................................................................................................................... 63 Chapter 8 - Tables......................................................................................... 64 Tables ...................................................................................................... 65 Table Attributes.......................................................................................................................... 66 Table Captions ...................................................................................................................................................... 67 Table Header......................................................................................................................................................... 67 HTML Tip: Centering Tables ..................................................................................................... 69 Exercise – Add and customize a table ...................................................................................... 70 Review Questions...................................................................................................................... 71 Summary ................................................................................................................................... 72 ii OLM World Class Web Hosting E-commerce and Custom Internet Solutions hosting.olm.net
Table of Contents Chapter 9 - Frames............................................................................. 73 Frames....................................................................................................................................... 74 Frames Architecture .................................................................................................................. 75 Creating a Frames Page ........................................................................................................... 76 Frameset ............................................................................................................................................................... 76 Other Attributes of the FRAMESET Element.......................................................................................................... 77 Frame.................................................................................................................................................................... 78 Noframes............................................................................................................................................................... 79 Targets .................................................................................................................................................................. 81 Special Targets...................................................................................................................................................... 82 Exercise – Using a Framed page .............................................................................................. 83 Exercise – Creating a link in a framed environment.................................................................. 83 Review Questions...................................................................................................................... 84 Summary ................................................................................................................................... 85 Chapter 10 - Forms ....................................................................................... 86 Forms ........................................................................................................ 87 Form Attributes ...................................................................................................................................................... 88 HTML Tip: Forms....................................................................................................................... 88 Form Elements .......................................................................................................................... 89 Textboxes.............................................................................................................................................................. 89 Password boxes .................................................................................................................................................... 90 Check boxes.......................................................................................................................................................... 91 Radio/Option Button .............................................................................................................................................. 91 File Upload ............................................................................................................................................................ 92 Push button ........................................................................................................................................................... 92 Submit button ........................................................................................................................................................ 93 Image submit button .............................................................................................................................................. 93 Reset Button.......................................................................................................................................................... 93 Text area ............................................................................................................................................................... 94 Select .................................................................................................................................................................... 95 Drop down list........................................................................................................................................................ 95 List box.................................................................................................................................................................. 95 Options............................................................................................................................................................. 95 Common Gateway Interface - CGI ............................................................................................ 96 CGI Scripts ................................................................................................................................ 96 Section 3.2.a: Simple CGI Program .......................................................................................... 97 Section 3.2.b: Three-Tier Web Application Development ......................................................... 98 Section 3.2.c: Four-Tier Web Application Development............................................................ 99 Exercise – Creating an Order Form......................................................................................... 100 Review Questions.................................................................................................................... 113 Summary ................................................................................................................................. 114 Chapter 11 - JAVA and JAVAScript Introduction ................................. 115 JAVA ........................................................................................................................................ 116 Applet....................................................................................................................................... 116 Applet Attributes ...................................................................................................................... 116 Element.............................................................................................................................................. 116 JAVAScript............................................................................................................................... 118 Exercise – Inserting a JAVA Applet......................................................................................... 120 Optional Exercise..................................................................................................................... 121 Review Questions.................................................................................................................... 122 Summary ................................................................................................................................. 123 Chapter 13 - ActiveX Objects and VBScript introduction ................... 124 ActiveX Support ....................................................................................................................... 125 .............................................................................................................................. 125 VBScript................................................................................................................................... 128 Exercise – Adding an ActiveX Object to a page...................................................................... 129 Optional Exercise – Adding VBScript to a page ...................................................................... 130 Review Questions.................................................................................................................... 131 HoTMetaL PRO 6.0 the ultimate web development tool www.hotmetalpro.com iii
Table of Contents Summary ................................................................................................................................. 132 Chapter 14 - Special Elements ................................................................ 133 Uses of the Meta Element ....................................................................................................... 134 Client Pull, Server Push....................................................................................................................................... 134 Description .......................................................................................................................................................... 134 Keywords............................................................................................................................................................. 134 Author.................................................................................................................................................................. 134 Company............................................................................................................................................................. 135 Copyright ............................................................................................................................................................. 135 Adding sound to an HTML page.............................................................................................. 136 Embed................................................................................................................................................................. 136 BGSound............................................................................................................................................................. 136 Marquee................................................................................................................................... 137 Blink ......................................................................................................................................... 137 Exercise – Adding Client Pull, Server Push ............................................................................ 138 Optional Exercise..................................................................................................................... 139 Review Questions.................................................................................................................... 140 Summary ................................................................................................................................. 141 Chapter 15 - Page Layout and Design Considerations ...................... 142 Technical Design Considerations ............................................................................................ 143 Screen Resolution ............................................................................................................................................... 143 Color Depth ......................................................................................................................................................... 143 Document Size vs. Download Time ..................................................................................................................... 144 Page Loading – HTTP 1.0 vs. HTTP 1.1.............................................................................................................. 145 Browser Compatibility & Quirks............................................................................................................................ 145 Page layout.............................................................................................................................. 146 Page Layout Guidelines....................................................................................................................................... 146 Site Design Factors and Criteria.............................................................................................. 148 Site Layout and Navigation...................................................................................................... 148 Review Questions.................................................................................................................... 149 Summary ................................................................................................................................. 150 Chapter 16 - Cascading Style Sheets .................................................... 151 Introduction to Cascading Style Sheets .................................................................................. 152 Inline Styles ............................................................................................................................. 153 Embedded Style Sheets .......................................................................................................... 154 Linked Style sheets ................................................................................................................. 156 Classes ............................................................................................................................................................... 157 IDs....................................................................................................................................................................... 158 DIV and SPAN ......................................................................................................................... 159 Cascading and Inheritance...................................................................................................... 160 Exercise – Inline Styles ........................................................................................................... 162 Exercise – Embedded Styles................................................................................................... 163 Exercise – Linking in a Cascading Style Sheet ....................................................................... 164 Exercise – Editing a Cascading Style Sheet ........................................................................... 165 Review Questions.................................................................................................................... 166 Summary ................................................................................................................................. 167 iv OLM World Class Web Hosting E-commerce and Custom Internet Solutions hosting.olm.net
1 HTML Introduction In this chapter you will be introduced to the concepts of linear media and hypermedia. You will learn about HTML and the basics of document structure. Objectives Upon completing this section, you should be able to 1. Explain hypermedia vs. linear media 2. Define HTML 3. Describe the Basic Document Structure 4. Identify the sub-elements of the header HoTMetaL PRO 6.0 the ultimate web development tool www.hotmetalpro.com 1
Linear Media Linear media is a term used to describe any media where there is a defined beginning and a linear progression to the end. Forms of linear media such as movies, audio and videotapes, and most books are organized with this expectation. The World Wide Web, however, is organized very differently. Hypermedia Hypermedia is where the user simply selects the next item of interest and is immediately transported to that new location. A good example is an audio CD where you can choose song 5 and listen to it almost immediately. Contrast this with an audiotape where you would have to scan through from your current location on the tape to the beginning of the song. When this concept is applied to text you get hypertext, where by {Clicking} on a link or hotspot (hyperlink) you are immediately transported to a new location within the same page or to a new page altogether. When you interlink a large number of pages of text on different computers all over the world, you get a spider web-like system of links and pages. This is known as the World Wide Web – a system whereby pages stored on many different web servers, connected to the Internet, are linked together. The system is useful because all of the pages are created in the same format. This format or “language” is called HTML, (Hypertext Markup Language) a subset of an international standard for electronic document exchanged called SGML (Standard Generalized Markup Language). In this class you will be introduced to the format of an HTML page, you will learn about the components that make up HTML, and how to create pages that can be published on the World Wide Web. 2 OLM World Class Web Hosting E-commerce and Custom Internet Solutions hosting.olm.net
What is HTML Markup? HTML is a set of logical codes (markup) in parentheses that constitute the appearance of a web document and the information it contains. E.g. This text would appear bold in the browser The codes are enclosed by less than “” brackets. These bracketed codes of the markup are commonly referred to as tags. HTML codes are always enclosed between brackets and are not case- sensitive; meaning, it does not matter whether you type them in upper case or lower case. However, tags are easier to recognize in a web document if they are capitalized. Most elements have an opening element (tag) and a closing element (tag) distinguished by the “/” inside the “
Document Structure The way a document is marked up with elements and their attributes is according to a Document Type Definition (DTD). These are the rules that govern the way in which a document can be marked up. The authoritative source for information about HTML and the HTML DTD is the World Wide Web Consortium (W3C) at http://www.w3.org. The World Wide Web Consortium is a not-for-profit organization that coordinates the evolution of the Web. It includes the Internet Engineering Task Force, the group of people who make recommendations for new markup. A Basic Document An element called HTML surrounds the whole document. This element contains two sub-elements, HEAD and BODY. These elements are required to form any HTML document. 4 OLM World Class Web Hosting E-commerce and Custom Internet Solutions hosting.olm.net
has sub-elements that define header material: document title. The title of your document is what appears in a web browser’s Favorite or Bookmark list. Your document’s title should be as descriptive as possible. Search engines on the Internet use the document’s title for indexing purposes. can be used to record the document's location in the form of a URL. The URL recorded here may be used to resolve a relative URL (necessary if the document is not accessed in its original location). indicates to the browser that the document is an index document. This is used only if the document is on a server that does indexing. indicates a relationship between this document and some other object on the Web. provides information such as the page’s keywords and description that appears in HTTP headers. contains either JAVA Script or VB Script contains information used by cascading style sheets the remaining HTML elements are contained within these tags. Note: a framed document is formatted differently than a basic document and is discussed in the advanced section of this course. HoTMetaL PRO 6.0 the ultimate web development tool www.hotmetalpro.com 5
Review Questions 1. What does HTML stand for? 2. What is an Element? 3. What are the Attributes of an Element? 4. What are the three basic elements of an HTML document? 5. What are the elements that can be contained in the header of the document? 6 OLM World Class Web Hosting E-commerce and Custom Internet Solutions hosting.olm.net
Summary As a result of this chapter, you should be able to • Explain hypermedia vs. linear media • Define HTML • Describe the Basic Document Structure • Identify the sub-elements of the header HoTMetaL PRO 6.0 the ultimate web development tool www.hotmetalpro.com 7
2 HTML Page Creation & Editing In this chapter you will learn to create HTML pages with a standard text editor. Objectives Upon completing this section, you should be able to 1. Choose a Text Editor. 2. Create a Basic Starting Document. 3. Understand and Set Document Properties. 4. View Your Results in a Browser. 8 OLM World Class Web Hosting E-commerce and Custom Internet Solutions hosting.olm.net
Choosing a Text Editor There are many different programs that you can use to create web documents. Text editors are basic word processing programs without all of the “bells and whistles” of full-blown word processors. The advantage of using a text editor is that the files are created and saved with few if any invisible formatting codes, which could drastically effect your document when, saved as a web page and displayed in a browser. For this reason, text editors can be used quite effectively to create web documents. HTML Editors enable users to create documents quickly and easily by pushing a few buttons. Instead of entering all of the HTML codes by hand, these programs will generate the HTML ‘source code’ for you. HTML Editors are excellent tools for experienced web developers; however, it is important that you learn and understand the HTML language so that you can edit code and fix ‘bugs’ in your pages. The current versions of both Microsoft Word and Corel WordPerfect also have the abilities to create web pages. For this course, we will focus on using the standard Microsoft Windows text editor, NotePad. You can apply the same concepts using any text editor on any platform. Starting NotePad NotePad is the standard text editor that comes with both 16 and 32-bit versions of the Microsoft Windows operating system. To start NotePad in Windows 95 follow the steps below: 1. Click on the “Start” button located on your Windows task bar. 2. Click on “Programs” and then click on the directory menu labeled “Accessories”. 3. Locate the shortcut called “NotePad” and click the shortcut once. HoTMetaL PRO 6.0 the ultimate web development tool www.hotmetalpro.com 9
Creating a Basic Starting Document As stated in Chapter One, there are certain elements that are required in a web document’s structure. The easiest way to create and develop a document is to type the required elements in as a starting point. This way you can add to your document by inserting elements and adding content between the starting and ending tags of existing elements and you won’t have to try to remember if you have typed in the closing tag or not. In NotePad you would start with: At this point your page has a HEAD and a BODY section inside the HTML tags. You also have a TITLE element, inside the HEAD element, which you should fill in. The text in the TITLE element is used by the surfer’s browser and also by search engines. The TITLE of your document appears in the very top line of the user’s browser. If the user chooses to “Bookmark” your page or save as a “Favorite”; it is the TITLE that is added to the list. The text in your TITLE should be as descriptive as possible because this is what many search engines, on the Internet, use for indexing your site. The following is an example of a document title: XtraNet University: HTML, JavaScript, Netscape, Microsoft and SoftQuad Training 10 OLM World Class Web Hosting E-commerce and Custom Internet Solutions hosting.olm.net
Setting Document Properties Document properties are controlled by attributes of the BODY element. For example, there are color settings for the background color of the page, the document’s text and different states of links. Color Codes Colors are set using “RGB” color codes, which are, represented as hexadecimal values. Each 2-digit section of the code represents the amount, in sequence, of red, green or blue that forms the color. For example, an RGB value with 00 as the first two digits has no red in the color. See the chart below for a listing of some of the commonly used colors: RGB Color Hexadecimal Value White #FFFFFF Black #000000 Red #FF0000 Green #00FF00 Blue #0000FF Magenta #FF00FF Cyan #00FFFF Yellow #FFFF00 Aquamarine #70DB93 Baker's Chocolate #5C3317 Violet #9F5F9F Brass #B5A642 Copper #B87333 Pink #FF6EC7 Orange #FF7F00 There are several resources available on the Internet that chart colors and their hexadecimal values. If you require more information about color values, there is an excellent site entitled “VGDesign’s Interactive Color Cube” that displays the background color code when you put your cursor over a small color sample. The web address is: http://www.vgdesign.com/color.html HoTMetaL PRO 6.0 the ultimate web development tool www.hotmetalpro.com 11
The BODY Element The BODY Element of a web page is an important element in regards to the page’s appearance. This element contains information about the page’s background color, the background image, as well as the text and link colors. If the BODY Element is left blank, web browsers will revert to their default colors. In older browsers, if the BODY element is left blank, the page’s background color will be a light gray. The newer browsers, IE 4+ and Netscape 4+, default to using the client’s Windows colors settings. It is very common to see web pages with their background color set to white or some other color. To set your document’s background color, you need to edit the element by adding the BGCOLOR attribute. The following example would display a document with a white background color: TEXT Color The TEXT attribute is used to control the color of all the normal text in the document. This will affect all of the text within the document that is not being colored by some other element, such as a link. The default color for text is black. The TEXT attribute would be added as follows: In this example, the document’s page color is white and the text would be red. As suggested earlier, it is important to ensure that your document’s text is a color that will stand out from your background color. 12 OLM World Class Web Hosting E-commerce and Custom Internet Solutions hosting.olm.net
LINK, VLINK, and ALINK These attributes control the colors of the different link states: • LINK - initial appearance – default = Blue • VLINK - visited link – default = Purple • ALINK - active link being clicked – default = Red Many web developers will set the link colors of their documents to flow with the color scheme of the site. The format for setting these attributes is: The results of the above BODY element would be a white background with links being blue, visited links as magenta and active links colored in yellow. Using Image Backgrounds The BODY element also gives you the ability of setting an image as the document’s background. Background images are “tiled” in the web browser; which means that they are replicated and positioned below and beside each other until the browser screen is filled. To create a professional look, images must be ‘seamless’. Meaning that when the copies are placed below and beside each other the seams are invisible. Using background images can be very effective if used properly. For instance, you may want your company’s logo as your background or you could also create a border background so that it appears as though your page is divided into two columns. A background image must be either in the form of a .gif or .jpg file. There will be more information on image files provided in Chapter 6. An example of a background image’s HTML code is as follows: In this example, we have set the document’s background image to ‘logo.gif’. We have also added the BGCOLOR attribute as well so that the browser window will have a white background during the process of loading the background image. HoTMetaL PRO 6.0 the ultimate web development tool www.hotmetalpro.com 13