HTML: The Basics

Discussion in 'Archives' started by Nyx, Jan 12, 2011.

Sign in to Post
Thread Tools

Thread Tools

  • Thread ID:
HTML: The Basics
  1. Unread #1 - Jan 12, 2011 at 12:06 PM
  2. Nyx
    Joined:
    Dec 17, 2010
    Posts:
    480
    Referrals:
    0
    Sythe Gold:
    0

    Nyx SMR likes me a lot
    Banned

    HTML: The Basics
    The Basics of (x)HTML​


    Table of content

    • A brief introduction
    • Getting started
    • Text & colors
    • Images and hyperlinks
    • Frames and tables
    • Afterword

    A brief introduction

    Hello! This guide is about the very basics of HTML. HTML stands for Hyper Text Markup Language. The language is the base of every website and it's simple to learn. So let's get to work!

    Getting started

    To learn HTML you will need nothing but a simple text editor. I personally prefer using Notepad, I think it's the easiest to work with.

    Write down the following:

    Code:
    <html>
<head>
<title>"Your title"</title>
</head>
<body>
</body>
</html>
    (What does this mean?)

    <html> Because it's a HTML file.
    <head> For title & mega tags (stuff for later)
    <title>"Your title."</title> Basically, the title
    </head> For title & mega tags (stuff for later)
    <body> The actual website
    </body> The actual website
    </html> Because it's a HTML file.

    Now save it as anything.HTML, change file type from .txt to All files.

    [​IMG]

    You should now see an internet page on your desktop. That's right, you just made your own website. Click it.

    [​IMG]

    Ehh, that website is a bit simple, don't you think? Let's add some fancy text!

    Text & colors

    You will place your text between the <body></body> tags.

    Markup

    <b></b> Bold text
    <i></i> Italic text
    <u></u> Underlined text
    <h*><h*> Text size, replace the * with a number from 1 to 6.
    <p> Starts a new paragraph
    <p align=*><p align=*> Aligns your text, replace the * with left (unnecesarry), right or center.

    Okay, so let's apply what we have learned. To edit your internet page,

    right mousebutton &#8594; open with &#8594; notepad

    Example:

    Code:
    <html>
<head>
<title>Welcome!</title>
</head>
<body> <p align=center><b><i><u>Welcome to my very first website</i></u></b><p align=center>
</body>
</html>
    Now your page should look like this:

    [​IMG]

    Now let's add some colors to it!

    To define a color, you use '#'. After that comes a hex number, here are a few basic colors.

    black #000000
    white #FFFFFF
    blue #0000FF
    green #008000
    yellow #FFFF00
    red #FF0000
    purple #800080
    brown #A52A2A

    You can easily find more color codes on the web. For example, here.

    You can use this color to change the text color, but you can also use it to change the background color.

    Code:
    <body bgcolor=#oooooo text=#ffffff></body>
    bgcolor is used for the background.
    text is used, indeed, for the text.

    This doesn't mean you have to use one color for all your text, you can change the color of a certain part by using <font color=#?></font> tags.

    Let's try it out.

    Example:

    Code:
       <html>
    <head>
    <title>Welcome!</title>
    </head>
    <body bgcolor=##A52A2A text=#FFFF00>
   Your basic text
    <font color=#FF0000>Text in another color than the default</font>
    </body>
    </html>
    [​IMG]

    Images

    Every decent site has images. To add an image:

    Code:
    <img src=>
    Move the image to the same folder as your HTML file. (Thanks, SMR!)

    Example:

    Code:
    <img src="Sythe.png">
    [​IMG]

    Hyperlinks

    Code:
    <a href=http://www.YOURSITEHERE>Link</a>
    Example:

    <a href=http://www.sythe.org>Click here to go to Sythe!</a>

    Tables

    For a table, you use <Table></Table> tags.
    For a row, you use <tr></tr> tags.
    For a column, you use <td></td> tags.

    Example:

    Code:
     <html>
    <head>
    <title>'Your title'</title>
    </head>
    <body>
    <table>
    <tr>
    <td>
    'text'
    </td>
    <td>
    'text2'
    </td>
    </tr>
    <tr>
    <td>
    'text3'
    </td>
    <td>
    'text4'
    </td>
    </tr>
    </table>
    </body>
    </html>
    You don't have any lines yet, so I'll show you how to add a border.

    Code:
    <table width=*% height=*% border=*>
    </table>
    Example:

    Code:
    <html>
    <head>
    <title>'Your title'</title>
    </head>
    <body>
     <table width=60% height=40% border=2>
    <tr>
    <td>
    'text'
    </td>
    <td>
    'text2'
    </td>
    </tr>
    <tr>
    <td>
    'text3'
    </td>
    <td>
    'text4'
    </td>
    </tr>
    </table>
    </body>
    </html>
    It should look like this:

    [​IMG]
    Note: I used different proportions in the code.

    Frames

    Okay, this is the most complicated part of this guide. A site will never look professional unless you use frames to divide the page into seperate parts. Let's create some more pages first.

    Page 1:

    Code:
     <html>
    <head>
    <title>
    Title
    </title>
    </head>
    <body bgcolor=#00FF00 text=#3300FF>
    <h1><p align=center><u>Your title</u></p></h1>
    <p align=center><i>Example</i></p>
    </body>
