ITE 170 HTML/CSS Homework

HTML/CSS Bio Homework:

Read and study the HTML5 Tutorial
Create a folder called hw3
- all lowercase letters
- no spaces
- no capitals
- this is a FOLDER (also known as a directory), so do not put any extension on the name.
- save all of your work for this homework in the hw3 folder

First Part of the Assignment (basically the same as hw2)

Using a text editor, code a three page website about you - you may reuse material from the hw2 assignment if you like
- the home page in the folder hw3 must be named index.html
- the file names for the other three pages must follow the naming conventions
  - all lowercase letters
  - no spaces
  - no capitals
- the four pages (the 3 html pages and the image file mentioned below) should have descriptive names rather than page2, page3, etc. - as your sites get larger, this is helpful
Use the following tags in your site -- a tag does not have to be in every page, e.g. you need only have one image
- h1
- h2
- p
  - put at least two paragraphs on each of the inside pages. The paragraphs can be as short as one sentence.
  - Use your own words

img
- you need only use one image, although you may use more

specify the height and width attributes of the img tag in pixels. In Windows, you can determine the natural size of an image by hovering over the image in File Explorer. In File Explorer, the first figure is the width. For this assignment only, you may resize using these attributes rather than in a graphics program; however normally you will want to keep the same aspect ratio when you resize (the relationship between height and width)
You can resize the image in Paint which is available on all Windows machines - In Paint there is a resize button.

ol or ul

link the pages together, using relative linking
- Because the files are all in the same folder, you specify only the filename for the href attribute of the a tag
- In a small site like this, each page should link to every other page, unless you want the user to go through your site in a particular order (like in a tutorial)
- Use a consistent navigation scheme, meaning the links should be in the same place and in the same order on every page. For the page you are currently on, there should either be a link to itself, or just the text of the link should appear (without it being an actual link). You should not drop the text out of the navigation bar - this is confusing for the user.
- Your main navigation will look like this
<nav>
<ul>
<li><a href="index.html">Home</a>
<li><a href="school.html">School</a> (using what is appropriate for your site instead of School)
<li><a href="work.html".>Work</a> (using what is appropriate for your site instead of Work)
</ul>
</nav>

Second Part of Assignment (the new part)

Don't use any inline CSS.

Don't use any embedded CSS

CSS coding in the html files (inline or embedded) will result in points being deducted from your grade. Do NOT put any styling in your html pages.

Avoid the use of deprecated or obsolete tags and attributes

Create one, and only one, external CSS style sheet to style the following tags. Get creative! If you use the same CSS property for each tag, use additional CSS properties so there is some variation in your use of CSS properties.

it is required that you style these tags in your CSS style sheet
- body
- h1
- h2
- p
you may also style additional tags if you like. To turn off bullet points in the unordered list only in the <nav> area of the page, you can use nav ul {list-style-type:none}
If you want a tag styled differently across the pages, you can use classes, id's, and/or contextual or descendant CSS.

Don't forget to link up the html pages with the external CSS style sheet - you use the <link> tag for this purpose in the head section of the html files.

You will copy your <link> tag to the other html pages in the site so that all html pages are connected to the same css file

Make the website look attractive.

Put the three html pages, the one image file, and the one .css file in the folder called hw3

Validate the html and css pages using the html and css validators. In general, it is best to validate your files before you upload them so you catch errors before uploading; however, unlike previous years, you can now validate files specifying the URL of your student site at www.student.nvcc.edu/myNOVAusername.

Upload the hw3 folder and all of its contents to your student web space

If you are using the myDrive file manager to upload the files, the easiest way is to upload the hw3; there is no need, unlike the previous myDrive, to upload the zip file using myDrive. and then use the Unzip feature at the right-hand side of myDrive to unzip the folder.

If you are using an FTP program such as CoreFTP or FileZilla, you can just upload the hw3 directory (which will also upload its contents)

The URL of your site on your student site shoud be something like student.nvcc.edu/hw3 where username is replaced by your myNova username; the URL must contain your myNova username. You cannot, at present, get the URL by clicking "My Student Site" at the left in the myDrive interface.

An alternative to myDrive - your URL would be http://www.ite170.com/yourlastname/hw1. If you do this, you must use an FTP program like CoreFTP or FileZilla to upload your file to this website.

After you have uploaded your site to the server, test it in a browser, i.e. open a new tab or window, and paste the URL of your site and make sure everything works

In Canvas, submit the URL when the homework is ready to be graded against the assignment.

COPY and PASTE the url to your site.
If you copy and paste the URL from the address bar of your browser, you will know it is correct.
Do not submit a URL that references a drive on your computer or a folder on your computer (e.g. Desktop)
A valid myDrive URL will not contain the word "file"

Revised: 2/13/23, 5:45pm, 2/19/23 to provide URL alternative to myDrive