WebDev Level 1 Example Answers

(1)

WebDev Level 1 Example Answers

1.1.

<!doctype html>

<title>Code Avengers Profile</title>

<a href="/m/about.html">About us</a> | <a href="http://blog.codeavengers.com">Blog</a> </header>

<h1>My Profile</h1>

<img src="/images/profile1.png" width="180"

alt="profile">

<a href= "http://gas2.org/2010/10/21/meet-the-contenders-for-the-1000-pound-car/"

target="_blank" title="My Car">

<strong>Name</strong>: Supacoda<br>

<strong>Birthday</strong>: 14<sup>th</sup> April<br> <strong>Height</strong>: 1.79m<br>

<h2>My Super Powers</h2>

<p>I have super endurance, once I start, I keep going until I finish!

<p>I will eat anything and lots of it... if there is a plate with food on it, I will eat it!

<h2>My Favorite Websites</h2> <ul>

<li><a href="http://fern.nzdl.org">My language learning site</a>

<li><a href="http://mj-software.appspot.com">My cricket scoring software</a>

<li><a href="http://focusstudio.co.nz">Mum's photography</a>

</ul>

<h2>My Top 5 Foods</h2> <ol>

<li>Banana and feijoa smoothy <li>Chicken nacho salad <li>Vegetarian lasagna

<li>Fresh fruit and yogurt with LSA <li>Weetbix with muesli

</ol> </section>

1.2.

Make your superhero profile in lesson 1-10. Make a business profile in lessons 11-20. 1.3.

Make your superhero profile in lesson 1-10.

<br>

Make a business profile in lessons 11-20.

1.4.

Make your superhero profile in lesson 1-10.

<p>

Make a business profile in lessons 11-20. 1.5.

<!doctype html>

Make your superhero profile in lesson 1-10. <p>

Make a business profile in lessons 11-20. 2.1.

<!doctype html>

<title>Code Avengers Profile</title> My Profile

2.2.

<!doctype html>

<title>Code Avengers Profile</title> <h2>My Profile</h2>

2.3.

<!doctype html>

Name: Super Cutey <br>

Birthday: 24<sup>th</sup> December 2.4.

<!doctype html>

<strong>Name</strong>: Super Cutey<br>

<strong>Birthday</strong>: 24<sup>th</sup> December<br> <strong>Height</strong>: 0.63m<br>

2.5.

<!doctype html>

3.1.

<!doctype html>

Wrong end tags <br>

<br>

This text should NOT be bold 3.2.

<!doctype html>

(2)

<h1>Common Bugs</h1> Wrong end tags <br>

Missing slashes 3.3.

<!doctype html>

Wrong end tags <br> Missing slashes <br> Wrong tags 3.4. <!doctype html>

Wrong end tags <br> Missing slashes <br> Wrong tags <br> Wrong slash 3.5. <!doctype html>

Wrong end tags <br> Missing slashes <br> Wrong tags <br> Wrong slash <br> Deleted characters 4.1. <!doctype html>

<br> 4.2.

<!doctype html>

<br>

4.3.

<!doctype html>

<br>

<img width="120" src="/images/daughter2.jpg"

title="Kiss for Daddy">

title="Look at my muscles">

title="Mmm... lunch time"> 4.4.

<!doctype html>

<br>

<img title="I love Aunty" height="100"

src="http://2.bp.blogspot.com/-xsmh9dJ0qCM/Ty7glhjxj4I /AAAAAAAAASM/Qz1k_J3fTXQ/s320/IMG_7893.JPG">

<br>My Aunty<br>

<br> 4.5.

<!doctype html>

<br>

<img alt="Me" title="2 weeks old" width="100"

src="/images/profile0.png"> <br>

<img alt="My Aunty" title="I love Aunty" height="100"

<br>My Aunty<br> 5.1.

<!doctype html>

<br><a href="http://focusstudio.co.nz">My Aunty</a><br> <strong>Name</strong>: Super Cutey<br>

(3)

5.2.

<!doctype html>

<br> 5.3.

<!doctype html>

src="/images/logo.png"></a>

<a href="/m/about.html">About us</a> | <a href="http://blog.codeavengers.com">Blog</a> <h1>My Profile</h1>

<br> 5.4.

<!doctype html>

src="/images/logo.png"></a>

<a href="http://focusstudio.co.nz" target="_blank"> <img alt="My Aunty" title="I love Aunty"

