You will create a simple html version 5 website consisting of 3 simple web pages...solved

You will create a simple html version 5 website consisting of 3 simple web pages...solved

This assignment covers html coding, computer history, and computer hardware.

You will create a simple html version 5 website consisting of 3 simple web pages. The first page will be a personal page, named index.html. The second will be a computer history page, named lastname-comphist.html The third page will be a computer hardware page named lastname-comphard.html. Your index.html page (this is your website's Home Page) will link to both of your other two web pages, and the other two web pages will link back to the Home Page. Your lastname-comphist.html page will have a link to your lastname-comphard.html page and lastname-comphard.html will have a link back to lastname-comphist.html. In other words, all three pages will contain links to the other two pages.

You must create three validated HTML5 documents (including <!DOCTYPE html) for this assignment. All should be created with a text editor such as Notepad in Windows, Notepad++, or Komodo Edit for the Macintosh (see above links for free downloads). Do not use Microsoft Word, OpenOffice or LibreOffice Writer, Microsoft Works, or any other word processor. They may seem to work, but will cause more headaches than they are worth. Also do not use Dreamweaver, or any cleanup program or process.

You must also create one validated CSS3 document named styles.css for this assignment. Each of your html documents will load styles.css via the <link tag. Within the styles.css file, place your name and today's date, and set colors (text color, background color, and all four link state colors) using hexadecimal values. styles.css must be placed in the same directory as your .html files.

BEFORE YOU BEGIN: Please read the Notes on X/HTML, and take a look at the html and css templates under the assignment assistance section. Proper HTML5 and CSS3 coding from the supplied templates is required. Validation errors will result in a reduced grade. Do not use an automated "clean up" function (i.e. from the validator), as it produces awkward code

PLEASE do not use Word for web page creation! It adds extra code that can be a nuisance for this assignment. Do not give in to the temptation, as fixing html and text copied from Word is more work than it is worth.

You need to have have at least one of each of the following somewhere within your three pages:

·         A Centered H1 tag

·         A left-aligned H2 or H3 tag

·         A page background color different from the template in a hex value (easiest) or background image. Body text color, link color, visited link color, and active link color must be specified on each page, and not the same colors as the template. Use proper hex values for colors - not color names.

·         Horizontal Rule

·         Table

·         A Link to an External Web Site

·         Either a 3 line item (or more) Unordered List or a 3 line item (or more) Ordered List

·         Navigation links between all three assignment web pages

·         At least 3 different text formats: normal, italic, strong, etc.

·         Text and link colors need to be readable on the background colo

Part 1: Page One: Your Home Page (index.html)

1.       Open a Notepad document (Start - programs - Accessories - Notepad) and write at least 2 paragraphs introducing yourself. Include information such as, but not limited to:

·         biographical information about yourself.

·         Educational goals

·         Hobbies/interests

·         Why you are at PCC and taking a computer concept class.

·         Anything else that might be of interest to the class and to me; you will be using this later in your Web project home page.

·         Save it as lastname_personal.txt in the appropriate folder on your USB device. This will provide the content for your home page (index.html)

Using the links and tutorials listed above in the Related Readings plus lectures and demonstrations in class, develop your home page and other pages.

·         Copy the contents of the provided html template into a blank plain text document.

·         Copy the contents of your lastname_personal.txt file into the code of the your new file, between <body and </body.

·         Save As: index.html in the assn2 folder of your USB storage device. (Remove any other content that might be in the content area from creating the template.)
Suggestion: Develop all your pages and save any images or other related files in the appropriate assn? folder on your USB device. Once you feel you have all your pages complete, copy only the relevant webpages, images, etc. to your website folder on your USB device. Hopefully, this will give you a work area (assn? directory) and a finished area (website folder).

Include an image file on your home webpage as specified below: Find a suitable picture of yourself or an image of some other subject that relates to the content of your home page and copy it to your website folder.

1.       Use the HTML code: <img / . All of these attributes (width, height, alt, and title) should contain valid values.

2.       The 'src' attribute is where you put the file name of your image along with the file extension and any relative pathing to where it is located in relation to the webpage. Since your web page and your image(s) reside in the same directory, not path information should be included in your <img tag.

3.       The ‘alt’ attribute makes the page accessible, i.e., a page reader would say whatever is in the quotes which should describe the image to a visually handicapped person. It also puts this name in the place where the image should go if downloading won’t allow the image to display.

4.       The 'title' attribute causes a small pop up box to appear when you mouseover the picture.

5.       Lastly, you should put the correct size of your image on your webpage by adding width and height attributes in pixels. Try not to use too large of an image. Do NOT use width and height to resize your graphic - use the values of the actual size of the image.

6.       You final code might look similar to this: <img /. This assumes your image is in the same directory as your webpage (which it should be for this assignment). Ensure that your spacing is correct - no spaces on either side of "=", and a single space before each attribute (src, width, etc.).

Part 2: Page Two: Computer History (lastname-comphist.html)

Save this page as: lastname-comphist.html but replace the "lastname" with your lastname.

There are 54 people associated with computer technology below. Research 10 of these people and for each, list their birth (and death) years and list one of their major contributions to computing (not everything they did!).

·         Ada Lovelace

·         Alan Turing

·         Andrew Grove

·         Bill Gates

·         Bill Hewlett

·         Carly Fiorina

·         Chad Hurley

·         Charles Babbage

·         Claude Shannon

·         Dave Packard

·         David Ferrucci

·         Dean Kamen

·         Donald Knuth

·         Douglas Engelbart

·         Edith Clarke

·         Elon Musk

·         Evelyn Boyd Granville

·         George Boole
·         Gilbert Hyatt

·         Gordon Moore

·         Grace Hopper

·         H. Edward Roberts

·         Ida Rhodes

·         Jawed Karim

·         Jean E. Sammet

·         Jef Raskin

·         John Atanasoff

·         John McCarthy

·         John von Neumann

·         Kay McNulty Mauchly Antonelli

·         Larry Roberts

·         Lawrence E. Page

·         Lawrence Ellison

·         Linus Torvalds

·         Marc Andreessen

·         Mark Elliot Zuckerberg
·         Meg Whitman

·         Mina Rees

·         Ray Tomlinson

·         Richard Stallman

·         Rob Pardo

·         Robert Metcalfe

·         Rosa Peter

·         Sandra Kurtzig

·         Sergey M. Brin

·         Seymour Cray

·         Steve Chen

·         Steve Jobs

·         Steve Russell

·         Steve Wozniak

·         Tim Berners-Lee

·         Tommy Flowers

·         Vinton Cerf

·         William Bradford Shockley

Make references as to where you obtained your information. Be specific, so I will be able to verify each source.

Save this page as:lastname-comphist.html, but replace the "lastname" with your last name.

Make sure that it has working links to your index.html and your last-comphard.html pages.HINT: You may want to try using a table or list to format your page.

Part 3: Page Three: Computer Hardware Page (lastname-comphard.html)

Save this page as: lastname-comphard.html, but replace "lastname" with your lastname.

For this page, you need to do at least ONE of the following (A or B):

A. Computer Comparison Table

Find ads for 2 or 3 different computer systems, and create a table or list that compares them. This should look something like:

Computer 1
Computer 2
P4 2.8GHz
P4 3.0 GHz
Hard Disk
Video Card
NVidia 5600
ATI 9800
15" CRT
17" LCD

The above is made up. Please use real data and provide links to websites where you found the information.

B. Number Systems

For this step, you should fill in the table below to show the corresponding values; yes, you DO NEED to submit this information within a table. The first row has been completed for you (for assistance, you may want to read the Measuring Information section in Hardware: CPU, Memory, Storage, Binary Arithmetic).

Spell a word*
Your current age in seconds**
* This should be a word of 4 to 8 characters using only the valid hex letters A,B,C,D,E,F. For example the word could be BEEF (sorry, you can't use that now) which by the way is 48,879 in Decimal.

**Approximately - Just do age in years * 365 days/year * 24 hours/day * 60 minutes/hour * 60 seconds/minute. For example, if you are 30 years old, the decimal number would be:

30 * 365/days/year * 24 hours/day * 60 minutes/hour * 60 seconds/minute =

30 * 365 * 24 * 60 * 60 = 946,080,000 seconds. You would want to convert this to binary, hex, and octal, and enter the results into your table.

Make sure that your lastname-comphard.html page has a link back to your lastname-comphist.html page and to your index.html page.

Save this page as: lastname-comphard.html, but replace "lastname" with your lastname.

Assignment Example -- the following shows an image of what part of your two web pages might look like. In addition to linking to each other, each of the two pages should also link to your index.html page, and your index.html page should link to each of these pages.

Assembling your website:

1.       In the suggestion above, it was recommended that you save all your working website files into your assn? folder on your USB device.

2.       Once you have completed all your pages, copy all the relevant html files and associated files (images, etc.) to your website folder on your USB. This way, your website folder will only contain the actual files needed for your website. Test it on your computer to be sure all links, pictures, etc. work/display.

·         Be sure that you have only used relative and not absolute paths in your links and images. Otherwise, they may not work when transferred to the SWS. Only use absolute paths for URLs to sites on the Internet.

Powered by