Lessons:

  • 1-Introduction to HTML
  • 2. Basic Structure of a Web Page
  • 3. HTML Head Tags
  • 4. HTML Body Tag
  • 5. HTML Paragraph Spacing
  • 6. HTML Line Breaks
  • 7. HTML Non-Breaking Space
  • 8. HTML Header Tags
  • 9. HTML Text Formatting and Decoration
  • 10. HTML Inline Text Formatting
  • 11. HTML Unordered Lists
  • 12. HTML Ordered Lists
  • 13. HTML Image Insertion
  • 16. HTML Link Creation

HTML Code:


<!DOCTYPE html>
<html>
<head>
    <title> My First Web Page </title>
    <meta name="description" content="Page Description Here"/>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <style type="text/css">
        Body {
            color: red;
        }

    </style>

    <script>
        function myFunction() {
            var x = document.getElementById("fname");
            x.value = x.value.toUpperCase();
        }
    </script>
</head>

<body>
	<p>This is a Sample HTML Document.</p>
This Javascript function will capitalize my name:
<p>Enter your name: 
	<input type="text" id="fname" onchange="myFunction()"></p>
	<p>This is Line 1. <br> This is Line 2. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; This is Line 3.</p>
	<h1> Header 1</h1>
	<h2> Header 2</h2>
	<h3> Header 3</h3>
	<h4><font face="arial" size="22" color="blue"> Header 4</font></h4>
	<p> <strong>Bold Text</strong><br>
	    <em> Italic Text</em><br>
		<u> Underlined Text</u><br>
		<strike>Strike Text</strike><br>
		<strong><em><u>Bold, Italix and Underlined Text</u></em></strong>
	</p>
	<h3> My Favorite Sports</h3>
	<ul>
		<li>Basketball</li>
		<li>Soccer</li>
		<li>Hockey</li>
		<li>Football</li>
		
	</ul>
	<h3>My Favorite Vacations</h3>
	<ol>
		<li>Miami, FL</li>
		<li>New York, NY</li>
		<li>Las Vegas, NV</li>
		<li>Houston, TX</li>
	</ol>
<h1>Vacation Pictures</h1>
<p>
	<a href="http://www.miami.com"><img src="FL.jpg" width="333" height="250"></a>
	<a href="http://www.lasvegas.com"><img src="LV.jpg" width="375" height="250"></a>
	<a href="http://www.newyork.com"><img src="NY.jpg" width="374" height="250"></a>
	<a href="http://www.texas.com"><img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Houston_night.jpg" width="389" height="250"></a>
</p>
<p>
	<a href="http://www.miami.com" target="_">Florida.com</a><br>
	<a href="http://www.lasvegas.com" target="_">Lasvegas.com</a><br>
	<a href="http://www.newyork.com" target="_">NewYork.com</a><br>
	<a href="http://www.texas.com" target="_">Texas.com</a><br>
	</p>

</body>

</html>

Compiled:

Link:

Basics.html