Acronyms

Acronyms you need to know:

• PCC: Portland Community College (hopefully, you knew this one!)
• SWS: Student Web Server
• FTP: File Transfer Protocol
• CAS: Computer Applications department at PCC
• URL: Uniform Resource Locator or web address
• PC: Personal Computer (anything that is not a MAC)
• MAC: An Apple Computer, also known as the "cooler" PC
• DW: Dreamweaver
• HTML: HyperText Markup Language - the main language of the Internet

File Management & File Naming Conventions

You will be saving files throughout the term. You can save them on a USB drive or you can save them on your computer's hard drive. It is strongly recommended that you keep a backup of your files in case they become lost or corrupted. It will be up to you, the student, to maintain proper file organization throughout the term. It is assumed that all CAS111D students understand file management. If you have any questions regarding this, please contact your instructor immediately.

Proper file management is vital to your success in this class (and as a website designer!). You should get into the habit early of following a consistent set of file naming conventions. The Web is not as flexible as most desktop computer systems when it comes to file naming. Improperly named files can be difficult for users to decipher and possibly make it impossible for people to visit your pages. For example, let's say that you have created a new web page for your course calendar. If this was a simple computer file, you might name it "Course Calendar" - without the quotes. But in the world of Web pages, this is not the best choice of file name. Here are rules that you should follow:

1. Use all lowercase letters in folder and file names. This includes any folders you create to manage your files, any web page files you create, and all asset or image files that are used on your site. Some servers are case sensitive, so someone trying to pull up coursecalendar.html will not be able to if the file is saved as courseCalendar.html. It is also important to follow the same letter-case guidelines when creating links on your web pages - even if your particular server is not case sensitive.
   
   
2. DO NOT use spaces in folder and file names. Do you ever notice the characters %20 in a URL? This results when the browser or server converts a space in a URL into a code that is more universally understood by computers. If you named your file "Course Calendar.html" - it would show up in your browser's address bar as Course%20Calendar.html - we've all seen these addresses and NO ONE likes them!
   
   
3. DO NOT use periods that do not immediately precede a file extension. Naming your file course.calendar.html is NOT good!
   
   
4. DO NOT use any character that is not a letter, number, dash, or underscore. course-calendar.html or course-calendar.html are acceptable, but course*calendar.html is not.

   Instructor Note:
   Given the above rules, the best name for your course calendar file would be:
   
   course-calendar.html
   
   or
   
   coursecalendar.html
   

Home Pages - index.html

When you type a web address into your browser's address bar, you are asking for a server to show you a web page. For example, if you type mcmenamins.com into your browser, the server must decide which page from the McMenamins directory it should display. By default, servers are typically configured to display the file "index.html" (or "index.htm" or "index.php", etc.). This means that the home page or main HTML file for any directory should be named "index.html" (without the quotes, of course!)

You will be creating several sites this term. Some will be set up with home pages, and others will simply be stand alone files that have a specific filename other than index.html. Be sure to follow the instructions for each assignment and always name your files as instructed.

Instructor Note:
Remember, home pages should always be saved as index.html - NOT home.html.

 

Uploading Files

Submitting website assignments at PCC is different from submitting simple Word or Excel documents. Websites often consist of many files and must be viewed within a browser to see them properly. At PCC, students have access to the Student Web Server or SWS. During each term in which you are enrolled in a web class, you will have a directory on the SWS to put your website assignments. Each class has it's own directory - and on that directory, you will have a directory listed as your SWS username.

Every student has an SWS username - this is different from your MYPCC username. To find out what your SWS username is, go to: http://sws.pcc.edu/calculator.html.

Your SWS password is your student G number with a capital G. Write your username and password down - or better yet - memorize them! You will be using this username and password throughout this class (and any others that use the SWS).

In order to view files on the SWS, you will need to enter your SWS username and password. PCC has secured this server in recent months to protect student information that might be contained in class assignments.

