Introduction to Web Design

PAF 410 Introduction to Web Design Josh Shaw Email: jhshaw@syr.edu http://classes.maxwell.syr.edu/paf410

Syllabus • Your “book” for the first part of the semester is the following websites: • http://www.webmonkey.com • http://www.htmlgoodies.com • Attendance policy – lose one percent of your final grade for each missed class, up to five percent. • Late projects – 10 pts off per/day

Syllabus • HTML Test: Create website with HTML for small independent business • Personal Resume Website: Use new Mysite to create a personal and professional Web site. • Final: Creating informative website on societal problem and possible policy solution • In preparation for the final, you will also be doing some research on the societal problem of your choice and what policy could mitigate the problem over the semester • Projects are due by the end of class on the due date. You can turn them in by coming to class, emailing me the project before the end of class, or dropping it off by 5PM in my mailbox in MAX 102 on the day it is due

Graphics on the Web • Don’t take graphics from other websites because it could result in lawsuits • For graphics, log-in to http://www.clipart.com and subscribe with the user name and password listed in your syllabus • Use whatever you want for HTML unit; for live web posting unit use clipart only

Basic Web Info What is the internet? • Worldwide network • Uses web pages and FTP (File Transfer Protocol) to share information What is a webpage? • Collection of hypertext documents • Created using HTML –HyperText Mark-up Language

Basic Web Info Each page has its own URL (Uniform Resource Locator) • Every page has an IP address • Got too hard to remember so many numbers so made a URL for each IP address to identify a site

Important Keywords Browser • The navigator that enables people to view the web • Common ones: Internet Explorer (IE), Netscape, Mozilla Server • Who you get web space from to publish things to the World-Wide Web (WWW)

Considerations • Browser • Connection Speed • Available Space on Server • Microsoft Office Extensions? • Size of Pictures

How to Start • TYPING CODE: • Open Notepad (listed under Accessories) • Don’t use Microsoft Word because it will automatically re-format things • Save file as “Web Page” with the extension of .html after the file name • TO VIEW CODE IN WEB: • Open Internet Explorer • File/Open/Browse • Select your html file • Open - should open in browser window

Basic HTML Set-up <html> <head> </head> <body> Insert commands for anything you see on the page </body> </html>

Fonts & Titles = bold = italic = underline <strike> </strike> = line through text = superscript (103) = subscript (103) <hr /> or <hr></hr>= horizontal rule

Fonts & Titles = sets the font Descriptors: size=“2” Size Range: (-1) to (-6) and (+1) to (+6) Average size is about a 2 color=“red” OR color=“#F00963” face=“ verdana” This class is great!

Fonts & Titles <h1> </h1> = heading (NOT in <head></head>) ranges size 1 through 6 (1 is largest) <tt> </tt> = typewriter text

Positioning = paragraph • Skips two lines Descriptors: align=“left” Left, Right, or Center or = break • Equivalent of pressing return – doesn’t skip a line <center> </center>

Body <body> </body> Descriptors: background=“stars.jpg” bgcolor=“color” link=“color” vlink=“color” (visited) alink=“color” (active)

Exercise1: • Create the basic HTML set-up • Give it a blue background • Make the font Arial, yellow, and size 2 • Make the links orange and the visited links and active links red • Make a heading at the top (you pick the size) that says “PRACTICE EXERCISE” • Make a horizontal line • Write your name and make it bold • Go to the next line (don’t skip a line) and write your birthday • Skip a line and write the name of the state you are from

Introduction to Web Design