HTML / CSS Assignment
Overview:
Possible Topic: Fan Club Site
Resources: To Help You Learn CSS
Technical Criteria:
Other things you might want to consider including:
- In this assignment, you will be creating a website using proper HTML and CSS that consists of a minimum of three pages that make up a complete site upon a unifying topic. (Reminder: Usually the first page of a website should be saved as index.html and serves as an entry page to your site
- Make a web site that people will want to visit and read. Make certain your site has interesting information in it; that it is well organized and easy to navigate; and that it is artistically pleasing.
- Your site should be based around a single subject – one of your choosing! Remember, you are publishing not only for this class, but for the whole world to see!
- Be sure to test your pages in more than one browser: Explorer / Firefox, Safari, and / or Chrome.
- All pages should be uploaded properly to a site such as Dropbox with the proper link posted on your HTML Assignments page that you created in your Weebly portfolio.
- You will be marked on both your content and design, and will lose marks for broken links, html errors, differences in browser experiences, slow load times, and spelling and grammar errors.
- Create a website highlighting the special things about any city in the world. Chicago, Bangladesh, Tokyo…ANYWHERE!!!
- Tourist Locations
- Industry
- History
- Inhabitants
- Festivals and Events
- Famous Inhabitants
- What makes this City Special and Interesting!!!!
Possible Topic: Fan Club Site
- Create a Fan Club styled website that honors your favorite television show!
- Have a Central Home Page and several linked pages that include:
- Episode Guide
- Main Characters
- Actor/Personal Bios
- Merchandise
Resources: To Help You Learn CSS
- w3schools.com
- YouTube Tutorials
Technical Criteria:
- On each page you should include a graphic title or logo. A suggestion would be to create the title or logo you wish to use in Photoshop or use on an online tool such as "www.flamingtext.com". Realize that a title created by yourself in Photoshop is deserving of higher marks.
If using Photoshop, titles/logos should use a font of your choice as well as some graphic treatment (such as filters or layer effects). Use File > Save for Web and post the title or logo to your pages as a GIF, JPG, or PNG file. - You should lay out your content using <div> tags and position them as you see fit. The number of columns and exact layout is up to you. If you are having problems with layout using CSS, with permission from the teacher, you may utilize complex tables using column and row spanning.
- In your head section, you should make use of at least two meta-tags (i.e. keyword & description)
- There should be titles for each page (in the head of your HTML documents)
- There should be paragraph and heading text on each page, as well as images. (<p> and heading <h1>, <h2>, <h3> . . <h6>, <br> <img .... >
- There should be hyperlinks on each of the pages that provide navigation capabilities for your site. Each page to link to every other page. Use relative hyperlinks.
- that go back to your index.html file and to the other pages in the site.
- In addition, there should be at least one link to an external website. Use an absolute hyperlink, and have it open in a new browser tab or window.
- At least one of your images should link to another page or another site.
- You should include at least one numbered list or one bulleted list somewhere on at least one of your pages.
- You should include at least one table somewhere on one or more of the pages. In addition, the table should be properly formatted using CSS.
- You should create simple rollover effects (CSS using the :hover pseudoselector or image based rollovers)
- You should include an image map (which is a separate graphic from the original graphic listed above)
- You should utilize anchors and links to anchors (links that link to content within a specific page)
- Your site must utilize an external style sheet (.css document) with at least three style rules that is linked correctly to all of the HTML pages in your site. At the minimum, your style sheets should specify:
- font family and font size for body, paragraph and heading text.
- attributes for various link states including link, visited, focus, hover, and active.
- either a background image or background color for your pages - At least one of your HTML pages should also include an embedded style sheet (within the head section of the document, below the external style sheet link) with at least two style rules that apply to the specific page
- Beyond these requirements, feel free to include additional CSS to design your pages as you like!
Other things you might want to consider including:
- At least one cloud based component (google form, google search, google map, chatroom, etc)
- Google Analytics integration (so you can track your visitors) - Research what Analytics is all about
https://www.google.com/analytics/web/provision?et=&authuser=#provision/SignUp/ - An animated banner (See Here)
Favicon
A favicon is a graphic image associated with a particular Webpage and/or Website. Often they are displayed as a visual reminder of the Web site identity in the address bar, in tabs, on the bookmark bar, or in the bookmark list.
In Photoshop, Illustrator, Fireworks or other graphics program
Find an icon on the Internet (but remember it is more fun to create your own)
Basic Format: <link rel="shortcut icon" href="path and file name" />
Example: <link rel="icon" type="image/ico" href="images/favicon.ico"/> <link rel="icon" type="image/png" href="/somewhere/myicon.png" />
3. Publish your site. The favicon will appear in the address bar (and also in the Favorites / Bookmarks menu when saved) of your browser.
Testing
- Create new document ->size:16px x 16px or or 32x32 pixels, using either 8-bit or 24-bit colors
- Create something simple that best describes your site
- The format of the saved image must be one of PNG (a W3C standard), GIF, or ICO. (name.extention)
Example: favicon.ico
In Photoshop, Illustrator, Fireworks or other graphics program
- To begin with, you will need a small icon that you wish to set as the ‘FavIcon’. It should be 16×16 in size.
Find an icon on the Internet (but remember it is more fun to create your own)
- Rename it to favicon.ico
- Note if the icon is not an actual icon with the extension .ico, simply changing the filename extension of an image to .ico without converting it to an ICO file will result in an error and not displaying the favicon.
Basic Format: <link rel="shortcut icon" href="path and file name" />
Example: <link rel="icon" type="image/ico" href="images/favicon.ico"/> <link rel="icon" type="image/png" href="/somewhere/myicon.png" />
3. Publish your site. The favicon will appear in the address bar (and also in the Favorites / Bookmarks menu when saved) of your browser.
Testing