HTML/CSS 1 Answers 1. [[paragraph]] and [[break]] tags 2 ... · HTML/CSS 1 Answers 1. [[paragraph]]...

12/16/2016

1/35

HTML/CSS 1 Answers

1. [[paragraph]] and [[break]] tags

1.1. introduction to HTML

<!doctype html>

<title>Code Avengers Profile</title> <meta name="viewport" content="width=device‐width"> <meta name="description" content="Code Avengers superhero profile page"> <link rel="stylesheet" href="/css/profile1.css">

<header> <a href="https://codeavengers.com"><img src="/images/logo.png"></a> <a href="/m/about.html">About us</a> | <a href="http://blog.codeavengers.com">Blog</a> </header>

<section> <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"> <img src="/images/car.jpg" width="100"> </a> <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://mouse‐master.com">My HTML5 game</a> <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://fionamotherof8.blogspot.com">Mum's blog</a> <li><a href="http://wikipedia.org">My fav learning resource</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>

<footer>Created by Mike ©2012</footer>

1.2. spaces and blank lines

I want to build awesome websites.

Code Avengers is fun!

1.3. break tag

I want to build awesome websites. <br> Code Avengers is fun!

1.4. paragraph tag

I want to build awesome websites. <p> Code Avengers is fun!

1.5. doctype tag

<!doctype html> I want to build awesome websites. <p> Code Avengers is fun!

2. {{title}}, {{heading}} & {{strong}} tags

2.1. title element

<!doctype html> <title>Code Avengers Profile</title> My Profile

2.2. heading elements

<!doctype html> <title>Code Avengers Profile</title> <h2>My Profile</h2>

2.3. sup tag

<!doctype html> <title>Code Avengers Profile</title> <h1>My Profile</h1> Name: Super Cutie <br> Birthday: 24<sup>th</sup> December

2.4. strong tag

<!doctype html> <title>Code Avengers Profile</title> <h1>My Profile</h1> <strong>Name</strong>: Super Cutie<br> <strong>Birthday</strong>: 24<sup>th</sup> December<br> <strong>Height</strong>: 0.63m<br>

2.5. link tag

<!doctype html> <title>Code Avengers Profile</title> <link rel="stylesheet" href="/css/profile1.css"> <h1>My Profile</h1> <strong>Name</strong>: Super Cutie<br> <strong>Birthday</strong>: 24<sup>th</sup> December<br> <strong>Height</strong>: 0.63m<br>

3. Fixing common HTML mistakes

12/16/2016

2/35

3.1. fixing bugs

<!doctype html> <link rel="stylesheet" href="/css/profile1.css"> <title>Code Avengers, Common Mistakes</title>

<h1>Common Bugs</h1> Wrong end tags <br> <br> <strong>This text is bold</strong> <br> This text should NOT be bold

3.2. forward slash


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

3.3. spelling


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

3.4. not backslash


<h1>Common Bugs</h1> Wrong end tags <br> Missing slashes <br> Wrong tags <br> Wrong slash

3.5. deleting


<h1>Common Bugs</h1> Wrong end tags <br> Missing slashes <br> Wrong tags <br> Wrong slash <br> Deleted characters

4. [[image]] tag

4.1. img tag

<!doctype html> <title>Code Avengers Profile</title> <link rel="stylesheet" href="/css/profile1.css"> <h1>My Profile</h1> <img src="/images/profile0.png"> <br> <strong>Name</strong>: Super Cutie<br> <strong>Birthday</strong>: 24<sup>th</sup> December<br> <strong>Height</strong>: 0.63m<br> <br>

4.2. image height and width

<!doctype html> <title>Code Avengers Profile</title> <link rel="stylesheet" href="/css/profile1.css"> <h1>My Profile</h1> <strong>Name</strong>: Super Cutie<br> <strong>Birthday</strong>: 24<sup>th</sup> December<br> <strong>Height</strong>: 0.63m<br> <br> <img width="120" src="/images/daughter2.jpg"> <img width="120" src="/images/daughter3.jpg"> <img width="120" src="/images/daughter4.jpg"> <img width="120" src="/images/daughter5.jpg">

4.3. title attribute

<!doctype html> <title>Code Avengers Profile</title> <link rel="stylesheet" href="/css/profile1.css"> <h1>My Profile</h1> <strong>Name</strong>: Super Cutie<br> <strong>Birthday</strong>: 24<sup>th</sup> December<br> <strong>Height</strong>: 0.63m<br> <br> <img width="120" src="/images/daughter2.jpg" title="Kiss for Daddy"> <img width="120" src="/images/daughter3.jpg" title="My Mummy"> <img width="120" src="/images/daughter4.jpg" title="Look at my muscles"> <img width="120" src="/images/daughter5.jpg" title="Mmm... lunch time">

4.4. full URLs

<!doctype html> <title>Code Avengers Profile</title> <link rel="stylesheet" href="/css/profile1.css"> <h1>My Profile</h1> <img title="2 weeks old" width="180" src="/images/profile0.png"> <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> <strong>Name</strong>: Super Cutie<br> <strong>Birthday</strong>: 24<sup>th</sup> December<br> <strong>Height</strong>: 0.63m<br> <br>

12/16/2016

3/35

4.5. alt attribute

<!doctype html> <title>Code Avengers Profile</title> <link rel="stylesheet" href="/css/profile1.css">

<h1>My Profile</h1> <strong>Name</strong>: Super Cutie<br> <strong>Birthday</strong>: 24<sup>th</sup> December<br> <strong>Height</strong>: 0.63m<br> <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" src="http://2.bp.blogspot.com/‐xsmh9dJ0qCM/Ty7glhjxj4I/AAAAAAAAASM/Qz1k_J3fTXQ/s320/IMG_7893.JPG"

<br>My Aunty<br>

5. Linking pages using the [[anchor]] tag

5.1. anchor tag ("making hyperlinks")


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

<h1>My Profile</h1>


<br><a href="http://fionamotherof8.blogspot.com">My Aunty</a><br>

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

5.2. href attribute


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

<h1>My Profile</h1>


<br><a href="http://fionamotherof8.blogspot.com">My Aunty</a><br>


5.3. anchors around images

<!doctype html> <title>Code Avengers Profile</title> <link rel="stylesheet" href="/css/profile1.css"> <a href="/index.html"><img alt="Code Avengers logo" 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> <img alt="Me" title="2 weeks old" width="180" src="/images/profile0.png"> <br> <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><a href="http://fionamotherof8.blogspot.com">My Aunty</a><br> <strong>Name</strong>: Super Cutie<br> <strong>Birthday</strong>: 24<sup>th</sup> December<br> <strong>Height</strong>: 0.63m<br> <br>

