homepage Welcome to WebmasterWorld Guest from 54.204.141.129
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Learning html
noob learning html dreamweaver
SodiumSlayer




msg:3324611
 4:24 am on Apr 28, 2007 (gmt 0)

I have a question, I've been trying to learn html and I've also been learning dreamweaver. It seems, from what i've discovered, that dreamweaver isn't totally compatable with both IE and Firefox. Can someone tell me the best way to learn html or use html so that it's completely compatable with both browsers whether it's a coding program like dreamweaver or coldfusion or frontpage, or if there's a certain book i should pick up and absorb into my head.

Thanks a lot :)

 

tedster




msg:3324630
 5:16 am on Apr 28, 2007 (gmt 0)

One really good place to learn is [w3schools.com...]

But more than that wonderful reference site, with it's handy, "Try-it-yourself" experimental pages, I find that I only learn a technology to the point of competence by needing to put something online that uses it.

So I'd suggest picking something you have a passion for and creating an actual site. use a free host or a cheap host if you want, but pick something you really want to share. That passion will carry your through the inevitable frustrations that come with learning anything new - especially when you are trying to do self-education.

I once created a post that might help you start out on the right foot - I Wish Someone Had Told Me When I Started [webmasterworld.com].

The HTML and Browsers forum is here to help - and also take advantage of our New To Web Development [webmasterworld.com] forum, where beginners often feel more comfortable. In fact, there are several good "first website" posts in that Forum's Library [webmasterworld.com].

Most of all, keep in mind that HTML may be difficult to "master" but it was intentionally created to be easy to learn. As technology goes, HTML is extremely forgiving of many mistakes.

Dabrowski




msg:3324779
 12:32 pm on Apr 28, 2007 (gmt 0)

It's worth noting that Dreamweaver is a WYSIWYG HTML/CSS editor. If you use it, it's doubtful that you'll learn anything meaningful about the language.

If you really want to get stuck in use a text editor, I use a code editor called PSPad, it's freeware, but hery handy. It also does syntak highlighting and (for html) tag matching, so it's easy to see things in a large section of page.

sincraft




msg:3328461
 12:10 pm on May 2, 2007 (gmt 0)

Dreamweaver is great, especially for people that don't intend on making HTML their career or even for extra $. I do some pretty nice websites, still using tables though.

The problem is, most of what I want was considered 'elite' years ago, but now is just bad form and 'easy' to most competent web gurus.

Dreamweaver allows you to create simple websites. But their included code viewer allows you to understand why something does something or, allows you to edit things that you otherwise don't want to fiddle faddle with in dreamweaver.

Eventually, you will use both like I do. Code by hand, code by dreamweaver.

Dreamweaver itself has very good tutorials and if I were you, I would start from point A then go alllll the way down the list and learn the whole thing.

If you truly want to learn HTML, then by all means goto w3 schools like the poster above suggested, but unless you understand some basics - you will likely feel overwhelmed there.

My suggestion to you is to start with dreamweaver.

There are far too many "im a web designer because I used front page to create a cheesy looking website" designers out there, that actually charge for their work. It's sad. Lets be clear here, there are DEFINITE differences between a website that is created in dreamweaver/frontpage vs hand coded and tested. It's obvious to most non mouth breathers out there.

If you want to create something for your Bike club or local Rotary club for information purposes, I would suggest just very simple text layouts using the proper heading tags. You will be surprised how much better your website will be ranked in google/yahoo also! MOre and more, the use of tables for layouts will only harm your ranking, but like I said - it is the way to make things look very nice, however the new way is to use ONLY CSS to do this.

If you are learning for the first time, I would suggest you stay AWAY from using tables for layout completely.
I'm stuck on them for awhile as I just don't have the time to relearn everything, and am not very good either.

BUT I know enough to know what is right/wrong and what looks like someones uncles brothers sisters fathers 3rd cousin did their web design.

Good information, proper heading tags, and very little to no use of tables is where you want to be.

I have a few sites top rated in google and yahoo with pretty high keyword saturation - not that they look the best and yes they still utilize tables for layouts, but I still really don't know what I am doing! Like I said, learn the proper way if you want to do it hardcore. If you just want to piddle with it, use simple text/headings and learn about the use of external stylesheets.

