project 2 web page design
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Project 2 Web Page Design](https://reader035.vdocuments.us/reader035/viewer/2022081515/56815d33550346895dcb2d37/html5/thumbnails/1.jpg)
Project 2Web Page Design
Creating and Editing a Web PagePages 30 - 68
![Page 2: Project 2 Web Page Design](https://reader035.vdocuments.us/reader035/viewer/2022081515/56815d33550346895dcb2d37/html5/thumbnails/2.jpg)
Understanding the Importance
• Planning• Analysis• And design
![Page 3: Project 2 Web Page Design](https://reader035.vdocuments.us/reader035/viewer/2022081515/56815d33550346895dcb2d37/html5/thumbnails/3.jpg)
Project 2 – the Campus Tutoring Service
• Should include:• Contact information• List of courses for which tutors are available
![Page 4: Project 2 Web Page Design](https://reader035.vdocuments.us/reader035/viewer/2022081515/56815d33550346895dcb2d37/html5/thumbnails/4.jpg)
Note Pad
• (term) Note pad is a basic text editor you can use for simple documents or for creating Web Pages using HTML.
![Page 5: Project 2 Web Page Design](https://reader035.vdocuments.us/reader035/viewer/2022081515/56815d33550346895dcb2d37/html5/thumbnails/5.jpg)
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.
![Page 6: Project 2 Web Page Design](https://reader035.vdocuments.us/reader035/viewer/2022081515/56815d33550346895dcb2d37/html5/thumbnails/6.jpg)
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
![Page 7: Project 2 Web Page Design](https://reader035.vdocuments.us/reader035/viewer/2022081515/56815d33550346895dcb2d37/html5/thumbnails/7.jpg)
Elements of a Web page (continued)
• Background (term) is a solid color, picture or graphic. Don’t go too strong!
![Page 8: Project 2 Web Page Design](https://reader035.vdocuments.us/reader035/viewer/2022081515/56815d33550346895dcb2d37/html5/thumbnails/8.jpg)
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.
![Page 9: Project 2 Web Page Design](https://reader035.vdocuments.us/reader035/viewer/2022081515/56815d33550346895dcb2d37/html5/thumbnails/9.jpg)
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
![Page 10: Project 2 Web Page Design](https://reader035.vdocuments.us/reader035/viewer/2022081515/56815d33550346895dcb2d37/html5/thumbnails/10.jpg)
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
![Page 11: Project 2 Web Page Design](https://reader035.vdocuments.us/reader035/viewer/2022081515/56815d33550346895dcb2d37/html5/thumbnails/11.jpg)
Starting Note Pad
• START button• Accessories• Notepad
start
accessories Notepad
![Page 12: Project 2 Web Page Design](https://reader035.vdocuments.us/reader035/viewer/2022081515/56815d33550346895dcb2d37/html5/thumbnails/12.jpg)
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
![Page 13: Project 2 Web Page Design](https://reader035.vdocuments.us/reader035/viewer/2022081515/56815d33550346895dcb2d37/html5/thumbnails/13.jpg)
Remember Word Wrap?
• Think back to Keyboarding…..
• In Notepad you must enable the word wrapKeyboarding again????
![Page 14: Project 2 Web Page Design](https://reader035.vdocuments.us/reader035/viewer/2022081515/56815d33550346895dcb2d37/html5/thumbnails/14.jpg)
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.
![Page 15: Project 2 Web Page Design](https://reader035.vdocuments.us/reader035/viewer/2022081515/56815d33550346895dcb2d37/html5/thumbnails/15.jpg)
W3C
• Sounds like it should refer to a war
• But… There are three types of HTML/XHTML
Where was this flag raised and why?
![Page 16: Project 2 Web Page Design](https://reader035.vdocuments.us/reader035/viewer/2022081515/56815d33550346895dcb2d37/html5/thumbnails/16.jpg)
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.
![Page 17: Project 2 Web Page Design](https://reader035.vdocuments.us/reader035/viewer/2022081515/56815d33550346895dcb2d37/html5/thumbnails/17.jpg)
2. Transitional
• (document type) allows the use of the deprecated tags.
![Page 18: Project 2 Web Page Design](https://reader035.vdocuments.us/reader035/viewer/2022081515/56815d33550346895dcb2d37/html5/thumbnails/18.jpg)
3. Frameset
(document type) used to support frames on a Web Page. Also allows
deprecated tags.
![Page 19: Project 2 Web Page Design](https://reader035.vdocuments.us/reader035/viewer/2022081515/56815d33550346895dcb2d37/html5/thumbnails/19.jpg)
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…..
![Page 20: Project 2 Web Page Design](https://reader035.vdocuments.us/reader035/viewer/2022081515/56815d33550346895dcb2d37/html5/thumbnails/20.jpg)
![Page 21: Project 2 Web Page Design](https://reader035.vdocuments.us/reader035/viewer/2022081515/56815d33550346895dcb2d37/html5/thumbnails/21.jpg)
Make every body HAPPY HAPPY HAPPY
Make your HTML files compliant with XHTML standard, always enter tags in lowercase (with the exception of <!DOCTYPE> tag
![Page 22: Project 2 Web Page Design](https://reader035.vdocuments.us/reader035/viewer/2022081515/56815d33550346895dcb2d37/html5/thumbnails/22.jpg)
Creating a List
• Text on a Web page is easier for users to read and understand.
– Bulleted (unordered)– Numbered (ordered)
![Page 23: Project 2 Web Page Design](https://reader035.vdocuments.us/reader035/viewer/2022081515/56815d33550346895dcb2d37/html5/thumbnails/23.jpg)
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)
![Page 24: Project 2 Web Page Design](https://reader035.vdocuments.us/reader035/viewer/2022081515/56815d33550346895dcb2d37/html5/thumbnails/24.jpg)
Using a Browser to View it
• Multitasking - it is important that you can run more than one program or process at the same time.
![Page 25: Project 2 Web Page Design](https://reader035.vdocuments.us/reader035/viewer/2022081515/56815d33550346895dcb2d37/html5/thumbnails/25.jpg)
Activating NOTEPAD
• At the bottom of the screen you will see Notepad button recessed
“click”Proj 2 Notepad
![Page 26: Project 2 Web Page Design](https://reader035.vdocuments.us/reader035/viewer/2022081515/56815d33550346895dcb2d37/html5/thumbnails/26.jpg)
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
![Page 27: Project 2 Web Page Design](https://reader035.vdocuments.us/reader035/viewer/2022081515/56815d33550346895dcb2d37/html5/thumbnails/27.jpg)
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.
![Page 28: Project 2 Web Page Design](https://reader035.vdocuments.us/reader035/viewer/2022081515/56815d33550346895dcb2d37/html5/thumbnails/28.jpg)
Visually Appealing (this one or…)
![Page 29: Project 2 Web Page Design](https://reader035.vdocuments.us/reader035/viewer/2022081515/56815d33550346895dcb2d37/html5/thumbnails/29.jpg)
This one!
![Page 30: Project 2 Web Page Design](https://reader035.vdocuments.us/reader035/viewer/2022081515/56815d33550346895dcb2d37/html5/thumbnails/30.jpg)
Source code
• (term) code or instructions used to create a Web page or program
![Page 31: Project 2 Web Page Design](https://reader035.vdocuments.us/reader035/viewer/2022081515/56815d33550346895dcb2d37/html5/thumbnails/31.jpg)
Printing
• When creating a Web Page…
• Always keep a hard copy!
![Page 32: Project 2 Web Page Design](https://reader035.vdocuments.us/reader035/viewer/2022081515/56815d33550346895dcb2d37/html5/thumbnails/32.jpg)
This Week we will….
• Take notes• View ppt2
• Complete practice test• Apply your knowledge
• In the lab• And work with partners.
• Having fun yet?