Welcome Guest [Log In] [Register]
Add Reply
Mikeys Coding Tutorials - HTML; My Tutorials to basic Coding in HTML
Topic Started: Aug 7 2008, 01:41 PM (318 Views)
mikey
Member Avatar
Newbie
Welcome to The First in a series of tutorials where i will be teching you basic coding in several languages, i will try and explain everything as detailed as possible so noobs will understand.

Difficulty: 1/10
Assumed knowledge: How to Type, Copy and Paste and open Notepad.
Things Needed: A functioning Brain, Notepad, Web Host(explained below).
Credits: 95% to me, 5% to w3schools.com

Ok then, Lets Get Started.

1. Introduction

HTML stands for Hyper-Text-Markup-Language and is a coding language used to create webpages, Almost All Websites on the internet have some HTML code on them.

2. Tags


  • HTML tags are used to mark-up HTML elements
  • HTML tags are surrounded by the two characters < and >
  • The surrounding characters are called angle brackets
  • HTML tags normally come in pairs like <b> and </b>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • The text between the start and end tags is the element content
  • HTML tags are not case sensitive, <b> means the same as <B>


Credit to w3schools.com for this list

Example:
Code: HTML
 
<html>


That Tag tells the Web Browser(Internet Explorer, Firefox, Safari) that the code is going to Be HTML,
It has that Tag at the start of the Code and The Closing Tag At the End of the Code, All Tags Must Have a Closing Tag In Order for The Page to display Correctly.

Example:
Code: HTML
 
</html>


There are many Tags in HTML, Below is a List of The Common Tags in HTML

<html> = Defines The page as HTML
<head> = Starts The Hidden Codes
<body> = Everything Inside This Tag will Be Displayed
<h1> = Large Header Text
<h6> = Small Header Text
(h1,h2,h3,h4,h5,h6)
<p> = Paragraph
<img> = Image
<table> = A Table
<tr> = A row in the Table
<td> = A column in the table
<center> = centers everything inside of this tag
<title> = Displays the Title At The Top of the web browser.
<br> = A Line Space

There are many more but these are very common ones.

3. Your First Webpage

Ok Now Its Time for you to create your first webpage. Below is the Basic Format of a simple webpage.
Code: HTML
 

<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<center>
<h1>My First Webpage</h1>
<br>
<p>Welcome to Your First Webpage!</p>
</center>
</body>
</html>


Copy That into Notepad and save it as webpage.html

Ok,now the explaination,

The <html> tag tells the browser that this file is a HTML file, Then The <head> tag contains codes that will not be directly displayed on the actual webpage.
Everything that is in The <title> tag will be displayed at the Very top of the web browser as the title.
The <body> tag will contain everything that is displayed on the actual webpage(text, images etc)
Then There is the <h1>, <br> and <p> tags, this will display the content As a Large Text saying My First Webpage then a line space and some normal text saying Welcome to Your First Webpage!.
The <center> tag makes all of the content within the first center tag and the closing center tag appear in the very center of the webpage.

Got it? =]

4. Comments in HTML

You can Write Messages in a HTML file that will not be displayed, all you have to do is write
Code: HTML
 

<!-- This is a comment -->


So The Text "This is a comment" will not be displayed on the webpage.

5. Attributes

HTML tags can have attributes. Attributes provide additional information to an HTML element.
Attributes always come in name/value pairs like this: name="value".

Attributes are always specified in the start tag of an HTML element.

So,
<h1> is the start of a large heading text but if you put
<h1 align="center"> then the extra information will make that element centered in the page.

6. Links

In Order To Navigate to different Webpages, you will need links to take you there.
The Links can point to any resource on the Web Such as Webpages, Sounds, Images, Movies etc.

Code: HTML
 

<a href="webpage.html">Text To Be displayed</a>


That will display a link that shows up as Text To Be Displayed but when clicked you will be taken to webpage.html.

Ok, Now If you would like the user to be sent to the new webpage when clicking a link but you do not want it to open in the same page they are already viewing then you need to add the target attribute.

Code: HTML
 

<a href="webpage.html" target="_blank">Text To Be Displayed</a>


This will Show up The same as before but when clicked, webpage.html will open in a new window.

7. Getting Your Webpages Onto The internet

Ok Now what you need is either a Webserver of a WebHost.

First of all a webserver can be virtual or real, the virtual ones are run as programs on your computer but they act just like a real webserver and you can get plenty of free ones. The real webservers are actual computers that are not for playing games, surfing the web etc, they are purely for hosting your website files and displaying them on the internet.

The Webhosts are by far the easiest option, companys set up their hosting websites with hundreds of real webservers in a warehouse offering you a Free/cheap service to host your files and put them on the internet, all you have to do is set up and accounton their website, upload your files and your done! get the link to your files and people can then acess your webpages/files from all around the world!

Below i have listed some excellent FREE hosting Websites.



8. Domains

Ok, When you have a Webhost, the URL(the address which specifies the location on the internet) will be something like "http://example1.110mb.com" or "www.freewebs.com/example1", obviously you dont want the 110mb or freewebs.com bit on the address so you can get a domain name which is basically a signpost to the actual URL of where your html files are. So if you get a domain name like "www.example1.com" it can take you to "http://example1.110mb.com/yourfiles" without the user knowing that you are using 110mb.com.

:hooray
Thanks For reading My Basic Tutorial to Coding HTML =]

For a more professional tutorial for HTML go to www.w3schools.com
CSS/PHP/advanced HTML/Flash Tutorials coming soon!


Topic Pinned. Well done! - Jay
Edited by mikey, Aug 11 2008, 05:39 PM.
Offline Profile Quote Post Goto Top
 
Ross
Member Avatar
Thehablab Administrator

Very good, did you write all that yourself?
+rep
Edited by Ross, Aug 7 2008, 02:58 PM.
Welcome to Thehablab.
Need help, a name change, having problems logging in? Don't hesitate and send either me or Jay a PM.

If you are reading this text and are not a registered member of The Hablab, please register by clicking here.
Registering with The Hablab is completely free and will give you unlimited access to areas unregistered visitors cannot access, such as the arcade and forums which have been designated member only status.
Also, unregistered members cannot reply to/post new topics of their own. So what are you waiting for? Register with The hablab today!
Offline Profile Quote Post Goto Top
 
mikey
Member Avatar
Newbie
yeh, it took me AGES :D

i forgot to add credits at the top ;)
Offline Profile Quote Post Goto Top
 
Jay
Member Avatar


Very good guide! Well done!
Registering as a forum member is simple and fast! No email verification needed, so no long steps. Viewing this as a guest means you are limited to great features of this board, including my favorite, the Arcade.
Offline Profile Quote Post Goto Top
 
mikey
Member Avatar
Newbie
Thanks ;) might need some bits explained abit more
Offline Profile Quote Post Goto Top
 
Jay
Member Avatar


Thread Pinned. Keep up the good work!
Registering as a forum member is simple and fast! No email verification needed, so no long steps. Viewing this as a guest means you are limited to great features of this board, including my favorite, the Arcade.
Offline Profile Quote Post Goto Top
 
mikey
Member Avatar
Newbie
yay pinned :D lol
Edited by mikey, Aug 11 2008, 05:28 PM.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Coding · Next Topic »
Add Reply