bateman_ap




msg:3328465
 12:20 pm on May 2, 2007 (gmt 0)

It's worth noting that Dreamweaver is a WYSIWYG HTML/CSS editor. If you use it, it's doubtful that you'll learn anything meaningful about the language.

Rubbish, Dreamweaver has WYSIWYG but also you can if you want just code directly in the "code window". It also has a tag helper to enable you to add the correct tag into the code and also closes them automatically for you in the correct / > way. I always find it much easier to code using both ways. I can go into the code window, add all my <div>s, then use the css editor to position them usnig the preview window to make little tweaks instead of having to save the file then open it in a browser.

Ignore the people who say otherwise, I doubt they have picked up a copy of Dreamweaver or similar in the last few years.

stever




msg:3328531
 1:03 pm on May 2, 2007 (gmt 0)

Hear, hear, bateman_ap. It's how I, and I assume many thousands of others, originally learnt (and lost my fear of "code").

The problem with many html coding purists is that they would like everyone to sit down with a book and learn html, css and object-oriented programming. Fine in theory, but the boredom of doing that puts most non-geeks off. Better by far when you are learning to experiment and enjoy the experimentation and in that way to discover what a difference the "rules" make.

Sure a lot of people will never progress to doing things correctly, but then a lot of correct coders never progress to grasping the concepts of marketing, usability or colour theory.

Dabrowski




msg:3328659
 3:26 pm on May 2, 2007 (gmt 0)

but also you can if you want just code directly in the "code window".

So you use the WYSIWYG first and then mess with the code?

so closes them automatically for you in the correct / > way

So you don't need to know how to do it yourself? Incidentally, I bet you can't tell me what language/DTD, (doctype definition) the /> close tag applies to?

use the css editor to position them usnig the preview window

So you can't do it yourself? Any try to make an elastic layout using the css editor.

Ignore the people who say otherwise, I doubt they have picked up a copy of Dreamweaver or similar in the last few years

Damn right, I'm a coder, not a designed. I know HTML/XHTML, CSS, and JS in great depth.

sit down with a book and learn html, css and object-oriented programming

I can't read books, I also get bored. There are lots websites with code tutorials, some of them interactive. W3 Schools is very good, you can edit the code in a text window, and see the result instantly.

but the boredom of doing that puts most non-geeks off

No, puts people off who really can't be bothered, don't have motivation or are just plain lazy.

by far when you are learning to experiment and enjoy the experimentation

How long does it take to write a blank page, your canvas on which to experiment? 5 mins? No actually, 2.

a lot of correct coders never progress to grasping the concepts of marketing, usability or colour theory

You're right there, I'm useless at design/marketing, I'm not creative enough. I employ a designer.

I'm not going to get drawn into a designer vs. coder argument. Dreamweaver is for designers who may want to tweak the code a bit. Notepad is for coders who are implementing a design they've been given.

Dreamweaver, and I should probably say, other reputable design programs, are very good at making simple websites.

Which side of this argument you choose to go with really depends on whether you want to learn html/css/js code, as the thread titlle suggests, or if you want to learn how to use a visual editor to make a site.

Fotiman




msg:3328770
 4:39 pm on May 2, 2007 (gmt 0)

Personally, I tend towards the "coder" (vs. "designer") profile. I prefer to get right into the guts of a page and edit the markup directly. Years of experience has made it second nature.

Years ago, I found that programs like Dreamweaver were geared more towards the designers. My understanding is that Dreamweaver has come a long way and is now quite a powerful editor and layout tool. However, the outrageous prices has kept me away (and will continue to do so). I can't justify spending over $400 for ANY piece of personal software, no matter what it does. My Operating System didn't even cost that much!

stever




msg:3328798
 5:03 pm on May 2, 2007 (gmt 0)

>>I prefer to get right into the guts of a page and edit the markup directly. Years of experience has made it second nature.

So do I. The difference being that I use DW (on a daily basis) to do so. And the reason that I got to that level of knowledge of html and css was through using the programme at the beginning of my web design days when I found it more newbie-friendly than an O'Reilly book or a web tutorial, which was my original point.

Fotiman




msg:3328833
 5:20 pm on May 2, 2007 (gmt 0)


