What is HTML?
HTML stands for Hypertext Markup Language. HTML is not a language in the traditional sense, but in the sense that it is a tool made of keywords and commands that programmers use to communicate with computers. HTML is used by web designers to create websites like Facebook, Twitter, and Hubpages. These examples also use various other tools, but for someone first learning about designing websites, HTML is the first tool that they should learn how to use.
In order to write HTML, you will need a text editor. A text editor is different from programs like Word that are meant for writing books or essays. Programs like word have helpful tools like paragraph styling and auto-caps, but those tools are not helpful for writing HTML, in fact, they can make it very difficult to do so. Never use Word to write HTML. On the other hand, text editors often have tools designed specifically for programming. There are many text editors out there, but I will focus on the three that I have used the most.
Notepad and TextEdit
Notepad, or TextEdit if you use a mac, is probably the most basic a text editor gets, and it is very easy to create and edit an HTML file with either of these programs. The downside is that neither Notepad or TextEdit offer any helpful tools writing HTML, but if you just want to write something quick and simple, then either of these would be sufficient to get the job done.
Brackets is a good choice for beginners. It is only slightly more difficult to learn how to use than Notepad/TextEdit, and it has the added advantage that it was made HTML and CSS in mind. Brackets includes many tools that are helpful when writing HTML such as auto-complete suggestions, current line highlighter, live preview, and bracket highlighter. If you are unsure of what these tools are or do, that is okay, just know that they will be very helpful for you in the future if you choose to continue using HTML. For anyone working on simple HTML and CSS, this is the editor that I would recommend.
Atom is a very customizable text editor, it has lots of helpful tools, and it can be used for many programming languages besides HTML. Unfortunately, its hugely customizable nature can be overwhelming if you are new to programming. I used Atom for many projects myself, and I really enjoy it as an editor, but if you are new to programming or just doing basic HTML and CSS, then I would recommend one of the other two editors. That being said, I would still encourage you to give Atom a try after you've become more familiar with programming or intend to do a more advanced project.
Text Editor Comparision
|Program||Learning Curve||Helpful Tools|
Notepad / TextEdit
Helpful Tools for HTML
Can be Overwhelming
Lots of Advanced Tools
Text Editor Links
- Notepad / TextEdit - Your computer should already have one of these programs.
Create an HTML File
Once you have chosen an editor, open it up and create a new file, and save it as index.html (all lowercase). The ".html" tell internet browsers that this file contains HTML, and the name "index" tells the browsers that this will be your websites default home page. You can actually open this file in your web browser now and view it, but it would just be an empty page, so let's add some text to it! Go ahead and copy and paste the text below into your index.html file.
View Your File in a Browser
I will explain what each line means, but first let's see what your website looks like. Go ahead and save your file again. To open your file in a browser, right click on the file and select "open with", then select your browser (see image below.)
Your browser should open up to a page similar to the image below.
Congratulations, you have created a simple website! It may not look like much now, but all websites start off small, and with a little more time and effort we can make it into something much prettier.
Explaining the Code
Now, I wouldn't be a very good teacher if I didn't explain the code we just used, so let's go ahead and jump right into it. Open you file again, and we'll go over the code line by line. If your file opens in a browser when you try clicking it, right-click the file and select "open with" again, but this time select your editor instead of a browser.
This first line simply tells the browser what programming language the file is in.
These two lines are called opening and closing tags. An opening tag tells the browser when a specific section of your website will begin, and the closing tags tells where it will end. It is traditional to indent any lines placed between matching tags so that your text is easier to understand. pressing tab on your keyboard will create an indent on the currently selected line. These specific tags are called HTML tags, and they tell the browser that everything between them is HTML. The "lang="en" part is so the browser knows to expect the inside text to be in English.
These are the head tags. Text placed between these tags will not appear on your website. This section is where the code goes that tells the browser what the website's title is, where to get styling tools like special fonts, and where the tab icon for your website is stored. For this project, we will leave this section empty.
Anything that you want to appear on your website you will place between these body tags. This will be the "body" of your website.
This is plain text. any plain text placed inside your body tags will appear on the website. Some special character like "&" will not appear on your website, but they are possible to show using character references. For example, "Tom & Jerry" will look like "Tom & Jerry" on your website.
All together, these tools can be used to create a simple website.
Thank You for Reading
Thank you for reading this article. If you have any questions, please leave a comment below. I am more than happy to help with any issues you may have with this project or with HTML in general. In addition, here are some links to some of the more helpful websites for HTML.
- HTML Tutorial
- Learn HTML - Free Interactive HTML Tutorial
LearnHTML.org is a free interactive HTML tutorial for people who want to learn HTML, fast.
- Free tutorials on HTML, CSS and PHP - Build your own websiteenhomepage - HTML.net
Free tutorials on HTML, CSS and PHP - Build your own website - Free tutorials on HTML, CSS and PHP - Build your own website
Help Me Get a Better Idea of Where my Readers Stand With HTML
This article is accurate and true to the best of the author’s knowledge. Content is for informational or entertainment purposes only and does not substitute for personal counsel or professional advice in business, financial, legal, or technical matters.
angel on October 24, 2018:
thanks for your help us