5.4. open in a new tab

<!doctype html> <title>Code Avengers Profile</title> <link rel="stylesheet" href="/css/profile1.css"> <a href="/index.html"><img alt="Code Avengers logo" 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> <img alt="Me" title="2 weeks old" width="180" src="/images/profile0.png"> <br> <a href="http://fionamotherof8.blogspot.com" 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> <strong>Name</strong>: Super Cutie<br> <strong>Birthday</strong>: 24<sup>th</sup> December<br> <strong>Height</strong>: 0.63m<br> <br>

12/16/2016

4/35

5.5. tooltips


<a href="/index.html"><img alt="Code Avengers logo" title="Go to Code Avengers home page" 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>

<img alt="Me" title="2 weeks old" width="180" src="/images/profile0.png"> <br> <a href="http://fionamotherof8.blogspot.com" 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>


6. More common mistakes

6.1. fix bugs


<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. fix bugs



<h1>Common Mistakes</h1> Spelling mistakes in tag names<br> Missing end tags<br>

6.3. fix bugs



<h1>Common Mistakes</h1> Spelling mistakes in tag names<br> Missing end tags<br> Spelling mistakes in attribute values<br>

6.4. fix bugs

<!doctype html> <link rel="stylesheet" href="/css/profile1.css"> <title>Code Avengers, Common Mistakes</title> <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> Missing end tags<br> Spelling mistakes in attribute values<br> Incorrect attribute names<br>

6.5. fix bugs

<!doctype html> <link rel="stylesheet" href="/css/profile1.css"> <title>Code Avengers, Common Mistakes</title> <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> Missing end tags<br> Spelling mistakes in attribute values<br> Incorrect attribute names<br> Text in the wrong place

7. Review lessons 1-6

7.1. review basic tags

<!doctype html> <title>Code Avengers, Creator</title> <link rel="stylesheet" href="/css/profile1.css"> <h1>Code Avengers</h1> <h2>About the Creator</h2>

7.2. review basic tags

<!doctype html> <title>Code Avengers, Creator</title> <link rel="stylesheet" href="/css/profile1.css"> <h1>Code Avengers</h1> <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. review images

<!doctype html> <title>Code Avengers, Creator</title> <link rel="stylesheet" href="/css/profile1.css"> <h1>Code Avengers</h1> <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> <br> <img src="/images/wedding.jpg" height="140" title="Married 2010/03/06" alt="Mike and Nellie's wedding">

12/16/2016

5/35

7.4. review anchors

<!doctype html> <title>Code Avengers, Creator</title> <link rel="stylesheet" href="/css/profile1.css">

<h1><a href="/index.html" title="Go to home page">Code Avengers</a></h1> <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><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. likes.html

<!doctype html> <title>Code Avengers, My Likes</title> <link rel="stylesheet" href="/css/profile1.css">

<h1>My Likes</h1> <h2>My family</h2> <a href="http://fionamotherof8.org/2012/02/special‐blessing‐to‐us‐all.html"> <img src="https://codeavengers.com/images/daughter3.jpg" height="140"> </a>

<h2>Sports</h2> <a href="http://fionamotherof8.org/2012/01/lessons‐from‐sport.html"> <img height="140" alt="Me playing AFL" src="https://codeavengers.com/images/afl.jpg"> </a> <a href="http://fionamotherof8.org/2012/02/setting‐pace.html"> <img height="140" alt="Me finishing a marathon" src="https://codeavengers.com/images/marathon.jpg" > </a>

<h2>Singing</h2> <iframe src="http://www.youtube.com/embed/RUTdUtZ3zpA" width="320"></iframe> <br>My sisters, Jenna and Holly

8. Formatted lists and paragraphs

8.1. horizontal rule tag

<!doctype html> <title>Code Avengers Profile</title> <link rel="stylesheet" href="/css/profile1.css"> <a href="/index.html"><img alt="Code Avengers logo" title="Go to Code Avengers home page" 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> <img alt="Me" title="2 weeks old" width="180" src="/images/profile0.png"> <br> <a href="http://fionamotherof8.blogspot.com" 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> <strong>Name</strong>: Super Cutie<br> <strong>Birthday</strong>: 24<sup>th</sup> December<br> <strong>Height</strong>: 0.63m<br> <br> <hr> <h2>My Super Powers</h2> 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. paragraph tag

<!doctype html> <title>Code Avengers Profile</title> <link rel="stylesheet" href="/css/profile1.css"> <a href="/index.html"><img alt="Code Avengers logo" title="Go to Code Avengers home page" 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> <img alt="Me" title="2 weeks old" width="180" src="/images/profile0.png"> <br> <a href="http://fionamotherof8.blogspot.com" 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> <strong>Name</strong>: Super Cutie<br> <strong>Birthday</strong>: 24<sup>th</sup> December<br> <strong>Height</strong>: 0.63m<br> <br> <hr> <h2>My Super Powers</h2> <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.

12/16/2016

6/35

8.3. unordered list



<h1>My Profile</h1>



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

<h2>My Super Powers</h2> <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.

<h2>My Top Websites</h2> <ul> <li><a href="http://fionamotherof8.blogspot.com">Grandma's blog</a> <li><a href="https://youtube.com/user/MotherGooseClub">Favorite YouTube channel</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. ordered list

<!doctype html> <title>Code Avengers Profile</title> <link rel="stylesheet" href="/css/profile1.css"> <a href="/index.html"><img alt="Code Avengers logo" title="Go to Code Avengers home page" 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> <img alt="Me" title="2 weeks old" width="180" src="/images/profile0.png"> <br> <a href="http://fionamotherof8.blogspot.com" 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> <strong>Name</strong>: Super Cutie<br> <strong>Birthday</strong>: 24<sup>th</sup> December<br> <strong>Height</strong>: 0.63m<br> <br> <hr> <h2>My Super Powers</h2> <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. <h2>My Top Websites</h2> <ul> <li><a href="http://fionamotherof8.blogspot.com">Grandma's blog</a> <li><a href="https://youtube.com/user/MotherGooseClub">Favorite YouTube channel</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> <h2>My Top 5 Foods</h2> <ol> <li>Mum's milk <li>Mashed apple and peach <li>Mashed carrots <li>Mashed banana <li>Farrex </ol>

