Tutorial: Basic Web
I’m going to do a bunch of quick and small tutorials and back log my blog with them so it looks like theirs content appearing even when I’m not bothering to do anything. Genius isn’t it? (Or maybe I’ll end up writing them all on the day instead…mmm…or not finishing the series of articles).
So first up is a quick and dirty look at some of the very basic HTML tags and the alike. You know the stuff you would get sick of me telling you because you have picked it up, or at least the idea of how they work from the many years of using forums with their BB Code.
Or maybe you just looked these up on W3 Schools and await real tutorials from me, either one is good. But they don’t have unimpressive dull commentary to go with each of their examples, no do they? That is why you are here.
So first up is you got an idea to make a video game blog because you decided you just wanted too, so you got some web hosting, and you wanted to make a lovely splash page while you figure out how to install WordPress.
Well what do you do to make this awesome splash page? Splash it with some bold, italic and maybe some of that underline stuff you hear so much of.
So how do you do said things? Well that is simple, but first we must give you a little bit of knowledge in how HTML tags work.
You see there’s this awesome thing called an opening tag. That usually declares what you want to do, and of course sets it on the way to ruining the rest of the page if you don’t use our new friend the closing tag.
The closing tag allows you to close off the tag you just placed, in this case it’s going to be some lovely bold and italics, also that other thing, underlining.
I recommend you load up a notepad document (and of course save it as something like index.html so you can view in your preferred Internet Browser) and follow along, even if you find it basic, or get lost, the ability to manipulate what you think I’ve said and interpret it, even into a mess, will be what gets you learning.
So first up Bold.
<b>The tags on either side, make this bold.</b>
Second Italics
<I>The tags on either side, make this italic.</I>
Lastly Underline
<u>The tags on either side, make this underlined.</u>
If you are following along, if you now open up your notepad document (or maybe your using something more fun like Dream weather) in your browser, you will see that hopefully all these are what they say they should be. The only problem is they will be aligned all in one row with no spaces between them.
You can do either one of the following two things to solve that. You can make a paragraph, or you can put in a pause break. Which will skip a line and put the content after that on the next line. Or maybe you want to use a mixture of both?
So the tags for those are as follows:
Paragraph:
<p>This will be a paragraph.</p>
Break:
This will be on one line. <br>
While this will be on the following.
Note you can either use the break tag like above or use it like the following. Depending on how strict you are coding and if you are using XTML instead, you might want to use this example.
This will be on one line. <br />
While this will be on the following.
So that is all well and good, but what if you want to set up a proper HTML page (which you should instead of putting it into a notepad document like we have been so far).
Well there are some simple things to get this done. First keep what you have already done if you are following around, but leave it on the bottom of the page or on another document for now. We will want to copy that into a certain area soon.
You will want to put in a HTML, HEAD, TITLE and BODY tag. In the following order. Keeping in mind to have the title inside the head, and closed off before the body begins with the HTML tag wrapping all of the document.
Now you will want to put the content you have been making in between the body tags. You can also name the website in between the title tags.
Here is an example of what you might have code wise at the end of this customization:
<html>
<head>
<title>Example Title</title>
</head>
<body>
<p>
<b>This is bold</b>
</p>
</body>
</html>
Another tag which goes in the head of the document is the STYLE tag. This allows us to use cascading style sheets, which allows further customization of the page. We will go into further detail on how to customize these in a later tutorial.
Next week I get you guys onto the magical world of tables. Remember to do your homework because there will be a list of things to do, so don’t block quote me on that. (If you didn’t get that, I’ll show you how to do HTML Tables, Lists and Block quotes then stylise them in CSS).
