Jubal's Web Tutorials 1: Basic HTML

Started by Jubal, September 21, 2009, 07:57:52 PM

Previous topic - Next topic
Print
Go Down Pages1
User actions

Jubal

September 21, 2009, 07:57:52 PM Last Edit: July 19, 2013, 01:16:53 PM by Jubal
Computer literacy, like any other form of literacy, comes in 2 parts. You have to be able to read: to use software and do the front end of computing. But to be fully computer literate you need to be a dab hand at producing things for Computers, and the most powerful form of that is being able to program and create internet pages.

This tutorial will show you how to use basic HTML. HTML is Hyper-Text Markup Language, and is the standard way of making web pages everywhere.

First things first, you need to tell the computer that your file is a webpage. Open up a document in notepad.

Type:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
At the beginning. Ignore the doctype section for now - it makes sure browsers will render your HTML correctly, and should be put before every page you do, but otherwise can be left alone. Okay, onto the important bit. You have opened the HTML tag - everything within is now known to be a webpage. All tags, as they are known, are done in this format, with the tag name surrounded by pointy brackets. Tags are used to declare anything - images, links, sections of the page, and so on. Now we need to close the tag to end the file. This is done by adding a forward slash after the first pointy bracket;
</html>

Right, you can get on typing then? Well, sadly not. The webpage code has to be divided into two main sectors - the header (<head> tag), used for containing invisible information, and the body (<body> tag), which actually contains the content of the page. The head comes first, then the body, and both have to be within the HTML tag. In fact, EVERYTHING has to be within the HTML tag. If anything ends up outside it, something is wrong. Okay, now try putting your head and body tags in.

You should now have something like this;

Spoiler
<html>
<head>
</head>
<body>
</body>
</html>

Right, now all we need to do is save it as a webpage. Press save as, and find somewhere to save your file. Select "all files" rather than .txt, and at the end of the filename you want add ".html" - this will tell the computer that the file is a webpage. If you now save your file and find it with Windows Explorer, you should be able to open it with a web browser. Well done - your first webpage!

Wait a minute, though - it's blank. It doesn't have ANYTHING on it at all. Right, open up the file again in notepad; we've got work to do.

The first thing you probably want to do is add text. That's simple, at least, type it in the body. Save the file, and it should now appear when you open the webpage. But supposing we want to add a title? Firstly, we have to look at how to get the text on a separate line. But isn't that easy - you can just press enter? Not in HTML - you need to tell the browser that you're putting in a line break. This is achieved with the little
 tag. Anything before and after the tag is on separate lines, it's as easy as that. Adding several will put blank lines in. Note that br is a tag that DOES NOT need to be closed.

Okay, you should now have your title and text separate, but they are still both boringly the same. So what can you do to make the title look all lovely and titleish? Add one of the heading formatting tags. This little happy tag family has 3 members - H1, H2, and H3. H1 makes the text biggest, H2 less so, H3 still less so. Just enclose your text with <h1></h1> and you have nice big text! The other simple formatting tags you should know about now are
Code Select
<b> (bold) and
Code Select
<i> (italic). These work in the same way as the H1/2/3 family.

Finally in this basic session, we'll look at how to add a bit of colour to our webpage. The first thing here is to learn that some tags have attributes. Attributes tell the computer what do with the contents of a tag. Each tag has its own set of possible attributes (and many, particularly simple ones such as
 or <h1> have no attributes at all). The body tag has a lot of attributes, that can set basic features of the page.

Attributes go inside the pointy brackets but after the tag name, and go in the format <tagname attribute="formofattribute">. In the body tag, we'll give it the color (which here is text colour) and bgcolor (background colour) attributes. Technically it's best to use HTML colour codes for these, but for cimple colours the colour names are just as good.

So we can have:
Spoiler
<body bgcolor="green" color="white">

Note that the body closing tag remains unchanged. The above should turn your background green and your text white; feel free to mess with the colours - any of red, blue, green, white, black, and yellow should work fine. Use them lowercase and make certain they are spelt correctly, though. The computer may know what "green" is but "grean" is as far as it is concerned utterly different (and in this case fully incomprehensible).

So your final code might look like this:
Code Select
<html>
<head>
</head>
<body bgcolor="green" color="white">
<h1>My Webpage</h1><br>
This is <b>MY</b> webpage. Marvel at its sheer <i>awesomeness.</i>
</body>
</html>

Right, congratulations! You can now make basic webpages. Next time, we'll move on to adding images, more advanced text formatting, background images and of course the main point of webpages as opposed to documents: the hyperlink.
The duke, the wanderer, the philosopher, the mariner, the warrior, the strategist, the storyteller, the wizard, the wayfarer...

Marcus

#1
September 21, 2009, 09:45:13 PM
It's worth mentioning the DOCTYPE, as without it, browsers may not render things correctly.
"So if you meet me, have some courtesy, have some sympathy, and some taste. Use all your well learned politesse, or I'll lay your soul to waste."

Jubal

#2
September 21, 2009, 10:17:28 PM
Balls. I'll edit it tomorrow.
The duke, the wanderer, the philosopher, the mariner, the warrior, the strategist, the storyteller, the wizard, the wayfarer...

Zealot Prodigy

#3
October 18, 2009, 07:51:29 PM
Ha this is what I'm learning currently in my Web Design class , pretty cool tutorial

Marcus

#4
October 18, 2009, 10:35:05 PM
Quote from: "Jubal"Balls. I'll edit it tomorrow.
Tomorrow never comes, eh?
"So if you meet me, have some courtesy, have some sympathy, and some taste. Use all your well learned politesse, or I'll lay your soul to waste."

Jubal

#5
January 01, 2010, 01:58:13 PM
Finally edited that bit. Tomorrow HATH COME!
The duke, the wanderer, the philosopher, the mariner, the warrior, the strategist, the storyteller, the wizard, the wayfarer...

Marcus

#6
January 01, 2010, 02:46:57 PM
About bloody time. :P
"So if you meet me, have some courtesy, have some sympathy, and some taste. Use all your well learned politesse, or I'll lay your soul to waste."

lordryan756

#7
January 22, 2010, 09:53:06 PM
Has anyone here ever played Roblox before? When you go into editing mode to create you games etc., you can make "Admin" doors that you have to wear a certain piece of clothing to get through. It has body and everything. you have to insert the HTML coding of the piece of clothing so that the door recognises it so you can get through! this ought to help with that :)

Spoiler: click to toggle

Jubal

#8
January 22, 2010, 10:20:11 PM
I tried it once, but my computer didn't like it. I've been planning to write the second of these tuts for ages, might get it done sometime soon...
The duke, the wanderer, the philosopher, the mariner, the warrior, the strategist, the storyteller, the wizard, the wayfarer...
Print
Go Up Pages1
User actions