Preserved Topic: Starting out in webdevelopment (Page 1 of 1)

First off, I don't know but a tiny bit of generic, basic, baby-step HTML. I'm really interested in making something akin to all them neato, moving... "gee-whiz!" type of sites, but am also smart enough to realize that I'm probably not going to be able to produce that kind of stuff until waaaay later, which I'm prepared for.

I know of the learning ladder, gotta start at the most basic and work your way up... and I'm not too keen on working in a WYSIWYG (like FrontPage or whatnot). I want to look at something neat and say "Yeah, I did that... that was alllll me, baby!"

Thing is... I dunno really where to start! Should I learn all I can about HTML first, or learn some of than and move onto DHTML or whatever next? I'm eager to learn, make mistakes and all that, and any help on getting started would be greatly appreciated!!

Thanks alot, in advance!

BTW, I didn't know where else to post this... I'm not exactly expecting immediate replies, but I'll keep tabs on it! Thanks again...

njuice42
icq 957255

Good solid HTML is the base of almost all web design. You need to get a grip on that first.
http://www.w3schools.com

Thats a great resource and refernence for almost any web language you can name. I use it all the time.

Well you can probably master HTML in a weekend

Its a very simple thing.

I would suggest going over to HTML Goodies and taking a look around. You can pick up some good books on CSS and JavaScript after you become comfortable with HTML and go from there. I would recomemend the Visual Quick Start series to any beginner and the O'Reilly book series to anyone. Both are great and will teach you alot. Another thing that is priceless is practice. If your really serious in learning all of these things, sit down for an hour or two every night.

Obviously of course, the Asylum is an invaluable resource for your questions.

--------------
cheers.jay

Thanks krets, Jestah, I'm reading as I speak... err... it's minimized whilst I scan the Asylum, but I'm reading it none the less. Can't wait to start getting into this stuff, I can already feel the initial pings of an addiction coming on, hehe...

I'll post links to my site when it gets up, may take a little time with my work butting into my life, but... business over pleasure I suppose. I'll keep you posted!

*cranks open notepad and grins*



njuice42
icq 957255

I've been noticing one thing lacking in many of the outside developers I deal with lately, and that's a basic lack of knowledge about things we take for granted here, consistency of code, simplicity with our templates, etc... I think the most important things after you get the basic HTML down is to learn to use it to create TEMPLATES, so you don't end up with many hard-coded versions of the same page. Anything you design for a client you'll end up changing along the line, so plan ahead and make it so you don't need to change much. I'm also a big fan of nice neat directory structures, if you open a site with FTP, you shouldn't see to much there, just some directories that contain other stuff, set up in such a way that someone else could figure it out without much headache. DHTML learning can come next, the best way to learn that is to decide to do some cool project(toy that requires it, something basic, and then go do it! (With some help from the other inmates, of course. :-)

Your pal, -doc-

Big grinning thanks to Doc to the boost in my interest! A couple of quick translations, though, if you could (I know... webcoder newbie askin crappy questions I should know, hehe)...

What does hard coded mean? I'm pretty sure on just about everything else said, and am so eager to get out my stuff (working on making my homepage look good for the time being, actually) and show it off, but then again I'm not sure if it's an actual technical term or just an adjective to the word (as in 'this coding was hard (difficult)').

*grins* Thanks again, Doc, Jest, krets, you guys rock!



njuice42
icq 957255

Hard coding is an actual term taking from programming in general. It means usual actual data instead of variables. In programming, say you want to add 2 + 2. And then you went and put:

output = 2 + 2;

That's hard coding. If, however, you had two variables:

a = 2;
b = 2;
output = a + b;

Then that would be a better solution since you can just change the values of a and b to add two different numbers you can just change the values of a and b. Especially if you have several lines of code between the variable declarations and the formula.

The same would apply to web pages. On a site I run for a business, I have 12 pages that use the same navigation menu. Instead of typing the code (or pasting) for all 12 pages, each pages has an SSI tag that just pulls all the code from a single document.

I think what Doc meant by 'hard coding' was the actual typing out of the code of every single page on your site.
Not a big deal if your site is a 3 page homage to N'Sync, but on big corporate sites, well, this just sucks.

What one does (and you 'should' learn to do) is create templates...that is, the framework HTML for the pages, then fill in the content on the server via SSI or some higher end server language like JSP or PHP.

