Course notes
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses

Intro to Interactive Art 2

January 13th, 2011


Overview:

  1. Dreamweaver
  2. HTML template
  3. Indenting
  4. Title
  5. Headers
  6. Line breaks
  7. Paragraphs
  8. Horizontal rules
  9. Fonts and CSS
  10. Lists
  11. Images
  12. Links

Dreamweaver

Dreamweaver is software that can help make online web development easier. Unfortunately, it's WYSIWYG ability is very poor and should not be used. It is good for other things though, like code coloring. It can also help you keep track of files and websites and automatically upload files when you save.

At this point, please open up Dreamweaver.

HTML template

Every HTML file must have at least three tags.

The <html> tag contains the entire document. Within that, there are two 'child" tags, <head> and <body>.

Create a new file in Dreamweaver (File->New - Basic - HTML - XTML 1.0 Transitional)

You'll notice it already has all three of these tags including their respective close tags.

Indenting

Indenting code is important for not only ease of viewing, but also to greatly help out future developers who may need to edit your code.

Code is intented to show hierarchy. It is technically uneccessary, but HIGHLY recommended, and a MUST for a class like this where your instructor will need to look at your code.

<html>
     <head>
          <title></title>
     </head>
     <body>
          Site information here
     </body>
</html>

Title tag

Between the <head> tag and the </head> tag, you'll notice a <title> tag.

This tag controls the title the page (who would have thought?!). Enter your own title, save the file, and click the Preview button near the top of your screen (small Earth icon).

You'll notice your title in the top bar of the browser!

Headers

<Hx> where x=1 to 6;
1=BIGGEST, 6=smallest

Example: <H1>Hello There</H1>

Hello There

Headers can be more than one line long. They include a break after the closing tag without requiring the use of a line break tag.

Header size 1 <H1> or Times 24 point

Header size 2 <H2> or Times 18 point

Header size 3 <H3> or Times 14 point

Header size 4 <H4> or Times 12 point

Header size 5 <H5> or Times 10 point
Header size 6 <H6> or Times 8 point

Line Break <br />

A line break is like hitting return/enter on your keyboard. It moves the content following it to the following line

A line break does not need a close tag, but instead, self-closes.


Paragraph tag

A paragraph <p> defines a paragraph.

Example:
<p>This is text in a paragraph.</p>

It creates space before and after itself and is a block level element, but can only contain inline elements.


Horizontal Rule

<hr> creates a line, which is useful for separating sections of your document.
Attribues: SIZE (thickness), WIDTH (length) and ALIGN (justification).
Size = number, Width = %, Align = left, center or right.

<hr size="3" width="50%" align="left";>


Manipulating Fonts with CSS

Font color:
Ex: This is a sentence contained in a font tag. Code: <FONT style="color:#00CC00;">This is a sentence contained in a font tag.</FONT>

COLOR = #RRGGBB (hexidecimal equivalent)
You will have a larger range of colors to pick from by using the HEX #.
To find HEX # for a specific color, use the color picker in Photoshop--the HEX # number is listed at the bottom of the picker window.

Font size:

Ex: This is a sentence contained in a font tag.
Code: <font style="font-size:24px;">This is a sentence contained in a font tag.</font>

The options for the size tag are:
font-size:16px;
font-size:150%;
font-size:x-large;

Font family:
Ex: This is a sentence contained in a font tag.
Code: <font style="font-family:'Times New Roman', Times, serif;">This is a sentence contained in a font tag.</font>

Different Families: Arial, Helvetica, sans-serif Times New Roman, Times, serif Courier New, Courier, monospace

This attribute is telling the browser to: 1- Look for Times New Roman(family-name) in the user's system, or if that isn't available.. 2- Look for Times, or if that's not available.. 3- Look for a serif (generic-family), or if that's not available.. 4- Use their default system font..

Font weight: Ex: This is a sentence contained in a font tag.
Code: <FONT style="font-weight:bold;">This is a sentence contained in a font tag.</FONT>

Font style: Ex: This is a sentence with italic in the font tag.
Code: <FONT style="font-style:italic;">This is a sentence with italic in the font tag.</font>

To combine styles use a semi-colon between each style component: Ex: This is a sentence with lots of style attributes.

Code: <font style="font-size:16px; color:#CC0000; font-weight:bold; ">This is a sentence with lots of style attributes.</font>

Other tags for manipulating fonts (without CSS)

<STRONG>BOLD / STRONG text </Strong>

<EM>Italicized / Emphasized text</EM>

<TT>Typewriter (monospace) font</TT>

<U>Underline text</U> Be forwarned it can be confusing because links are also underlined.

<S>Strike</S>

Footnote1 uses the <sup> superscript: April 24<sup>th</sup>

Chemical names use subscript <sub>H2O</sub>


Lists

