Allison's Arlington Classes

Class April 5

allisonsarlingtonclass — Mon, 04 Apr 2011 23:49:20 +0000

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

allisonsarlingtonclass — Mon, 04 Apr 2011 23:41:25 +0000

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 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 section of the webpage but the code is different.

External style sheet code (goes in head section)

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)

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

allisonsarlingtonclass — Tue, 29 Mar 2011 00:11:15 +0000

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!

allisonsarlingtonclass — Tue, 08 Mar 2011 21:13:27 +0000

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)

Class October 19, 2010

allisonsarlingtonclass — Tue, 19 Oct 2010 20:55:01 +0000

CSS

Today we will continue with CSS and will look at how it can be used to create layouts for a website (for example, two or three column layout).

I will show examples from www.lissaexplains.com, a website geared toward kids but a great resource for adults, too!

Free (and cheap) Web-building Software

I will also 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 helping compare web hosts.

Tables

If we have time I will show you how to create a table using HTML. Here is a handout for you with some information. Click here to see a good example of a table.

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

Learning CSS

allisonsarlingtonclass — Tue, 12 Oct 2010 20:48:42 +0000

This week we will also learn about CSS (Cascading Style Sheets) and how it is used to build websites.

What is CSS?

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?

There are both internal and external style sheets. The style sheet we will create in class this week will be an external style sheet. External style sheets are separate files that need to be linked to your website by a small line of code that goes in the section (the code is in the handout and we will go over this in class). An internal style sheet would be adding the style sheet code directly into the code of the webpage. It also goes in the section of the webpage. We will also look at an example of an internal style sheet in class.

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 learn CSS we will talk about web-safe fonts and colors. Web-safe fonts and colors are basically fonts and colors that will always appear as you have intended them to in all browsers.

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- that is how we will code them with CSS.

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

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

Class October 12, 2010

allisonsarlingtonclass — Tue, 12 Oct 2010 20:42:00 +0000

Today we will continue practicing HTML code. We’ll learn how to create a hyperlink to an outside website as well as how to link to pages within our own websites. We’ll also learn how to embed video on a webpage.

At the end of class last week we talked about how to leave a comment in the HTML code that can communicate important information to others who are working on the website with you but that wouldn’t appear on the live website. There is code that goes around a comment so that the browser does not read it as something that should be displayed on the live website. It looks like this (open carrot, dash, dash, comment, dash, dash, close carrot):

< – - ! Your comment goes here – - >

HTML Code for Adding Links

This is what will be clickable

Name of website

You will need the exact name of the website and the http:// that goes along with it. It is usually best to open the website in another window or tab and just copy and paste the link.

Mind those Quotation Marks!

Like with most of the HTML code we will work with, the name of the website must be in quotation marks .

Opening the Website Link in a New Window

Your link will automatically open in the same window unless you insert target=”_blank” into the code. It should look like this:

This is what will be clickable

It is best to have links to external websites (not your own) open in new windows so people are not directed away from your website when they click on a link. However, when linking to other pages on your website, you should have those links open in the same window.

Opening Links in the Same Window

By default, links will open in the same window if you do not insert target=”_blank”. However, you might also run across target=”_self” or target=”_parent”. Both pieces of code will have the link open in the same window.

Linking to Pages Within Your Own Website

Generally speaking, when you link to pages within your own website you do not want them opening in another window (that is kind of annoying!). Also, you don’t want to re-direct people away from your website. So links to pages within your own website should open in the same window.

You can link to pages within your own website in the same way that is described above. However, if you are building the pages by hand and want to, for example, link index.html to about.html, you could use the same code but the link would be different:

Click here to read about us

This only works if your pages are in the same folder.

What Will be Clickable

You must insert the link code around the content you want to be linked, which is usually text but can also be an image, for example.

This is clickable

The closes the link.

For example, below, Click here is clickable and what is linked and to view the website is not.

Click here to view the website.

Here it is in action- Click here to view the website.

Making a Picture a Link

Note how the code is nested. The link code was opened first, so it is closed last.

Here it is in action- I’m linking the Medford High School Mustang to the Medford High School webpage:

Class Tuesday, October 5

allisonsarlingtonclass — Tue, 05 Oct 2010 21:57:05 +0000

Learning HTML

Today we will be learning how to code a webpage using HTML.

HTML is a layout language that tells a web browser (Firefox, Internet Explorer, etc) how the content on your webpage (pictures, text, video, etc) should be displayed.

It is like learning a new language and in today’s class you will be learning the basic HTML tags.

Here is the handout we will be using:

HTML Basics

This handout includes basic code and links to great web resources for HTML help.

We will also cover:

Meta Tags

At the end of the class on Tuesday we talked briefly about meta tags. Meta tags include a brief description and keywords associated with your website to help search engines find your website.

