Class Notes

Creating Blog HTML Note
Posting Comment on your Blog Submitting Files


  1. Create a blog on By default, it will create the blog with your username and this blog will be for you to use throughout the time you are at BGSU.
  2. Create another blog for the class:
    • Go to and log in then go back to
    • Click Get another blog
    • Under Blog Name type artc2010m3username - replace username with YOUR username
    • It is IMPORTANT to use this naming scheme.
    • Blog Title should be Your name's ARTC 2010 M 3 Blog
    • It does not matter if you want your blog to appear in the search engine.
    • Blog Type: Student
    • Blog Subtype: College of Arts and Sciences
    • Click Create Blog
  3. On the next page, click LOGIN (in the text)
  4. Click the Design Tab and on the Themes tab:
  5. At the bottom, go to Page 4 and at the bottom of the page, click the Mandigo Theme
  6. At the top right, click Activate "Mandigo"
  7. Click the Design
  8. To see it, click Visit Site
  9. To customize the side bar, click Widgets then:
    • Click Add next to Calendar
    • Add Recent Posts
    • Add Recent Comments
    • Add Links: Blogroll
  10. Then SAVE
  11. Go to the Comments tab and remove the first comment (check mark and Delete)
  12. Click Settings and change the Tagline to Intermediate 3D Animation
  13. Save Changes


Adding content to the pages of your Blog:

To change the main page:

Click the Manage tab
Click Hello World and delete anything you don't want and add what you want to this main page. Change the title to Welcome.

Main Page - Welcome Post:

Make your first entry on the blog: On the main page of your blog, write a little bit about what you hope to do in the class, what your digital art strengths are (or what you like or are good at) and any other thing appropriate for a first posting for your class blog.

More POSTS (do not use PAGES):
For each post after this one, click the Write tab and put a title, then add what you want then SAVE and PUBLISH and View Site to check it out.
Images (Add Media):

When adding images you may have to use one method of uploading or the other (Flash or Browser Upload)


Test to make sure we can get to the blog from the class website (Student Page)

We will be using the blog to post ideas, research, exercises and assignments as well as using it to critique each others work.


2010 Project 4 technical notes


Key Terms and understanding the WWW

html - Hypertext Markup Language
Ascii - American Standard Code for Information Interchange
URL - Uniform Resource Locator. Address to any WWW site
Breaking down a website address (URL)

Scheme   = http://
server/root level   =
path/directory   = /path
file name   = /filename.html
   HTTP://      HyperText Transfer Protocol
FTP:// File Transfer Protocol
NEWS: Newsgroup
Gopher: Search Engine
Mailto: email
file:/// file on computer used when working in HTML editor
URL (Uniform Research Locator)
ABSOLUTE = entire path name
	Use if going to another site, or
RELATIVE = location with reference to the current URL

Things to remember when coding html
<> angle brackets tell the browser to read the text as script tags.

<> is an opening tag

</> is a closing tag.

Remember that tags must use the < angle brackets >

Most tags must have an opening tag: <B> and a closing tag: </B>

Basic Breakdown of an html Document
[3]<title> place title here </title>
     Visible information goes between Body tags.
  1. <html></html> :: Start and end tags of html doc.
  2. <head></head> :: Encases documents head
  3. <title></title> :: Identify documents title
  4. <body></body> :: Specifies body of document

    Body tag elements

    • background = image.jpg or image.gif
    • bgcolor = #rrggbb or color name
    • text = #rrggbb or color name
    • link = #rrggbb or color name (link color)
    • vlink = #rrggbb or color name (visited link color)
    • alink = #rrggbb or color name (mouse down link color)

