Create a Webpage in 5 minutes

Learn the basics of HTML for your first webpage in 5 minutes

Read the article or watch the video!

Let’s create a webpage in 5 minutes. If you’ve never coded before, don’t worry! This goes step-by-step to ensure you won’t get lost!

Before we get started, we need a text-editor. I’m using Sublime, which you can download at sublimetext.com, but others include TextEdit (with plain text) and Atom.

Now, we’ll create an index.html file. Notice the extension — it’s html because we are writing html. HTML stands for Hyper Text Markup Language and it’s something we can use to code up a quick webpage. With our index.html file open in our text editor, let’s write some boilerplate code.

This is code we have to write to define this file as a HTML file. Nearly everything in HTML is written with tags (those right and left arrow brackets). Why is this? Well it’s just the way this language happens to be written. For HTML tags, we usually have an opening tag and a closing tag, but this is not necessarily true for all tags. Now, let’s write some more code…

We just added a head tag and a body tag. Here, the head holds the metadata of the application and the body holds our actual content. Now let’s see what this code does. To do this, we left-click on our file and open the file with a browser (instead of a text-editor).

This should pull up an empty screen. Why is that? It’s because our body tag doesn’t have anything in it! We need to add some real content. We can add a header tag with the text “Hello World”.

Here, the h1 tag is a header tag. We can also create h2, h3, all the way up to h6 tags. The only difference between the headers is size. The h1 tag creates the biggest header and the h6 tag creates the smallest header.

If we open the file with a browser, then we should have a webpage with the text “Hello World”. If your page doesn’t have anything on it, make sure you have saved your file after adding the h1 tag because the browser will only show what has been saved.

Now, we’ll add a quick h3 tag with the text “blue”and see what happens.

And we see what we were expecting. The header with the text “blue” is smaller than the header with the text “Hello World”.

So we have headers, what about other content? Well we can add some paragraph text with a p tag (also called a p element).

We can also add an image with an image tag. Below, src is an attribute of the image tag and it’s where we specify the source of the image. Now, I don’t know about you, but I love coffee so I’m using a coffee image, but feel free to add whatever picture you’d like.

And we see an image in our webpage!

Great! We have some headers, paragraph text, and an image. Now, we might want to add some extra space between the image and paragraph text so we can write some br tags to do this.

Opening this up in the browser, we see there’s now quite a bit of space between the paragraph and the image. Now, this webpage isn’t the prettiest. Can we make it prettier? YES! With CSS. HTML defines the core content of a webpage whereas CSS allows us to add design. Next week’s post will be all about CSS! See you then.

Things to Remember:

(inside index.html)
<!-- Headers-->
<h1>Header 1 Text</h1>
<h2>Header 2 Text</h2> 
<h3>Header 3 Text</h3> 
<h4>Header 4 Text</h4> 
<h5>Header 5 Text</h5> 
<h6>Header 6 Text</h6>
<!-- Paragraphs -->
<p>Paragraph Text</p>
<!-- Images -->
<img src = "http:url"/>
<!-- Break -->
<br>

Plus a Little Extra:

<!-- Comments -->
<!-- (revealed only to those looking at the code) -->
<!-- Links -->
<a href="http://url">Linked Text</a>
<!-- Ordered Lists -->
<ul>
	<li>First item in ordered list</li>
	<li>Second item in ordered list</li>
</ul>
<!-- Unordered Lists -->
<ol>
	<li>First item in unordered list</li>
	<li>Second item in unordered list</li>
</ol>

Code from this blog post