Learning HTML

[mgNphotoguy]

Hi folks,

Well since I enrolled in Kaplan, I have had several classes on computers, writing and such but now I am in a Web Basic Design class. Yeah Web Basic. Everything we do has to be hand coded. I am wondering if I will ever be able to sit down and write out code without having to copy it word for word. This weeks topic is creating a table in my career page.

For those who would like to see how the page is coming its at.

Now don't poke fun the site is bland and needs work and I am still fixing some spelling errors. However sometimes the site just needs to be turned in cause my time is up and I have 4 more weeks to turn this site in to an awesome site that will be worth bragging about.

http://www.freewebs.com/kelthemediagirl/bio.htm
http://www.freewebs.com/kelthemediagirl/career.htm

http://www.freewebs.com/kelthemediagirl

I am still having problems with the image coding and get the text to wrap around.

Like I said this week I need to turn my career page into a page with tables.

Any tips I will take and how do I write code for images to text wrap?

Kelly

[Sysmom]

Kelly,

What do you mean when you say, "for images to text wrap"?

Do you mean for the text to stay on the right side of an image, and when it reaches the end of the image, to bounce back to the left margin?

That's an align property. If you are not using style sheets yet, the HTML markup would look something like:

img src="imageFileName.jpg" align="left" hspace="8" vspace="8" alt="This is a picture of a golf ball"

Always allow a little bit of space (horizontal=h and vertical=v) between where your image stops and the text starts, that's what the hspace and vspace are for. The hspace being more important most of the time ... but when you need vspace, you REALLY need it.

You can also align it to the right, with the words to the left. Just change the align value.

deb

[mgNphotoguy]

The instructions said to add width and height of the image as well and everytime I did it all I got was that little annoying red X. I will try typing in what you said and see what happens.

Thanks

Kelly

[[Director] Joseph B]

I'm going to tell you this but don't spread it around. One good way to learn code is to use a program like FrontPage (or Expression Web) that is WYSIWYG and use a split screen to see what the code is as you enter stuff. Another is to find a site that is doing what you want and view the source file to see the actual code.
If you still have trouble you can Ask Lucas or Tony they know pretty much everything.

[Gene]

The red X means the image can't be loaded. The most common cause of that is the image not being where you specified it. Double-check the SRC for the image, and if it's in a different directory, make sure it specifies that, too.

And if the red X only appears when you load the page on the website, you may have specified the directory on your computer (e.g., C:\web site\images\foo.jpg) instead of just the directory as it appears in general (e.g., images\foo.jpg)

[Sysmom]

Gene's right on about the red X.

Image height and width is always a good idea, that would look like:

img src="imageFileName.jpg" height="107" width="72" align="left" hspace="8" vspace="8" alt="This is a picture of a golf ball"

Specifying height and width will speed up your page loads. But it will still work without them.

You just need to know where the image is in relationship to where the html file is. if they are in the same directory, you're good as listed above. If it's not, then you'll need to give it all the information.

The other thing to remember is that if you are uploading this to a Unix flavored host of some kind, filenames are case sensitive.

deb

[cjlowe]

Originally Posted by Joseph B

One good way to learn code is to use a program like FrontPage (or Expression Web)

Eek! FrontPage generates awful code!

[Smob]

Originally Posted by cjlowe

Eek! FrontPage generates awful code!

What do you mean awful. Not the way you would write it, or it doesn't work. I wrote awful code yesterday. Today I found a better way.

[mgNphotoguy]

I can't use Frontpage so that is out....( I will try the code Deb typed it and let all of you know what happens.

Kelly

[cjlowe]

Originally Posted by Smob

What do you mean awful. Not the way you would write it, or it doesn't work. I wrote awful code yesterday. Today I found a better way.

Not the way anyone sane would write it, not the way anyone, sane or insane, can read it clearly, and not in a way it works most browsers. The newer versions are a lot better than the older ones, that's for sure.

Speaking of HTML development, http://www.nvu.com/ <- free basic page editor

[Tony Kanago]

Originally Posted by Smob

What do you mean awful. Not the way you would write it, or it doesn't work. I wrote awful code yesterday. Today I found a better way.

Smob, the code generated by most WYSIWYG editors along the lines of FrontPage generates markup that is neither effecient nor editor-friendly. A common trick with DreamWeaver used to be spacing everything with transparent gif images stretched to the size necessary to mold a layout. FrontPage and Office have both generated code that uses elements that don't actually exist in HTML but rather exist only in Internet Explorer, as well as obscure forms of absolute position that fails to render in other browsers.

FrontPage can, however, be a tool for things like tables (a concept that is, in itself, outdated for design beyond tabular data) but most designers accept this as a limit. Visual Web Developer, Microsoft Expression Web, DreamWeaver, and NDU are all tools that can help you generate a minimal of HTML, but beyond all else, they provide an interface that really facilitates YOUR writing of code.

As for the text wrapping issue, it was said best that the easiest way to do this is simply by adding an 'align' attribute to your image element to cause text to wrap semi-fluidly around the image. However, be forewarned that this is not good practice in the 'real' world of design. This you'll learn as you move toward HTML 5 and XHTML/CSS.

Web design is very difficult as it essentially encapsulates all portions of the human mind- beauty, analytics, creativity, intuition, exploration, all channeled through a complicated technical language. I've found it's much easier to sit down and develop an application using a language that seems much more difficult than HTML primarily because its a little more straightforward; application code always works the same, whereas markup on the web can be rendered in hundreds of different ways. Do not think the difficulty your facing is anything unusual though. I can say without a doubt that everyone competent in design at present felt the exact same frustration when first learning.

I'm obligated to plug my class at the convention this year on Web Design. It will focus on standards-compatible design, and my aim is to take someone with a limited knowledge or experience with HTML and take them to a place of confidence and skill with XHTML and CSS in just the hour and a half offered. The video will be online following the convention (though I don't know if Tim will restrict it to pro members or anything along though lines) so I hope you check it out.

--
Kelly, you can ignore this part.

Actually guys, it's not a good idea to place height and width attributes on your images! While you don't have to fully commit to standards-compliance and XHTML, it's a good idea to avoid attributes like that on every element. The only attributes you should be using regularly are id, style,title, dir, lang, accesskey, tabindex, and alt (for images). You can throw those things in your style, but it's generally a better idea not to throw in a bunch of outdated HTML for a misplaced sense of good practice (no offense intended!)

Basically, in most recent XHTML specifications, all extra attributes have been deprecated in favor of CSS. While height, width, hspace, and vspace all work, you should just do it with CSS to be standards-compatible in the future.

[Smob]

CJ and Tony, great come back! I was just being cute

In my real life job, I do allot of review and analysis of other people's software and have been in and out of just about every language you can think of. I have found the HTML/scripting applications the absolute hardest to break into (maybe next to Lisp). Recently I got nvu to help me interpret what someone else was doing. It is good at showing me layout and definition, but I still have to hunt down the event handlers. Prior to this, it was all hunt and peck.

I am not complaining, it just that the language is evolving so fast that what seems to work today will not be around tomorrow. I think its going to some great places and I like that "it essentially encapsulates all portions of the human mind- beauty, analytics, creativity, intuition, exploration, all channeled through a complicated technical language".