Project 2 Web Page Design Creating and Editing a Web Page Pages

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. – – –

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 wrap Keyboarding again????

Oh… here we Go! Let’s create! – HTML document tag and 4 sets of,,, and 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 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?