Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

Tuesday, June 3, 2008

Class 4 - Resources

Here is a Presentation on CSS

Basic Style Demonstration files:

  1. Simple Style Sheets (Internal and External)
  2. Styles using Simple Tables
  3. Boxes and Heading (Not used in class)

CSS in Blogs?

Here is a normal large Heading:


Here it is with style!



The normal Code:
<div align="center"><em><strong><span >Here is a normal large Heading:</span></strong></em></div>

The Styled Code:
<div style = "border:thick black solid; background-color:silver;text-align:center;padding: 10px; font-size:280%;"><em><strong>Here it is with style!</strong></em></div>

The Main problem is that each time you view the preview or post, blogger changes the code to "their"standard. It looks the same but may be more complicated.



Thanks to Ben Suter for the character converter. Check out his other tools.

Tuesday, May 27, 2008

Class 3 - Materials






A few quick shots:


To change the background image for a whole document:


<body style="background-image:url('blueswatch.gif');">


To change the font for a whole document put this line after the body tag:


<div style="FONT-family:times; font-size:18pt;color:white;">

A font-family is a prioritized list of font family names and/or generic family names . The browser will use the first value it recognizes so be sure to include enough description.

There are two types of font-family values:

  • family-name: The name of a font-family, like "times", "courier", "arial"

  • generic-family: The name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace".

Always offer a generic-family name as the last alternative.

Note: If a family-name contains white-space, it should be single-quoted.

<div style="FONT-family: ‘Comic Sans MS’,cursive; font-size:18pt;color:white;">

The line above will display Comic Sans or another cursive font if it is not available

To set the color and behavior of links in HTML

EXAMPLE:

In the head of your page put code like this to get white links, no underline and a change when the mouse is over them. When visited the link will turn red and when hovering the link will turn green. It will turn white after you click before the new page loads.

<Head>

<style type="text/css">

a:link {color:White;text-decoration:none;}

a:visited {color:red;text-decoration:none;}

a:hover {color: green;text-decoration:none;}

a:active {color:white;text-decoration:none;}

</style>

<head>

Thursday, May 22, 2008

So Why The Same Graphic Twice?

This is a link to [533] Resources!
Yesterday I posted an image that was made with ButtonShop3. When I got to class last night it didn't show up. Why? I'm not sure. The computers in the classroom were Macs. The format of the graphic in yesterday's post was png, i.e. portable network graphic. This one is a simple jpg.
Can you see the difference? The jpg is 4 kb and the png is 24 kb, is the png file six times better. I won't use png's any more.

Wednesday, May 21, 2008

CEd 533 - Resources

There should [533] button here! So where do you get a cool button? Cooltext.com will help you with the button or... you can buy a program that will do it.
The button above was made with ButtonShop3 from Kristanix software. Today, May 21, 2008 it is the GiveAway of the day. Check it out

Thursday, May 8, 2008

CEd 533 - Class 1 - Resources

Please fill out this form for me so that I have up to date information about each of you.

Study team logs will be done with a Google Form that Louis assembled and I modified slightly. [Click to fill out this Study Team Form]

Here is the presentation on the History of the Internet. (via Slideboom)





Here is the 1st night Handout: (Via Scribd)







Read this doc on Scribd: makeapage06

Monday, April 28, 2008

CEdu 533 - How the Web Works

This course examines the origins, history and evolution of the Internet and World Wide Web. Students develop skills in page design concepts, simple html, including the basic use of Javascript and Java applets. Students also investigate page production tools, development of web-based content, content management systems, on-line web applications and curricular examples. 3 graduate credits.

  • Greendale Middle School – AMEC-AA-0024
    Greendale: May 14, 21, 28; June 4, 11, 18 - 5:00 - 9:00 PM

  • Summit Elementary (Oconomowoc) – AAMEC-AA0023
    Oconomowoc: May 13, 20, 27; June 17, 24; July 1 - 5:15 - 9:15 PM

    Documents you might want to use:

  • Course Syllabus: Greendale and Oconomowoc

  • Assignment 3:

  • Using FireFtp with FireFox

  • Glossary of Terms (PowerPoint, not used in class)


Lots of web resources specifically for this course: http://faculty.stritch.edu/jmsklar/533


We will be doing ftp, file transfer protoco, during this course. You will need an ftp client for your computer. If you don't already use one, i.e you are not a complete geek, I have created a portable ftp client setup for you. You can download it now and install it to your USB or Pen drive or wait and do it in class. A pen drive will be useful.

Go to this link: http://faculty.stritch.edu/ced/533/FZ/

IMPORTANT: Right click on the installfilezilla.txt file and select save Target As...

Change the filename to installfilezilla.exe (be sure you know where it is saved!)

All you need to do is double-click on this file and follow the directions.

So why do we need to do this filename dance? Because the server won't let us download an executable file.