Web Site Design & Management
Class One
Agenda
• Attendance• Questionnaire• Introductions• Class Policies• About the class
• FTP• Code• Assignments
Attendance
• Sign it at every class.
• No signature = absent
• Attendance Policy/Late Policy
• Please correct your name on the attendance sheet.
See Attendance policy in Blackboard
Questionnaire
• To help me plan the rest of the semester
• Please fill out as completely as possible
• This is NOT graded.
• It is OK not to know an answer. If you don’t know the answer, just write “DK”
Introduction
• Who am I?• Please call me Pam• Where can I be reached? • Contact me through Blackboard or• [email protected] • Contact me by calling CCV
(all this information is also in Blackboard)
Email protocol
• Your name
• Your class & day
• A pertinent subject line
• Please do not SHOUT at me unless you mean it.
• I expect email – I expect questions
• If I don’t reply in 24 hours, please resend.
Now introduce yourself!
• Name
• Where you live & a little about yourself.
• Any web design experience?
• Name one thing you hope to learn in this class.
A few important class policies
NOFOOD AT
COMPUTErS
NOGAMES
NOEMAIL
NOInstant
Messaging
NOCrunchy
Food
NOMyspace
About the course
• Description, expectations, grading
• Attendance Policy
• Homework Policy
• Books & Software
All of these are in Blackboard!
Blackboard
• Log In
• Find Course Policies
• Take Sample Quiz
• Keep Blackboard open, we’ll use it later
• Go on break.
FTP server information
• stweb.ccv.edu
• Your user name and password
• Wednesday class is CIS-2220-VU02
• Monday class is CIS-2220-VU04
• You should have a folder inside of that.
Code
• Code is plain text
• How do you see the code on a web page?– View > Source
• What is a tag?< element>
HTML open (start) tag
• Opening bracket
• Tag name
• Attributes
• Closing bracket
<h1>
HTML close (end ) tag
• Opening bracket• Tag name• Attributes• /• Closing bracket• (there are some exceptions, we’ll see them soon)
</h1>
HTML element
• Open tag, content, close tag
<p>
This is the content of the paragraph element.
</p>
There are “empty elements”
• They don’t have the closing tag.
• Also called “self closing” tags
• We’ll learn about these later.– <img />– <br />– <hr />– <input />
There are “attributes”
• Attributes define a property of a tag
• name=“value”
• Goes within the start tag
• Can have multiple attributes in one tag
<font color=“red” face=“arial”>
<p align=“center”>
A basic web page template
<html><head><title> The title of your web page</title></head><body>
</body></html>
All visible content of your page goes between the two body tags, in HTML elements
Process
• Write your code in a text editor (Notepad)
• SAVE AS filename.html
• Create a basic web page template and reuse it over and over.
Tips to make your coding life easier
• Organize your files first
• Consistency
• Write the closing tag immediately after you write the opening tag.
• Indent
• Know where you are saving things
• Don’t have lots of windows open at once
More tips/class policies
• small letters
• no spaces in file names, use a hyphen to separate things for clarity
• save as .html
Copy and Paste is your friend
Copy & Paste is your friend
• Doesn’t mean to copy someone else’s code
• It helps you avoid typos
• Make yourself a standard template and use it over and over.
Terminology
• Server• Browser• Case-sensitive• File extension• stweb• ftp• WYSIWYG editor
• Source code• Text editor• Usability• Upload• Host• url• domain
Let’s Code
Assignments
• Linked in Blackboard & on class website
• Journals
• Be aware of which class we are in– You may see homework posted in advance
• Email me with questions
• I expect problems this first week.