InvisionFree - Free Forum Hosting
Free Forums. Reliable service with over 8 years of experience.

Learn More · Register Now
Welcome to FFRessurection. We hope you enjoy your visit.


You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Name:   Password:


 

 #1 ff fan's basic HTML tutorial
#1 ff fan
Posted: Jun 16 2010, 01:28 AM


God of Classic Gaming


Group: Shadows
Posts: 220
Member No.: 19
Joined: 26-April 09



So you wanna start learning HTML? Cool, HTML is a great introduction to coding.

I shall not be able to show HTML in a working environment in this thread (to certain extents), but I will be able to describe the basic of HTML

Before I begin, i must make note that unless stated otherwise, you must close all of your tags. To close the tag, you just type the first part of that tag with a slash in front of it. For example, <A HREF="http://z8.invisionfree.com/FFRessurection"> would be closed with </A>

lets start with some easy stuff, Text formatting tags
<B> If you use BB code, you should know that it [*b] (without the * of course) is the tag for making bold text. <B> works the same way.
Example of use: I was going to have a bowl of cereal, but <B>SOMEONE</B> forgot to tell me that we were out of milk

Would look like

I was going to have a bowl of cereal, but SOMEONE forgot to tell me that we were out of milk

<I> Once again, this works just the same as the BB code. I is for Italics
Example: I <I>really</I> wish that I could have gone to E3 this year
I really wish that I could have gone to E3 this year

<U> Another one that you should know of if you use BB Code. This one is for underlining things
Example: I am going to see <U>Harry Potter and the Deathly Hallows<U> this winter
I am going to see Harry Potter and the Deathly Hallows this winter

<S> This is probably the only tag you rarely see a BB Code version for. Oddly enough though, these forums do have it...

Example: I managed to <S>con</S> persuade my best friend into giving me $5
I managed to con persuade my best friend into giving me $5

That is some of the basics that I know. Up next, page formatting
Top
#1 ff fan
Posted: Jun 17 2010, 10:56 PM


God of Classic Gaming


Group: Shadows
Posts: 220
Member No.: 19
Joined: 26-April 09



GAH! I didn't write one yesterday T_T oh well

Today's lesson: Page formatting

Most page formatting can be done with the <BODY> tag. this formatting is done like so: <BODY object="value">. object is the what you are formatting and value is what you are setting it to. You can have multiple things within the body tag, and I will show you now what those are

BGCOLOR: BGCOLOR is the basic color of the background. To change the colors, you can use the color name or the hex coding of colors. I will get into the hex code for colors later
USE: BGCOLOR="BLACK" or BGCOLOR="#000000"

TEXT: TEXT changes the default color of text.
USE: TEXT="BLACK" or TEXT="#000000"

::NOTE:: I obviously use black as the example because its just easier

LINK: LINK changes the default color of all the links on the page
USE: LINK="BLACK" or LINK="#000000"

VLINK: VLINK changes the color of any links you've visited
USE: VLINK="BLACK" or VLINK="#000000"

Thats all the ones I could remember off the top of my head... There is one for images as backgrounds, but I can't seem to remember what it is :(

another tag that I am going to make note in this post is <TITLE>. the <TITLE> tag is used for making a title for your page

if you put any text in between a title tags, it would appear as the title of the page at the top of your window.

Next lesson: Rules of HTML
Top
Marius
Posted: Jun 19 2010, 10:54 PM


scotchaholic
Group Icon

Group: Co-Admin
Posts: 174
Member No.: 10
Joined: 23-February 09



Without being too intrusive, I want to point out that you can actually write HTML on a text editor, such as Notepad, Word, and GEdit. Write the code and save it as "sitename.html"

For instance, open up a text editor and paste this:

CODE
<html>

<head>
<title> Fuck you </title>
</head>

<body>
<b> This is a damn basic website. </b>
</body>

</html>


Make sure to save the file by putting .html at the end of the name. Now open it. The document will open in your web browser and you should see a very basic webpage.
Top
#1 ff fan
Posted: Jun 19 2010, 11:25 PM


God of Classic Gaming


Group: Shadows
Posts: 220
Member No.: 19
Joined: 26-April 09



Thank you Marius, for pointing that out. I don't know why it didn't occur to me note how to actually make an HTML file :lol:

that being said. its time to note some rules to HTML, as I had stated in the last post

Opening and closing tags
when dealing with tags, make sure that any tags you open within other tags, you close before closing the other tag.
Example:
<B><I>bold and italics</I></B> would be correct
<B><I>bold and italics</B></I> would not
this goes for every tag. not only is it an easier way to manage them, but it also is more likely to work properly

