project 2 web page design creating and editing a web page pages 30 - 68
TRANSCRIPT
![Page 1: Project 2 Web Page Design Creating and Editing a Web Page Pages 30 - 68](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649efd5503460f94c11554/html5/thumbnails/1.jpg)
Project 2Web Page Design
Creating and Editing a Web PagePages 30 - 68
![Page 2: Project 2 Web Page Design Creating and Editing a Web Page Pages 30 - 68](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649efd5503460f94c11554/html5/thumbnails/2.jpg)
Understanding the Importance
• Planning• Analysis• And design
![Page 3: Project 2 Web Page Design Creating and Editing a Web Page Pages 30 - 68](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649efd5503460f94c11554/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 Creating and Editing a Web Page Pages 30 - 68](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649efd5503460f94c11554/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 Creating and Editing a Web Page Pages 30 - 68](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649efd5503460f94c11554/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 Creating and Editing a Web Page Pages 30 - 68](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649efd5503460f94c11554/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 Creating and Editing a Web Page Pages 30 - 68](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649efd5503460f94c11554/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 Creating and Editing a Web Page Pages 30 - 68](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649efd5503460f94c11554/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 Creating and Editing a Web Page Pages 30 - 68](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649efd5503460f94c11554/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 Creating and Editing a Web Page Pages 30 - 68](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649efd5503460f94c11554/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 Creating and Editing a Web Page Pages 30 - 68](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649efd5503460f94c11554/html5/thumbnails/11.jpg)
Starting Note Pad
• START button• Accessories• Notepad
start
accessories Notepad
![Page 12: Project 2 Web Page Design Creating and Editing a Web Page Pages 30 - 68](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649efd5503460f94c11554/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 Creating and Editing a Web Page Pages 30 - 68](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649efd5503460f94c11554/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 Creating and Editing a Web Page Pages 30 - 68](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649efd5503460f94c11554/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 Creating and Editing a Web Page Pages 30 - 68](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649efd5503460f94c11554/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 Creating and Editing a Web Page Pages 30 - 68](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649efd5503460f94c11554/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 Creating and Editing a Web Page Pages 30 - 68](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649efd5503460f94c11554/html5/thumbnails/17.jpg)
2. Transitional
• (document type) allows the use of the deprecated tags.
![Page 18: Project 2 Web Page Design Creating and Editing a Web Page Pages 30 - 68](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649efd5503460f94c11554/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 Creating and Editing a Web Page Pages 30 - 68](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649efd5503460f94c11554/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 Creating and Editing a Web Page Pages 30 - 68](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649efd5503460f94c11554/html5/thumbnails/20.jpg)
![Page 21: Project 2 Web Page Design Creating and Editing a Web Page Pages 30 - 68](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649efd5503460f94c11554/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 Creating and Editing a Web Page Pages 30 - 68](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649efd5503460f94c11554/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 Creating and Editing a Web Page Pages 30 - 68](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649efd5503460f94c11554/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 Creating and Editing a Web Page Pages 30 - 68](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649efd5503460f94c11554/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 Creating and Editing a Web Page Pages 30 - 68](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649efd5503460f94c11554/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 Creating and Editing a Web Page Pages 30 - 68](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649efd5503460f94c11554/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 Creating and Editing a Web Page Pages 30 - 68](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649efd5503460f94c11554/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 Creating and Editing a Web Page Pages 30 - 68](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649efd5503460f94c11554/html5/thumbnails/28.jpg)
Visually Appealing (this one or…)
![Page 29: Project 2 Web Page Design Creating and Editing a Web Page Pages 30 - 68](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649efd5503460f94c11554/html5/thumbnails/29.jpg)
This one!
![Page 30: Project 2 Web Page Design Creating and Editing a Web Page Pages 30 - 68](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649efd5503460f94c11554/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 Creating and Editing a Web Page Pages 30 - 68](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649efd5503460f94c11554/html5/thumbnails/31.jpg)
Printing
• When creating a Web Page…
• Always keep a hard copy!
![Page 32: Project 2 Web Page Design Creating and Editing a Web Page Pages 30 - 68](https://reader035.vdocuments.us/reader035/viewer/2022062720/56649efd5503460f94c11554/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?