WebDev Level 1 Example Answers
|
|
|
- Barnaby Holt
- 10 years ago
- Views:
Transcription
1 1 of 26 14/11/2014 9:54 a.m. WebDev Level 1 Example Answers 1.1. <meta name="description" content="code Avengers superhero profile page"> <header> <a href=" src="/images /logo.png"> <a href="/m/about.html">about us <a href=" </header> <section> <img src="/images/profile1.png" width="180" alt="profile"> <a href=" target="_blank" title="my Car"> <img src="/images/car.jpg" width="100"> <strong>name</strong>: Supacoda <strong>birthday</strong>: 14<sup>th</sup> April <strong>height</strong>: 1.79m <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> <li><a href=" HTML5 game <li><a href=" language learning site <li><a href=" cricket scoring software <li><a href=" blog <li><a href=" photography <h2>my Top 5 Foods</h2> <li>banana and feijoa smoothy <li>chicken nacho salad <li>vegetarian lasagna <li>fresh fruit and yogurt with LSA <li>weetbix with muesli </section> <footer>created by Mike 2012</footer> 1.2. Make your superhero profile in lesson Make a business profile in lessons Make your superhero profile in lesson Make a business profile in lessons Make your superhero profile in lesson <p> Make a business profile in lessons Make your superhero profile in lesson <p> Make a business profile in lessons My Profile 2.2. <h2>my Profile</h2> 2.3. Name: Super Cutey Birthday: 24<sup>th</sup> December 2.4. <strong>name</strong>: Super Cutey <strong>birthday</strong>: 24<sup>th</sup> December <strong>height</strong>: 0.63m 2.5. <strong>name</strong>: Super Cutey <strong>birthday</strong>: 24<sup>th</sup> December <strong>height</strong>: 0.63m 3.1. <title>code Avengers, Common Mistakes</title> <h1>common Bugs</h1> Wrong end tags <strong>this text is bold</strong> This text should NOT be bold 3.2. <title>code Avengers, Common Mistakes</title>
2 2 of 26 14/11/2014 9:54 a.m. <h1>common Bugs</h1> Wrong end tags Missing slashes 3.3. <title>code Avengers, Common Mistakes</title> <h1>common Bugs</h1> Wrong end tags Missing slashes Wrong tags 3.4. <title>code Avengers, Common Mistakes</title> <h1>common Bugs</h1> Wrong end tags Missing slashes Wrong tags Wrong slash 3.5. <title>code Avengers, Common Mistakes</title> <h1>common Bugs</h1> Wrong end tags Missing slashes Wrong tags Wrong slash Deleted characters 4.1. <img <strong>name</strong>: Super Cutey <strong>birthday</strong>: 24<sup>th</sup> December <strong>height</strong>: 0.63m 4.2. <strong>name</strong>: Super Cutey <strong>birthday</strong>: 24<sup>th</sup> December <strong>height</strong>: 0.63m <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. <strong>name</strong>: Super Cutey <strong>birthday</strong>: 24<sup>th</sup> December <strong>height</strong>: 0.63m <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. <img title="2 weeks old" width="180" src="/images /profile0.png"> <img title="i love Aunty" height="100" src=" /AAAAAAAAASM/Qz1k_J3fTXQ/s320/IMG_7893.JPG"> My Aunty <strong>name</strong>: Super Cutey <strong>birthday</strong>: 24<sup>th</sup> December <strong>height</strong>: 0.63m 4.5. <strong>name</strong>: Super Cutey <strong>birthday</strong>: 24<sup>th</sup> December <strong>height</strong>: 0.63m <img alt="me" title="2 weeks old" width="100" <img alt="my Aunty" title="i love Aunty" height="100" src=" /AAAAAAAAASM/Qz1k_J3fTXQ/s320/IMG_7893.JPG"> My Aunty 5.1. <a href=" <img alt="my Aunty" title="i love Aunty" height="100" src=" /AAAAAAAAASM/Qz1k_J3fTXQ/s320/IMG_7893.JPG"> <a href=" Aunty <strong>name</strong>: Super Cutey <strong>birthday</strong>: 24<sup>th</sup> December <strong>height</strong>: 0.63m
3 3 of 26 14/11/2014 9:54 a.m <a href="/m/about.html">about us <a href=" <img alt="my Aunty" title="i love Aunty" height="100" src=" /AAAAAAAAASM/Qz1k_J3fTXQ/s320/IMG_7893.JPG"> <a href=" Aunty <strong>name</strong>: Super Cutey <strong>birthday</strong>: 24<sup>th</sup> December <strong>height</strong>: 0.63m 5.3. <a href="/index.html"><img alt="code Avengers logo" src="/images/logo.png"> <a href="/m/about.html">about us <a href=" <img alt="my Aunty" title="i love Aunty" height="100" src=" /AAAAAAAAASM/Qz1k_J3fTXQ/s320/IMG_7893.JPG"> <a href=" Aunty <strong>name</strong>: Super Cutey <strong>birthday</strong>: 24<sup>th</sup> December <strong>height</strong>: 0.63m 5.4. <a href="/index.html"><img alt="code Avengers logo" src="/images/logo.png"> <a href="/m/about.html">about us <a href=" <a href=" target="_blank"> <img alt="my Aunty" title="i love Aunty" height="100" src=" /Ty7glhjxj4I/AAAAAAAAASM/Qz1k_J3fTXQ /s320/img_7893.jpg"> My Aunty <strong>name</strong>: Super Cutey <strong>birthday</strong>: 24<sup>th</sup> December <strong>height</strong>: 0.63m 5.5. <a href="/index.html"><img alt="code Avengers logo" title="go to Code Avengers home page" src="/images /logo.png"> <a href="/m/about.html">about us <a href=" <a href=" target="_blank"> <img alt="my Aunty" title="i love Aunty" height="100" src=" /Ty7glhjxj4I/AAAAAAAAASM/Qz1k_J3fTXQ /s320/img_7893.jpg"> My Aunty <strong>name</strong>: Super Cutey <strong>birthday</strong>: 24<sup>th</sup> December <strong>height</strong>: 0.63m 6.1. <title>code Avengers, Common Mistakes</title> <a href="/index.html"><img src="/images/logo.png"> <a href="/m/about.html">about us <a href=" <h1>common Mistakes</h1> Spelling mistakes in tag names 6.2. <title>code Avengers, Common Mistakes</title> <a href="/index.html"><img src="/images/logo.png"> <a href="/m/about.html">about us <a href=" <h1>common Mistakes</h1> Spelling mistakes in tag names Missing end tags 6.3. <title>code Avengers, Common Mistakes</title> <a href="/index.html"><img src="/images/logo.png"> <a href="/m/about.html">about us <a href=" <h1>common Mistakes</h1> Spelling mistakes in tag names Missing end tags Spelling mistakes in attribute values 6.4. <title>code Avengers, Common Mistakes</title> <a href="/index.html"><img src="/images/logo.png"> <a href="/m/about.html">about us <a href=" <h1>common Mistakes</h1> Spelling mistakes in tag names Missing end tags Spelling mistakes in attribute values Incorrect attribute names
4 4 of 26 14/11/2014 9:54 a.m <title>code Avengers, Common Mistakes</title> <a href="/index.html"><img src="/images/logo.png"> <a href="/m/about.html">about us <a href=" <h1>common Mistakes</h1> Spelling mistakes in tag names Missing end tags Spelling mistakes in attribute values Incorrect attribute names Text in the wrong place 7.1. <title>code Avengers, Creator</title> <h1>code Avengers</h1> <h2>about the Creator</h2> 7.2. <title>code Avengers, Creator</title> <h1>code Avengers</h1> <h2>about the Creator</h2> <strong>name</strong>: Mike Walmsley <strong>birthday</strong>: 14<sup>th</sup> April <strong>job</strong>: PhD student 7.3. <title>code Avengers, Creator</title> <h1>code Avengers</h1> <h2>about the Creator</h2> <strong>name</strong>: Mike Walmsley <strong>birthday</strong>: 14<sup>th</sup> April <strong>job</strong>: PhD student <img src="/images/wedding.jpg" height="140" title="married 2010/03/06" alt="mike and Nellie's wedding"> 7.4. <title>code Avengers, Creator</title> <a href="/index.html" title="go to home page"><h1>code Avengers</h1> <h2>about the Creator</h2> <strong>name</strong>: Mike Walmsley <strong>birthday</strong>: 14<sup>th</sup> April <strong>job</strong>: PhD student <a /mrwwalmsley" target="_blank"><img src="/images/wedding.jpg" height="140" title="married 2010/03/06" alt="mike and Nellie's wedding"> 7.5. <title>code Avengers, My Likes</title> <h1>my Likes</h1> <h2>my family</h2> <a href=" <img src=" /daughter3.jpg" height="140"> <h2>sports</h2> <a href=" <img height="140" alt="me playing AFL" src=" <a href=" <img height="140" alt="me finishing a marathon" src=" > <h2>singing</h2> <iframe src=" width="320"></iframe> My sisters, Jenna and Holly 8.1. <a href="/index.html"><img alt="code Avengers logo" title="go to Code Avengers home page" src="/images /logo.png"> <a href="/m/about.html">about us <a href=" <a href=" target="_blank"> <img alt="my Aunty" title="i love Aunty" height="100" src=" /Ty7glhjxj4I/AAAAAAAAASM/Qz1k_J3fTXQ /s320/img_7893.jpg"> My Aunty <strong>name</strong>: Super Cutey <strong>birthday</strong>: 24<sup>th</sup> December <strong>height</strong>: 0.63m <hr> <h2>my Super Powers</h2> I make people grab my cheeks by smiling... And pick me up by crying. I roll across my room in less than a minute <a href="/index.html"><img alt="code Avengers logo" title="go to Code Avengers home page" src="/images /logo.png"> <a href="/m/about.html">about us <a href=" <a href=" target="_blank"> <img alt="my Aunty" title="i love Aunty" height="100" src=" /Ty7glhjxj4I/AAAAAAAAASM/Qz1k_J3fTXQ /s320/img_7893.jpg"> My Aunty
5 5 of 26 14/11/2014 9:54 a.m. <strong>name</strong>: Super Cutey <strong>birthday</strong>: 24<sup>th</sup> December <strong>height</strong>: 0.63m <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 <a href="/index.html"><img alt="code Avengers logo" title="go to Code Avengers home page" src="/images /logo.png"> <a href="/m/about.html">about us <a href=" <a href=" target="_blank"> <img alt="my Aunty" title="i love Aunty" height="100" src=" /Ty7glhjxj4I/AAAAAAAAASM/Qz1k_J3fTXQ /s320/img_7893.jpg"> My Aunty <strong>name</strong>: Super Cutey <strong>birthday</strong>: 24<sup>th</sup> December <strong>height</strong>: 0.63m <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> <li><a href=" blog <li><a href=" //focusstudio.co.nz">grandma's photography <li><a href=" game <li><a href=" language learning site <li><a href=" cricket scoring software 8.4. <a href="/index.html"><img alt="code Avengers logo" title="go to Code Avengers home page" src="/images /logo.png"> <a href="/m/about.html">about us <a href=" <a href=" target="_blank"> <img alt="my Aunty" title="i love Aunty" height="100" src=" /Ty7glhjxj4I/AAAAAAAAASM/Qz1k_J3fTXQ /s320/img_7893.jpg"> My Aunty <strong>name</strong>: Super Cutey <strong>birthday</strong>: 24<sup>th</sup> December <strong>height</strong>: 0.63m <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> <li><a href=" blog <li><a href=" //focusstudio.co.nz">grandma's photography <li><a href=" game <li><a href=" language learning site <li><a href=" cricket scoring software <h2>my Top 5 Foods</h2> <li>mum's milk <li>mashed apple and peach <li>mashed carrots <li>mashed banana <li>farrex 8.5. <meta name="description" content="code Avengers superhero profile page"> <a href="/index.html"><img alt="code Avengers logo" title="go to Code Avengers home page" src="/images /logo.png"> <a href="/m/about.html">about us <a href=" <a href=" target="_blank"> <img alt="my Aunty" title="i love Aunty" height="100" src=" /Ty7glhjxj4I/AAAAAAAAASM/Qz1k_J3fTXQ /s320/img_7893.jpg"> My Aunty <strong>name</strong>: Super Cutey <strong>birthday</strong>: 24<sup>th</sup> December <strong>height</strong>: 0.63m <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> <li><a href=" blog <li><a href=" //focusstudio.co.nz">grandma's photography <li><a href=" game
6 6 of 26 14/11/2014 9:54 a.m. <li><a href=" language learning site <li><a href=" cricket scoring software <h2>my Top 5 Foods</h2> <li>mum's milk <li>mashed apple and peach <li>mashed carrots <li>mashed banana <li>farrex 9.1. <title>code Avengers, HTML differences</title> <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. <title>code Avengers, HTML differences</title> <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. <title>code Avengers, HTML differences</title> <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 <title>code Avengers, HTML differences</title> <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> <li>img <li>meta <li>link <li>br <h3>optional end tag</h3> <li>p <li>li 9.5. <!-- This is the head section, these are NOT shown on the page --> <title>code Avengers, HTML differences</title> <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: <li>explain the purpose of your code to your team; <li>hide code that you might want to show again later <meta name="description" content="code Avengers superhero profile page"> <header> <a href="/index.html"><img alt="code Avengers logo" title="go to Code Avengers home page" src="/images /logo.png"> <a href="/m/about.html">about us <a href=" </header> <a href=" target="_blank"> <img alt="my Aunty" title="i love Aunty" height="100" src=" /Ty7glhjxj4I/AAAAAAAAASM/Qz1k_J3fTXQ /s320/img_7893.jpg"> My Aunty <strong>name</strong>: Super Cutey <strong>birthday</strong>: 24<sup>th</sup> December <strong>height</strong>: 0.63m <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> <li><a href=" blog <li><a href=" //focusstudio.co.nz">grandma's photography <li><a href=" game <li><a href=" language learning site <li><a href=" cricket scoring software <h2>my Top 5 Foods</h2> <li>mum's milk <li>mashed apple and peach
7 7 of 26 14/11/2014 9:54 a.m. <li>mashed carrots <li>mashed banana <li>farrex <footer>created by Mike 2012</footer> <meta name="description" content="code Avengers superhero profile page"> <header> <a href="/index.html"><img alt="code Avengers logo" title="go to Code Avengers home page" src="/images /logo.png"> <a href="/m/about.html">about us <a href=" </header> <section> <a href=" target="_blank"> <img alt="my Aunty" title="i love Aunty" height="100" src=" /Ty7glhjxj4I/AAAAAAAAASM/Qz1k_J3fTXQ /s320/img_7893.jpg"> My Aunty <strong>name</strong>: Super Cutey <strong>birthday</strong>: 24<sup>th</sup> December <strong>height</strong>: 0.63m <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> <li><a href=" blog <li><a href=" //focusstudio.co.nz">grandma's photography <li><a href=" game <li><a href=" language learning site <li><a href=" cricket scoring software <h2>my Top 5 Foods</h2> <li>mum's milk <li>mashed apple and peach <li>mashed carrots <li>mashed banana <li>farrex </section> <footer>created by Mike 2012</footer> <meta name="description" content="code Avengers superhero profile page"> <link rel="stylesheet" href=" /css/profile1.css"> <header> <a href=" <img alt="code Avengers logo" title="go to Code Avengers home page" src=" /logo.png"> <a href="/m/about.html">about us <a href=" </header> <section> <a href=" target="_blank"> <img alt="my Aunty" title="i love Aunty" height="100" src=" /Ty7glhjxj4I/AAAAAAAAASM/Qz1k_J3fTXQ /s320/img_7893.jpg"> My Aunty <strong>name</strong>: Super Cutey <strong>birthday</strong>: 24<sup>th</sup> December <strong>height</strong>: 0.63m <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> <li><a href=" blog <li><a href=" //focusstudio.co.nz">grandma's photography <li><a href=" game <li><a href=" language learning site <li><a href=" cricket scoring software <h2>my Top 5 Foods</h2> <li>mum's milk <li>mashed apple and peach <li>mashed carrots <li>mashed banana <li>farrex </section> <footer>created by Mike 2012</footer> <meta name="description" content="code Avengers superhero profile page"> <link rel="stylesheet" href=" /css/profile1.css"> <header> <a href=" <img alt="code Avengers logo" title="go to Code Avengers home page" src=" /logo.png"> <a href="/m/about.html">about us <a
8 8 of 26 14/11/2014 9:54 a.m. href=" </header> <section> <a href=" target="_blank"> <img alt="my Aunty" title="i love Aunty" height="100" src=" /Ty7glhjxj4I/AAAAAAAAASM/Qz1k_J3fTXQ /s320/img_7893.jpg"> My Aunty <strong>name</strong>: Super Cutey <strong>birthday</strong>: 24<sup>th</sup> December <strong>height</strong>: 0.63m <a href="likes.html">my likes <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> <li><a href=" blog <li><a href=" //focusstudio.co.nz">grandma's photography <li><a href=" game <li><a href=" language learning site <li><a href=" cricket scoring software <h2>my Top 5 Foods</h2> <li>mum's milk <li>mashed apple and peach <li>mashed carrots <li>mashed banana <li>farrex </section> <footer>created by Mike 2012</footer> <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 href="/m/about.html">about us <a href=" </header> <section> <a href=" target="_blank"> <img alt="my Aunty" title="i love Aunty" height="100" src=" /Ty7glhjxj4I/AAAAAAAAASM/Qz1k_J3fTXQ /s320/img_7893.jpg"> My Aunty <strong>name</strong>: Super Cutey <strong>birthday</strong>: 24<sup>th</sup> December <strong>height</strong>: 0.63m <a href="likes.html">my likes <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> <li><a href=" blog <li><a href=" //focusstudio.co.nz">grandma's photography <li><a href=" game <li><a href=" language learning site <li><a href=" cricket scoring software <h2>my Top 5 Foods</h2> <li>mum's milk <li>mashed apple and peach <li>mashed carrots <li>mashed banana <li>farrex </section> <footer>created by Mike 2012</footer> <html> <head> <title>code Avengers, CSS</title> </head> <body> <h2>introduction to CSS</h2> <p>in lessons you will learn the CSS basics <p>you will learn how to: <li>change colors <li>change fonts <li>change sizes <li>add borders <li>use images for bullet points <li>create fixed headers and footers </body> </html> <html> <head> <title>code Avengers, CSS</title> background-color: blue; color: yellow; </head> <body> <h2>introduction to CSS</h2> <p>in lessons you will learn the CSS basics <p>you will learn how to:
9 9 of 26 14/11/2014 9:54 a.m. <li>change colors <li>change fonts <li>change sizes <li>add borders <li>use images for bullet points <li>create fixed headers and footers </body> </html> <html> <head> <title>code Avengers, CSS</title> h2 { background-color: darkblue; color: lightyellow; </head> <body> <h2>introduction to CSS</h2> <p>in lessons you will learn the CSS basics <p>you will learn how to: <li>change colors <li>change fonts <li>change sizes <li>add borders <li>use images for bullet points <li>create fixed headers and footers </body> </html> <html> <head> <title>code Avengers, CSS</title> h2, background-color: indigo; color: yellowgreen; </head> <body> <h2>introduction to CSS</h2> <p>in lessons you will learn the CSS basics <p>you will learn how to: <li>change colors <li>change fonts <li>change sizes <li>add borders <li>use images for bullet points <li>create fixed headers and footers </body> </html> <html> <head> <title>code Avengers, CSS</title> background-color: lightblue; color: navy; h2, ol { background-color: hotpink; </head> <body> <h2>introduction to CSS</h2> <p>in lessons you will learn the CSS basics <p>you will learn how to: <li>change colors <li>change fonts <li>change sizes <li>add borders <li>use images for bullet points <li>create fixed headers and footers </body> </html> <html> <head> <title>code Avengers, Common Bugs</title> background-color: black; color: lightgreen; background-color: lightgreen; color: black; </head> <body> <h1>common CSS Bugs</h1> <p>here is a list of common CSS mistakes: <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 </body> </html> <html> <head> <title>code Avengers, Common Bugs</title> background-color: black; color: tan; ul { background-color: wheat; color: black; </head> <body> <h1>common CSS Bugs</h1> <p>here is a list of common CSS mistakes: <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 </body> </html> 12.3.
10 10 of 26 14/11/2014 9:54 a.m. <html> <head> <title>code Avengers, Common Bugs</title> background-color: black; color: orange; background-color: gold; color: indigo; ul { background-color: indigo; color: gold; </head> <body> <h1>common CSS Bugs</h1> <p>here is a list of common CSS mistakes: <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 </body> </html> <html> <head> <title>code Avengers, Common Bugs</title> body { background-color: black; color: white; background-color: firebrick; ul { background-color: white; </head> <body> <h1>common CSS Bugs</h1> <p>here is a list of common CSS mistakes: <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 </body> </html> <title>code Avengers, Common Bugs</title> body { background-color: palegreen; ul, background-color: lightyellow; color: red; <h1>common CSS Bugs</h1> <p>here is a list of common CSS mistakes: <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 font-family: cursive; font-family: monospace; font-family: 'Trebuchet MS', sans-serif;
11 11 of 26 14/11/2014 9:54 a.m. font-family: Georgia, serif; font-family: 'Trebuchet MS', sans-serif; font-size: 40px; font-family: Georgia, serif; font-size: 14px; font-family: 'Oregano', cursive; font-size: 40px; font-family: Georgia, serif; font-size: 14px; font-family: 'Oregano', cursive; font-size: 40px; font-family: Georgia, serif; font-size: 14px; <strong>location:</strong> Hamilton, New Zealand <strong> </strong> <strong>phone:</strong> font-family: 'Trebuchet MS', sans-serif; font-family: 'Oregano', cursive; font-size: 40px; font-family: Georgia, serif; font-size: 14px; <strong>location:</strong> Hamilton, New Zealand <strong> </strong> <strong>phone:</strong> font-family: 'Trebuchet MS', sans-serif;
12 12 of 26 14/11/2014 9:54 a.m. font-family: 'Oregano', cursive; font-size: 40px; font-family: Georgia, serif; font-size: 14px; <strong>location:</strong> Hamilton, New Zealand <strong> </strong> <strong>phone:</strong> font-family: 'Trebuchet MS', sans-serif; font-family: 'Oregano', cursive; font-size: 40px; font-family: Georgia, serif; font-size: 14px; h1:hover { font-size: 50px; <strong>location:</strong> Hamilton, New Zealand <strong> </strong> [email protected] <strong>phone:</strong> font-family: 'Trebuchet MS', sans-serif; font-family: 'Oregano', cursive; font-size: 40px; font-family: Georgia, serif; font-size: 14px; <strong>location:</strong> Hamilton, New Zealand <strong> </strong> [email protected] <strong>phone:</strong> <title>code Avengers, Style Guide</title> background-color: lightyellow; li { font-family: 'Trebuchet MS', sans-serif; color: blue; <h1>google Style Guide</h1> <p>the Google style guide helps you write code that is easy to read. <h2>css Formatting Guide</h2> <li>put 1 space before the <strong>{</strong>
13 13 of 26 14/11/2014 9:54 a.m. <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 <title>code Avengers, Style Guide</title> background-color: lightcyan; font-family: 'Times New Roman', serif; font-size: 18px; h2 { font-family: 'Andale Mono', sans-serif; color: teal; <h1>google Style Guide</h1> <p>the Google style guide helps you write code that is easy to read. <h2>css Formatting Guide</h2> <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 <title>code Avengers, Style Guide</title> background-color: dimgray; color: white; font-family: 'Trebuchet MS', sans-serif; font-size: 17px; h2 { color: chocolate; font-family: 'Comic Sans MS', cursive; <h1>google Style Guide</h1> <p>the Google style guide helps you write code that is easy to read. <h2>css Formatting Guide</h2> <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 <title>code Avengers, Style Guide</title> color: darkblue; font-size: 16px; font-family: 'Courier New', monospace; font-weight: bold; font-family: Impact, fantasy; font-size: 28px; font-weight: normal; h2 { font-family: 'Century Gothic', sans-serif; font-size: 20px; <h1>google Style Guide</h1> <p>the Google style guide helps you write code that is easy to read. <h2>css Formatting Guide</h2> <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 <title>code Avengers, Style Guide</title> color: darkblue; font: bold 16px 'Courier New', monospace; font: normal 28px Impact, fantasy; h2 { font: bold 20px 'Century Gothic', sans-serif; <h1>google Style Guide</h1> <p>the Google style guide helps you write code that is easy to read. <h2>css Formatting Guide</h2> <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 <h2>css Style Guide</h2> <p>use shorthand properties where possible 16.1.
14 14 of 26 14/11/2014 9:54 a.m. font-family: 'Trebuchet MS', sans-serif; font-family: 'Oregano', cursive; font-size: 40px; font-family: Georgia, serif; font-size: 14px; <strong>location:</strong> Hamilton, New Zealand <strong> </strong> <strong>phone:</strong> <img src="/images/daughter7.jpg" alt="my daughter" width="115"> <img src="/images/daughter8.jpg" alt="my daughter 2" width="115"> font-family: 'Trebuchet MS', sans-serif; font-family: 'Oregano', cursive; font-size: 40px; font-family: Georgia, serif; font-size: 14px; height: 170px; <strong>location:</strong> Hamilton, New Zealand <strong> </strong> <strong>phone:</strong> font-family: 'Trebuchet MS', sans-serif; font-family: 'Oregano', cursive; font-size: 40px; font-family: Georgia, serif; font-size: 14px; border-style: ridge; border-width: 20px; height: 170px; <strong>location:</strong> Hamilton, New Zealand <strong> </strong>
15 15 of 26 14/11/2014 9:54 a.m. <strong>phone:</strong> font-family: 'Trebuchet MS', sans-serif; font-family: 'Oregano', cursive; font-size: 40px; font-family: Georgia, serif; font-size: 14px; border-color: gold; border-width: 20px; height: 170px; <strong>location:</strong> Hamilton, New Zealand <strong> </strong> <strong>phone:</strong> <strong>location:</strong> Hamilton, New Zealand <strong> </strong> <strong>phone:</strong> margin-bottom: 0; margin-top: 2px;
16 16 of 26 14/11/2014 9:54 a.m. margin-top: 0; <strong>location:</strong> Hamilton, New Zealand <strong> </strong> <strong>phone:</strong> margin-bottom: 0; margin-top: 2px; margin-top: 0; margin-right: 20px; margin-top: 15px; <strong>location:</strong> Hamilton, New Zealand <strong> </strong> <strong>phone:</strong> margin-bottom: 0; margin-top: 2px; margin-top: 0; margin-right: 20px; margin-top: 15px; margin-top: 14px; margin-bottom: 10px; <strong>location:</strong> Hamilton, New Zealand <strong> </strong> <strong>phone:</strong>
17 17 of 26 14/11/2014 9:54 a.m. <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 <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 <strong>location:</strong> Hamilton, New Zealand <strong> </strong> [email protected] <strong>phone:</strong> <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 <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 <strong>location:</strong> Hamilton, New Zealand <strong> </strong> [email protected] <strong>phone:</strong>
18 18 of 26 14/11/2014 9:54 a.m. <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 <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 box-shadow: 4px 4px; <strong>location:</strong> Hamilton, New Zealand <strong> </strong> [email protected] <strong>phone:</strong> <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 <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 box-shadow: 4px 4px violet; <strong>location:</strong> Hamilton, New Zealand <strong> </strong> [email protected] <strong>phone:</strong>
19 19 of 26 14/11/2014 9:54 a.m. <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 <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 box-shadow: 1px 1px 8px 4px violet; <strong>location:</strong> Hamilton, New Zealand <strong> </strong> [email protected] <strong>phone:</strong> <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 <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 text-shadow: 2px 2px 3px slateblue; box-shadow: 1px 1px 8px 4px violet; <strong>location:</strong> Hamilton, New Zealand <strong> </strong> [email protected] <strong>phone:</strong>
20 20 of 26 14/11/2014 9:54 a.m. <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 <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 text-shadow: 1px 1px 0 darkslateblue, 2px 2px 3px slateblue; box-shadow: 1px 1px 8px 4px violet; <strong>location:</strong> Hamilton, New Zealand <strong> </strong> [email protected] <strong>phone:</strong> <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 <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 background-image: url(/images/textures/light2.png); text-shadow: 1px 1px 0 darkslateblue, 2px 2px 3px slateblue; box-shadow: 1px 1px 8px 4px violet; <strong>location:</strong> Hamilton, New Zealand <strong> </strong> [email protected]
21 21 of 26 14/11/2014 9:54 a.m. <strong>phone:</strong> <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 <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 background-image: url(/images/textures/light2a.png); text-shadow: 1px 1px 0 darkslateblue, 2px 2px 3px slateblue; box-shadow: 1px 1px 8px 4px violet; <strong>location:</strong> Hamilton, New Zealand <strong> </strong> [email protected] <strong>phone:</strong> <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 <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 background: hotpink url(/images/textures /light2a.png); text-shadow: 1px 1px 0 darkslateblue, 2px 2px 3px slateblue; box-shadow: 1px 1px 8px 4px violet;
22 22 of 26 14/11/2014 9:54 a.m. <strong>location:</strong> Hamilton, New Zealand <strong> </strong> <strong>phone:</strong> <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 <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 background: hotpink url(/images/textures /light2a.png); text-shadow: 1px 1px 0 darkslateblue, 2px 2px 3px slateblue; box-shadow: 1px 1px 8px 4px violet; ul { list-style-type: circle; <strong>location:</strong> Hamilton, New Zealand <strong> </strong> [email protected] <strong>phone:</strong> <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 <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: <li>pregnancy photos <li>new born photos <li>baby photos <li>toddler photos <li>family photos <li>couple photos <li>special events background: hotpink url(/images/textures /light2a.png); text-shadow: 1px 1px 0 darkslateblue, 2px 2px 3px slateblue;
23 23 of 26 14/11/2014 9:54 a.m. box-shadow: 1px 1px 8px 4px violet; ul { list-style-image: url(/images/silverstar.png); <strong>location:</strong> Hamilton, New Zealand <strong> </strong> [email protected] <strong>phone:</strong> <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 <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: <li>pregnancy photos <li>new born photos <li>baby photos <li>toddler photos <li>family photos <li>couple photos <li>special events background: hotpink url(/images/textures /light2a.png); text-shadow: 1px 1px 0 darkslateblue, 2px 2px 3px slateblue; box-shadow: 1px 1px 8px 4px violet; ul { list-style-image: url(/images/silverstar.png); <header> </header> <section> <strong>location:</strong> Hamilton, New Zealand <strong> </strong> [email protected] <strong>phone:</strong> <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 <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: <li>pregnancy photos <li>new born photos <li>baby photos <li>toddler photos <li>family photos <li>couple photos <li>special events </section> <footer> Created by <a href="profile.html">mike, 2012
24 24 of 26 14/11/2014 9:54 a.m. </footer> background: hotpink url(/images/textures /light2a.png); header, footer { background: pink; border: 2px solid deeppink; text-shadow: 1px 1px 0 darkslateblue, 2px 2px 3px slateblue; box-shadow: 1px 1px 8px 4px violet; ul { list-style-image: url(/images/silverstar.png); <header> </header> <section> <strong>location:</strong> Hamilton, New Zealand <strong> </strong> [email protected] <strong>phone:</strong> <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 <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: <li>pregnancy photos <li>new born photos <li>baby photos <li>toddler photos <li>family photos <li>couple photos <li>special events </section> <footer> Created by <a href="profile.html">mike, 2012 </footer> background: hotpink url(/images/textures /light2a.png); header, footer { background: pink; border: 2px solid deeppink; text-align: center; text-shadow: 1px 1px 0 darkslateblue, 2px 2px 3px slateblue;
25 25 of 26 14/11/2014 9:54 a.m. box-shadow: 1px 1px 8px 4px violet; text-align: justify; ul { list-style-image: url(/images/silverstar.png); <header> </header> <section> <strong>location:</strong> Hamilton, New Zealand <strong> </strong> [email protected] <strong>phone:</strong> <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 <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: <li>pregnancy photos <li>new born photos <li>baby photos <li>toddler photos <li>family photos <li>couple photos <li>special events </section> <footer> Created by <a href="profile.html">mike, 2012 </footer> background: hotpink url(/images/textures /light2a.png); body { header, footer { background: pink; border: 2px solid deeppink; margin: 0-10px; text-align: center; text-shadow: 1px 1px 0 darkslateblue, 2px 2px 3px slateblue; box-shadow: 1px 1px 8px 4px violet; text-align: justify; ul { list-style-image: url(/images/silverstar.png); <header> </header> <section> <strong>location:</strong> Hamilton, New Zealand <strong> </strong> [email protected] <strong>phone:</strong> <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 <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
26 26 of 26 14/11/2014 9:54 a.m. are both creative and truly unique. <p>we specialize in the following: <li>pregnancy photos <li>new born photos <li>baby photos <li>toddler photos <li>family photos <li>couple photos <li>special events </section> <footer> Created by <a href="profile.html">mike, 2012 </footer> background: hotpink url(/images/textures /light2a.png); body { header, footer { background: pink; border: 2px solid deeppink; margin: 0-10px; text-align: center; text-shadow: 1px 1px 0 darkslateblue, 2px 2px 3px slateblue; box-shadow: 1px 1px 8px 4px violet; text-align: justify; ul { list-style-image: url(/images/silverstar.png); <header> </header> <section> <strong>location:</strong> Hamilton, New Zealand <strong> </strong> [email protected] <strong>phone:</strong> <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 <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: <li>pregnancy photos <li>new born photos <li>baby photos <li>toddler photos <li>family photos <li>couple photos <li>special events </section> <footer> Created by <a href="profile.html">mike, 2012 <a href=" class="twittershare-button" data-via="codeavengers" data-url=" /business.html">tweet <script src="/js/twitter.js"></script> <div class="fb-like" data-href=" /buisness.html" data-send="false" data-layout="button_count" data-width="450" data-showfaces="false"></div> </footer> <div id="fb-root"></div> <script src="/js/facebook.js"></script>
Web Design and Databases WD: Class 7: HTML and CSS Part 3
Web Design and Databases WD: Class 7: HTML and CSS Part 3 Dr Helen Hastie Dept of Computer Science Heriot-Watt University Some contributions from Head First HTML with CSS and XHTML, O Reilly Recap! HTML
Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 [email protected] www.luminys.com
Essential HTML & CSS for WordPress Mark Raymond Luminys, Inc. 949-654-3890 [email protected] www.luminys.com HTML: Hypertext Markup Language HTML is a specification that defines how pages are created
CST 150 Web Design I CSS Review - In-Class Lab
CST 150 Web Design I CSS Review - In-Class Lab The purpose of this lab assignment is to review utilizing Cascading Style Sheets (CSS) to enhance the layout and formatting of web pages. For Parts 1 and
How To Create A Web Page On A Windows 7.1.1 (For Free) With A Notepad) On A Macintosh (For A Freebie) Or Macintosh Web Browser (For Cheap) On Your Computer Or Macbook (
CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS The following exercises illustrate the process of creating and publishing Web pages with Notepad, which is the plain text editor that ships as part of
HTML and CSS. Elliot Davies. April 10th, 2013. [email protected]
HTML and CSS Elliot Davies [email protected] April 10th, 2013 In this talk An introduction to HTML, the language of web development Using HTML to create simple web pages Styling web pages using CSS
CSS. CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo. ADI css 1/28
CSS CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo ADI css 1/28 Cascaded Style Sheets Por ordem de prioridade: Inline
Introduction to Adobe Dreamweaver CC
Introduction to Adobe Dreamweaver CC What is Dreamweaver? Dreamweaver is the program that we will be programming our websites into all semester. We will be slicing our designs out of Fireworks and assembling
Web Design with CSS and CSS3. Dr. Jan Stelovsky
Web Design with CSS and CSS3 Dr. Jan Stelovsky CSS Cascading Style Sheets Separate the formatting from the structure Best practice external CSS in a separate file link to a styles from numerous pages Style
Simply download Beepip from http://beepip.com and run the file when it arrives at your computer.
Beepip User Guide How To's: How do I install Beepip? Simply download Beepip from http://beepip.com and run the file when it arrives at your computer. How do I set up Beepip? Once you've opened up Beepip,
{color:blue; font-size: 12px;}
CSS stands for cascading style sheets. Styles define how to display a web page. Styles remove the formatting of a document from the content of the document. There are 3 ways that styles can be applied:
Web Authoring CSS. www.fetac.ie. Module Descriptor
The Further Education and Training Awards Council (FETAC) was set up as a statutory body on 11 June 2001 by the Minister for Education and Science. Under the Qualifications (Education & Training) Act,
Web Design and Development ACS-1809. Chapter 9. Page Structure
Web Design and Development ACS-1809 Chapter 9 Page Structure 1 Chapter 9: Page Structure Organize Sections of Text Format Paragraphs and Page Elements 2 Identifying Natural Divisions It is normal for a
Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University
Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates What is a DIV tag? First, let s recall that HTML is a markup language. Markup provides structure and order to a page. For example,
Contents. Downloading the Data Files... 2. Centering Page Elements... 6
Creating a Web Page Using HTML Part 1: Creating the Basic Structure of the Web Site INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 2.0 Winter 2010 Contents Introduction...
Further web design: Cascading Style Sheets Practical workbook
Further web design: Cascading Style Sheets Practical workbook Aims and Learning Objectives This document gives an introduction to the use of Cascading Style Sheets in HTML. When you have completed these
What is CSS? Official W3C standard for controlling presentation Style sheets rely on underlying markup structure
CSS Peter Cho 161A Notes from Jennifer Niederst: Web Design in a Nutshell and Thomas A. Powell: HTML & XHTML, Fourth Edition Based on a tutorials by Prof. Daniel Sauter / Prof. Casey Reas What is CSS?
Web layout guidelines for daughter sites of Scotland s Environment
Web layout guidelines for daughter sites of Scotland s Environment Current homepage layout of Scotland s Aquaculture and Scotland s Soils (September 2014) Design styles A daughter site of Scotland s Environment
CHAPTER 10. When you complete this chapter, you will be able to:
Data Tables CHAPTER 10 When you complete this chapter, you will be able to: Use table elements Use table headers and footers Group columns Style table borders Apply padding, margins, and fl oats to tables
ITNP43: HTML Lecture 4
ITNP43: HTML Lecture 4 1 Style versus Content HTML purists insist that style should be separate from content and structure HTML was only designed to specify the structure and content of a document Style
Web Design for Print Designers WEB DESIGN FOR PRINT DESIGNERS: WEEK 6
Web Design for Print Designers CSS uses a variety of declarations for styling text. Many use the variations of the font declaration. Other styles are done using different declarations. The font declaration
Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,:
CSS Tutorial Part 2: Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,: animals A paragraph about animals goes here
JJY s Joomla 1.5 Template Design Tutorial:
JJY s Joomla 1.5 Template Design Tutorial: Joomla 1.5 templates are relatively simple to construct, once you know a few details on how Joomla manages them. This tutorial assumes that you have a good understanding
Development Perspective: DIV and CSS HTML layout. Web Design. Lesson 2. Development Perspective: DIV/CSS
Web Design Lesson 2 Development Perspective: DIV/CSS Why tables have been tabled Tables are a cell based layout tool used in HTML development. Traditionally they have been the primary tool used by web
HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL
HTML CSS Basic Structure HTML [Hypertext Markup Language] is the code read by a browser and defines the overall page structure. The HTML file or web page [.html] is made up of a head and a body. The head
Web Design I. Spring 2009 Kevin Cole Gallaudet University 2009.03.05
Web Design I Spring 2009 Kevin Cole Gallaudet University 2009.03.05 Layout Page banner, sidebar, main content, footer Old method: Use , , New method: and "float" CSS property Think
Advanced Editor User s Guide
Advanced Editor User s Guide 1601 Trapelo Road Suite 329 Waltham, MA 02451 www.constantcontact.com Constant Contact, Inc. reserves the right to make any changes to the information contained in this publication
HTML5 and CSS3 Design with CSS Page 1
HTML5 and CSS3 Design with CSS Page 1 1 12 2 3 3 4 45 5 6 6 7 7 HTML5 and CSS3 DESIGN WITH CSS Styles in HTML Documents Styles provide a method of creating consistent formatting of elements throughout
Cascading Style Sheet (CSS) Tutorial Using Notepad. Step by step instructions with full color screen shots
Updated version September 2015 All Creative Designs Cascading Style Sheet (CSS) Tutorial Using Notepad Step by step instructions with full color screen shots What is (CSS) Cascading Style Sheets and why
CIS 467/602-01: Data Visualization
CIS 467/602-01: Data Visualization HTML, CSS, SVG, (& JavaScript) Dr. David Koop Assignment 1 Posted on the course web site Due Friday, Feb. 13 Get started soon! Submission information will be posted Useful
Introduction to Web Development
Introduction to Web Development Week 2 - HTML, CSS and PHP Dr. Paul Talaga 487 Rhodes [email protected] ACM Lecture Series University of Cincinnati, OH October 16, 2012 1 / 1 HTML Syntax For Example:
Responsive HTML email and Drupal
Responsive HTML email and Drupal Mobile + Email + Drupal Drew Gorton Drew Gorton Founder gortonstudios.com Responsive HTML email Why? ~19% of email messages are read on smartphones or tablets. Source:
ICE: HTML, CSS, and Validation
ICE: HTML, CSS, and Validation Formatting a Recipe NAME: Overview Today you will be given an existing HTML page that already has significant content, in this case, a recipe. Your tasks are to: mark it
Create Your own Company s Design Theme
Create Your own Company s Design Theme A simple yet effective approach to custom design theme INTRODUCTION Iron Speed Designer out of the box already gives you a good collection of design themes, up to
MCH Strategic Data Best Practices Review
MCH Strategic Data Best Practices Review Presenters Alex Bardoff Manager, Creative Services [email protected] Lindsey McFadden Manager, Campaign Production Services [email protected] 2 Creative
Email Creator Coding Guidelines Toolbox
Email Creator Coding Guidelines Toolbox The following information is needed when coding your own template from html to be imported into the Email Creator. You will need basic html and css knowledge for
Responsive Email Design
Responsive Email Design For the Hospitality Industry By Arek Klauza, Linda Tran & Carrie Messmore February 2013 Responsive Email Design There has been a lot of chatter in recent months in regards to Responsive
CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions)
CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) Step 1 - DEFINE A NEW WEB SITE - 5 POINTS 1. From the welcome window that opens select the Dreamweaver Site... or from the main
Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design
Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design Contents HTML Quiz Design CSS basics CSS examples CV update What, why, who? Before you start to create a site, it s
customer community Getting started Visual Editor Guide! www.pure360community.co.uk
Getting started! 1 Contents Introduction... 3 Visual Editor Options... 3-5 Advanced Tips... 6-7 Do s and Don ts... 7-9 Testing Messages... 10 2 Welcome The Visual Editor tool is the ideal resource for
Smartphones and tablets: If you have a data plan, use the SMTP server setting for the company that provides this service.
ARTSPHERE USER MANUAL Hosting for versions 5.0 and 5.1 The hosting control panel is where your website is located. We refer to this as the cpanel. To access the cpanel add /cpanel to your domain name (for
Web Design Revision. AQA AS-Level Computing COMP2. 39 minutes. 39 marks. Page 1 of 17
Web Design Revision AQA AS-Level Computing COMP2 204 39 minutes 39 marks Page of 7 Q. (a) (i) What does HTML stand for?... () (ii) What does CSS stand for?... () (b) Figure shows a web page that has been
Microsoft Expression Web Quickstart Guide
Microsoft Expression Web Quickstart Guide Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program, you ll find a number of task panes, toolbars,
CSS - Cascading Style Sheets
CSS - Cascading Style Sheets From http://www.csstutorial.net/ http://www.w3schools.com/css/default.asp What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements External
Web publishing: An introduction to CSS
Web publishing: An introduction to CSS 1 1 How to Use this User Guide 1.1. The Exercises This handbook accompanies the taught sessions for the course. Each section contains a brief overview of a topic
Mobile Web Site Style Guide
YoRk University Mobile Web Site Style Guide Table of Contents This document outlines the graphic standards for the mobile view of my.yorku.ca. It is intended to be used as a guide for all York University
How to craft a modern, mobile-optimized HTML email template. Jason Samuels, NCFR IT Manager DrupalCamp Twin Cities May 2012
How to craft a modern, mobile-optimized HTML email template Jason Samuels, NCFR IT Manager DrupalCamp Twin Cities May 2012 Our old email template Pros Simple Lightweight Worked as plain-text Rendered OK
Positioning Container Elements
Advanced Lesson Group 3 - Element Positioning with CSS Positioning Container Elements The position: style property is used to move block elements to a specific location on the web page. The position style
Citrix StoreFront. Customizing the Receiver for Web User Interface. 2012 Citrix. All rights reserved.
Citrix StoreFront Customizing the Receiver for Web User Interface 2012 Citrix. All rights reserved. Customizing the Receiver for Web User Interface Introduction Receiver for Web provides a simple mechanism
Coding Standards for Web Development
DotNetDaily.net Coding Standards for Web Development This document was downloaded from http://www.dotnetdaily.net/ You are permitted to use and distribute this document for any noncommercial purpose as
Chapter 7 Page Layout Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D
Chapter 7 Page Layout Basics Key Concepts Copyright 2013 Terry Ann Morris, Ed.D 1 Learning Outcomes float fixed positioning relative positioning absolute positioning two-column page layouts vertical navigation
Official JSN Epic PRO v2.0 Configuration Manual version for Joomla! 1.5.x
Official JSN Epic PRO v2.0 Configuration Manual version for Joomla! 1.5.x This documentation included in the JSN Epic PRO Pack is release under Commercial Proprietary license and not intended for public
January 18, 2015 STNMAST2008. to code. 1day
LEARN to code IN January 18, 2015 1day MAKE YOUR OWN APP: part one CREATE AN APP IN A DAY If you can t code, you ll be left in the past so snap to it Coding is no longer a geeks hobby: it s everywhere.
Using Style Sheets for Consistency
Cascading Style Sheets enable you to easily maintain a consistent look across all the pages of a web site. In addition, they extend the power of HTML. For example, style sheets permit specifying point
Flare Tips and Tricks. Tips and tricks. Importing content Lists. Variables and snippets Condition tags Printed documentation WebHelp.
Flare Tips and Tricks Scott DeLoach [email protected] t t t Founder, ClickStart Certified Instructor, Flare RoboHelp Captivate Author, MadCap Flare for RoboHelp Users 2007 ClickStart, Inc. All rights
Magento Responsive Theme Design
Magento Responsive Theme Design Richard Carter Chapter No. 2 "Making Your Store Responsive" In this package, you will find: A Biography of the author of the book A preview chapter from the book, Chapter
Outline of CSS: Cascading Style Sheets
Outline of CSS: Cascading Style Sheets nigelbuckner 2014 This is an introduction to CSS showing how styles are written, types of style sheets, CSS selectors, the cascade, grouping styles and how styles
Base template development guide
Scandiweb Base template development guide General This document from Scandiweb.com contains Magento theme development guides and theme development case study. It will basically cover two topics Magento
Responsive Web Design: Media Types/Media Queries/Fluid Images
HTML Media Types Responsive Web Design: Media Types/Media Queries/Fluid Images Mr Kruyer s list of HTML Media Types to deliver CSS to different devices. Important note: Only the first three are well supported.
How to code, test, and validate a web page
Chapter 2 How to code, test, and validate a web page Slide 1 Objectives Applied 1. Use a text editor like Aptana Studio 3 to create and edit HTML and CSS files. 2. Test an HTML document that s stored on
color name color name
Colors in R 1 white aliceblue antiquewhite antiquewhite1 antiquewhite2 antiquewhite3 antiquewhite4 aquamarine aquamarine1 aquamarine2 aquamarine3 aquamarine4 azure azure1 azure2 azure3 azure4 beige bisque
The Essential Guide to HTML Email Design
The Essential Guide to HTML Email Design Emailmovers Limited, Pindar House, Thornburgh Road Scarborough, North Yorkshire, YO11 3UY Tel: 0845 226 7181 Fax: 0845 226 7183 Email: [email protected]
CS134 Web Site Design & Development. Quiz1
CS134 Web Site Design & Development Quiz1 Name: Score: Email: I Multiple Choice Questions (2 points each, total 20 points) 1. Which of the following is an example of an IP address? [Answer: d] a. www.whitehouse.gov
This document will describe how you can create your own, fully responsive. drag and drop email template to use in the email creator.
1 Introduction This document will describe how you can create your own, fully responsive drag and drop email template to use in the email creator. It includes ready-made HTML code that will allow you to
Web Development CSE2WD Final Examination June 2012. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards?
Question 1. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards? (b) Briefly identify the primary purpose of the flowing inside the body section of an HTML document: (i) HTML
In this chapter, you will learn how to...
LEARNING OUTCOMES In this chapter, you will learn how to... Create a table on a web page Apply attributes to format tables, table rows, and table cells Increase the accessibility of a table Style an HTML
Chapter 1. Introduction to web development
Chapter 1 Introduction to web development HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 1 Objectives Applied 1. Load a web page from the Internet or an intranet into a web browser.
HTML5 and CSS3. new semantic elements advanced form support CSS3 features other HTML5 features
HTML5 and CSS3 new semantic elements advanced form support CSS3 features other HTML5 features fallback solutions HTML5 and CSS3 are new and evolving standards two levels of fallback different browsers
GUIDE TO CODE KILLER RESPONSIVE EMAILS
GUIDE TO CODE KILLER RESPONSIVE EMAILS THAT WILL MAKE YOUR EMAILS BEAUTIFUL 3 Create flawless emails with the proper use of HTML, CSS, and Media Queries. But this is only possible if you keep attention
Intro to Web Design. ACM Webmonkeys @ UIUC
Intro to Web Design ACM Webmonkeys @ UIUC How do websites work? Note that a similar procedure is used to load images, etc. What is HTML? An HTML file is just a plain text file. You can write all your HTML
Website Development. 2 Text. 2.1 Fonts. Terry Marris September 2007. We see how to format text and separate structure from content.
Terry Marris September 2007 Website Development 2 Text We see how to format text and separate structure from content. 2.1 Fonts Professionally written websites, such as those by Google and Microsoft, use
CSS 101. CSS CODE The code in a style sheet is made up of rules of the following types
CSS 101 WHY CSS? A consistent system was needed to apply stylistic values to HTML elements. What CSS does is provide a way to attach styling like color:red to HTML elements like . It does this by defining
Web Building Blocks. Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.
Web Building Blocks Core Concepts for HTML & CSS Joseph Gilbert User Experience Web Developer University of Virginia Library [email protected] @joegilbert Why Learn the Building Blocks? The idea
Scoop Hosted Websites. USER MANUAL PART 4: Advanced Features. Phone: +61 8 9388 8188 Email: [email protected] Website: scoopdigital.com.
Scoop Hosted Websites USER MANUAL PART 4: Advanced Features Phone: +61 8 9388 8188 Email: [email protected] Website: scoopdigital.com.au Index Advanced Features... 3 1 Integrating Third Party Content...
Garfield Public Schools Fine & Practical Arts Curriculum Web Design
Garfield Public Schools Fine & Practical Arts Curriculum Web Design (Half-Year) 2.5 Credits Course Description This course provides students with basic knowledge of HTML and CSS to create websites and
CSS for Page Layout. Key Concepts
CSS for Page Layout Key Concepts CSS Page Layout Advantages Greater typography control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control
Web Design for Programmers. Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission
Web Design for Programmers Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission Quick Disclaimers This is a crash course! Many topics are simplified
U T A H V A L L E Y U N I V E R S I T Y
U T A H V A L L E Y U N I V E R S I T Y W E B S T Y L E G U I D E V olume 1: Web Style Guide v1.0.1 HOW TO USE THIS STYLE GUIDE This guide is to be used in conjunction with, and is a expansion of, the
Selectors in Action LESSON 3
LESSON 3 Selectors in Action In this lesson, you will learn about the different types of selectors and how to use them. Setting Up the HTML Code Selectors are one of the most important aspects of CSS because
Module 6 Web Page Concept and Design: Getting a Web Page Up and Running
Module 6 Web Page Concept and Design: Getting a Web Page Up and Running Lesson 3 Creating Web Pages Using HTML UNESCO EIPICT M6. LESSON 3 1 Rationale Librarians need to learn how to plan, design and create
Responsive Web Design for Teachers. Exercise: Building a Responsive Page with the Fluid Grid Layout Feature
Exercise: Building a Responsive Page with the Fluid Grid Layout Feature Now that you know the basic principles of responsive web design CSS3 Media Queries, fluid images and media, and fluid grids, you
The Essential Guide to HTML Email Design
The Essential Guide to HTML Email Design Index Introduction... 3 Layout... 4 Best Practice HTML Email Example... 5 Images... 6 CSS (Cascading Style Sheets)... 7 Animation and Scripting... 8 How Spam Filters
Making the most of your conference poster. Dr Krystyna Haq Graduate Education Officer Graduate Research School
Making the most of your conference poster Dr Krystyna Haq Graduate Education Officer Graduate Research School Why present a conference poster? Why present a conference poster? communicate a message (your
Introduction to Web Technologies
Introduction to Web Technologies Tara Murphy 17th February, 2011 The Internet CGI Web services HTML and CSS 2 The Internet is a network of networks ˆ The Internet is the descendant of ARPANET (Advanced
Links Getting Started with Widgets, Gadgets and Mobile Apps
Widgets, Gadgets, and Mobile Apps for Libraries: Tips, Code Samples, Explanations, and Downloads Michael Sauers Technology Innovation Librarian Nebraska Library Commission [email protected] Jason
