Very Basic Web Design

Factual Questions
1

I have decided to try to teach myself some web design and I could use some advice.

First let me say that I have almost no experience. I made a personal web page once, but I used Print Shop Web Design or some such program wherein one doesn’t have to do the coding–the program does it for you. Professionals don’t do it that way, right?

I am thinking that I would like to learn HTML first. Does this sound like a reasnable plan?

Also, how can I practice HTML on my home computer? I tried doing it in Word, but as with the Web Design program, it does all the coding for you, which really doesn’t help me.

Any tips/suggestions/advice you webmasters can give would be most appreciated.

2

Pro web designers use every tool available, and then, yes, touch up with html changes.

Nobody does it all in html, because that “language” is neary as verbose as COBOL.

If you have a free site, such as Tripod, Angelfire, Bigstep, be sure to take advantage of the Quick options. They create code for you that you can read and learn from (use your browser’s View/Source pull-down menu option.)

One easy-to-buy program is Microsoft Front Page. But beware, it requires your host to have some “extensions” in place to support it. Being a Microsoft product, many sites do have the extensions, but not all free sites by any means.

To learn html try this site which has lots of good tutorials.
They teach html (often pronounced “hot metal”), javascript for animation, and other things. Be sure to get at least a vague idea what “cascading style sheets” are, since they are used at bigger sites (like catalogs) to keep all the pages looking alike.

** Lycos.com **

Your best bet is to get a little html knowledge and then a free web page and copy the source for a favorite web site into your web page and play around on-line. It’s slower that way, but you soon get a feel for what’s happening and then you switch to editing mostly off-line.

If NotePad is too limited, get a new editor here. Also many html utilities. Start at the Search.
** http://www.winfiles.com **

Happy coding :slight_smile:

3

http://www.educa.fmf.uni-lj.si/izodel/dela/netbook/js/practice.htm

I think it’s a very good idea to learn HTML before you use editing software. At least you’ll have a clue as to what you’re doing.

Have fun.

4

FrontPage is a piece of crap, so if you want to see how HTML really works, I’d recommend trying out some basics in a text-only program like BBEdit (Mac) or Homesite (PC)-- something like that. A great book for learning about HTML and how the coding for the Internet works in general, try Instant HTML, by Alex Homer, Chris Ullman and Steve Wright. It’s a great book for beginners.

Once you’ve built a site, a great place to check out is Web Site Garage. It will evaluate one page of your site for free, and let you know, essentially, how well-built it is.

Good luck!

5

We don’t? Dang, I’ll have to tell that to all the other web designers I know who hand-code HTML. :smiley: I use Homesite, and work purely in the HTML code; WYSIWYG web design programs generally churn out horrible spaghetti code and there’s little tolerance for less-than-efficient code in a professional site. Tools make hand-coding more efficient and make global changes and updates speedy, but no tool will quickly generate the clean and tidy code that you can get by hand-coding the HTML. However, unless you’re vitally concerned about page weight and being perfectly compatible with every browser under the sun, the tools that automatically generate code should work fairly well for you if you know enough HTML to debug the funky code and to do your own work if the tools can’t do exactly what you want.

I’d suggest getting a basic HTML book, and focus on learning about links, images, tables and fonts. To view your page, just save it as YourFileName.html and open it in your browser. As Quin City mentioned, using “view source” on pages to figure out how people did some neat trick is a good idea.

6

From the novice user point of view:

If all you’re doing is a web page without forms (only text and pictures), then I would stick with a program (e.g. Dreamweaver) that creates the web page for you without you having to know too much HTML. Once the page is created, you can view the source code and learn bits and pieces of HTML that way.

If you want to become a professional web page designer, however, then besides HTML you will need to learn other skills like CGI programming or java.

7

Don’t listen to this BS. This web designer does ALL his coding by hand. And I can do it twice as fast as the morons using Dreamweaver down the hall. WYSIWYG editors produce inferior code. You can learn HTML easily by reading any one of a million tutorials on the subject. Check out Webmonkey to get started.

The best way to learn is to look at the source code of pages with things you like, and see How They Did It.

And COBOL rules.

8

