Page 1 of 1

Basic HTML Rate Topic: -----

#1 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1377
  • View blog
  • Posts: 3,502
  • Joined: 28-November 09

Post icon  Posted 03 December 2009 - 07:01 PM

*
POPULAR

A quick tutorial for some of you who don’t understand HTML or CSS, just a basic one for now, I made it a while back but it's still relevant.

Section 1- The Basics

HTML is one of the easiest languages to learn, but has many uses in comparison, making it a valuable asset in all of your projects. HTML is a globally accepted language in Web Design, and honestly I don’t get how anything could be made without understanding this base language, but you didn’t come here to listen to me rant, did you? On to the content then!

Tags are pretty simple, with almost all of them having an opening <> and a closing </>. All documents start with the same basic tags.

<html>
   <title>Test Site!</title>
   <body>
   </body>
</html>



simple enough, eh? That’s all you need to have a website up, but then again, its just a blank page, where’s all the goodies?

<html>
   <title>Test Site!</title>
   <body>
      <p>
         WOW! A section title!
      </p>
      <p>
         blah
      </p>
   </body>
</html>



ya, no… You have text, but that’s ALL it is, that’s not even close to a website, it might be good to make yourself feel warm and fuzzy inside that you made something in HTML, but that’s all it’s good for. Let’s get into some text tags to make this more interesting!

<b></b> – Bold tag
<i></i> – Italic tag
<u></u> – Underline tag
<h1></h1> – Header tag, can be 1-6 to make the size bigger/smaller

Let’s try this again now!

<html>
   <title>Test Site!</title>
   <body>
      <h1>
         WOW! A section title!
      </h1>
      <p>
         blah blah blah blah <b>blah!</b>
      </p>
   </body>
</html>



better, but no good, all you have is still text, onto the next section then.

Section 2- Color


Color makes things more interesting to be honest, without it, all you have is black and white, which does absolutely nothing with aesthetics (how it looks…).
One more time with some color!

<html>
   <title>Test Site!</title>
   <body bgcolor=”black”>
      <h1>
         WOW! A section title!
      </h1>
      <p>
         blah blah blah blah <b>blah!</b>
      </p>
   </body>
</html>



Ya, that was smart, you have a black BG, cool, eh? NO! You also have black text, good luck with that, now its not boring, its blank… lets try this again

<html>
   <title>Test Site!</title>
   <body bgcolor=”black”>
      <h1><font color=”white”>
         WOW! A section title!</font>
      </h1>
      <p><font color=”white”>
         blah blah blah blah <b>blah!</b></font>
      </p>
   </body>
</html>



Ya, there we go, that’s actually readable, but honestly, who wants to go through all of that!? Lucky for you there’s css, which brings us to the next section.


Section 3- Hex Color

Hex is, put simply, your best friend, or your worst enemy. Hex color codes are in, as the name suggests, 6 digits, sometimes different, but I wont cover that here. The hex system has 16 numbers, as opposed to the decimal system. 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. 00 is the lowest value, meaning 0, and FF being equal to 256, notice something? It’s similar to the RGB method, in fact, it is, just in hex. 000000 is black, of course, with no value, and FFFFFF is white, with all value, and RGB is the order, so
FF0000 Red
00FF00 Green
0000FF Blue

I’m not going to go through all the math involved in hex, but the dead basic, as not to bore you
Decimal – Hex
1 – 16^1
10 – 16^2 (256)
100 – 16^3 (4096)

And if this rings a bell, you used windows 95, and hopefully trashed it by now, and its 256 colors of joy. Thank God for 32-bit!

a color picker is very useful for these things, maybe color cop or something else, sourceforge is your friend

Section 4- CSS