12/16/2016

7/35

8.5. meta tags

<!doctype html> <title>Code Avengers Profile</title> <meta name="viewport" content="width=device‐width"> <meta name="description" content="Code Avengers superhero profile page">

<link rel="stylesheet" href="/css/profile1.css">


<h1>My Profile</h1>






<h2>My Top 5 Foods</h2> <ol> <li>Mum's milk <li>Mashed apple and peach <li>Mashed carrots <li>Mashed banana <li>Farrex </ol>

9. Google style guide for HTML

9.1. style guide

<!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. style guide

<!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>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. style guide

<!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>html, head, body</h2> <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. style guide

<!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>Optional tags</h2> <p>Some elements only have a start tag <p>Some elements have an optional end tag <h3>Start tag only</h3> <ul> <li>img <li>meta <li>link <li>br </ul> <h3>Optional end tag</h3> <ul> <li>p <li>li </ul>

9.5. style guide

<!doctype html> <!‐‐ This is the head section, these are NOT shown on the page ‐‐> <title>Code Avengers, HTML differences</title> <meta name="viewport" content="width=device‐width"> <link rel="stylesheet" href="/css/article.css"> <!‐‐ This is the body section, this IS shown on the page ‐‐> <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. {{header}}, {{footer}} & {{section}} tags

12/16/2016

8/35

10.1. header and footer tags


<link rel="stylesheet" href="/css/profile1.css">

<header> <a href="/index.html"><img alt="Code Avengers logo" title="Go to Code Avengers home page" src="/images/logo.png"></a> <a href="/m/about.html">About us</a> | <a href="http://blog.codeavengers.com">Blog</a> </header>

<h1>My Profile</h1>






<h2>My Top 5 Foods</h2> <ol> <li>Mum's milk <li>Mashed apple and peach <li>Mashed carrots <li>Mashed banana <li>Farrex </ol>


10.2. section tags

<!doctype html> <title>Code Avengers Profile</title> <meta name="viewport" content="width=device‐width"> <meta name="description" content="Code Avengers superhero profile page"> <link rel="stylesheet" href="/css/profile1.css"> <header> <a href="/index.html"><img alt="Code Avengers logo" title="Go to Code Avengers home page" src="/images/logo.png"></a> <a href="/m/about.html">About us</a> | <a href="http://blog.codeavengers.com">Blog</a> </header> <section> <h1>My Profile</h1> <img alt="Me" title="2 weeks old" width="180" src="/images/profile0.png"> <br> <a href="http://fionamotherof8.blogspot.com" 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> <strong>Name</strong>: Super Cutie<br> <strong>Birthday</strong>: 24<sup>th</sup> December<br> <strong>Height</strong>: 0.63m<br> <br> <hr> <h2>My Super Powers</h2> <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. <h2>My Top Websites</h2> <ul> <li><a href="http://fionamotherof8.blogspot.com">Grandma's blog</a> <li><a href="https://youtube.com/user/MotherGooseClub">Favorite YouTube channel</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> <h2>My Top 5 Foods</h2> <ol> <li>Mum's milk <li>Mashed apple and peach <li>Mashed carrots <li>Mashed banana <li>Farrex </ol> </section> <footer>Created by Mike ©2012</footer>

12/16/2016

9/35

10.3. absolute and relative file paths


<link rel="stylesheet" href="https://codeavengers.com/css/profile1.css">

<header> <a href="https://codeavengers.com/index.html"> <img alt="Code Avengers logo" title="Go to Code Avengers home page" src="https://codeavengers.com/images/logo.png"> </a> <a href="/m/about.html">About us</a> | <a href="http://blog.codeavengers.com">Blog</a> </header>

<section> <h1>My Profile</h1> <img alt="Me" title="2 weeks old" width="180" src="/images/profile0.png"> <br> <a href="http://fionamotherof8.blogspot.com" 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> <strong>Name</strong>: Super Cutie<br> <strong>Birthday</strong>: 24<sup>th</sup> December<br> <strong>Height</strong>: 0.63m<br> <br> <hr> <h2>My Super Powers</h2> <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. <h2>My Top Websites</h2> <ul> <li><a href="http://fionamotherof8.blogspot.com">Grandma's blog</a> <li><a href="https://youtube.com/user/MotherGooseClub">Favorite YouTube channel</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> <h2>My Top 5 Foods</h2> <ol> <li>Mum's milk <li>Mashed apple and peach <li>Mashed carrots <li>Mashed banana <li>Farrex </ol> </section>


10.4. file paths

<!doctype html> <title>Code Avengers Profile</title> <meta name="viewport" content="width=device‐width"> <meta name="description" content="Code Avengers superhero profile page"> <link rel="stylesheet" href="https://codeavengers.com/css/profile1.css"> <header> <a href="https://codeavengers.com/index.html"> <img alt="Code Avengers logo" title="Go to Code Avengers home page" src="https://codeavengers.com/images/logo.png"> </a> <a href="/m/about.html">About us</a> | <a href="http://blog.codeavengers.com">Blog</a> </header> <section> <h1>My Profile</h1> <img alt="Me" title="2 weeks old" width="180" src="/images/profile0.png"> <br> <a href="http://fionamotherof8.blogspot.com" 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> <strong>Name</strong>: Super Cutie<br> <strong>Birthday</strong>: 24<sup>th</sup> December<br> <strong>Height</strong>: 0.63m<br> <a href="likes.html">My likes</a> <br> <hr> <h2>My Super Powers</h2> <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. <h2>My Top Websites</h2> <ul> <li><a href="http://fionamotherof8.blogspot.com">Grandma's blog</a> <li><a href="https://youtube.com/user/MotherGooseClub">Favorite YouTube channel</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> <h2>My Top 5 Foods</h2> <ol> <li>Mum's milk <li>Mashed apple and peach <li>Mashed carrots <li>Mashed banana <li>Farrex </ol> </section> <footer>Created by Mike ©2012</footer>

12/16/2016

10/35

10.5. document relative file paths


<link rel="stylesheet" href="../../css/profile1.css">

<header> <a href="../../index.html"> <img alt="Code Avengers logo" title="Go to Code Avengers home page" src="../../images/logo.png"> </a> <a href="/m/about.html">About us</a> | <a href="http://blog.codeavengers.com">Blog</a> </header>

