Hi. Im a Neo named RICKYB and I am going 2 tell u how 2 do basic Hyper Text Markup Language, or HTML. HTML is a form of programing that creates Web pages. Most of the web pages u have eva been on will have been HTML. I have learnt HTML recently and I want 2 show u how its done.
What is Hyper Text Markup Language?
Hyper Text Markup Language, or HTML, is a form of programing used 2 make websites. It is the easiest programing language 2 learn. It is easy 2 learn but hard to master. All modern browsers(excluding text based ones) are just programs that turn raw HTML code into text, graphics and other sorts of Media into what u see! There are programs out there that u design a site and it turns it into code 4 u, but it is much more fun and rewarding writing sites in HTML code.
I bet u need some expensive program?
The answer is NO!!! HTML is written in one of the most simple programs on Windoze! Go on, Guess? No, Still haven't got it? NOTEPAD!!! It is the program that all windoze users have and that most neva use. It is almost always compared unfavourably to Word! Word can b used, but Notepad is easier and better.
Go on then, show me how its done.
First, Load up Notepad from start>programs>accesories>notepad. There are 3 basic parts to a HTML page.
The Page Title
An Accurate but brief Description of your Page. Used by some Search Engines.
The Main Headline
This is The Title of your page that goes in the title Bar right at the top of the screen.
The Body Text
This is the main part of your web page. U r reading the body text of my page now. It is where all your information and media should go.
HTML is created bu using Tags. Tags r little commands that browsers understand. Tags r started by and ended by . As u can c, it is just a forward slash before the actual command. Here r some Tags:
<'HTML'> =This tag goes at the start of all HTML documents. It tells a browser that the page is HTML.
<'HEAD'> =This is the start of your main headline.
<'TITLE'> =This is the start of the page title.
TITLE TEXT GOES HERE =This is the actual text 4 your title.
<'/TITLE'> =End of Title.
<'/HEAD'> =End of Heading.
<'BODY'> =Start of Body Text.
BODY TEXT GOES HERE =The Actual Body Text.
<'/BODY> =End of Body Text.
<'/HTML'>=End of HTML Page.
Plez dont copy the little ' Marks
Your First HTML Page
Well now u know some tags its time 2 put them into a page. Do the tags in Notepad 4 these commands:
HTML
HEAD
TITLE
My First HTML page!
/TITLE
/HEAD
BODY
Hello World! This is my first website in HTML!
/BODY
/HTML
So there u go. Your First HTML webpage. Go 2 File>Save as and change the file type 2 "all files". Then save your page under a name like "my first HTML page.html". Always remember 2 put the .html file extension on or it will save it as a text document.
Other Tags
Here are some other useful Tags u cud use in a site.
<'CENTER'> =Centres Text
<'/CENTER'> =Ends Centre
<'I'> =Italics
<'/I'> =Ends Italics
<'B'> =Bold
<'/B> =Ends Bold
<'U'> =Underlines Text
<'/U'> =Ends Underline
<'P'> =Start Paragraph
<'/P'> =End Paragraph
<'BR'> =Next Line
Remember not 2 include the ' marks and spell center the american way, e.g. center.
Headers
headers r used to make titles. The title above is a header. Headers come in 6 different sizes. I will show u the header size and tag.
Header 1= <'H1'>
Header 2= <'H2'>
Header 3= <'H3'>
Header 4= <'H4'>
Header 5= <'H5'>
Header 6= <'H6'>
Remember not 2 include the ' marks
Links
Most Sites in the world have links. A link is something that u click on 2 go 2 another site or send an email. There is a tag which puts links into HTML. It looks something like this:
<'A HREF="www.examplesite.com">
Click Here 2 go to examplesite.com!<'/A'>
That would take u to a website. An email link tag would look like this:
<'A HREF="mailto:asample@examplesite.com">
Click here 2 send me an email!<'/A'>
That one would send an email. The A means Anchor and the HREF means an active link. Remember not 2 use the ' marks but DO use the " marks.
Inserting Pictures
Every time u surf the web, most sites have pictures on. An insert picture tag looks something like this:
<'IMG SRC="logo.gif" HEIGHT=160 WIDTH=110 ALIGN=LEFT'>
This would display an image called logo.gif, height 160 pixels, width 110 pixels. Logo.gif must be in the same web folder(more about that later) or folder on your computer. The picture will be aligned 2 the left. U do not need height and length if it is already the right size.
Background
To add a background colour, U first need he hexadecimal code for that colour. A hexadecimal code is a 6 digit code which browsers read as colours. U can get Hexadecimal code from
this site.
Here r some basic codes:
- Black ="#000000"
- Silver ="#C0C0C0"
- Grey ="808080"
- White ="#FFFFFF"
- Maroon ="#800000"
- Red ="#FF0000"
- Purple ="#800080"
- Fuchsia ="#FF00FF"
- Green ="#008000"
- Lime ="#00FF00"
- Olive ="#808000"
- Yellow ="#FFFF00"
- Navy ="#000080"
- Blue ="#0000FF"
- Teal ="#008080"
- Aqua ="#00FFFF"
The tag is then:
<'BODY BGCOLOR="#000000">
Put this tag under the /HEAD tag, just before the start of your body text. That will make the Background black. Substitute your colour code 4 the black code. Remember 2 spell colour the american way, e.g. color.
Text-Colour, Font, Size
So you've got yourself a background, say black. But the problem now is that u can't see the actual text! U cud change the background to a different colour 2 clash with your text, but the better thing 2 do would b change your text colour. To format(or change) the colour, font and size, u need a tag like this:
<'FONT FACE="comic sans ms" SIZE="3" COLOR="#FFFFFF">
This will change your text into comic sans ms, size 3, colour white. Insert this under your background tag.
More than one page
So, u want to add more pages to your site. Easy. Do your A HREF tag but use the name of the page instead of a link 2 another site. Done!!!
Putting your site on the web
So, you've made a site that u want 2 put on the web. There r two ways of doing this. The first way is 2 find a hosting site u like and r prepared 2 pay money to. Then find a domain name site and pay money 2 them 2. OR u could go 2 a site like angelfire.com and get free hosting and a basic domain name. U cud still then have a proper domain name, but it'll cost u. At angelfire, it is very easy. Simply register, go 2 web shell then scroll down to file upload. If there's more than one file to upload, click upload multiple. Remember to upload all your pictures as well. Then highlight your front page and click rename. Rename it to index.html. There u go. Your site is ready.
NOTE:Spaces turn into underscores an angelfire.com so make sure that u have no spaces in your filenames or chande your code 2 compensate. Angelfire.com is case sensitive.
