CSSRule: The Café HTML - CSS Tutorial II

Thursday, April 23, 2009

The Café HTML - CSS Tutorial II

There's a standard basic structure to every HTML document. This includes the html, head, and body tags. The html tag identifies your file as an html document, head is where title, style sheet and other document information go, and finally the body is where you build an HTML structure around your content. Your content may be just plain text, or include images, audio, and video clips.

In our case, all we have at the moment is text. So our file which I saved as "cafe.html" will now have the 4 basic HTML tags and look like the following.

<html>
<head>
<title>Four Square Cafe</title>
</head>

<body>
Four Square Café is located at the intersection of Melrose and Sunset Avenues in Los Angeles. We are a cafe with our own bakery, and also have a charcuterie for your favorite meats and cheeses. We offer breakfasts and made to order sandwiches. You can buy fresh, hot from the oven bread for your home twice a day, at 8 am and 5 am daily. In our Café, we are also famous for fresh organic coffee and tea made with mountain water. Each cup is in its own single cone and paper filter and dripped right into your cup. We then start over for the next customer.

Today's Specials
....................content deleted ..............................

www.4squarecafe.com 
</body>
</html>

You can follow this exercise by adding these tags into your "cafe.html" file. Save it and bring it back up in your browser again. The one difference that you will see is in the title window which will say, "Four Square Cafe" now. The text will still run into each other because we have not built any structure into the body element where our content, ie the cafe info resides.

See cafe.html for browser output