1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.
-
Upload
everett-anderson -
Category
Documents
-
view
217 -
download
0
Transcript of 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.
![Page 1: 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.](https://reader034.fdocuments.in/reader034/viewer/2022051401/56649ed95503460f94be7640/html5/thumbnails/1.jpg)
1
Creating a Second Web PageCreating a Second Web Page
• This section shows you how to create the Huntington Beach Web site
![Page 2: 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.](https://reader034.fdocuments.in/reader034/viewer/2022051401/56649ed95503460f94be7640/html5/thumbnails/2.jpg)
2
Copying a Table to a New File
Copying a Table to a New File
• Click the Surf’s Up Home Page button on the taskbar to minimize the browser
• Click immediately to the left of the < in the <HTML> tag on line 1. Drag through the end of the <BODY> tag on line 5
• Press CTRL+C to copy the selected lines
• Select New from the File menu
• Press CTRL+V to paste the contents from the Clipboard into a new file
![Page 3: 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.](https://reader034.fdocuments.in/reader034/viewer/2022051401/56649ed95503460f94be7640/html5/thumbnails/3.jpg)
3
Copying a Table to a New File
Copying a Table to a New File
pasted tags and text
![Page 4: 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.](https://reader034.fdocuments.in/reader034/viewer/2022051401/56649ed95503460f94be7640/html5/thumbnails/4.jpg)
4
Changing the TitleChanging the Title
• Highlight the words, Home Page, between the <TITLE> and </TITLE> tags on line 3. Type Huntington Beach as the text
• Click immediately to the right of the </TABLE> tag on line 5. Press the ENTER key twice
• Type the closing </BODY> and </HTML> tags
![Page 5: 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.](https://reader034.fdocuments.in/reader034/viewer/2022051401/56649ed95503460f94be7640/html5/thumbnails/5.jpg)
5
Changing the TitleChanging the Title
change to title
![Page 6: 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.](https://reader034.fdocuments.in/reader034/viewer/2022051401/56649ed95503460f94be7640/html5/thumbnails/6.jpg)
6
Inserting an ImageInserting an Image
• Create a table with two rows and two columns
• Insert the image in the first column of the first row
• This image is stored on the Public Folder
![Page 7: 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.](https://reader034.fdocuments.in/reader034/viewer/2022051401/56649ed95503460f94be7640/html5/thumbnails/7.jpg)
7
Inserting an ImageInserting an Image
• Enter the following HTML starting on line 7
![Page 8: 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.](https://reader034.fdocuments.in/reader034/viewer/2022051401/56649ed95503460f94be7640/html5/thumbnails/8.jpg)
8
Inserting an ImageInserting an Image
table andimage tags
![Page 9: 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.](https://reader034.fdocuments.in/reader034/viewer/2022051401/56649ed95503460f94be7640/html5/thumbnails/9.jpg)
9
Inserting the Heading and Paragraph
Inserting the Heading and Paragraph
• Enter the following HTML starting on line 14
![Page 10: 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.](https://reader034.fdocuments.in/reader034/viewer/2022051401/56649ed95503460f94be7640/html5/thumbnails/10.jpg)
10
Inserting the Heading and Paragraph
Inserting the Heading and Paragraph
heading and paragraph code
![Page 11: 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.](https://reader034.fdocuments.in/reader034/viewer/2022051401/56649ed95503460f94be7640/html5/thumbnails/11.jpg)
11
Creating a Link ListCreating a Link List
• It is important to include text links on every page with an image map for users who have images turned off
• Create this link list in the left hand column of the second row
![Page 12: 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.](https://reader034.fdocuments.in/reader034/viewer/2022051401/56649ed95503460f94be7640/html5/thumbnails/12.jpg)
12
Creating a Link ListCreating a Link List
• Enter the following HTML starting on line 26
![Page 13: 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.](https://reader034.fdocuments.in/reader034/viewer/2022051401/56649ed95503460f94be7640/html5/thumbnails/13.jpg)
13
Creating a Link ListCreating a Link List
link list
![Page 14: 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.](https://reader034.fdocuments.in/reader034/viewer/2022051401/56649ed95503460f94be7640/html5/thumbnails/14.jpg)
14
Inserting a ChartInserting a Chart
• Charts provide an excellent way to display sales information
• Insert this chart in the second column of the second row
• The chart is stored in the Web Design Folder on the public folder
![Page 15: 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.](https://reader034.fdocuments.in/reader034/viewer/2022051401/56649ed95503460f94be7640/html5/thumbnails/15.jpg)
15
Inserting a ChartInserting a Chart
• Enter the following HTML starting on line 34
![Page 16: 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.](https://reader034.fdocuments.in/reader034/viewer/2022051401/56649ed95503460f94be7640/html5/thumbnails/16.jpg)
16
Inserting a ChartInserting a Chart
HTML to displaychart image
![Page 17: 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.](https://reader034.fdocuments.in/reader034/viewer/2022051401/56649ed95503460f94be7640/html5/thumbnails/17.jpg)
17
Creating an E-Mail LinkCreating an E-Mail Link
• Enter the following HTML starting on line 40 to display the E-Mail link
![Page 18: 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.](https://reader034.fdocuments.in/reader034/viewer/2022051401/56649ed95503460f94be7640/html5/thumbnails/18.jpg)
18
Creating an E-Mail LinkCreating an E-Mail Link
e-mail link
![Page 19: 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.](https://reader034.fdocuments.in/reader034/viewer/2022051401/56649ed95503460f94be7640/html5/thumbnails/19.jpg)
19
Save and Print the HTML FileSave and Print the HTML File
• Select Save As from the File menu
• Type hnbch.htm in the File name text box, then click the Save button
• Select Print from the File menu
![Page 20: 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.](https://reader034.fdocuments.in/reader034/viewer/2022051401/56649ed95503460f94be7640/html5/thumbnails/20.jpg)
20
Save and Print the HTML FileSave and Print the HTML File
![Page 21: 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.](https://reader034.fdocuments.in/reader034/viewer/2022051401/56649ed95503460f94be7640/html5/thumbnails/21.jpg)
21
Close NotepadClose Notepad
• Click the Close button on the right-hand side of the title bar
![Page 22: 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.](https://reader034.fdocuments.in/reader034/viewer/2022051401/56649ed95503460f94be7640/html5/thumbnails/22.jpg)
22
Viewing the Web PageViewing the Web Page
• Click the Surf’s Up Home Page button on the taskbar to maximize your browser
• Click the Huntington Beach link from the image map on the Surf’s Up home page
![Page 23: 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.](https://reader034.fdocuments.in/reader034/viewer/2022051401/56649ed95503460f94be7640/html5/thumbnails/23.jpg)
23
Viewing the Web PageViewing the Web Page
images
![Page 24: 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.](https://reader034.fdocuments.in/reader034/viewer/2022051401/56649ed95503460f94be7640/html5/thumbnails/24.jpg)
24
Printing the Web PagePrinting the Web Page
• Click the Print button on the Standard Buttons toolbar
![Page 25: 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.](https://reader034.fdocuments.in/reader034/viewer/2022051401/56649ed95503460f94be7640/html5/thumbnails/25.jpg)
25
Testing the LinksTesting the Links
• Click the Home link on the Huntington Beach Web page
• Click the Ft. Lauderdale link on the home page• Click the Huntington Beach link on the Ft.
Lauderdale Web page• Click the Maui link on the Huntington Beach
Web page• If the links fail, edit the HTML code and retest
the links
![Page 26: 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.](https://reader034.fdocuments.in/reader034/viewer/2022051401/56649ed95503460f94be7640/html5/thumbnails/26.jpg)
26
Close your BrowserClose your Browser
• Click the Close button on the right-hand (PC) or left-hand(Mac) side of the title bar
![Page 27: 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.](https://reader034.fdocuments.in/reader034/viewer/2022051401/56649ed95503460f94be7640/html5/thumbnails/27.jpg)
27
Image Mapping SoftwareImage Mapping Software
• Several image mapping software tools generate the x- and y- coordinates based on the clickable areas that you select on the image
![Page 28: 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.](https://reader034.fdocuments.in/reader034/viewer/2022051401/56649ed95503460f94be7640/html5/thumbnails/28.jpg)
28
SummarySummary
• Define terms relating to image mapping
• List the differences between server-side and client-side image maps
• Name the two components of an image map
• Describe the steps to implement an image map
• Distinguish between appropriate and inappropriate images for mapping
![Page 29: 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.](https://reader034.fdocuments.in/reader034/viewer/2022051401/56649ed95503460f94be7640/html5/thumbnails/29.jpg)
29
SummarySummary
• Sketch hotspots on an image• Describe how x- and y- coordinates relate
to vertical and horizontal alignment• Open an image in Paint (Photoshop)• Use Paint (Photoshop) to map the
coordinates of an image• Use the <MAP></MAP> tags to begin and
end a map
![Page 30: 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.](https://reader034.fdocuments.in/reader034/viewer/2022051401/56649ed95503460f94be7640/html5/thumbnails/30.jpg)
30
SummarySummary
• Insert an image into a table and use the USEMAP attribute to define a map
• Use the <AREA> tag to indicate the shape, coordinates, and URL for a mapped area
• Change link colors
• Create a link list
• Insert a chart into a table on a Web page
![Page 31: 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.](https://reader034.fdocuments.in/reader034/viewer/2022051401/56649ed95503460f94be7640/html5/thumbnails/31.jpg)
31
What You Should KnowWhat You Should Know
![Page 32: 1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.](https://reader034.fdocuments.in/reader034/viewer/2022051401/56649ed95503460f94be7640/html5/thumbnails/32.jpg)
Project 4 CompleteProject 4 Complete