Web Site Design & Management Class One

Agenda Attendance Questionnaire Introductions Class Policies About the class Code your first page FTP 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 Contact me by calling CCV (all this information is also in Blackboard)

protocol Your name Your class (Web Design) A pertinent subject line Please do not SHOUT at me unless you mean it. I expect – 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 things you can’t do during class. (but most of them you can do on break)

NO FOOD AT COMPUTErS

NO GAMES

NO

NO Instant Messaging

NO Crunchy Food

NO Myspace

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.

What is HTML? A file format Hypertext Markup Language The program used to render (look at) an.html file is a browser –There are many different browsers Internet Explorer Firefox

Process for making HTML code Write, Save, Test, Upload Write your code in a text editor (Notepad) –Don’t use Word or Wordpad. SAVE AS filename.html Test in a browser Upload to a host using ftp so people can see it on the Internet

HTML Code Code is plain text HTML is a series of elements How do you see the code on a web page? –In the browser go to View > Source

HTML open (start) tag Opening bracket Tag name Attributes – usually optional Closing bracket

HTML close (end ) tag Opening bracket < forward slash / Tag name Closing bracket > (there are some exceptions, we’ll see them soon)

HTML element - example The paragraph element Open tag, content, close tag This is the content of the paragraph element.

There are “empty elements” They don’t have the closing tag. Also called “self closing” tags We’ll learn about these later. –

There are “attributes” Attributes define a property of a tag name=“value” Goes within the open tag Can have multiple attributes in one tag

Attributes - examples What do you think these do?

A basic web page template The title of your web page All visible content of your page goes between the two body tags, in HTML elements

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 Create a basic web page template and reuse it over and over.

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

FTP server information Open up WinSCP3 stweb.ccv.edu Your user name and password Your class is CIS-1151-VU03 You should have a folder inside of that with your user initials on it.

Assignments Linked in Blackboard & on class website Reading/Coding Quiz Journals me with questions I expect problems this first week.