Basic Web Page Parts Of A Web Page The first part of a web page is the ltheadgt section that ends in the word ltheadgt This is where setup information goes After that is the ltbodygt section ending in the word ltbodygt This is where to place the things a ID: 528369
Download Presentation The PPT/PDF document "Many small businesses and organizations ..." is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
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.
Basic Web PageSlide2
Parts Of A Web PageThe 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>Slide3
<h1>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
semi-colon.
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. Slide4
<!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>Slide5
ReviewBasic Web PageParts Of A Web Page
<h1>
Code exampleSlide6
Implementing H1 Into The BodyAfter 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. Slide7
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.
<
img
>Slide8
ExampleSlide9
<h1> Image and Text
<body>
<
h1><
img
src
="blackgoose.png" alt="Black Goose logo"><
br
>
Black
Goose Bistro</h1>
</body>Slide10
Implementing H1 Into The Body<img>Page Example
Code Example
ReviewSlide11
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. Slide12
How Hex WorksIn 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
. Slide13
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.
Hex to Red Green BlueSlide14
<head>
<style>
h2
{
color: #d1633c;
font-size: 1em;
}
</
style>
</head
>
<body>
<h2>The Restaurant</h2>
<h2>Catering</h2>
<h2>Location and Hours</h2>
</body>Slide15
ReviewImplementing <h2>How Hex Works
Hex to Red Green Blue
Code ExampleSlide16
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.
Implementing ParagraphsSlide17
Bold, Italics, Underline <b>
Bold Text
</b>
<
i
>
Italics Text
</
i
>
<u>
Underlined Text
</u>Slide18
Keeping The SectionsEach 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>. Slide19
<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>Slide20
ReviewImplementing ParagraphsBold, Italics, Underline
Keeping the Sections
Code ExampleSlide21
Rubric Part 1Proper html, head, and body placement (10)
Original <h1> settings (10)
Original <h2> settings (10)
Use of image command (10)Slide22
Restaurant, Catering and Location/hours sections (30)Overall Aesthetics (10)Self evaluation including GRADE ON SUBMITTED PAGE (10)
Rubric Part 2Slide23
Real World UseThere 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. Slide24Slide25
Rubric parts 1 and 2Real World UseCode Example
The original author of the Black Goose example is on http://www.learningwebdesign.com
Review