Can someone tell me the best way to learn html or use html so that it's completely compatable with both browsers whether it's a coding program like dreamweaver or coldfusion or frontpage, or if there's a certain book i should pick up and absorb into my head.

I don't have a lot of time, but here's some suggestions...

1. Separation
Start by getting in the habit of developing your code so that there is a nice separation of layers. The 3 layers you should keep separate are:

  1. Content - This is the core of of your page and consists of your text content and semantic markup. It should be accessible whether users have JavaScript, whether they have CSS, and no matter what User Agent (browser) they're using (screen readers as well).
  2. Presentation - This is your CSS layer. In this layer you might change the position of content, give it different fonts, colors, borders, etc. You should not require this layer to view the content. Consider this layer an "enhancement".
  3. Behavior - This is your JavaScript layer. In this layer you might attach event listeners to links or buttons, or you might add special animation effects to your page. Again, you should not require this layer to view the content. Consider this layer an "enhancement".

Some WYSIWYG editors will inter-mix these layers. For example, an editor *might* generate code that looks like this:

<a href="example.com" style="color:red;" onclick="doSomething();">Example.com</a>

First, you'll notice that it has used the style attribute in the <a>. This is not a good separation of content and presentation because if you ever want to change the presentation, you may need to search through all of your content and replace this attribute in multiple places. Avoid inline styles... they're basically the equivalent of <font> tags in my opinion. Instead, this could have been assigned a class or id. Make sure to use class names and id values that are representative of the CONTENT and not the PRESENTATION. For example, avoid class names like "redtext". Instead, give it something that has psuedo-semantic meaning like "externalLink" or "navLink".

Next, this also added an onclick attribute. Again, it's better to avoid putting these in your markup. Instead, your JavaScript code can "attach" the listener to your link, keeping that nice separation of the 3 layers.

2. Standards Mode
Start by developing code that uses a "standards" mode vs. "quirks" mode. This will will allow IE to behave more like the other browsers. You can do this by including a full DOCTYPE declaration at the beginning of your page. I would encourage you to use this DOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

3. Strict DTD
Use a Strict DTD instead of a Transitional one, and avoid using presentational HTML elements like <font>. With the Strict DTD, some presentational elements are not valid, which will encourage you to produce cleaner markup and use CSS to handle presentational items.

4. Validate, Validate, Validate!
Once your document has a DOCTYPE, you can start validing it. Make this a regular part of your development cycle. Validate often. This will tell you when you've included an element where it's not technically valid, or may offer clues as to why your page doesn't look like you think it should (for example, if you've forgotten a closing tag somewhere).
[validator.w3.org...]

5. Develop for Firefox First
When developing a page, get in the habit of checking it with Firefox first, and THEN check it in IE. IE has many bugs, but most of them are easily fixed. If, however, you develop your site to look right in IE first, you are essentially developing against a flawed browser, and developing to flawed standards. When you view the page in a browser that is more standards compliant (like Firefox), you might find that it looks totally different than what you expect. It will be much harder to "fix" in that case because Firefox will actually be behaving correctly.

That's all I have time for now... I hope this is helpful.

bateman_ap




msg:3334302
 11:11 pm on May 8, 2007 (gmt 0)

So you use the WYSIWYG first and then mess with the code?

No, I usually hand code my <div>s and create my css rules while looking at the preview, a live preview is a lot handier than saving, refreshing browser etc. A few years back though I used to use Dreamweavers layout tools a lot more, it taught me much more than any online tutorials ever did.

so closes them automatically for you in the correct / > way

So you don't need to know how to do it yourself?

Actually I do know how to correctly close them but hey, it saves time and I bet you don't write an important document without checking you spelt everything correctly.

Damn right, I'm a coder, not a designed. I know HTML/XHTML, CSS, and JS in great depth.

I can't design to save my life, however I could knock up a website that looks pretty much identical to what a designer wants, could I do it in notepad? Almost certainly. Would I want to? What the hell for!

Hey in the old days would you have coded directly in postscript, that Quark eh, only for those stupid people?

Dreamweaver, and I should probably say, other reputable design programs, are very good at making simple websites.

I know a lot of very high profile websites, and have been involved in a few of them, which have been built using Dreamweaver.