Thanks so much for your suggestions. I’m pleasantly surprised to learn that pros use programs that do the coding for you. It seems that it may be a lot easier to learn as I go along that way than if I had to get everything perfect from the start.

My ISP gives me 6 free MB of web space, so I can use that for practice.

Next question: So if I use a program that does the code for me, when do I get to use my new HTML skills? For example, in the Web Design program I have, if I want to make a link there are certian shortcut buttons I have to press (basically, insert link here) and then I chose the graphic I want from a provided list. If I don’t want to use their shortcut, can I just type in the HTML code?

Also, what other programming languages should I delve into so that I can learn really cool stuff? Which langauges and/or tools are most commonly used by professional webmasters?

Gaudere, I think I understand you, but let me be sure. You are saying that the programs which generate code do not do it in the most efficient manner (I’ve heard this before), so if I use such a program, I should then view the source code, see where the coding is less than streamlined and fix it. Have I got that right? It sounds like a great (and interesting) way to learn. If this is, in fact, what you are saying, is there a particular program you recommend (Let me guess, Homesite?).

Again, thanks so much for all your help, everyone. Beadalin, the Web Site Garage sounds like a really useful tool. Quin City, thanks for the HTML tutoring info.

Lastly, is there a book I could buy that explains the BIG PICTURE, so to speak? I know that CGI and GUI and Perl and Java and ASP are associated with web design, and I know there is a client end and a server end and some here have spoke of editing. I hear these terms bantied about, but don’t have a clear understanding of how each language is useful or which tools do what. So, is there some comprehensive reference manual availble or do I just have to start hanging out at Star Trek conventions?

9

Darn! Friedo submitted while I was still writing. So I guess the bit about using programs to code for you is an issue for debate.

You guys aren’t going to get in a fight, are you?

10

None of the professional webdesigners (including myself) I know use programs to automatically generate code. If you’re a novice, use the programs if you want and fiddle with the HTML code directly once it’s made to see how it works. But for a professional page, WYSIWYG tools put so much unnecessary crap in that to equal the efficiency of a hand-coded page you’ll have to spend just as much time, maybe more, to delete out all the spaghetti code. Even if you use the programs, you have to learn basic HTML well in order to debug the pages if you want to be able to do all you want with a webpage; the WYSIWG editors aren’t anywhere near perfect, and if you don’t know what you’re doing you’ll likely never be able to properly fix an error or pull off some of the more useful tricks.

11

Homesite doesn’t do WYSIWYG; it’s basically a straight text editor with a global find-and-replace and search function. The “preview” on Homesite is evil and so I never use it. I used FrontPage (a WYSIWYG editor) to do my website long ago: http://www.elnet.com/~sburch/ but now I can hardly bear to update it since the code is so gawdawful. I once ran across a section of code in one of the pages that had six different font tags modifying an empty space. Gah. FrontPage is decent if you want a WYSIWYG editor, though, and being able to actually start making pages right away could give you a jump start.

12

I also write pure HTML. I use Codewright as an editor, but any text editor will work fine. It’s much simpler than fighting those darned WYSIWYG programs to make them do what you want, and the code is much more efficient and easier to maintain. HTML is quite a simple language, relatively speaking. It’s not even a programming language, per se, just a formatting language.

If you do use a WYSIWYG program, it will output an HTML file, which is just text. You can go in later with a text editor and modify the HTML directly, if you want.

Java would be the next language to learn. It’s THE language of the internet. Not too hard to learn, either - simpler than C, much simpler than C++.

Kevin B.

13

I’m throwing my hat in the ring with all the others who prefer hand-coding the HTML (MY preferred pronunciation: “HaTeMaiL” :D). Kind of like driving a Stick instead of an Automatic: You have exact control over everything that happens without having to hope Word or FrontPage or whatever gets it right, mess with tabs and spacing, all that crap. If I’m coding in UNIX or some variant, I keep a terminal window open with Pico (yeah, yeah, shut up. I like it better than vi for basic stuff like HTML) and one with Netscape so I can save/refresh and see my changes immediately. If I’m coding in windows, I do the same thing but with Wordpad and either Netscape or IE.