<section> <h1>My Profile</h1> <img alt="Me" title="2 weeks old" width="180" src="/images/profile0.png"> <br> <a href="http://fionamotherof8.blogspot.com" 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> <strong>Name</strong>: Super Cutie<br> <strong>Birthday</strong>: 24<sup>th</sup> December<br> <strong>Height</strong>: 0.63m<br> <a href="likes.html">My likes</a> <br> <hr> <h2>My Super Powers</h2> <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. <h2>My Top Websites</h2> <ul> <li><a href="http://fionamotherof8.blogspot.com">Grandma's blog</a> <li><a href="https://youtube.com/user/MotherGooseClub">Favorite YouTube channel</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> <h2>My Top 5 Foods</h2> <ol> <li>Mum's milk <li>Mashed apple and peach <li>Mashed carrots <li>Mashed banana <li>Farrex </ol> </section>


11. Introduction to [[CSS]]

11.1. html review

<!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. adding CSS

<!doctype html> <html> <head> <title>Code Avengers, CSS</title> <style> html { background‐color: blue; color: yellow; } </style> </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.3. CSS rules

<!doctype html> <html> <head> <title>Code Avengers, CSS</title> <style> h2 { background‐color: darkBlue; color: lightYellow; } </style> </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>

12/16/2016

11/35

11.4. tag rules

<!doctype html> <html> <head> <title>Code Avengers, CSS</title> <style> h2, p { background‐color: indigo; color: yellowGreen; } </style> </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.5. multiple rules

<!doctype html> <html> <head> <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> <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>

12. Common CSS mistakes

12.1. fix bugs

<!doctype html> <html> <head> <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. fix bugs

<!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> <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/16/2016

12/35

12.3. fix bugs

<!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> <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.4. fix bugs

<!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> <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.5. fix bugs

<!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> <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>

13. Using pretty [[font]]s

13.1. start your business page

<!doctype html> <title>Focus Studio</title> <meta name="viewport" content="width=device‐width"> <style> html { background‐color: pink; } h1, h3 { color: purple; } </style> <h1>Focus Studio</h1> <h3>Capturing your special moments</h3>

13.2. generic fonts

<!doctype html> <title>Focus Studio</title> <meta name="viewport" content="width=device‐width"> <style> html { background‐color: pink; } h1, h3 { color: purple; } h1 { font‐family: cursive; } h3 { font‐family: monospace; } </style> <h1>Focus Studio</h1> <h3>Capturing your special moments</h3>

12/16/2016

13/35

13.3. web-safe fonts

<!doctype html> <title>Focus Studio</title> <meta name="viewport" content="width=device‐width"> <style> html { background‐color: pink; }

h1, h3 { color: purple; }

h1 { font‐family: 'Trebuchet MS', sans‐serif; }

h3 { font‐family: Georgia, serif; } </style>

<h1>Focus Studio</h1> <h3>Capturing your special moments</h3>

13.4. font size

<!doctype html> <title>Focus Studio</title> <meta name="viewport" content="width=device‐width"> <style> html { background‐color: pink; }


h1 { font‐family: 'Trebuchet MS', sans‐serif; font‐size: 40px; }

h3 { font‐family: Georgia, serif; font‐size: 14px; } </style>

<h1>Focus Studio</h1> <h3>Capturing your special moments</h3>

13.5. Google web fonts

<!doctype html> <title>Focus Studio</title> <meta name="viewport" content="width=device‐width"> <link href="http://fonts.googleapis.com/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 { font‐family: Georgia, serif; font‐size: 14px; } </style> <h1>Focus Studio</h1> <h3>Capturing your special moments</h3>

14. Add style to [[anchor]] tags

14.1. facebook link

<!doctype html> <title>Focus Studio</title> <meta name="viewport" content="width=device‐width"> <link href="http://fonts.googleapis.com/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 { font‐family: Georgia, serif; font‐size: 14px; } </style> <h1>Focus Studio</h1> <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

12/16/2016

14/35

14.2. web-safe fonts

<!doctype html> <title>Focus Studio</title> <meta name="viewport" content="width=device‐width"> <link href="http://fonts.googleapis.com/css?family=Oregano" rel="stylesheet" type="text/css">

<style> html { background‐color: pink; font‐family: 'Trebuchet MS', sans‐serif; }


h1 { font‐family: 'Oregano', cursive; font‐size: 40px; }

h3 { font‐family: Georgia, serif; font‐size: 14px; }

a { color: slateBlue; } </style>

<h1>Focus Studio</h1> <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

14.3. text‐decoration CSS property

<!doctype html> <title>Focus Studio</title> <meta name="viewport" content="width=device‐width"> <link href="http://fonts.googleapis.com/css?family=Oregano" rel="stylesheet" type="text/css"> <style> html { background‐color: pink; font‐family: 'Trebuchet MS', sans‐serif; } h1, h3 { color: purple; } h1 { font‐family: 'Oregano', cursive; font‐size: 40px; text‐decoration: underline; } h3 { font‐family: Georgia, serif; font‐size: 14px; } a { color: slateBlue; text‐decoration: none; } </style> <h1>Focus Studio</h1> <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

12/16/2016

15/35

14.4. :hover selectors




h1 { font‐family: 'Oregano', cursive; font‐size: 40px; text‐decoration: underline; }


a { color: slateBlue; text‐decoration: none; }

a:hover { color: darkSlateBlue; text‐decoration: underline; }

h1:hover { font‐size: 50px; } </style>


14.5. :visited selector

<!doctype html> <title>Focus Studio</title> <meta name="viewport" content="width=device‐width"> <link href="http://fonts.googleapis.com/css?family=Oregano" rel="stylesheet" type="text/css"> <style> html { background‐color: pink; font‐family: 'Trebuchet MS', sans‐serif; } h1, h3 { color: purple; } h1 { font‐family: 'Oregano', cursive; font‐size: 40px; text‐decoration: underline; } 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> <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

15. CSS Google style guide

12/16/2016

16/35

15.1. Google style guide

<!doctype html> <title>Code Avengers, Style Guide</title> <style> html { background‐color: lightYellow; }

li { font‐family: 'Trebuchet MS', sans‐serif; }

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> <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>A blank line separates each CSS rule </ol>

15.2. single and double quotes

<!doctype html> <title>Code Avengers, Style Guide</title> <style> html { background‐color: lightCyan; font‐family: 'Times New Roman', serif; font‐size: 18px; }

h1, h2 { color: teal; font‐family: 'Andale Mono', sans‐serif; } </style>


<h2>CSS Formatting Guide</h2> <ol> <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. properties in alphabetic order

