HTML Basics

I Introduction to HTML

i. Why learn HTML? 1/14

<!DOCTYPE html>
<strong>Hello Guys!</strong>

ii. HTML & CSS 2/14

<!DOCTYPE html>
<html>Hello Friend
</html>

iii. Basic Terminology 3/14

<!DOCTYPE HTML>
<html>
Hey!</html>

iv. Make the Head 4/14

<!DOCTYPE html>
<html>
<head><title>My Page</title></head>
</html>

v. Paragraphs in the Body 5/14

<!DOCTYPE html>
<html>
<head><title>My Page</title></head>
<body><p>This is easy</p>
<p>Isn’t it?</p>
</body>
</html>

II. Body Elements

i. Paragraphs and headings 6/14

<!DOCTYPE html>
<html>
<head>
<title>
Headings & Paragraphs
</title>
</head>
<body>
<h1> This is just the beginning!</h1>
<p> Let’s be friends.</p>
<p> Coding is fun right?</p>
</body>
</html>

ii. More about headings 7/14

<!DOCTYPE html>
<html>
<head>
<title>
Headings & Paragraphs
</title>
</head>
<body>
<h1> This is just the beginning!</h1>
<p> Let’s be friends.</p>
<h3> Let’s learn together</h3>
<p> Coding is fun right?</p>
<h5> I’m enjoying it</h5>
<p>See you in the next exercise.</p>
</body>
</html>

iii. Using every heading 8/14

<!DOCTYPE html>
<html>
<head>
<title>
Headings & Paragraphs
</title>
</head>
<body>
<h1> This is just the beginning!</h1>
<p> Let’s be friends.</p>
<h2> Yes, friends!</h2>
<p> Friendship is beautiful!</p>
<h3> Let’s learn together</h3>
<p> A new thing everyday</p>
<h4> Coding is fun right?</h4>
<p> Yes, it is.</p>
<h5>So many tags!</h5>
<p>Six headings, six paragraphs.</p>
<h6> Next</h6>
<p> See you in the next excercise</p>
</body>
</html>

III Adding images to your site!

i. Mid-lesson breather 9/14

<!DOCTYPE html>
<html>
<head>
<title>
My website
</title>
</head>
<body>
<h3> Let’s learn together</h3>
<p> A new thing everyday</p>
<p> Just like HTML basics.</p>
<p> Dancing.</p>

</body>
</html>

ii. You’re going places 10/14

<!DOCTYPE html>
<html>
<head>
<title>Coding guru!</title>
</head>
<body>
<a href = http://www.codecademy.com&gt; Here’s where I learnt coding from.</a>
</body>
</html>

iii. Adding images 11/14

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

<img src=”http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg&#8221; />

<img src=”http://lazowska.cs.washington.edu/MS/DS.wordle.jpg&#8221; />
</body>
</html>

Note: In this particular exercise there is an error. To pass this, make sure while closing the img tag you add space between .jpg” and />. Otherwise this space isn’t required.

iv. Click that image 12/14

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src=”http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg&#8221; />

<a href=”http://www.codecademy.com”><img src=”http://lazowska.cs.washington.edu/MS/DS.wordle.jpg”/></a&gt;
</body>
</html>

v. Images and links 13/14

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

<img src=”http://lazowska.cs.washington.edu/MS/DS.wordle.jpg”/&gt;
<a href=”http://www.codecademy.com”><img src=”http://wahlnetwork.com/wn/wp-content/uploads/2013/12/codecademy.png”/></a&gt;
<a href=”http://www.wordpress.com”>Link to blogs</a>
</body>
</html>

vi. Congratulations! 14/14

Save and Submit!

Well Done!

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s