Project 3: Creating Web Pages with Links, Images, and Formatted Text 1 Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.

  • Published on
    16-Jan-2016

  • View
    212

  • Download
    0

Embed Size (px)

Transcript

<p>Project 3</p> <p>Project 3: Creating Web Pages with Links, Images, and Formatted Text1Chapter 3Creating Web Pages with Links, Images, and Formatted Text11Project 3: Creating Web Pages with Links, Images, and Formatted Text2Project ObjectivesDescribe linking terms and definitionsCreate a home page and enhance a Web page using imagesAlign and add bold, italics, and color to text Change the bullet type used in an unordered listAdd a text link to a Web page in the same Web site</p> <p>2Project 3: Creating Web Pages with Links, Images, and Formatted Text3Project ObjectivesAdd an e-mail linkUse absolute and relative pathsSave and view an HTML file and test the linksOpen an HTML fileAdd an image with wrapped text3Project 3: Creating Web Pages with Links, Images, and Formatted Text4Project ObjectivesAdd a text link to a Web page on another Web siteAdd links to targets within a Web pageCopy and paste HTML codeAdd an image link to a Web page in the same Web site4Project 3: Creating Web Pages with Links, Images, and Formatted Text5Plan AheadPlan the Web siteAnalyze the needChoose the content for the Web pageDetermine how the pages will link to one anotherEstablish what other links are necessaryCreate the Web page and linksTest all Web pages within the Web site</p> <p>Chapter 3: Creating Web Pages with Links, Images, and Formatted Text55Project 3: Creating Web Pages with Links, Images, and Formatted Text6IntroductionProject uses the following types of linkstext and image links to another Web page in the same Web sitetext links to another Web page in a different Web sitetext links within a Web pagee-mail links6Project 3: Creating Web Pages with Links, Images, and Formatted Text7Entering HTML Tags to Define the Web Page Structure</p> <p>Chapter 3: Creating Web Pages with Links, Images, and Formatted Text7Use the HTML templateon the In-Chapter HTMLChapter 2 Web pageto create the codelisted here77Project 3: Creating Web Pages with Links, Images, and Formatted Text8Using Links on a Web Pagemoving mouse pointer over a link causes mouse pointer to change to a pointing handdisplays URL of linked page on the status bar of browseruse descriptive text as the clickable wordClick here does not explain purpose of linkSave up to 60% on airfare better choicedefault color of links set by browser unless coded in tag in HTML codesame color defaults apply to border color around an image link8Project 3: Creating Web Pages with Links, Images, and Formatted Text9Using Links on a Web Page</p> <p>image linktext linkURL onstatus bar9Project 3: Creating Web Pages with Links, Images, and Formatted Text10Using Links on a Web Page</p> <p>More on Webnormal linkvisited linkactive link10Project 3: Creating Web Pages with Links, Images, and Formatted Text11Using Links on a Web Page</p> <p>11Project 3: Creating Web Pages with Links, Images, and Formatted Text12Using Links on a Web Page</p> <p>image withborder and no linkimage withborder and normal linkimage withborder and visited link12Project 3: Creating Web Pages with Links, Images, and Formatted Text13Linking within a Web Pageallows user to move quickly from one section of a long Web page to anothermove directly to a section of interest rather than scrolling through a documentuse list of links like a menu or table of contents at the top of the page13Project 3: Creating Web Pages with Links, Images, and Formatted Text14Linking to an E-Mail Addresshome page provides a way for visitors to contact person at company responsible for maintaining Web site or addressing customer questions or commentswhen visitor clicks e-mail link, automatically opens new message in default e-mail program and inserts appropriate contact e-mail address in the To fieldNote: if browser not configured to send mail, e-mail link will not work14Project 3: Creating Web Pages with Links, Images, and Formatted Text15Using Absolute and Relative PathsAll projects in book both HTML code and graphical images saved in the same foldermore appropriate to separate HTML code files and graphical images files into different folderscreate folder structure in which each functional area has its own folderpath describes the location (folder or external Web site) where the files can be found15Project 3: Creating Web Pages with Links, Images, and Formatted Text16Using Absolute and Relative Paths2 Kinds of PathsAbsolute specifies exact address for the fileE:\HTML\ChapterFiles\Chapter03\pastadivine.htmlcumbersome if files are moved to different folder or Web server all absolute paths would have to changeRelative specify location of a file, relative to location of current fileutilizes double period (..) symbol to move up or down the folder structure..\images\pastadivine.htmlrelative path better choice offers more flexibilityif root folder must change would not have change the addressing</p> <p>16Project 3: Creating Web Pages with Links, Images, and Formatted Text17Adding an ImagePasta Divine home page includes an image logo to provide visual appeal, catch visitors interest and promote company brand.logo image is same image found in print on company stationary, cards, and other promotional materialsconsistent visual and brand messageincluding width and height of logo image will improve load timealt attribute appears when page is loading and when user moves mouse over image17Project 3: Creating Web Pages with Links, Images, and Formatted Text18</p> <p>Adding an Imageimg tag toinsert imagesrc attribute usedto specify thename andlocation of imageend imgtagwidth attributeand valueheight attributeand valuealt attributeand value18Project 3: Creating Web Pages with Links, Images, and Formatted Text19Font Attributes and Values</p> <p>19Project 3: Creating Web Pages with Links, Images, and Formatted Text20</p> <p>Adding a Left-Aligned Heading with a Font Colorstart h1heading tagstart font tagfont colorattribute andcolor codeend fonttagend h1heading tag20Project 3: Creating Web Pages with Links, Images, and Formatted Text21</p> <p>Creating Unordered (Bulleted) Listsstart ul tagwith squarebulletsh2 headingline itemsend ul tag21Project 3: Creating Web Pages with Links, Images, and Formatted Text22Adding a Text Link and tags used to create links in a Web page. tag also is called the anchor tag because it is used to create anchors for links to another page in same Web site, to an external Web site, within same Web page, or an e-mail link.basic format:linktextlinktext is clickable word or phrase on Web pagehref (hypertext reference) name or URL of linked page or file22Project 3: Creating Web Pages with Links, Images, and Formatted Text23Tag Attributes and Functions</p> <p>23Project 3: Creating Web Pages with Links, Images, and Formatted Text24</p> <p>Adding a Text Link to Another Web Page within the Same Web Sitestart taglink to Web pagespecials.htmlmonthly specials toappear as text linkend tag24Project 3: Creating Web Pages with Links, Images, and Formatted Text25</p> <p>Adding an E-Mail Linkmailto:identifies linkas e-mail linkpastadivine@isp.comto appear as clickable text fore-mail linke-mailaddressendlink25Project 3: Creating Web Pages with Links, Images, and Formatted Text26Adding a Text Link to a Web Page in Another Web SiteChapter 3: Creating Web Pages with Links, Images, and Formatted Text26</p> <p>start taglink to Web pagewikipedia.orghistory of pasta toappear as text linkend tag26Project 3: Creating Web Pages with Links, Images, and Formatted Text27Validating a Web PageClick the Start button on the Windows Vista taskbar to display the Start menuClick the Internet icon in the pinned items list on the Start menu to start Internet Explorer. If necessary, click the Maximize button to maximize the browser windowClick the Address bar to select the URL in the Address barType validator.w3.org to replace the current entry then press the ENTER key.Click the Validate by File Upload tabChapter 3: Creating Web Pages with Links, Images, and Formatted Text2727Project 3: Creating Web Pages with Links, Images, and Formatted Text28Chapter 3: Creating Web Pages with Links, Images, and Formatted Text28Validating a Web PageClick the Browse buttonLocate the pastadivine.html file on your storage device and click the file nameClick the Open button in the Choose file dialog box and the file name will be inserted into the File boxClick the Check button. The resulting validation should be displayed as shown on the following slide2828Project 3: Creating Web Pages with Links, Images, and Formatted Text29Validating a Web PageChapter 3: Creating Web Pages with Links, Images, and Formatted Text29</p> <p>29Project 3: Creating Web Pages with Links, Images, and Formatted Text30</p> <p>Viewing a Web Pageh2 headingh1 headingbulleted listwith squarebullet type30Project 3: Creating Web Pages with Links, Images, and Formatted Text31Testing Links in a Web Page</p> <p>More on WebPasta divineWeb page priorto editing</p> <p>31Project 3: Creating Web Pages with Links, Images, and Formatted Text32Setting Link Targetstarget named location, link within the same Web page or filein project a bulleted list is added as links to the targetslinks are directed to the heading at the top of each major sectionwhen clicked links will move Web page visitor to the targetsusers will not have to scroll to topics or sectionsfour text links names To Top will return users to top of document</p> <p>More on Web32Project 3: Creating Web Pages with Links, Images, and Formatted Text33</p> <p>Setting Link Targetstargetsnamed locations33Project 3: Creating Web Pages with Links, Images, and Formatted Text34</p> <p>Adding Links to Link Targets within a Web PageLinks to link targetsnamed locations34Project 3: Creating Web Pages with Links, Images, and Formatted Text35Adding Links to a Target at the Top of the PageHTML Code to setup target (top location) at beginning of document as the tagHTML Code to use the target link (top) to return to the beginning of document To top as the tag35Project 3: Creating Web Pages with Links, Images, and Formatted Text36</p> <p>Adding Links to a Target at the Top of the PageLinks to top targetnamed location</p> <p>More on Web36Project 3: Creating Web Pages with Links, Images, and Formatted Text37Formatting Textlogical style tags allow browser to interpret tag based on browser settings, relative to other text in a Web page heading tag larger than regular text yet smaller than text should have a strong emphasismost browsers interpret as bold physical style tags specify a particular font change interpreted strictly by all browsers<b> bold tag in practice, and <b> tags have same result when Web page displayedMore on Web37Project 3: Creating Web Pages with Links, Images, and Formatted Text38Formatting Text38Project 3: Creating Web Pages with Links, Images, and Formatted Text39Adding an Image with Wrapped TextAlignment is a key consideration when inserting an imagehorizontal values can be left or rightvertical values can be top, middle, or bottom of imagealignment can give an image and the surrounding text completely different looksmust enter a break <br /> tag to stop text wrapping<br /><br /> clears both left and right alignments More on Web39Project 3: Creating Web Pages with Links, Images, and Formatted Text40Chapter 3: Creating Web Pages with Links, Images, and Formatted Text40Adding an Image with Wrapped TextImage with Wrapped Text4040Project 3: Creating Web Pages with Links, Images, and Formatted Text41Chapter 3: Creating Web Pages with Links, Images, and Formatted Text41Clearing the Text WrappingClearingWrapped Text4141Project 3: Creating Web Pages with Links, Images, and Formatted Text42Using Horizontal and Vertical SpacingUsing spacing between and around images can make the Web page easier to readhspace attribute of tag controls amount of horizontal space around an imagehspace=20vspace attribute of tag controls amount of vertical space around an imagevspace=2042Project 3: Creating Web Pages with Links, Images, and Formatted Text43Using Thumbnail Imagesdevelopers use thumbnail images to improve loading timethumbnail image is a smaller version of the image itselfused as a link, when clicked loads full-sized imagegives visitor opportunity to decide whether to view full-sized imagecreate thumbnail version of image, image is resized to smaller size using a paint or image-editing application, then saved to a different file nameuse Back button on browser to return to original Web page displaying the thumbnail43Project 3: Creating Web Pages with Links, Images, and Formatted Text44Obtaining ImagesWeb sites downloaded free for noncommercial purposes (copyright rules)use search engine key words free GIFs or free Web imagesright-click image, click Save Picture As, save image to your computerclip art found in applicationsscanner or digital cameracreate images using paint or image-editing program44Project 3: Creating Web Pages with Links, Images, and Formatted Text45Chapter 3: Creating Web Pages with Links, Images, and Formatted Text45Chapter SummaryDescribe linking terms and definitionsCreate a home page and enhance a Web page using imagesAlign and add bold, italics, and color to text Change the bullet type used in an unordered listAdd a text link to a Web page in the same Web site4545Project 3: Creating Web Pages with Links, Images, and Formatted Text46Chapter 3: Creating Web Pages with Links, Images, and Formatted Text46Chapter SummaryAdd an e-mail linkUse absolute and relative pathsSave and view an HTML file and test the linksOpen an HTML fileAdd an image with wrapped text4646Project 3: Creating Web Pages with Links, Images, and Formatted Text47Chapter 3: Creating Web Pages with Links, Images, and Formatted Text47Chapter SummaryAdd a text link to a Web page on another Web siteAdd links to targets within a Web pageCopy and paste HTML codeAdd an image link to a Web page in the same Web site4747Project 3: Creating Web Pages with Links, Images, and Formatted Text48Homework # 6 In the Lab 3 page HTML 140-141Creating Two Linked Web PagesSee INF 186 Computer Assignment 6 Web page for details, hints, and requirements for the assignment48Project 3 CompleteCreating Web Pages with Links, Images, and Formatted TextHTMLConcepts and TechniquesFourth Edition49</b></b></p>

Recommended

View more >