Web Page Design (Chapter 2)
Download
Report
Transcript Web Page Design (Chapter 2)
Web Page Design
Mr. Wilson
These are things that most web
pages use
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.
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
Text Elements
Normal
text – default text format
used for the main content of a web
page.
Begin by inserting a <!DOCTYPE>
and four sets of tags
<html> (start and end of html doc)
<head> (start and end of a header)
<title> (start and end of a title) (appears
on the title bar, not on web page)
<body> (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 <!DOCTYPE>
Open notepad
Go to Format and Choose Word
Wrap
Page 38 in book
Save it as [your initials]chapt2.htm
Do #1 and #2
Both in your I drive in a Webpage
folder
Explain DOCTYPE
The body has a beginning and
ending and space for you to
enter information
<html> comes after the
<!DOCTYPE> and the ending
</html> tag comes at the end of
the entire document
<h1> through <h6>
<h1>
is the largest size
How to enter a heading?
Page
40 Figure 2-9 Step 1
Make sure you break text into
paragraphs of main ideas
<p> </p>
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
<br />
Breaks
a line of text
Browser will start a new line with
the text that follows the tag
Bulleted List (unordered list)
<ul> </ul>
Can have discs, squares, or circles
Default is discs
Numbered List (ordered list)
<ol> </ol>
Can use numbers, letters, or roman
numerals
Default is Arabic numbers (1, 2, 3)
Numbered and bulleted lists
(cont.)
If
you just use <ul> or <ol> then
the default is used
To specify, you must put it inside
the tag
<ul type=“circle”>
Numbered and Bulleted lists
(cont.)
<li>
and </li> are used for each
item that is bulleted or numbered
Look at: Page 42 Figure 2-11 and 212
Do: Page 43 Figure 2-13
Definition List
Offsets
information in a dictionary
like style <dl> </dl>
<dt> </dt> is used within for a term
<dd> </dd> is used for a definition
Page 44 figure 2-14 example
It will look like Figure 2-23 on page 49
Save it as a text file (.txt) and (.htm)
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
This is another way to get the coding if you didn’t
save the txt file correctly
<img src=“file name”/>
Figure 2-26 page 54
The code inserts the image and gives the
attributes of the image (includes height and
width)
<img src=“cts_clip8.gif" width="484" height="62"
alt=“Student Services Logo"/>
Rules for clips
Make sure the clip exists
Keep them close (same folder)
Go to the Q drive and copy and paste the file into the
same folder where your chapter 2 file is
Let’s change the image
Q drive
<img src="Boy_at_Desk_1.jpg” width="484"
height="62" alt="boy at desk"/>
Change the size to make it look less stretched
Search for free clipart on the internet
Save it into your drive
Insert it right after last image
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 <body> tag
Page 55 Figure 2-28 (complete)
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)
A line that runs across your page to act as a
divider
<hr/>
Page 57 has a list of types
Can change the size and the shading
Page 57 figure 2-31 (complete)
Page 64
Page 65, 66, & 67
Disregard the directions in the book
Create a web page that will display exactly what
figure 2-37 is in the book.
Same directions as above
Quick Personal Website (Q drive)
Chapter 2 Online Reviews (Q drive)
Chapter 2 Review (Q drive)