Hello & Welcome to our community. Is this your first visit? Register
Follow us on
Follow us on Facebook Follow us on Twitter Watch us on YouTube


MMOCoin

Likes Likes:  0
Results 1 to 9 of 9
  1. #1
    Scout

    Join Date
    Jan 2010
    Posts
    27
    Post Thanks / Like
    Rep Power
    15
    Reputation
    19

    [TUT] Beginning HTML


    Register to remove this ad
    Source: TechTuts.com

    Beginning HTML


    • Intro to HTML
    • Text Tricks
    • Parts of a Document
    • Image Things
    • Misc. Stuff

    - What is HTML?
    HTML stands for HyperText Markup Language, and it is the simplest language for coding websites. It comes in handy often, so I will try to teach you the basics. Before learning the code, there is one main idea you need to grasp. All codes should be inside these two signs: < and >. The greater than and less than signs. To begin any code, you need the less than sign, and to end, you need the greater than sign. If it helps you to think that the signs are "eating" the code, you can do that. These signs are called tags. You will also need to end any code with a tag. This tag, however, will have a less than sign, slash, code, greater than sign.

    To recap, you should have your codes like this:
    HTML Code:
    <yourcode> something like text </yourcode>

    There are a few exceptions to this rule, and we will talk about them later. (Such as <br />) The end tag is also the start tag.
    If this does not make sense to you, stop now, or reread it. This is the base of HTML.




    › See More: [TUT] Beginning HTML



  2. Related Threads - Scroll Down after related threads if you are only interested to view replies for above post/thread

  3. #2
    Scout

    Join Date
    Jan 2010
    Posts
    27
    Post Thanks / Like
    Rep Power
    15
    Reputation
    19
    Let's Learn Text!



    To begin to edit your coding, you need to open up a program to do it. Often, people us the small program notepad which is probably already installed on your computer. Any text-editing program should work fine, even Microsoft Word. You will need to find a different way to get it onto the internet though, if that's what you plan to do. Have your program open now.

    If you were to type out your text, without any coding, and attempt to view it, it would probably look awful. There would be no change in font size or effects, no extra spaces. No skipping lines, probably the worst thing of all. For now, we will focus on the text effects, and when to use them.

    bold
    The bold code is made with the word "strong". It used to be <b> for bold, but that has disadvantages. It would look like this:
    HTML Code:
    <strong>text</strong>
    Bold text is useful when trying to make something clear, or adding emphasis. Of course, don't forget to end the code.

    italics
    Italics are similar to the bold code, except the use an "em" which stands for "emphasis". They would make good codes for adding emphasis, especially in some would-be confusing sentences. Here is the code:
    HTML Code:
    <em>text</em>
    underlining
    Underlining text comes in handy when creating links, naming books, or making headers or titles. It is also similar to the bold code:
    HTML Code:
    <u>text</u>
    The nice thing about HTML is that you can add multiple effects to the same text. For example, "text" would be created by putting
    HTML Code:
    <strong><u><em>Text</u></em></strong>
    The order of the tags will not matter.

    Now, text effects are great and all, but these tricks alone will not create a decent webpage. Right now, all of the text will run on until hitting the edge of the screen, and then it will go down a line. You need to learn a new code for skipping a line. The code for a line break is
    HTML Code:
    <br  />
    However, this will only skip to the next line. If you want to leave a space in between paragraphs or images or anything. you have a choice. You can put in two line breaks, or you can use the paragraph code (which, along with the break code, does not need to be closed). This code will not indent for you. Here is the paragraph code
    HTML Code:
    Old text...<p>New Paragraph Text
    font size
    In HTML, font sizes range from 1 (smallest) to 7 (largest). The default size is 2. If your text is too large, it can be distracting, and make your page look worse. If your text is too small, it will be annoying to read. Here is the font size code:
    HTML Code:
    <font size=2>Font size would be two</font>
    font color
    Computers today can display thousands of colors. However, there is a list of the so-called "216 Net-Safe Colors" which all browsers should be able to see. These colors cover most you will want to use. However, there are a couple ways to display the color. Words like "Beige" and RGB Codes like "#FFCC33" or "FFCC33" and Hex Codes, like "rgb(255,255,255)". To choose a color, you may want to search the internet for a chart, which won't be too hard to find. When you have chosen your color, you put it in a code similar to the size code:
    HTML Code:
    <font color="#FFCC33"> some brownish text </font>
    Of course, you can have large or small, and colored text. You may put them in the same code:
    HTML Code:
    <font size=6 color=beige> large beige text </font>
    You are beginning to learn some very handy things. If you want to see how they look on a webpage, search the internet for an "HTML Test Bed" and put in your codes!

    text alignment
    If you have tested out your code, you may have noticed that it still sits plainly in the upper left corner. Remember that paragraph code? It can help us align text, like this:
    HTML Code:
    <p align="left"> OR <p align="center"> OR <p align="right>
    What this does is tell the computer to create a new paragraph, then align the paragraph, then where to align it to. The code <center> will also work, although left and right will not.

    bullet points or lists
    One handy feature is to create a bullet point or numbered list. You could create a numbered list yourself, but this way is more organized and will indent for you. Here are the codes:
    HTML Code:
    <ul> 
    <li>bullet one </li>
    <li>bullet two  </li>
    <li>bullet three  </li>
    </ul>
    
    <ol>
    <li>numbered point one  </li>
    <li>numbered point two  </li>
    <li>numbered point three  </li>
    </ol>
    UL stands for "unorganized list" and OL stands for "organized list".

    page divides
    To divide a page, one "useful" command is the horizontal rule. I never use it, but it may come in handy to you. You will now be introduced to VARIABLES. These are things you can choose to add but are optional. You may not know it but you already work with them when changing font color and size, as well as alignment. I will put the variables in this code in capital letters, and describe them below:
    HTML Code:
    <hr NOSHADE WIDTH="300" SIZE="10">
    HR= start horizontal rule
    NOSHADE= No shading, default has shading.
    WIDTH= Width of the line, in pixels, or percent, I would use percents, usually. Default is pixels, or use % sign.
    SIZE= Thickness of the line, in pixels.
    The order of the variables does not matter, they just need to be in the code.


    Congratulations, you've passed the first step!

  4. #3
    Scout

    Join Date
    Jan 2010
    Posts
    27
    Post Thanks / Like
    Rep Power
    15
    Reputation
    19


    Parts of a Document


    True HTML documents will start with "<HTML>" and end with "</HTML>". Next is probably the "head", followed by the title, then the body. The title indicates what will be seen on the top bar. Right now, if you look at the top of the screen, you may see "Talk Digi -" etc.. You may change this to your liking. The body is where the important stuff goes on, like adding text. Here is the most basic code you can use for starting a web page.
    HTML Code:
    <html>
    <head>
    <title> </title>
    </head>
    <body> -=-=-=-=-=-=-=-=-=-=-=-
    TYPE YOUR MAIN CONTENT HERE
    -=-=-=-=--=-=-=-=-=-=-=-=-=-=-
    </body>
    </html>
    Feel free to reread the paragraph if needed!

  5. #4
    Scout

    Join Date
    Jan 2010
    Posts
    27
    Post Thanks / Like
    Rep Power
    15
    Reputation
    19
    Backgrounds, Images, Etc.

    background solid color
    Although the result may be somewhat boring, you can have a solid background color using this code, and colors (Hex, RGB, or Words, see "font color" above.) Add the variable bgcolor to your "body" tag, like this:
    HTML Code:
    <body bgcolor="red">
    But please do not use red, or you will probably hurt your eyes.

    background image tiled
    You can tile a more interesting image with the coming code. Most images will not tile well, so I suggest you search the internet for a pattern website. Make sure they are okay to use, or get permission! You could also use your own image. IMPORTANT: Always start URL's with "http://" when editing HTML. Don't worry about why. Here is the code for adding a background image:
    HTML Code:
    <body background="http://WWW. PICK_A_URL.COM/YOUR_IMAGE.JPEG">
    insert an image
    You can add an image to your website with the upcoming code. You may want to put things like banners on your website, or funny pictures you found. To add an image, you need to start with the "img" tags, which stand for image. You also need a course, "src". You may want to add things like borders (pixels wide), border color (RGB, Hex, or Words), and even a specific width (in pixels or percents). Here is the code:
    HTML Code:
    <img src=HTTP://www.url_of_image.com/image.jpg border=0 bordercolor=black width=300 length=250>
    This would create a 300x250 image with no border. You may not want to resize an image because it may distort the content.

  6. #5
    Scout

    Join Date
    Jan 2010
    Posts
    27
    Post Thanks / Like
    Rep Power
    15
    Reputation
    19
    Other Useful Things

    text links
    Links are very important, because that's how we get around on the internet. "a" stands for links. I don't know why. "href=" means where the link should lead to. Here is a standard link code:
    HTML Code:
    <a href="http://WHERE_TO.com">Click Here!!!</a>
    This would create a link that says "Click Here!!!" in that old blue, purple when visited, color we all probably know so well. To change the color (or text effects, like boldness), use the code we already know, right before "Click". Never forget to end your links with </a>. It is a good idea to underline them, for the thinking impaired, or just general public... easiness... Just underline them, okay?

    image links
    After you can add a link, you can add a link with an image to click on. For example, your banner can take you to your home page. Just type out the link code, but instead of adding text, type the image code. Do not forget to end your link with "</a>".
    HTML Code:
    <a href="wheredoesthelinkgo.com"><img src="img_source.gif"></a>
    adding an email address
    To open up your visitors default email client, you can use this code, which I hope you notice is similar to a link.
    HTML Code:
    <a href="mailto:[email protected]">EMAIL ME!!</a>
    As you know, you can change the color, effects, etc.

    tables
    Last on the menu today are tables. Tables are harder than anything else so far, so get ready. They are very important for making your website look good, and you can get pretty creative with them! Start them with the table code, tr is for a row, td is for a data cell. The below code should explain itself.
    HTML Code:
    <table> to start your table
    <tr> - start table row
    <td> - start table data cell
    Here is your top left cell! Type in what you want! Add pictures, text, another table, whatever!!
    </td> - end cell
    <td> - start the second table data cell
    This will be your top 2nd cell, add what you need!
    </td></tr><tr> - add another row
    <td> bottom left cell
    </td><td>bottom right cell!
    </table>
    Variables, add in <table "?">
    BORDER= (default is 0)
    BORDERCOLOR= color
    BGCOLOR= back ground color for whole table. You can color individual cells or rows by putting this variable in the <tr> or <td> tags.
    WIDTH= Table width in pixels or percents
    HEIGHT= Height in pixels or percents
    CELLPADDING= pixels to "pad cells". Indents on all sides, kind of...
    CELLSPACING= pixels to seperate cells from eachother.

    By now you should be able to create a decent looking webpage! The most important thing is to keep practicing. There are plenty more things you can learn, just keep your eyes open! To actually put things on the internet, you may find some free web hosting, by searching your favorite search engine. To put pictures on the internet, you need to find an image uploader by searching. If you have any questions at all, just ask someone. I can try to help, and if I can't, I will help find someone who will.

  7. #6
    Scout

    Join Date
    Jan 2010
    Posts
    27
    Post Thanks / Like
    Rep Power
    15
    Reputation
    19
    Other Useful Things

    text links
    Links are very important, because that's how we get around on the internet. "a" stands for links. I don't know why. "href=" means where the link should lead to. Here is a standard link code:
    HTML Code:
    <a href="http://WHERE_TO.com">Click Here!!!</a>
    This would create a link that says "Click Here!!!" in that old blue, purple when visited, color we all probably know so well. To change the color (or text effects, like boldness), use the code we already know, right before "Click". Never forget to end your links with </a>. It is a good idea to underline them, for the thinking impaired, or just general public... easiness... Just underline them, okay?

    image links
    After you can add a link, you can add a link with an image to click on. For example, your banner can take you to your home page. Just type out the link code, but instead of adding text, type the image code. Do not forget to end your link with "</a>".
    HTML Code:
    <a href="wheredoesthelinkgo.com"><img src="img_source.gif"></a>
    adding an email address
    To open up your visitors default email client, you can use this code, which I hope you notice is similar to a link.
    HTML Code:
    <a href="mailto:[email protected]">EMAIL ME!!</a>
    As you know, you can change the color, effects, etc.

    tables
    Last on the menu today are tables. Tables are harder than anything else so far, so get ready. They are very important for making your website look good, and you can get pretty creative with them! Start them with the table code, tr is for a row, td is for a data cell. The below code should explain itself.
    HTML Code:
    <table> to start your table
    <tr> - start table row
    <td> - start table data cell
    Here is your top left cell! Type in what you want! Add pictures, text, another table, whatever!!
    </td> - end cell
    <td> - start the second table data cell
    This will be your top 2nd cell, add what you need!
    </td></tr><tr> - add another row
    <td> bottom left cell
    </td><td>bottom right cell!
    </table>
    Variables, add in <table "?">
    BORDER= (default is 0)
    BORDERCOLOR= color
    BGCOLOR= back ground color for whole table. You can color individual cells or rows by putting this variable in the <tr> or <td> tags.
    WIDTH= Table width in pixels or percents
    HEIGHT= Height in pixels or percents
    CELLPADDING= pixels to "pad cells". Indents on all sides, kind of...
    CELLSPACING= pixels to seperate cells from eachother.

    By now you should be able to create a decent looking webpage! The most important thing is to keep practicing. There are plenty more things you can learn, just keep your eyes open! To actually put things on the internet, you may find some free web hosting, by searching your favorite search engine. To put pictures on the internet, you need to find an image uploader by searching. If you have any questions at all, just ask someone. I can try to help, and if I can't, I will help find someone who will.

  8. #7
    Sergeant

    Join Date
    Sep 2009
    Posts
    71
    Post Thanks / Like
    Rep Power
    15
    Reputation
    5
    epic guide +Rep

  9. #8
    Banned

    Join Date
    May 2010
    Location
    Upstate N.Y, United States
    Posts
    39
    Post Thanks / Like
    Rep Power
    0
    Reputation
    12
    I can see you put a lot of work into this Kickerbat. Nice job, definitely for this.

  10. #9
    Beginner

    Join Date
    Aug 2013
    Posts
    3
    Post Thanks / Like
    Rep Power
    11
    Reputation
    1

    Register to remove this ad
    Barbie makeup games are a very good way to improve your children's skills. Usually little girls between the ages of 4 to 9 play doll makeup games. Most of little girls only need a lot of paper to make masks and gloves to make their doll. However nowadays, gamers are able to do all that with easily, in the internet.
    elo boosting service
    lol elo boosting service

    Barbie makeup games are a very good way to improve your children's skills. Usually little girls between the ages of 4 to 9 play doll makeup games. Most of little girls only need a lot of paper to make masks and gloves to make their doll. However nowadays, gamers are able to do all that with easily, in the internet.
    elo boosting service
    lol elo boosting service

    - - - Updated - - -

    Barbie makeup games are a very good way to improve your children's skills. Usually little girls between the ages of 4 to 9 play doll makeup games. Most of little girls only need a lot of paper to make masks and gloves to make their doll. However nowadays, gamers are able to do all that with easily, in the internet.
    elo boosting service
    lol elo boosting service

 

 

Visitors found this page by searching for:

Nobody landed on this page from a search engine, yet!
SEO Blog

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -5. The time now is 10:40 AM.
Powered by vBulletin® Copyright ©2000-2024, Jelsoft Enterprises Ltd.
See More links by ForumSetup.net. Feedback Buttons provided by Advanced Post Thanks / Like (Lite) - vBulletin Mods & Addons Copyright © 2024 DragonByte Technologies Ltd.
vBulletin Licensed to: MMOPro.org