Embed Size (px)
Citation preview
Project 2Web Page Design
Creating and Editing a Web PagePages 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
• (term) Note pad is a basic text editor you can use for simple documents or for creating Web Pages using HTML.
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.
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
Elements of a Web page (continued)
• Background (term) is a solid color, picture or graphic. Don’t go too strong!
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.
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
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
Starting Note Pad
• START button• Accessories• Notepad
start
accessories Notepad
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
Remember Word Wrap?
• Think back to Keyboarding…..
• In Notepad you must enable the word wrapKeyboarding again????
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.
W3C
• Sounds like it should refer to a war
• But… There are three types of HTML/XHTML
Where was this flag raised and why?
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.
2. Transitional
• (document type) allows the use of the deprecated tags.
3. Frameset
(document type) used to support frames on a Web Page. Also allows
deprecated tags.
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…..
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
Creating a List
• Text on a Web page is easier for users to read and understand.
– Bulleted (unordered)– Numbered (ordered)
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)
Using a Browser to View it
• Multitasking - it is important that you can run more than one program or process at the same time.
Activating NOTEPAD
• At the bottom of the screen you will see Notepad button recessed
“click”Proj 2 Notepad
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
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.
Visually Appealing (this one or…)
This one!
Source code
• (term) code or instructions used to create a Web page or program
Printing
• When creating a Web Page…
• Always keep a hard copy!
This Week we will….
• Take notes• View ppt2
• Complete practice test• Apply your knowledge
• In the lab• And work with partners.
• Having fun yet?
