Tutorial [Basics] Learning HTML - Step Two [/Basics]

Ultimatum · 09-24-2012, 01:18 PM

Hey guys!

I'm glad to present the "Step Two" guide for HTML to AnarchyForums. The first thread seemed to appeal for you guys, and this was also reflected in the poll I set. This guide will take it further from where we left off, and depending on your feedback I will continue to make these for you all to see. I have decided not to go straight into very difficult HTML, because there are still people that need to learn from this and I think both Advanced and Beginners can benefit from this tutorial. :thumbsup:. Also I would like to let you guys know that if you have any questions you can PM me or post below, and I will answer your question right away. Take note I am not doing coding services.

What's in for Today?

HTML Attributes
HTML Formatting
HTML CSS
HTML Tables

HTML Attributes

What are HTML Attributes?

HTML Attributes provide extra data/information about a specific element. I spoke of elements in my previous tutorial, now we are going to build up from that. These attributes are specified within the starting tag. They come in pairs such as:

Code:
name="putavalueinhere"

Using Attributes in HTML

As I spoke before in the previous tutorial, linking is used with the "<a>" tag. But to specify that the shown text is linked to a external/internal link, attributes have to be added.

Code:
<a href="http://anarchyforums.net">This is the display text. If you click on this it will link you to anarchyforums.</a>

The attribute in this is the "href="http://anarchyforums.net"". It was the extra information provided for the browser to work at.

Testing HTML Files Locally

You can test that the above will work if you try this locally on your computer by doing the following:

1. Click on Start
2. Type into the search bar "Notepad" without the quotations
3. Open Notepad
4. Type in the following:

Code:
<html>

<body>

<a href="http://anarchyforums.net">This is the display text. If you click on this it will link you to AnarchyForums.</a>

</body>

</html>

5. Save it as .html by changing the extension
6. Now it should be in .html form you can double-click
7. Your default web-browser should open and this text will be displayed: "This is the display text. If you click on this it will link you to AnarchyForums."
8. If you put your mouse over the text it should be under-lined, this symbolises that it is linked.
9. Click on it and AnarchyForums should open

Commonly used Attributes

Some of these common attributes out of many.

[Image: 49daa30d9f40bac770114f150744739c.png?1338034280]

[Image: 49daa30d9f40bac770114f150744739c.png?1338034280]

To find a full complete list you may go here.

HTML Formatting

Now, simple formatting is very useful when you are trying to emphasise a specific sentence or word to stand out to the reader/user.

Bold

To bolden a word or sentence you use the tag "<b>" and of course to end it "</b>".

Code:
<html>

<body>

<b>If you put this into a .html file and run this locally taught above it will be bolder than</b> this.

</body>

</html>

You can combine codes together when you start learning more elements to add in :thumbsup:. And try to be creative when doing so.

Italics

Italic texts on HTML is very similar to making text bold, element wise. You only need to replace the "b" with an "i".

Code:
<html>

<body>

<i>This text will be italic. Make sure that the words you want in italic are in between these tags otherwise they become like</i> this.

</body>

</html>

[Image: 86acef8142283e1e88addfc60a351534.png?1338535452]

To find the rest look here.

HTML CSS

Ok. Now you want to make your HTML files sexy and attractive to whatever need they may be for. To do this we may use something called "CSS". Which stands for "Cascading Styles Sheet ". They are used to style HTML Elements which I spoke of earlier.

Now, CSS can be implemented in a few different ways:

Inline - Using style attributes within HTML elements
Internal - using <style> as its own element, which is placed in the <head> section
External - Create an entirely separated .css file which can be "included" into the HTML file.

Inline

Inline CSS in HTML is where you specify "real-time" what something is going to be styled.

Code:
<body style="color:green;margin-left:50px;">

Lol. Now everything within the body will be green unless stated otherwise. XD

</body>

You can then go with the text background blocky like colour:

Code:
<body style="background-color:blue;">

Lol. Now everything within the body will be blue, but it will be background of the text :D

</body>

Obviously, you don't have to keep using the element body, but you can use like <h2 style="background-color:blue;">This will be size h2 and with a background colour of blue.</h2>

Cool eh? :victoire:

And you can put a lot of that together:

Code:
<html>

<body>

<h1 style="font-family:arial;">lulz</h1>

<p style="font-family:verdana;color:blue;font-size:30px;">Meow</p>

</body>

</html>

Can't figure what the output might? Give it a shot!

Internal Style Sheet

Here you can define a certain place to be specifically of a design, which instead of putting it straight into the element it has its own. It is all placed in the <head> which is before the <body>

Code:
<head>

<style type="text/css">

body {background-color:green;}

p {color:blue;}

</style>

</head>

Basically when a text is placed into the <body> it will be with a background colour of green, and anything using the <p></p> will be coloured blue. Make sure you spell "color" in HTML not "colour", because it is using US English. If you use "colour", it will not be recognised as "color".

External Style Sheets

This is normally used if there is a lot of styling required and also is easier to manage, but for this to work, it has to be "included" and loaded into a .html file when it runs so that it filters out for its work.

Code:
<head>

<link rel="stylesheet" type="text/css" href="basicallyyouhavetohaveitinthesamedirectorybutifnotlookbelow.css" />

</head>

Different directory?

Code:
<head>

<link rel="stylesheet" type="text/css" href="/randomdirectory/meow.css" />

</head>

Basically that's all you need to put.

HTML Tables

Tables will become very useful when you are using HTML. It helps align and asort information into very neat tables, which can obviously be modified to your own needs or wants.

Now, to start off, you need to have the whole table set up in the tag:
<table></table> There are obviously stuff to put inside, but those tags define the start of a table.

<th></th> This symbolises a header in the table.
<tr></tr> This symbolises a table row.
<td></td> And this symbolises a cell in the table.

To border the table we can use a attribute:

Code:
<table border="1">

You can change the thickness by changing the 1 to greater digits.

This is a full table example:

Code:
<table border="1">

<tr>

<th>This is the First Header</th>

<th>This is the Second Header</th>

</tr>

<tr>

<td>row 1 cell 1</td>

<td>row 1 cell 2</td>

</tr>

<tr>

<td>row 2 cell 1</td>

<td>row 2 cell 2</td>

</tr>

</table>

Output:

[Image: cffee1f0ee2fda5d19772efa2c6dba84.png?1338553059]

Get the idea?

Here is a good list:

[Image: bc04dabbffa5a2061d39e68cd014f31f.png?1338552988]

Thank You!

Thanks for your support guys! :yeye: I will setup another poll to whether you want a Part 3 or not. I will keep going until it goes advanced if the polls remain positive enough I guess.

Hope this tutorial helped!