Basic Web Page
Download
Report
Transcript Basic Web Page
Many small businesses and organizations can
benefit from a Basic Web Page. The page will
introduce who they are and give contact
information so people can locate the
company and become a client. A company
that is not on the Internet is behind the
times. As you progress in your computer
literacy, you will find many uses for a Basic
Web Page.
PARTS OF A WEB PAGE
The first part of a web page is the <head>
section that ends in the word </head>. This is
where setup information goes. After that is the
<body> section ending in the word </body>.
This is where to place the things a customer or
end user will see on the page. Both sections
are enclosed with the tags called <html> and
</html>
In
the head section the programmer can
designate settings for different kinds of text
in the page. Each property ends with a
colon and each entry ends with a semicolon. For Example text-align: center; will
set up text to be centered. #57b1dc is an
example of a hexadecimal code that
declares a color. Do a search on the web for
“HTML color codes” to get your own color.
Change ALL the examples to your own
choices.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
font-family: serif;
font-weight: normal;
text-transform: uppercase;
border-bottom: 1px solid #57b1dc;
margin-top: 30px;
}
</style>
</head>
<body>
<h1><br>Black Goose Bistro</h1>
</body>
</html>
REVIEW
Basic Web Page
Parts Of A Web Page
<h1>
Code example
After
having designed the settings for <h1>,
the programmer must implement it into the
body. Text should explain what the web site
is all about. It should be clear to the end
user, but it should not be overly descriptive.
A picture can also be placed inside this
section to introduce the page concept.
The <img> command adds an image to the
page. It contains the information for a src
which will tell the web browser where to look
for the picture’s file. The alt text is an
attribute that will define what text should be
displayed if there is a problem loading the
picture. It stands for alternative.
EXAMPLE
<body>
<h1><img src="blackgoose.png" alt="Black Goose
logo"><br>
Black Goose Bistro</h1>
</body>
Implementing H1 Into The Body
<img>
Page Example
Code Example
IMPLEMENTING <H2>
We will use the <h2> tag to designate nice text
for our topic headings. In the <head> section
of the HTML code the color is shown in hex
(hexadecimal). Also, the number 1em is shown
to designate the increase in font size. Make
the 1 into a larger number to have larger
heading text. After the <head> section has its
options, the <h2> tag can be implemented into
the body.
In
the example the hex code #d1633c gives a
salmon kind of color. The # sign shows the
web browser that the number is using hex
and not a 10 based system. Hex is a 16
based system. It has 6 digits, but it doesn’t
just go from 1 to 10.
It uses 0 1 2 3 4 5 6 7 8 9 A B C D E F.
The web browser will create a color based on
the amount of red, green and blue shown in
the hex code. The first two digits of the code
are the amount of red so #FF0000. Would be
all red. The last two show blue with #0000FF
meaning all blue. #FF00FF would combine
red and blue for purple. #00FF00 would be
all green. #000000 is black. #FFFFFF is
white.
<head>
<style>
h2 {
color: #d1633c;
font-size: 1em;
}
</style>
</head>
<body>
<h2>The Restaurant</h2>
<h2>Catering</h2>
<h2>Location and Hours</h2>
</body>
Implementing
<h2>
How Hex Works
Hex to Red Green Blue
Code Example
HTML text can display paragraphs on the
page with the <p> tag that ends in </p>. By
placing text in this tag, the page will display
the information with a space at the end of the
line. Alternately, the text can end with the
<br> command to implement a “break” on
the page. Use the <p> command or the
<br> or any combination as you choose.
BOLD, ITALICS, UNDERLINE
<b> Bold Text </b>
<i> Italics Text </i>
<u> Underlined Text </u>
Each
section must begin with its tag and end
with a forward slash version of the tag.
There should be one <head> and one
</head>. There should be one <body> and
one </body>. Place as much configuration
information as needed in ONE <head>. Place
as much visible page information in one
<body>.
<body>
<p>The Black Goose Bistro offers casual lunch and dinner
fare in a hip atmosphere. The menu changes regularly to
highlight the freshest ingredients.</p>
<p>You have fun... <i>we'll handle the cooking</i>. Black
Goose Catering can handle events from snacks for bridge
club to elegant corporate fundraisers.</p>
<p>Seekonk, Massachusetts;<br>
Monday through Thursday 11am to 9pm,<br> Friday and
Saturday, 11am to midnight</p>
</body>
REVIEW
Implementing Paragraphs
Bold, Italics, Underline
Keeping the Sections
Code Example
Proper
html, head, and body placement (10)
Original <h1> settings (10)
Original <h2> settings (10)
Use of image command (10)
Restaurant, Catering and Location/hours
sections (30)
Overall Aesthetics (10)
Self evaluation including GRADE ON
SUBMITTED PAGE (10)
REAL WORLD USE
There are companies out there right now who
could benefit from having a simple web page so
people can know how to contact them and how
to buy what they are selling. This was a simple
introduction. However, an elegant and simple
page has value and is certainly better than not
being on the web at all.
Rubric parts 1 and 2
Real World Use
Code Example
The original author of the Black Goose
example is on
http://www.learningwebdesign.com