Web Development Labs @kevswebdev - Tumblr Blog

Lab 9

html code:

<!DOCTYPE html> <head> <title>Box-Shadow</title> <link rel = "stylesheet" href = "lab9.css" type = "text/css" /> </head> <body> <div class = "box"> <div class = "inner-box"></div> </div> </body>

CSS code:

/* filename: lab9.css */

.box { /* Part 1 */ width: 400px; height: 305px; margin: 50px auto; position: relative; background-color: #FFFFFF; border: 5px solid #DDDDDD; }

.inner-box { /* Part 2 */ width: 220px; height: 180px; position: absolute; right: 0px; bottom: 0px; background-color: #002EFF; box-shadow: 5px 5px 3px #888888; /* Part 3 */ -webkit-transform: skew(0deg, 8deg); /* Chrome, Safari, Opera */ transform: skew(0deg, 8deg); /* Part 4 */ z-index:-1; /* Part 5 */ background-color: black; }

#lab 9

Lab 7

Source Code:

<!DOCTYPE html>

<html> <head> <title>Adventure Classic Gaming</title> <link rel = "stylesheet" href = "lab7sheet.css" type = "text/css" /> </head> <body> <div class = "header"> <img class = "banner" src = "banner.gif" /> </div> <div class = "left-side"> <br> <img class = "menu" src = "sidemenu.jpg" /> <h3>Join Our Team!</h3> <p class = "joining-ad"> We need your help! We are<br> now seeking talented<br> gamers to join our team as<br> volunteers as editors or<br> contributors. No prior<br> experience is required. If you<br> like to write about adventure<br> gaming for this site and see<br> your work read by your fellow<br> adventure game fans<br> worldwide, read our <a href = "">authors'<br> instructions</a> and <a href = ""> contact us</a><br> for further information. </p> </div> <div class = "right-side"> <h2>Current Articles</h2> <div class = "left-align-article"> <h3 class = "article-title"> The Bizarre Adventures of Woodruff and the Schnibble <a class = "genre">RETRO</a> </h3> <p class = "article"> The Bizarre Adventures of Woodruff and the Schnibble (also known as Woodruff and the Schnibble of Azimuth) is among the last adventure game created by Coktel Vision, a French game development company acquired by Sierra On-Line in 1992. Though not part of Coktel Vision's Goblins trilogy, The Bizarre Adventures of Woodruff and the Schnibble has the same graphical style as the better-known... </p> </div> <img class = "right-align-photo" src = "image1.jpg"> <br><br> <p class = "underline"> </p> <img class = "left-align-photo" src = "image2.jpg"> <div class = "right-align-article"> <h2 class = "article-title"> Adventure game puzzles: unlocking the secrets of puzzle design </h2> <p class = "article"> For a lot of games, you can figure out most of what you need to know about them from simply looking at an in-game screenshot or watching a gameplay trailer. With a quick glance at the head-up display and the quality of the graphics, you can get a good sense of what kind of monster killing mayhem you will be engaging in and what kind of experience you will likely get from playing the... </p> </div> <br><br> <p class = "underline"> </p> </div> </body> </html>

#lab 7

Lab 5 Question 4

#lab 5

Source Code:

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">  <head> <title>College Survey</title> </head> <body> <h2 align="center">Survey!</h2> <form name="myForm" method="post" action="mailto:[email protected]"> First Name:<input name="firstName" value="" size="10" /> MI:<input type="text" name="middleInitial" size="1" /> Last Name:<input type="text" name="lastName" value="" size="10" maxlength="15" /><br> Address:<input type="text" name="address" value="" size="22" maxlength="30" /><br> City:<input type="text" name="city" size="10" maxlength="15" /><br> State:<input type="text" name="state" size="10" maxlength="15" /> Zip code:<input type="text" name="zipCode" size="5" maxlength="10" /><br> Country:<input type="text" name="country" size="10" maxlength="15" /><br><br> <div>Check your gender:</div> <input type="radio" name="gender" value="male" /> Male <input type="radio" name="gender" value="female" />Female <input type="radio" name="gender" value="other" />Other <br><br> <div>Check your current college year:</div> <input type="radio" name="year" value="first" />Freshman <input type="radio" name="year" value="second" />Sophomore <input type="radio" name="year" value="third" />Junior <input type="radio" name="year" value="fourth" />Senior <br><br> <div>Do you plan to go to grad school?</div> <input type="radio" name="gradSchool" value="go" />Yes <input type="radio" name="gradSchool" value="nogo" />No<p></p> <br> <input type="submit" name="submitButton" value="Send" /> <input type="reset" name="resetButton" value="Erase" /> </div> </form> </body> </html>

#lab 5

Lab 5 Question 2

Source Code:

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">  <head> <title>College Survey</title> </head> <body> <h2 align="center">Survey!</h2> <form name="myForm" method="post" action="mailto:[email protected]"> First Name:<input name="firstName" value="" size="10" /> MI:<input type="text" name="middleInitial" size="1" /> Last Name:<input type="text" name="lastName" value="" size="10" maxlength="15" /><br> Address:<input type="text" name="address" value="" size="22" maxlength="30" /><br> City:<input type="text" name="city" size="10" maxlength="15" /><br> State:<input type="text" name="state" size="10" maxlength="15" /> Zip code:<input type="text" name="zipCode" size="5" maxlength="10" /><br> Country:<input type="text" name="country" size="10" maxlength="15" /><br><br> <div>Check your gender:</div> <input type="radio" name="gender" value="male" /> Male <input type="radio" name="gender" value="female" />Female <input type="radio" name="gender" value="other" />Other <br><br> <div>Check your current college year:</div> <input type="radio" name="year" value="first" />Freshman <input type="radio" name="year" value="second" />Sophomore <input type="radio" name="year" value="third" />Junior <input type="radio" name="year" value="fourth" />Senior <br><br> <div>Do you plan to go to grad school?</div> <input type="radio" name="gradSchool" value="go" />Yes <input type="radio" name="gradSchool" value="nogo" />No<p></p> <br> <input type="submit" name="submitButton" value="Send" /> <input type="reset" name="resetButton" value="Erase" /> </div> </form> </body> </html>

#lab 5

Lab 5 Question 1

Source Code:

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">  <head> <title>Book Order Form</title> </head> <body> <h2 align="center">Book Order Form</h2> <form name="myForm" method="post" action="mailto:[email protected]"> Enter your name:<br /> First Name:<input name="firstName" value="" size="10" /> MI:<input type="text" name="middleInitial" size="1" /> Last Name:<input type="text" name="lastName" value="" size="10" maxlength="15" /><br /> Address:<input type="text" name="address" value="" size="22" maxlength="30" /><br /> City:<input type="text" name="city" size="10" maxlength="15" /><br /> State:<input type="text" name="state" size="10" maxlength="15" /> Zip code:<input type="text" name="zipCode" size="5" maxlength="10" /><br /> Country:<input type="text" name="country" size="10" maxlength="15" /><br /> <br> <div>Which book(s) would you like:</div> <input type="checkbox" name="food" value="" checked />Harry Potter 5 <input type="checkbox" name="food" value="" />The Bible <input type="checkbox" name="food" value="" />Take-Away Menu<br /><p></p> <div>When would you like it sent:</div> <input type="radio" name="sports" />Today <input type="radio" name="sports" checked />The Weekend <input type="radio" name="sports" />Sure whenever you're ready love, take your time<p></p> <div>Select your favourite books for future reference:</div> Fiction&nbsp&nbsp<input type="checkbox" name="books" /><br /> History&nbsp<input type="checkbox" name="books" /><br /> Fantasy<input type="checkbox" name="books" checked /><br /> <p></p> <input type="submit" name="submitButton" value="Send It" /> <input type="reset" name="resetButton" value="Clear It" /> </form> </body> </html>

#lab 5

Lab 4

Nielsen’s Heuristics

Simplicity:

I feel that my website is adequately simple to use. The menu is simple, and none of the wording is vague or liable to cause confusion. It also isn't cluttered by any unnecessary images.

Visibility of Status:

There isn’t really enough going on to implement Visibility of Status. The only links bring you to other simple pages on the same site, and there are no long processes that would necessitate a loading bar.

User Control:

There aren’t any irreversible processes on the site that would require, say, an extra confirmation from the user. Seeing as you can get to anywhere on the site with one click, so far extra elements of User Control are unnecessary.

Recognition:

The user does not have to remember any paths taken as the paths are displayed in the footer of the site.

Consistency:

The site is quite consistent as the only thing that changes is the content in the main section (the heading and menu stay the same), and the content here is all centred. CSS makes this easy as there is a clear separation between content and format.

#lab 4

Lab 3

A site using image links to provide navigation: dit.ie

1. What colours are used on the image links?

The colours on the image links are predominantly blue, to coordinate with the colours of the college and the rest of the site.

2. If the image links contain text, is there good contrast between the background colour and the letters on the image?

There is good contrast, but the text is very small in some of the images, sometimes making them unreadable.

3. Would the page be accessible to a visitor who is sight-challenged?

As I said above the text is sometimes small, but there is also the option to make the font bigger and bigger again, so that makes it a lot more accessible.

4. How have accessibility issues been addressed?

The option to use a bigger font,

5. Is there an alt attribute used to describe the image link

Yes, in the image of the DIT logo, which links to the homepage, there is an alt attribute

6. Is there a row of text links in the footer section of the page?

Yes, there are links to the various social media sites of the college.

#lab 3

Trending Blogs

Recently Viewed Blogs

Web Development Labs