Example:
At my company we have a home page, then approximately 8 different KINDS of other pages. There are potentially infinate number of pages, but they will all fit into one of 8 different categories.
-page to show off a product
-page to learn about our company, board of directors, VPs, etc.
-page to pay a bill to us online
-support for a product
-page to sign up for a training class
-etc.

So, I made 8 different HTML pages. They have no content in them, they are simply the framework for what the page should look like, where links should go, main content should go, etc. but completely empty in all other ways.

Then, we use a server language (JSP) to call a database, which holds all the information about content, links, pictures, etc. On the fly, that is, when a user clicks a link, that page is generated using the appropriate HTML template. The page does not exist in its whole form until that moment, and once the user closes the browser, that page ceases to exist in its whole form.

When we want to change the look of our pages, we simply change the HTML of the 8 templates.

This doesn't mean, of course, that you should start worrying about learning server-side languages today. Just think about the concept as you are designing your pages.

...or maybe he meant something else...

mobrul

Wow, that definately sounds like something I'd like to get into, I'm going to be transfering a number of stupid little articles I wrote about this and that a long time ago (mainly for humorous purposes, shits and giggles, no?) and I'm already counting up somewhere around a dozen pages, give or take. I know it's not a huge amount, but it is enough to warrant some quick training on templates.

Ima go search around for this, I think I've gotten the basics of HTML down well enough to where I can present at least the mainpage sometime by midweek for ya'll to see, formatted with tables and what not... and I'm hoping it will look good on multiple browsers and all that.

In the mean time, if anyone has any direct links to this template stuff, I'd love to get started on it. I think I say this too much, but... Thanks everyone!





njuice42
icq 957255

