School & Chat

Stone · Post Number: #1 by **Zero Beat** » January 2nd, 2012, 1:53 am

HTML 101: The Basics

Hello and welcome HTML basics! I know there are lots of these out there within a quick Google Search but I shall do some here!

------------------

HTML, Hyper Text Makeup Language is what the internet is made up of! HTML is everywhere on the internet, this forum, any website, youtube, google everything of the internet is of HTML.

HTML is made up of two things, content, and the markup:

Content is the text or information that is going to be presented on screen.
Markup is the controls to the way text and information is shown.

------------------

A basic webpage or HTML document is made up of three main areas:

HTML Birth
Head
Body

EVERY HTML code has a open and close, these are seen as <CODE> & </CODE> the first one is the open, while the once with the slash is the close.

The HTML "birth" (my own way of saying it) is what starts and ends a HTML document ALWAYS. This is done with:

Code: Select all: <html> & </html>

These start the document and also contain other information like HTML version etc (But there isn't a reason to go into that now)

The next part is the head, like it sounds this is the top part of the HTMl document and normaly has nothing but a few bits and pieces that the user can see.

Code: Select all: <head> & </head>

The head allows you to put in codes that will do actions and show information to your computer & browser without you knowing (its safe most of the time) on this forum the head has a lot of information about how the style of the forum will be set out, but it also has things like meta codes and the little title.

The last part is the body. Everything in here is almost always likely to be seen by the viewer,

Code: Select all: <body> & </body>

Between this code, you will show all the information, pictures, videos everything! And is the big part.

------------------

Stone · Post Number: #2 by **Zero Beat** » January 2nd, 2012, 4:11 am

*RESERVED*

Stone · Post Number: #3 by **Zero Beat** » January 2nd, 2012, 4:12 am

Make Your Own Page!

This part will explain the basic steps in creating your own webpage in HTML!

Here is what you need:

Notepad
Internet Browser

------------------

Step One:
Anywhere on your computer, create a folder called "HTML Webpage". Lets say you created this on your desktop.

Step Two:
Open up Notepad and without typing anything save this page as "index.html" in the folder you made in step one. (This lets us quickly save and view as nessacary) If you have a big enough screen, space the windows out so Notepad takes up one half and your browser takes up the other half.

Step Three: (I want you to type this out, not copy paste it

Don't be lazy!)
Now, it begins.

Start by typing out the three main areas of the page:

Code: Select all: <html> <head> </head> <body> </body> </html>

Step Four:
Save. (Ctr+S) Learn to save often, its a skill that comes in handy. :yes:

Save and save often!

Step Five:
For now, we are just going to do that basics. This includes, colour background, heading, coloured text and picture!

Between your body tags type:

Code: Select all: Wow, a paragraph.

( stands for paragraph which makes the next look nicer, you can do it without them)
BAM! You have made a webpage, and have some text on it!

Step Six:
It looks dull, black text, white background... BORING! Lets spice it up!
At the end of your text you just typed in step five, add at the end, this adds a gap which gives you some more space. Press enter. And save.

YOU MUST SPELL COLOUR THE AMERICAN WAY, COLOR NOT COLOUR.

On this new line:

Code: Select all: OMGZ RED TEXTZ! ITS LIEK, OMG MAGIC

The font tags are used to style, the, text! The above code is a sample of what you can do, but in the place of red you can do more complex colours like green. OR even more complex use HEX colours, click here for a chart of different colours, from the site I just linked pick any colour and in the place of red, put a hash (#) and the number/letter code. Put another then go down a line and put:

Code: Select all: OMGZ YOU DONT know this colour! : O

Step Seven:
Save. Now a little explaining, if you are use to reading this and have done HTML, this might seem strange if you don't keep up with newer ways of HTML.

If your first time, just continue!

Now, go back up to your <body> tag. RIGHT BEFORE your > type the following:

Code: Select all: style="background-color:yellow;"

(MAKE SURE THERE IS A SPACE BETWEEN BODY AND STYLE.

Like with the text, we can see that yellow... makes a yellow background. MAGIC AGAIN?!!? No. Also like text, you have a wide range of colours to pick from! Just use the same HEX chart, adding # and the code.

Save.

------------------
Now lets have a break to make sure everything is right and working!

So, you've been following this word for word? Good boy/girl! We're just going to sum up everything to make sure you have it right.

I hope you do.

Your notepad (index.html) should look like this:

Code: Select all: <html> <head> </head> <body style="background-color:yellow;"> Wow, a paragraph. OMGZ RED TEXTZ! ITS LIEK, OMG MAGIC OMGZ YOU DONT know this colour! : O </body> </html>

Global Moderator · Post Number: #4 by **tomtiger11** » January 23rd, 2012, 3:44 am

For those of you who do not know this:

You can use HTML in a .php file!!!

OMIGOSH!

Yes! You can! Just forget you are using a .php file, and put the html in the PHP file (index.php). This will allow for further codes and scripts when you are more confident with PHP and HTML.

Also, Im not going to go into this, but for you who do not know, CSS is great for changing the look of a webpage!