This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
It is <EM>very important to carefully proofread your <STRONG>HTML code.
to format text. • You can nest tags within one another. • While most tags are used in pairs, some tags are empty tags. • The World Wide Web Consortium (W3C) provides specifications for HTML.
3. Explain how to view the source code of a Web page in Dreamweaver.
Apply It! Write HTML Code Write the HTML code to display the following sentence in a Web browser. Be sure your code formats the sentence as shown: HTML code allows information to be displayed in a Web browser.
SECTION 4.2 USING A TEXT EDITOR Focus on Reading Read to Find Out This section discusses how to use a text editor to create a Web site. Read to find out how Web designers use HTML tags to format text and create lists on Web pages.
You can use a text editor to create text documents that can be displayed in a Web browser. These documents must contain HTML commands. Always organize your folders and files carefully when creating a Web site.
file name extension attribute ordered list unordered list
Compare and contrast ordered and unordered lists. Use a Venn diagram like the one below (also available online). Ordered List
In this section, you will use the text editor Microsoft Notepad to create an HTML document. (Notepad is part of the Microsoft Windows OS) Structure It is good practice to create a folder for your Web site before you define the site. You can then create subfolders for the site’s images and pages within this main folder.
Organizing Files and Folders Why is it important to organize a Web site’s files?
Every Web site is composed of folders and files. When you define a new Web site in Dreamweaver, the program can automatically create a folder for you if one does not exist. When you use a text editor, you must manually create all of the folders that will hold your Web site’s components. It is essential that you keep your Web site’s files organized. When you add graphics and create hyperlinks in an HTML document, you must include instructions that tell the Web browser which file to access and where to find it. Having well-organized files makes it easier to add this information to your HTML document.
ACTIVITY 4A Create Folders to Organize a Site 1 Identify the location where you are storing your Web sites. Ask your teacher for help if needed. 2 In your general folder, create a new root folder named MySkills1. 3 In the MySkills1 folder, create a folder named images. You will store the images for the MySkills1 Web site in this folder. 4 Locate the DataFiles\Ch04\Images folder. Copy the data file p_border.gif into the images folder you just created.
Describe What do you store in a Web site’s images folder? 102
Using Notepad What are the three main parts of an HTML document?
Using Notepad is like using a word processing application. However, unlike word processors, Notepad does not contain toolbars and other features.
Creating an HTML Document in Notepad An HTML document has three main parts: the Document Type Definition (DTD), the header, and the body. These three parts are shown in Figure 4.3. Document Type Definition (DTD)
Figure 4.3 Most HTML documents have a basic structure similar to the one shown here. What is the function of the tag?
A DTD specifies what version of HTML is used in your page. The tag tells the browser to interpret every tag as HTML code until it reaches the tag. The tag set, or header, provides information to the browser about your page, such as its title and author. This information is used to catalog the page and does not appear in the browser. The page’s title is displayed in the browser’s title bar, and not on the Web page itself. The tag set encloses the code for the content you see displayed in the browser’s window. Most HTML documents only contain one header tag set, and one body tag set.
Saving an HTML Document in Notepad There are some guidelines you should follow when naming and saving your Web site’s files.
Naming Files Keep your file names descriptive but relatively short. Use the underscore character to indicate a blank space between words in a file name. For example, name a file contact_us.html, rather than contact us.html. It is also a good idea to use only lowercase letters when naming files. Choosing File Extensions A file name extension tells the computer what type of file it is reading. Notepad automatically saves all files as text files with the extension .txt. Since Web browsers cannot read this extension, you must change it to an .html extension when you save an HTML document.
You Should Know While you can also save an HTML file with an .htm extension, it is recommended that you use .html instead. This is because some older computers will not recognize .htm, while .html is recognized by almost every server operating system.
ACTIVITY 4B Create and Save an HTML Document 1 From the Start menu, select All Programs (or Programs)> Accessories>Notepad. 2 In Notepad, key the text shown in Figure 4.4. Leave blank lines as indicated so you can add more HTML code later. 3 Choose File>Save. In the Save As dialog box, browse to the MySkills1 folder and open it.
Figure 4.4 These tags form the basic structure of an HTML document.
4 In the File name box, key: skills1.html. Click the Save as type dropdown arrow and select All Files (this allows you to save an .html file in Notepad). Your dialog box should look like Figure 4.5. Click the Save button to save your file.
The file will be stored in the MySkills1 folder.
Figure 4.5 Always verify that you are saving the file to the correct folder and as the correct type of file.
The file extension must be .html or .htm.
Identify What is the function of a DTD?
Adding Attributes Using HTML How can attributes enhance a Web page? Shortcut To enter a left angle bracket (), press Shift + the period key.
Some HTML tags can contain properties, or attributes. An attribute is an instruction that further specifies a tag’s characteristics. Attributes allow you to assign colors, styles, and alignment to a page. You place attributes in opening tags. The attribute has a name, an equal sign (=), and a descriptor that must appear in quotes to conform to HTML specifications. The attribute must also be lowercase to meet specifications.
Font Color Attributes In HTML, you use the attribute color to change the text’s color. The descriptor then specifies which color to use. In the following example, the attribute color=“green” will make the word grass appear green in a Web browser. When viewed in a browser, the code will look like Figure 4.6.
They say the grass is greener over there.
<STRONG>Here are some additional links on Web design and related topics:. 4 Press Enter. Insert this link: World Wide Web Consortium
to format text. You can nest tags within one another. While most tags, such as and , are used in pairs, some tags, such as
and , are empty tags. The World Wide Web Consortium provides specifications for various Web-based technologies, including HTML.
Main Ideas ■ The tag inserts a graphic into a page. The
■ ■ ■
SECTION 4.2 Using a Text Editor
src attribute specifies the graphic’s file location, and alt provides an alternative text message to display. The tag inserts a link. The href attribute specifies the location (or object) being linked to. A link’s anchor can be either text or an image. An absolute link lists the complete URL or path of the linked file. A relative link is used with local files and contains only a partial URL or folder location. You must test a newly created Web page in several browsers to make certain it displays properly and all of its links work correctly.
Key Terms file name extension, 103 attribute, 104
ordered list, 106 unordered list, 106
SECTION 4.4 Dreamweaver Versus Notepad
■ When creating a Web site, organize its files and
color palette, 116
folders so that you can easily locate various page components. You must save a Web page file with an .html or .htm extension so that browsers can identify it as an HTML document. Attributes within HTML tags specify characteristics such as background and font color and font size. Ordered (or numbered) lists contain sequential items, while unordered (or bulleted) lists contain items that can appear in any order. To view the Web page you created in a text editor, you must open it in a Web browser.
Main Ideas ■ A Web page that was created using Notepad can ■ ■ ■ ■
also be created using Dreamweaver. Because Dreamweaver provides a WYSIWYG editor, you do not need to enter HTML tags. You can apply styles to text, such as font color and font size, to change its appearance. You can insert graphics and links by entering the Web page or file location into a dialog box. Careful proofreading and testing are a vital part of creating a Web page.
Review and Assessment
AFTER YOU READ Exchange Memory Tools Work with three other students to create a poster or handout that illustrates or explains four of the most helpful memory aides developed by the group. These memory aides will help the group to remember important steps or concepts. Ask your teacher for permission to display the posters in the classroom.
Reviewing Key Terms 1. Which of the following is NOT an HTML tag: a. b.
<STRONG>Width 100 x Height 200
|Width 350 x Height 200|
| tag, the align attribute defines how the contents of one particular table cell will align. If the align attribute is not present, the default alignment for tables and table cells is left.|
Figure 16.5 Using the align attribute in the