Jump to content


Photo

Learning HTML


  • This topic is locked This topic is locked
13 replies to this topic

#1 Maplekidd

Maplekidd

    The survivor

  • Official Member
  • 411 posts
  • Gender:Male
  • IGN:Quit. Sorry =(


Posted 03 March 2009 - 11:51 AM

Hey - Recently I've been learning how to use HTML - Can anyone give me any good tutorial sites? Currently I know about font, body, headers and acronyms.
Here is a quick, effortless example of what I've learnt so far :
<html>
<body bgcolor="yellow">
<font face="verdana" color="blue">
<acronym title="Laugh out loud">LOL</acronym>,<acronym title="My older brother"> JAMES</acronym> IS SO NOT FUNNY!</font>
<font face="verdana" color="pink"><acronym title="By the way">BTW</acronym> I'm learning</font>
<font face=verdana" color="green"><acronym title="Hypertext Markup Language">HTML</acronym>
</bgcolor>
<h1>HTML</h1>
<h2>HTML</H2>
<H3>HTML</H3>
<H4>HTML</H4>
<H5>HTML</H5>
<H6>HTML</H6>
<H5>HTML</H5>
<H4>HTML</H4>
<H3>HTML</H3>
<H2>HTML</H2>
<H1>HTML</H1>
</font>

Nothing great - Just an example. I could of tried but meh.
Note - To view it, use a HTML viewer - This site does not display HTML.

Edited by Maplekidd, 03 March 2009 - 11:54 AM.

Posted Image
My art thread My Deviantart My Steam
Currently playing : Dungeons and dragons online - Maplestory - Modern warfare 2 - Halo 3 ODST



Please support our sponsors and mapletip. Don't block ads if you want mapletip to survive! If you do not want to have ads, simply Subscribe to mapletip today!

#2 Soaa-

Soaa-

    Ed's body... it's mine...!

  • MT Awards Creator
  • 5433 posts
  • Location:The City Under
  • IGN:UnluckysparX


Posted 03 March 2009 - 12:25 PM

You should Just drop <font>. Use CSS for styling.

w3schools is a decent place, but I suggest you move away from there as soon as you understand the core concepts of HTML and CSS.

Remember: HTML is for content. CSS is for presentation. Don't perform presentation in HTML.

Also, be sure to use a DOCTYPE to declare what type of HTML you're using. I recommend XHTML 1.0 Strict as it's well structured, and well supported by browsers. Don't forget to run your HTML through the W3C validator from time to time.

A few more guidelines:
  • Tables are for tabular data only. Don't use it for layout.
  • Your HTML must make sense. If you have to dig through it to find something, you're doing it wrong.
  • Don't use <b>, use <strong>. Don't use <i>, use <em>.
  • Don't ever style anything in HTML. Drop bgcolor. Drop font face. I can't stress this enough. HTML is to structure content, not to make it pretty. Use CSS to make things pretty.
  • Most large websites are poorly coded. Don't use them as examples.
On that note, I wish you good luck forgetting all the bs you learn on crappy tutorial sites and focusing on real web development. The following link should give you a good idea of why layout in HTML is stupid. http://www.hotdesign.com/seybold/ You did good in asking for help here. I can see you really needed it.

(:
Behold, I will corrupt your seed,
and spread dung upon your faces

Malachi 2:3

Still love you, muh friends. <3

#3 Maplekidd

Maplekidd

    The survivor

  • Official Member
  • 411 posts
  • Gender:Male
  • IGN:Quit. Sorry =(


Posted 03 March 2009 - 01:38 PM

Ok. I made a random (Free)webs site to test my HTML out on.
http://adamhtml.webs.com/HTMLTest.html
I can't allign those forms O_o - Not even with &nbsp (Noobspace =D).
Anyway - I'm only a beginner. CSS is too hard for me >.<.
Also - I've been using W3Schools for a while, I just wanted to know if there were any better sites.
Anyway - I don't see the difference between <em> and <i> or <strong> and <b>. Really your just wasting time by making more letters to type.
Also, I don't see the difference between <font face="?" color="?"> and <style type="text/css"> ?{color: ?} apart from one is more confusing than the other (CSS).

Edited by Maplekidd, 03 March 2009 - 02:05 PM.

Posted Image
My art thread My Deviantart My Steam
Currently playing : Dungeons and dragons online - Maplestory - Modern warfare 2 - Halo 3 ODST

#4 Soaa-

Soaa-

    Ed's body... it's mine...!

  • MT Awards Creator
  • 5433 posts
  • Location:The City Under
  • IGN:UnluckysparX


Posted 03 March 2009 - 05:16 PM

Like I said, good luck getting out of the mindset of html being styling. It's not.

For starters, I recommend you stay away from free hosts that put ads on your site. They ruin your code in order to force those ads in there.

Next, I suggest you stay away from &nbsp;. It's pretty useless; if you need it, you're doing something wrong.

Don't think CSS is hard. Once you understand it, you'll be thinking "why the hell did I ever reject this?" CSS was invented because HTML styling is crap. Be sure to learn it if you have any hope to be successful.

Now, the difference between <b> and <strong> is this: when you use <b>, it means bold, which is styling. Now what did we say about styling in HTML again? It's a no-no. Think of why you would want to bold some text. To make it <strong>er, right? Now that makes sense, doesn't it?

Likewise, <i> only means italics, which is styling. Why would you use italics though? To <em>phasize a piece of text, of course.

Now, about CSS, it's best kept in a separate file. You put all the content in the HTML file, and you reference a CSS file that handles all the styling. Before going there though, I recommend you master semantic HTML first. Yes, your pages will look plain and ugly at first, but at least they will be logical. Now that's a good start.

I'll add you on MSN because I feel that you'll need some real-time help with this. I might sound like I'm putting you down now, but in the end, I just want you to do things the right way.
Behold, I will corrupt your seed,
and spread dung upon your faces

Malachi 2:3

Still love you, muh friends. <3

#5 Randallrocks

Randallrocks

    Bain

  • Respected Member
  • 1767 posts
  • Gender:Not Telling


Posted 03 March 2009 - 05:33 PM

CSS is REALLY important, because say, all of your text is in the body tag. You want to change all that text to bold, but you have over 500 pages. If, in the beginning, you assigned an ID to body, and they were all using the same style sheets, instead of going into every individual page, you could just make a change to one style sheet.

CSS = soo much time saved


#6 Soaa-

Soaa-

    Ed's body... it's mine...!

  • MT Awards Creator
  • 5433 posts
  • Location:The City Under
  • IGN:UnluckysparX


Posted 03 March 2009 - 06:21 PM

QUOTE(Hẹartless @ Mar 3 2009, 06:33 PM) <{POST_SNAPBACK}>
CSS is REALLY important, because say, all of your text is in the body tag. You want to change all that text to bold, but you have over 500 pages. If, in the beginning, you assigned an ID to body, and they were all using the same style sheets, instead of going into every individual page, you could just make a change to one style sheet.

CSS = soo much time saved

You don't even need an ID on body. There's only one body. Just use:

CODE
body {
    ...
}

Behold, I will corrupt your seed,
and spread dung upon your faces

Malachi 2:3

Still love you, muh friends. <3

#7 Maplekidd

Maplekidd

    The survivor

  • Official Member
  • 411 posts
  • Gender:Male
  • IGN:Quit. Sorry =(


Posted 04 March 2009 - 01:48 AM

QUOTE(Soaa- @ Mar 4 2009, 12:21 AM) <{POST_SNAPBACK}>
QUOTE(Hẹartless @ Mar 3 2009, 06:33 PM) <{POST_SNAPBACK}>
CSS is REALLY important, because say, all of your text is in the body tag. You want to change all that text to bold, but you have over 500 pages. If, in the beginning, you assigned an ID to body, and they were all using the same style sheets, instead of going into every individual page, you could just make a change to one style sheet.

CSS = soo much time saved

You don't even need an ID on body. There's only one body. Just use:

CODE
body {
    ...
}


CSS doesn't even work. I tried using it and nothing happens. And yes - I did put it in the correct place...
And anyway - I've only been learning it for around an hour. Do you expect perfectly coded websites with 50 different coding languages and the most awesome graphics covering the pages?
Anyway - I don't use HTML for styling. I haven't even used a table for layout once.
Good job getting out of the mindset that I use HTML for styling.
If you call white text and a black background styling you don't make very exciting things...
Seriously. All I did was 3 simple codes and you accuse me of using HTML as styling.
</center> <body bgcolor="black> and <font face="arial" color="white"> isn't exactly styling...
Edit - I think it's just background images that don't work when I use CSS actually - I tried a transparent box and a background color, that worked. I took away the background color and added a background and nothing shows up.

Edited by Maplekidd, 04 March 2009 - 02:13 AM.

Posted Image
My art thread My Deviantart My Steam
Currently playing : Dungeons and dragons online - Maplestory - Modern warfare 2 - Halo 3 ODST

#8 Soaa-

Soaa-

    Ed's body... it's mine...!

  • MT Awards Creator
  • 5433 posts
  • Location:The City Under
  • IGN:UnluckysparX


Posted 04 March 2009 - 10:36 AM

If it doesn't work, you either put it at the wrong place, or you wrote it incorrectly. There are three places where you could put CSS, and only one of them is the right place.

You could put CSS in a separate file and reference it in <head>. That is the right place because CSS is cached, so it's only downloaded once.

You could put a block of CSS in <style> in <head>. That's bad as CSS rarely changes and you're adding more stuff to load.

You could also put CSS in the style="" attribute of various elements. Doing it this way makes it virtually impossible to maintain your site should it get remotely complex. It also makes it hard to maintain visual consistency across pages within your site.

I was just warning you that tables for layout is bad. Seeing your current skill level, I figured it would be appropriate to tell you before you do anything wrong.

And yes, I do want you to write simple black text on white background. That's the correct way to start any web page. Like I said, all the styling, ALL of it, font or positioning or anything else, goes in CSS.

Well indeed it's those little "simple" codes that are the worst. Don't ever use <center>, <font>, or bgcolor. Your new script seems better though. Props on that. Rickrolling is old. Get rid of it.

Oh, and some of your CSS can be merged at the top.
Behold, I will corrupt your seed,
and spread dung upon your faces

Malachi 2:3

Still love you, muh friends. <3

#9 Maplekidd

Maplekidd

    The survivor

  • Official Member
  • 411 posts
  • Gender:Male
  • IGN:Quit. Sorry =(


Posted 04 March 2009 - 10:51 AM

QUOTE(Soaa- @ Mar 4 2009, 04:36 PM) <{POST_SNAPBACK}>
I was just warning you that tables for layout is bad. Seeing your current skill level, I figured it would be appropriate to tell you before you do anything wrong.


I know Tables are bad - they're for nibz.
Anyway. I know about the allignment CSS - I don't need them and I'm not nib.
And I'm never getting rid of Rick-roll! NEVER! Because I'm never gonna give you up. Never let you down...
Anyway - If you were to actually care to look at the coding you'll see it mostly is CSS...
Posted Image
My art thread My Deviantart My Steam
Currently playing : Dungeons and dragons online - Maplestory - Modern warfare 2 - Halo 3 ODST

#10 Soaa-

Soaa-

    Ed's body... it's mine...!

  • MT Awards Creator
  • 5433 posts
  • Location:The City Under
  • IGN:UnluckysparX


Posted 04 March 2009 - 11:18 AM

I can see that your new version is a major improvement from the last, but it's still not perfect. Just using a bunch of <p>s isn't exactly logical. Be sure to use the appropriate elements for your various bits of content and you're in business.
Behold, I will corrupt your seed,
and spread dung upon your faces

Malachi 2:3

Still love you, muh friends. <3

#11 Maplekidd

Maplekidd

    The survivor

  • Official Member
  • 411 posts
  • Gender:Male
  • IGN:Quit. Sorry =(


Posted 04 March 2009 - 01:55 PM

QUOTE(Soaa- @ Mar 4 2009, 05:18 PM) <{POST_SNAPBACK}>
I can see that your new version is a major improvement from the last, but it's still not perfect. Just using a bunch of <p>s isn't exactly logical. Be sure to use the appropriate elements for your various bits of content and you're in business.


Freewebs doesn't support most content and I can't get a blank webspace.
Anyway - I spammed <p> because enter doesn't work...
Seriously - you can't even get a background.

Edited by Maplekidd, 04 March 2009 - 01:56 PM.

Posted Image
My art thread My Deviantart My Steam
Currently playing : Dungeons and dragons online - Maplestory - Modern warfare 2 - Halo 3 ODST

#12 Soaa-

Soaa-

    Ed's body... it's mine...!

  • MT Awards Creator
  • 5433 posts
  • Location:The City Under
  • IGN:UnluckysparX


Posted 04 March 2009 - 02:18 PM

Of course enter doesn't work. That's how it's meant to be. <br /> does the same thing as enter, but again, I recommend you don't use it. Why would you want a line break? Chances are, it's either a heading/title, in which case you'd use <h1> to <h6>, or a paragraph, in which case you'd use <p>, or even a list, in which case you should use either <ul> or <ol>.

One of the very few appropriate uses of <br /> is in displaying poetry, where line breaks do make sense.
Behold, I will corrupt your seed,
and spread dung upon your faces

Malachi 2:3

Still love you, muh friends. <3

#13 Suri

Suri

    Professional

  • Mapletip Veterans
  • 2991 posts
  • Gender:Male


Posted 09 March 2009 - 02:38 AM

This is a tad late, but CSS is very very very useful.
The CSS Zen Garden is an example of what people do with JUST CSS.

They change this:
http://www.csszengar...den-sample.html

Into this, for example:
http://www.csszengar.../208.css&page=0

All this without touching the original HTML, if I remember correctly.

Also, Freewebs has always worked decently well for me, although the last time I used it was like 2 years ago. =| It's a lot more functional than most free webhosts.

#14 Soaa-

Soaa-

    Ed's body... it's mine...!

  • MT Awards Creator
  • 5433 posts
  • Location:The City Under
  • IGN:UnluckysparX


Posted 09 March 2009 - 07:16 AM

My free webspace at AtSpace still runs after a few years of idling. They only give 50MB, but who needs more, really? As a very definite plus, they don't tamper with your files.

http://www.atspace.com/
Behold, I will corrupt your seed,
and spread dung upon your faces

Malachi 2:3

Still love you, muh friends. <3




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users