height="100" src="http://2.bp.blogspot.com/-xsmh9dJ0qCM /Ty7glhjxj4I/AAAAAAAAASM/Qz1k_J3fTXQ /s320/IMG_7893.JPG"> <br>My Aunty </a> <br>

<br> 5.5.

<!doctype html>

title="Go to Code Avengers home page" src="/images /logo.png"></a>

<br> 6.1.

<!doctype html>

<a href="/index.html"><img src="/images/logo.png"></a> <a href="/m/about.html">About us</a> |

<a href="http://blog.codeavengers.com">Blog</a> <h1>Common Mistakes</h1>

Spelling mistakes in tag names<br> 6.2.

<!doctype html>

Spelling mistakes in tag names<br> Missing end tags<br>

6.3.

<!doctype html>

Spelling mistakes in attribute values<br> 6.4.

<!doctype html>

Spelling mistakes in attribute values<br> Incorrect attribute names<br>

(4)

6.5.

<!doctype html>

Spelling mistakes in attribute values<br> Incorrect attribute names<br>

Text in the wrong place 7.1.

<!doctype html>

<title>Code Avengers, Creator</title>

<h2>About the Creator</h2> 7.2.

<!doctype html>

<h2>About the Creator</h2>

<strong>Name</strong>: Mike Walmsley<br>

<strong>Birthday</strong>: 14<sup>th</sup> April<br> <strong>Job</strong>: PhD student<br>

7.3.

<!doctype html>

<strong>Birthday</strong>: 14<sup>th</sup> April<br> <strong>Job</strong>: PhD student<br>

<br>

<img src="/images/wedding.jpg" height="140"

title="Married 2010/03/06" alt="Mike and Nellie's wedding">

7.4.

<!doctype html>

<strong>Birthday</strong>: 14<sup>th</sup> April<br> <strong>Job</strong>: PhD student<br><br>

<a href="http://facebook.com/mrwwalmsley"

target="_blank"><img src="/images/wedding.jpg"

height="140" title="Married 2010/03/06" alt="Mike and Nellie's wedding"></a>

7.5.

<!doctype html>

<title>Code Avengers, My Likes</title>

<h2>My family</h2>

<a href=

"http://fionamotherof8.org/2012/02/special-blessing-to-us-all.html">

</a>

<h2>Sports</h2>

<img height="140" alt="Me playing AFL"

src="http://codeavengers.com/images/afl.jpg"> </a>

<img height="140" alt="Me finishing a marathon"

src="http://codeavengers.com/images/marathon.jpg" > </a>

<h2>Singing</h2>

width="320"></iframe>

<br>My sisters, Jenna and Holly 8.1.

<!doctype html>

I make people grab my cheeks by smiling... <br><br>

And pick me up by crying. <br><br>

I roll across my room in less than a minute. 8.2.

<!doctype html>

height="100" src="http://2.bp.blogspot.com/-xsmh9dJ0qCM /Ty7glhjxj4I/AAAAAAAAASM/Qz1k_J3fTXQ

/s320/IMG_7893.JPG"> <br>My Aunty </a>

(5)

<br>

<p>I make people grab my cheeks by smiling... <p>And pick me up by crying.

<p>I roll across my room in less than a minute. 8.3.

<!doctype html>

<p>I roll across my room in less than a minute. <h2>My Top Websites</h2>

<ul>

<li><a href="http://fionamotherof8.org">Grandma's blog</a>

<li><a href="http://http:

//focusstudio.co.nz">Grandma's photography</a>

<li><a href="http://mouse-master.com">Dad's game</a> <li><a href="http://fern.nzdl.org">Dad's language learning site</a>

<li><a href="http://mj-software.appspot.com">Dad's cricket scoring software</a>

</ul> 8.4.

<!doctype html>

<ul>

</ul>

<li>Mum's milk

<li>Mashed apple and peach <li>Mashed carrots

<li>Mashed banana <li>Farrex </ol> 8.5.

<!doctype html>

<ul>

(6)

<li><a href="http://fern.nzdl.org">Dad's language learning site</a>

</ul>

<li>Mum's milk

<li>Mashed apple and peach <li>Mashed carrots <li>Mashed banana <li>Farrex </ol> 9.1. <!doctype html>

<title>Code Avengers, HTML differences</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="/css/article.css"> <h1>Differences</h1>

