csuci home art home blackboard
csuci web design | art 324 banner csuci
q
c
art 324 home
line
syllabus
line
course schedule
line
student websites
line
cool websites
line
web resources
line
events
line
media arts festival
line
p
spacer

header


     smiley face

header project 1

  1. Read through and memorize the web terminology found on my web terminology page (click this link to go to the page)
  2. First create a site folder for yourself named: art324, Inside that folder make a site folder for yourself named: lastname_site. This will be your site folder for the whole semester.
  3. Inside the lastname_site folder create a folder called Homework_01_handcoding. This assignment will go in there.
  4. Name the files: 001.html and 002.html
  5. I will check you off on your completed assignment on Wed. Sep. 7th at the beginning of class.


    requirements

    Create 2 HTML hand coded web page using a simple text editor like TextEdit (Mac) or Notepad(PC). Your pages must include the 8 requirements below.

    The subject of page 1 is: your favorite band/musical group/singer.

    The subject of page 2 is: your choice of subject matter.

    If you are using TextEdit make sure you go to the Preferences and follow the directions below:

    1. Open TextEdit.
    2. Choose Preferences from the TextEdit application menu.
    3. Click the Plain Text radio button for New Document Format.
    4. Under Saving, click the checkbox to turn off "Append '.txt' extension to plain text files."
    5. Click the checkbox to turn on "Ignore rich text commands in HTML files."
    6. Be sure the checkbox for "Wrap to Page" is deselected
    Requirements:

    1. All hand-coded.
    2. Both html pages must have the XHTML 1.0 Transitional DTD at the top of your document (you may copy and paste it from below)
    3. Both pages must have proper html structure including: opening and closing html tags, head, title and body tags. All tags must be lower case so they are XHTML compliant.
    4. Experiment with heading styles, bold and italic text, horizontal rules & typing some text into a paragraph tag.
    5. Use real or made up "copy" or text on the page, or even lorem ipsum dummy text (lipsum.com)
    6. Add everything that you see in Steps 1-17 below.
    7. Minimum of 2 images on each page.

    STEPS

      1. For the first html page you are going to make, open a new file in TextEdit or Notepad and immediately save it as: index.html, save it to your root folder (lastname_site) in a folder called proj_1a.

      2. Next, add an XHTML 1.0 Transitional DTD at the top of your document, which you may copy and paste from below.

        3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

      3. Next, add an opening and closing html tag: <html> </html>

      4. Next, add a "head" tag: <head> </head>

      5. Next, inside the head tag add a "title" tag/element: <title>Joe Dolphin :: Project#1, Art 324 Fall 2011</title>

      6. Then after that, add a "body" tag: <body> </body>

      7. So far your code should look like this:

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html>

        <head>
        <title>Joe Dolphin :: Project#1, Art 324 Fall 2011</title>
        </head>

        <body>

        </body>

        </html>

      8. Now add some text to the page, this will go inside the body tag:

        <body>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis sollicitudin massa. Vivamus aliquam elit eget mi molestie aliquam. In aliquam, tellus ac pulvinar tempus, lacus dui volutpat dolor, luctus lacinia magna orci sed turpis. Curabitur pulvinar adipiscing lacinia. Donec pharetra lobortis libero quis consectetur. Morbi laoreet, urna id gravida viverra, est orci mollis odio, at tristique nisl quam ac dui. In tincidunt convallis erat, sed tristique turpis hendrerit et. Cras leo orci, fermentum vestibulum posuere vel, tempus vitae purus. Mauris sit amet metus id eros gravida ullamcorper vehicula id eros. Cras in rutrum metus.
        </body>

      9. Background color - To change the background color of the html document to a solid background color you must assign a "style" to the page using CSS(Cascading Style Sheets). For this project, the CSS style "rule" will go in the head tag of the document and be written like this:

        bgcolor

      10. Background image - to tile a background image on an html so that the image repeats throughout the page. Special attention should be paid as to whether you want the image to be a very small image that tiles throughout the page or a larger image that may not tile. For this project the style will go in the head tag of the document and be written like this:

        bg image html

        Click here to download some seamless tiles or try squidfingers.com

      11. Heading styles

        <h1>The biggest heading</h1>
        <h2>        The second biggest heading</h2>
        <h3>        The third biggest heading</h3>
        <h4>        The fourth biggest heading</h4>
        <h5>        The third biggest heading</h5>
        <h6>        The sixth biggest heading</h6>

      12. Line break

        Use a line break at the end of a line when you want a single-spaced break

        some text using a br with a line break at the end<br>

      13. Paragraph tag - a "container" for image and text content

        <p>type or paste some text within this paragraph tag. Use real text, or for comps you can use some lipsum text if you want.

      14. Bold and italic

        <strong>Some Bold Text</strong> OR <em>Some Italic Text</em><br>
        <strong>        Some Bold Text AND <em>some bold and Italic text</em></strong>


      15. Horizontal rule (a graphic line created using html)

        <hr>
        <hr size="20">
        <hr width="100" align="left">
        <hr width="50%">
        <hr noshade>

      16. Assigning the font type and text color and boldness:

        textcolor\

      17. Inserting an image(s) requires inserting an image tag in the body tag of the document:

         <img src="images/flower.jpg" alt="flower" width="300" height="300">

      ------------------------------------------------------------------------------------------------------------------------

      homework #2

      Create a one page, one column webpage very similar to "Pinky's Bakery" that uses all of the elements listed below. We will have time on Monday to continue to work on this in class, however do as much as you can to add the items below. More advanced students can make a second page and link to it.

      1. DTD
      2. html tags
      3. head tags
      4. title tags
      5. body tags
      6. CSS Styles in the head tag
      7. Adding a Background color to the html page
      8. adding a Background image to the html page
      9. headings (h1, h2, h3 etc.)
      10. paragraph tag <p>
      11. live text in the body tag
      12. line break <br>
      13. bold <b> or <strong>
      14. italic <i> or <em>
      15. horizontal_rule <hr>
      16. font family
      17. font color
      18. font weight
      19. blockquote(indent) <blockquote>
      20. pre tag <pre>
      21. alt tags on images
      22. links
      23. anchor links
      24. text flowing around an image
      25. ordered lists <ol>
      26. unordered lists <ul>
      27. line height (aka leading) line-height:1.25em
      28. special characters: extra spaces, copyright symbol, quotes
      29. changing link colors

      ------------------------------------------------------------------------------------------------------------------------

      MIDTERM PROJECT

      midterm requirements
 
 
professor liz king