Hello everyone! My name is A. Lopez, I am a sophomore at Stony Brook University and I'm currently taking a class called CSE 102. If you are looking to learn about the basics of Web Design I strongly recommend you take this class. Here you will learn everything you need to know to create your own web pages as well as develop your skills to design for others. You start with the basics of XHTML and work your way up to use professional programs like Adobe's Dreamweaver!. The class meets three times a weeks for 55 minutes each session. There are five homework assignments throughout the semester, one midterm, one final and in class exercises which only count for participation.

Here is a display of all the things we have worked on so far in this class. Feel free to surf around, ENJOY!

*click on an assignment name below to view its page*

Assignments Description
# Text and Images First use of h1, h2, etc. colors and displaying images
# hr, colors and sizes First use of horizontsl break lines, changes in defaults colors and the font sizes.
#1 pre, sup/sub, text-align First use of pre-formatted text, superscripts, subscripts and alignment of text.
#2 Color, div, font-family First use of div property to manipulte many objects at once and also a change in the fonts.
#3 ul, ol, li, dt, dd, img First use of unordered, ordered lists, definition and description images
#4 a-href, links, mailto First use of hyperlinks to other pages and the mailto option as a link
#5 Hyperlink Images Using images hyperlinked to other webpages
#5b hyperlink map Hyperlinking specific places on a picture to direct you to another page
#6 Indentation, Floating Using paragraphs to float in images and indent the first lines.
#7 Tables Part I First use of tables and style attributes such as different font and background colors
#8 Tables Part II Table proportions in size and percentages
#9 Tables Part III Merging rows and columns within tables to create charts
#9b Tables Part IV Practice table with picture, paragraph and lists in each cell
#10 Frames Part I First use of frames within one page with different colors
#10b Frames Part II Using frames to show different pages on the right linked to options on the left
#11 Meta Exercise First use of meta option to redirect blank pages to a different page
#12 CSS I First use of cascading style sheets and its attributes
#12b CSS Change HW stylel Using CSS to change the look of traditional hw page
#13 CSS II First use of h1, h2, etc. colors and displaying images
#13b CSS II Using CSS to change the link options, visited, hover, first-letter
#14 Conflict CSS Using CSS to specify which attribute to use in conflicting situations
#15 Intro to Nav. Bars First use of navigation bar and its attributes
#16 Nav. Bar- Styles Using CSS to create navigation bar buttons with different properties and linked to four different pages.
#17 Layouts- Tables Intro to using tables to make page layouts for web design.
#17b Layouts- CSS Using CSS style to make layouts for web design pages without tables.
HW Assignments Description
#1 Favorite Car

hw1 picture		 Makes a Website of your favorite car here is a list of the requirements:
  1. Introductory Statement - Each Web page should have an introductory paragraph that draws in the Web surfer to the site.
  2. Ordered List - Each Web page should use at least one ordered list. You may use it for whatever purpose you like, but it must make sense and fit in with the point of the Web site.
  3. Unordered List - Each Web page should use at least one unordered list. Again, don't just throw one in, it should be there for good reason.
  4. Images - Each Web page should make use of at least 3 images. These may be images of inside, outside, whatever, as long as they are relevant to the page.
  5. Quotations - Each Web page should contain at least one quote from a reviewer. For these, you must use the blockquote tag.
  6. Hyperlinked References - Each Web page should contain a list of references with hyperlinks to each reference. You should also include inline hyperlinks to any proper nouns in your page. All together you should have at least 10 hyperlinks in your page.
#2 Favorite Games

hw1 picture		 Make one page for your Favorite Video Games, one for your favorite Sports, and one for your Favorite PC Games. Here is a list of the requirements:
  1. Navigation Links - At the top of each of these 3 pages should be links to the other two pages. You may use textual or icon (image) links for this Navigation bar of sorts, but make sure it is uniform on all three pages. This is a common Web page technique.
  2. Description of Video games/Computer games/Sports - Each page should discuss about video games, computer games, and sports (on a separate page for each) as well as a description about them.
  3. Floated Tables - Each Web page should use a table to display a summary of the information previously specified. All tables should be floated on either the left or right of text and should include: * Video Game Page - display five video games that you have played, currently owned, or wish to own in the future, neatly separated into separate columns. * Computer Game Page - display your five favorite computer games, including the type of game, or category, it is. * Sports Page - display five sports you are practicing or you would like to try, neatly separated into separate columns.
  4. Floated, Linked Images - Each Web page should make use of at least 1 image (this means at least 3 images total) of a favorite from your page. This may be a picture relating to a sport, a video game, or a computer game, etc ... All images on your page should hyperlink to a Web page about the subject in the image. In addition, all images should be floated to the left or right of your page's text.
  5. Document Margins - narrow the width of your page by increasing the margins on the left and right of your page. You may do this inside the body tags for your pages.
  6. Hyperlinked Proper Nouns - Each Web page should supply inline hyperlinks for at least 5 proper nouns (sport names, video game websites, computer game reviews, etc ..., so 15 total). These links should go to other relevant pages about the proper noun.
#3 Cascading Style Sheets

hw1 picture		 Make one CSS page for the pages from HW1 and HW2 + and index page. Here is a list of the requirements:
  1. Navigation Bar - At the top of each of these 5 pages should be a professional-looking navigation bar. This means:
    1. you should make use of borders in your links to create box or button links
    2. all boxes/buttons in the navigation bar should be neatly arranged and aligned at the top-center portion of each page
    3. your navigation bar should appear precisely in the same place on every page
    4. the exact presentation of your navigation bar is up to you, but choose your colors carefully
    5. the background and foreground colors should change for the box/button that the user's mouse is hovering over
    6. no links in the navigation bar should be underlined
  2. Formatted Hyperlinks - create your own style for your site's hyperlinks and use this same style over all pages. It should be a different format from your navigation bar links. Do not use the default style.
  3. Document Margins - narrow the width of your pages by increasing the margins on the left and right of your pages.
  4. Fonts - select a uniform font for your entire site different from the standard default font.
  5. Color - select a uniform background and text color for your entire site. Try to use a light color for the background (not white). Pastels are particularly good for this.
  6. Overall Presentation - your Web site should not be sloppy or haphazard. It should be neat and well organized.

Valid XHTML 1.0!     Top of Page     Homework Assignments     Class Assignments

Site Created by A. Lopez