Seminole State College - Web Publishing 1 Class

Contact Mr. D school email:
School Email:
School Website:

My YouTube Channel:

I recommend this book whole heartedly!!! 'HTML and CSS: Design and Build Websites'. It's GREAT for artists/designers with visual learning!!!! BUT... you don't have to have this book, and you can actually learn EVERYTHING about HTML through the

Get it on for around $15:

Projects: Checklist Due
1. Purchase $12 Hosting/Domain Name for a year with!!!! (write down user/pass)
Home Page with links to upcoming projects
(html - one webpage)
Video Tutorial Week 2
2. Fantasy (html - one web page) Notes Week 2
3. Storm (html - 3 web pages with button navigation) Notes Week 4
4. Double Identity (5 pages linked with html / css / div) Notes Week 8
5. Dentist Website (5 pages linked with html / css / div, and Contact Form) Notes Week 12
6. Business Website (Yoga studio, Hair Stylist, Restaurant, your choice) Notes Week 16
I've been a web designer since 2002. I've been teaching since 2003. I have my Masters in Fine Art from UCF
My Master's Thesis as a book Write HTML & CSS with:
MAC Text Wrangler:
PC Notepad + + :

Upload to hosting with:

Make folders and links on 'idex.html' page to future folders
In Class Assignment:
- HTML 101
  Start here
- First HTML
This is a zip file, to open see directions below, then rewrite all code from 'write_code_in_notepad.jpg' into notepad and save as 'index.html' Directions to ZIP or unZip a File

need more html help? here are 3 more sites that may help:
video tutorials -

HTML HELP!!!!!!!
create your first website page:

Week 1
Work: Basic HTML
Project: 'Fantasy' Webpage
* Disclaimer: Do not use Dreamweaver or a template. Project will not be graded.

Buy Hosting & Domian Name for $12 for first year   Mac html editor download
creating first website page with an html editor   PC : How to open and edit HTML files using Notepad
What is HTML?   HTML coding
HTML code formatting (structure)    

Week 2
'Hosting / Domain Name' DUE
Work: 'Fantasy' Webpage DUE

Download Filezilla, then use to upload website to Hosting    

Week 3
HTML / Tables / Navigation / Buttons
'Storm' Webpages
* Disclaimer:
Do not use Dreamweaver or a template based html editor. Project will not be graded.
Week 4
'Storm' Webpages DUE
Week 5
HTML / CSS / DIVs / Navigation / Colored Hyper Text Links
'Double Identity' Webpages
* Disclaimer:
Do not use Dreamweaver or a template based html editor. Project will not be graded.

Week 6
'Double Identity' Webpages
Week 7
'Double Identity' Webpages
Week 8
'Double Identity' Webpages DUE
Week 9
'Dentist' Website
* Disclaimer:
Do not use Dreamweaver or a template based html editor. Project will not be graded.
Week 10
'Dentist' Website
Week 11
'Dentist' Website
Week 12
'Dentist' Website DUE
Week 13
'Business' Website
Dreamweaver can be used

Week 14
'Business' Website
Week 15
'Business' Website
Week 16
'Business' Website DUE

- work on Tables, HTML, navigation

Files and Directories - Powerpoint: Download

In Class Assignment: Tables & Navigation

Homework: Storm (3 linked pages)

- work on Forms

In Class Assignment: Table with a Form

Homework: Replicated Form
1. Link your in-class assignments and homeworks on your home page on your online website
2. Make a new form that looks like this: form.jpg and link it on your website

File Directories on a server:

CSS Box Model:

Examples to understand
- Powerpoint
- CSS Tags
- CSS PRoperty Index
- text Shadow ( cool but doesn't work in Explorer :( uses the drop shadow on text

* Why CSS Powerpoint
* linked stylesheets
* Embedded Styles
* inline syles
* Basic Styles
* Fonts that are WebSafe Download

In Class Assignment: Basic CSS

Homework: Start on Resume (CSS Resume)

unordered bullets hovering over your image?
p, ul, ol {
width: auto;
overflow: hidden;

CSS Box Model conclude, onto position & layout
Class = .   

Homework: Use resume to make into website, use CSS.

* background image, fixed, repeat
* Ids vs classes
* <div> <span> tags
* Text and Font Styles
* box model
* margins, padding, border
* dimension

The BOX MODEL & POSITIONING in CSS chapter 4, & 5

* absolute
* relative
* fixed
* static
* positioning:
* floating:
* clearing

Homework: Finish Resume (CSS Resume)

Double Identity (Graphic Slices DIV/CSS} Double Identity (Download)

Slicing Double Identity in Photoshop

Homework: Graphic For Your Website like Double Identity (done in Photoshop)
Photoshop tutorials on how to use Photoshop to design a website:
Website Colors:
Examples of Graphic Design of Dentist Website

Spring 2006 Before & After

Click on design to see bigger


Fall 2015

Examples of Graphic Design of Business Website


Make Rollover Buttons with CSS:
Serif Vs Sans for websites:
Add SEO (Search Engine Optimization) to your website:
Sticky Menus:
Facebook Banner/Profile examples:

Time to work on your Portfolio website

- Lightbox for Photo Gallery
- Usabilty Survey Download

Do Survey of this class in Portal

Homework: Portfolio Website (XHTML/CSS - 5 web pages)

PDF of html/css book download