<!doctype html> <title>Code Avengers, Style Guide</title> <style> 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> <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> <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 <li>Put properties in alphabetical order </ol>

15.4. unbold headings

<!doctype html> <title>Code Avengers, Style Guide</title> <style> 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> <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> <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 <li>Put properties in alphabetical order </ol>

12/16/2016

17/35

15.5. shorthand properties

<!doctype html> <title>Code Avengers, Style Guide</title> <style> 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 Formatting Guide</h2> <ol> <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 <li>Put properties in alphabetical order </ol> <h2>CSS Style Guide</h2> <p>Use shorthand properties where possible

16. Image borders

16.1. add images

<!doctype html> <title>Focus Studio</title> <meta name="viewport" content="width=device‐width"> <link href="http://fonts.googleapis.com/css?family=Oregano" rel="stylesheet" type="text/css"> <style> html { background‐color: pink; font‐family: 'Trebuchet MS', sans‐serif; } h1, h3 { color: purple; } h1 { font‐family: 'Oregano', cursive; font‐size: 40px; text‐decoration: underline; } 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> <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 <br><br> <img src="/images/daughter7.jpg" alt="My daughter" width="115"> <img src="/images/daughter8.jpg" alt="My daughter 2" width="115">

12/16/2016

18/35

16.2. image width and height








a:visited { color: darkRed; }

img { height: 170px; } </style>


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

16.3. image border

<!doctype html> <title>Focus Studio</title> <meta name="viewport" content="width=device‐width"> <link href="http://fonts.googleapis.com/css?family=Oregano" rel="stylesheet" type="text/css"> <style> html { background‐color: pink; font‐family: 'Trebuchet MS', sans‐serif; } h1, h3 { color: purple; } h1 { font‐family: 'Oregano', cursive; font‐size: 40px; text‐decoration: underline; } 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> <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 <br><br> <img src="/images/daughter7.jpg" alt="My daughter"> <img src="/images/daughter8.jpg" alt="My daughter 2">

12/16/2016

19/35

16.4. image border‐color









img { border‐color: gold; border‐width: 20px; height: 170px; } </style>



16.5. image border‐style

