This is a tutorial on basic HTML. HTML is a markup language (a markup language is similar to a programming language) that is mainly used to create websites. It is also used to make widgets for Mac OSX. This tutorial is the first part of a series on how to make widgets. Eventually, I’m going to even explain how I made my Chuck Norris widget. You may also be interested in reading this tutorial if you use Windows or Linux, because HTML is used on every website that exists today. All of the screenshots are taken on a Mac, but it shouldn’t be too hard for Windows and Linux users to figure out what to do.
To begin, Mac users should download TextWrangler. TextWrangler is a simple text editor and can be used to write HTML files. You can download it from this link. If you’re using Windows, you can use the program Notepad which should have come with your computer. Linux users can use Gedit or any other text editor that comes with your distribution.
Open up which ever text editor you’re using and type in the following:
<html> <head> </head> <body> This is the body. <b>This is bolded because it is in between the b tags.</b> </body> </html>
Here’s a picture of what it should look like on a Mac.
Now save the file on your desktop as “example.html” (without the quotes obviously). The filename must end in “.html”. Right-click on the file and select Open With->Safari (or Internet Explorer, Firefox, Konqueror, or any other browser). Here’s how to do that on a Mac:
Regardless of your operating system, you should see the something like the picture below.
Now lets explain how that worked. Every HTML page begins with <html> and ends with </html>. In between <html> and </html> every HTML page has two sections, the “head” and the “body”. The head begins with <head> and ends with </head>, and the body begins with <body> and ends with </body>. Right now we’re going to ignore the head section and we’re going to talk about the body section.
Everything that we want to appear on the page goes inside the body section. There are many special tags that you can use in the body. For example, the <b> tag makes text bold. The <i> tag makes text italicized.
As you’ve probably noticed, most tags have a beginning tag and an end tag. The end tag is almost identical to the beginning tag, but it has a “/” after the “<”. For example, <b> is a beginning tag, and </b> is an end tag.
You can put one tag inside another tag like this:
This is regular text. <b> This is bolded text. <i>This is italicized and bolded text.</i> This is more text that is only bolded</b>
That will end up looking like this:
This is regular text. This is bolded text. This is italicized and bolded text. This is more text that is only bolded
In HTML you are not allowed to do the following:
<b>This is bolded.<i>This is bolded and italicized. </b> This is only italicized.</i>
If you have one tag inside another tag, the inner tag must end before the outer tag. The previous example can be written correctly like this:
<b>This is bolded. <i>This is bolded and italicized. </i></b> <i> This is only italicized.</i>
HTML ignores new lines. Look at the following code:
This is HTML co de
That code will look like this:
This is HTML co de
If you want to create line breaks, you have two options. The first is to use paragraphs. You can create a paragraph using the <p> (and </p>) tag. Here’s an example of creating two different paragraphs:
<p>This is a paragraph</p> <p>This is another paragraph</p>
That will look like this:
This is a paragraph
This is another paragraph
Another option is to use the <br /> tag. Note that this tag does not have a beginning and end tag. The two are combined into one tag. You can use <br /> like this:
This is a line. <br /> This is another line.
That will look like this:
This is a line.
This is another line
The following example will review everything that we’ve learnt up until now.
<html> <head> </head> <body> <p>This is the first paragraph in the body!</p> <p>This is the second paragraph! <b> This is bold <i>and this is bold and italicized</i> <br /> This is in the second paragraph but it is on a new line because we used the br tag!</p> <p>And this is yet another paragraph</p> </body> </html>
Copy and paste the above example into the html file that we created earlier. Save it and then switch to Safari (or whatever browser you’re using). Refresh the page and you should see something like this:
This is the first paragraph in the body!
This is the second paragraph! This is bold and this is bold and italicized
This is in the second paragraph but it is on a new line because we used the br tag!And this is a yet another paragraph
As we mentioned earlier, HTML ignores new lines. The previous example could have been written like this:
<html> <head> </head> <body><p>This is the first paragraph in the body!</p> <p>This is the second paragraph! <b> This is bold <i>and this is bold and italicized</i> <br />This is in the second paragraph but it is on a new line because we used the br tag!</p><p>And this is yet another paragraph</p></body> </html>
However, if you write your code like that, no one will be able to understand it. Its highly recommended to write the example the first way.
By now you know how to make a simple HTML page. In the next part of this tutorial, you’ll learn some more advanced HTML (such as how to display images) and how to make a basic widget. You can bookmark my rss feed to keep track of updates. Please note that I will be changing the website name in about a month.
No comment yet