Alright ladies, let’s talk about HTML! HTML is an acronym for HyperText Markup Language, the computer language and basic building blocks of all webpages. It was created by Tim Berners-Lee at CERN (yes, the infamous European Laboratory for Particle Physics in Geneva, Switzerland) in the late 1980s and early 1990s and it standardized websites so that all computer platforms running various operating systems can read websites using a web browser. In essence, web browsers such as Internet Explorer, Firefox, or Chrome are just HTML translators. Web browsers download information using HTTP, HyperText Transfer Protocol and translates it into beautiful, functional webpages like the one you’re seeing here!
I hope I didn’t scare you away with all this geeky talk, HTML was actually created to be simple. So even if you don’t have that computer science degree, you can start making websites in just minutes. Let’s get started, shall we?
HTML tags
HTML is just a way of marking text to give certain words, phrases, or paragraphs a certain property. The way I see it, it’s like highlighting text in a book. Let’s say you want to highlight a certain sentence because you think it is important, you would have a starting point and an ending point. Well, HTML works in the same manner. Instead of using a highlighter, you mark the text you want to emphasize using HTML tags. An example of HTML tags is “<html>” and usually come in pairs, a starting tag and an ending tag. There are singular, “empty” tags as well.
For tag pairs, the starting tag would look like <html>. The ending tag would look like </html>. Notice the ending tag just has an additional “/” inside the angle brackets in front of the element. If you start a paired tag, you must end it or the website will look funny.
Singular tags, such as the imagine tag <img> does not have an ending tag. That is, </img>does not exist.
Making a HTML document
It’s easy to make a HTML document, all you need is either notepad (in Windows) or TextEdit (in Macs). When you are done adding HTML tags to a document, save the file using the .html extension. Here is a sample a .txt file and .html file with all the tags in this article already inserted.
*Make sure to right click on the links and use “save file as”. Once downloaded, the .txt file should automatically open in your Notepad or TextEdit. The .html file should open in your web browser. If the .html does not open in your web browser, try dragging the file into an already opened web browser.
Style tags
These are style tags and is used to add style to text.
- Both <b> </b> and <strong> </strong> will make text between these tags bold. There is really no difference between the two.
- Both <i> </i> and <em> </em> will make text between these tags italicized. Em stands for emphasis so I generally like to use the <em> tags because it adds SEO significance to the text.
- <u> </u> will make text between these tags underlined.
- <sup> </sup> is for super scripts
- <sub> </sub> is for sub scripts
Heading tags
These are heading tags. They are used as headings to paragraphs or subjects within an article or webpage. Heading tags are ordered from 1 to 6 depending on importance. That is, the text between <h1> </h1> is the most important and usually has the largest font. Text in between <h6> </h6> is still important because it is a heading, however, not as important as other headings with a lower number value.
-
This is what <h1> tags look like.
-
This is what <h2> tags look like.
-
This is what <h3> tags look like.
-
This is what <h4> tags look like.
-
This is what <h5> tags look like.
-
This is what <h6> tags look like.
Formatting tags
These are used to format an article.
- <p> </p> designate a paragraph.
- <blockquote> </blockquote> designate a block of quote.
- <br> is a singular tag used to add a break or new line, it’s like the “enter” button.
- <hr> is also a singular tag used to create a horizontal line.
If I really had a block quote, it would look like this. If I really had a block quote, it would look like this. If I really had a block quote, it would look like this. If I really had a block quote, it would look like this.
Making ordered and unordered lists
There are two types of lists in HTML, ordered numeric lists using <ol> </ol> tags (ol stands for ordered lists) and unordered bulleted lists using <ul> </ul> tags (ul stands for unordered lists). Additional <li> </li> tags are nested inside to separate each item within these lists.
Here is an example of how an ordered list would look like in HTML:
<ol>
<li>This is list item #1</li>
<li>This is list item #2</li>
<li>This is list item #3</li>
</ol>
This is how the above ordered list looks like after being translated by your web browser:
- This is list item #1
- This is list item #2
- This is list item #3
Here is an example of how an unordered list would look like in HTML:
<ul>
<li>This is list item #1</li>
<li>This is list item #2</li>
<li>This is list item #3</li>
</ul>
This is how the above unordered list looks like after being translated by your web browser:
- This is list item #1
- This is list item #2
- This is list item #3
Isn’t it easy? The better you get at HTML, the more fun it gets!
Adding an image
The image tag <img> is a singular tag. To embed an image into your documents, all you need is to show the web browsers the location of the image file. If the picture is stored on your computer, you would first need to upload it onto your web server, this is where all your website files are hosted. The easiest way of placing files on a web server is via a FTP program. I will show you how to upload files to your web server in another article.
For the purpose of this article, I will just get you familiar with the idea of how images are embedded.
To embed an image, we’ll be using the <img> tag adding the source condition (src=) and the URL or link of the image inside quotations inside the angle brackets. A completed image tag looks like this:
<img src=”http://www.website.com/location/of/image.jpg”>
I found an image of a polar bear from wikipedia.com with the following URL:
http://upload.wikimedia.org/wikipedia/commons/0/09/Polar_Bear_-_Alaska.jpg
Putting everything together, the image tag to place this picture inside my article would look like this:
<img src=”http://upload.wikimedia.org/wikipedia/commons/0/09/Polar_Bear_-_Alaska.jpg”>
Linking to another website
Now that you’ve mastered embedding images, the <a> </a> tags should be a breeze! The <a> tags are used to link the text in between to another webpage. This is done using similar syntax compared to embedding pictures, however, the actual elements are different. I’m going to show you how the <a> tags work below, tell me if you understand it.
<a href=”http://www.website.com/the-link.html”>Click Here</a>
You got it, the above html tells me that “Click Here” is a link and when clicked, the web browser will bring you to http://www.website.com/the-link.html. Let’s put this into practice by using “Click Here” to visit my favorite polar bear site. Below is what the html should look like.
<a href=”http://en.wikipedia.org/wiki/Polar_bear”>Click Here</a>
Here’s the live version, go ahead, click here.
The basic website – putting it all together
My goodness, I hope you still have a little coffee left in the cup because it’s time to make your very first webpage! To do so, all we need is to add the html tags, <html> </html>, surrounding the entire document as well as the body tags, <body> </body>.
I’ve added these tags to the above sample .txt file and .html file.
This is just an introductory article about HTML and there is still much to learn. I will be writing more about HTML in the future. However, if you’re itching to learn more, visit wc3schools.com.
