Search where?

This Portfolio (cimanthajacobs)

All of Writing.Com

Create New Item

Read & Review

Community

Browse By Type

Browse By Genre

Writing Resources

Monday, Dec. 23, 2024

1:52am EST

Members: 746

Guests: 1,965

Total Online: 2,711

A beginners guide to HTML

by cimantha

Rated: ASR · Article · Activity · #1245401

An idiot-proof guide to teach inexperienced web designers basic things.

A Quick, Simple, Idiots Guide To Basic Html

In this article we learn how to...
How to make an html file
Learn basic html commands
Make some words bold, italic, and underlined.
Write links
Post images
Learn how to change font color, and size
Get familiar with general html color codes, and the two different types

INTRODUCTION
HTML stands for Hyper Text Markup Language.
HTML tells your (your being collective of anyone viewing a page) computer have to show a web page.
To make an html file you must open notepad (or simple text) type out your code, and save the file ending with .html or .htm.

HOW TO MAKE AN HTML FILE
Open up notepad or simple text.
In the body of the document write
<html>
<body>

Hello, my name is (insert your name here) and I am making my first html document.

</body>
</html>
Then go to "Save As" and in the "file name" area write "html document.html".
Then, depending on the browser you use go doiwn from "File" and select whatever your browsers version of "open file" is.
Find your document you labeled “html document.html" and select "open".
You should see a message simply saying "Hello, my name is (insert your name here) and I am making my first html document."
Congratulations! You have just made your first html document, now to explain what you just did.

LEARN BASIC HTML COMMANDS
In the last lesson you learned how to make an html document. Now allow me to explain what you just did.
You typed
<html>
<body>

Hello, my name is (insert your name here) and I am making my first html document.

</body>
</html>
Correct?
Well then let me start at the beginning.
<html> is a kind of opening tag.
This is needed when writing all html, it tells your computer what kind of code it is, more or less.
<body> tag starts the body of your text and content in general.
Once you know more about html you will know that different kinds of text can be added before or after this depending on meta tags, or the title of you page, things like that.
The tag stands for paragraph, so tells the computer that a new paragrah is being started. This also adds a break line. A break line
is
a
line
that looks
like this.
All the text isn't in the same sentance.
Another way to make a break line, without making a new paragraph would be writing before the word you want on the next line.
There are a few other variations of this code, you can write it a few different ways and get the same effect, but be sure to check it on all browsers.
You will see, following your text I have written </body></html>.
And code that you write must also have a closing tag.
Let me explain farther.
If I write and write text in here, showing a paragraph, I must also close the paragraph with a 
It is vital close you code. If you don’t it will conflict with other coding and it won’t work.
It’s kind of like if you were a zookeeper feeding animals you would open a lion’s pen to give it food, (start a code to write content) but before you go onto feed to monkeys (before you start a new code) you must close the lions gate (close the code) so the lions wont eat you (so your code wont be messed up).
Yes, that’s the only metaphor that came to mind, and yes, it’s a poor one.

MAKE SOME WORDS BOLD, UNDERLINED, OR ITALIC
Okay, the real fun is about to begin.
To bold words,
Remember that old “html document.html”?
Open it in your notepad or simple text applet.
You should see
<html>
<body>

Hello, my name is (insert your name here) and I am making my first html document.

</body>
</html>
We are going to make the word “Hello” bold.
The basic bold code is , so to bold a word write before it.
Your document should now look like this
<html>
<body>

Hello, my name is (insert your name here) and I am making my first html document.

</body>
</html>
But remember, you don’t want to let the lion out, so be sure to close the code with a .
Your code should end like this
<html>
<body>

Hello, my name is (insert your name here) and I am making my first html document.

</body>
</html>
Save it using the same process we discussed before.
Feel free to check it in your browser, as explained above.
Pretty cool huh?
To italicize words,
Start the same process as bolding, except replace and codes with and codes. Here is a step-by-step to make the word “name” italicized.
First add your beginning code:
<html>
<body>

Hello, my name is (insert your name here) and I am making my first html document.

</body>
</html>
Then, close your code:
<html>
<body>

Hello, my name is (insert your name here) and I am making my first html document.

</body>
</html>
Save, and check it out in your browser.
To underline words,
Start the same process again
Using and instead.
Here is a step-by-step to make the word “html” underlined.
First add your beginning code:
<html>
<body>

Hello, my name is (insert your name here) and I am making my first html document.

</body>
</html>
Now close it
<html>
<body>

Hello, my name is (insert your name here) and I am making my first html document.

</body>
</html>
Save it, and now go open file in your browser. Admire the progress you have made, you can now bold, italicize, and underline words!

WRITE LINKS
You know basic html coding now so we can move on to making links.
Open your html document.html file in notepad or simple text.
It should look like this
<html>
<body>

Hello, my name is (insert your name here) and I am making my first html document.

</body>
</html>

Now to make an html link you write <a href=”
After the “ you write the name of the webpage you want to link to. We’ll link to helium.com. So, you would type <a href=”http://www.helium.com
Next, remember you need to close the coding for the web page name, so you end it with “>
To write the text you want to link to the page after your <a href=http://www.helium.com”>you write the text, then close it with </a>. This may sound a little confusing but in the end your link should look like this
<a href=http://www.helium.com”>HELIUM</a>
add this into your text, after “my first html document.”.
You coding should look like so
<html>
<body>

