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.

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>

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

<!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

IMPLEMENTING H1 INTO THE BODY 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.

<img>

EXAMPLE

<H1> IMAGE AND TEXT<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

Review

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.

HOW HEX WORKS 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.

Hex to Red Green Blue

<head><style>h2 {

color: #d1633c;font-size: 1em;

}</style></head><body><h2>The Restaurant</h2><h2>Catering</h2><h2>Location and Hours</h2></body>

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

Implementing Paragraphs

BOLD, ITALICS, UNDERLINE

<b> Bold Text </b> <i> Italics Text </i><u> Underlined Text </u>

KEEPING THE SECTIONS 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

RUBRIC PART 1 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)

Rubric Part 2

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 2Real World UseCode Example

The original author of the Black Goose example is on http://www.learningwebdesign.com

Review

Documents

Basic Web Page