njuice42: Learning to use templates is very important - have a look at the SSI, PHP and JavaScript includes here (I'd try and go server-sdie if I could):
www.gurusnetwork.com/tutorials/coding.html

I learnt the basics of HTML in an afternoon (I hope it doesn't show!!) by running through a 'Teach Yourself HTML' book I found on a shelf but you need to know what you want things to be like and then research the best way of achieving that effect. The secret is lots of planning and being able to find the right resources (use Google and the appropriate forums here, and their archives, and you should be able to track things down) later you will find what you've learned coming together and becoming more flexible. If you are doing a lot of one thing (DHTML, PHP, etc.) then track down some good sites for learning the subject and, pos., grab a book on it and sit down and really hammer the subject. It all depends on your way of learning, of course, but eventually you will realise you've built up quick an arsenal of skills and will also have developed snippets of code for dealing with simple things which you can drop into new projects which greatly slashes your development time (you are happy and the customer is happy!!). Its a slow process and there isn't every an end to it (you will always be learning something new everyday - I know, thanks to the Asylum, I do) but the journey is the fun bit anyway.

I also agree with the doc about making sure you have clean and clear directory structures and I would add that you should get used to this by setting up a development environment on your computer (esp. if you are using PHP/ASP when it will help to have the server running locally). Also keep useful little ideas and snippets that you come across in one location - it is really annoying running across a problem which you know was solved by something you saw the previous week but you can't quite track it down.

Emps

Hmm.. HTML came to me quite easily... to prove it to myself I knocked the homepage out from scratch in about ten minutes tops (had a tiny bit of trouble with making the tables liquid, so that the inital 400 pixel width for the content was viewable in other resolution settings, just had to form the buffer tables around it to set it all up...).

Here it is

Lemme know what you all think, I know I should probably be posting it in the site review forum, but then it isn't hardly as grand as anything in there... yet. Gimme time

Well folks, I thank you all for your help, I'm off to start learning about CSS. Learning HTML took me... what... two days? Three? Something like that... not hardly as difficult as I thought it would be hehehe. But then, hey, I'm a newbie to it (to an extent), so I was pretty much starting with a blank slate. I'm pretty proud of it...

Mind you none of the links work or anything, but then again that's all going to come when I get the templates down and working properly... I'm not platauing on simple HTML, I have the burning desire to go further... or maybe I should see a doctor about that... as it's more of a rash. Heh.

Much thanks to all your help!

edit: yeah... I really need to get myself a domain if I'm planning on being serious about it... I dislike the banner at the top combined with the popup, though, hey, fifty free megs to start out with isn't bad, right? In time, in time...

njuice42
icq 957255

[This message has been edited by njuice42 (edited 03-05-2002).]

wow Kretsky.. good link there chief...

MAX

njuice42 - You're getting there. I took a quick look at the source code. Here are a couple of thoughts:

You don't have any </tr> tags. You need to close your rows (usually right before opening another row)

Try to stay away from using tables to position things unless you're actually trying to display tablature data. Use CSS based positioning when you can.

You might try using XHTML compliant code. This is really no big deal to do. XHTML is somewhat of a "successor" to HTML 4.x. It requires that all non-closing tags have an escape charater, all tags be lower case, and all values be quoted. Examples:

<table cellspacing=0 cellpadding=0 border=0> - this would work in HTML 4.x
<table cellspacing="0" cellpadding="0" border="0"> - this is the XHTML compliant way

Examples of non closing tags that have escape character at the end.
<img src="blah.jpg" width="100" height="100" border="0" alt="My cool picture" />
<br />
<input type="button" value="click me" />
<meta name="description" content="All things Juice" />


If you apply these thoughts to your code, you end up with your code looking like this: (I didn't do any CSS stuff, just cleaned up what you had)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

	<meta name="description" content="A little bit of everything, all with a juicy center." />

	<meta name="keywords" content="njuice, juice, mp3, avi, mpg, txt, mpeg, movies, free, rants, boredom, bored, funny, humor, personal, personal sites, webpage, webpages, jokes, links, tv, television, smoking, anti-smoking, the truth, truth, business, mock business, lindows, windows, linux, red hat, windows, tips, help, windows 95, windows 98, windows xp, xp, 95, 98, 2000, me, windows me, windows 2000 professional, professional" />

	<title>njuice</title>

	<base href="http://wind.prohosting.com/njuice42/" />

</head>



<body bgcolor="#000000" alink="#A0A0A0" vlink="#585858" link="#A0A0A0">

<div style="font-size: 8pt; color: #e0e0e0; font-family: tahoma">



<table border="0" cellspacing="0" cellpadding="1" bgcolor="#484848" align="center">

	<tr>

		<td width="*"></td>

		<td width="600" align="center">

			<img src="pics/title.jpg" alt="n/juice" width="400" border="0" height="100" />

		</td>

		<td width="*"></td>

	</tr>

	<tr>

		<td width="*"></td>

		<td width="600" align="center">

			<img src="pics/navbar_im.jpg" width="400" height="50" border="0" alt="n/juice navbar" />

		</td>

		<td width="*"></td>

	</tr>

	<tr>

		<td width="*"></td>

		<td width="600" valign="top" align="left">

			<font size="1">

			<br /><br /><br />

			<b>Update Log - </b><i>Last Touched : March 21 2002</i>

			<br /><br />

			Have been working a bit in my miscellaneous projects, mostly busy work, making a few pretty pictures and all. Well, alright, I'll come clean; I've become addicted to an online RPG called <a href="http://www.ragnarokonline.com/en/r_main.htm">Ragnarok Online</a> and haven't put too much into the page. I have, though, created a seperate section just for the purpose of holding certain things that I want to allow others to view. Namely, my 'ART' section is up. I'll have the image maps above working by the end of the week, I swear. In the meantime, go <a href="art/index.htm">here</a> and check it out. I've got three backgrounds up today for download, all 800 x 600 (it's the resolution I'm using, so it's what I make for... at the time, I <i>will</i> start making larger backgrounds later on!!)   :)

			<br /><br /><br />

			<b>Mar. 6, 2002</b>

			Minor tweaks here and there, I'm going to be slightly changing the format of the page here in a few days, probably with new pictures, a little more complicated layout, rather than just a table with content. Sure, I know I don't have all that much right now anyways, but I think I will soon enough... lemme get happy with a final layout, first, eh? I've already started sketchin' up some new ideas that I think will look pretty cool if I can get em down right   :)

			<br /><br /><br />

			<b>Mar. 5, 2002</b>

			Well, here it is! My first version of the site, ala juice. It's nothing too impressive, mainly something for me to fart around with and feel proud of. It's done in all HTML, no Frontpage or any of that crap, and the graphics were made without using the 'layer effects' in photoshop that have all but taken the skill out of embossing/shadowing/glowing. Anyways, this site is going to be changing like none other, quickly and probably pretty often. If it looks goofy for some reason, drop me an <a href="mailto:njuice42@hotmail.com">email</a> with your name, computer specs, browser, connection speed etc and I'll try and make it capable with your system... or laugh at you, whatever.

			<br /><br /><br />

			</font>

		</td>

		<td width="*"></td>

	</tr>

	<tr>

		<td width="*"></td>

		<td width="600" align="center">

			<br /><br /><br />

			<img src="pics/footer.jpg" width="400" height="50" border="0" alt="Copyright crap" />

		</td>

		<td width="*"></td>

	</tr>

