Class 03A

Topics
Marking up text
HTML
  • Tags
  • What the heck is a “Div”?
  • HEAD & BODY Sections
  • Basic HTML
  • Basic CSS
  • Additional Resources
Basic HTML: One column layout
Basic CSS: One column layout

 


Marking up text

Chapter 4 exercise

<html>
<head>
  <title>Black Goose Bistro</title>

    <style type="text/css">
    body { background-color: #C2A7F2;
    font-family: sans-serif;}

    h1 { color: #2A1959;
    border-bottom: 2px solid #2A1959;}

    h2 { color: #474B94;
    font-size: 1.2em;}

    h2, p { margin-left: 120px;}
    </style>

</head>
<body>
  <h1><img src="blackgoose.gif" alt="black goose logo">Black Goose Bistro</h1>

    <h2>The Restaurant</h2>
     <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>

    <h2>Catering</h2>
     <p>You have fun... <em>we'll handle the cooking.</em> Black Goose Catering can handle
     events from snacks for bridge club to elegant corporate fundraisers.</p>

    <h2>Location and Hours</h2>
     <p>Seekonk, Massachusetts;
     Monday through Thursday 11am to 9pm, Friday and Saturday, 11am to midnight</p>
</body>
</html>

HTML

Figure 1 shows the anatomy of a typical HTML element.

A typical HTML element

Figure 1: Anatomy of an HTML element.Read Figure 1 description

Tags

An HTML tag is always contained between a left angle bracket “<” and a right angle bracket “>”. These tags are special instructions designed to mark or “tag” a particular section of the web page, for example to identify a set of text as bold. The tags do not appear in the visual display of the web page. In general, HTML tags have a starting tag “<tag>” and an ending tag that has the same name as the starting tag but with a forward slash at the beginning “</tag>”. The text in between the starting and ending tags is the only text affected by the tags.For example, to make some text bold, the HTML would be written as follows:Here is some text, and <b>this text will show bold</b> when displayed in a browser.

What the heck is a “Div”?

The <div> tag defines a division or a section in an HTML document. The <div> tag is often used to group elements to format them with styles. With divs you’ll be able to create one-column, two-column and three-column layouts. These layouts are the beginning structure for most page layouts.

HEAD & BODY Sections

An HTML web page is divided into to two major sections, the head and body. The head section is a description of the page, with its title, any meta tags, JavaScript, and other special information about the page. The head section does not contain any displayed content. The body section contains a description of how the page should look and work, including the text, text markup, links for in-line images, form descriptions, links to other pages, and page enhancements such as Flash, JavaScript, etc.

Basic HTML

A simple example of a web page

<html>
<head>
   <title>Basic HTML</title>
</head>

<body>
<p>Some text for a web page that demonstrates the basic
form of HTML in a web page.</p>
</body>

</html>

Basic CSS

 p {
  font-family: Arial, Helvetica, sans-serf;
  font-size: 12px;
  color: #333333;
  line-height: 16px;
}

Additional Resources

HTML Cheat Sheet
CSS Cheat Sheet

Basic HTML: One column layout

<html>
<head>
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">

<div id="header">
</div>

<div id="content">
</div>

<div id="footer">  
</div>

</div>
</body>
</html>

(Remember, the <div> tag defines a division or a section in an HTML document. The <div> tag is often used to group elements to format them with styles.)

Basic CSS: One column layout

*{
    margin: 0px;
    padding: 0px;
}

body {
    margin-left: 0px;
    margin-top: 0px;
}

#wrapper {
    width: 990px;
    margin-right: auto;
    margin-left: auto;    
}

#header {
    height: 150px;    
}    

#content {
    background-color: #FFF;
}

#footer {
    height: 50px;
    background-color: #f3f2f2;
}


Comments

No comments yet.

Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

jamie

Instructor for Graphic Design 65