Marshall




msg:3334656
 8:45 am on May 9, 2007 (gmt 0)

It really does not matter how you code your page. WYSIWYG editors are tools like a pencil and paper. They, in themselves, cannot create anything. It comes down to whether or not you care to take the time to a) learn about the program/editor you are using, b) visually check the coding, and c)validating it in lines with W3C.

Dabrowski




msg:3335042
 5:26 pm on May 9, 2007 (gmt 0)

No, I usually hand code my <div>s and create my css rules while looking at the preview, a live preview is a lot handier than saving, refreshing browser etc.

Agreed.

A few years back though I used to use Dreamweavers layout tools a lot more, it taught me much more than any online tutorials ever did

It will teach you correct syntax, but not necessarily how different things interact. Internet how-to's will normally talk you around bugs. For example, did Dreamweaver teach you faux columns, the IE float jog, or how to contain floating children?

Actually I do know how to correctly close them but hey, it saves time

It's good that you do, once you've learnt it, then saving time is a bonus. But from the context of learning it in the first place, as is the title of the thread, it's better to learn the hard way.

could I do it in notepad? Almost certainly. Would I want to? What the hell for

Notepad was a little extreme for my example, you're right, I'd never use it either. But I do use a text based editor for coding (which incidentally is free). As for the live preview, no it doesn't do that, but I usually put a simple 5sec auto-refresh on the page, which is almost as good as.

that Quark eh

Sorry, don't use a fruit computer.

I know a lot of very high profile websites, and have been involved in a few of them, which have been built using Dreamweaver

Really? How much server-side scripting, Perl for example, was involved? Does your WYSIWYG editor edit those too? My text editor does!

Marshall, what you say is correct, if you want to use the WYSIWYG way then fine, but the title of the tread which I have tried to answer was learning html, not learning how to use an editor.

I still say, if you want to learn the code, the best way is jump in at the deep end. Get a free hosting somewhere, make a little site with a text editor. It's all pretty much the same, once you've got the basics then use other methods...editors, code tutorials, whatever...to extend your knowledge.

Xapti




msg:3335389
 12:05 am on May 10, 2007 (gmt 0)

When I was a young teen I used dreamweaver... which helped me learn about some of the cool stuff CSS does, although I didn't know it was CSS at the time.
I learnt a bit about tables and tags and stuff, but it really wasn't that great.

I'd highly recommend learning HTML through various sites (googling what you want to know), with one or two main resource sites to teach you the basics, and which should also have relatively comprehensive information, such as W3Schools.

And then get REEEL familiar with the W3C, all their technical jargon, and the rules. Many pages are exceptionally useful for some of the trickier stuff, especially the visual formatting model page, and box model page.

I highly recommend Starting off with a non-visual editor, such as notepad, or something a little fancier if you want. Something which would correct minor mistakes, Such as forgetting to close a tag, forgetting to put a hash/pound sign before a color, typo on a tag, attribute, or the doctype. In fact I even wish I had something like that.

Lastly, for editors, I'm Wondering what sort of editors have the best customizibility for tabbing? All editors I've tried have had lowsy tabbing schemes...
I want something that auto-tabs important nested stuff in a logical manner, and which doesn't use SPACES.
I want it very customizable though, such as no tab on the first nested tag after body or HTML, and no tab on inner most nested elements.
And one which tabs RETROACTIVELY/DYNAMICLY... if I remove a container, I want to see everything inside drop a tab level.
Anyone know of something like this?

cmarshall




msg:3338381
 12:31 am on May 13, 2007 (gmt 0)

I use Dreamweaver to manage my sites and edit CSS (it has useful hints). I have used the template system in the past, but don't use it so much anymore (my personal site is my last template site).

For pretty much everything I do these days, I use a text editor, or a special development editor like <oXygen/>.

bysonary




msg:3338873
 1:11 am on May 14, 2007 (gmt 0)

Calm down folks, I never read the whole post but i got enough of it!

I have been writing HTML for years, and CSS for about the same, I don't know it all or anything, But I find dreamweaver to be excellent for not just simple sites but complex sites, use the coder rather than the designer in dreamweaver and its just like any other HTML text editor.

It supports PHP, JavaScript, CSS and XHTML.

