SRL Archive - Computer Help and Tutorials

This is a tutorial on the VERY basics of using HTML.

1) Tags/Elements
2) Tables
3) Attributes
4) Colors

Introduction:
HTML Stands for Hypertext Markup Language. It is the basic building blocks of most websites. It can also be used in some forums (Although that can be limited).
This tutorial is the SUPER basics of HTML.


1) Tags/Elements
Tags/Elements are what comprise from HTML

They are as follows:

<p>
This is NKN's favourite HTML code. This produces a paragraph line wherever you put this. Which is usually a 2 line drop.

E.g

This is a html example of how you would use a paragraph<p>

It can also be done like this
<p>
With the paragraph underneath

<br>
br is a line break, instead of dropping down 2 lines it drops down one.

This is an example of how to use line breaks, this is similar to a paragraph <br> 
Except it is a one line drop rather than 2.

As you have noticed I have a personal preference to not close the tags. However,

From: grats
not closing p tags makes it look weird in 3D

Greg likes to close them xD


<h1></h1>
H tags come standard in HTML but can be re-changed in the Stylesheets if you want to.
H tags are essentially header tags which allow you to make specific text look bigger, they are very good with SEO as well.

Header tags are used within the tags itself

e.g.

<H1>This is a header 1 tag</H2>
<H2>This is a header 2 tag</H2>

<a href=""></a>

These are hyperlinks, Everytime you click that little icon above with the planet and clip.
<a> is the symbol for hyperlink, but now we are expanding into attributes. href="" is an attribute which means hypertext reference.

Anything between the =" " is the hyperlink, this can be done locally like so:

href="/pages/index.html"

or as an external page, like so:

href ="http://www.villavu.com/"

Overall it would look like this:

<a href="http://villavu.com/">Text or image being hyperlinked here</a>

2) Div Tags

Div tags are essentially boxes. It's good to think of them like this due to their standard structure, although they can be manipulated to be rounded etc.
Div tags can be assigned to a Cascading Style Sheet (CSS for short). So lets jump in!

CSS can be used with a separate document or a <style> tag. We will be using a separate document.


stylesheet.css:

#Box {
}

Index.html:

@import url('stylesheet.css');
<div id="Box"></div>

So essentially this is creating a 0px by 0px box on the web page with no preferences, Lets mess about!
In the Style sheet let's change box!

#Box {

      Width: 50px;
      Height: 50px;
      Background: #000;
 }

Now we will have a 50px by 50px Box in black!

That is the basics of Div tags and Stylesheets

3) Attributes

Inside tags we can have attributes. Think of these as accessories. The tag is a person and the attributes are part of them.

<person [B]Hair[/B]="Blonde" [B]Size[/B]="6ft" [B]Trousers[/B]="Blue"> </person>

^^ This isn't real but I hope it makes you understand :P

So lets take a real example!

<a [B]href[/B]="http://villavu.com/forum/">This is a link</a>

Can you spot the Attribute? If not, look closer I bolded it ;)

4) Colors

Colors are pretty simple, next to NOTHING about this section. I 100% advise using use HEX Code.

So lets take that css idea again.

#Box {

      Width: 50px;
      Height: 50px;
      Background: [URL=http://villavu.com/forum/usertag.php?do=list&action=hash&hash=000]#000[/URL] ; //THIS BIT IS THE HEX CODE
 }

So before we do any Coloring we need to use the Hash key.

#HexColorCode .

#000 is black

#fff is white.

You can use tools such as gimp and photoshop to get hex codes or simply use the tools online :)

I got mentioned. -feels important-

GJ so far

Why don't you close p-tags?

From: superuser
Why don't you close p-tags?

Despite being good practice, it isn't really necessary in the HTML specification (and even though it is good practice, I know many many 'developers' that don't close them).

From: Daniel
Despite being good practice, it isn't really necessary in the HTML specification (and even though it is good practice, I know many many 'developers' that don't close them).

Daniel hit it on the head, I've never seen a need to close P tags as it is pretty much a drop down :)

not closing p tags makes it look weird in 3D

From: grats
not closing p tags makes it look weird in 3D

Thanks Greg… I will quote that in the thread o.o

#PHP

Dem inside jokes ;D

From: Daniel
Despite being good practice, it isn't really necessary in the HTML specification (and even though it is good practice, I know many many 'developers' that don't close them).

When using closing tags, they provide structure. Also, CSS and JavaScript hook on the full elements. And if you plan on moving to XHTML, it's good to use closing tags already now..

From: xtrapsp
Thanks Greg… I will quote that in the thread o.o

Lol, you don't have to put I like to close them in there… bluefish automatically types <p></p> when I just type <p

http://i.imgur.com/7NAyB.jpg
http://i.imgur.com/WVQZf.jpg

but not closing <p> just makes this build up more & more since you open bunches of stuff with no closes :P
also I have to disagree with what was said in this thread, I have never really seen any sites that don't close it.. (because everyone uses editors that automatically do I'd assume…) but anyway - of all the web devs I know, they close them too