1 / 25

Basic Web Page

Basic Web Page.

abba
Download Presentation

Basic Web Page

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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> Parts Of A Web Page

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

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

  5. Basic Web Page Parts Of A Web Page <h1> Code example Review

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

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

  8. Example

  9. <h1> Image and Text <body> <h1><imgsrc="blackgoose.png" alt="Black Goose logo"><br> Black Goose Bistro</h1> </body>

  10. Review • Implementing H1 Into The Body • <img> • Page Example • Code Example

  11. 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. Implementing <h2>

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

  13. Hex to Red Green Blue • 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.

  14. <head> <style> h2 { color: #d1633c; font-size: 1em; } </style> </head> <body> <h2>The Restaurant</h2> <h2>Catering</h2> <h2>Location and Hours</h2> </body>

  15. Review • Implementing <h2> • How Hex Works • Hex to Red Green Blue • Code Example

  16. Implementing Paragraphs • 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.

  17. <b> Bold Text </b> <i> Italics Text </i> <u> Underlined Text </u> Bold, Italics, Underline

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

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

  20. Implementing Paragraphs Bold, Italics, Underline Keeping the Sections Code Example Review

  21. Rubric Part 1 • Proper html, head, and body placement (10) • Original <h1> settings (10) • Original <h2> settings (10) • Use of image command (10)

  22. Rubric Part 2 • Restaurant, Catering and Location/hours sections (30) • Overall Aesthetics (10) • Self evaluation including GRADE ON SUBMITTED PAGE (10)

  23. 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. Real World Use

  24. Review Rubric parts 1 and 2 Real World Use Code Example • The original author of the Black Goose example is on http://www.learningwebdesign.com

More Related