Preserved Topic: Artist seeking code help...

I'm a little new to all of this, I've only recently discovered a deep desire to become successful with web graphics and digital design. I have some formal art training, and very few home grown (read: self-taught) computer skills. The problem I keep having is that whenever I try to teach myself HTML, (which I realize is NECESSARY for web development) my eyes sort of slide off the page and/or screen about halfway into the first paragraph. I will not lie, I am an artist, not a programmer. I vaguely remember learning BASIC with our first PCjr in the mid '80's... I have very little experience with code. I am very grateful to Macromedia for Dreamweaver which sort of gets me around this, however, I know the a grasp of HTML would make even this program more functional to me. What is the best way, given all of your vast experience, for me to overcome this major deficiency?

When I first started learning HTML, what helped me a lot was to change my mindset a little.
I first approached HTML like a programming language (which it is, kinda) and I got confused...mostly based on fear, I think.
Then, I started thinking about it as a document markup language (which it is, most definately).

Grab a newspaper.
Look at it.
Go ahead, go get one...I'll wait.

At the top of the first page is 'SmallTown Dispatch' or some such name of your paper.
This is the name of the paper. You know that from visual clues, such as letter style (font) position on page (top), etc.
Computers don't know the difference from 1 letter to the next...there is no connection...until you tell it:
<title>SmallTown Dispatch</title>

Next on the paper you will see a headline: Bob Smith Elected Mayor.
Again, you know it's a headline because of visual clues. A computer doesn't have those visual clues so you have to tell it:
<h1>Bob Smith Elected Mayor</h1>

Next you'll see an article. You know all the words in the article belong to the article, and not to another article because of visual clues. You have to tell the computer:
<div>blah blah blah blah blah</div>

Then there are paragraphs inside that article. If the journalist is a good writer, all the words in a paragraph focus on a central theme. Tell that to the computer:
<p>a;sldfj;djfd;jfsd;lfja;sldfjdjf;dsfj</p>

Next you might see an image of Bob Smith taking an oath of mayorhood. Tell the computer:
<img src='bobSmith.jpg' />

Somewhere in the article you may see a list of promises Bob Smith has made in his campaign. You know it is a list (as opposed to, say, a headline or another paragraph) because of visual clues. The computer needs to know that a list is a list, and not a paragraph -- use these two tags: <ul> (unordered list) & <li> (list item)
<ul>
<li>Pave the streets</li>
<li>Make 2500 new jobs</li>
<li>Feed the homeless</li>
<li>Build a new library</li>
</ul>

