Introduction to Web Design (DIG 111)
Fall 2014
Niagara County Community College
Course Description
Introduction to Web Design introduces the fundamental concepts of Hypertext Markup Language (HTML) scripting and web site design. Primary topics include: origins of HTML and the Internet, basic elements and structure of HTML, implementing HTML, Cascading Style Sheets, web site organization, page design and layout, internet browser and cross-platform considerations, creating and organizing linked documents, web typography, creating and optimizing web graphics, technical and aesthetic issues of color, image maps, tables, and designing for web standards compliance. Students must possess basic computer skills for success in this course. (Usually offered Fall and Spring semesters).
Prerequisite Coursework: AAC 042 and ENG 099
Instructor Information
Name: Jim Gerland
Office:
Office Hours: Tuesdays/Thursdays 2:00pm - 2:30PM, or by appointment
Office Phone/Voice Mail:
Email: (The best
way to reach me)
Course Identification
Credit Hours: 3
Course meeting times: Tuesdays/Thursdays 2:30pm – 3:45pm (D-BLDG 106)
Expected Student Outcomes
Upon the successful completion of this course, a student will be able to:
- Plan, design, and produce an organized, navigable, and visually appealing web site utilizing HTML and CSS.
- Produce web pages and web sites that incorporate the principles of organization, layout, navigation, typography, color, and graphic design.
- Create, optimize, and incorporate various graphic file formats.
- Use FTP to successfully maintain and manage files on a web server.
- Produce web pages and web sites that comply with web standards established by the World Wide Web Consortium.
- Use code validation to insure compliance of HTML and CSS with web standards.
Schedule
Course schedule is subject to change
Date | Chapter | Topics | Assignment |
---|---|---|---|
September 2 | Course Introduction Getting Started | Brief Introduction | |
September 4 | 1 | Structure | Brief Introduction Due |
September 9 | 2 | Text | Home Page |
September 11 | 3 | Lists | |
September 16 | 4 | Links | |
September 18 | 5 | Images | |
September 23 | 6 | Tables | Table Page Home Page Due |
September 25 | 7 | Forms | Form Page Table Page Due |
September 30 | 8 | Extra Markup | Form Page Due |
October 1 | 9 | Flash, Video & Audio | Multimedia Page Form Page Due |
October 6 | 10 | Introducing CSS | CSS Pages Multimedia Page Due |
October 8 | 11 | Color | |
October 13 | Columbus Day - No Classes | ||
October 15 | 12 | Text | CSS Pages Due |
October 20 | 13 | Boxes | |
October 21 | 14 | Lists, Tables & Forms | CSS Print Page |
October 27 | 15 | Layout | |
October 29 | 16 | Images | CSS Print Page Due |
November 4 | 17 | HTML5 Layout | HTML5 Page |
November 6 | 18 | Process & Design | |
November 11 | Veterans Day - No Classes | CSS Print Page Due | |
November 13 | Final Project | Final Project HTML5 Page Due |
|
November 18 | ??? | ||
November 20 | ??? | ||
November 25 | ??? | ||
November 27 | Thanksgiving Break - No Classes | ||
December 2 | ??? | ||
December 4 | ??? | ||
December 9 | ??? | ||
December 11 | Last Class - Final Project Due | All Assignments Due |
Textbook
HTML & CSS: Design and Build Websites
Jon Duckett / Wiley / 2011 / 512 pages
ISBN: 978-1-118-00818-8
Book is Required!
Don't Make Me Think Revisited
A Common Sense Approach to Web Usability
Steve Krug / Pearson Education / 2013 / 216 pages
ISBN-13: 978-0-321-96551-6
Book is Recommended!
* USB Flash Drive is highly recommended
Grading
Assignments
Eight (8) Individual Assignments worth 9 points each.
Final Project: 20 points
In-class/Discussion Forums participation: 8 points
Assignments and Methods of Evaluating Student Progress
All assignments are due at the start of the class noted on the schedule. They must be submitted in the appropriate Discussion Forum unless otherwise specified. Late assignments lose one (1) point per class late up to a maximum of three (3) late points.
Format
Assignments are to be professionally prepared, documented, cited, and organized. Proofread and spell-check all assignments, include your name, date, course number and description/comments of the assignment.
Extra Credit
There are no opportunities for extra credit. Please plan accordingly
NCCC Grading Scale
Letter Grade | Total Points |
---|---|
A | 95 - 100 |
A- | 92 - 94 |
B+ | 89 - 91 |
B | 85 - 88 |
B- | 82 - 84 |
C+ | 79 - 81 |
C | 75 - 78 |
C- | 72 - 74 |
D+ | 69 - 71 |
D | 65 - 68 |
F | 64 - 0 |
| Brief Intro | Home Page | Table | Form | CSS | CSS Print | HTML5 | Final |
Brief Introduction & Profile Picture (1 point)
Post an introduction about yourself in the Brief Introduction forum. Please include how you would rate yourself with technology, Windows/Macintosh, Notepad/Text Wrangler, Internet, Web Browser, etc. I think it would be good to know whether you're a beginner, intermediate, or advanced user of each of these areas. Also, please post a picture of yourself. This will help me get to know you.If you don't already have your NCCC ID card with your photo then you should stop at Security.
Create Your NCCC (Web 2)
Home Page (9 points)
For this Assignment you will first read the appropriate chapters in the textbook and then create a web page
called index.html in your web2.niagaracc.suny.edu
account web space which will be used as the
starting page for the rest of your Assignments for this course. Your web page should utilize the following HTML
tags and include the following:
- Appropriate
html
,head
, andtitle
tags to give your page a title that contains your name. - A
body
tag. - An
h1
tag that contains your name. - An
img
tag with appropriate src, alt, width, and height values that insert a graphic image on your page. It doesn't matter at this time what the graphic is as long as it is legal and moral. - A
p
tag that encloses a brief paragraph about yourself. - An
ol
tag that containsli
tags that list the remaining Assignments for this course (2, 3, 4, 5, 6, 7, 8, 9, 10). - At least one of each of these tags:
strong
,em
,hr
,br
Your web URL to view your web page is:
http://web2.niagaracc.suny.edu/~your-userid/
You will add a link to this page that allows the user to view your work.
Your username and password for the web2.niagaracc.suny.edu
machine is the same as your
username and password you used to log into your Blackboard Learn account.
Now, whenever you login to your web2.niagaracc.suny.edu
account you need to issue the command
cd public_html
to change to the sub-directory where you can create and maintain the files for your
Assignments and Assignments.
You can use ssh
to login to your web2.niagaracc.suny.edu
account and then use either vi
or Emacs
to maintain your files or you can edit them on your PC and use an SFTP client (
FileZilla for Windows or Fetch for a Mac) to move them from your PC to
your web2.niagaracc.suny.edu
account. For Windows it is even better to use
Notepad++ for your editor
since it has a built-in SFTP client. For Mac the better choice is TextWrangler which also has a built-in SFTP client.
When you have this Assignment ready for me to view and grade you should post a note in the Home Page Discussion Forum with the URL of your web page so I can click on that link and open your Assignment in a new browser window (target="_blank").
Create a Table Web Page (9 points)
For this Assignment you will first read the appropriate chapters in the textbook and then create a web page
called table.html in your web2.niagaracc.suny.edu
account just as you did in your
Home Page Assignment.
Your new web page should utilize the following HTML tags and include the following:
- A
body
tag that uses an appropriate style value to change the background color of the web page. - Appropriate
table
,tr
,th
, andtd
tags to create a table that has three (3) columns (Font Faces, Font Sizes, Colors) and (5) five rows (different font faces, font sizes, and color codes in their appropriate face, size, and color). Use the th tag to create the headings for each column the background-color style value to change the color of the heading cells and the font-family and color style values to change the color of the font in the cell headings row. Use the background-color style value on the table tag to change the color of the background of your table to a different color than the background of your web page. - Appropriate style values that change the font, font size, and font color.
This page should also have a link back to your Assignment 1 web page.
You should then add an a
(anchor) tag to your Home Page web page entry for this assignment that opens your
Table web page.
When you have this Assignment ready for me to view and grade you should post a note in the Table Discussion Folder with the URL of your Home web page so I can click on that link and open your Assignment in a new browser window (target="_blank").
Create a Form Web Page (9 points)
For this Assignment you will first read the appropriate chapters in the textbook and then create a web page
called form.html, in your web2.niagaracc.suny.edu
account just as you did in previous assignments.
This web page should utilize the following HTML tags and include the following:
- A
form
tag that has an action= value ofmailto:your-email-address
so that the results of what the user enters gets sent to your email address when your form gets submitted. - input tags that allow the user to enter their:
- First Name
- Last Name
- Address
- City
- State/Province (this should use a select tag with option tags for each state name and state abbreviation
- Zip/Postal Code
- Phone
- Email Address
- An
input
tag that creates a submit button that says: OK Send My Data
You should utilize the new HTML5 form tag features. Use your favorite search engine (Bing, Google, Yahoo, whatever) and do a search for
+html5 +form
to find lots of helpful information.
This web page should also have a link back to your Home Page web page.
You should then add an a
(anchor) tag to your Home Page web page that opens your
Form web page.
When you have this Assignment ready for me to view and grade you should post a note in the Web Form Discussion Forum with the URL of your web page so I can click on that link and open your Assignment in a new browser window (target="_blank").
Convert Home Page to Use CSS (Cascading Style Sheets) (9 points)
For this Assignment you will first read the appropriate chapters in the textbook and then create three
(3) new web pages (copies of your index.html file, for example called inline.html,
external.html, and embedded.html, and
another file for your external styles, for example called dig111.css, in your web2.niagaracc.suny.edu
account just as
you did in previous Assignments. One of your Assignment 2 web pages should use inline
styles; the second web page should use embedded styles; and the third web page
should use a linked style sheet. These web pages should change the default look
for the following HTML tags:
h1
,h2
,h3
,h4
,h5
,h6
p
- font color, family, and size
strong
(style="font-weight: bold")h1
,tr
,th
,td
Each of these pages should also have a link back to your Assignment 1 web page.
You should then add 3 a
(anchor) tags to your Home Page web page that opens your CSS web pages.
When you have this Assignment ready for me to view and grade you should post a note in the Cascading Style Sheets Discussion Forum with the URL of your web page so I can click on that link and open your Assignment in a new browser window (target="_blank").
Modify CSS (Cascading Style Sheets) Pages to Use Print Media Styles (9 points)
For this Assignment you will first read the appropriate chapters in the textbook and then modify the three
(3) web pages you created for the CSS assignment in your web2.niagaracc.suny.edu
account just as you did in previous Assignments. One of your Assignment 2 web pages should use inline
styles; the second web page should use embedded styles; and the third web page
should use a linked style sheet. These web pages should change the default look
for the following HTML tags:
h1
,h2
,h3
,h4
,h5
,h6
p
- font color, family, and size
strong
(style="font-weight: bold")h1
,tr
,th
,td
Each of these pages should also have a link back to your Assignment 1 web page.
You should then add 3 a
(anchor) tags to your Home Page web page that opens your CSS web pages.
When you have this Assignment ready for me to view and grade you should post a note in the CSS Print Discussion Forum with the URL of your web page so I can click on that link and open your Assignment in a new browser window (target="_blank").
Create an HTML5/CSS Compliant Web Page (9 points)
For this assignment you will first read the appropriate chapters in the textbook and then create a new web page, for
example called html5.html, in your web2.niagaracc.suny.edu
account just as you did in previous assignments.
Copy your current CSS Print Page assignment web page to a new html5.html web page. Your
index.html new web page link should open up a new web page that utilizes your HTML5 and CSS to include the following:
- A correct DOCTYPE tag for HTML5
- Convert any of your tags that are not HTML5 compliant
- Correct any of your CSS that is not CSS3 valid
You can (and should) use the W3c validator page at http://validator.w3.org/ to verify your code and http://jigsaw.w3.org/css-validator/ to verify your CSS styles.
This web page should also have a link back to your Home Page web page.
You should then add an a (anchor) tag to your Home Page web page that opens your HTML5 web page.
When you have this Assignment ready for me to view and grade you should post a note in the HTML5 Discussion Forum with the URL of your Home Page web page so I can click on that link and open your Assignment in a new browser window (target="_blank").
Create an HTML5/CSS Compliant Web Site (20 points)
For this assignment you will create a company web site. You should create a sub-directory, final in your
web2.niagaracc.suny.edu
account where you will store the files for this assignment. In your final
sub-directory you should create sub-directories called css (for your css file) and images for your
graphics.
Your web site should have a minimum of four (4) pages, including the home page for that site (index.html), a table page that lists some of your company's inventory, pricing, etc., a page that video page (not necessarily related to your fictional company), and a contact (form page. Each page in your web site should have consistent navigation such that a visitor to your site can easily navigate between all the pages in your web site. You may have additional pages which *might* be worth extra credit if it will help you move to the next higher grade level.
Your new company web site should utilize your HTML5 and CSS knowledge from this course to include the following:
- A correct DOCTYPE tag for HTML5
- All HTML tags should be HTML5 compliant
- All CSS styles should be CSS3 valid
You can (and should) use the W3c validator page at http://validator.w3.org/ to verify your code and http://jigsaw.w3.org/css-validator/ to verify your CSS styles.
The company web page should also have a link back to your Home Page web page.
You should then add an a (anchor) tag to your Home Page web page that opens your Company web page.
When you have this Assignment ready for me to view and grade you should post a note in the Final (Web Site) Discussion Forum with the URL of your Home Page web page so I can click on that link and open your Assignment in a new browser window (target="_blank").
Classroom Policies and Procedures
Attendance Policy
Class attendance is required at all times. If you must miss a class please talk with the instructor. There are no make-up opportunities for assignments or tests.
Cheating/Plagiarism
Cheating or plagiarism will not be tolerated. If detected, the following procedure will be followed:
1. A failing grade of F or 0% will be entered for the test or other educational activity in question. 2. If the activity is a major test, the student will be assigned a failing grade for the course, mid term or final. 3. The College system for reporting cheating or plagiarism will be followed. See Student Handbook.Ethical Conduct
Each student is responsible for adhering to the Code of Student Conduct as stated in the student handbook. Students involved in any unethical activities in the class are subjected to discipline at the instructor’s discretion. Students are responsible for completion of assigned work. As would be expected of workers in any work environment, students are expected to work independently, to use their initiative in solving problems, and to have professional pride in their work.
Disabilities and Health Issues
Students with disability issues which might make it difficult to complete any assignment, activity or test required in the course should notify the instructor as soon as possible so that appropriate arrangements can be made.