hexadecimal color
The six digit number and letter combination (#000000 ---> #ffffff) represent the amount of RGB (Red, Green, Blue), from no color (00) to absolute color (ff). Numbering is in base 16, so there are 16 values for each integer, for example 0123456789abcdef; These number/letter variations can be combined to make 24 bit color (16.9 million hues) . The hexidecimal number (for example "0000FF") is referred to as a "RGB triplet."

White = #FFFFFF
Red = #FF0000
Green = #00FF00
Blue = #0000FF
Magenta = #FF00FF
Cyan = #00FFFF
Yellow = #FFFF00
Black = #000000
Grey = #C0C0C0
Lime Green = #32CD32
Steel Blue = #236B8E

preset colors
There are several pre-defined colors that current web browsers understand. For a complete list, see Browser Safe Colors

HTML Headings. There are six levels of headings available.


Heading level 1


Heading level 2


Heading level 3


Heading level 4

Heading level 5
Heading level 6

paragraphs and force line breaks

To write a paragraph in html you simple have to use the <p></p> tag. Word wrapping usually occurs after the use of 72 characters. Html eliminates any extra spaces between words. If you need extra spaces you can use &nbsp; within your text. This text in enclosed within <p></p> tags!


Here is another area of text enclosed with in a new set of <p></p> tags! If I wanted to force a line
break... such as I just did. I use the <br> tag.

Ascii special characters
©    &copy;     Copyright
®    &reg;     Registered Sign
¢    &cent;     Cent Sign
<    &lt;     less-than-sign
>    &gt;     greater-than-sign
&    &amp;     ampersand
·    &middot;     middle dot
¦    &brvbar;     broken bar
°    &deg;     Degree Sign

Working with Fonts

FACE = "fontname1", "fontname2", "fontname3"
   · (looks for those fonts in user's system folder);
   ·FACE="arial", "helvetica", "palatino"

size = "n"
   · where n=1 to 7
   · (default = 3, or 12pt) 8, 10, 12, 14, 18, 24, 36 pts

color = #rrggbb or colorname


<FONT face="courier" size="14pt" color="#00ff00">Hello World</FONT>
Hello World

<B> Bold Your Text </B>

<I> Italicize Your Text </I>

<U> Underline your Text </U>


Center text (or images) on the page
Horizontal Rule

width = "n"
   · where n=length in pixels
size = "n"
   · where n=size/height in pixels
align = left, center, right
   · how to align Horizontal Rule on the page
   · takes away shaded edge (solid gray line)
color ="#rrggbb"
   · gives solid color to HR

<hr width=100 size=20>

<hr width=100 size=2>

<hr align="left" width="25%" size="5" NOSHADE>

<hr align="left" width="25%" size="5" color="#551122">

loading images
<img src = "imagename.format>


Width = width of image in pixels
Height = height of image in pixels
Alt = "Message to display"
Align = top, bottom, center, left, right (Align text to image)

The image <img src="images/klee.jpg" width="100" height="100" border="0" align="middle" alt="paul klee"> is now on the page.

The image paul klee is now on the page.

creating links
<a href="relative or absolute address">Click Here!</a>




Open a link in a new window by using

<a href="" target="_blank">target=_blank</a>

Open a link in a new window by using target=_blank

use an image as a link:
<a href="" target=_blank><img src="images/Freud_bacon.jpg" width="100" height="100" align="middle" border="0"></a>

use an image as a link

accepted file types--acceptable file extensions:
 web files   sound files   image files   other 
 .html   .mp3   .jpg   .wrl 
 .htm   .aiff   .gif   .mov 
 .txt   .wav   .png   .mpg 
 .xml   .au      .swf 



Submitting Files


To Flatten and save your image to turn in: IN PHOTOSHOP:

  1. Layers > Flatten Image
  2. File > Save As...
  3. Choose type: TIF
  4. Check [X] As A Copy box. Do NOT check [ ] Layers box!
  5. Click Save
  6. Choose LZW Compression, Mac file type.
  7. Save to Desktop, your account, or Class Homework folder.

To Copy to Homework Folder: ON THE MACS:

On the Desktop:

  2. Click on default$. Click "Connect"
  3. Enter your BGSU Login and password (same as email)
  4. Double Click on GraphicArts$ drive on desktop
  5. Double Click on Classes folder.
  6. Double Click on ARTC2010M002.
  7. Double Click on YOUR folder (your last name) 8) Copy all five final images to your folder (drag and drop)