Class April 5

Free (and cheap) Web-building Software

I will go over some great web applications I’ve used to create and enhance websites. For a list of these resources please click here for my handout.

Web Hosts

We’ll also talk about web hosts- what they are, how to evaluate them, and what are some of the good ones out there.

I like www.hosting-review.com for comparing web hosts.

Course Evaluation

I have a brief course evaluation for you to fill out. Thanks for your feedback!

Questions and Wrap Up

Please feel free to ask me about HTML, CSS, or any other web-related questions.

Help Going Forward

Please feel free to email me with any questions at agoldsberry@gmail.com. I also highly recommend making use of www.w3schools.com whenever you need help with HTML, CSS, and other website-building tools.

Thoughts from Last Week:

Comment tags

We talked about comment tags, which are comments that you can leave in a CSS or HTML file for others so you can communicate without those words being displayed online.

HTML comment tag:

< ! – -Your comment here- – >

CSS comment tag:

/* Comment */

Mind those semi-colon’s!

I missed a semi-colon in the CSS Style Sheet (also on the handout) after the color for h1.  It still worked for some people but not others.  Sometimes browsers can be forgiving but you always want to make sure you don’t leave out important pieces of coding such as semi-colons, quotation marks, the closing tag with />, etc.

 

CSS Recap

Last week we learned about CSS (Cascading Style Sheets) and how it is used to control how a website looks.

What is CSS?

Basically, CSS controls how your content looks (font, headlines, pictures, etc.) while HTML controls the layout of your content. They work together to tell a web browser (Firefox, Internet Explorer, etc.) how your website should appear online. However, CSS can also control the layout of your website- for example, it can be used to create a three-column layout that has distinct left, middle, and right sections. To see a great example of this please see http://lissaexplains.com/css3.shtml.

CSS is very useful because it allows you to build your website so you don’t have to create everything by hand for each web page you create. It controls font, font size, font color, link color, and other important style attributes on your website. With one style sheet you can control all of these style attributes on each page of your site, so if you wanted to make changes, you only have to change one document rather than making each change individually on each page of your site.

If you end up working on a website that has already been created then you will be able to edit and modify the existing style sheet rather than having to create a new one.

CSS Handout

Click here for the CSS handout (updated September 28, 2010).

How do I Create a Cascading Style Sheet?

You can create a cascading style sheet in Notepad or Dreamweaver. You must save it as .css (example- stylesheet.css) or else it will not be understood to be a CSS file. Generally, style sheets are called stylesheet.css.

There are both internal and external style sheets. We created both in class. External style sheets are separate files that need to be linked to your website by a small line of code that goes in the <head> section of a webpage. An internal style sheet would be adding the style sheet code directly into the code of the webpage. It also goes in the <head> section of the webpage but the code is different.

External style sheet code (goes in head section)

<link rel=”stylesheet” href=”NAME_OF_YOUR_STYLESHEET.css” type=”text/css”/>

As long as this line of code is in the head section of every page of your website your style sheet will control how the entire site looks.

Internal style sheet code (also goes in head section)

<style type=”text/css”>

Followed by all of your elements (h1, a:link, body, etc.)

</style>

This type of style sheet only applies to that particular page for which it is coded.

Here are two great websites to help you with your CSS coding:

http://www.w3schools.com/

http://lissaexplains.com/css.shtml

Web-Safe Fonts and Colors

When we learned CSS we talked about web-safe fonts and colors, which will always look the same in all browsers.

There are serif and sans-serif fonts. Serif fonts look good printed on paper and sans-serif fonts look good on a computer screen in a browser. A prominent serif font is Times News Roman. A prominent sans-serif font is Arial. Other sans-serif fonts are Verdana and Georgia. Arial is often used on websites.

Here is a good website with some more information about web-safe fonts:

http://www.w3schools.com/css/css_websafe_fonts.asp

Web-safe colors are colors that will always appear the same in each browser. They are also usually known by a six-digit combination of letters and numbers (ex. #000000).  You can also use their names- see that here http://www.w3schools.com/html/html_colornames.asp.

Here is a good website with a list of web-safe colors and their values:

http://andrew.hedges.name/web_safe.html

March 29 Update

I apologize for the delay in updating our class website. The site was down for awhile and was read-only so I couldn’t update it.

Anyway, below is a review of what we’ve covered, including some important handouts and helpful links.

HTML vs CSS

HTML and CSS work together to tell the web browser (Firefox, Internet Explorer, etc.) how your website should look. Basically, CSS controls how your content looks (font, headlines, pictures, etc.) while HTML controls the layout of your content (the location of text, pictures, etc.).

We have learned basic HTML tags and last week created an external CSS stylesheet that controlled things like how links should look (e.g. change color when you roll your mouse over it) and what type of font to use (web-safe fonts like Arial, Georgia, Verdana).

This week we will see an example of an internal stylesheet and how CSS can also helps us create a website with defined sections such as two-columns, three columns with a header, etc. An external stylesheet can control how an entire website looks while an internal stylesheet applies only to the page for which it is coded.

Last Class Next Week

Next week is our last class! We will learn about web hosting and free (or cheap) website building applications. Also, we’ll of course discuss any issues that are important to you and answer any questions.

Handouts We’ve Been Using

HTML Basics

Basic CSS

Please note– the above documents are all PDF’s. You will need Adobe Reader to download and view them. It is free to download if you don’t already have it on your computer. Click here to download Adobe Reader.

Great Online Resources:

Checking your HTML code- http://validator.w3.org/

Web-safe Color Guide- http://efficacy.net/web_safe.html

Great website for help with everything web-related- http://www.w3schools.com/

Very good website for help with CSS, HTML, etc. (for kids but still great!)- http://lissaexplains.com/css.shtml

HTML Help

Meta Tags

HTML Code for Adding Links

HTML Code for Adding a Picture

CSS Help

Web-safe Fonts and Colors

Learning CSS

Welcome!

Welcome to the class website for students taking Basic Web Design through Arlington Community Education.

This website was created by Allison Goldsberry, your instructor. I’d like to primarily use this site to provide links to all class handouts and online video tutorials. That way, if you miss a class or lose a handout, you can easily find any materials you need as well as helpful website links and videos.

There are two pages listed above for each of the classes that I teach- one for Basic Web Design and one for Photoshop. Simply click on the Basic Web Design tab to find all class materials and links.

I will also post useful information and tips on the class website to help you as you learn HTML and CSS. Nothing on this website will be taken down or removed and you can find older posts by clicking on the category on the left (CSS, HTML Help, etc.)

I look forward to meeting all of you!

Class Objectives

My goal is to give you enough knowledge and background about websites so you will be able to someday create a website of your own and/or work on an existing website. You can use these skills to further your career, launch a new one, or simply create a website or blog of your own or for a friend, family member, club or group, etc.

In this 4-week course you will get an overview of how websites work and what is free (or cheap) and widely available to help you build a website. You will also learn basic HTML tags and CSS.

You will spend the course working on a website of your own so you can practice the skills you are learning and so you can get some kind of idea of what’s involving in planning the content for a website. The website you create in this class can be purely for practice or it can be the start of something that you might want to continue working on, such as a website for your business or organization.

Class Schedule:

All classes at Arlington High School, 869 Mass Ave., Arlington

Tuesday, March 8, 2011- 7PM-9M

Tuesday, March 15, 2011- 7PM-9PM

Tuesday, March 22, 2011- 7PM-9PM

Tuesday, March 29, 2011- 7PM-9PM

Tuesday, April 5, 2011- 7PM-9PM (additional class added)