Quotation marks (") for the values
as yo might have noticed in my previous post, I put quotation marks around the values, this is the same for anything you change the value of. You can also use ' around your values instead of ". But remember, you must close your values with the same one you opened with.

EXAMPLE

<BODY BGCOLOR="BLACK"> is correct
<BODY BGCOLOR='BLACK'> is correct
<BODY BGCOLOR="BLACK'> is not correct
<BODY BGCOLOR="BLACK> is not correct

Forbidden tags
there are 2 tags in basic HTML that are highly frowned upon in use. These 2 tags only have 1 use, to grab peoples attention. And they are only usable on certain browsers

<MARQUEE> and <BLINK>

<MARQUEE> is scrolling text and seems to work on most browsers I've tested it with. but iirc, it doesn't work with Netscape
<BLINK> is just as it sounds, a flashing text. and does not seem to work with most browsers, though it does work on Netscape.

These tags as I've mentioned are both highly frowned upon


anyway, my next post will probably be on tables, I haven't decided yet though.
Top
#1 ff fan
Posted: Jun 25 2010, 07:11 AM


God of Classic Gaming


Group: Shadows
Posts: 220
Member No.: 19
Joined: 26-April 09



ok, so Mar suggested that I go over basic HTML structure before hitting on tables. so I decided "why not? it is a good idea"

I think Mar actually did a great job of making a good example of basic HTML structure himself, so I'm just gonna quote his post for the example

QUOTE (Marius @ Jun 19 2010, 03:54 PM)
CODE
<html>

<head>
<title> Fuck you </title>
</head>

<body>
<b> This is a damn basic website. </b>
</body>

</html>


ok, so let me explain

<HTML> Is the basic tag that goes around the whole thing. I'm not really sure why you use it, outside of it being proper coding. I don't question it...

<HEAD> is used for the top of the page, I have actually seen no real use for this outside of maybe the <TITLE> tags... I don't even use <HEAD> tags myself.

<BODY> This is where the stuff for the page itself goes. it is basically the body of the page. It is also commonly used to format the page, you just put the formatting crap inside the tag itself
Example: <BODY TEXT="BLACK"> the default color for the text will be black</BODY>

<TITLE> I thought that I had covered this already, but I guess not. At least not in this thread. This tag titles your page, so up at the title bar of the window, it will tell you the name of the page

Well, that's the basic structure of HTML.

oh, and one thing I forgot to mention in my last post. If you notice, every tag I post is all in caps. that is used to make it easier to spot your tags so you can keep track of them.

Next, I will be doing Tables for sure. and hopefully, it won't take me so long to motivate myself to post this time
Top
#1 ff fan
Posted: Jul 10 2010, 08:33 AM


God of Classic Gaming


Group: Shadows
Posts: 220
Member No.: 19
Joined: 26-April 09



Ok, so it took me a little while to actually motivate myself to talk about tables..... here we go

<TABLE> makes tables in which you place things like text and pictures in... Tables can have many uses when making a layout for your page, including the use of a table inside of a table

<TR> Table Row, it basically puts a new row into the table

<TD> Ok, I've never known really what TD was, except in american football (TOUCH DOWN!!!) give me a sec to wiki it or something. *goes to check* .... and were back! apparently, its a Table Data cell... that's good to know :) so basically, each cell in a table.

the basic structure of a table goes as such

<TABLE><TR><TD></TD></TR></TABLE>

you can put many Table Data cells in a row as you wish, and you can have as many rows as you wish.. You may also put tables inside of the data cells,

example: <TABLE><TR><TD><TABLE><TR><TD></TD></TR></TABLE></TD></TR></TABLE>

I know, it looks complicated, but it really isn't once you get the hang of things :D

also, we have modifiers, the modifiers go inside the <TABLE> tag itself. Modifiers are basically like with what I showed in the page formating section...

WIDTH changes the width of your table, you can either do it by pixel (type in the set number for pixels you want to use) or by percentage of the page (just add a % at the end of the number)

BOARDER this will give you the width of a boarder, if you omit this modifier, or put BOARDER="0", then the boarders will be invisible


1 thing that I managed to learn about when I looked at Wikipedia. I don't know its actual use, but its <TH>. Its a Table Header. It apparently bolds and centers your text in a cell at the top of the table I guess....

idk what my next one will be, or when, so I really can't say anything about the next lesson :(
Top
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:
InvisionFree - Free Forum Hosting
Fully Featured & Customizable Free Forums

Topic Options



Hosted for free by InvisionFree* (Terms of Use: Updated 2/10/2010) | Powered by Invision Power Board v1.3 Final © 2003 IPS, Inc.
Page creation time: 0.1322 seconds | Archive