View and vote on the article here: Introduction to HTML
Introduction to HTML| Category | | | Summary | | | Body | Introduction to HTML
I searched google for a decent and proper statement of what HTML is, this is what I got back:
HyperText Markup Language (HTML) is a language to specify the structure of documents for retrieval across the Internet using browser programs of the WorldWideWeb
Well, yea that's true, but here it is in my words which are probably a little easier to understand as I'm not sad enough to sit and think of a smart sentence:
HTML is a really easy language that you use to make a website! The HTML that you use is read by the internet browser and turns the code into a nice, user friendly, pretty and readable format!
Now that you know what it is, what do you need to get started? Read on and find out!
<hr>
What You Need
The following is a list of things that you need to write some HTML and view what you have done:
- Notepad
- Internet browser
That was a big list! I'm pretty sure that most people will have this software on their computers already if they run a version of windows!
Pre-Programming knowledge needed
Before you delve into the wonderful world of HTML there are a few things that you will need to know:
<ol type=1>
[*] When you are writing HTML, you are writing the code in Notepad
[*] When you save a file in Notepad, it saves as a .txt file, we don't want that, so you will always have to change the file suffix to .html or .htm!
[*] Browsers will only open these .html files
[*] HTML tags are surrounded by < and >[/list]
If none of that really made much sense, it will do once you've read through this tutorial, so don't worry!
Okay, I'll stop boring you now
lets get to the programming!!
<hr>
HTML Basics
1.1
Firstly, open up Notepad
good start!
Now you have a lovely blank page to work with! I'll now give you a little bit of HTML to look at and I'll then talk you through the workings of it:
<HTML>
<HEAD>
<TITLE>My page!</TITLE>
</HEAD>
<BODY>
<FONT COLOR=blue>Hello World!</FONT>
</BODY>
</HTML>
If this is the first time you have looked at any language, or have never seen HTML before, this could look a little daunting, I'll now explain what each part does!
The code starts off with the <HTML> tag. Every HTML page should always start off with this tag, it lets the browser know what language it is dealing with so that it knows what it has to do with the code!
The 3 lines after that are the heading of the page. None of this is seen on the actual page when it is online. The <TITLE> </TITLE> tags allow you to insert the title of the page that will be displayed at the top of the browser.
Once we close the HEAD tag we move onto the BODY of the page. This is the main part of the page that can be seen with the browser. We open the BODY section with tag <BODY> and close it with the tag </BODY>. Anything in between these 2 tags will be included on the web page. So as you can see, we conveniently have something in between these tags! It's a sentence with the traditional Hello World! statement! Notice the FONT tags around this sentence, these tell the browser what to do with the characters between the tags. Notice the following statement:
<FONT COLOR=blue>
The FONT tag can include such things as the colour of the text [notice it is spelt color' in HTML]. This is not the only attribute of the text that can be changed, but we will come to that later!
So that's the body of the page completed, all we need to do is close the <HTML> tag with a </HTML>
All closing tags are the same as opening tags except they start with </
So now you know what this code does, type it into your notepad [typing is better than copy/paste as it gives you a little experience with typing it]. Once you've done that, save it! Don't forget that you don't want it as a .TXT file, but as an .HTML file, so you will have to change the suffix yourself! Just save this file to somewhere you can access, like the desktop! Okay, now for the moment you've been waiting for, to view your first ever HTML page! [don't get too excited by the way, cause you may be disappointed! =]
Go on, click on it!
Okay cool, so you've got some blue text up in the top corner, not bad for your first bit of code!
Shall we move onto better things?
<hr>
A Bit Harder..
1.2
We'll start off with another wee bit of code that I can talk you through:
<HTML>
<HEAD>
<TITLE>My webpage!</TITLE>
</HEAD>
<BODY BGCOLOR=red>
<FONT COLOR=green SIZE=+7 FACE=comic sans ms> This text is in green and look
it's comic sans!</FACE>
<BR>
<FONT FACE=verdana> Now we're back to normal size, but you've changed the font to verdana!</FONT>
<P>
<B>BOLD</B>
<BR>
<U>Underlined!</U>
<BR>
<I>Italics</I>
</BODY>
</HTML>
This bit of HTML is a little bit bigger, but that's because it does more things! I'll run through everything in the order it comes up. Again we start the code with the <HTML> tag as usual. Then we have our HEAD section, you already know what this does!
Now to the BODY. The first thing you will notice is that the <BODY> tag has changed! It's got something after it:
<BODY BGCOLOR=red>
This wee bit of code gives the background of the page a little bit of colour! And yes, you guessed it, it'll make it all red! That's not too hard to remember, the only thing that you will actually have to remember is that colour is spelt the American way!
Onto the next wee bit:
<FONT COLOR=green SIZE=+7 FACE=comic sans ms> This text is in green and look
it's comic sans!</FACE>
The concept is the same as the code in 1.1, it starts with the <FACE> tag, but just has more attributes to it! It's pretty easy to see what it does, the colour will be green, the size is 7 times larger than usual, and the font face [font] will be comic sans! All of the text after that until the closing </FONT> tag will have those attributes. So whenever the browser sees </FONT> it forgets about all of the font attributes set, the text after that will be back to the original!
The next bit of code is very simple:
<BR>
This one liner takes a new line. It tells the browser to jump down one line, just like pressing the ENTER button.
After that we have yet another <FONT> tag:
<FONT FACE=verdana> Now we're back to normal size, but you've changed the font to verdana!</FONT>
You should know what this code does, it sets the font to verdana and all of the text after that will be in that font face! Easy! See, you're learning!
So now on the next wee one liner one letter tag:
<P>
This tells the browser to take a new paragraph, a little similar to the <BR> tag we met earlier, only this is a larger space!
The next wee bit is very easy! You'll se these working once you look at the .HTML file, but I'll run through them anyways:
<B>BOLD</B>
These <B> </B> tags around a word or sentence make the sentence bold!
<U>Underlined!</U>
These <U> </U> tags around a word or a sentence underline the sentence!
<I>Italics</I>
These <I> </I> tags around a word or sentence change the text to italics!
Then you close up the text with the </BODY> and </HTML> tags as before! Easy!
Now save the file, but remember to save it as a .HTML file so that it comes up in the browser and not in notepad! Well, what do you think? Nothing amazing, a bit red maybe? I think it needs some pictures! Let's find out how to add some graphics!
<hr>
Adding graphics!
1.3
Adding a graphic is REALLY simple! In the BODY setion of the code, add the following HTML:
<IMG SRC=picture.JPG width=40 height=30>
And that's it really! A thing to remember is that the picture will need to be in the same location as your .HTML file for it to work. To test this out, use the code in the previous sections, and make sure you have a JPG graphic called picture.jpg. This will display the picture with a width of 40pixels and height of 30pixels! You can leave these 2 attributes out of the code to give you this:
<IMG SRC=picture.JPG>
This will display the picture the way that it is drawn.
Lets say the image is a title, and you want to put the title in the middle of the page
how do you do that? You could probably put loads of spaces before the text, that might work, but there is an easier way:
<CENTER>
<IMG SRC=picture.JPG>
</CENTER>
The <CENTER> tag! Boy, the guys that created HTML really did think of everything! This wee tool centers anything that you put the tags around, from pictures to text! Genius eh?
Well I don't think we've done too badly for the introduction to HTML. Hopefully I've given you a little bit to play about with!
What you've learnt isn't very interactive, and you can't really do a lot with it, but play about with what you have learnt, and get used to the language!
I hope you look forward to the 2nd part of the tutorial where we will look at hyperlinks and look a little more into the language!
<hr>
Activity
1.4
Why not try and make your own graphic?
Then you could put it as a title to your webpage! Then maybe add a little bit of writing to it!?
You could also give it a nice background colour.
[whenever you are selecting a color, it does not have to be a word like "red", it can be a hex value such as "#234534" to give more variety with colours!]
Written by Lt deth666
(Member of Knowledge-Bank Tutorial Writers) |
|
This article was imported from the CyberArmy University site. (original author: )
There are no replies to this post yet.
|