Crambler is supported by its readers. If you purchase through a link on our site, we may earn a commission. Learn more
HTML, or HyperText Markup Language, is the basis behind every webpage. It is the language that makes up the structure of what your webpage will look like once it is interpreted by a browser. HTML is very easy to learn, and this article will help you start off on the right foot.
Webpages consist of a bunch of HTML elements that are denoted by tags. Tags are wrapped in angled brackets like so: <html>. The majority of your tags will have a closing tag. To make a tag a closing tag, it’s simple. You just have to add a forward slash right after the opening angled bracket. So, in order to close the tag I just mentioned, you would do the following: <html></html>.
However, some tags you use with HTML are self-closing tags meaning that you don’t need a closing tag paired with the opening tag. Rather, you can just put a forward slash right before the closing angled bracket of the opening tag in order to close it. For example, a line break tag is a self-closing tag and looks like this: <br />. Notice that it is one tag and has the forward slash right before the closing angled bracket. I didn’t have to write <br></br>. Besides, doing that would be incorrect anyway.
In fact, I’m using HTML right now to write this post. Notice how this paragraph of text started two lines below the paragraph above it? That’s because I used two line breaks after the paragraph above this to make this paragraph start two lines below like so: <br /><br />. Essentially, it is just like pressing the “Enter” button on your keyboard twice. Or, I could have just started a new paragraph using the <p> tag which stands for “paragraph”.
Anyway, enough of the rambling. Let’s get down to building your first webpage. First off, you’re going to need some sort of text editor. Notepad will do just fine, but I would highly suggest downloading Notepad++ which is basically Notepad on steroids and is a lot more fun with more options. You can download it here.
Once you have it downloaded, open it up and start a new page by going to File → New if there isn’t a new page up already. On the very first line, write the following:
<!DOCTYPE html>This line is a DOCTYPE declaration and should be the first line in every HTML page you write. When the browser is reading your HTML, what this line does is essentially just say “Hey! Browser! I’m just letting you know that I’m an HTML page and this page will be using HTML.” You don’t really need to understand it, just put that line first.
Next, let’s write our HTML tags as shown before.
<!DOCTYPE html>
<html>
</html>The HTML tags will wrap your entire HTML content. <html> should always be at the beginning of all of your content (right after the DOCTYPE declaration), and </html> should always be at the very end of all your content.
Now, go to File → Save As… When the dialog comes up to save your file, click on the “Save as type:” drop-down right underneath where you specify the file name. From this drop-down, you’ll notice there are a ton of file options you can save it as. Choose “Hyper Text Markup Language file (*.html; *.htm, *.shtml, *.shtm, *.xhtml)”. Next, give your file whatever name you’d like but make sure that you end your file name with .html. So, for example, say you want to name your file webpage. In the “File name:” box, you would type in webpage.html. Once you hit save, if you are using Notepad++ you’ll notice that your HTML tags become color-coded. Having color-coded tags is another nicety of Notepad++ and will help with readability of code.
**Note: If you are using basic Notepad, you won’t have the drop-down with all of those options. In this case, just choose “All files” from the “Save as type:” drop-down, and then name your file whatever-you-want.html. Once you save it with the .html extension, it will be recognized as a webpage when you open it up.
For this next part, just copy down what I have written below for your webpage code, and I will explain it after.
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage!</title>
</head>
<body>
<h1>My First Webpage Heading</h1>
<p>This is my first paragraph! All of your content goes between the 'body' tags.</p>
</body>
</html>Here is what the various sections that were added are for:
**Note: You can read more about any of the HTML tags listed below by going to this page and clicking on the appropriate tag.
<head></head>– The ‘head’ tags act as a container for all of your head elements. They go at top of your webpage much like the head on your body. The head will always contain ‘title’ tags, and may also include other info such as links to styling (CSS), scripts (Javascript), meta info, and other things.<title></title>– The ‘title’ tags are required to be inside of the ‘head’ tags. Whatever you put between these two tags is what shows up in the tab of your browser.<body></body>– Everything that goes between the ‘body’ tags defines the document’s body. These tags go underneath the ‘head’ tags. The body of your document can hold all sorts of content including text, images, tables, hyperlinks, lists, and much more. This is the main area that everyone sees whenever they visit a webpage.<h1></h1>– The ‘h1’ tags give your webpage a large heading. The ‘h’ stands for “heading” and the ‘1’ simply refers to the size of the heading. The ‘h1’ heading is the largest, ‘h2’ is slightly smaller, ‘h3’ even smaller, all the way to ‘h6’. Note: This is not to be confused with the header tag which is new to HTML 5.<p></p>– The ‘p’ tags simply just stand for “paragraph”. Each time you want to start a new paragraph, you can use a ‘p’ tag, and then you should always close your paragraph tag when your paragraph is done for good practice.
You’ll also notice that the ‘title’, ‘h1’, and ‘p’ tags are indented in. This is done just for readability. Any code you write should be indented appropriately in order to help the person that is looking at the code read it easier.
After you have all that code typed out, be sure to save your file. Then, if you are in Notepad++ go up to Run → Launch in Firefox (or whatever browser you want to choose). If you are using basic Notepad, go out and find where your file is stored, and then just double-click it. Then voila! You should see your first webpage show up in your browser as shown below. You did it!
If you aren’t seeing it, or something is wrong, feel free to leave a comment. Or, if you have any feedback/suggestions to improve the article, feel free to let me know as well!
One Comment