User blog:Penguin-Pal/Tutorial - HTML - Part 2

Hello again,

So this is part #2 of the HTML tutorial that i post. On this part, we will talk about the basic syntaxt of HTML and how to style your text.

So, HTML is a language that is based on tags. Everything in the document is placed inside a tag. There are many different tags where each one of them is used for a different application and has special characteristics. Each tag has an opening and closing version, to mention when to start applying it and when to end it (note: there are several tags that do not have a closing tags, but don't worry- we'll discuss about tehm later ;) ).

An opening tag and its closing tag and everything between them is called an "element".

Basically, a look like this: This is an opening tag. As you can see, it has a "greater than" sign before the tag name, and a "smaller than" sign after the tag name. When closing an eleent, the closing tag looks like this: As you can see, it looks just like the opening tag, but has a slash (/) before the tag name.
 * Note! A very minor yet important detail to remember is to use slash / when closing an element and not the forward slash (\).

And the basic structure of an element looks like this: content As you can see, i made some spaces in the preview above. Spacing is used very frequently to make changing things very easy. You can basically make an entire web page in an entire line, but then finding stuff when editing and changing things will be time consuming.

Tags
So now, lte's move on to the next part. What are tags used for? And why are there different tags? Well, there are more tags than anyone needs to reember for most tasks, but the tags, like the span, div and paragraph were made so that you can create different types of content when using a small number of letters. If you were to design a web page from a really small number of tags, you would need a very log web page just for giving each one of the tags the style that you want to apply to it. A large variety of tags allows using different characteristics for tags for cery short pages that can be easily read.

Here are the basic tags that are available in HTML. I'll write next to them for what tehy are used, afterwards i would explain how to use each one.

So those are the most commonly used HTML tags. There are some other important tags, but ask i said, it's more important to learn the basics first. I expanded below about the tags and added examples. I will show on the next tutorial part how you can style them as well.

p
The p (paragraph) tag is used for whiting text, and can also be used for containing media, images, and so on. This is an example for a p tag that contains some text: Hello world! Which will write in a new paragraph "Hello world!".

span
The span tag is used for containing certain text inside other elements. For instance, if you want to make change the color of a certain text in the paragraph, you would use something similar to this: Hello world! Which results: Hello world! Right now, you don't have to understand how styling works. I just want to show you that the span tag is used for selecting text.<

div
The div tag behaves very much like the p tag, but it's often used for creating navigation bars, little menus, and other stuff. You can insiert inside the element text just like in the p tag, but you would usually place there other elements for creating a menu or something similar.

This is the syntax: Content

Headings
The heading tags are a group of 6 tags, which are used for creating titles. There are 6 levels of tags, all start with a letter h and followed by a number, like this: This is a H1 tag This is a H2 tag This is a H3 tag This is a H4 tag This is a H5 tag This is a H6 tag The higher the number is, the larger the heading is: This is a H1 tag This is a H2 tag This is a H3 tag This is a H4 tag This is a H5 tag This is a H6 tag

a
The a (anchor) tag is used, in its most basic form, for creating links. The opening tag looks like this: Bewteen the double quotation marks, you add the full URL of the web page that you want to link to. For instance: Link text It's important to remember to use the full url, not just www.example.com, but to add the  http://  or the  https://  as well.

Another thing to remember is that you cannot hasve spaces in URL addresses, therefore, instead of using a space in your link target, use %20 and not to be confused with an underscore (_).

There are some other ways to link to a URL. Those methods are used when linking to other files in the same website. I don't want to spend time on it, but if you'd like to know, just ask in the comments.

Tables
When creating a table, the table is always contained inside a table element. The table element looks like this:

tr
The tr tag is used for creating a row in a table. For each row, you need to create an opening and closing tags of the tr tag like this: This is an example for a table with 3 rows.

td
The td tag is used for creating table cells. It is written inside the tr element. For example: This is an example for a table with 3 rows and 2 columns. I mentioned on each cell where it is positioned:

th
The th tag is used for creating table headings. It is written just like the td tag, but also aligns the content to the center and makes the text bold. For example: Results:

li
The li tag is used for creating list items in ordered or unordered lists. This is its syntax: List item content I will show you on the next 2 sections how it is used.

ul
The ul list is used for creating an unordered list- which its items are not numbered. It is written like this:  List item 1 List item 2 List item 3 List item 4 List item 5 </ul> Which results: <ul> List item 1</li> List item 2</li> List item 3</li> List item 4</li> List item 5</li> </ul>

ol
The ol tag is used for creating ordered list. Its default form uses numbers, but you can also use letters, and so on.

This is its structure: <ol> List item 1</li> List item 2</li> List item 3</li> List item 4</li> List item 5</li> </ol> Which results: <ol> List item 1</li> List item 2</li> List item 3</li> List item 4</li> List item 5</li> </ol>

Note! It's important to remember that you can place a tag inside another tag. You can add an ordered list inside a list item of another ordered list like this: <ol> List item 1 <ol> <li>Sub-item 1</li> <li>Sub-item 2</li> <li>Sub-item 3</li> </ol> </li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> <li>List item 5</li> </ol> Which also works with the unordered list as well. It results: <ol> <li>List item 1 <ol> <li>Sub-item 1</li> <li>Sub-item 2</li> <li>Sub-item 3</li> </ol> </li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> <li>List item 5</li> </ol>

img
The img tag is used for displaying images. It is written in the following way: <img src="" width="" height=""> For example: <img src="http://www.example.com/media/smile.gif" width="50" height="50"> Another thing to remember is that if you're resizing an image, you need to make sure the the proportions of the original image and of the resized images are the same. Otherwise it would be over-streached.
 * In the double quotation marks after the src=, you add the full url of your target image.
 * In the double quotation marks after the width=, you add the width that you want to set to your image (number of pixels).
 * In the double quotation marks after the height=, you add the height that you want to set to your image (number of pixels).

The img tag is special because it does not have a closing tag, along with some other few tags.

One last thing, in the source of your image, where you type the full url, like in the a tag, there are also methods for linking directly to a file in the same website. Once again ,i don't want to spend too much about it here, but if you're interested, just mention in in the comments.

br
The br tag is used for creating line breaks. This is its syntax: In ordinary HTML, a white space is changed to an ordinary space. For example: Hello world Would look like this: Hello world But if you were to add a line break before, like this Hello world It would look like this: Hello world

Like the 'img tag, it doesn't have a closing tag.

Comments
Comments can be added to the HTML document in the following way: It is very helpful for describing what a line in your document does, for future updates.

Styling
On the next part i will be showing you how to style on elements, and how to do some other cool stuff.

Deprecation
One important thing to remember is that HTML has versions, and like on version, the system is updated. The current version is HTML 4.01. In newer versions, that are currently not used as a default, some tags from the current HTML versions were removed. If you read my blog about deprecated elements you probably know what they are, but if you haven't it definetly worth checking.

Last note
As i mentioned, the br and the img tags do not have a closing tags. If you ever create a website that is based on XHTML- which is a more advanced version of HTML, you need to close the tags in the following way: Though it doesn't need to bother you right now. Sites like Wikia jsut use the standard HTML, so there is no need to be concerned about this ;)