HTML Concepts and Techniques Fourth Edition Project 3
- Slides: 63
HTML Concepts and Techniques Fourth Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text
Project Objectives • Describe linking terms and definitions • Create a home page and enhance a Web page using images • Use absolute and relative paths • Align and add bold, italics, and color to text • Change the bullet type used in an unordered list Project 3: Creating Web Pages with Links, Images, and Formatted Text 2
Project Objectives • Add a background image • Add a text link to a Web page in the same Web site • Add an e-mail link • View the HTML file and test the links • Open an HTML file Project 3: Creating Web Pages with Links, Images, and Formatted Text 3
Project Objectives • Add an image with wrapped text • Add a text link to a Web page on another Web site • Add links to targets within a Web page • Copy and paste HTML code • Add an image link to a Web page in the same Web site Project 3: Creating Web Pages with Links, Images, and Formatted Text 4
Starting Notepad • Click the Start button on the taskbar and then point to All Programs on the Start menu • Point to Accessories on the All Programs submenu, and then click Notepad on the Accessories submenu • If the Notepad window is not maximized, click the Maximize button on the Notepad title bar to maximize it • Click Format on the menu bar • If Word Wrap is not checked, click Word Wrap Project 3: Creating Web Pages with Links, Images, and Formatted Text 5
Entering HTML Tags to Define the Web Page Structure Project 3: Creating Web Pages with Links, Images, and Formatted Text 6
Adding an Image • Type <img src="plantworldlg. jpg“ width="720“ height="84“ alt="Plant World logo" /> and then press the ENTER key Project 3: Creating Web Pages with Links, Images, and Formatted Text 7
Adding an Image Project 3: Creating Web Pages with Links, Images, and Formatted Text 8
Adding a Left-Aligned Heading with a Font Color • With the insertion point on line 11, type <h 1><font color="#000066">Welcome to Plant World!</font></h 1> and then press the ENTER key Project 3: Creating Web Pages with Links, Images, and Formatted Text 9
Adding a Left-Aligned Heading with a Font Color Project 3: Creating Web Pages with Links, Images, and Formatted Text 10
Entering a Paragraph of Text • With the insertion point on line 12, type <p>For the finest in indoor and outdoor plants, come to Plant World! Plant World is the premier nursery for all of your planting needs. Our professional landscape design artists can visit your home and make recommendations for plants to use in your home or your yard. </p> as the first paragraph in the HTML file • Press the ENTER key twice Project 3: Creating Web Pages with Links, Images, and Formatted Text 11
Entering a Paragraph of Text Project 3: Creating Web Pages with Links, Images, and Formatted Text 12
Creating Unordered (Bulleted) Lists • If necessary, click line 16 • Enter the HTML code shown in Table 3 -3 on page HTM 85 • Press the ENTER key twice to insert a blank line on line 29, after the second </ul> in the HTML code Project 3: Creating Web Pages with Links, Images, and Formatted Text 13
Creating Unordered (Bulleted) Lists Project 3: Creating Web Pages with Links, Images, and Formatted Text 14
Adding a Background Image • Click immediately to the right of the y in the <body> tag on line 9 and then press the SPACEBAR • Type background=“greyback. jpg” as the attribute Project 3: Creating Web Pages with Links, Images, and Formatted Text 15
Adding a Background Image Project 3: Creating Web Pages with Links, Images, and Formatted Text 16
Adding a Text Link to Another Web Page within the Same Web Site • Click immediately to the right of the </ul> tag on line 28 and then press the DOWN ARROW key twice • With the insertion point on line 30, type <p>To learn more about the Plant World products and services, please browse the Plant World Web site You can find information on all types of plants, both for indoor and outdoor use. You also can learn about this month's featured desert plants, which have a natural beauty that can enhance any Southwest landscape!</p> and then press the ENTER key • Click immediately to the left of the d in desert on line 32 • Type <a href="desertplants. htm"> to start the link • Click immediately to the right of the s in plants on line 33. Type </a> to close the link Project 3: Creating Web Pages with Links, Images, and Formatted Text 17
Adding a Text Link to Another Web Page within the Same Web Site Project 3: Creating Web Pages with Links, Images, and Formatted Text 18
Adding an E-Mail Link • With the insertion point on line 34, type <p>Have a question or comment? Call us at (206) 555 PLANT or e-mail us at plantworld@isp. com. </p> as a new paragraph of text. Click immediately before the p in plantworld on line 34. Type <a href="mailto: plantworld@isp. com"> to start the e-mail link • Click immediately after the m in com in the e-mail address text. Type </a> to end the e-mail link Project 3: Creating Web Pages with Links, Images, and Formatted Text 19
Adding an E-Mail Link Project 3: Creating Web Pages with Links, Images, and Formatted Text 20
Saving and Printing an HTML File • With a USB drive plugged into your computer, click File on the menu bar and then click Save As. Type plantworld. htm in the File name text box • If necessary, click USB (G: ) in the Save in list. Click the Project 03 folder and then click the Project. Files folder in the list of available folders. Click the Save button in the Save As dialog box • Click File on the menu bar, and then click Print on the File menu Project 3: Creating Web Pages with Links, Images, and Formatted Text 21
Viewing a Web Page • Click the Start button on the Windows taskbar and then point to All Programs on the Start menu. Click Internet Explorer (or another browser command) on the All Programs submenu • If necessary, click the Maximize button to maximize the browser window. • When the browser window appears, click the Address bar • Type g: Project 03Project. Filesplantworld. htm in the Address text box • Press the ENTER key Project 3: Creating Web Pages with Links, Images, and Formatted Text 22
Viewing a Web Page Project 3: Creating Web Pages with Links, Images, and Formatted Text 23
Testing Links in a Web Page • Point to the e-mail link, plantworld@isp. com • Click the Close button in the New Message window • With the USB drive in drive G, point to the link desert plants • Click desert plants Project 3: Creating Web Pages with Links, Images, and Formatted Text 24
Testing Links in a Web Page Project 3: Creating Web Pages with Links, Images, and Formatted Text 25
Opening an HTML File • Click the Notepad button on the taskbar • With the USB drive plugged into your computer, click File on the menu bar, and then click Open on the File menu • If necessary, click the Look in box arrow, and then click USB drive (G: ). Click the Project 03 folder, and then click the Project. Files folder in the list of available folders • If necessary, click the Files of type box arrow, and then click All Files. Click desertplants. htm in the list of files • Click the Open button in the Open dialog box Project 3: Creating Web Pages with Links, Images, and Formatted Text 26
Opening an HTML File Project 3: Creating Web Pages with Links, Images, and Formatted Text 27
Formatting Text in Bold • Click immediately to the left of the B in Botanical on line 32. Type <b> as the start tag • Click immediately to the right of the colon (: ) in Botanical name: on line 32, and then type </b> as the end tag • Repeat the first two steps to bold the other three occurrences of the phrase, Botanical name: , on lines 45, 57, and 69 Project 3: Creating Web Pages with Links, Images, and Formatted Text 28
Formatting Text in Bold Project 3: Creating Web Pages with Links, Images, and Formatted Text 29
Formatting Text in Italics • Click immediately to the right of the </b> on line 32. Type <em> as the start tag • Click immediately to the right of the at the end of Agavaceae on line 32. Type </em> as the end tag • Repeat the first two steps to italicize the other botanical names on lines 45, 57, and 69 Project 3: Creating Web Pages with Links, Images, and Formatted Text 30
Formatting Text in Italics Project 3: Creating Web Pages with Links, Images, and Formatted Text 31
Formatting Text with a Font Color • Click immediately to the left of the word, DESERT, on line 11. Type <font color="#000099"> as the start tag • Click immediately to the right of the word, PLANTS, on line 11. Type </font> as the end tag Project 3: Creating Web Pages with Links, Images, and Formatted Text 32
Formatting Text with a Font Color Project 3: Creating Web Pages with Links, Images, and Formatted Text 33
Adding an Image with Wrapped Text • Highlight the words <!--Insert Agave image here --> on line 31 • Type <img src="agave. jpg“ align="right" alt="Agave" width="212“ height="203" /> and do not press the ENTER key • Highlight the words <!--Insert Desert Spoon image here -> on line 44 • Type <img src=“desertspoon. jpg" align=“left" alt=“Desert Spoon“ width="245" height="198" /> to insert a left-aligned image with wrapped text Project 3: Creating Web Pages with Links, Images, and Formatted Text 34
Adding an Image with Wrapped Text • Highlight the words <!--Insert Golden Barrel image here -> on line 56 • Type <img src="goldenbarrel. jpg" align="right" alt= "Golden Barrel“ width="292" height="197" /> to insert a rightaligned image with wrapped text • Highlight the words <!– Insert Prickly Pear image here --> on line 68 • Type <img src= "pricklypear. jpg“ align="left“ alt= "Prickly Pear" width="250“ height="255" /> to insert a leftaligned image with wrapped text Project 3: Creating Web Pages with Links, Images, and Formatted Text 35
Adding an Image with Wrapped Text Project 3: Creating Web Pages with Links, Images, and Formatted Text 36
Clearing the Text Wrapping • Highlight the words <!--Insert right break clear here --> on line 41 and then type <br clear="right" /> as the tag • Highlight the words <!--Insert right break clear here --> on line 65 and then type <br clear="right" /> as the tag • Highlight the words • <!--Insert left break clear here --> on line 53 and then type <br clear="left" /> as the tag • Highlight the words <!--Insert left break clear here --> on line 77 and then type <br clear="left" /> as the tag Project 3: Creating Web Pages with Links, Images, and Formatted Text 37
Clearing the Text Wrapping Project 3: Creating Web Pages with Links, Images, and Formatted Text 38
Adding a Text Link to a Web Page in Another Web Site • Click immediately to the left of Arizona on line 80 and type <a href="http: //www. desertmuseum. org"> to add the text link • Click immediately to the right of Museum on line 81 and type </a> to end the tag Project 3: Creating Web Pages with Links, Images, and Formatted Text 39
Adding a Text Link to a Web Page in Another Web Site Project 3: Creating Web Pages with Links, Images, and Formatted Text 40
Setting Link Targets • Click immediately to the left of the <font> tag on line 30 • Type <a name="agaveamericana"></a> to create a link target named agaveamericana • Click immediately to the left of the <font> tag on line 43 • Type <a name="desertspoon"></a> to create a link target named desertspoon Project 3: Creating Web Pages with Links, Images, and Formatted Text 41
Setting Link Targets • Click immediately to the left of the <font> tag on line 55 • Type <a name="goldenbarrel"></a> to create a link target named goldenbarrel • Click immediately to the left of the <font> tag on line 67 • Type <a name="pricklypear"></a> to create a link target named pricklypear Project 3: Creating Web Pages with Links, Images, and Formatted Text 42
Setting Link Targets Project 3: Creating Web Pages with Links, Images, and Formatted Text 43
Adding Links to Link Targets within a Web Page • Highlight the words <!--Start unordered list here --> on line 28 • Type <ul type="square"> and then press the ENTER key • Type <li><a href="#agaveamericana"> Agave Americana </a></li> and then press the ENTER key • Type <li><a href="#desertspoon"> Desert Spoon</a></li> and then press the ENTER key Project 3: Creating Web Pages with Links, Images, and Formatted Text 44
Adding Links to Link Targets within a Web Page • Type <li><a href= "#goldenbarrel">Golden Barrel</a></li> and then press the ENTER key • Type <li><a href="#pricklypear"> Prickly Pear</a></li> and then press the ENTER key • Type </ul> and then press the ENTER key Project 3: Creating Web Pages with Links, Images, and Formatted Text 45
Adding Links to Link Targets within a Web Page Project 3: Creating Web Pages with Links, Images, and Formatted Text 46
Adding Links to a Target at the Top of the Page • Click to the left of the > symbol on line 9, and then press the ENTER key • Position the insertion point on line 10 and type <a name="top"></a> as the tag • Position the insertion point on the blank line 48 and then type <p><a href="#top"><font size=-1>To top</font> </a></p> as the tag • Press the ENTER key Project 3: Creating Web Pages with Links, Images, and Formatted Text 47
Adding Links to a Target at the Top of the Page Project 3: Creating Web Pages with Links, Images, and Formatted Text 48
Copying and Pasting HTML Code • Highlight the HTML code, <p><a href="#top"><font size= -1> To top </font> </a></p>, on line 48 • Click Edit on the menu bar and then click Copy • Position the insertion point on line 61 Project 3: Creating Web Pages with Links, Images, and Formatted Text 49
Copying and Pasting HTML Code • Click Edit on the menu bar and then click Paste • Press the ENTER key • Repeat the second step on the previous slide to paste the HTML code on lines 74 and 88 Project 3: Creating Web Pages with Links, Images, and Formatted Text 50
Copying and Pasting HTML Code Project 3: Creating Web Pages with Links, Images, and Formatted Text 51
Adding an Image Link to a Web Page • Click immediately to the left of <img on line 11 • Type <a href="plantworld. htm"> as the tag and then press the ENTER key • Click immediately to the right of alt=“ “ /> on line 12 Project 3: Creating Web Pages with Links, Images, and Formatted Text 52
Adding an Image Link to a Web Page • Type </a> as the tag • Click immediately to the left of alt=“ “ /> on line 12 • Type border=“ 0” and then press the SPACEBAR Project 3: Creating Web Pages with Links, Images, and Formatted Text 53
Adding an Image Link to a Web Page Project 3: Creating Web Pages with Links, Images, and Formatted Text 54
Saving and Printing the HTML File • Save the HTML file by clicking File on the menu bar, and then clicking Save on the File menu • Click File on the menu bar, and then click Print on the File menu Project 3: Creating Web Pages with Links, Images, and Formatted Text 55
Saving and Printing the HTML File Project 3: Creating Web Pages with Links, Images, and Formatted Text 56
Viewing and Testing a Web Page • Click the Desert Plants button on the taskbar to view the page in your browser • Click the Refresh button on the Standard toolbar Project 3: Creating Web Pages with Links, Images, and Formatted Text 57
Printing a Web Page • Click the Print button on the Standard toolbar Project 3: Creating Web Pages with Links, Images, and Formatted Text 58
Quitting Notepad and a Browser • Click the Close button on the browser title bar • Click the Close button on the Notepad window title bar Project 3: Creating Web Pages with Links, Images, and Formatted Text 59
Project Summary • Describe linking terms and definitions • Create a home page and enhance a Web page using images • Use absolute and relative paths • Align and add bold, italics, and color to text • Change the bullet type used in an unordered list Project 3: Creating Web Pages with Links, Images, and Formatted Text 60
Project Summary • Add a background image • Add a text link to a Web page in the same Web site • Add an e-mail link • View the HTML file and test the links • Open an HTML file Project 3: Creating Web Pages with Links, Images, and Formatted Text 61
Project Summary • Add an image with wrapped text • Add a text link to a Web page on another Web site • Add links to targets within a Web page • Copy and paste HTML code • Add an image link to a Web page in the same Web site Project 3: Creating Web Pages with Links, Images, and Formatted Text 62
HTML Concepts and Techniques Fourth Edition Project 3 Complete Creating Web Pages with Links, Images, and Formatted Text
- Project 2 fourth edition
- Vertical line html
- Expert systems: principles and programming, fourth edition
- Pathways algebra 2
- Ethics in information technology fourth edition
- Ethics in information technology 6th edition answers
- Discrete math susanna epp
- Fourth generation techniques
- Geography: realms, regions, and concepts (doc or html) file
- Human genetics concepts and applications 10th edition
- Kariogram človeka
- Doctype html html head
- код страницы html
- Head body html
- Doctype html html head
- 1
- Data mining concepts and techniques slides
- Data mining concepts and techniques
- Concepts, techniques and models of computer programming
- Data mining concepts and techniques slides
- Data mining concepts and techniques slides
- Operating system
- Operating system concepts 6th edition
- Database system concepts seventh edition
- Mis chapter 6
- Report
- Fonction technique scooter
- Html project
- 3rd or 4th generation cephalosporin
- Third and fourth generation cephalosporins
- Fourth party logistics advantages and disadvantages
- First generation computer
- Fourth and fifth commandment
- Multivalued dependencies and fourth normal form
- Third and fourth pharyngeal pouches
- Project management techniques pert and cpm
- Acquire project team
- Project monitoring and control
- Quality control tools and techniques
- Information technology project management 9th edition
- Information technology project management 9th edition ppt
- Project management quality control
- Project management chapter 6
- Information technology project management 9th edition
- The fourth pillar of islam
- Step of nursing process
- Seventh circle of hell
- Fourth dimension immigration
- фанфик newton's fourth law
- Narasimha avatar
- Hamlets fourth soliloquy
- Fourth shift erp software
- 4th creed paragraph
- Juan asensio md
- What is the fourth step of the scientific method
- First generation cephalosporin
- Jazz dance positions 1-5
- Second party system apush
- Parts of small bowel
- Canto 7 inferno parafrasi
- Beta lactam ring
- Example of fourth generation programming language
- Fry's fifth 100 words
- Triple derivative