Welcome

Please register to have access to more features!

It is highly recommended that you have Javascript enabled; many features will not work unless you do. The recommended browsers are Firefox and Chrome; the board is also NOT mobile-friendly.

Please invite your friends!

If you were referred by someone (ex. me, Jessica) please put their username in the referral box on the registration page. Ask them if you don't know their username.

If you are visiting for TESTING PURPOSES ONLY, this is the test account information:


Username:
Test
Password: test123



Select a forum to post in:

HTML 101: The Basics

Helpful topics on HTML, C++

Moderators: Jessica, Teachers

HTML 101: The Basics

Post Number: #1  Postby 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.

------------------
  • 0

I run a forum as part of the GovTeen Network that is devoted to helping teens with sexuality. Feel free to join and post, helping support those teens in need!
Image
Zero Beat
:D
Topic Author

Stone
 
8 years of membership8 years of membership8 years of membership8 years of membership8 years of membership8 years of membership8 years of membership8 years of membership
 
Posts: 27
Topics: 13
Joined: December 24th, 2010, 1:19 am
Local time: November 20th, 2019, 8:20 am
Last Visit: January 17th, 2012, 6:39 am
Location: Australia
Gender: Male
Cash on hand: 54.66
Reputation: 0
Blog: View Blog (0)
Subject(s): Food, ICT, English

Re: HTML 101: The Basics

Post Number: #2  Postby Zero Beat » January 2nd, 2012, 4:11 am

*RESERVED*
  • 0

I run a forum as part of the GovTeen Network that is devoted to helping teens with sexuality. Feel free to join and post, helping support those teens in need!
Image
Zero Beat
:D
Topic Author

Stone
 
8 years of membership8 years of membership8 years of membership8 years of membership8 years of membership8 years of membership8 years of membership8 years of membership
 
Posts: 27
Topics: 13
Joined: December 24th, 2010, 1:19 am
Local time: November 20th, 2019, 8:20 am
Last Visit: January 17th, 2012, 6:39 am
Location: Australia
Gender: Male
Cash on hand: 54.66
Reputation: 0
Blog: View Blog (0)
Subject(s): Food, ICT, English

Re: HTML 101: The Basics

Post Number: #3  Postby 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 :P 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
<p>Wow, a paragraph.</p>

(<p></p> 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 <br /> 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
<font color="red">OMGZ RED TEXTZ! ITS LIEK, OMG MAGIC</font>

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 <br /> then go down a line and put:
Code: Select all
<font color="#33FFFF">OMGZ YOU DONT know this colour! : O</font>


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;">
<p>Wow, a paragraph.</p><br />
<font color="red">OMGZ RED TEXTZ! ITS LIEK, OMG MAGIC</font> <br />
<font color="#33FFFF">OMGZ YOU DONT know this colour! : O</font>
</body>
</html>
  • 0

I run a forum as part of the GovTeen Network that is devoted to helping teens with sexuality. Feel free to join and post, helping support those teens in need!
Image
Zero Beat
:D
Topic Author

Stone
 
8 years of membership8 years of membership8 years of membership8 years of membership8 years of membership8 years of membership8 years of membership8 years of membership
 
Posts: 27
Topics: 13
Joined: December 24th, 2010, 1:19 am
Local time: November 20th, 2019, 8:20 am
Last Visit: January 17th, 2012, 6:39 am
Location: Australia
Gender: Male
Cash on hand: 54.66
Reputation: 0
Blog: View Blog (0)
Subject(s): Food, ICT, English

Re: HTML 101: The Basics

Post Number: #4  Postby 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!
  • 0

You know that person that has tons of friends, and more money than sense? Yea, I'm not that person... XD
tomtiger11
Computer Geek

Global Moderator
Onyx
Onyx
 
8 years of membership8 years of membership8 years of membership8 years of membership8 years of membership8 years of membership8 years of membership8 years of membership
 
Posts: 192
Topics: 28
Joined: October 21st, 2011, 12:27 pm
Local time: November 20th, 2019, 2:20 pm
Last Visit: September 17th, 2018, 11:34 am
Gender: Male
Cash on hand: 552.28
Bank: 1,428.61
Reputation: 3
Medals: 5
1 Year (1) 2 Years (1) Feedback Survey (1) Facebook group (1) Pin-Board (1)
Blog: View Blog (3)
Teacher


Return to ICT Topics

Login  •  Register
cron
Reputation System ©'