- Backup and Online Storage Services
- Browser Testing
- CrossBrowserTesting.com is probably the best, but it is not free. But it is without doubt the best that I know of.
- SauceLabs.com appears to be pretty much equivalent to the one listed above, and it also not free. But it is a bit less expensive.
- BrowserShots.org is the best FREE service. They also have a paid subscription if you need a bit more power in the testing. But for most sites, this service will be sufficient, even as a FREE service.
- Converters for Audio and Video
- Dropbox Shared Folder
- Editors
- FTP stuff
- Greeking Site (Lorem Ipsum)
- Handy Information
- HTML and CSS Templates
- Images Used in Handouts and Assignments
- Instructor's Completed Responsive HTML Site
- Instructor's In-Progress Site
- Online Magazines and Feeds
- Password Management
- Praxent "Creating a Website for Your Business" Resource Page
- References
- Software, Wallpaper, Sound Files, etc.
- Validators
- WebEx Online Class Meeting Site
- WebEx Recorded Meetings
Validators Back to Top
Template for creating a new HTML5 document: Back to Top
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="description" content="Introduction to designing and making Web sites">
<meta name="keywords" content="Web Design,HTML,CSS">
</head>
<body>
<div>
<header>
<h2>Page Heading</h2>
</header>
<section>
<h3>Section Heading</h3>
</section>
<footer>
<p>© Copyright 2021</p>
</footer>
</div>
</body>
</html>
Template for creating a new External Stylesheet (CSS): Back to Top
body
{
font-family: Arial, sans-serif;
}
html
{
box-sizing: border-box;
}
*, *:before, *:after
{
box-sizing: inherit;
}
Online File Storage Back to Top
- DropBox.com -- A very handy place in "The Cloud" where you can store your pages and files. It has a nice Web interface that you can use from anywhere, and you can also install a client app on your computer or smart phone.
- 4Shared.com
- MediaFire.com
- iDrive -- Secure, encrypted, long-term, online backup service for MULTIPLE devices
- BackBlaze.com -- Secure, encrypted, long-term, online backup service
- Carbonite -- Secure, encrypted, long-term, online backup service
- SugarSync -- Secure, encrypted, long-term, online backup service
- PortableApps.com (running apps from portable storage)
Password Management Back to Top
Online Magazines and Feeds Back to Top
Software, Wallpaper, Sound Files, etc.: Back to Top
- Journey Software
- OpenOffice Office Suite (Free)
- Partners in Rhyme Royalty Free Music and Sound Effects
- Royalty-Free Wallpapers
HTML Editors Back to Top
- Notepad++ is a great full-featured editor with excellent search and tag-matching capabilities. It is a text-only editor but it is FREE.
- Crimson Editor is a great full-featured editor with excellent search and color-coding capabilities for many different coding languages, of course including HTML. It is a text-only editor. It is FREE. You might see a reference to "Emerald Editor" on the download page; apparently Emerald has taken over Crimson but it is the same editor, and well worth looking at.
- HTML-Kit is a great full-featured editor with excellent search and tag-matching capabilities. It is a text-only editor but it does have a "browse/preview" mode. It is FREE.
- Dreamweaver is the best overall WYSIWYG HTML editor. You may use Dreamweaver in "Code" mode for this course, but not in "Design" mode. Cost: About $200 at JourneyEd.com.
- UltraEdit is probably the best HTML, CSS, and general text editor available. It is a text-only editor but it does have a "browse/preview" mode. Cost: About $60 at IDMComp.com.
- HomeSite was formerly the best HTML and CSS editor available. It is a text-only editor but it does have a "browse/preview" mode. Cost: About $100 at Adobe.com, if you can still get it.
- Notepad comes with every Windows installation. It is a very limited editor but it does a good job if you have none of the other text editors available. You can find it in the "All Programs", "Accessories" section of the main Start menu, or you can type Notepad into the "Run" box and press <Enter>.
If you are using a Mac or Macbook, here are some editors that you can try:
-
TextEdit comes with every Macintosh OS installation.
It is a limited
editor but it does a good job if you have none of the other text editors
available. You can find it in the "Applications" folder on your Mac.
Note Well: In order to use TextEdit, you must change the default formatting. Here are the steps to take:- Click the Format menu item.
- Click Make Plain Text.
- Brackets (free)
- TextWrangler (free)
- Sublime Text
- UltraEdit
- BBEdit
FTP Clients Back to Top
- Filezilla is an excellent FTP Client, and it is FREE! Make sure that you download the Filezilla Client, not the server.
- CuteFTP Home is an excellent low-cost FTP client. Cost: About $40 at Globalscape.com.
- WS_FTP Home is also an excellent FTP Client. Cost: About $40 at ipswitch.com.
- Fetch for Mac supports the FTPES protocol that the school server uses. It is free for students. You will need to apply at their site for an educational license.
Image-Editing Software and Image-Optimizing Services Back to Top
-
The GIMP is just as
powerful as PhotoShop and it is FREE! It also includes an image map
hot-spot editor.
Make sure you download the Installer for Windows 2000 and above. - Inkscape is a FREE SVG (Scalable Vector Graphics) image editor. It is even more important, now that sites are being made with Responsive Web Design (RWD) features, including scalable images.
- Photoshop is a premier, top-of-the-line image editor. The current version, CS4, is available for about $285 at JourneyEd.
- Mapedit is a very nice image map (hot-spot) editor. It creates HTML code that validates in the W3C's HTML validator, even. It is available for $15.00 (after a 30-day free trial period) from http://www.boutell.com/mapedit/.
- Paint comes with every Windows XP installation. It is limited in much the same way that Notepad is limited as a text editor, but it does a decent job in a pinch! You can find it in the "All Programs", "Accessories" section of the main Start menu, or you can type Pbrush into the "Run" box and press <Enter>.
- IcoFX is a FREE, very nice ICON CREATOR application. The Help section of this application even tells you how you can use the icon file as a SHORTCUT ICON for your Web site.
- You can also use a very nice online icon generator to make URL ICONS. It is http://www.favicon.cc.
-
One way to keep your page file size small is to optimize the images
on the page. You can use your graphics program to do the job, or
you can use some online services such as these to optimize GIF or
JPG images:
- http://www.spinwave.com (GIF and JPG Crunchers)
HTML Information and References Back to Top
- W3Schools -- HTML5 Tutorial (with lots of info about new HTML5 tags)
- W3Schools -- HTML Tag reference
- W3Schools -- HTML Character Entities
- W3Schools -- HTML Symbols
- Practical Web Design Magazine
- JavaScript Color Table
- Blooberry's "Colors in HTML and CSS" page
- Color charts at www.visibone.com. I think their "pinwheel" chart is the most helpful, but look around yourself and see what you find!
- Lorem Ipsum generator
- MIME Types
Cascading Style Sheet Information and References Back to Top
- CSS Reference -- at W3Schools site
- CSS Box Model -- at W3Schools site
- CSS Box Model -- at this class site
- Blooberry -- CSS and HTML Reference
- Project Cool -- CSS and HTML Reference
- CSS Zen Garden -- Lots of style sheets to look at and learn from
- Web Designs Group's CSS Info
- W3C's Main CSS Page
- w3schools.com CSS Tutorial, Samples, and Reference
- CSS Editing tools
- CSS1 Spec
- CSS2 Spec
Converters for Audio and Video Back to Top
Handy Information Back to Top
- Essential Handy Hints
- Handy Hints
- My Fall 2007 class developed a "Good Design List" that includes a fairly comprehensive list of good things that you can do to make a good web site. This list is a positive response to the two "Does Your Web Site Suck?" checklists at the http://www.webpagesthatsuck.com/ web site.
Back to Top
Images Used in Handouts and Assignments
(You can right-click on each image and save it to your /images folder, for instance.)
Back to Top
WebEx Recorded Meetings Back to Top
Fall 2021
- December 9, 2020 Media (<audio> and <video> tags)
- December 2, 2020 Forms (First hour)
- December 2, 2020 Forms (Second hour)
- November 18, 2020 Tables
- November 18, 2020 Lists
- November 11, 2020 Inkscape SVG Image Editor (First hour)
- November 11, 2020 Inkscape SVG Image Editor (Second hour)
- November 4, 2020 GIMP Image Editor (First hour)
- November 4, 2020 GIMP Image Editor (Second hour)
- October 28, 2020 Responsive Web Design (RWD) Menus
- October 21, 2020 Responsive Web Design (RWD) (First hour)
- October 21, 2020 Responsive Web Design (RWD) (Second hour)
- October 14, 2020 Links (<a> tag), (First hour)
- October 14, 2020 Links (<a> tag), (Second hour)
- October 7, 2020 Images (<img> tag)
- September 30, 2020 CSS (CSS Positioning) (First hour)
- September 30, 2020 CSS (CSS Positioning) (Second hour)
- September 23, 2020 CSS (Cascading Style Sheets) (first hour)
- September 23, 2020 CSS (Cascading Style Sheets) (second hour)
- September 16, 2020 Index Page (first hour)
- September 16, 2020 Index Page (second hour)
- September 9, 2020 Hosting a Web Site (Getting a Domain and a Hosting Service)
- September 2, 2020 Class Introduction (Password rSWQQ33k)
Summer 2020
- August 6, 2020 Promoting Your Site, and Good Things To Know (Password zNzjvvn2)
- July 30, 2020 Image Maps, and Inline Frames (Password PspNdxM3)
- July 23, 2020 First hour: Forms (Password Naub7yxs)
- July 23, 2020 Second hour: Forms, continued (Password uWf2mUyn)
- July 23, 2020 Last 30 minutes: Multimedia (Password RpSYDDc4)
- July 16, 2020 First half of first hour: Tables (Password Mr99Geq8)
- July 16, 2020 Second half of first hour: Tables, continued (Password kNem3dGQ)
- July 16, 2020 Last 35 minutes: Tables, continued; Assignment 11; Lists; and Assignment 12 (Password cPZ3BkGJ)
- July 9, 2020 First hour: GIMP Image Editor (Password pPJfCjV2)
- July 9, 2020 Second hour: Inkscape SVG Image Editor (Password pPfpNmu5)
- July 9, 2020 Last 30 minutes: Inkscape: Using an Object Tag; and Assignments 9 and 10 (Password Nm2K3FGT)
- July 2, 2020 First hour: Responsive Web Design (RWD) (Password yJp9N4XP)
- July 2, 2020 Second hour: RWD Navigation (Menus) (Password Cq92uUcC)
- July 2, 2020 Last 30 minutes: Assignments 7 and 8 (Password mGgHef2p)
- June 25, 2020 First hour: Images (Password PppQpsp2)
- June 25, 2020 Second hour: Hypertext Links (Password 4MfvDBfk)
- June 25, 2020 Last 20 minutes: Images as Links, and Assignments 5 and 6 (Password CrHpwew2)
- June 18, 2020 Full 3-1/2 hours: CSS and CSS Positioning (Password kJ7nEeCx)
- June 11, 2020 First part of class: Getting a Domain and a Hosting Service (Password yQX3NJtR)
- June 11, 2020 Second part of class: Making an Index Page (Password UsTPJFr7)
- June 4, 2020 Class Introduction and Syllabus (Password UdrWbFC5)