Once you know your SWS username and password, you can upload files and folders to your directory. The process of moving files from your computer to a web server is called FTP or File Transfer Protocol. PCC uses a secure version of this called SFTP or Secure File Transfer Protocol. Once we begin using Dreamweaver, you will be using the FTP feature within Dreamweaver to upload and manage your files on the SWS. But you can also use an FTP program to accomplish the same tasks. PCC supports an FTP program called Filezilla. Filezilla is a free program that you can download and use on a PC or a MAC.

Please review the instructions on using Filezilla to upload files and folders to the SWS: http://sws.pcc.edu/help/ftp.html

Instructor Note:
Memorize your SWS username and password - you're going to use it often!

 

Local vs. Remote Sites

There are 2 terms that you must become familiar with when creating websites: LOCAL SITE and REMOTE SITE. It is important to understand the difference between the two and how they are related.

Review the following information from your textbook (pg. 47):

• Local Site: The usual routine for creating web pages goes like this: You create the page on your own computer - using a program like Dreamweaver - and then you upload it to a computer on the Internet called a web server, where your handiwork becomes available to the masses. So, it's very common for a website to exist in two places at once, one copy on your computer and the other on the server.
  
  The copy on your computer is called the local site, or the development site. Think of the local site as a sort of staging ground, where you build your site, test it, and modify it. Because the local site isn't on a web server, the public can't see it and you can freely edit and add to it without affecting the pages your visitors see (they're on the remote site, after all).
• Remote Site: When you add or update a file, you move it from your local site to the remote site. The remote, or live site is a mirror image of your local site. Because you create the remote site by uploading your local site, the folder on your web server has the same structure as the folder on your local site, and it contains the same files.

Instructor Note:
Your Local Site should mirror your Remote Site

For our class, your LOCAL SITE is a folder on your USB Flash drive, or your hard drive. Your REMOTE SITE is your directory on the SWS. You will be creating web pages "locally" and then uploading them to the SWS. It is IMPERATIVE that you always check your Web pages after you have uploaded them. Just because they looked good on your Local Site, doesn't mean that they will look right on the Remote Site. And it is very common for students to think they uploaded their files to the SWS, only to find out that they never made it and therefore they earn zero points on their assignment.

To check your work on the Remote Site - use your Browser and go to sws.pcc.edu - then navigate to your directory within your class and pull up your web pages.

Instructor Note:
ALWAYS view your web pages on the SWS after you have uploaded them!!!

 

What is HTML?

HTML is the language of the internet. It's what web pages are written in. HTML stands for "hypertext mark-up language".

In your Required Reading for this week, you should have read the Wikipedia article with an overview of HTML. If you haven't read it yet, stop what you're doing - and read it now: http://en.wikipedia.org/wiki/HTML

We will be using HTML5 throughout this course. HTML5 is the new HTML standard. However, it is still being developed and not all browsers support the new features consistently. For the purposes of this class, and as beginners, we shouldn't bump into too many of these variations. Here's an interesting article on why you should use HTML5: Top 10 Reasons to use HTML5 Right Now.

HTML5 will:

• Provide better error handling
• Provide new elements and attributes
• Allow your code to be device independent
• Have a much simpler doctype
• Reduce the need for plugins - like Flash

Do You Need to Know HTML to Create a Website?

• No - there are many website-building programs on the market that don't require knowledge of HTML at all. You tell the program what you want, and the program creates the HTML for you. This is one of the nice features of Dreamweaver. You can click a few buttons to make some formatting choices, and all the coding will be done for you.
  
  
• However, it is definitely to your benefit to understand how HTML works, so you can take full advantage of everything possible in web design. And, no matter how good the program is, there will be times where you will need to "tweak the code" to get it to do exactly what you want to do. Throughout our class, we will be examining the code of our pages so it is essential that you can at least recognize HTML.
  
  
• But definitely yes, if you plan to be a professional Web designer.

What Do You Need to Write HTML?

• Technically, you just need a browser and a text-editing program. It's best to avoid word processing programs when writing HTML because they will often add additional "stuff" to your code. If you are working on a PC, Notepad or Notepad++ work well and are most likely already on your computer. If you are working on a MAC, TextWrangler is a program that works well. TextWrangler can be downloaded for free: http://www.barebones.com/products/textwrangler/download.html

The Basics of HTML

Tags

• In HTML you work with tags, which are identified with angle brackets <>. Each tag has an opener and a closer. For example, if you want to format a paragraph, you use a <p> tag at the start of the new paragraph and a </p> tag at the end of the paragraph. Notice, the closing tag is the same as the opening tag with the addition of the forward slash /.

<p>This is a sentence formatted with the HTML paragraph tags.</p>

• All HTML5 tags have an opening tag and a closing tag which are indicated with brackets <>. The first tag we see is the <html> tag which kicks things off and tells the browser that everything between that and the </html> closing tag is an HTML document. The stuff between <body> and </body> is the main content of the document that will appear in the browser window.
• Not all tags have closing tags like this (<html></html>). Some tags, which do not wrap around content will close themselves. The horizontal rule tag for example, looks like this : <hr />. We will come across more of these examples later. All you need to remember is that all tags must be closed and most (those with content between them) are in the format of opening tag → content → closing tag.

Attributes

• Tags can also have attributes, which are extra bits of information. Attributes appear inside the opening tag and their value is always inside quotation marks. They look something like <tag attribute="value">Margarine</tag>. We will come across tags with attributes later.

Elements

• Tags tend not to do much more than mark the beginning and end of an element. Elements are the bits that make up web pages. You would say, for example, that everything that is in-between and includes the <body> and </body> tags is the body element. As another example, whereas '<title>' and '</title>' are tags, '<title>Rumple Stiltskin</title>' is a title element.

Since this is a class focused on using Dreamweaver to create web pages, we will not be spending a lot of time learning how to hand-code websites. We'll leave that for CAS 206 (which you should definitely take next!). However, there are certain tags that you NEED TO KNOW now - or at least be able to recognize them when looking at the code of your web page.

In your assignment this week, you will be exploring some basic HTML tags and creating a web page by hand-coding it in HTML. Here is a list of the HTML tags that you are expected to know:

Tags:	What They Do:
<html></html>	Signifies where the HTML code begins and ends; usually appears at the beginning and ending of a Web page. Everything inside the <html> and </html> tags is HTML unless specifically denoted as something else by another type of tag.
<head></head>	Contains the page title, the descriptive information for the page, which is not seen in the browser, and programming scripts.
<title></title>	Surrounds the page title, which appears in the title bar and/or tab of the browser window when a viewer opens that page.
<body></body>	Surrounds all the content or visible elements on the page. Includes other tags to format the content. Also may contain some scripts.
<p></p>	Creates a paragraph of text.
<strong></strong>	Bolds text.
<em></em>	Italicizes text.
<br />	Creates a line break (not a paragraph break)
<h1></h1>	Creates a heading. Headings go from largest (h1) to smallest (h6)
<ul></ul>	Creates an unordered (bulleted) list.
<ol></ol>	Creates an ordered (numbered) list.
<li></li>	Surrounds a list item in either an ordered list or an unordered list.
<a href="URL"></a>	Creates a hyperlink.
<img></img>	Surrounds a file location where an image file is located - and displays the image!

 

Coding Standards

Most of the coding in this class will be done by Dreamweaver. But there are some important coding guidelines that you should follow if you ever find yourself typing the code manually:

• Always include a doctype
• All tags and attributes should be in lowercase
• All non-empty tags should have an ending tag
• Attribute values should be quoted
• Empty elements (tags) should be properly closed
• Use the ID attribute instead of the NAME attribute
• All images must have ALT attributes

When typing code, using indentations and line spacing can make the code easier to read. These are not required standards - but they sure do make your code look nice!!!

Instructor Note:
Learning some basic HTML will help you when you are working within Dreamweaver!