I toyed around with html editors a few times a few years ago, and I never liked them. too much mouse clicking and fooling around with spacing. And WAY too much garbage code. I don’t need a <font … > </font> on every line, and I sure as hell don’t need EMBEDDED <font> tags, for cryin out loud!!! Have you ever looked at the source for an MS Word-generated HTML document? ICK.

14

[This could be debatable… and I want no part of that…]

I rarely use WYSIWYG HTML editors anymore. The reasons are multifold, but primarily it’s because:

(1) They don’t know all of the tricks that I know.
(2) They produce really inefficient and ad hoc code that is sometimes difficult to fix or supplement.
(3) They trash my hand coded formatting and improvements.
(4) I have to use another ‘proper’ editor to generate JavaScripts and unsupported attributes anyway.
Having said that. If I were just starting out, I’d probably use something like Netscape Composer until I got a little experience under my belt. If you’re just playing around and don’t expect to be building a complex site, I think these tools are fine. However, if you really want to get serious, I’d recommend that you skip the fluff and learn HTML - it’s not that difficult.
My favorite HTML tools are UltraEdit on the PC and Alpha on the Mac. These are simply programming editors that have features that support macro-like tagging, template insertion, and other HTMLing tools. If you know what you’re doing, you can produce pages much more quickly and much more professionally than with any WYSIWYG HTML editor.

Lucky:

JavaScript, Java, and perl (to start with).

15

I hand code in Notepad, save it as an HTML file, then upload it. For really nitty gritty stuff though, I’ll use an editor, then polish whatever code it turns out. Like, tables that are nested 20 levels deep, or for pages with 10 frames on them, I’ll definitely use an editor. There’s no way I could keep track of all that.

I learned HTML from a book (back in 95 when there weren’t really a lot of tutorials on the net), and from looking at other pages’ source code. But, I think the main teacher though was other pages’ source code. I’d look at the code, then reference the book for any tags I didn’t understand.

16

http://htmlgoodies.earthweb.com has tons of really good tutorials on HTML, JavaScripts, Cascading Style Sheets, free scripts, primers, plus a lot more. Great site for beginners to advanced users.

17

Hand Code here too.

Lucky, there are two books that helped me out. Now DON’T LAUGH at me. I’m serious. The first is good, but the second helped me out a lot and I still use it for reference.

  1. HTML for Dummies (Ed Tittel & Stephen N. James)

  2. SAMS Teach Yourself Web Publishing with HTML 4 in 21 Days (Professional Reference Edition, Laura Lemay)

18

Thanks, Missy, for the book suggestions.

I really feel like such an idiot about this topic. I do some very basic HTML at work and I know that it will not be difficult to learn, but I had no idea how to practice it. Suggestions such as those made by vandal (write it in Notepad, save as HTML file and upload) are the sort of basic instructions I need. I guess my main problem with starting is that I don’t know the terminology and when people start telling me that I should edit with WYSIWYG (or not), I have no idea what they’re talking about. Or at least I didn’t. Everyone here has been really helpful.

So thanks, everyone, for your suggestions. And keep 'em coming–I’ll take all the help I can get.

19

While Notepad will provide you with the rudimentary tool you need to get started, eventually you’ll want to graduate to an editor that supports HTML coding. And BTW, the best advice you’ve received so far was from friedo:

Larceny is definitely the way to go, if you want to learn the coolest HTML…

20

I just taught myself HTML this year, and this is how I did it:

I started my page in Netscape Composer (downloadable from tucows and other sites).

A friend of mine said, “I could tell you used a WYSIWIG program.” I said, “How?” He said, “The junk code at the top ID’s to them who’s using their program.” This may sound paranoid, but I don’t like software companies looking over my shoulder, so I decided to teach myself properly.

I got a book from the library, read it, looked at the very ugly source code on my page, looked at the beautiful, neat code on another friend’s page, and cleaned mine up.

After doing a few pages I now code by hand in TextPad (which colours your commands so that you know if you left out a closing code).

Once you know the basics you can (as others have suggested) go into the ugly pre-generated code and fix it. Track your changes, and that’ll tell you what works and what doesn’t. And steal liberally from pages you like.

If you decide to look at my page you can steal anything but the pictures and the text (it’s not terribly high-quality, though)! What’s up there is not the latest version, however. That has yet to be uploaded to the server.