Create an HTML Document
advertisement
HTML, Third Edition Illustrated Brief Unit A Creating an HTML Document HTML, Third Edition--Illustrated Brief 1 Unit Objectives Understand Web concepts Plan an HTML document Write an HTML document Understand W3C coding standards Import Web content HTML, Third Edition--Illustrated Brief 2 Unit Objectives Mark up Web page content Print an HTML document Understand file transfer methods Transfer files with FTP Commander HTML, Third Edition--Illustrated Brief 3 Understanding Web Concepts HTML is the authoring language used to create pages for the World Wide Web HTML documents are text files made up of text and HTML instructions Tags and text make up the document’s source code HTML, Third Edition--Illustrated Brief 4 Understanding Web Concepts A Web page is a single text file marked up with tags, Tags allow you to describe how elements should appear in a Web browser A Web site is a collection of related Web pages Hyperlinks allow you to move from one file to another on the World Wide Web A Web server is a computer connected to the Internet and accessible to anyone with an Internet connection HTML, Third Edition--Illustrated Brief 5 Understanding Web Concepts A uniform resource locator (URL) is the exact Internet address of a Web file A search engine helps you locate information on the Web The World Wide Web Consortium (W3C) develops common protocols and sets new Web standards HTML, Third Edition--Illustrated Brief 6 Understanding Web Concepts HTML, Third Edition--Illustrated Brief 7 Clues to Use URLs consists of several parts protocol Web server name or machine name domain name HTML, Third Edition--Illustrated Brief 8 Understanding Web Concepts HTML, Third Edition--Illustrated Brief 9 Planning an HTML Document Sketch your Web page storyboarding Enter structuring tags for the file Enter the head section elements Enter each Web page body element Preview the Web page Test links HTML, Third Edition--Illustrated Brief 10 Planning an HTML Document HTML, Third Edition--Illustrated Brief 11 Planning an HTML Document HTML, Third Edition--Illustrated Brief 12 Writing an HTML Document Click the Start button on the taskbar Point to All Programs, point to Accessories, click Notepad, then maximize the Notepad window Click File on the menu bar, then click Save Click the Save in list arrow, then navigate to the location to store your site files Click the Create New Folder icon, type paradise as the new folder name, then double-click the paradise folder to open it HTML, Third Edition--Illustrated Brief 13 Writing an HTML Document Click the Save as type arrow, then click All Files Click in the File name text box, type index.htm, compare your dialog box with Figure A-6, then click Save Click in the blank area of the text editor, type <html>, then press [Enter] Type the remaining tags, as shown in Figure A7, use extra return characters after each tag Use your own name and the current date in the “Modified by” paragraph Click File on the menu bar, then click Save HTML, Third Edition--Illustrated Brief 14 Writing an HTML Document HTML, Third Edition--Illustrated Brief 15 Writing an HTML Document HTML, Third Edition--Illustrated Brief 16 Understanding W3C Coding Standards Use lowercase letters If you open it, close it No spaces in folders or file names Keep it neat Put everything in its place Stacked tags are closed before the next tag begins or are opened after the previous tag has ended Nested tags are fully contained within another tag HTML, Third Edition--Illustrated Brief 17 Understanding W3C Coding Standards HTML, Third Edition--Illustrated Brief 18 Importing Web Content Click before the first opening paragraph tag (<p>), drag to select all of the content through and including the second closing paragraph tag (</p>), press [Delete] to remove the page content Start Microsoft Word or another wordprocessing program, open the document htm_a-1.rtf from the location where you store your Data Files Click before the word Located in the first paragraph below the page heading in the htm_a-1.rtf document, drag to select all the remaining text HTML, Third Edition--Illustrated Brief 19 Importing Web Content Click Edit on the menu bar, click Copy, then click the text editor program button on the taskbar Click in the line below the level-one heading, click Edit on the menu bar, then click Paste Close the rtf file, then save your work HTML, Third Edition--Illustrated Brief 20 Importing Web Content Start your browser, then cancel any dial-up operations Click File on the menu bar, click Open or Open Page, click Browse or Choose File Navigate to and then click the file index.htm in your paradise site folder, click Open, then click Open or OK HTML, Third Edition--Illustrated Brief 21 Importing Web Content HTML, Third Edition--Illustrated Brief 22 Importing Web Content HTML, Third Edition--Illustrated Brief 23 Clues to Use Learn what other designers are doing by viewing the source code of other pages Internet Explorer • Click View on the menu bar, then click Source Navigator • Click View on the menu bar, then click Page Source HTML, Third Edition--Illustrated Brief 24 Marking up Web Page Content Click the text editor program button on the taskbar, click before the word Located, type <p>, click in the white space after “program.” at the end of the paragraph, type </p> Add opening and closing paragraph tags at the beginning and end of each paragraph Save your work Click the browser program button on the taskbar Click your browser’s Reload or Refresh button HTML, Third Edition--Illustrated Brief 25 Marking up Web Page Content Click the text editor program button on the taskbar, click after the line that reads, Send inquiries regarding rates and reservations to:, then type <br /> Type a line break at the end of the next three lines from Figure A-13, then save your work Return to the browser window, then click the browser’s Reload or Refresh button HTML, Third Edition--Illustrated Brief 26 Marking up Web Page Content HTML, Third Edition--Illustrated Brief 27 Marking up Web Page Content HTML, Third Edition--Illustrated Brief 28 Marking up Web Page Content HTML, Third Edition--Illustrated Brief 29 Marking up Web Page Content HTML, Third Edition--Illustrated Brief 30 Printing an HTML Document Click the text editor button on the taskbar, click File on the menu bar, then click Print Verify that your preferred printer is selected, then click Print Click the browser program button on the taskbar HTML, Third Edition--Illustrated Brief 31 Printing an HTML Document Click the Print button on the browser toolbar, then, if necessary, click OK Click the browser window Close button If necessary, click the text editor program button on the taskbar, then click the text editor window Close button HTML, Third Edition--Illustrated Brief 32 Printing an HTML Document HTML, Third Edition--Illustrated Brief 33 Clues to Use Web page printouts include information about the Web page location page title Netscape Navigator and Internet Explorer allow you to customize this information HTML, Third Edition--Illustrated Brief 34 Understanding File Transfer Methods Uploading is the process of transferring your files to a server You must have write access to the server Permission from server administrator Access to the server is granted by entering a user ID and a valid password HTML, Third Edition--Illustrated Brief 35 Understanding File Transfer Methods File Transfer Protocol (FTP) is one of the most common methods of transferring files to a server FTP client programs let you transfer files easily Files transferred with Secure File Transfer Protocol (SFTP) are encrypted for additional security Mapped Network Drive Web Site Development Program Publishing Interface HTML, Third Edition--Illustrated Brief 36 Understanding File Transfer Methods HTML, Third Edition--Illustrated Brief 37 Clues to Use To download FTP Commander, open your browser, then go to the InternetSoft Web site: Go to the Student Online Companion for this book and find the links for Unit A Click the DOWNLOAD link in the navigation bar near the top of the page On the Download page, click the Download link next to FTP Commander HTML, Third Edition--Illustrated Brief 38 Clues to Use If the Windows File Download - Security Warning dialog box displays the message, “Do you want to run or save this file?” click Run Click Run when the Internet Explorer Security Warning dialog box displays the message: “The publisher could not be verified. Are you sure you want to run this software?” After reading the FTP Commander License Agreement, click to select the check box indicating that you agree with the license terms HTML, Third Edition--Illustrated Brief 39 Clues to Use Click Next When the FTP Commander Destination Directory dialog box appears, click Browse to select a different storage location or click Start to accept the default destination. Make sure that the Run Installed Application box is checked, then click OK. A Windows Security Alert dialog box may warn you that Windows Firewall has blocked some features of this program. If this happens, click Unblock. HTML, Third Edition--Illustrated Brief 40 Transferring Files with FTP Commander If FTP Commander is not already running, click the Start button on the taskbar, point to All Programs, point to FTP Commander, then click FTP Commander Click the Browse local drives list arrow, then navigate to the location where you store your site files Click New Server under FTP- servers Type your information as described on the following slide, then click Save HTML, Third Edition--Illustrated Brief 41 Transferring Files with FTP Commander HTML, Third Edition--Illustrated Brief 42 Transferring Files with FTP Commander In the SERVER LIST pane, double-click the name of the server you just defined to open an FTP connection to your server Click index.htm in the Folder content pane of the Local computer window, then click the Upload files to FTP - server button to start the file transfer to the server Start your Internet browser, type your remote URL in the browser’s Address box, then click Go or press [Enter] Close your browser and your text editor HTML, Third Edition--Illustrated Brief 43 Transferring Files with FTP Commander HTML, Third Edition--Illustrated Brief 44 Unit Summary Understand Web concepts Plan an HTML document Write an HTML document Understand W3C coding standards Import Web content HTML, Third Edition--Illustrated Brief 45 Unit Summary Mark up Web page content Print an HTML document Understand file transfer methods Transfer files with FTP Commander HTML, Third Edition--Illustrated Brief 46