Back when i wss a youngen, I used FrontPage, because I was learning, and front page has a coder so dont knock, it works! for complicated just as well as it does for simple!

I think the argument here is vearing off topic, personally I found the best way to learn code, was to write it, in some kind of editor, like dreamweaver. Look at the results of your coding and if its what you expected then wehay if not go back to the code and analyze it, actually doing it is the only way to learn it for me.

Good luck learning!

cmarshall




msg:3338897
 2:08 am on May 14, 2007 (gmt 0)

No argument, in my case. I've just been doing some pretty heavy-duty programming, like PHP/MySQL, XML/XSLT and Python. A text editor does better for that. I usually prefer using an active template system like PHP, as opposed to the passive system that DW/GoLive give you.

simonuk




msg:3353386
 12:04 pm on May 30, 2007 (gmt 0)

I'm lucky because when I first started there was no Frontpage or Dreamweaver. Hot Dog Pro was year away so notepad was all I had back then. There were no books or anything else for that matter so I used to surf until I found something cool and then took the code and ripped it to shreads until I understood how it all worked.

I've now been building web sites for 10 years and what do I use? Dreamweaver.

The simple fact is I don't have the time to hand code anymore and since the days of bloated code as standard on these programmes is a distant memory there is no reason for me to use something like notepad.

My advice for learning is the same as I did. Start off with the real basics (Why you need tags like <head> and <body> and where should they go). There are plenty of basic help books and sites out there.

Find something you like, grab all the code and play around with it all until you start to understand how it all works. If you use a WYSIWYG editor then create templates and figure out how they work.

I'd also say steer clear of CSS until you have the basics of html. Ocne you have that CSS becomes easier.

Setek




msg:3354118
 3:10 am on May 31, 2007 (gmt 0)

I've been working for years on many websites (Government, 500+ categories for shopping websites, etc etc) and I use Dreamweaver.

I dabble in design (I mostly design simpler projects, and often only when my graphic designer is too busy.)

I use Dreamweaver at work, I use Dreamweaver for my projects at home.

But I never type anything into the Design view :P I'm too afraid it will add in a bunch of extra spaces, <p>&nbsp;</p> (those really annoy me) and anything else it feels like putting in.

Why do I still use Dreamweaver? I love how it colours code. I have it customised to exactly what colours I want (dark background, light foreground--hey, it's easier when you stare at code all day.) I also like how it completes code (mostly CSS.)

I'm not lazy, just so you know. I can type pretty damned fast (I won a business typing competition, being clocked at 105wpm with 99.9% accuracy.) The reason I like it is because plain and simple: it's more efficient.

How many times do you have to type stuff like position? or display? margin, padding?

What if you could just type po, and hit enter? or ma? I'd save a lot of time, wouldn't I? No need to type the whole word out, check for spelling mistakes (a lot of people I've taught over the years make silly spelling mistakes in their properties and/or values and ask me why their code isn't rendering as it should,) when you know it's just been entered right.

Anyway, I might be ranting now.

I say if you're a complete beginner, start where we all start, with every single language we decide to conquer: Hello World. Write a page that says Hello World. Check whatever resources you want, but make sure you keep it simple to begin with. Once you get comfortable enough (remembering syntaxes and element names means you've just learnt by repetition!) add a little. Add an image. Add a table (of data, please, no tabled layouts :D) Use CSS to colour the font of your entire page to LIME GREEN, WITH HOT PINK BACKGROUND. Learn why you should never mix colours like that together. Keep adding, keep getting more complex, until you can write a page from scratch, without even thinking. No guesswork. After that, you're no longer a complete beginner: phase two.

Take a look at a website you like. Preferably something with reputable standards imbued (umm... 456 Berea Street comes to mind.) Look at it, no peekies at the source yet, go write it yourself. Make it look exactly the same as the end product. Once you're done, look at the source of the site you mimicked. Check out the things the author did, compared to what you did. Find out why, and which method is better.

Pick another site and do it again. Rinse and repeat.

But as it's been mentioned, yes, it is a hard slog. It's a lot of work to learn it.

If you think it's worth it, and you want to, don't do it half-heartedly :) Go all out and become great.

[edited by: Setek at 3:13 am (utc) on May 31, 2007]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved