HTMLtutorial html basic
- Creating an HTML File
- Opening an HTML File
- HTML Tags
- Next: Let’s learn about more html tags!
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:
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 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:
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.htmlfile 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?
Next: Let’s learn about more html tags!
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!