Learning how to code is fast becoming an essential skill. There’s a huge demand for it now so you can imagine how vital it is for future graduates to learn to code today.
Programming jobs are growing 12% faster than market average — and that number gets bigger every year. No wonder coding classes have jumped nearly 40% in recent years.
Whether you’re keeping an eye on the future, want to switch up your career options, or just want to try something new, mastering the basics of HTML is essential.
We’re going to show you how to use HTML to create a basic web page. Follow along and you’ll see how easy it is!
HTML stands for “HyperText Markup Language”. Markup languages are all about presentation of data.
With HTML, your browser knows how to display one font larger than another, or show readers a bulleted list. It’s not considered a programming or scripting language. (Those reinterpret and reorder data, but don’t focus on those right now.)
HTML is the way you tell your browser to display your website. You’ll see that it’s made up of basic building blocks that, once you get the hang of it, are easy to use.
Let’s have some fun building a basic website!
Let’s build the foundation of your basic website — the HTML file. Unlike a live site which is stored on a server, this one won’t be on the internet. Only your computer will see it.
First, open a text document. Windows users can use Notepad, Mac users can use TextEdit. The file extension should read “index.html” and not “.txt”.
To set it up as an HTML document type, type at the top of the page and press enter. Under that write and again press enter.
Those brackets, “<” and “>”, are the basic tools you’ll need for building tags Let’s talk about tags and start writing in HTML.
Tags, the information contained within the brackets, is what the browser reads to display your website data. They mark up the page, which is why HTML is a markup language.
They’re invisible on the page but affect how the data is displayed. Most tags, with a few exceptions, will have an opening and a closing tag.
Here’s how it works: there’s an opening tag that has the instruction to display the data. The next line is the data itself followed by a closing tag to end the action.
Let’s say you wanted to write “I love bananas” and wanted to bold the word banana. It would look like this in HTML:
I love b bananas /b
There’s opening and closing tags, just add brackets around the b and /b respectively. As you can see, the closing tag has a forward slash.
Your page will need to be set up with opening and closing tags, including the HTML section.
A basic website will usually be broken into two sections: the head and the body.
Remember that the top of your document has and? Now you’ll at the sections for the head and the body with opening and closing tags, and you will also close off the document.
Put the following commands between < and > tags to create your basic page set up:
Do you see how the open and close tags work? The first line sets the type of document it is. The second one means that anything written underneath it will be read as HTML.
Then we open and close the head and the body sections. Whatever is placed between these tags will become the head and body of the page respectively. The last line closes off the HTML section.
Whatever you put in the head section will show up at the top of the page. We’re going to introduce a few new tags plus meta tags too.
In the head section, make a title for your page by using title tags –and. The title shows up in the browser tag.
To make a header at the top of your page, you’ll need header tags. It should look like this:
One last thing to add inside the head section: meta tags. Here’s the two that you need and why you need them:
1) meta charset=”utf-8″ — This meta tag helps computers understand numbers, symbols, etc.
2) meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no” — This one is necessary to make sure your site displays properly on phones, tablets, and other formats.
Remember to put the tags between your brackets when adding them to your page.
Here’s where the fun begins. There are tons of tags to organize your website and customize it exactly to your tastes.
Here’s a few to play around with:
Each command should be within brackets. Try it out and see what you can make on your page!
Now let’s add images and links to your page. You’ll use the tag, the target tag, and “href” to reference a page.
It looks like this:
To add images, you’ll need the image tag, which is img, within brackets. Instead of href for a site, you’ll need a source (src) for an image. You can get that from an image on a website or add the image itself to your index files.
The image tag looks like this:
Practice adding links and images to your site with these tags.
With this basic HTML, you’re well on your way to building your own basic web page. Play around and have fun with it!
Looking for a reliable and affordable web host for your new site? Contact us today and we’ll get you set up in no time.