Hello, my name is (insert your name here) and I am making my first html document.<a href=http://www.helium.com”>HELIUM</a>

</body>
</html>
This looks a little messy though, maybe you should add a line break so the link will be on a new line. Go ahead, you know how.
<html>
<body>

Hello, my name is (insert your name here) and I am making my first html document. <a href=http://www.helium.com”>HELIUM</a>

</body>
</html>
Save the document and check it out your browser.
HOW TO POST IMAGES
This code will probably be used in day-to-day things on the internet.
The coding for it begins with <img src=”
After this you would insert the image address, like a link code, it ends with “> except after that you are done.
TIME FOR A MINI LESSON!
HOW TO FIND AN IMAGES ADDRESS
1. Right-Click on the image
2. Select “Properties”
3. Look on the Image Properties section and find where it says “Location”
4. The URL (it will start with http://www.) is your image address, you just copy that and put it in your code.
So, let’s try to post an image now. Let’s say the image address is http://i14.tinypic.com/2els84j.gif
Add in the coding for your picture after your link to HELIUM in your html document.html document remember to add a to make a line break!
<html>
<body>

Hello, my name is (insert your name here) and I am making my first html document. <a href=http://www.helium.com”>HELIUM</a> 
<img src=” http://i14.tinypic.com/2els84j.gif”>

</body>
</html>
Save it and view it in your browser, check out the cool picture!!!!!!!!!!
LEARN HOW TO CHANGE FONT COLOR, AND SIZE
Okay, like previous codes both of these will end with “>
Font color begins with . In the next section we’ll play around with this more.
To change font size, you use the code 
If you wanted a standard size, about this sized text you would use “3” as your font size.
If you wanted smaller 1, 2 any bigger 3,4.
You can enter bigger numbers to make different size headers as well. So now, go ahead and open your “html document.html”.
At this moment, it should look like this
<html>
<body>

Hello, my name is (insert your name here) and I am making my first html document. <a href=http://www.helium.com”>HELIUM</a> <img rc="http://i14.tinypic.com/2els84j.gif">

</body>
</html>
Let’s go ahead and make the word “first” big.
Ok, go ahead and pick a font size, I’m gonna go with 10 since it’s nice and big, but you can exchange 10 for any number you want, go ahead and experiment a little.
 Hear is my code, I’m going to put it in front of the word “first”.
At the moment my code looks like this
<html>
<body>

Hello, my name is (insert your name here) and I am making my first html document. <a href=http://www.helium.com”>HELIUM</a> <img src="http://i14.tinypic.com/2els84j.gif">

</body>
</html>
I need to close this code by using . Here is my code:
<html>
<body>

Hello, my name is (insert your name here) and I am making my first html document. <a href=http://www.helium.com”>HELIUM</a> <img src="http://i14.tinypic.com/2els84j.gif">

</body>
</html>
Save it and congrats, you have changed font size.
Now to learn about colors!
LEARN ABOUT COLOR CODES CHANGE FONT COLOR, AND CHANGE BACKGROUND COLOR.
There are two types of html color codes.
A) Hex Codes, such as #00ff00, #ffffff
OR
B) The color words themselves, white, black, lime.
Personally I like the words themselves better, and they are more reliable in different browsers. They’re also better for beginners, so we’ll talk about them.
Some basic color codes for you
Black
White
Gray
Red
Orange
Yellow
Blue
Green
Purple
Pink
Violet
Firebrick
Lime
Deeppink
Salmon
Coral
So, open up your html document.html
As of now, it should look like this
<html>
<body>

Hello, my name is (insert your name here) and I am making my first html document. <a href=http://www.helium.com”>HELIUM</a> <img src="http://i14.tinypic.com/2els84j.gif">

</body>
</html>
Let’s make the word “my” green.
. After the word “my” write . Your code should now look like this
<html>
<body>

Hello, my name is (insert your name here) and I am making my first html document. <a href=http://www.helium.com”>HELIUM</a> <img src="http://i14.tinypic.com/2els84j.gif">

</body>
</html>
If you want to use a different color, feel free to, after all it is your html document. J
Save As now please.

NEXT
We get to change the background color.
Pick a color you like but make sure it isn’t too obnoxious when you go to do more advanced html stuff.
It annoys people.
I’m going to use gray, my favorite color besides green, so to make it my background color I need to look at my “<body>” part of my html. Change “<body>” to <body bgcolor=" then your color code here and end with ">. My code now looks like this
<html>
<body bgcolor="gray">

Hello, my name is (insert your name here) and I am making my first html document. <a href=http://www.helium.com”>HELIUM</a> <img src="http://i14.tinypic.com/2els84j.gif">

</body>
</html>
Save As, and check it in your browser.

CONGRADULATIONS!!!!!!!!!!!!
You have completed this little tutorial, I hope it helped!

Another good website to learn from is w3schools.com they have loads of info!!!!!!!!!!

Thanks for reading,
Cimantha

Writing.Com, its affiliates and syndicates have been granted non-exclusive rights to display this work.

Printed from https://www.writing.com/main/view_item/item_id/1245401-A-beginners-guide-to-HTML