<h2>Capitalization</h2>

<p>Doctype is usually in uppercase

<p>All other tag and attribute names should be lowercase

9.2.

<!doctype html>

<h2>Attribute Values</h2>

<p>Attribute values should be surrounded by double quotes

<p>Attribute values

<p>All other tag and attribute names should be lowercase

9.3.

<!doctype html>

<p>The html tag marks the start and end of an html page.

<p>The head and body tags mark the start and end of those sections.

<p>These 3 tags are optional, so we don't use them. 9.4.

<!doctype html>

<h2>Optional tags</h2>

<p>Some elements only have a start tag <p>Some elements have an optional end tag <h3>Start tag only</h3>

<h3>Optional end tag</h3> <ul> <li>p <li>li </ul> 9.5. <!doctype html>

<title>Code Avengers, HTML differences</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="/css/article.css">

<h1>Differences</h1> <h2>Comments</h2> <p>Comments are used to: <ul>

<li>explain the purpose of your code to your team; <li>hide code that you might want to show again later.

</ul> 10.1.

<!doctype html>

<a href="/index.html"><img alt="Code Avengers logo"

<h1>My Profile</h1>

<ul>

</ul>

<li>Mum's milk

(7)

<li>Mashed carrots <li>Mashed banana <li>Farrex </ol>

<!doctype html>

<a href="/index.html"><img alt="Code Avengers logo"

<h1>My Profile</h1>

<strong>Name</strong>: Super Cutey<br> <strong>Birthday</strong>: 24<sup>th</sup> December<br>

<strong>Height</strong>: 0.63m<br> <br>

<hr>

<p>I roll across my room in less than a minute.

<h2>My Top Websites</h2> <ul>

//focusstudio.co.nz">Grandma's photography</a> <li><a href="http://mouse-master.com">Dad's game</a>

</ul>

<li>Mum's milk

<li>Mashed banana <li>Farrex </ol> </section>

<!doctype html>

</a>

<h1>My Profile</h1>

<strong>Name</strong>: Super Cutey<br> <strong>Birthday</strong>: 24<sup>th</sup> December<br> <strong>Height</strong>: 0.63m<br> <br> <hr>

</ul>

<li>Mum's milk

<!doctype html>

</a>

(8)

href="http://blog.codeavengers.com">Blog</a> </header>

<h1>My Profile</h1>

<strong>Height</strong>: 0.63m<br> <a href="likes.html">My likes</a> <br>

<hr>

</ul>

<li>Mum's milk

<!doctype html>

<h1>My Profile</h1>

<strong>Height</strong>: 0.63m<br> <a href="likes.html">My likes</a> <br>

<hr>

</ul>

<li>Mum's milk

<!doctype html> <html>

<head>

<title>Code Avengers, CSS</title> </head>

<body>

<h2>Introduction to CSS</h2>

<p>In lessons 11-20 you will learn the CSS basics <p>You will learn how to:

<ol>

<li>Change colors <li>Change fonts <li>Change sizes <li>Add borders

<li>Use images for bullet points <li>Create fixed headers and footers </ol> </body> </html> 11.2. <!doctype html> <html> <head>

<title>Code Avengers, CSS</title> <style> html { background-color: blue; color: yellow; } </style> </head> <body> <h2>Introduction to CSS</h2>

(9)

<ol>

<title>Code Avengers, CSS</title> <style> h2 { background-color: darkBlue; color: lightYellow; } </style> </head> <body> <h2>Introduction to CSS</h2>

<ol>

<title>Code Avengers, CSS</title> <style> h2, p { background-color: indigo; color: yellowGreen; } </style> </head> <body> <h2>Introduction to CSS</h2>

<ol>

<title>Code Avengers, CSS</title> <style> html { background-color: lightBlue; color: navy; } h2, ol { background-color: hotPink; } </style> </head> <body> <h2>Introduction to CSS</h2>

<ol>

<title>Code Avengers, Common Bugs</title> <style> html { background-color: black; color: lightGreen; } h1 { background-color: lightGreen; color: black; } </style> </head> <body> <h1>Common CSS Bugs</h1>

<p>Here is a list of common CSS mistakes: <ul>

<li>Mispelled or incorrect tag names <li>Mispelled or incorrect property names <li>Mispelled or incorrect property values <li>Missing colon (:) after property name <li>Missing semi-colon (;) after property values <li>Missing comma between tag names (,)

