Chapter 2 Web Page Design Mr. Gironda

Elements of a Web Page These are things that most web pages use

Elements (cont.) Window Elements –Title – text that appears on the title bar of the browser when the web page appears Concise and descriptive Name and file name –Body – contains the information that is displayed in the browser window. Can include text, graphics, etc.

Elements (cont.) Window Elements (cont.) –Background – a solid color or a picture or graphic against which the other elements on the web page appear. Make sure it doesn’t overpower the information on the page

Elements (cont.) Text Elements –Normal text – default text format used for the main content of a web page.

START OF CODING (day 1)

HTML CODE Begin by inserting a and four sets of tags – (start and end of html doc) – (start and end of a header) – (start and end of a title) (appears on the title bar, not on web page) – (start and end of the web page body)

Tells the browser which HTML version and type the document uses (that’s why this is first)

Software uses these tags to decide where the HTML code begins and ends

Contains Web page title and other header information

All text, images, links, and other content is contained within this final set of tags

All tags should be in lower case except

Do in class Open notepad Go to Format and Choose Word Wrap Page 38 in book –Do #1 and #2 Save it as [your initials]chapt2.txt –& as [your initials]chapt2.htm –Both in your I drive in a Webpage folder Explain DOCTYPE

Notice: The body has a beginning and ending and space for you to enter information comes after the and the ending tag comes at the end of the entire document

Entering Headings through – is the largest size How to enter a heading? –Page 40 Figure 2-9 Step 1

Entering a Paragraph of Text Make sure you break text into paragraphs of main ideas –This starts and ends a new paragraph –The browser will start a new line and insert a blank line above the new paragraph Page 40 Figure 2-10 Steps 1 and 2

Entering a Paragraph of Text –Breaks a line of text –Browser will start a new line with the text that follows the tag

Creating a List Bulleted List (unordered list) Can have discs, squares, or circles Default is discs Numbered List (ordered list) Can use numbers, letters, or roman numerals Default is Arabic numbers (1, 2, 3)

Numbered and bulleted lists (cont.) –If you just use or then the default is used –To specify, you must put it inside the tag

Numbered and Bulleted lists (cont.) – and are used for each item that is bulleted or numbered –Look at: Page 42 Figure 2-11 and 2-12 –Do: Page 43 Figure 2-13

Definition List –Offsets information in a dictionary like style is used within for a term is used for a definition Page 44 figure 2-14 example

Viewing in a web browser It will look like Figure 2-23 on page 49

Save it as a text file (.txt) Close the notepad text file In your browser, select the down arrow beside page and choose “view source” –Or you can right click and choose view source

Adding an Image Figure 2-26 page 54 The code inserts the image and gives the attributes of the image (includes height and width)

Why won’t this work? Rules for clips –Make sure the clip exists –Keep them close (same folder) Let’s change the image –Q drive

New image Change the size to make it look less stretched

Add an image of your own Search for free clipart on the internet Save it into your drive Insert it right after last image

Adding Color Color is a six-digit number code (page 55) Can be used for text, links, or backgrounds Background color –Bgcolor attribute must be added in the tag –Page 55 Figure 2-28 (complete)

Centering a Heading Add the align attribute to any heading –align=“left” –align=“center” –align=“right” The default is left aligned Figure 2-29 on page 56 (complete)

Adding a Horizontal Rule A line that runs across your page to act as a divider Page 57 has a list of types –Can change the size and the shading Page 57 figure 2-31 (complete)

Assignments

Create a website Page 64 –Disregard the directions in the book –Create a web page that will display exactly what figure 2-37 is in the book. Page 65, 66, & 67 –Same directions as above Quick Personal Website Chapter 2 Online Reviews Chapter 2 Review (Q drive)