Finally, in your newspaper article, there might be a table showing the ages and reigns of the last 3 mayors before Bob Smith. You know because of visual clues. Computers need to know -- use these tags:<table> (builds a table) <thead> (heading stuff for your table) <tr> (a new table row) <td> (a new data cell for your table.

<table>
<thead>
<tr>
<td>Mayor</td>
<td>Age</td>
<td>yrs in office</td>
</tr>
</thead>
<tr>
<td>Bob Smith</td>
<td>35</td>
<td>--</td>
</tr>
<tr>
<td>John Jones</td>
<td>46</td>
<td>8 yrs</td>
</tr>
<tr>
<td>Mike Brown</td>
<td>37</td>
<td>12 yrs</td>
</tr>
</table>

There are many many many tags, more than anybody could possibly memorize. The ones I used above are some of the more common ones...ones you'll use a lot. Get a good book (check O'Reilly, they're books kick much ass) to keep handy for those situations where you don't know what tag is appropriate.

Once you are comfortable marking up (telling a computer what text is what piece) a document, then you can start worrying about style sheets and making it look on the page like you want it to.

And, just for kicks, here is the HTML for that newspaper article...cut and paste the following into notepad or some other simple text editor, save on your harddrive as 'article.htm', open a browser, file->open, go to article.htm and open. See what it looks like...see the logic.

<html>
<head>
<title>Smalltown Dispatch</title>
</head>
<body>
<div>
<h1>Bob Smith Elected Mayor</h1>
<img src='BobSmith.jpg' width='150px' height='120px' />
<p>Bob Smith was elected mayor of Smalltown yesterday. He received 68% of the popular vote. blah blah blah blah blah blah blah blah blah.</p>
<p>Some more blah blah blah blah blah blah blah. In his campaign against the incumbant, John Jones, Smith made the following promises.</p>
<ul>
<li>Pave the streets</li>
<li>Make 2500 new jobs</li>
<li>Feed the homeless</li>
<li>Build a new library</li>
</ul>
<p>As soon as he took the oath, he immediately refuted everyone of those promises, saying "I never said any of that. The media is making it all up!"</p>
<p>Jones responded with immediate criticism, saying he was going to set up an exile government. "I am the voice of the people. I must regather my forces and wait until the time is right.</p>
<p>Following is a table showing the last 3 mayors.</p>
<table>
<thead>
<tr>
<td>Mayor</td>
<td>Age</td>
<td>yrs in office</td>
</tr>
</thead>
<tr>
<td>Bob Smith</td>
<td>35</td>
<td>--</td>
</tr>
<tr>
<td>John Jones</td>
<td>46</td>
<td>8 yrs</td>
</tr>
<tr>
<td>Mike Brown</td>
<td>37</td>
<td>12 yrs</td>
</tr>
</table>
</div>
</body>
</html>

Hope that helps. Good luck, stick around here, and come back with more questions when you are ready.
mobrul



[This message has been edited by mobrul (edited 06-12-2002).]

Thanks mobrul!
That's a pretty interesting way of looking at it. I'll have to do the cutting and pasting stuff when I'm home from work this evening, but it makes a little more sense from a publishing point of view. And it makes me feel better that I'm not the only person who can't remember all those dang tags! I must get a book or 2...
It just takes time I guess... I sure do wish I could osmosis-ize it somehow!
I much appreciate the tips!

Hi bodhi23! Looks like we're neighbors Glad to have you here.

Anyway, I kind of went through the same thing as you, however, I am no artist.
When I started to learn HTML it was real confusing. I looked at it and said "Man what is all this crap?" Then I realized that a web page is pretty much nothing more than text with some tags aroound it that told the browser how to show it.

There is one book that I can recommend it is the O'Reilly book. Very good and will probably be the only book that you will need. Run over to Border's on High Point Rd. and check it out.

Also, one web site that really helped with HTML and other things is http://www.w3schools.com Great site for a lot of web stuff. Check that out as well as the FAQ that we have here. Just clicky on the linky up at the top and have a nose around if you already haven't.

Glad to meet you and hope you enjoy your stay.


Later,
C:\


~Binary is best~

I haven't ever been really big on BBS or newsgroups or that sort of thing, but I like the idea of having a place to turn to with questions where I know there's a variety of skills and ideas... I think I'll stick around... No one should have to try and learn some of this stuff without a competent mentor or 2 around to correct glaring mistakes...
C:\, It's simply amazing that of all the different people on this particular forum, and all the countries that must be represented, that there are 2 of us from the little NC town of Greensboro... I'm flabbergasted! Nice to meet you - perhaps one day face to face?

bodhi

bodhi,

Feel free to email me with the address in my profile. I don't check it regularly so if I don't get back to you quickly, I will.

We could get together and I could help you out some if you run into some problems.

Take care.

Later,
C:\


~Binary is best~

As long time programmer, I was a bit confused by HTML at first as well. I picked up the syntax, but the structure and stuff was really weird.

I printed out NCSA Primer and got to work. As I was going through it, I was reminded of when I used to use Word Perfect. In WP there is as way to look at the "formatting codes" or whatever it's called. Once I made that correlation, HTML made a *ton* more sense.

My other big epiphany was in the Primer. Basically nested tags. It was the example of using an image in an anchor:

quote:

---

<A HREF="hotlist.html"><IMG SRC="BarHotlist.gif" ALT="[HOTLIST]"></A>

---

My light was on and shining bright. Just a matter of learning the tags.

Another thing that has really helped me is the Table Sampler.





[This message has been edited by warjournal (edited 06-12-2002).]

I think it is something for the FAQ, isn't it?

Btw: I'am still learning to push my science
in html.
It isn't a very complicated thing to learn for....just
learn, read, learn and go on...

cu
~Xdreamer.ch~

Another tip is to design a site. Prefferably in Photoshop since you can use the graphics for your site but heck even on a piece of paper.

Then try to build it. There's nothing better than experience and this will give you the goal you may need to stay focused.

P.S. Though there's CSS and whatnot tables are still the main method for laying out data.
That NN link is great you may also want to check out the Guru's Network



.:[ The Tao of Steve ]:.
Be Desireless
Be Excellent
Be Gone
...................................

I'm with wj on the WP analogy (although mobrul's is really good). If someone os late twenties+ I always try and explain it first with reference to WordPerfect's show codes feature (anyone younger tends to be a MS Office child although there are exceptions).

A webpage is just written in plain text - HTML is a markup language and what it is doing is simply telling the browser what certain sections of this plain text actually are - it gives what would just be a mass of characters meaning so now the browser knows that one section of the text is a header or another section is a paragraph. With recent developments you can leave the browser to impose its own rules on how these elements are styled or you can develop a simple set of rules that tell the browser how it should display each element (the wonders of CSS).

I'm kicking around a 'My First Webpage' tutorial for when the GN redesign is done so let us know what bits you find tricky.

___________________
Emps

FAQs: Emperor

Welcome to the Asylum bodhi23...don't let wakky con you out of your meds...

