HTML Guide
Lesson 1: HTML Tags
So you want to create a website?
HTML is a markup language, a set of "tags" which you put around content to give it different meanings on the page. All websites are written in HTML, even though there exist some "easy" site builder programs that let you design a site in a fancier interface and then generate the HTML for you. To have full control over the look and feel of your site, it is just about necessary to write the HTML by hand, and it is the first thing any potential webmaster ought to learn.
Thankfully, HTML isn't hard and does not require any special programs or equipment - just open up Notepad or a similar plain text editor, and you can start creating your own website.
As the first lines of the document, you should copy this:
<!DOCTYPE html>
This is called a doctype and it's basically for telling the browser what kind of HTML you're writing. This one is the HTML5 doctype, which is what should more or less always be used today - this guide is a little old and technically predates it, but everything it talks about will work with the HTML5 doctype.
Now, in the line below that, write <html>. This basically tells the browser that you're starting your HTML. This is called a tag, more specifically an opening tag. Tags start with < and end with >. A closing tag looks the same as an opening tag except that it has a slash after the <; for example, the closing tag you would use for <html> is </html>. (Don't put that in yet, though; you're not done writing your page.) There are also some opening tags that simply insert something exactly where you put them, such as a line break or an image; then there is simply no closing tag. The section of the page defined by the opening and closing tags is called an element; everything between the <html> opening and closing tags will for example be the html element.
In the next line after the <html> tag, write <head>. See the bar at the very top of your window where it should right now say "HTML guide - HTML tags" and some more stuff? Just think of that as the head of the page and imagine all the stuff you'll put in the head element of your HTML pages is up there. (It won't really be there, but just pretend it is; the main point is that it doesn't appear on what you ordinarily think of as being the page.)
Now, how did I make it say "HTML guide" and all that? Go to the next line and type <title>. Now, put your page's title - it doesn't really matter what it is. Just "This is a web page" or something. Then close the title element. In case you didn't get what I was saying earlier about opening and closing tags and elements, that means you're supposed to type </title>. I won't always be telling you exactly how to make the closing tag; you should be able to figure that out by yourself from now on. I'll just assume you get the drift.
Next, you can make a new line and close the head element with a closing tag (</head>); we won't be putting more into that for now.
Now, we're going to start putting something into the viewport (where the site itself should currently be located in your browser). This is called the page body and is made with a body element. Make an opening tag for it - which is, if you've been paying proper attention, <body>. Go a few lines down and close the body element, and then finally in the line below that, close the html element - i.e.
</body> </html>
Between the opening and closing tags for the body - that is, inside the body element - you will put the webpage itself and all of its content. Save this document as something with the .htm extension (page.htm, for instance). Now, when you open the document, it should by default open on your web browser (if not, just manually open it there), and bring up a lovely, blank, white page with a page title at the top. Congratulations, you have made your first web page. Example can be found here.
Page last modified April 17 2022 at 16:31 UTC
Comments
No comments on this page as of yet.
Post comment
Inflammatory or off-topic comments will be deleted; please go to the guestbook for discussion unrelated to this page. You can use BBCode (forum code) to format your messages.
- [b]Bold[/b]
- [i]Italic[/i]
- [u]Underlined[/u]
- [s]Strikethrough[/s]
- [url=http://www.dragonflycave.com]Link[/url]
- [spoiler]Spoiler[/spoiler]