</html>
    Page 2:

    Code:
     <html>
    <head>
    <title>
    Title
    </title>
    <body bgcolor=#CCCCCC txt=#000000>
    <h1><p align=center><u>Home</u></p></h1>
    <p align=center><i>Homepage</i></p>
    </body>
    </html>
    Page 3:

    Code:
    <html>
    <head>
    <title>Title</title>
    </head>
    <body>
    Extra page
    </body>
    </html>
    Linkpage:

    Code:
      <html>
    <head>
    <title>
    Title
    </title>
    </head>
    <body bgcolor=#000000 text=#ffffff>
    Go to:
    <p><a href=page2.html>Homepage</a>
    <p><a href=page3.html>Extra page</a>
    </body>
    </html>
    (Make sure they're all on your desktop/in the same map!)

    Click on the linkpage and it should look like this:

    [​IMG]

    Okay, now we can finally make our frame.

    A frame has frame tags instead of body tags.

    Example:

    Code:
        <frameset rows=*%,*%>
    <frame src=*.html>
    The 1st % is for height, the 2nd is for width. Let's apply it to the pages we already have.

    Example:

    Code:
        <html>
    <head>
    <title>
    Title
    </title>
    </head>
    <frameset rows=20%,80%>
    <frame src="page1.html">
    <frameset cols=20%,80%>
    <frame src="linkpage.html">
    <frame src="page2.html">
    </frameset>
    </frameset>
    It should look like this:

    [​IMG]

    You made a website, congratulations!

    Publishing/Hosting

    You have a website, but you are the only one who can see it. That's because it isn't published yet. Unfortunately, publishing a website isn't free. You will have to pay for a domain name and hosting. A domain name is the name of your site (for example, www.sythe.org) and Sythe needs to pay hosting monthly (or every year) to keep Sythe online. So the domain is yours forever, but as soon as you stop paying for the host, your site will become unavailable to others.

    Below is a list of websites that offer cheap and decent hosting. Some of these also sell domains, some don't. I suggest you google some keywords if you want to find out more. Good luck!

    http://www.hosting.com/
    http://www.ixwebhosting.com/
    http://www.webhostingpad.com/
    http://www.fatcow.com/
    http://www.ipage.com/ipage/index.html
    http://www.webhostingtalk.com/

    Domains only:

    http://www.buydomains.com/

    Afterword

    Thanks for reading my guide! I'd like to thank SMR for solving a problem with the pictures part. As always, please leave honest feedback and tell me what you (dis)like about this guide. If you have any questions regarding the guide, feel free to drop me a PM and I will get back to you as soon as possible!
     
    Share
  3. Unread #2 - Jan 12, 2011 at 12:12 PM
  4. Lured Yah
    Joined:
    Mar 10, 2009
    Posts:
    4,127
    Referrals:
    16
    Sythe Gold:
    13
    Sythe RSPS Player Wait, do you not have an Archer rank? Le Monkey <3 n4n0 Homosex Potamus

    Lured Yah Get Fire Capes and swap GP at www.Sparta.rs
    Lured Yah Donor

    HTML: The Basics
    just a small correction, this is named xhtml :)

    also it might be fun experimenting with java files :) isn't too hard and makes awesome improvements :)

    overall opinion: looks great ^^
     
    Share
  5. Unread #3 - Jan 12, 2011 at 12:18 PM
  6. Nyx
    Joined:
    Dec 17, 2010
    Posts:
    480
    Referrals:
    0
    Sythe Gold:
    0

    Nyx SMR likes me a lot
    Banned

    HTML: The Basics
    Yeah, I'm getting into Java atm but it's harder than I expected. :p And oh, whatever, no biggie :)
     
    Share
  7. Unread #4 - Jan 12, 2011 at 3:47 PM
  8. Diax
    Joined:
    Mar 13, 2009
    Posts:
    372
    Referrals:
    0
    Sythe Gold:
    0

    Diax Forum Addict

    HTML: The Basics
    wewtwewt, time to edit some chat logs.

    Just kidding, great guide!
     
    Share
  9. Unread #5 - Jan 13, 2011 at 7:19 AM
  10. Nyx
    Joined:
    Dec 17, 2010
    Posts:
    480
    Referrals:
    0
    Sythe Gold:
    0

    Nyx SMR likes me a lot
    Banned

    HTML: The Basics
    Haha, glad you like it!
     
    Share
  11. Unread #6 - Jan 16, 2011 at 11:36 PM
  12. KerokeroCola
    Joined:
    Aug 1, 2010
    Posts:
    8,268
    Referrals:
    12
    Sythe Gold:
    14

    KerokeroCola Hero
    Retired Global Moderator KerokeroCola Donor

    HTML: The Basics
    Bravo! This is an excellent guide; although HTML is somewhat dated, it is still the backbone of almost any webpage. A friend of mine was tasked with creating a website for his Physics211 class; maybe I'll direct him to this guide, as it's nearly flawless as far as I can tell. Your content is very thorough; nearly everything needed for a basic website is included. There are a few additional commands in a basic HTML vocabulary (like <marquee>), but these are more than enough for somebody posting their first blogs or something. Also, I'd like to commend your images: they are perfectly sized. I see far too many guides where people screenshot their browser in maximized view; I'm glad to see that your pictures were shrunk to an appropriate size. Perhaps the only thing I'd say you should add is possibly a few websites that will host your webpage for you. I don't know any off the top of my head, so I doubt most people do. Again, bravo on this guide; it's A+ material in my book.
     
    Share
  13. Unread #7 - Jan 18, 2011 at 8:12 AM
  14. Nyx
    Joined:
    Dec 17, 2010
    Posts:
    480
    Referrals:
    0
    Sythe Gold:
    0

    Nyx SMR likes me a lot
    Banned

    HTML: The Basics
    Thanks! It would be great to redirect your friend to this guide, I am sure he could help me to tweak a few things. Yes, I may write a part II later, but I tried to be as 'to the point' as possible. And, you're right, I added some links to hosting sites. Thanks for all the ideas and the kind words, I really appreciate that you take your time to do this. Cheers!
     
    Share
  15. Unread #8 - Feb 19, 2011 at 9:33 PM
  16. zxc10
    Joined:
    May 25, 2010
    Posts:
    123
    Referrals:
    0
    Sythe Gold:
    0

    zxc10 Active Member
    Banned

    HTML: The Basics
    great guide, thanks my mate
     
    Share
  17. Unread #9 - Mar 4, 2011 at 12:59 PM
  18. fbitom
    Joined:
    Feb 23, 2011
    Posts:
    204
    Referrals:
    0
    Sythe Gold:
    0

    fbitom Active Member

    HTML: The Basics
    very interesting guide, looking into it was more than appealing ! :D
     
    Share
< Guide to VBScripting with Notepad (Make Pop-ups, etc) | Need Help With Forums. >

Users viewing this thread
1 guest


 
 
Adblock breaks this site