Tutorials / HTML Tutorials / HTML

HTML

tutorial html

HTML tells a web browser how to display content. That content is often text, but it can also be things like links, images, videos, and sound files.

You write HTML by adding tags to your content, which tells the browser what to do with the content. For example, the <h1> tag tells the browser that something is a heading, the <p> tag tells the browser that text is a paragraph, and the <img> tag tells the browser to display an image.

You’ll learn more about HTML tags as you read through these tutorials, but first you’ll need to create an HTML file!

Text Editors

You can create an HTML file using any text editor. You can use whatever text editor came with your computer, like Notepad on Windows or TextEdit on Mac.

If you want additional features, you can download a text editor like Atom or Notepad++. But make sure you are not using a word processor like Microsoft Word, because it’ll try to add its own formatting to your text.

Don’t stress out too much about finding the exactly correct text editor. Use whatever came with your computer for now, and you can always try a few text editors out and see which one you like the best later.

Creating an HTML File

To get started, open up your text editor and type this HTML content into it:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Happy Coding</h1>
    <p>Hello world!</p>
  </body>
</html>

Then save that as a file that ends with the .html extension. Many people use index.html as a default, but you could call it my-amazing-webpage.html if you want.

Remember where you save your file. On your desktop is fine for now!

Viewing an HTML File

When you’re ready to publish your webpage, you’ll upload your HTML file to a server so that people can access it over the internet using a URL. But for now, open your HTML file in your web browser directly from wherever you saved it.

To do that, right-click the file, then go to Open with, and then choose your web browser to open the file.

Alternatively, you can type a file:// url into your browser to open the file. For example, if I saved my index.html file onto my desktop, I would type file:///C:/Users/Kevin/Desktop/index.html into my browser to open the file.

Either way, when you open the file, you should see a page that looks like this:

example webpage

Go back to your text editor and make a change, save it, and then refresh your browser. You should see your change in the browser.

Congratulations, you’re now an HTML programmer!

HTML Tags

You write HTML by adding tags to your content, which tells the browser what to do with the content. For example, the <h1> tag tells the browser that something is a heading, the <p> tag tells the browser that text is a paragraph, and the <img> tag tells the browser to display an image.

A tag has a name which goes between < > angle brackets, and contains content which goes between an opening and closing tag. A closing tag is a / forward slash followed by the tag name, both in angle brackets.

For example, the <h1> tag tells the browser that the content is a heading.

So this HTML:

<h1>Hello world!</h1>

Shows up like this in your browser:


Hello world!


You’ll learn more about HTML tags in the HTML tags tutorials.

Online Editors

You can keep working from your HTML file using your text editor, or you can use an online editor to experiment.

For these tutorials, I use CodePen to embed an editor directly in the page. You can edit the code in the CodePen editor and see your changes directly. Try it now:

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

The CodePen editor only contains the content that would be inside the <body> tag, so if you’re working from an HTML file, don’t forget your <head> tag!

Terminology

This tutorial used the term HTML quite a few times, but it still hasn’t defined what HTML actually means. You don’t really need to know all of this background information, but if you’re curious, here’s where the term HTML comes from.

Hypertext is text that can link to other text using hyperlinks. That might sound confusing, but you’ve seen this before, on any webpage that links to other webpages. (Like the one you’re reading right now!) There are also older examples of hypertext.

HTTP stands for Hypertext Transfer Protocol, which is a way for one computer to send hypertext to another computer. It’s how your browser asks for HTML from a specific URL, and the world wide web is built on top of HTTP.

Markup languages are ways to add formatting to text. For example, you might have seen inputs where text between asterisks like *this* is rendered as bold like this. That’s one kind of markup language.

Finally, HTML stands for Hypertext Markup Language, because it’s a way to write markup (using HTML tags) to tell your browser how to display hypertext.

Don’t worry, you don’t need to memorize any of that. But I think the history of this stuff is really interesting!

Homework

  • Edit your HTML file to include a few paragraphs describing who you are, why you’re learning about html, and what you hope to get out of these tutorials.
  • Look at some websites you use. What types of content do they contain? How do you think that content is marked up in html?

Comments and Questions

Happy Coding is a community of folks just like you learning about coding.
Do you have a comment or question? Post it here!