<ol>
      <li> Put an item here</li>
      <li> Put an item here</li>
      <li> Put an item here</li>
</ol>


Ordered list
<ol></ol>

These are the types of ordering:
1. style="list-style-type: upper-alpha;" -will give you A B C D E F G...
2. style="list-style-type: lower-alpha;" -will give you a b c d e f g...
3. style="list-style-type: decimal;" -will give you 1 2 3 4 5 6 7 8 9... THIS IS THE DEFAULT!
4. style="list-style-type: upper-roman;" -will give you I II III IV V VI... Roman Numerals
5. style="list-style-type: lower-roman;" -will give you i ii iii iv v vi... small roman numerals

Using the list item tag <li> will put each item on a separate line, instead of using a line break.

List One:
  1. I. Chapter 1 - Introduction
  2. II. Chapter 2 - Birth
  3. III. Chapter 3 - Childhood
  4. IV. Chapter 4 - Adolescence
  5. V. Chapter 5 - Adult

CODE for list one:
<ol>
      <li>I. Chapter 1 - Introduction</li>
      <li>II. Chapter 2 - Birth</li>
      <li>III. Chapter 3 - Childhood</li>
      <li>IV. Chapter 4 - Adolescence</li>
      <li>V. Chapter 5 - Adult</li>
</ol>


List Two:
  1. Chapter 1 - Introduction
  2. Chapter 2 - Birth
  3. Chapter 3 - Childhood
  4. Chapter 4 - Adolescence
  5. Chapter 5 - Adult
CODE for list two:
<ol style="list-style-type: decimal;">
      <li>Chapter 1 - Introduction</li>
      <li>Chapter 2 - Birth</li>
      <li>Chapter 3 - Childhood</li>
      <li>Chapter 4 - Adolescence</li>
      <li>Chapter 5 - Adult</li>
</ol>


