Lesson 01/16 – Introduction
[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<title>Titolo</title>
</head>
<body>
<p>Paragrafo</p>
</body>
</html>
[/code]
Lesson 02/16 – Indentation is your friend
[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<title>
titolo
</title>
</head>
<body>
</body>
</html>
[/code]
Lesson 03/16 – Ordered lists
[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<title>Lists</title>
</head>
<body>
<h1>List of my favorite things</h1>
<ol>
<li>raindrops on roses</li>
<li>whiskas on kittens</li>
<li>call of duty: modern warfare</li>
</ol>
<h2>List of things I find OK</h2>
<ol>
<li>1st item</li>
<li>2nd item</li>
<li>3rd item</li>
</ol>
</body>
</html>
[/code]
Lesson 04/16 – One more ordered list
[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<h3>Most annoying TV celebrities</h3>
<ol>
<li>1st item</li>
<li>2nd item</li>
<li>3rd item</li>
</ol>
<h2>Top 3 things I can do for Mother’s Day'</h2>
<ol>
<li>1st item</li>
<li>2nd item</li>
<li>3rd item</li>
</ol>
</body>
</html>
[/code]
Lesson 05/16 – Unordered lists
[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<title>Unordered Lists</title>
</head>
<body>
<h1>Some random thoughts</h1>
<p>Paragraph describing unordered list</p>
<ul>
<li>1st item</li>
<li>2nd item</li>
<li>3rd item</li>
<li>4th item</li>
</ul>
</body>
</html>
[/code]
Lesson 06/16 – Lists inside a list
[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<title>Nested lists</title>
</head>
<body>
<ol>
<li>Dad’s interests
<ul>
<li>football</li>
<li>knitting</li>
</ul>
</li>
<li>Mom’s interests
<ul>
<li>hating football</li>
<li>skydiving</li>
</ul>
</li>
</ol>
<ul>
<li>Favorite Boys’ Names’
<ol>
<li>1st item</li>
<li>2nd item</li>
<li>3rd item</li>
</ol>
</li>
<li>Favorite Girls’ Names’
<ol>
<li>1st item</li>
<li>2nd item</li>
<li>3rd item</li>
</ol>
</li>
</ul>
</body>
</html>
[/code]
Lesson 07/16 – Making comments
[code lang=”html”]
<!– Make me into a comment.–>
<p>But leave me visible to the user!</p>
<!– comment –>
[/code]
Lesson 08/16 – Font size
[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<title>First font size change</title>
</head>
<body>
<p style = "font-size: 8px">Some text for you to make tiny! </p>
<p style = "font-size: 12px">Some text for you to make normal size!</p>
<p style = "font-size: 44px">Some text for you to make super big!</p>
</body>
</html>
[/code]
Lesson 09/16 – Font color
[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<title>Changing the colors!</title>
</head>
<body>
<h1 style="color:green; font-size:16px">Big Heading</h1>
<p style="color:violet">A giant bear and a little duck were friends.</p>
<p style="color:red; font-size:8px">But the bear got hungry and ate the duck.</p>
</body>
</html>
[/code]
Lesson 10/16 – Font family
[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<title>Loving the font changes</title>
</head>
<body>
<h1>Big title</h1>
<ol>
<li style="font-size:16px; font-family:Garamond">This item is big Garamond.</li>
<li style="font-size:12px; font-family:Bodoni">This item is medium Bodoni.</li>
<li style="font-size:8px; font-family:Futura">This item is small Futura</li>
</ol>
</body>
</html>
[/code]
Lesson 11/16 – Recap
[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<title>Putting it all together</title>
</head>
<body>
<p style="font-size:20px; color:blue; font-family:Garamond">A truly spectacular paragraph!</p>
</body>
</html>
[/code]
Lesson 12/16 – Background color
[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<title>Sexy background color!</title>
</head>
<body style="background-color:brown">
<h3>Favorite Football Teams</h3>
<ol style="background-color:yellow">
<li>The Hawthorn Football Club</li>
<li>San Franscisco 49ers</li>
<li>Barcelona FC</li>
</ol>
</body>
</html>
[/code]
Lesson 13/16 – Aligning the text
[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<title>Sexy background color!</title>
</head>
<body>
<h3 style="text-align:center">Favorite Football Teams</h3>
<ol>
<li style="text-align:left">The Hawthorn Football Club</li>
<li style="text-align:center">San Franscisco 49ers</li>
<li style="text-align:right">Barcelona FC</li>
</ol>
</body>
</html>
[/code]
Lesson 14/16 – Strong words!
[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<title>Viva La Revolution!</title>
</head>
<body>
<p>Do you hear the people <strong>sing</strong>?</p>
<p>No I don’t. I’m <strong>too</strong> busy eating cake.</p>
</body>
</html>
[/code]
Lesson 15/16 – Emphasize words!
[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<title>Some nice practice</title>
</head>
<body>
<p>Hey, don’t say <em>that</em>!</p>
<p>I am <em>so</em> tired.</p>
</body>
</html>
[/code]
Lesson 16/16 – Summary
[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body></body>
</html>
[/code]