<li>Missing { } around properties </ul> </body> </html> 12.2. <!doctype html> <html> <head>

<title>Code Avengers, Common Bugs</title> <style> html { background-color: black; color: tan; } ul { background-color: wheat; color: black; } </style> </head> <body> <h1>Common CSS Bugs</h1>

<li>Missing { } around properties </ul>

</body> </html> 12.3.

(10)

<!doctype html> <html>

<head>

<title>Code Avengers, Common Bugs</title> <style> h1 { background-color: black; color: orange; } p { background-color: gold; color: indigo; } ul { background-color: indigo; color: gold; } </style> </head> <body> <h1>Common CSS Bugs</h1>

<li>Missing { } around properties </ul> </body> </html> 12.4. <!doctype html> <html> <head>

<title>Code Avengers, Common Bugs</title> <style> body { background-color: black; color: white; } h1 { background-color: fireBrick; } ul { background-color: white; color: darkRed; } </style> </head> <body> <h1>Common CSS Bugs</h1>

</body> </html> 12.5.

<!doctype html>

<title>Code Avengers, Common Bugs</title> <style> body { background-color: paleGreen; } ul, h1 { background-color: lightYellow; } h1, p { color: red; } </style> <h1>Common CSS Bugs</h1>

13.1.

<!doctype html>

<h3>Capturing your special moments</h3> 13.2.

<!doctype html>

<!doctype html>

font-family: 'Trebuchet MS', sans-serif; }

(11)

h3 {

font-family: Georgia, serif; }

</style>

<h1>Focus Studio</h1>

<!doctype html>

font-family: 'Trebuchet MS', sans-serif; font-size: 40px;

} h3 {

font-family: Georgia, serif; font-size: 14px;

} </style>

<!doctype html>

/css?family=Oregano" rel="stylesheet" type="text/css"> <style> html { background-color: pink; } h1, h3 { color: purple; } h1 {

font-family: 'Oregano', cursive; font-size: 40px;

} h3 {

} </style>

<!doctype html>

/css?family=Oregano" rel="stylesheet" type="text/css"> <style> html { background-color: pink; } h1, h3 { color: purple; } h1 {

} h3 {

} </style>

<h3>Capturing your special moments</h3>

<strong>Location:</strong> Hamilton, New Zealand<br> <strong>Email:</strong> [email protected]<br> <strong>Phone:</strong> 021-149-0014<br>

<strong>Website:</strong> <a target="_blank"

href="http://focusstudio.co.nz">focusstudio.co.nz</a> <br>

<strong>Facebook:</strong> <a target="_blank"

href="http://facebook.com

/FocusStudioPhotography">FocusStudioPhotography</a> 14.2.

<!doctype html>

/css?family=Oregano" rel="stylesheet" type="text/css"> <style>

html {

background-color: pink;

font-family: 'Trebuchet MS', sans-serif; } h1, h3 { color: purple; } h1 {

} h3 {

font-family: Georgia, serif; font-size: 14px; } a { color: slateBlue; } </style> <h1>Focus Studio</h1>

<!doctype html>