List Three:
  1. Chapter 1 - Introduction
  2. Chapter 2 - Birth - (Notice I've changed the TYPE!)
  3. Chapter 3 - Childhood
  4. Chapter 4 - Adolescence
  5. Chapter 5 - Adult
CODE for list three:
<ol style="list-style-type: upper-alpha;">
      <li>Chapter 1 - Introduction</li>
      <li style="list-style-type: upper-alpha;">Chapter 2 - Birth</li>
      <li >Chapter 3 - Childhood</li>
      <li>Chapter 4 - Adolescence</li>
      <li>Chapter 5 - Adult</li>
</ol>

Unordered lists
<UL></UL>
Attributes: TYPE
An Unordered list is made with bulleted points. There are THREE Types of bullets:
  • style="list-style-type:disc;" is the DEFAULT and is a solid ball <li style="list-style-type:disc">
  • style="list-style-type:circle;" will give you an empty circle <li style="list-style-type:circle;">
  • style="list-style-type:square;" will give you a square <li style="list-style-type:square;">
  • I have selected the list style type to be square in the <ul> tag: <ul style="list-style-type:square;"> for this list.
  • But I can OVERRIDE it by changing it's css in the li tag!
  • This way you can intermix discs, circles, and bullets in the same list.
 
Definition lists
<DL></DL>
Instead of list Items, you have two parts, <DT> and <DD> within the list:

CODE for Definition list:
<DL>Define your Definition liST with DL
      <dt>Definition Title DT</dt>
            <dd>Definition DD</dd>
      <dt>Another Word</dt>
            <dd>Another Definition</dd>
      <dt>Another Word</dt>
            <dd> Another Definition</dd>
</DL>

Nested lists
You can have lists within lists, or an Outline-type list (Table of Contents, etc.)
The OFFICIAL Outlining order for lists is: I, A, 1, a, i.
If you nest an UNORDERED list, the default order is: disc, circle, square, and square for rest.
  1. Chapter 1 - Lifestages
    1. Lifestages of a fruitfly
    2. Lifestages of a paramecium
    3. Lifestages of a Butterfly
      1. Egg stage
        1. Many eggs laid at once
        2. Hatch 2 minutes after laid
      2. Pupa
      3. Larvae
      4. Adolescence
      5. Adult
      6. Death (they only live a couple days)
  2. Chapter 2
  3. Chapter 3
  4. Chapter 4
CODE for Nested list:
<ol style="list-style-type: upper-roman;">
      <li>Chapter 1 - Lifestages</li>
     <ol style="list-style-type: upper-alpha;">
          <li>Lifestages of a fruitfly</li>
          <li>Lifestages of a paramecium</li>
          <li>Lifestages of a Butterfly</li>
          <ol style="list-style-type: upper-alpha;">
               <li>Egg stage</li>
               <ol style="list-style-type: upper-alpha;">
                    <li>Many eggs laid at once</li>
                    <li>Hatch 2 minutes after laid</li>
               </ol>
               <li>Pupa</li>
               <li>Larvae</li>
               <li>Adolescence</li>
               <li>Adult</li>
               <li>Death (they only live a couple days)</li>
          </ol>
     </ol>
     <li>Chapter 2</li>
     <li>Chapter 3</li>
     <li>Chapter 4</li>
</ol>


Adding CSS:
Replace the TYPE attribute with a STYLE attribute using list-style-type / list-style-position / list-style-image.
list-style-type: choose one of the following bullet styles
none, square, disc, circle, upper-alpha, lower-alpha, upper-roma , lower-roman, decimal (choose one)
EX: <ol style="list-style-type:circle;">
list-style-position: inside or outside
inside - Indents the marker and the text.
outside - Keeps the marker to the left of the text
EX: <ol style="list-style-position:inside;">
  1. Put this inside
  2. Put this inside
  1. Put this outside
  2. Put this outside
list-style-image: url('image location')
EX: <UL style="list-style-image: url('images/arrow.gif');"> --single quotes around image pathname.
  • arrow bullet
  • arrow bullet
  • arrow bullet

Images

An image is represented by an <img /> tag.
It's most used attributes are:
  • src - the "source" or file path to the image
  • height - the height of the image*
  • width - the width of the image*
  • alt - this is the "alternate" text and is used for people who have sight problems or who have turned off images in their browser.
  • border - specifies the width in pixels of the image border.

*if an image doesn't have a height and width, the browser doesn't know how to render it until it loads, sometimes making the page "jump" as it loads. It's for this reason, that you should always include a height and width for all images.

An image tag is self closing.

Images should be in a folder (relative to HTML files) prior to inserting them into the HTML doc. The standard for images is to actually put them in an "images" folder.

EX: <img src="images/picture.jpg" width="35" height="34" border="2" alt="logo" />

BORDER attribute puts an outline around the image.

Links

1. Destination: What happens when we click on that link?
  • Hypertext = go to another URL
  • Mailto: = send mail to someone
  • download a file
  • open up an image, sound, quicktime, or some other type of file
2. Label: What the visitor will SEE and clicks on to get there (image, text).
  • (The underlined part that we actually click on).
3. Target: a particular named window or frame in which the link will open
  • Open in Existing Window, replacing the current page (DEFAULT)
  • Open in a NEW window ( TARGET="_blank" will give you a NEW window)
  • Open in an assigned window

Hypertext / URLs - <A HREF>

For a RELATIVE URL: Click Here to go to the syllabus
Code: <a href="../index.html">Click Here to go to the syllabus</a>

For an ABSOLUTE URL: Click Here to go to BGSU site
Code: <a href="http://www.bgsu.edu">Click Here to go to BGSU site</a>

The important things to remember about your A HREF tag:
• HREF="don't forget to put your URL or page in quotes!"

• use "http://" when using ABSOLUTE URLs!

Anchors
An anchor will jump directly to a specified section within a page.
There are TWO parts to an anchor:
1. Placing the Anchor -- the destination of the link that is clicked.
• Code: <a name="myAnchor"></a>
• I placed an anchor at the top of this page -- anchors are invisible to the viewer.
2. Link to the anchor
• Code: <A HREF="#myAnchor">Click to go to TOP of Page</A> Click to go to TOP of Page

• If the anchor is on another page, then you have to include the name of the page:
<A HREF="myPAGE.html#myAnchor">

You can put them in your own pages OR reference others' existing anchors, but you can't add an anchor to someone else's page.
 
Targets
By default, a link will open in the SAME WINDOW that contains that link, replacing the contents with the new link. If you don't want people to lose your home page, have the link open in a NEW window by using the TARGET attribute
:
To open a link in a new, EMPTY window, use TARGET="_blank" in the A tag: <A HREF="http://bgsu.edu" TARGET="_blank">
-or-
If you want ALL of the links from your page to open in a new page, put the code in the HEAD:

<HEAD>

<BASE TARGET="_blank">

</HEAD>

Target="_blank" causes the link to open in a totally new browser window.
 
Mailto: Link (does not work with BG Mail)
Click Here To Email Me!
Code: <a href="mailto:bonniem@bgsu.edu">Click Here To Email Me!</a>
 
Graphic Links make images act as BUTTONS.
caricature
Code:
<a href="http://www.google.com" target="_blank"><img src="images/caricature.jpg"></a>

By default, your image will have a border around it to indicate that it contains a link (depending on the browser).
However, you can eliminate that border with border='0' in the anchor tag.

If you don't want any border, type in border='0' within the <a href> tag, otherwise the image will have the default link color around it.

<img src="picture.gif" border="0">


HOMEWORK DUE


HOMEWORK DUE: Ex 1: Five Interfaces

Description: Search the web for 5 good unique and artistic interfaces that were designed using HTML. Email all 5 URLs to your instructor in one email with subject "ARTC331- Exercise 1 - Five Interfaces"
DUE: TODAY