top of page

ARTM2210 INTRO TO WEB: SCHEDULE

 

WEEK 1

 

HTML BASICS

Hypertext Markup Language is for organizing and defining content. Tags are placed around content to describe what it is and its level of importance.

 

<html> (this must enclose all other tags)

​

<head> (stuff in the head is generally unseen by the user, and contains elements that enhance stuff displayed within the body)

​

     <title>Page Title</title> (shows up at the top of a browser window, in search results and is used for bookmarks)

 

</head>

​

     <body> (anything you wish to be visible within a web browser must be placed within the body tag)

​

          <h1>a big heading</h1> (note: h tags are the only elements that use a number, h1- h6, the appearance of each gets progressively smaller)

​

          <p>a paragraph </p>

 

          <ul> (a list note: ul an unordered list will appear with bullets, ol an ordered list will appear with numbers)

​

               <li>a list item</li> (note: li tags will always be nested within a ul or ol element)

​

          </ul>

​

     </body>

​

</html>

​

File transfer protocol is used for uploading site files to a web server. On media arts computers you will find an application called Fetch, use it to log into the server and upload your files, from your home computer you may use Fetch or Cyberduck. All assignments must be uploaded to your account to receive credit.

 

Download and follow the instructions for

using FetchWithSSHKeys or CyberduckWithSSHKeys. You should have been emailed a SSHKey, if you haven’t yet received yours email me immediately.

​

Create a single HTML page, this will be your homepage* for the semester and where you will post links to all of your other exercises and projects. For now it must include the following:

​

  • A page title

  • Your name

  • Major and year

  • Email address

  • Short bio – 150 words that describe your career aspirations and goals

  • An unordered list of 3 artistic/design related influences

  • A ordered list of your top 5 most visited websites

  • The above items should use appropriate HTML tags

  • Save it as index.html

  • Upload to the server using Fetch or Cyberduck and be sure to put your files in the Public_HTML folder

  • Email me a link to your homepage before the start of our next class

 

* Keep in mind once this is posted to the server it is publicly available for the world to see.

​

See link: Intro To Web Design Student Samples

​

​

PROJECT 1A

Write ten haiku about the various principles and elements of design; balance, proximity, emphasis, alignment, contrast, rule of thirds, unity, repetition, proportion, color, type, etc.

 

After writing your haiku, sketch simple compositions to compliment each poem and are representative of the principle they are about. Further, each sketch may only use simple shapes: squares, rectangles, circles, lines and filled with solid colors.

 

I’ll recommend using graph paper but blank is fine as well. Poems and sketches are due at the beginning of our next class (class 3). Not having sketches ready for class 4 will incur a 10% reduction of your final grade for this project.

​

​

WEEK 2

​

Labor Day

​

WEEK 3-10

​

LINKS

Linking to internal files, external sites and email addresses all use the a tag and its href attribute. Linking to an external site must always use an absolute address,
for example: <a href=”http://google.com”>google</a>

 

Linking to an email address is similar, but the mailto: property is added,
for example: <a href=”mailto:shord@rmu.edu”>Doris Short</a>

 

Linking to internal files require a relative address and close attention to file management must be paid. For example to link to another file my HTML would look like this
<a href=”someotherfile.html”>some other file on my site</a> and require that the files being linked be in the same folder.

​

IMAGES

Linking to images is similar to linking to files, they can be linked absolutely or relatively, however, they use the img tag and the src, width, height and alt attributes. For example a photo linked relatively would look like this:

 <img src=”yourphoto.jpg” height=”100″ width=”100″ alt=”this is a photo of me”/> 

note that the img tag does not have a closing tag.

​

DOCUMENT TYPES AND CHARACTER SETS

As there are now 5 versions of HTML, you want to set your document type so browsers know what version you are using. We will be using HTML 5 in the class so each of your documents should now start with :
<!doctype html> 

This comes directly before the <html> tag

 

It is also important to note, web pages can be done in a number of languages, so a character set should be set as well. We will be using the western standard UTF-8. This is set using a meta tag inside the head.
<head>
<meta charset=”UTF-8″>
<title> page title </title>
</head>

​

CSS BASICS
To make your HTML look good we need Cascading Style Sheets, CSS. With CSS we tell our HTML tags how we would like them to look using rules. CSS rules are made up of Selectors and at least one Declaration. Declarations are made up of one property and its values.

​

​

​

​

​

​

​

​

​

​

A Selector can be any HTML element. For example if you wish to style your Paragraph <p></p> you’d simply start with p then place your declarations between curly

brackets { }.

 

Declarations define how things look through various properties like font, color, width, margin, boarder, etc. So to continue our example, if we wanted to style our paragraph by making the font arial, 12point and grey that is double spaced our rule would look like this:

p {font-family:Arial; font-size:12pt; color:#666666; line-height:24pt;}

​

IN-CLASS:

Continue work on your homepage and complete the following:

 

  • Edit bio for spelling and grammar

  • Add links to your email address and influences and top 5 sites

  • Add a link to the 1st mini project

  • Add a photo of yourself

  • Add CSS to style backgrounds, colors, margins and the fonts of the HTML tags you have already used.

  • Upload changes and photo to the server, if not completed in class have posted before the start of class 4.

​

See Link: Intro To Web Design Student Samples

​

READ

The Principles of Beautiful Web Design: Chapter 1: Layout and Composition

​

WEEK 10

NURSERY RHYME

​

WEEK 11

CHOOSE A SINGLE PAGE WEBSITE TO ANALYZE

​

Before writing the review you should read or have already read:

 

Monthly Review: Choose a single page website that has been highlighted on http://onepagelove.com/. Describe and analyze the site’s use of color and texture. Further, as this is a single page site how does user to navigate from one section of content to another? Does the user have to scroll left to right, top to bottom, all over or is navigation provided that takes the user to the content? What design elements make the site easy to scan, read and understand content. Lastly, make an argument for whether this site’s design is well or poorly done.

​

Create your review (include images if needed) and safe as a PDF and have it as a link to a document on your website.

​

 

MULTIPAGE WEBSITE - YOUR FINAL PROJECT

​

Create a multipage website of your choice - but get approval by me. The site should establish an identity and branding for your intended audience, be easily navigated and attract your target audience. The design should create an online atmosphere that is representative of a physical location. The content should highlight what is special about a service or product. For example specialties, locations, bios, reviews, As web designers, you should research the competition and suggest/create additional content for the site.

Minimum Requirements
Minimum of 8 to 10 pages
Valid HTML and CSS which will be checked by validator.w3.org
Rollovers, bread-crumbing
Original graphics, photography and/or video
jQuery

​

Process Requirements
Work in teams of 3 or 4
Create 5 to 10 Sketches and 1 digital comp
Show Evidence of research
Suggest a domain name and host – this must be submitted with your final review
Evidence of process should be handed-in in the form of a sketch book or pdf.

​

​

​

​

​

​

​

​

​

​

​

​

​

selector.gif

© 2019 By Doris Short

bottom of page