Well, I learned HTML in school, along with other skills...but here is one of my most prized sources... http://selfhtml.teamone.de/ SelfHTML....I love this stuff...great tips, and can be directly linked by Dreamweaver, CuteHTML, etc. Max's HTMLBeauty is also very good, and is free...

Just get started...and it will all fall together...



[This message has been edited by WebShaman (edited 06-13-2002).]

for html newbies, I usually recommend "html for dummies" (which is a terrible title, I know)
it introduces html in a logical from the ground up type format and builds on the knowledge it imparts in a common sense way which will have you coding and understanding what you code within a few hours
oh - and if possible learn to code your html in a text editor - it really does help

after that, once you have grasped the html essentials you have to change your atristic mindset as well - the designs that you create will by neccesity be constrained by the code that you know and by the table structure that is easiest to organise the documents in

good luck and have fun
I:.

I feel like such a part of a community all of a sudden! You guys are so eager to help - I surely appreciate it!

Emps - So far, the whole table concept is what's throwing me, though I know it shouldn't be this diffucult!
I guess I just need to exercise my brain and start memorizing!
Somehow I just keep hoping one day I'll wake up knowing, but I guess that doesn't happen without months and years of practice practice practice...

WS - we get meds? Wakky must have gotten to mine first! I'd better see the Doc about that....

For the record - Word also has a function that will allow you to look at the paragraph markup. It's just not as easy to locate as WP was....

bitdamaged - as an artist, that may well be the best way to look at it. I will give that a try!

Thanks again for all your (collective) support - I'll work on the code and put a page up somewhere and you guys can check it out for me... Somewhere inside this dreamy artist is a programmer waiting to come out - it's what my dad did for 25 years for IBM, so it's in the blood somewhere, just got to find the power!

Bodhisattva: an enlightened being full of generosity who sticks around in this world to show others the way to enlightenment.

bodhi23: Check out bitdamaged's tables tutorial over at the GN - it should be very helpful in getting your head around that topic (however, bear in mind that most of us don't try and code complex table layouts by hand - I have a copy of HoTMetaL Pro4 I got of a magazine cover disc which I use for the job. So don't feel like you are doing anything wrong if you need a little help with this - although it is a good idea to have a good grasp of tables anyway).

___________________
Emps

FAQs: Emperor

quote:

---

most of us don't try and code complex table layouts by hand

---

hmmm. . . maybe I'm doing it wrong. I still hand code these damn things everytime. I now have made a few "templates" that I can work from that has helped out a lot.

Tables can be a pain but then again I would have a hard time laying out some pages without them.

Later,
C:\


~Binary is best~

[This message has been edited by CPrompt (edited 06-13-2002).]

c:\ lol tables is one part i still do by hand dreamweaver sucks at it i place the first table in dw and then any nesting etc i do by hand...when i get home tonight i will copy a table i did by hand that had a bus time table built into it...that was the worst table i have ever had to try and make...

tomeaglescz, That is one of the reasons I have never really been interested in using programs such as Dreamweaver. Too much funky code to go through.

I used to hate nested tables but now I pretty much can do them with no problem and very little "redoing".


Later,
C:\


~Binary is best~

Ok, I was following along fine until someone said "nesting"...
What is this nesting phenomenon?


Bodhisattva: an enlightened being full of generosity who sticks around in this world to show others the way to enlightenment.

If a table's cell (a <td> ) contains another whole table, you call it a 'nested' table. But take care, these things can get *very* confusing as soon as you start nesting a nested table into a nested table's cell

We had a couple of threads about nested tables in the past, I'll go and check if I can find some uselful ones....

Have a look at this thread (I can't find any others right now but it has a nice example in it):

How to design this table effect? Please help?

kuckus (cell #282)

Welcome bodhi23. All of the Code Gawds advise above is good stuff. Just wanted to throw this into the mix, `cause it helped me ( before I found these guys) . Page tutor explains what code you`re using is doing as you go. Kinda brought in into focus for me.
Then I found these guys, and realised how badly I sucked at it, so I try to stick to the pretty pictures as much as I can.


Cell245

Yeah, I still code everything by hand mostly. But when you have to put up a long distance rate table with well over a thousand cells, sometimes you gotta take a shortcut. Personally, I usually just code a little C++ snippet to parse the document and format it, but you can just drop it into whatever WYSIWYG editor if you'd like.

Also, a good site to check out is webmonkey.com. They have some great tutorials.

And DB, you do the pretty pictures oh so well.

Gosh! I think I'm gonna be busy this weekend! So many different ways to try this out!

I'll work up a page this weekend and put it up for critique. That ought to give you maniacs something to chew on for a day or so...

Perhaps I'll get somewhere with this now...

Bodhisattva: an enlightened being full of generosity who sticks around in this world to show others the way to enlightenment.