This will save your life, quite literally. Your boss decides he wants another page, and a bunch more text with all red font, that leaves you to change EVERY LAST FREAKING FONT TAG. No fun, eh? Just hope you never learn the hard way. CSS can be a separate text document that controls the style for MULTIPLE pages, making it easy to change it up, and lucky for you, its not hard to learn either! For not, lets start with just css in the document instead of external. If I catch you with font tags after this, you will die a most painful death(not really, just don't use them…)

<html>
   <title>Test Site!</title>
   <head>
      <style type=”text/css”>
         h1 {color: #ff0000}
         h2 {color: white}
         p {color: rgb(0,255,0)}
      </style>
   </head>
   <body bgcolor=”black”>
      <h1>
         WOW! A section title!
      </h1>
      <p>
         blah blah blah blah <b>blah!</b>
      </p>
   </body>
</html>



That’s better, no more evil font tags! In case you didn't notice, the three tags up there demonstrate the different ways to define color, hex, names, and rgb values.


Section 5- Background images/colors with css


here’s a basic rundown of how to get backgrounds to work using css

body
{
   background: #FF0000;
}



A colored background

body
{
   background: url(pic.gif) no-repeat top;
}



A pic with no repeat

body
{
   background: #00FF00 url(pic.gif) no-repeat fixed top;
}



A pic with no repeat, and is fixed at the top of the screen

Section 6- Links and Images


Again, all you have is text, what fun is that? You need some images and some links to get the site running! Lets use an image as a link for this example

<html>
   <title>Test Site!</title>
   <head>
      <style type=”text/css”>
         h1 {color: #ff0000}
         h2 {color: white}
         p {color: rgb(0,255,0)}
         a {color: green}
      </style>
   </head>
   <body bgcolor=”black”>
      <a href=”testsite.com”><img src=”testsite.com/banner.jpg” alt=”Our banner! yey!” border=”0″>
      <h1>
         WOW! A section title!
      </h1>
      <p>
         blah blah blah blah <b>blah!</b>
      </p>
   </body>
</html>



just make sure you have the image, eh? You can use text instead, and notice that I changed the css too, now all links are green. MAKE SURE YOU HAVE BORDER=”0″ , lest you want a tacky blue border around your image(in this case, its now green)

Section 7- Tables and Div(ision) tags

Two tags that are probably life savers in organizing things, the table and the div tag, but lets start with tables. Think Microsoft Excel, with columns and tables, same basic idea. Table utilizes <th> (table head), <tr> (table row), <td> (table block).

<table>
   <tr>
      <td>Apple</td>
      <td>Orange</td>
   </tr>
   <tr>
      <td>Strawberry</td>
      <td>Bannana</td>
   </tr>
</table>



That’ll make a 2×2 table with the information given, simple enough eh? <table bgcolor=""> can also be used

The div tag can be used to define sections, and as you’ll learn in further learning in css, classes are a lifesaver. CSS can define multiple classes in the div tag, meaning different color, font, size, and other things in each different class.

<div bgcolor=”red”>red section</div>
<div bgcolor=”green”>green section</div>



But do me a big favor and never use that combination, please, for the sake of soon to be color-blinded web-surfers, don't do it (read color tutorial below)

Conclusion
hope that helped

Programs-
Notepad ++
HTML Kit (also good for php)
Dreamweaver(good luck with the cash)

Color tutorial(also by me)
http://www.deviantar...ation/56255162/

This will help explain the woes of color usage, make yourself look a little more like a pro early with the right color combination!

Is This A Good Question/Topic? 6
  • +

Replies To: Basic HTML

#2 VulcanDesign  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 5
  • View blog
  • Posts: 98
  • Joined: 06-December 09

Posted 08 December 2009 - 09:23 AM

Great beginner tutorial! I would just like to add that a very good reference site for all beginners is: www.w3schools.com
Once there, that site has an html reference guide and tutorials that are great for beginners in html to have. It also has an online editor where you can input html and on a panel on the right side of the page, it shows you the result. This can be done with notepad also, but its nice for a quick check.
Was This Post Helpful? 3
  • +
  • -

#3 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1377
  • View blog
  • Posts: 3,502
  • Joined: 28-November 09

Posted 08 December 2009 - 10:18 PM

W3S is where I learned most everything
Was This Post Helpful? 0
  • +
  • -

#4 Tarlees  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 12-December 09

Posted 12 December 2009 - 01:12 PM

Very helpful, thanks
Was This Post Helpful? 0
  • +
  • -

#5 cmh0114  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 10
  • View blog
  • Posts: 143
  • Joined: 03-January 10

Posted 20 January 2010 - 01:51 PM

Really helpful, thanks! :D
Was This Post Helpful? 0
  • +
  • -

#6 stephen0606  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 19
  • Joined: 03-September 07

Posted 03 March 2010 - 01:26 AM

Great post for beginners, thanks :D
Was This Post Helpful? 0
  • +
  • -

#7 williamgeorgegardner  Icon User is offline

  • CEO of GeekTelligence
  • member icon

Reputation: 19
  • View blog
  • Posts: 584
  • Joined: 27-December 09

Posted 03 March 2010 - 11:49 AM

This is a great tutorial but could you put the code in code tags to make it easier to read?
Great tutorial!!!!
Was This Post Helpful? 1
  • +
  • -

#8 Lurks  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 28-February 10

Posted 06 March 2010 - 08:45 PM

Thanks for help. This was really helpful.
Was This Post Helpful? 0
  • +
  • -

#9 psyking  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 20
  • View blog
  • Posts: 165
  • Joined: 17-January 10

Posted 22 March 2010 - 11:31 PM

If you had wanted to do less typing instead of using the font tag
<font color="white"></font>
you could have placed it into the body tag like this:
<body text="white"></body>


Although, CSS is a lot more convenient.

But great tutorial!

This post has been edited by psyking: 22 March 2010 - 11:32 PM

Was This Post Helpful? 0
  • +
  • -

#10 Guest_Tutorials99*


Reputation:

Posted 27 May 2010 - 06:16 AM

Thanks for the this, it’s extremely extensive and useful!,do check out the link below really helpful for beginners

{LINK REMOVED}

where all tutorials have a Higher page rank and professional.Very helpful for beginners…
Was This Post Helpful? -2

#11 upri5ing5  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 18-January 11

Posted 03 February 2011 - 02:14 PM

Thanks for all the help, maybe eventually i won't suck so bad, and might actually become a real programmer, but for now, its just trying to wreck peoples days at my schools system, and trying to make very basic webpages.
This is a very helpful tutorial and I'm glad you added it.
Was This Post Helpful? 0
  • +
  • -

#12 Darky88  Icon User is offline

  • D.I.C Head

Reputation: -1
  • View blog
  • Posts: 51
  • Joined: 16-October 12

Posted 17 October 2012 - 03:19 AM

W3S is an excellent website for the begineers, even I have learnt from there....
If any one need any help regarding HTML please feel free to ask.
Was This Post Helpful? 0
  • +
  • -

#13 renoldscott  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 28-February 14

Posted 28 February 2014 - 06:44 AM

Really very helpful for the HTML beginner and HTML developer. Thanks for share such interesting coding.
Was This Post Helpful? 0
  • +
  • -

#14 h1337  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 02-May 14

Posted 04 May 2014 - 11:50 AM

Nice tutorial for beginners, thank you.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1