What You’ll Need to Make Your First HTML Page

Have you decided to code HTML and don’t know where to start? Then you’ve come to the right place. This tutorial is designed for people who have never coded an HTML page before and are looking to learn.

First things first, what tools will you need to build an HTML page?

  • A text editor such as NotePad or TextEdit to write the code.
  • A web browser such as Internet Explorer, Safari or Firefox to view the website.

Ready to get started? Great!

Building Your First Web Page

Let’s open a text editor and add the following line of code to it:

Hello World!

Now, save that file to your desktop as text.html and open it in a web browser. Congratulations! You’ve created your very first HTML webpage. Simple, right? HTML isn’t designed to be complicated, it’s designed to be a simple publishing tool. An HTML document is the same as a text document, only an HTML document allows you to add a special language called Mark Up. This language consists of tags that we wrap around the text to make it do special things.

Your First HTML Tag

Let’s reopen our first HTML document and add a special tag to the page. It’s called a strong tag and it’s designed to make words appear in bold. There are two main types of tags in HTML. One is a formatting tag (for changing the document) and the other is a structural tag which defines the document. A formatting tag looks like this:

<strong>Hello World!</strong>

Note that each part of the tag starts with a less than symbol < and ends with a greater than symbol > and that there are two parts, an opening <> and a close, which also includes a backslash /. This is important because all tags need to be opened and closed.

If you save your file, you’ll see that your text is now bold. Some HTML tags have multiple variations. <strong> can be replaced with <b>. This is because early HTML publishers used the <b> tag for bold but later found some cultures didn’t use bold text, instead <strong> is more universally understood.

Another common formatting tag is called the emphasis tag. It’s used most commonly to add italics to a page and is added to a document using either the <em> or <i> tag. As with the <strong> tag it must be both opened and closed:

<strong>Hello <em>World</em>!</strong>

You can follow the rest of this tutorial series as I release them over the next two weeks. They include:

If you’d like to be notified when I post a new article, you can sign-up for my RSS feed or follow me on Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>