1 / 43

Creating A Web Page

Creating A Web Page. Computer Concepts I and II Sue Norris. Agenda. What is HTML HTML and XHTML Tags Required HTML and XHTML Tags Using Notepad to Create a Simple Web Page Viewing Your Web Page in a Browser Submitting Your Project. Slide Menu. H yper T ext M arkup L anguage.

conroy
Download Presentation

Creating A Web Page

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Creating A Web Page Computer Concepts I and II Sue Norris

  2. Agenda • What is HTML • HTML and XHTML Tags • Required HTML and XHTML Tags • Using Notepad to Create a Simple Web Page • Viewing Your Web Page in a Browser • Submitting Your Project

  3. Slide Menu

  4. Hyper Text Markup Language • Every Web Page is Formatted with HTML markup tags • HTML Markup tags Tell a Browser How to Display a Web Page • A Web Page ALWAYS has a File Extension of htm or html • The Browser (ie Internet Explorer, Netscape, Firefox) Reads the HTML tags Sequentially From Top to Bottom and Formats the Page Based On What the Tags Say

  5. XHTML 1.0 • Extensible HyperText Markup Language • Almost Identical to HTML 4.01 • Stricter and Cleaner Version of HTML Slide Menu

  6. What Do HTML Tags Look Like? • HTML Tags Look Like: <p> </p> paragraph tag <b> </b> bold tag* <ul> </ul> unordered list tag <li> </li> list item tag • What is Common About HTML Tags? • Starting and Ending Tags • Data Between the Tags will be Formatted According to the Tag • The Starting Tag Starts the Type of Format; the Ending Tag Stops the Type of Format * The bold tag is deprecated: will not be supported in future standards. The style tag should be used instead. Slide Menu

  7. Required HTML Tags The Following HTML Tags are Required/Recommended for Every We Pages Slide Menu

  8. XHTML Additional Requirements • All html/xhtmlTags and Tag Elements Must be in lower-case • Every html/xhtml Tag Must have a Starting Tag AND an Ending Tag • Html/xhtml Tags Must be Properly Nested • Html/xhtml Tag Attributes Must be in Quotes • The Id attribute replaces the Name Attribute of previous versions • The DOCTYPE Declaration Should be the First Line in a XHTML Document Slide Menu

  9. Starting a Simple Web Page Using a Text Editor • In Window’s, Open Notepad Click Start Button, Click on All Programs, Click on Accessories, Click on Notepad Slide Menu

  10. Notepad Opens Slide Menu

  11. Open TextEdit on the Mac • Click Finder on the Dock • Click Applications • Click on TextEdit ICON to Open Slide Menu

  12. Mac and TextEdit • Open TextEdit • Click TextEdit on the Menu bar and select Preferences • Click Open and Save tab • Select Ignore rich text commands in HTML files • Select “Automatic” for Opening and Saving files. • In Document type, select “HTML 4.01 Transitional” • If document includes CSS, select appropriate option • For Encoding, select Unicode (UTF-8) • Close Preferences Window • Type your html/xhtml code in TextEdit window. Slide Menu

  13. Save Your Document • Whenever you create a web page, ALWAYS Save Your Web Page First • In Windows • Click File on the Menu Bar, Click Save, Choose Desktop for Save in, type in Example1.htm in File Name and Click Save • NOTE: We are Saving to the Desktop to Make This Easy; You Would Normally Save to a Folder of Choice • In Mac • Click File on the Menu Bar, Click Save As, Choose Documents for Where, type in Example1.htm in Save As field and Click Save

  14. Type the Following HTML Tags into your Example1.htm document. • Type in the Tags Exactly as You See Them Above • To Comply with XHTML coding standards: • ALL xhtmltags MUST be in lower case • ALL tags MUST have a starting tag and an ending tag • Save Your Web Page Click File on the Menu Bar, Click Save • Minimize the Notepad Window; We Will Come Back to It Slide Menu

  15. Go to your Desktop • You Should See the Example1.htm ICON on your Desktop, Similar to that Below • If you Don’t, Go Back to Starting a Web Page and Start Over • Double-Click on the Example1.htm ICON Slide Menu

  16. View Your Lovely Work • Your Browser Window Should Open with Your Web Page Loaded in It. • It if Doesn’t, Go Back to Starting A Simple Web Page slide and Make Sure You Saved Your Page Correctly Slide Menu

  17. Add Formatting to Text • Maximize Your Notepad Window • Change Your HTML Code To Add the Bold Tag or Other Text Formatting Tag, and So It Looks Similar to the Following • NOTE: The Yellow Background is Only to Highlight the Inserted Tag • When Done, Save Your Web Page and Minimize the Notepad Window Slide Menu

  18. Go to your Desktop • Double-Click on the Example1.html ICON Slide Menu

  19. View Your Work • If You Did Everything Correctly, Your Web Page Should Look Similar to the Following and My First should be in Bold. • If you Don’t Have this, Go Back to the Add Formatting slide and try again. Slide Menu

  20. Continuing With Your Web Page • Create Two Paragraphs with the Paragraph Tag • Edit Your Example1.htm file in Notepad to add the two Paragraph Tags that you See Below. • Also add the <u></u> and <i></i> tags for Underline and Italics formatting. • XHTML RULE: Tags MUST BE Properly Nested. If formatting Starts with <i><u>, the Order of the Ending Tags Must Be: </u></i>. • Save Your File and Minimize the Notepad Window Slide Menu

  21. View Your Page • Go to Your Desktop and Double-Click the Example1.htm ICON. Your Webpage Should Look Similar to That Shown in the Image Below. • If it Doesn’t Go Back to Slide 20 and Make Corrections Slide Menu

  22. Add a Background Color • A Webpage Background Color is Added with the bgcolor parameter of the Body Tag • Colors are Entered as 6 character hexadecimal numbers • Code Must Start with # and be enclosed in “” • Go to the Webmonkey site and pick a color that you like and jot down the 6 character hexadecimal code associated with it. • Save Your File and Minimize Your Notepad Window Slide Menu

  23. View Your Web Page • Go to Your Desktop and Double-Click the Example1.htm ICON. Your Webpage Should Look Similar to That Shown in the Image Below. • If it Doesn’t Go Back to the Add a Background Color slideand Make Corrections Slide Menu

  24. Add a Link • Links Are Created with the Anchor Tag: <a></a> • A Link to the Microsoft web site would look like: <a href=“http://www.microsoft.com/”>Click here</a> to go to the Microsoft Site. • This Represents a Link to an External Web Site • The Information Between the “ ” s is the Address of the Linked to Page • The Information in Yellow and Between the > and </a> is What Appears on the Web Page for the User to Click • A Link to Another Page Within the Same Web Site Might Look Like:<a href=“computers.htm”>Computers Page</a> • Name of Page is computers.htm • No Path is Specified if page is within the same folder as calling Web Page • Computers Page is What Will Display on Calling Page for User to Click Slide Menu

  25. Check Your HTML Source Code • If you Use a Web-Page Editor, Check the Source Code of Your <a> tag. • It Should Look Similar to the Following: <a href=“computers.htm”>Computers Page</a> • The following is Incorrect and Won’t Work <a href="file:///C:/....... </a> • This is Pointing to a Location on YOUR Hard Drive. • When it is Transferred to the Web Server, the Browser will Look for the File at the Same Location on the User’s Hard Drive. Not Likely There.

  26. Try It • Maximize Your Notepad Window with Example1.htm Open in It • Edit your HTML Code So That It Looks as Pictured Below. • Save Your File and Minimize the Notepad Window Slide Menu

  27. View Your Web Page • Go to Your Desktop and Double-Click the Example1.htm ICON. Your Webpage Should Look Similar to That Shown in the Image Below. • Try Your Link. Does It Go to the Microsoft Site? • If it Doesn’t Go Back to the Adding a Link slide, Make Corrections, and Try Again Slide Menu

  28. Creating A List • Ordered Lists (numbered) are Created with the OL and LI tags • Example of Two Item Unordered List<p>Rivers</p><ul><li>Mississippi</li><li>Missouri</li></ul> • Unordered Lists (bulleted) are Created with the UL and LI tags • Example of Two Item Ordered List<p>Rivers</p><ol><li>Mississippi</li><li>Missouri</li></ol> Slide Menu

  29. Try It • Maximize Your Example1.htm Notepad Window and Edit Your HTML Source Code so That it Looks as Below. • Save Your File and Minimize Your Notepad Window Slide Menu

  30. View Your Page • Go to Your Desktop and Double-Click the Example1.htm ICON. Your Webpage Should Look Similar to That Shown in the Image Below. • Do your Lists Look Similar? • If They Don’t Go Back to the Creating a List slide, Make Corrections, and Try Again Slide Menu

  31. Adding a Header Tag • Header Tags are Used to Emphasize Web Page Sections and Subsections in an Outline Fashion • Header Tags Range From H1 to H6 with H1 Being the Largest and H6 the Smallest • Examples: • <h1>Main Section</h1> • <h2>Sub-section</h2> • <h3>Sub-sub-section</h3> Slide Menu

  32. Try It • Maximize your Example1.htm Notepad Window • Edit Your HTML Code To Look as Below • Save Your File and Minimize the Window Slide Menu

  33. View Your Work • Go to Your Desktop and Double-Click the Example1.htm ICON. Your Webpage Should Look Similar to That Shown in the Image Below. • Do You Notice the Heading Difference? • If it Doesn’t Go Back to the Adding a Header slide, Make Corrections, and Try Again Slide Menu

  34. Tables • Tables are Created with the following tags: • Table • TR for table Rows • TD for Table Cells • In the Example to the Right, a 3 Row, 3 Column Table is Created • The Table is 500 pixels wide • The Table has a border that is 1 pixel wide. • Note: The Information Between the <td> & </td> is Just Padding; You Can Have Anything You Like • Open Your Example1.htm file and add the tags for a table. Put whatever data you want into the Cells. Save Your File. • See the W3Schools Tutorial Site for Additional Information on Creating Tables Slide Menu

  35. View Your Table • Double-click on the Desktop ICON for Example1.htm to View Your Work • It Should Look Similar to the Following • If It Doesn’t, Go Back and Review Your Tags Slide Menu

  36. Further HTML Training Continue Training at the W3Schools HTML Tutorial Site: http://www.w3schools.com/html/default.asp

  37. XHTML Finishing Touches • DOCTYPE Statement Required • First Statement in XHTML Source Code • Three Document Type Definitions (DTD) Supported • Strict • Transitional • Frames • Transitional is Most Common • Fine for This Class • If Cascading Style Sheets (CSS) are Used, Strict DTD Should be Used • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Slide Menu

  38. Add DOCTYPE Statement • Open Your Example1.htm Notepad Window and Edit Your HTML Code so That it Looks as Below • Save Your Page, Minimize the Window, then Check Your Web Page to Make Sure it Opens Slide Menu

  39. Further XHTML Training • Continue Your XHTML Training at:http://www.w3schools.com/xhtml/default.asp • Tutorials From Introduction to Validation are Required Slide Menu

  40. XHTML Validation Validate HTML Source Code Verifies If Source Code Conforms to XHTML Standards Pinpoints Errors Offers Recommendations Several Web Sites Available Try: http://validator.w3.org/ • If Using W3C Validation Service • Select Validate by File Upload • Click Browse to Select your File • Click More Options to Expand • Select Options of Choice • Click Check Slide Menu

  41. Viewing the HTML Source Code of a Web Page • The HTML Code of any Web Page Can Easily be Viewed in a Browser • In IE, click View on the Menu Bar and Select Source • In Mozilla Firefox, click View on the Menu Bar and Select Page Source Slide Menu

  42. Transfer Files to Web Server • Use a FTP Program To Transfer Student Web Pages and Files to the Web Server • IE FTP Client • WS_FTPLE • Fetch • Most Assignments Also Need to be Posted to the Assignment Dropbox in WebCT • Make Sure Your Page Has All Requirements • Make Sure Your Link Works • That Wasn’t So Hard, Was It Slide Menu

  43. Summary • What is HTML • HTML Tags • Required HTML Tags • Creating a Web Page in Notepad • Viewing a Web Page in the Browser • Submitting Your Web Page Slide Menu

More Related