html {

(12)

h3 {

color: purple; }

h1 {

text-decoration: underline; }

h3 {

font-family: Georgia, serif; font-size: 14px; } a { color: slateBlue; text-decoration: none; } </style> <h1>Focus Studio</h1>

<!doctype html>

html {

h3 {

font-family: Georgia, serif; font-size: 14px; } a { color: slateBlue; text-decoration: none; } a:hover { color: darkSlateBlue; text-decoration: underline; } h1:hover { font-size: 50px; } </style> <h1>Focus Studio</h1>

<!doctype html>

html {

h3 {

font-family: Georgia, serif; font-size: 14px; } a { color: slateBlue; text-decoration: none; } a:hover { color: darkSlateBlue; text-decoration: underline; } a:visited { color: darkRed; } </style> <h1>Focus Studio</h1>

<!doctype html>

<title>Code Avengers, Style Guide</title> <style>

html {

background-color: lightYellow; }

li {

h1 {

color: blue; }

</style>

<h1>Google Style Guide</h1>

<p>The Google style guide helps you write code that is easy to read.

<h2>CSS Formatting Guide</h2> <ol>

(13)

<li>Put 2 spaces before property names <li>Put 1 space before property values

<li>Put a <strong>;</strong> after property values <li>A blank line separates each CSS rule

</ol> 15.2.

<!doctype html>

html {

background-color: lightCyan;

font-family: 'Times New Roman', serif; font-size: 18px;

} h1, h2 {

font-family: 'Andale Mono', sans-serif; color: teal;

} </style>

<li>Put 1 space before the <strong>{</strong> <li>Put 2 spaces before property names <li>Put 1 space before property values

<li>Put a <strong>;</strong> after property values <li>Put each property on a new line

<li>Put each selector on a new line

<li>Use single quotes around property values when necessary

<li>A blank line separates each CSS rule </ol>

15.3.

<!doctype html>

html {

background-color: dimGray; color: white;

font-family: 'Trebuchet MS', sans-serif; font-size: 17px;

} h1, h2 {

color: chocolate;

font-family: 'Comic Sans MS', cursive; }

</style>

<li>A blank line separates each CSS rule <li>Put properties in alphabetical order </ol>

15.4.

<!doctype html>

html {

color: darkBlue; font-size: 16px;

font-family: 'Courier New', monospace; font-weight: bold;

} h1 {

font-family: Impact, fantasy; font-size: 28px;

font-weight: normal; }

h2 {

font-family: 'Century Gothic', sans-serif; font-size: 20px;

} </style>

15.5.

<!doctype html>

html {

color: darkBlue;

font: bold 16px 'Courier New', monospace; }

h1 {

font: normal 28px Impact, fantasy; }

h2 {

font: bold 20px 'Century Gothic', sans-serif; }

</style>

<h2>CSS Style Guide</h2>

<p>Use shorthand properties where possible 16.1.

<!doctype html>

(14)

h3 {

font-family: Georgia, serif; font-size: 14px; } a { color: slateBlue; text-decoration: none; } a:hover { color: darkSlateBlue; text-decoration: underline; } a:visited { color: darkRed; } </style> <h1>Focus Studio</h1>

/FocusStudioPhotography">FocusStudioPhotography</a> <br><br>

<img src="/images/daughter7.jpg" alt="My daughter"

width="115">

<img src="/images/daughter8.jpg" alt="My daughter 2"

width="115"> 16.2.

<!doctype html>

html {

h3 {

font-family: Georgia, serif; font-size: 14px; } a { color: slateBlue; text-decoration: none; } a:hover { color: darkSlateBlue; text-decoration: underline; } a:visited { color: darkRed; } img { height: 170px; } </style> <h1>Focus Studio</h1>

<img src="/images/daughter7.jpg" alt="My daughter"> <img src="/images/daughter8.jpg" alt="My daughter 2"> 16.3.

<!doctype html>

html {

h3 {

font-family: Georgia, serif; font-size: 14px; } a { color: slateBlue; text-decoration: none; } a:hover { color: darkSlateBlue; text-decoration: underline; } a:visited { color: darkRed; } img { border-style: ridge; border-width: 20px; height: 170px; } </style> <h1>Focus Studio</h1>

<strong>Location:</strong> Hamilton, New Zealand<br> <strong>Email:</strong> [email protected]<br>

(15)

<strong>Phone:</strong> 021-149-0014<br> <strong>Website:</strong> <a target="_blank"

<!doctype html>

html {

h3 {

font-family: Georgia, serif; font-size: 14px; } a { color: slateBlue; text-decoration: none; } a:hover { color: darkSlateBlue; text-decoration: underline; } a:visited { color: darkRed; } img { border-color: gold; border-width: 20px; height: 170px; } </style> <h1>Focus Studio</h1>

<!doctype html>

html {

font: normal 15px 'Trebuchet MS', sans-serif; } h1, h3 { color: purple; } h1 {

font: bold 40px Oregano, sans-serif; text-decoration: underline;

} h3 {

font: bold 14px Georgia, serif; } a { color: slateBlue; text-decoration: none; } a:hover { color: darkSlateBlue; text-decoration: underline; } a:visited { color: darkRed; } img {

border: 4px inset mediumSlateBlue; width: 115px;

} </style>

<!doctype html>

html {

font: normal 15px 'Trebuchet MS', sans-serif; } h1, h3 { color: purple; } h1 {

font: bold 40px Oregano, sans-serif; margin-bottom: 0;

margin-top: 2px;

h3 {