HTML Basics II

Lesson 01/16 – Introduction

 
<!DOCTYPE html>
<html>
	<head>
		<title>Titolo</title>
	</head>
	<body>
		<p>Paragrafo</p>
	</body>
</html>

Lesson 02/16 – Indentation is your friend

 
<!DOCTYPE html>
<html>
	<head>
		<title>
    	 titolo   
		</title>
	</head>
	<body>
	</body>
</html>

Lesson 03/16 – Ordered lists

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

Lesson 04/16 – One more ordered list

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

Lesson 05/16 – Unordered lists

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

Lesson 06/16 – Lists inside a list

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

Lesson 07/16 – Making comments

 
<!-- Make me into a comment.-->

<p>But leave me visible to the user!</p>

<!-- comment -->

Lesson 08/16 – Font size

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

Lesson 09/16 – Font color

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

Lesson 10/16 – Font family

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

Lesson 11/16 – Recap

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

Lesson 12/16 – Background color

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

Lesson 13/16 – Aligning the text

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

Lesson 14/16 – Strong words!

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

Lesson 15/16 – Emphasize words!

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

Lesson 16/16 – Summary

 
<!DOCTYPE html>
<html>
	<head>
		<title></title>
	</head>
	<body></body>
</html>