GD 65 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

What does “marking up” text mean? Basically, it means to add structure and meaning to the page. Specific tags, denoted by characters within angle brackets, are used to signify the beginning, and end of each element.

For example, to tell the web browser that the “Black Goose Bistro” is a heading, the text is marked-up into a heading element, using level-one heading tags:

<h1>Black Goose Bistro</h1>

The look of the heading, the typeface, type size and color, are set using a separate, supplementary presentation language: Cascading Style Sheets (CSS). In the example below, the CSS is defined internally inside the <head> of the HTML document. In this course, we will define our CSS externally in a separate CSS file.

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.

Figure: Anatomy of an HTML element.

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 images, form descriptions, and links to other pages.

Basic HTML

A simple example of a web page

XHTML

1

2

3

4

5

6

7

8

9

10

11

<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

A simple example of a CSS style for a webpage

CSS

1

2

3

4

5

6

p {

font-family:Arial,Helvetica,sans-serf;

font-size:12px;

color:#333333;

line-height:16px;

}

Additional Resources

One Column Layout

A designer follows a grid system when s/he creates a layout for a web page. Three of the most common layouts are the one column, two column, and three column layouts. Above is an image of what a basic one column layout looks like.

The HTML code and the CSS used to create a one column layout are outlined below. This is also the “starter code” you’ll use for the Assignment 3 Exercise (Part 1).

Basic HTML: One column layout

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

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