Arsenal
11-11-2008, 10:52 PM
Welcome to my Basics of HTML Tutorial!
Here you shall learn what is needed to learn the basics of the web language HTML. But before we start,
What is HTML exactly?
Html stands for Hypertext Mark-up Language and is the programming language used to create documents for display information around the WWW(World Wide Web).
Now that we've gotten that sorted, we can start on the very first lesson.
Purpose: To teach new coders the basics of the web language, HTML.
Difficulty: 2.5. It all depends on how wiling you are to learn it and how much time you put into it.
Requirements: Notepad(You can use programs such as Microsoft FrontPage and Dreamweaver as well), Common knowledge on how to read and follow instructions.
Epilogue:
MAKE SURE YOU ALWAYS PUT THIS BEFORE <HTML>!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">This just tells the browser what the hell you are doing.
Step 1:
First step, guessing that you don't have Frontpage or Dreamweaver, open up notepad and enter the following code into it.
<html>
<body>
This is where your information will go.
</body>
</html>
Each one of these are called a "Tag". There are opening tags < > and closing tags < / > . Each tag must have a closing tag to finish the line of information.
Now that you know what a tag is, we can move on and tell you what each one means.
<html> Is the opening tag that starts everything off and everything between that and the </html> closing tag, is a HTML document.
The stuff between <body> and </body> is the main content of the document and everything between it, will be displayed on the web page.
The </html> and </body> are their respective tags. By this I mean they close your opening tags, <html> and <body> Each opening tag MUST have a closing tag and vice versa.
BUT not all tags have closing tags(by this I mean, example, <html></html>)! Some tags that don't wrap around content, will automatically close themselves. A tag that does this is the line-break tag that looks like this <br /> I'll cover what that tag does later in following tutorials/steps.
Attributes and Elements
Tags(< >) can have attributes which is extra bits of information. They will always appear inside an opening tag and the value will always be in quotation marks(""). Example; <tag attribute="value">HELLO!</tag>
Elements are the bits that make up a web-page. Example; Everything between <body> and </body> is the body element of that page. There are many more examples, <title>Title</title> Between the Title tags, would be the Title element. If you need further assistance with this area, contact me.
Page Titles
You might be going, "What do you mean by page title?" By page title, I mean. Where ever you have a Tab open, see where it has, example; Dodian Forums - Powered by ... On the tag? That is what the page title is. So to make a page title we need to do the following. In your notepad, replace it with this code.
<html>
<head>
<title>Your Title Here</title>
</head>
<body>
Information Here
</body>
</html> Where we have now declared a title for our site. You might now look at it and go, "What does <head></head> mean?" <Head></head> just means anything the appears before the <body></body> element and contains information about the page you're on. You will also (usually) link your site to the CSS file you are using. I will go into more detail later.
<Title></Title> Means exactly what I stated in the opening sentence of this topic. It displays the information about the page and what ever you have in the <title></title> elements, will appear in the title of the bar window.
Paragraphs
In your notepad, add another line below the first line.
<html>
<head>
<title>Title</title>
</head>
<body>
Information Here.
Second Line Here.
</body>
</html> Because your browser doesn't know that you want the information on different lines, you're going to have to do this if you do.
<p>Information here</p>
<p>Second Line Here.</p>
What we have just done is started a new paragraph for both. <p></p> are the paragraph tags and are used to start a new paragraph of information, etc.
Since you have changed them so that they've got the paragraph tags, they will now appear on different lines.
Making the text, Bold or italics!
Ok you might be wondering, "I want my text in bold or in italics, how do I do this?"
To make your text in bold, all you have to do, is simple wrap any content around with one of the following tags, <b></b>, <em></em>, <strong></strong>. Each one of those tags will turn any information or content BOLD!
To make your text in italics, you just simple wrap any given content with the following tag. <i></i> This tag will turn any content into italics!
Line-Break
As stated earlier in the tutorial, there was a tag that didn't need to have a closing tag because it closed itself. Well now it is time to explain what the <br /> tag does!
The <br /> tag is another way to separate content onto different lines and that is why it is called, the 'Line-Break' tag. You might also be wondering "But how does it close itself?"
It closes itself by having the "/" after the letters "br." <br /> Since it does not wrap itself around content. You will use the <br /> tag at the end of a sentence or line to declare that a new line has been started.
Headings!
There are different types of headers, <H1>, H2,H3,H4,H5 and H6. H6 being the smallest and H1 being the largest. Remember, they all have closing tags, </h1></h2> etc.
To make a text or content into a header, you need to wrap it around with the header you want, so add this into your notepad.
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Header 1</h1>
<h2>Header 2.</h2>
<p>Paragraph</p>
<h2>Header 2</h2>
<p>Info.</p>
</body>
</html> You should only use H1 once as it is meant to be the main heading of the page. H2-H6 can be used as much as you want.
Lists
There are two basic types of lists. There is the un-ordered list and then there is the ordered list. Ordered lists are declared by using the tag <ol></ol> whilst un-ordered lists use <ul></ul>. Within lists, you will always use <li></li> to tell the document, that that sentence, line, word, phrase, etc, is apart of the list and is inside of it.
Replace your HTML document with this.
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Header 1</h1>
<h2>Header 2.</h2>
<p>Paragraph</p>
<h2>Header 2</h2>
<p>Info.</p>
<ul>
<li>First point.</li>
<li>This is an un-ordered list.</li>
<li>I love Arsenal. =]</li>
</ul>
</body>
</html>As you can see, un-ordered lists have bullet points. You can also have more then one type of lists within a list. Copy and paste this code below, replacing your current document.
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Header 1</h1>
<h2>Header 2.</h2>
<p>Paragraph</p>
<h2>Header 2</h2>
<p>Info.</p>
<ul>
<li>Lists</li>
<li>
I win.
<ol>
<li>Nice.</li>
<li>As you can see, the ordered list, has numbers.</li>
<li>I AM A BANANA!</li>
<li>My spoon is too big.</li>
</ol>
</li>
<li>Oh wow.</li>
</ul>
</body>
</html>As you can see, lists are quite simple. There are a few more types of lists, but they will be explained through-out my other tutorials.
Continued on next post.
Here you shall learn what is needed to learn the basics of the web language HTML. But before we start,
What is HTML exactly?
Html stands for Hypertext Mark-up Language and is the programming language used to create documents for display information around the WWW(World Wide Web).
Now that we've gotten that sorted, we can start on the very first lesson.
Purpose: To teach new coders the basics of the web language, HTML.
Difficulty: 2.5. It all depends on how wiling you are to learn it and how much time you put into it.
Requirements: Notepad(You can use programs such as Microsoft FrontPage and Dreamweaver as well), Common knowledge on how to read and follow instructions.
Epilogue:
MAKE SURE YOU ALWAYS PUT THIS BEFORE <HTML>!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">This just tells the browser what the hell you are doing.
Step 1:
First step, guessing that you don't have Frontpage or Dreamweaver, open up notepad and enter the following code into it.
<html>
<body>
This is where your information will go.
</body>
</html>
Each one of these are called a "Tag". There are opening tags < > and closing tags < / > . Each tag must have a closing tag to finish the line of information.
Now that you know what a tag is, we can move on and tell you what each one means.
<html> Is the opening tag that starts everything off and everything between that and the </html> closing tag, is a HTML document.
The stuff between <body> and </body> is the main content of the document and everything between it, will be displayed on the web page.
The </html> and </body> are their respective tags. By this I mean they close your opening tags, <html> and <body> Each opening tag MUST have a closing tag and vice versa.
BUT not all tags have closing tags(by this I mean, example, <html></html>)! Some tags that don't wrap around content, will automatically close themselves. A tag that does this is the line-break tag that looks like this <br /> I'll cover what that tag does later in following tutorials/steps.
Attributes and Elements
Tags(< >) can have attributes which is extra bits of information. They will always appear inside an opening tag and the value will always be in quotation marks(""). Example; <tag attribute="value">HELLO!</tag>
Elements are the bits that make up a web-page. Example; Everything between <body> and </body> is the body element of that page. There are many more examples, <title>Title</title> Between the Title tags, would be the Title element. If you need further assistance with this area, contact me.
Page Titles
You might be going, "What do you mean by page title?" By page title, I mean. Where ever you have a Tab open, see where it has, example; Dodian Forums - Powered by ... On the tag? That is what the page title is. So to make a page title we need to do the following. In your notepad, replace it with this code.
<html>
<head>
<title>Your Title Here</title>
</head>
<body>
Information Here
</body>
</html> Where we have now declared a title for our site. You might now look at it and go, "What does <head></head> mean?" <Head></head> just means anything the appears before the <body></body> element and contains information about the page you're on. You will also (usually) link your site to the CSS file you are using. I will go into more detail later.
<Title></Title> Means exactly what I stated in the opening sentence of this topic. It displays the information about the page and what ever you have in the <title></title> elements, will appear in the title of the bar window.
Paragraphs
In your notepad, add another line below the first line.
<html>
<head>
<title>Title</title>
</head>
<body>
Information Here.
Second Line Here.
</body>
</html> Because your browser doesn't know that you want the information on different lines, you're going to have to do this if you do.
<p>Information here</p>
<p>Second Line Here.</p>
What we have just done is started a new paragraph for both. <p></p> are the paragraph tags and are used to start a new paragraph of information, etc.
Since you have changed them so that they've got the paragraph tags, they will now appear on different lines.
Making the text, Bold or italics!
Ok you might be wondering, "I want my text in bold or in italics, how do I do this?"
To make your text in bold, all you have to do, is simple wrap any content around with one of the following tags, <b></b>, <em></em>, <strong></strong>. Each one of those tags will turn any information or content BOLD!
To make your text in italics, you just simple wrap any given content with the following tag. <i></i> This tag will turn any content into italics!
Line-Break
As stated earlier in the tutorial, there was a tag that didn't need to have a closing tag because it closed itself. Well now it is time to explain what the <br /> tag does!
The <br /> tag is another way to separate content onto different lines and that is why it is called, the 'Line-Break' tag. You might also be wondering "But how does it close itself?"
It closes itself by having the "/" after the letters "br." <br /> Since it does not wrap itself around content. You will use the <br /> tag at the end of a sentence or line to declare that a new line has been started.
Headings!
There are different types of headers, <H1>, H2,H3,H4,H5 and H6. H6 being the smallest and H1 being the largest. Remember, they all have closing tags, </h1></h2> etc.
To make a text or content into a header, you need to wrap it around with the header you want, so add this into your notepad.
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Header 1</h1>
<h2>Header 2.</h2>
<p>Paragraph</p>
<h2>Header 2</h2>
<p>Info.</p>
</body>
</html> You should only use H1 once as it is meant to be the main heading of the page. H2-H6 can be used as much as you want.
Lists
There are two basic types of lists. There is the un-ordered list and then there is the ordered list. Ordered lists are declared by using the tag <ol></ol> whilst un-ordered lists use <ul></ul>. Within lists, you will always use <li></li> to tell the document, that that sentence, line, word, phrase, etc, is apart of the list and is inside of it.
Replace your HTML document with this.
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Header 1</h1>
<h2>Header 2.</h2>
<p>Paragraph</p>
<h2>Header 2</h2>
<p>Info.</p>
<ul>
<li>First point.</li>
<li>This is an un-ordered list.</li>
<li>I love Arsenal. =]</li>
</ul>
</body>
</html>As you can see, un-ordered lists have bullet points. You can also have more then one type of lists within a list. Copy and paste this code below, replacing your current document.
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Header 1</h1>
<h2>Header 2.</h2>
<p>Paragraph</p>
<h2>Header 2</h2>
<p>Info.</p>
<ul>
<li>Lists</li>
<li>
I win.
<ol>
<li>Nice.</li>
<li>As you can see, the ordered list, has numbers.</li>
<li>I AM A BANANA!</li>
<li>My spoon is too big.</li>
</ol>
</li>
<li>Oh wow.</li>
</ul>
</body>
</html>As you can see, lists are quite simple. There are a few more types of lists, but they will be explained through-out my other tutorials.
Continued on next post.