1 / 32

Project 2 Web Page Design

Project 2 Web Page Design. Creating and Editing a Web Page Pages 30 - 68. Understanding the Importance. Planning Analysis And design. Project 2 – the Campus Tutoring Service. Should include: Contact information List of courses for which tutors are available. Note Pad.

lassie
Download Presentation

Project 2 Web Page Design

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. Project 2Web Page Design Creating and Editing a Web Page Pages 30 - 68

  2. Understanding the Importance • Planning • Analysis • And design

  3. Project 2 – the Campus Tutoring Service • Should include: • Contact information • List of courses for which tutors are available

  4. Note Pad • (term) Note pad is a basic text editor you can use for simple documents or for creating Web Pages using HTML.

  5. Elements of a Web Page Most Web pages include several basic features, or elements. • Window Elements • Title (term) – the text that appears on the title bar of the browser window. It is the name assigned to the page. The title should identify the subject or purpose of the page.

  6. Elements of a Web page (continued) • Body (term) contains the information that is displayed in the browser window. It can include • Text • Graphics • And other elements

  7. Elements of a Web page (continued) • Background (term) is a solid color, picture or graphic. Don’t go too strong!

  8. Elements of a Web page (continued) • Text Elements • Normal Text is the default text format. It can be used in a series of text items called a List. Typically, lists are bulleted or numbered. • Headings (term) are used to set off different paragraphs of text or sections of the page. Headings are larger font sizes than the normal text.

  9. Elements of a Web page (continued) • Image elements • Inline image (term) the image or graphics file is not part of the HTML file • Web pages typically use several different types of inline images. • Image Map (term) inline image which you define one or more areas as hotspots. • Hotspot is an area of an image that activates a function when selected • animated – they include motion and change in appearance • Horizontal rules are displayed across a Web Page to separate different sections

  10. Elements of a Web page (continued) • Hyperlink Elements • Link is text, and image, or another web page. • www.olemiss.edu • www.mississippistate.edu • www.deltastate.edu

  11. Starting Note Pad • START button • Accessories • Notepad accessories Notepad start

  12. Bunches of Terms for Note Pad • Title Bar appears at the top of the window (default is untitled) • Menu Bar appears at the top just below the title bar • Text Area, it is the main part of the window. • You know this….. Keyboarding

  13. Remember Word Wrap? • Think back to Keyboarding….. • In Notepad you must enable the word wrap Keyboarding again????

  14. Oh… here we Go! • Let’s create! • HTML document <!DOCTYPE> tag and 4 sets of <html>, <head>, <title>, and <body> <!DOCTYPE> tag is used to tell the browser which HTML or XHTML version & type the document uses.

  15. W3C • Sounds like it should refer to a war • But… There are three types of HTML/XHTML Where was this flag raised and why?

  16. 1. STRICT • Strict is specified when you want to prohibit the use of deprecated tags. • What’s a deprecated tag?? • They are tags that the W3C has ear marked for eventual removal from their specifications, because those tags have been replaced with newer, more functional tags.

  17. 2. Transitional • (document type) allows the use of the deprecated tags.

  18. 3. Frameset (document type) used to support frames on a Web Page. Also allows deprecated tags.

  19. OK OK so what is DTD? • Document type definition is a file containing definitions of tags and how they should be used in a Web Page. • See table 2-1 for a few ideas…..

  20. Make every body HAPPY HAPPYHAPPY Make your HTML files compliant with XHTML standard, always enter tags in lowercase (with the exception of <!DOCTYPE> tag

  21. Creating a List • Text on a Web page is easier for users to read and understand. • Bulleted (unordered) • Numbered (ordered)

  22. Saving an HTML file • HTML files MUST end with an extension of .htm or .html • This is when we will use a jump drive or thumb drive(removable)

  23. Using a Browser to View it • Multitasking - it is important that you can run more than one program or process at the same time.

  24. Activating NOTEPAD • At the bottom of the screen you will see Notepad button recessed “click” Proj 2 Notepad

  25. Web Page Images • Image Types: • Graphics Interchange Format (GIF) files have an extension of .gif • Joint Photographic Experts Group (JPEG) .jpeg • Portable Network Graphics (PNG) .png or .ping

  26. Image Attributes • Src attribute is used to define the URL of the image to load. • Alt attribute is used to provide alternative text, in the event the image is not displayed.

  27. Visually Appealing (this one or…)

  28. This one!

  29. Source code • (term) code or instructions used to create a Web page or program

  30. Printing • When creating a Web Page… • Always keep a hard copy!

  31. This Week we will…. • Take notes • View ppt2 • Complete practice test • Apply your knowledge • In the lab • And work with partners. • Having fun yet?

More Related