<!doctype html> <title>Focus Studio</title> <meta name="viewport" content="width=device‐width"> <link href="http://fonts.googleapis.com/css?family=Oregano" rel="stylesheet" type="text/css"> <style> html { background‐color: pink; 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> <h1>Focus Studio</h1> <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 <br><br> <img src="/images/daughter7.jpg" alt="My daughter"> <img src="/images/daughter8.jpg" alt="My daughter 2">

17. Spacing with [[margin]]s

12/16/2016

20/35

17.1. margin property


<style> html { background‐color: pink; font: normal 15px 'Trebuchet MS', sans‐serif; }


h1 { font: bold 40px Oregano, sans‐serif; margin‐bottom: 0; margin‐top: 2px; text‐decoration: underline; }

h3 { font: bold 14px Georgia, serif; margin‐top: 0; }




img { border: 4px inset mediumSlateBlue; width: 115px; } </style>



17.2. image margins

<!doctype html> <title>Focus Studio</title> <meta name="viewport" content="width=device‐width"> <link href="http://fonts.googleapis.com/css?family=Oregano" rel="stylesheet" type="text/css"> <style> html { background‐color: pink; font: normal 15px 'Trebuchet MS', sans‐serif; } h1, h3 { color: purple; } h1 { font: bold 40px Oregano, sans‐serif; margin‐bottom: 0; margin‐top: 2px; text‐decoration: underline; } h3 { font: bold 14px Georgia, serif; margin‐top: 0; } a { color: slateBlue; text‐decoration: none; } a:hover { color: darkSlateBlue; text‐decoration: underline; } a:visited { color: darkRed; } img { border: 4px inset mediumSlateBlue; margin‐right: 20px; margin‐top: 15px; width: 115px; } </style> <h1>Focus Studio</h1> <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 <br><br> <img src="/images/daughter7.jpg" alt="My daughter"> <img src="/images/daughter8.jpg" alt="My daughter 2">

12/16/2016

21/35

17.3. business information


<style> html { background‐color: pink; font: normal 15px 'Trebuchet MS', sans‐serif; }


h1 { font: bold 40px Oregano, sans‐serif; margin‐bottom: 0; margin‐top: 2px; text‐decoration: underline; }

h3 { font: bold 14px Georgia, serif; margin‐top: 0; }




img { border: 4px inset mediumSlateBlue; margin‐right: 20px; margin‐top: 15px; width: 115px; }

p { margin‐top: 14px; margin‐bottom: 10px; } </style>


<br><br> <img src="/images/daughter7.jpg" alt="My daughter"> <img src="/images/daughter8.jpg" alt="My daughter 2"> <p>Come and enjoy the comfortable surroundings of our home studio away from the city 'rush' and know that there is a parking space with your name on it. <p>When you arrive, you will find our waiting room to be very comfortable. There are a selection of activities to keep children entertained while they wait to be photographed and a small changing room with a large mirror for any necessary 'touch ups.' <p>Next door in our camera room is where we will work our magic and give you the individualized attention that is required to give you portraits that are both creative and truly unique.

17.4. margin shorthand property

<!doctype html> <title>Focus Studio</title> <meta name="viewport" content="width=device‐width"> <link href="http://fonts.googleapis.com/css?family=Oregano" rel="stylesheet" type="text/css"> <style> html { background‐color: pink; font: normal 15px 'Trebuchet MS', sans‐serif; } h1, h3 { color: purple; } h1 { font: bold 40px Oregano, sans‐serif; margin: 0; text‐decoration: underline; } h3 { font: bold 14px Georgia, serif; margin: 0 0 8px 0; } a { color: slateBlue; text‐decoration: none; } a:hover { color: darkSlateBlue; text‐decoration: underline; } a:visited { color: darkRed; } img { border: 4px inset mediumSlateBlue; margin: 10px; width: 115px; } p { margin: 14px 0 10px 0; } </style> <h1>Focus Studio</h1> <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 <br><br> <img src="/images/daughter7.jpg" alt="My daughter"> <img src="/images/daughter8.jpg" alt="My daughter 2"> <p>Come and enjoy the comfortable surroundings of our home studio away from the city 'rush' and know that there is a parking space with your name on it. <p>When you arrive, you will find our waiting room to be very comfortable. There are a selection of activities to keep children entertained while they wait to be photographed and a small changing room with a large mirror for any necessary 'touch ups.' <p>Next door in our camera room is where we will work our magic and give you the individualized attention that is required to give you portraits that are both creative and truly unique.

12/16/2016

22/35

17.5. centering with auto margin


<style> html { background‐color: pink; font: normal 15px 'Trebuchet MS', sans‐serif; margin: 0 auto 0 auto; width: 320px; }


h1 { font: bold 40px Oregano, sans‐serif; margin: 0; text‐decoration: underline; }

h3 { font: bold 14px Georgia, serif; margin: 0 0 8px 0; }




img { border: 4px inset mediumSlateBlue; margin: 10px; width: 115px; }

p { margin: 14px 0 10px 0; } </style>



18. Shadow effects

18.1. box‐shadow property

<!doctype html> <title>Focus Studio</title> <meta name="viewport" content="width=device‐width"> <link href="http://fonts.googleapis.com/css?family=Oregano" rel="stylesheet" type="text/css"> <style> html { background‐color: pink; font: normal 15px 'Trebuchet MS', sans‐serif; margin: 0 auto 0 auto; width: 320px; } h1, h3 { color: purple; } h1 { font: bold 40px Oregano, sans‐serif; margin: 0; text‐decoration: underline; } h3 { font: bold 14px Georgia, serif; margin: 0 0 8px 0; } a { color: slateBlue; text‐decoration: none; } a:hover { color: darkSlateBlue; text‐decoration: underline; } a:visited { color: darkRed; } img { border: 4px inset mediumSlateBlue; box‐shadow: 4px 4px; margin: 10px; width: 115px; } p { margin: 14px 0 10px 0; } </style> <h1>Focus Studio</h1> <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 <br><br> <img src="/images/daughter7.jpg" alt="My daughter"> <img src="/images/daughter8.jpg" alt="My daughter 2"> <p>Come and enjoy the comfortable surroundings of our home studio away from the city 'rush' and know that there is a parking space with your name on it. <p>When you arrive, you will find our waiting room to be very comfortable. There are a selection of activities to keep children entertained while they wait to be photographed and a small changing room with a large mirror for any necessary 'touch ups.' <p>Next door in our camera room is where we will work our magic and give you the individualized attention that is required to give you portraits that are both creative and truly unique.

12/16/2016

23/35

18.2. box‐shadow color




h1 { font: bold 40px Oregano, sans‐serif; margin: 0; text‐decoration: underline; }





img { border: 4px inset mediumSlateBlue; box‐shadow: 4px 4px violet; margin: 10px; width: 115px; }




18.3. box‐shadow blur and spread

<!doctype html> <title>Focus Studio</title> <meta name="viewport" content="width=device‐width"> <link href="http://fonts.googleapis.com/css?family=Oregano" rel="stylesheet" type="text/css"> <style> html { background‐color: pink; font: normal 15px 'Trebuchet MS', sans‐serif; margin: 0 auto 0 auto; width: 320px; } h1, h3 { color: purple; } h1 { font: bold 40px Oregano, sans‐serif; margin: 0; text‐decoration: underline; } h3 { font: bold 14px Georgia, serif; margin: 0 0 8px 0; } a { color: slateBlue; text‐decoration: none; } a:hover { color: darkSlateBlue; text‐decoration: underline; } a:visited { color: darkRed; } img { border: 4px inset mediumSlateBlue; box‐shadow: 1px 1px 8px 4px violet; margin: 10px; width: 115px; } p { margin: 14px 0 10px 0; } </style> <h1>Focus Studio</h1> <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 <br><br> <img src="/images/daughter7.jpg" alt="My daughter"> <img src="/images/daughter8.jpg" alt="My daughter 2"> <p>Come and enjoy the comfortable surroundings of our home studio away from the city 'rush' and know that there is a parking space with your name on it. <p>When you arrive, you will find our waiting room to be very comfortable. There are a selection of activities to keep children entertained while they wait to be photographed and a small changing room with a large mirror for any necessary 'touch ups.' <p>Next door in our camera room is where we will work our magic and give you the individualized attention that is required to give you portraits that are both creative and truly unique.

12/16/2016

24/35

18.4. text‐shadow




h1 { font: bold 40px Oregano, sans‐serif; margin: 0; text‐decoration: underline; text‐shadow: 2px 2px 3px slateBlue; }





img { border: 4px inset mediumSlateBlue; box‐shadow: 1px 1px 8px 4px violet; margin: 10px; width: 115px; }




18.5. multiple shadows

<!doctype html> <title>Focus Studio</title> <meta name="viewport" content="width=device‐width"> <link href="http://fonts.googleapis.com/css?family=Oregano" rel="stylesheet" type="text/css"> <style> html { background‐color: pink; font: normal 15px 'Trebuchet MS', sans‐serif; margin: 0 auto 0 auto; width: 320px; } h1, h3 { color: purple; } h1 { font: bold 40px Oregano, sans‐serif; margin: 0; text‐decoration: underline; text‐shadow: 1px 1px 0 darkSlateBlue, 2px 2px 3px slateBlue; } h3 { font: bold 14px Georgia, serif; margin: 0 0 8px 0; } a { color: slateBlue; text‐decoration: none; } a:hover { color: darkSlateBlue; text‐decoration: underline; } a:visited { color: darkRed; } img { border: 4px inset mediumSlateBlue; box‐shadow: 1px 1px 8px 4px violet; margin: 10px; width: 115px; } p { margin: 14px 0 10px 0; } </style> <h1>Focus Studio</h1> <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 <br><br> <img src="/images/daughter7.jpg" alt="My daughter"> <img src="/images/daughter8.jpg" alt="My daughter 2"> <p>Come and enjoy the comfortable surroundings of our home studio away from the city 'rush' and know that there is a parking space with your name on it. <p>When you arrive, you will find our waiting room to be very comfortable. There are a selection of activities to keep children entertained while they wait to be photographed and a small changing room with a large mirror for any necessary 'touch ups.' <p>Next door in our camera room is where we will work our magic and give you the individualized attention that is required to give you portraits that are both creative and truly unique.

12/16/2016

25/35

19. Background images19.1. background‐image property

<!doctype html> <title>Focus Studio</title> <meta name="viewport" content="width=device‐width"> <link href="http://fonts.googleapis.com/css?family=Oregano" rel="stylesheet" type="text/css"> <style> html { background‐color: pink; background‐image: url(/images/textures/light2.png); font: normal 15px 'Trebuchet MS', sans‐serif; margin: 0 auto 0 auto; width: 320px; } h1, h3 { color: purple; } h1 { font: bold 40px Oregano, sans‐serif; margin: 0; text‐decoration: underline; text‐shadow: 1px 1px 0 darkSlateBlue, 2px 2px 3px slateBlue; } h3 { font: bold 14px Georgia, serif; margin: 0 0 8px 0; } a { color: slateBlue; text‐decoration: none; } a:hover { color: darkSlateBlue; text‐decoration: underline; } a:visited { color: darkRed; } img { border: 4px inset mediumSlateBlue; box‐shadow: 1px 1px 8px 4px violet; margin: 10px; width: 115px; } p { margin: 14px 0 10px 0; } </style> <h1>Focus Studio</h1> <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 <br><br> <img src="/images/daughter7.jpg" alt="My daughter"> <img src="/images/daughter8.jpg" alt="My daughter 2"> <p>Come and enjoy the comfortable surroundings of our home studio away from the city 'rush' and know that there is a parking space with your name on it. <p>When you arrive, you will find our waiting room to be very comfortable. There are a selection of activities to keep children entertained while they wait to be photographed and a small changing room with a large mirror for any necessary 'touch ups.' <p>Next door in our camera room is where we will work our magic and give you the individualized attention that is

12/16/2016

26/35

required to give you portraits that are both creative and truly unique.

19.2. transparent background image

<!doctype html> <title>Focus Studio</title> <meta name="viewport" content="width=device‐width"> <link href="http://fonts.googleapis.com/css?family=Oregano" rel="stylesheet" type="text/css"> <style> html { background‐color: pink; background‐image: url(/images/textures/light2a.png); font: normal 15px 'Trebuchet MS', sans‐serif; margin: 0 auto 0 auto; width: 320px; } h1, h3 { color: purple; } h1 { font: bold 40px Oregano, sans‐serif; margin: 0; text‐decoration: underline; text‐shadow: 1px 1px 0 darkSlateBlue, 2px 2px 3px slateBlue; } h3 { font: bold 14px Georgia, serif; margin: 0 0 8px 0; } a { color: slateBlue; text‐decoration: none; } a:hover { color: darkSlateBlue; text‐decoration: underline; } a:visited { color: darkRed; } img { border: 4px inset mediumSlateBlue; box‐shadow: 1px 1px 8px 4px violet; margin: 10px; width: 115px; } p { margin: 14px 0 10px 0; } </style> <h1>Focus Studio</h1> <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 <br><br> <img src="/images/daughter7.jpg" alt="My daughter"> <img src="/images/daughter8.jpg" alt="My daughter 2"> <p>Come and enjoy the comfortable surroundings of our home studio away from the city 'rush' and know that there is a parking space with your name on it. <p>When you arrive, you will find our waiting room to be very comfortable. There are a selection of activities to keep children entertained while they wait to be photographed and a small changing room with a large mirror for any necessary 'touch ups.' <p>Next door in our camera room is where we will work our magic and give you the individualized attention that is

12/16/2016

27/35

required to give you portraits that are both creative and truly unique.

19.3. background shorthand property

<!doctype html> <title>Focus Studio</title> <meta name="viewport" content="width=device‐width"> <link href="http://fonts.googleapis.com/css?family=Oregano" rel="stylesheet" type="text/css"> <style> html { background: hotPink url(/images/textures/light2a.png); font: normal 15px 'Trebuchet MS', sans‐serif; margin: 0 auto 0 auto; width: 320px; } h1, h3 { color: purple; } h1 { font: bold 40px Oregano, sans‐serif; margin: 0; text‐decoration: underline; text‐shadow: 1px 1px 0 darkSlateBlue, 2px 2px 3px slateBlue; } h3 { font: bold 14px Georgia, serif; margin: 0 0 8px 0; } a { color: slateBlue; text‐decoration: none; } a:hover { color: darkSlateBlue; text‐decoration: underline; } a:visited { color: darkRed; } img { border: 4px inset mediumSlateBlue; box‐shadow: 1px 1px 8px 4px violet; margin: 10px; width: 115px; } p { margin: 14px 0 10px 0; } </style> <h1>Focus Studio</h1> <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 <br><br> <img src="/images/daughter7.jpg" alt="My daughter"> <img src="/images/daughter8.jpg" alt="My daughter 2"> <p>Come and enjoy the comfortable surroundings of our home studio away from the city 'rush' and know that there is a parking space with your name on it. <p>When you arrive, you will find our waiting room to be very comfortable. There are a selection of activities to keep children entertained while they wait to be photographed and a small changing room with a large mirror for any necessary 'touch ups.' <p>Next door in our camera room is where we will work our magic and give you the individualized attention that is required to give you portraits that are both creative and truly unique.

12/16/2016

28/35

19.4. list‐style‐type property


<style> html { background: hotPink url(/images/textures/light2a.png); font: normal 15px 'Trebuchet MS', sans‐serif; margin: 0 auto 0 auto; width: 320px; }


h1 { font: bold 40px Oregano, sans‐serif; margin: 0; text‐decoration: underline; text‐shadow: 1px 1px 0 darkSlateBlue, 2px 2px 3px slateBlue; }






p { margin: 14px 0 10px 0; }

ul { list‐style‐type: circle; } </style>


<br><br> <img src="/images/daughter7.jpg" alt="My daughter"> <img src="/images/daughter8.jpg" alt="My daughter 2"> <p>Come and enjoy the comfortable surroundings of our home studio away from the city 'rush' and know that there is a parking space with your name on it. <p>When you arrive, you will find our waiting room to be very comfortable. There are a selection of activities to keep children entertained while they wait to be photographed and a small changing room with a large mirror for any necessary 'touch ups.'

<p>Next door in our camera room is where we will work our magic and give you the individualized attention that is required to give you portraits that are both creative and truly unique. <p>We specialize in the following: <ul> <li>Pregnancy photos <li>New born photos <li>Baby photos <li>Toddler photos <li>Family photos <li>Couple photos <li>Special events </ul>

12/16/2016

29/35

19.5. list‐style‐image property










p { margin: 14px 0 10px 0; }

ul { list‐style‐image: url(/images/silverStar.png); } </style>


<br><br> <img src="/images/daughter7.jpg" alt="My daughter"> <img src="/images/daughter8.jpg" alt="My daughter 2"> <p>Come and enjoy the comfortable surroundings of our home studio away from the city 'rush' and know that there is a parking space with your name on it. <p>When you arrive, you will find our waiting room to be very comfortable. There are a selection of activities to keep children entertained while they wait to be photographed and a small changing room with a large mirror for any necessary 'touch ups.'

<p>Next door in our camera room is where we will work our magic and give you the individualized attention that is required to give you portraits that are both creative and truly unique. <p>We specialize in the following: <ul> <li>Pregnancy photos <li>New born photos <li>Baby photos <li>Toddler photos <li>Family photos <li>Couple photos <li>Special events </ul>

20. Style {{header}}, {{footer}} & {{section}}

12/16/2016

30/35

20.1. header, footer, section










p { margin: 14px 0 10px 0; }


<header> <h1>Focus Studio</h1> <h3>Capturing your special moments</h3> </header>

<section> <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

<br><br> <img src="/images/daughter7.jpg" alt="My daughter"> <img src="/images/daughter8.jpg" alt="My daughter 2"> <p>Come and enjoy the comfortable surroundings of our home studio away from the city 'rush' and know that there is a parking space with your name on it. <p>When you arrive, you will find our waiting room to be

very comfortable. There are a selection of activities to keep children entertained while they wait to be photographed and a small changing room with a large mirror for any necessary 'touch ups.' <p>Next door in our camera room is where we will work our magic and give you the individualized attention that is required to give you portraits that are both creative and truly unique. <p>We specialize in the following: <ul> <li>Pregnancy photos <li>New born photos <li>Baby photos <li>Toddler photos <li>Family photos <li>Couple photos <li>Special events </ul> </section> <footer> Created by <a href="profile.html">Mike</a>, ©2012 </footer>

12/16/2016

31/35

20.2. CSS for header and footer



header, footer { background: pink; border: 2px solid deepPink; }








p { margin: 14px 0 10px 0; }




<br><br>

<img src="/images/daughter7.jpg" alt="My daughter"> <img src="/images/daughter8.jpg" alt="My daughter 2"> <p>Come and enjoy the comfortable surroundings of our home studio away from the city 'rush' and know that there is a parking space with your name on it. <p>When you arrive, you will find our waiting room to be very comfortable. There are a selection of activities to keep children entertained while they wait to be photographed and a small changing room with a large mirror for any necessary 'touch ups.' <p>Next door in our camera room is where we will work our magic and give you the individualized attention that is required to give you portraits that are both creative and truly unique. <p>We specialize in the following: <ul> <li>Pregnancy photos <li>New born photos <li>Baby photos <li>Toddler photos <li>Family photos <li>Couple photos <li>Special events </ul> </section> <footer> Created by <a href="profile.html">Mike</a>, ©2012 </footer>

12/16/2016

32/35

20.3. text‐align for header and footer



header, footer { background: pink; border: 2px solid deepPink; text‐align: center; }








p { margin: 14px 0 10px 0; text‐align: justify; }




<br><br> <img src="/images/daughter7.jpg" alt="My daughter"> <img src="/images/daughter8.jpg" alt="My daughter 2"> <p>Come and enjoy the comfortable surroundings of our home studio away from the city 'rush' and know that there is a parking space with your name on it. <p>When you arrive, you will find our waiting room to be very comfortable. There are a selection of activities to keep children entertained while they wait to be photographed and a small changing room with a large mirror for any necessary 'touch ups.' <p>Next door in our camera room is where we will work our magic and give you the individualized attention that is required to give you portraits that are both creative and truly unique. <p>We specialize in the following: <ul> <li>Pregnancy photos <li>New born photos <li>Baby photos <li>Toddler photos <li>Family photos <li>Couple photos <li>Special events </ul> </section> <footer> Created by <a href="profile.html">Mike</a>, ©2012 </footer>

12/16/2016

33/35

20.4. header and footer margins



body { margin: 0; }

header, footer { background: pink; border: 2px solid deepPink; margin: 0 ‐10px; text‐align: center; }











<section> <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 <br><br> <img src="/images/daughter7.jpg" alt="My daughter"> <img src="/images/daughter8.jpg" alt="My daughter 2"> <p>Come and enjoy the comfortable surroundings of our home studio away from the city 'rush' and know that there is a parking space with your name on it. <p>When you arrive, you will find our waiting room to be very comfortable. There are a selection of activities to keep children entertained while they wait to be photographed and a small changing room with a large mirror for any necessary 'touch ups.' <p>Next door in our camera room is where we will work our magic and give you the individualized attention that is required to give you portraits that are both creative and truly unique. <p>We specialize in the following: <ul> <li>Pregnancy photos <li>New born photos <li>Baby photos <li>Toddler photos <li>Family photos <li>Couple photos <li>Special events </ul> </section> <footer> Created by <a href="profile.html">Mike</a>, ©2012 </footer>

12/16/2016

34/35

20.5. social buttons



body { margin: 0; }

header, footer { background: pink; border: 2px solid deepPink; margin: 0 ‐10px; text‐align: center; }











<section> <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 <br><br> <img src="/images/daughter7.jpg" alt="My daughter"> <img src="/images/daughter8.jpg" alt="My daughter 2"> <p>Come and enjoy the comfortable surroundings of our home studio away from the city 'rush' and know that there is a parking space with your name on it. <p>When you arrive, you will find our waiting room to be very comfortable. There are a selection of activities to keep children entertained while they wait to be photographed and a small changing room with a large mirror for any necessary 'touch ups.' <p>Next door in our camera room is where we will work our magic and give you the individualized attention that is required to give you portraits that are both creative and truly unique. <p>We specialize in the following: <ul> <li>Pregnancy photos <li>New born photos <li>Baby photos <li>Toddler photos <li>Family photos <li>Couple photos <li>Special events </ul> </section> <footer> Created by <a href="profile.html">Mike</a>, ©2012 <br> <a href="https://twitter.com/share" class="twitter‐share‐button" data‐via="CodeAvengers" data‐url="https://codeavengers.com/c/codename/business.html">Tweet</a> <script src="/js/twitter.js"></script> <div class="fb‐like" data‐href="https://codeavengers.com/c/codename/buisness.html" data‐send="false" data‐layout="button_count" data‐width="450" data‐show‐faces="false"></div> </footer> <div id="fb‐root"></div> <script src="/js/facebook.js"></script>

12/16/2016

35/35

HTML/CSS 1 Answers 1. [[paragraph]] and [[break]] tags 2 ... · HTML/CSS 1 Answers 1. [[paragraph]]...

Documents

Transcript of HTML/CSS 1 Answers 1. [[paragraph]] and [[break]] tags 2 ... · HTML/CSS 1 Answers 1. [[paragraph]]...