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.

Chapter 4 exercise


HTML

Figure 1 shows the anatomy of a typical HTML element.

typical_html

 

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

Basic CSS

A simple example of a CSS style for a webpage

Additional Resources

HTML Cheat Sheet
CSS Cheat Sheet


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

(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


Next Page  >  Class 03B Notes

Leave a comment