</table>



</div>



</body>

</html>

If you view that code in your browser, it looks like this. And it validates like this



[This message has been edited by Pugzly (edited 03-22-2002).]

Very interesting stuff!

Hey Pugzly you must be a walking w3c rule book! How did you learn all this stuff!

Again, may I ask for a translation of some geek-ese?

I ran the W3C HTML Validation on a site....of course it bombed! And I quote:
"Fatal Error: no document type declaration; will parse without validation, I could not parse this document, because it uses a public identifier that is not in my catalog.
You should make the first line of your HTML document a DOCTYPE declaration, for example, for a typical HTML 4.01 document: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">"

OK, OK...I sort of understand this, though scads of sites don't have this -- including this dear ol' asylum -- but how do you know what HTML type to use, etc?

You told njuice42 to put the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Why? and why the URL following?

ALSO!

Can you explain the "<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">" tag? or should that be in another post? I still don't have a clue how you know what CHARSET to use! Yes, I tried to read some about it on the W3C site....total geek-ese...didn't understand a word!

*Alas* where is that online "geek-ese to designer-ese" translator when you need it!

e-maestro

You'll get those errors if you don't have a DOCTYPE and Content-Type lines in your code.

The DOC type explains to the browser which Document Type Definition (version of HTML) to use. And it tells the code validators which dtd to use when checking the code.
For more info, see:
http://www.htmlhelp.com/tools/validator/doctype.html
http://www.oreillynet.com/pub/a/network/2000/04/14/doctype/
http://developer.apple.com/internet/html/doctype.html http://www.w3schools.com/html/attr_doctype.asp
http://www.oreillynet.com/pub/a/javascript/synd/2001/08/28/doctype.html


<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252"> tells the browser which character encoding set to use when rendering the page.
For more info, see:
http://www.htmlhelp.com/reference/html40/head/meta.html
http://apache.lexa.ru/english/meta-http-eng.html
http://people.netscape.com/ftang/meta.html






[This message has been edited by Pugzly (edited 03-26-2002).]

THX Pugzly,

The links for the "Document Type Definition" were very helpful.

Most of the links for the Charset were not useful. However I found these which helped me understand this issue.
http://czyborra.com/charsets/iso8859.html#ISO-8859-1 http://czyborra.com/charsets/codepages.html

If I am understanding things, it seems like if our site is in English or a Western European language we should use either:

charset=windows-1252 OR charset=iso-8859-1

Am I understanding this correctly?

e-maestro

PS: Why didn't you just say that, for heaven's sake!




[This message has been edited by e-maestro (edited 03-27-2002).]

Yeah Pugz is pretty good with that stuff...he made me "meta tag" happy... hehehe

MAX

e-maestro - You're in Northwestern lower Michigan. That's too close to the yuppers, so I thought I would just give you the resources to find it out yourself. Those yuppers are a strange bunch....

Anyways, it's better to know what it does and how to use it so you can choose which character set is best for you (especially given the diverse regions that Asylumites come from).

Make sense?

Hey Pugzly,

I'm certainly not a yupper! Spent most of my life in Texas and the Mid west, and a few years south of the boarder. I'm still not sure why I am in Michigan. By the way, where is C*****n Township? I don't remember.

Yes, I know it is good to know what things do and how to use them...problem is that half the time I get really tired of spending lots of time wading through these articles that don't answer my questions anyway since I can't understand what they are talking about. Most are too techincal.

You have to understand that I have 2 degrees in music and just some classes and hands on with computer stuff. I enjoy the graphical design end much more than the tech end...but can't seem to do any of that for fighting with code.

That is why I want simple straight forwards answers most the time, not a bunch of techno-jargon.

C*****n Twp. is about a 1/2 hour north of Detroit. We're right near Lake St. Clair.

Music, eh? I guess we found someone to do our music loops....