tutorials / html / html

HTML

tutorial html basic

Now you know that your web browser is a client that sends requests to a server, which is another computer that serves files like a waiter serves food. The client then renders that file and gives you the display you’re looking at right now.

HTML stands for hypertext markup language, which is a way for programmers to write files that tell a web browser how to display content.

Creating an HTML File

You can create an HTML file using any basic text editor. I use jEdit (in fact I’m using jEdit to type this!), but there are a ton of other options. You could even use Notepad or whatever basic text editor came with your computer. You just don’t want to use a word processor like Microsoft Word, just because it’ll try to add its own formatting to your text.

To get started, open up your basic text editor and type this basic 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 named index.html. You can save it wherever you want.

Opening an HTML File

Eventually you’ll upload your HTML files to a server so that you can access them over the internet, but for now let’s just open it locally.

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.

Anyway, 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 an HTML programmer!

HTML Tags

HTML is a markup language which means that it contans not just text, but information about how that text should be displayed. HTML uses tags to define that markup. In other words, tags are a way to mark content so the browser knows what that content is.

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 <p> tag tells the client that the content is a paragraph. Any content between an opening <p> tag and a closing </p> tag will be rendered as a paragraph. So this:

<p>Hello world!</p><p>I am writing html!</p>

Is rendered as this:


Hello world!

I am writing html!


Notice that the content is rendered as two separate lines, even though we only entered it as one line. That’s because we’re using two separate <p> tags, and the content in each tag is rendered as a paragraph. By default, a paragraph is rendered as a block of text that gets separated by other blocks of text with a blank space between them. In other words, our markup (the <p> tags) tells the client (your web browser) how to render the content (as two paragraphs).

You can keep working from your index.html file, or you can use the online editor to play around. Note that the online editor only contains the content that would be inside the <body> tag, so make sure to keep everything else if you copy and paste it into your index.html file.

Code Editor

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

Homework

Next: Let’s learn about more html tags!