AnimeGalleries [dot] NetAnimeWallpapers [dot] ComAnimeLyrics [dot] ComAnimePedia [dot] ComAnimeGlobe [dot] Com

User Tag List

Closed Thread
Results 1 to 4 of 4

Thread: [Tutorial - HTML] Basics level 101

  1. #1
    SHTIL Sophonax has a reputation beyond repute Sophonax has a reputation beyond repute Sophonax has a reputation beyond repute Sophonax has a reputation beyond repute Sophonax has a reputation beyond repute Sophonax has a reputation beyond repute Sophonax has a reputation beyond repute Sophonax has a reputation beyond repute Sophonax has a reputation beyond repute Sophonax has a reputation beyond repute Sophonax has a reputation beyond repute Sophonax's Avatar
    Gil
    112.02
    Gender
    Gifts Eye Patch
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Latest Post
    06-09-2012 11:06 AM
    User Info Thanks / Tagging Info Gifts / Achievements / Awards vBActivity Stats
    Join Date
    Jan 2004
    Location
    Norway
    Threads
    135
    Posts
    2,135
    AW Wallpapers
    5
    Rep Power
    785
    Gamer IDs

    Gamertag: Kasius DeVias Steam ID: Sophonax

    Default [Tutorial - HTML] Basics level 101

    Basic HTML

    HTML stands for Hypertext Markup Language. It's a language that is used to create webpages. The browser you are using to view the internet looks at the codes that are in your files, and transfers them into a normal looking webpage. The two major browsers are Internet Explorer and FireFox. Both browsers see HTML codes differently, so you have to be careful.

    Generally, there are two types of tags, open tags and closed tags.

    Paragraph Tags
    <p> - open P tag
    </p> - closed p tag

    Open Bracket - <
    Closed Bracket - >
    Tag Type - p (for example)
    Slash - /

    Each tag starts with an open bracket and ends with a closed bracket, with the tag type nested in between. However, with a closed tag, a slash appears before the tag type to signify the end of that tag doing its work. In this example: the end of the paragraph.

    The tag itself is placed inside the open and closed brackets. Those are the main pieces you'll see when working with HTML.

    The format

    Every page on the web starts with this simple format:

    HTML Code:
    <html>
    <head>
    <title>My Page</title>
    </head>
    
    <body>
          All Your Page Contents Go Here
    </body>
    </html>
    All the tags are nested into each other. All pages start and end with that info. If you were to view this page in your browser, it would simply have "My Page" written in the title bar, and a bare-bones message written with default colors on default white. But don't despair! It's very easy to add more to your page.

    The background

    You may not want to keep the page to the default white color. A good idea would be to specify a new color. You have to add bgcolor="yourcolor" into the body tag's brackets.

    HTML Code:
    <body bgcolor="red">
    The above bgcolor refers to a color in words. This color can be different on many computers and browsers. However some of the more rare names may dither on some users' screens (break up into strange dots on the screen). It's usually better to use hexadecimal codes, like in the following example:

    HTML Code:
    <body bgcolor="#000000">
    A six character long code has been used in place of background color name. In this case, #000000 is black.

    Both the names and hexadecimal values of obscure colors can be difficult to remember. Sites like this one have lists of both for your convenience. Many graphic programs include the hexadecimal value when using their color selectors.

    Colors are all well and good, but sometimes you want to use an image! Simply replace yourimage.gif with the filename of your image. It's a good idea to keep a background color in the body tag as well. This color will show while the image is loading.

    HTML Code:
    <body bgcolor="#000000" background="yourimage.gif">
    Adding text

    Text is really easy to put on your page. All text can go inside paragraph tags:

    HTML Code:
    <p>text goes here</p>
    That text will come out looking like the default text, usually Times New Roman font. A good idea is to change the font and font size.

    HTML Code:
    <p><font face="courier" size="2" color="#FFFFFF">Wow, look at this text!</p>
    The above code will come out looking like this:

    Wow, look at this text!

    Putting face="verdana" inside the <font> tag's brackets, will change the font to verdana. When you change your font, be sure to change it to a font that came with your computer. If that font isn't on the viewer’s computer, it will return to Times New Roman. Some good fonts to change it to are Arial, Tahoma, Comic Sans MS, Courier New and Verdana.

    Putting size="2" inside the <font> tag's brackets, will change the size of the text to second smallest. There are sizes 1 through 7, seven being the largest.

    Putting color="#FFFFFF" inside the <font> tag's brackets, will change the color of the text to white.

    What if you want to make your text bold, italic or underlined? Or even crossed out? It's very simple to do! ^_^

    For: Code Example

    Bold --- <b>text</b> --- text
    Italic --- <i>text</i> --- text
    Underline --- <u>text</u> --- text
    Line Through --- <s>text</s> --- text

    Linking with text

    Links are really easy to make. Links are the text that you click on to take you to a new page.

    HTML Code:
    <a href="index.php">Click here!</a>
    The href is what refers you to the new page. Simply put the page or full URL you want to link to, within these quotations. You can replace "Click here!" with text of your choice.

    This is how it will look like: Click Here!

    How do I change the color of links?

    By adding a line to your body tag, you can change each link on your page quickly.

    HTML Code:
    <body link="#000000" vlink="#000000" alink="#000000">
    Each of these links mean different things:
    LINK: The color of a link that has never been used before
    VLINK: The color of a link to a page that hasn't been visited
    ALINK: The color of the link while it is being pressed

    When you hover over the link, it will change to the default color. If you don't want it to hover to blue, you can use CSS. You can also use CSS to add other attributes to the links. ^_^

    Adding images?

    Adding images to your page can make it more fun to look at. The first thing you need to do is find an image you'd like to use. Then upload the image to your webspace/image host. You should make the image filename have all lowercase letters, with no spaces. You'd put a code something like this on your HTML page:

    HTML Code:
    <img src="yourimage.gif" width="??" height="??" border="0" alt="a description">
    You replace yourimage.gif with the file name of your image. For my example, my file name is neovenezuelaffver.jpg. You replace ?? with the width and height of your image. The alt tag is a description of the image. When you put your mouse over the image, a little box will appear with the text. Here's my image. Hover over it to see the alt tag:



    How do I make my images into links?

    To make a link where you click on the image instead of text is really simple. Just use the text link code, and take out the text. Then place the image code inside where the text was. Here's an example:
    HTML Code:
    <a href="index.php"><img src="yourimage.gif" width="??" height="??" border="0" alt="a description"></a>
    Last edited by FlashD; 07-21-2009 at 07:12 AM.
    | Someone painted the sky |
    | Forever in my heart |

  2. #2
    Banned Forum / Chat .fnhvmnvmv has a reputation beyond repute .fnhvmnvmv has a reputation beyond repute .fnhvmnvmv has a reputation beyond repute .fnhvmnvmv has a reputation beyond repute .fnhvmnvmv has a reputation beyond repute .fnhvmnvmv has a reputation beyond repute .fnhvmnvmv has a reputation beyond repute .fnhvmnvmv has a reputation beyond repute .fnhvmnvmv has a reputation beyond repute .fnhvmnvmv has a reputation beyond repute .fnhvmnvmv has a reputation beyond repute .fnhvmnvmv's Avatar
    Gil
    14,160.46
    Gender
    Gifts Cookie 035 - Clefairy Manekineko
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Latest Post
    08-16-2010 10:28 AM
    User Info Thanks / Tagging Info Gifts / Achievements / Awards vBActivity Stats
    Join Date
    Oct 2007
    Threads
    44
    Posts
    834
    Blog Entries
    80
    Rep Power
    0

    Default

    Very well explained!
    You beat me xD
    I wanted to post a tutorial like this one, too xD

  3. #3
    Senior Member gaburieru has a reputation beyond repute gaburieru has a reputation beyond repute gaburieru has a reputation beyond repute gaburieru has a reputation beyond repute gaburieru has a reputation beyond repute gaburieru has a reputation beyond repute gaburieru has a reputation beyond repute gaburieru has a reputation beyond repute gaburieru has a reputation beyond repute gaburieru has a reputation beyond repute gaburieru has a reputation beyond repute gaburieru's Avatar
    Gil
    5,300.00
    Gender
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Latest Post
    10-26-2009 12:34 PM
    User Info Thanks / Tagging Info Gifts / Achievements / Awards vBActivity Stats
    Join Date
    Dec 2007
    Location
    Sweden
    Age
    23
    Threads
    20
    Posts
    265
    Rep Power
    190

    Default

    www.w3schools.com if you want to be AWSOME!

    But isn't this HTML-thingy a bit of a security risk? BBCode should always be used for these things.

    My sigs and avas

    Need a friend? Just send a PM

  4. #4
    Copyright 2013 FS FlashD has a reputation beyond repute FlashD has a reputation beyond repute FlashD has a reputation beyond repute FlashD has a reputation beyond repute FlashD has a reputation beyond repute FlashD has a reputation beyond repute FlashD has a reputation beyond repute FlashD has a reputation beyond repute FlashD has a reputation beyond repute FlashD has a reputation beyond repute FlashD has a reputation beyond repute FlashD's Avatar
    Gil
    3,547.05
    Gender
    My Mood
    Lonely
    Gifts Bamboo Cup Notebook Sunglasses
    Mentioned
    138 Post(s)
    Tagged
    0 Thread(s)
    Latest Post
    07-20-2014 06:14 AM
    User Info Thanks / Tagging Info Gifts / Achievements / Awards vBActivity Stats
    Join Date
    Jun 2005
    Location
    I would like to know that too. O_o;;
    Age
    29
    Threads
    143
    Posts
    2,699
    Blog Entries
    5
    AW Wallpapers
    3
    Rep Power
    2173
    Gamer IDs

    Gamertag: Felsho

    Default

    BBCode is for sites that support BBCode, but this tutorial explains how to make your own website and not how to use HTML on sites already in the production.

Closed Thread

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

     

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts