1 / 16

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

nonnie
Download Presentation

Introduction to Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

  2. 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

  3. 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

  4. 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

  5. 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

  6. 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

  7. 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)

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

  9. 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

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

  11. Fonts & Titles <b> </b> = bold <i> </i> = italic <u> </u> = underline <strike> </strike> = line through text <sup> </sup> = superscript (103) <sub> </sub> = subscript (103) <hr /> or <hr></hr>= horizontal rule

  12. Fonts & Titles <font> </font> = 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” <font size=“2” color=“blue” face=“arial”> This class is great! </font>

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

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

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

  16. 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

More Related