Editor Lesson
This week we settle in and learn about HTML editors.
- check into class
- establish "student" account download FTP software
- create a "homework" page
- review concepts found in CS 50.11A course
- create a homework page
- review HTML editors
- Check in - 10 points
Go to check in part 1
If you are a new student complete check in part 1
The purpose of this assignment is to create a unique username and password, which you will use every time you check on your grade or post a homework assignment. Write these values down so you will remember them all semester.
Go
DO
NOT complete this form if you were enrolled in 1375, instead
use your old username and
password to complete check in part 2.
Go to check in part 2
EVERYONE COMPLETES THIS FORM.
By completing the greetings
and gradebook assignment, you accomplish three goals:
(1) You register yourself in the online gradebook. (2)
You add your email address to the class mailing list
so you can receive email from your instructor each week.
(3) You introduce yourself to your classmates so we can
all get to know each other.
- Establish your account on the student server & download FTP software
Most students have done this already, so you can skip this step.
For any students who do not have a student account, the name of the server to which we will be uploading our web sites is "student". You must upload the pages that you will be creating in this class to this server. In order to establish your account, go to http://www.santarosa.edu/cis/student/ftp/index.html, and follow the instructions.
Tip: The most common problem students have with this task is entering their birthdate incorrectly. Please note carefully that the system requires you to enter your birthdate in an order that is probably not the most intuitive: year first, then month, then day.
Note on Usernames and Passwords:
- You will be told what your username is when your account is created. Normally your username is your first initial and last name, lower case, up to a total of eight characters. If you have a common last name, you may get a slightly different username.
- Your password is your first and last initials, capitalized, and the last five digits of your Social Security number.
- These are your student server username and password. You will use them when logging in to the student server.
Download required FTP software
Again, most students will have completed this task already, so the following information is only for those students who have not.
You'll need to download two applications onto your computer in order to be able to accomplish two important tasks: (1) you'll need an "ssh" application so that you'll be able to configure your account on the student server so that it can serve as your website, and (2) you'll need "ftp" software so that you'll be able to move your web pages from your local computer over to the student server. Note that task 1 will only need to be performed once at the beginning of the class, whereas task 2 will be done each time you want to make a change to your website.
Windows Users:Both of these applications will be downloaded to your computer in a single download. To perform the download, click on https://cf.wm.edu/it/software/public/ssh/sshsecureshellclient-3.2.9.exe.
If you are asked whether to open or save the file, choose "save", and choose a location to save the file (probably your desktop). After this, double click on the icon that was downloaded to install the two applications. (The icon will be labeled "SSHSecureShellClient-3.2.9".) This will take you to an installation wizard that will guide you through the process of installing the 2 applications. Unless you have a specific reason to do otherwise, you should just click on the "next" or "yes" button at each step. When the wizard finishes, you will see 2 new icons, one labeled "SSH Secure Shell Client" and one labeled "SSH Secure File Transfer". You're done.
Mac Users: You do not need to download an ssh application because you can use the application named "Terminal" that is already on your computer (more about this in lesson 2). For ftp we will be using an application named "Fugu". To download this application, go to http://rsug.itd.umich.edu/software/fugu/download.html, and then click on the link "Fugu-1.2.0-English.dmg". If you are asked whether to open or save the file, choose "save". After this, you may have to double click on the icon that was downloaded, or it may open automatically, depending on how your computer is configured. In either case, you'll have to select "agree", and then the icon for Fugu will appear on your desktop. You should probably move it to your Applications folder, and also to your dock.
Note: if you already have FTP software that you use and are comfortable with, you may use that software instead. However, note that the student server accepts only secure connections. If you aren't sure if your FTP software is secure, you should download the recommended software. Also, if you use your own software I won't be able to support you if something goes wrong.
- Create a homework page.
The homework page is a table of contents for all the work you will do in the class. Each week you will activate the links for the current lesson. This means you will not longer need to fill out an online form each week. I will make a "student work" page which contains a link to everyone's homework page, and use that page to grade your work each week.
Here is an example of how that page will look at this stage of the class. homework page example
After the Homework page is completed Register your URL
Fill out this online form to submit the URL of your homework page. homework page submission form. I will use that page to connect to your editor review page and assign points for that assignment.
- Download, Use and Review an HTML Editor - 10 points
When you began learning HTML, you were asked to use a text editor to write your web pages because you needed to become familiar with the code and begin to understand how HTML and CSS syntax works. Now that you have at least eight weeks of experience under your belt, you can begin using a tool that you may decide makes your life a lot easier.
- Definition of HTML Editor: This is a software application that uses menu items and tools bars to place HTML code into a text document. Most HTML editors display the code in one view and the resulting web page in another view. In addition, most HTML editors have a feature (sometimes a separate plug-in) that will help you write CSS. Examples of HTML Editors are Aptana, HomeSite, BBEdit, Hot Metal, Hot Dog, etc.
-
Benefits of HTML Editors: These tools can save you time and make you more accurate and efficient. Using an HTML editor reduces typing errors in your code. You no longer have to type angle brackets or remember to include the ending tag of a pair. I predict that you will get many more green bars from the validator on your first try! Many editors also have powerful find and replace features, which saves time and ensures that you catch every instance of the text you want to change.
- There are many editors on the market - some freeware, some shareware, some full commercial products. Here are some links to some HTML Editors:
HTML Kit - PC/Mac - http://www.htmlkit.com/
Notepad++ for PC - http://notepad-plus-plus.org/
Taco - for Mac
- http://tacosw.com/
http://html.about.com/cs/htmleditors/index.htm?terms=HTML+Editors
http://websitetips.com/html/tools/
Make sure you feel comfortable with the source before you download anything! A virus-scrambled hard drive is not the best way to start your day.
-
After you have downloaded the software, you need to install it, then start playing around with it. Many of them have tutorials or other help devices that will speed up the process of learning how to use it. Most students are really happy to have software that makes it easier to develop code, but you may decide to stick with a basic text editor -- the choice is yours.
- Post your experiences to the class message board.
SPECIAL NOTE: this is the same message board we used in section 1375. If you are continuing on you can use the same username and password to post to the nessage board. NEW STUDENTS will need to "Log in" and create an account for the message board. The message board does not us the same username and password you use to check into class or FTP files onto the Web.
Once you have logged into the class message board please provide the following information:
- Your First and Last Name
- Name of the editor
- Location of a place where editor can be downloaded for preview
- Price
- 1 paragraph describing the strengths and weaknesses of the program (your opinion)
- links to 2 web sites which are resources for this product (tutorial, tips and tricks, or review of product)
Content developed by Linda Hemenway - lhemenway@santarosa.edu