- Joined
- Oct 19, 2007
- Messages
- 491
- Reaction score
- 159
THE BASICS:
The basics of html are nothing but basic things, of course. As you read this tutorial you may or may not succeed in html.
Now to get started.
The first thing you need to know is what HTML stands for. Hyper Tezt Markup Language. An Html file is a type of computer language that contains small markup tags that you can use to devlop this like websites,games, and lots more stuff. To diplay a html file it must have a htm file extension which allows the code to transfer to a web broswer. An html file can easily be made in any text editor.Eg.Notepad,Wordpad and lots more programs out there.
Here is a simple code of what most beginners use to start the basics.
<html>
<head>
<title>This Will Show Up As The Title In The Top Left Of Your Browser.</title>
</head>
<body>
Here You Can Right Whatever You Please As Your Body Content.<b><< These Make Your Text BOLD</b>
</body>
</html>
The tag "<html>" allows your broswer to indicate that this is the starting of a HTML Document.
Anything that is displayed between <html> and the end of the tag </html> is not shown when you open your browser. But if you
want text to be shown in your browser you enter text between <body> and the end of the tag </body> and will be displayed into your broswer
When openning a tag we use "<" and ">" to incate that the tag is open. When finished with a tag we close it by adding a slash infront of it.Eg, </> closes a tag.
The Elements Of Html Language:
Ok, now that we got the basics of HTML we are going to move on to the elements of HTML.
When you have the elements of HTML it defined what the tag's job is or what it is supposed to do
Eg,
<a href="Http://www.zer0-stidos.com"</a> It defines the code to go to Zer0 Studios
So basically in easier lanuage, the elements of html language tell the code its job or what it is supossed to do.
Here is another example,
<html>
<head>
<title>This Will Show Up As The Title In The Top Left Of Your Browser.</title>
</head>-------->> Remember this will not be shwon in the browser.
<body>
Here You Can Right Whatever You Please As Your Body Content.< b> <<This tag makes your font/text BOLD</b>
</body>
This defines that there is going to be a body content shown when you open your browser.
The Tags Of Html:
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<code> Defines computer code text
<kbd> Defines keyboard text
<samp> Defines sample computer code
<tt> Defines teletype text
<var> Defines a variable
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines an address element
<bdo> Defines the text direction
<blockquote> Defines a long quotation
<q> Defines a short quotation
<cite> Defines a citation
<a> Defines an anchor
The tags of HTML are used to indicate what code you you are using, for example
List Tags:
These are used to list whatever you want.
<li>Text Here</li>
<li>Text Here</li>
<li>Text Here</li>
<li>Text Here</li>
<li>Text Here</li>
You can make as many tags as you want.
Headins Tags:
<h1>This Is My First Heading</h1>
<h2>This is My Second Heading</h1>..........You can go on and on. It depends how many headings you want.
Paragraph Tags:
<p> PARAGRAPH GOES HERE </p>
<p> Another Paragraph here </>..........As i said abovem you can go on and on.
Closing Tags:
We learnt this above but i will do it one more type to make sure you understand it.
Try to find the mistake here.
<li>TEXT HERE
<li>TEXT HERE
Pretty easy isnt it?
We forgot to close the tags. If you do not close the tags that code will show up in your web broswer the way it is.
So it is very important to close your tags.
Here is the Mistake corected so that it doesnt show in your web broswer, only the text that is between the tags.
<li>This Will Show But Not The Tags</li><--- Since we corrected it your list will now show with tags wraped around the text.
Break Tags:
Break tags are used often to make lists, so that text isnt beside eachother.
This is an example of the Break Tags not being used in a navagation content:
Home,Jobs,Staff,Tutorials.
Now to make that text a list you would do this,
<li>Home</li><br /> This is the same thing as pressing enter when your on notepad, it breaks a new line.
<li>Jobs</li><br /> Yet again, another stating line.
<li>Staff</li><br /> And again
<li>Tutorial</li>Again, you can go on and on with HTML tags.
When people view your html source, you can add comments etc. to let them know what their using, or basically anything you want to say.
<!-- This is a comment --> <-- You have to put it before you open a tag. Make sure you have an exclamtion mark at the openning of the tag,
not the end.
Horizontal Line Tag:
HTML coders often use this to seperate paragraphs or even in tables
Attributes:
Attributes are used to provide more information to an HTML element. Attributes always come in name/value pairs.
For Example,
name="value".
In This example it will define a staring of a list that has additional information about the alignment.
<li>TEXT HERE ETC
<li>TEXT HERE ETC algin="center" <-- this string show that when you make your list it will be centered.
Here is anoter Example,
<body> defines the HTML Document that you are starting a body content, but if you add:
<body bgcolor="yellow"> It has added information of a yellow background, so when you open your browser your body's background will be yellow.
HTML Links:
When you want to make a link in your navagation we use a the Anchor Tag and Href Attribute.
An anchor can point to basically anything you want on the web:images,a sound,a file or a site. Theres many more.
This is an example of a site
<a href="http://www.zer0-studios.com">Visit Zer0 Studios</a>
This text will be displayed as whatever you want to call your link, in this case
im going to call it "Visit Zer0 Studios".
When you click on that link, you will be directed to the site you chose. In this case, you will be directed to Zer0 Studios.
Now, to make an image a hyper link, or a link you would do this code:
<a href="www.zer0-studios.com"><img src="BANNER.GIF"></a>
This code tells the HTML Document that the image your clicking on will redirect you to Zer0 Studios.
Another way to make a link to a website is the Target Attribute. With this attribute it tells you where linked document will be opened.
Eg,
<a href="www.Zer0-Studios.com/"
target="_blank">This Is The HTML Tutorial.</a> <----Its practically the same thing as <a href="http://www.zer0-studios.com">Visit Zer0 Studios</a>.
HTML Frames:
When frames are used, you can display one or more HTML Documents in the same browser window. Every HTML Document is called a frame.
If you want to use a frame in your HTML Coding you would need the <frameset> tag, this defines how to devide the page into frames.
Eg.
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
In this example we have the frameset code with two columns. The first column is set so it is 25% of the width of the page your on or your browser.
The second column defines that the second half of the frame is 75% the width of the browser or the page your on.
"frame_a.htm" is put in the area of what you set 25%. Whatever you place in there stays 25% width no matter how big it is.
"frame_b.htm is put in the area you set 75%. Whatever you place in there stays 75% width no matter how big it is
When using framset "frame_a.htm"> and "frame_b.htm" will be on the same page together.
In the "fram_a.htm" part you put whatever page you want. Example,
<frameset cols="25%,75%">
<frame src="mypage.htm">Shows this in the first frame
<frame src="navagation.htm"> This would show the navagation in the second frame.
</frameset>
Thank you for reading this tutorial. i cba to do the rest right now as i am very busy, part 2 will come out with the following things:
Lists
Forms
Images
Background
Colors
Colorvalues
Colornames
After Part 2 I hope you master HTML!! Thanks for reading!!
The basics of html are nothing but basic things, of course. As you read this tutorial you may or may not succeed in html.
Now to get started.
The first thing you need to know is what HTML stands for. Hyper Tezt Markup Language. An Html file is a type of computer language that contains small markup tags that you can use to devlop this like websites,games, and lots more stuff. To diplay a html file it must have a htm file extension which allows the code to transfer to a web broswer. An html file can easily be made in any text editor.Eg.Notepad,Wordpad and lots more programs out there.
Here is a simple code of what most beginners use to start the basics.
<html>
<head>
<title>This Will Show Up As The Title In The Top Left Of Your Browser.</title>
</head>
<body>
Here You Can Right Whatever You Please As Your Body Content.<b><< These Make Your Text BOLD</b>
</body>
</html>
The tag "<html>" allows your broswer to indicate that this is the starting of a HTML Document.
Anything that is displayed between <html> and the end of the tag </html> is not shown when you open your browser. But if you
want text to be shown in your browser you enter text between <body> and the end of the tag </body> and will be displayed into your broswer
When openning a tag we use "<" and ">" to incate that the tag is open. When finished with a tag we close it by adding a slash infront of it.Eg, </> closes a tag.
The Elements Of Html Language:
Ok, now that we got the basics of HTML we are going to move on to the elements of HTML.
When you have the elements of HTML it defined what the tag's job is or what it is supposed to do
Eg,
<a href="Http://www.zer0-stidos.com"</a> It defines the code to go to Zer0 Studios
So basically in easier lanuage, the elements of html language tell the code its job or what it is supossed to do.
Here is another example,
<html>
<head>
<title>This Will Show Up As The Title In The Top Left Of Your Browser.</title>
</head>-------->> Remember this will not be shwon in the browser.
<body>
Here You Can Right Whatever You Please As Your Body Content.< b> <<This tag makes your font/text BOLD</b>
</body>
This defines that there is going to be a body content shown when you open your browser.
The Tags Of Html:
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<code> Defines computer code text
<kbd> Defines keyboard text
<samp> Defines sample computer code
<tt> Defines teletype text
<var> Defines a variable
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines an address element
<bdo> Defines the text direction
<blockquote> Defines a long quotation
<q> Defines a short quotation
<cite> Defines a citation
<a> Defines an anchor
The tags of HTML are used to indicate what code you you are using, for example
List Tags:
These are used to list whatever you want.
<li>Text Here</li>
<li>Text Here</li>
<li>Text Here</li>
<li>Text Here</li>
<li>Text Here</li>
You can make as many tags as you want.
Headins Tags:
<h1>This Is My First Heading</h1>
<h2>This is My Second Heading</h1>..........You can go on and on. It depends how many headings you want.
Paragraph Tags:
<p> PARAGRAPH GOES HERE </p>
<p> Another Paragraph here </>..........As i said abovem you can go on and on.
Closing Tags:
We learnt this above but i will do it one more type to make sure you understand it.
Try to find the mistake here.
<li>TEXT HERE
<li>TEXT HERE
Pretty easy isnt it?
We forgot to close the tags. If you do not close the tags that code will show up in your web broswer the way it is.
So it is very important to close your tags.
Here is the Mistake corected so that it doesnt show in your web broswer, only the text that is between the tags.
<li>This Will Show But Not The Tags</li><--- Since we corrected it your list will now show with tags wraped around the text.
Break Tags:
Break tags are used often to make lists, so that text isnt beside eachother.
This is an example of the Break Tags not being used in a navagation content:
Home,Jobs,Staff,Tutorials.
Now to make that text a list you would do this,
<li>Home</li><br /> This is the same thing as pressing enter when your on notepad, it breaks a new line.
<li>Jobs</li><br /> Yet again, another stating line.
<li>Staff</li><br /> And again
<li>Tutorial</li>Again, you can go on and on with HTML tags.
When people view your html source, you can add comments etc. to let them know what their using, or basically anything you want to say.
<!-- This is a comment --> <-- You have to put it before you open a tag. Make sure you have an exclamtion mark at the openning of the tag,
not the end.
Horizontal Line Tag:
HTML coders often use this to seperate paragraphs or even in tables
Attributes:
Attributes are used to provide more information to an HTML element. Attributes always come in name/value pairs.
For Example,
name="value".
In This example it will define a staring of a list that has additional information about the alignment.
<li>TEXT HERE ETC
<li>TEXT HERE ETC algin="center" <-- this string show that when you make your list it will be centered.
Here is anoter Example,
<body> defines the HTML Document that you are starting a body content, but if you add:
<body bgcolor="yellow"> It has added information of a yellow background, so when you open your browser your body's background will be yellow.
HTML Links:
When you want to make a link in your navagation we use a the Anchor Tag and Href Attribute.
An anchor can point to basically anything you want on the web:images,a sound,a file or a site. Theres many more.
This is an example of a site
<a href="http://www.zer0-studios.com">Visit Zer0 Studios</a>
This text will be displayed as whatever you want to call your link, in this case
im going to call it "Visit Zer0 Studios".
When you click on that link, you will be directed to the site you chose. In this case, you will be directed to Zer0 Studios.
Now, to make an image a hyper link, or a link you would do this code:
<a href="www.zer0-studios.com"><img src="BANNER.GIF"></a>
This code tells the HTML Document that the image your clicking on will redirect you to Zer0 Studios.
Another way to make a link to a website is the Target Attribute. With this attribute it tells you where linked document will be opened.
Eg,
<a href="www.Zer0-Studios.com/"
target="_blank">This Is The HTML Tutorial.</a> <----Its practically the same thing as <a href="http://www.zer0-studios.com">Visit Zer0 Studios</a>.
HTML Frames:
When frames are used, you can display one or more HTML Documents in the same browser window. Every HTML Document is called a frame.
If you want to use a frame in your HTML Coding you would need the <frameset> tag, this defines how to devide the page into frames.
Eg.
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
In this example we have the frameset code with two columns. The first column is set so it is 25% of the width of the page your on or your browser.
The second column defines that the second half of the frame is 75% the width of the browser or the page your on.
"frame_a.htm" is put in the area of what you set 25%. Whatever you place in there stays 25% width no matter how big it is.
"frame_b.htm is put in the area you set 75%. Whatever you place in there stays 75% width no matter how big it is
When using framset "frame_a.htm"> and "frame_b.htm" will be on the same page together.
In the "fram_a.htm" part you put whatever page you want. Example,
<frameset cols="25%,75%">
<frame src="mypage.htm">Shows this in the first frame
<frame src="navagation.htm"> This would show the navagation in the second frame.
</frameset>
Thank you for reading this tutorial. i cba to do the rest right now as i am very busy, part 2 will come out with the following things:
Lists
Forms
Images
Background
Colors
Colorvalues
Colornames
After Part 2 I hope you master HTML!! Thanks for reading!!
Last edited:
)