They are not very effective because most search engines have their own algorithms to deliver people to certain websites. For example, Google takes into account how many other websites link to yours and those websites that have more “link backs” are considered more credible, so they appear first in the list of websites Google shows you after you do a search. Also, companies pay money to appear as ads along the side of a Google search.

However, it is important to do meta tags and in some cases they will control how a search engine describes your website when someone finds it in a search. You will also find some content management systems (including WordPress) will ask you to include tags for your website as well as for individual posts. They can’t really hurt even if they aren’t all that helpful!

Creating Meta Tags

Creating meta tags is simple. The two most common meta tags you will use are keywords and description:

The description meta tag is a brief description about your website. For example, the meta tag description for our class website could be “This website is for students of Allison Goldsberry’s Arlington Community Education website design class.”

The keyword meta tag is a list of all of the keywords you can think of that you would want associated with your site, so you should think about what words people might enter into a search engine to find your website.

For example, here’s what could work for our class website:

Where do Meta Tags Go?

Like the title tag, meta tags go in the head section of your website. They do not appear in the body of your website and are not visible:

This is the title of your website that will appear as the link in search engines as well as at the top of the website in the web browser window.”

This is where the rest of your content goes on the page.

More on Meta Tags

http://www.w3schools.com/tags/tag_meta.asp

More HTML…

HTML Code for Adding Links

HTML Code for Adding a Picture

Using the Computer Lab

allisonsarlingtonclass — Tue, 28 Sep 2010 21:58:52 +0000

Helpful Tips for File Management

In our computer lab at Arlington High School we are working within a very restrictive managed desktop system. Here are some helpful tips to help you save, find, and open files.

Logging in:

- Log in under the same user each time. I asked everyone to write down their log-in information last week. For example, you will log in as evening05 (or whatever your number is) and the password is education.

Best Browser to Use:

- Firefox will always be our browser of choice as that is what works best for this computer lab.

Creating Folders:

- Create a folder for yourself on the evening drive. The evening drive is located under My Computer. Creating a folder on this system is not as straightforward as it would be at your home computer.

To create a new folder (if you haven’t done so already):

1. Open Firefox (start, programs, Firefox)
2. Click file at the top of the page, and select Open File.
3. A window will pop up in which you can navigate to My Computer. Find My Computer by pulling down the drop down menu at the top of the box. Then select the evening drive- this is where you will create your folder.
4. The normal create a folder button will be disabled. To create a new folder, RIGHT click with your mouse anywhere in the blank white space (be careful not to select another folder). Select New, and then Folder. A folder will be created and the space next to it will be highlighted, at which point you need to type in a name for the folder.
5. You should give the folder your name.

Saving Your Files:

- You must save all of your files in the folder you have created.
- When you have created a new file, click File, Save As, and be sure to navigate to the folder you have created by selecting the drop down menu in the box. Again, find My Computer and then double-click the evening drive and you should see your folder there.
- Double-click your folder to open it and then save your file.

Saving Files to Your Thumb Drive (USB):

- Plug in your thumb drive before logging-in. The USB ports are located behind your monitor and will be either along the top or along the side.
- To find your thumb drive on the computer, open up Firefox and then select File, Open File. A box will pop up and you want to select the A drive. The A drive will be located under My Computer- navigate to my computer through the drop down box.
- Once you have found the A drive, double-click to open.
- To save your files to your thumb drive, click File, Save as, and then navigate to the A drive (using the method described above) and click save.

Creating Your Own Website

allisonsarlingtonclass — Tue, 28 Sep 2010 21:57:22 +0000

You will spend the next four weeks working on a website in this class to help you gain a command of basic HTML and CSS.

HTML and CSS work in conjunction to let a web browser (i.e. Firefox, Internet Explorer) know how your website should be displayed. Basically, HTML controls the lay out and how the content on your website is organized, and CSS controls how the content should look (font, font size, font color, link color, headlines, etc).

You will spend the first class coming up with a topic and planning the content (text, pictures, video, links, etc) for your website.

Come up with a topic

You: all about you, your interests, family, school, friends, etc
Your business
Your favorite sports team or a local sports team
An organization or club you belong to
Your upcoming wedding
A country or state you’ve visited
How to: fix a car, build a computer, train for a marathon, write the best essay, get into college- whatever you’re an expert in that can fill a few web pages!
Food- Recipes, best places to eat in Medford/Boston/Arlington/Wherever, restaurant reviews
Reviews- music, movies, tv
Anything else you can think of!

Pick your topic and plan your site

- How many pages? What will be on the pages?

- How do the pages link to each other and what menu/navigation will you have- home, about us, contact us, etc, etc

- Plan how many pages you will need, how they will link to each other, how people will navigate your website. You need to assume that people will enter your website on any page, not just the home page, so it should be obvious to visitors as to how to get to the home page or any other page.