Introduction to HTML – Class 3

(please wait until class to go through this page!)

In today’s lesson, we will begin to cover the basics of building websites. The first most important building block of a website is the HTML language, which allows us to give the browser instructions to render our website.

Exercise 1: Add some boxes (div tags)

In the below code editor add some div tags, and see your resulting boxes!

See the Pen MakeSomeBoxes by Angel Grablev (@agrublev) on CodePen.

Exercise 2: Add an image

Now let’s utilize the self closing tag for adding an image.

Add the img tag and then add the src attribute with the value “http://x.co/myimg”

See the Pen MakeSomeBoxes by Angel Grablev (@agrublev) on CodePen.

Exercise 3: My webpage

Let’s build a simple website by simply adding a number of div tags with the appropriate class names.

See the Pen MyWebpage by Angel Grablev (@agrublev) on CodePen.

The final result should look like this:

See the Pen MyWebpageFinished by Angel Grablev (@agrublev) on CodePen.

Please sign up for repl by going to this link http://x.co/joinrepl 

There should be one assignment named “Simple Page for yourself” which is due next Tuesday!