//flex table opened by JP
PDA

Click to See Complete Forum and Search --> : well, got started! now need guidence.

wardD
08-03-2004, 06:46 PM
hi all.

well, got some color and a couple pics, and a few sentances up to my "space" , cant realy call it a site yet.

I have done some basics, changed bgc and the <h1> <h2> thing.

I have been playing around with trying to align the images.
its not going well.

do you use the <p> symbol for pics, as well as paragraphs.

I have two pics that show up fine but the third is scrunched between the other 2, plus it shows the image scr= code instead of the pic.

should I have put a couple <br> <br> in their between the first and third image to allow for the size of the pic??

and if I wanted to put a link to sys opt their(my"space") where do I put the <a href=www.sysopt.com, or would it be http://www etc?

like it says, need guidence. the site is www3.telus.net/public/brenwar. folowing is the code such as it stands. I have been doing on line tutorials, and to type in code to do one spacific thing works fine but i havent found any where that tells you how to do a bunch of things at once.

<html>
<head>
<tittle>
<style type="text/css">
body {background-color: blue}
h1 {background-color: transparent}
h2 {background-color: transparent}
p {background-color: blue}
</style>

</head>

<body>

<h1>welcome to ward&brenda,s closet creations </h1>
<h2>here are a couple pics of our latest creations</h2>
<p>since we do not have a work shop, we use our walk in closets to house our saws and power tools. hence the name closet creations</p>

<p align=center><img src="Bear Head.jpg" width="300" height="200" alt="Bear Head"></p><p><p align=left>img src=eagle2.jpg"width="300" height="200" alt="eagle2"></p><p><img src="eagle.jpg" width="300" height="200" alt="Eagle"></p><p><b> my sweetie made the bear head, its my fav <br> <b>the eagle was kinda interesting to make, but took a long time to do<p/>

<body>
<p>
This is my first crack at a web site. <b>so welcome all</b> and bare with me!!! hopefully there will be good things coming soon. and my photogrphy will improve!!!<p/>


one more thing i noticed, the eagle2 image, in the public_html/index folder(thank you fancy, I finaly got a handle on that) anyway, the .jpg is in upper case type(JPG) and in my code its in lower case, would this have a bearing on why the image does not apear.

thanks for your time and input.

ward.
CompGeek01
08-03-2004, 11:48 PM
Ok, I'm going to step through this one at a time:


<style type="text/css">
body {background-color: blue}
h1 {background-color: transparent}
h2 {background-color: transparent}
p {background-color: blue}
</style>


These CSS (or Cascading Style Sheet) codes are correct, but a few are unneccecary. Since the background is already blue, the "p {background-color:blue} " isn't going to do anything. The same thing for the h1 and h2. You could change them to a different color, but right now they are just taking up space.


<body>

<h1>
welcome to ward&brenda,s closet creations
</h1>
<h2>
here are a couple pics of our latest creations
</h2>
<p>
since we do not have a work shop, we use our walk in closets to house our saws and power tools.
hence the name closet creations
</p>


All looks good here!


<p align=center>
<img src="Bear Head.jpg" width="300" height="200" alt="Bear Head">
</p>
<p>

<p align=left>
img src=eagle2.jpg"width="300" height="200" alt="eagle2">
</p>
<p>
<img src="eagle.jpg" width="300" height="200" alt="Eagle">
</p>
<p>
<b>
my sweetie made the bear head, its my fav <br>

<b>
the eagle was kinda interesting to make, but took a long time to do
<p/>

<body>
<p>
This is my first crack at a web site. <b>so welcome all</b> and bare with me!!!

hopefully there will be good things coming soon. and my photogrphy will improve!!!<p/>


Here at the end I think you're getting a little confused. The <p> tag (or Paragraph tag) is used when you want a new line to occur before and (I believe) after the text inbetween the two tags. The <img> tag (or Image tag) is used to display the picture...you did forget one of your opening <'s, so add that and your picture should show fine. Also, remember that if you open a tag such as <b> or <p>, you MUST close the tag with </b> or </p> or the rest of your page might not function. The <img> tag does not have a ending tag, so you do not technically need a closing <img> tag.

I don't know exactly what you were looking for, but in "correct" simple HTML, the final part would look like:


<p align="center">
<img src="Bear Head.jpg" width="300" height="200" alt="Bear Head">
</p>

<p align="left">
<img src="eagle2.jpg" width="300" height="200" alt="eagle2">
</p>

<p>
<img src="eagle.jpg" width="300" height="200" alt="Eagle">
</p>

<p>
<b>
my sweetie made the bear head, its my fav <br></b>

the eagle was kinda interesting to make, but took a long time to do
<p/>

<p>
This is my first crack at a web site. <b>so welcome all</b> and bare with me!!!

hopefully there will be good things coming soon. and my photogrphy will improve!!!
</p>
</body>
</html>


As a final note, I'm not sure what that second <body> tag was there for, but you need to put a closing body tag and a closing HTML tag at the very end of your document. I hope you continue trying out HTML!
ScaryBinary
08-04-2004, 01:59 PM
Your <head>...</head> section is a little incorect as well. It should be something like:

<head>
<title>Closet Creations</title>
<style type="text/css">
body {background-color: blue}
h1 {background-color: transparent}
h2 {background-color: transparent}
p {background-color: blue}
</style>
</head>


You spelled "title" incorrectly, and you need a closing tag for it. The "style" tags should be in the header, as you've done, but outside the "title" tags. Whatever you put in the "title" tags will be displayed on the browser's title bar, and more than likely used as the "Favorites" text if someone bookmarks your site.
ScaryBinary
08-04-2004, 02:04 PM
...and if you want to get real picky, the very first lines in your HTML document should be something like<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> so the browser knows that you're speaking XHTML (the latest flavor of HTML). The first line identifies the language you're using, and the second line tells the browser where that language is defined. It looks confusing, and most current browsers will know what you're talking about anyway if you leave it out. Just a little tidbit of info.
Baddog
08-04-2004, 04:04 PM
You will love this site>>>http://www.jsmadeeasy.com/about.htm :t :cool:
CompGeek01
08-04-2004, 04:36 PM
Originally posted by ScaryBinary
...and if you want to get real picky, the very first lines in your HTML document should be something like<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> so the browser knows that you're speaking XHTML (the latest flavor of HTML). The first line identifies the language you're using, and the second line tells the browser where that language is defined. It looks confusing, and most current browsers will know what you're talking about anyway if you leave it out. Just a little tidbit of info.

I don't think he's QUITE ready for XHTML...maybe 4.01.
wardD
08-04-2004, 05:54 PM
thank you all. gee I knew I missed a < or something.

my first crack at geting pics to show, it took me 3 days to figure out that I had spelled bear head this way in the code but the pic was Bear Head. such a silly thing but it sure put a stop on veiwing the pic

and its true, I definatley am not ready for xhtml.

however I will keep plugin away, I know their aint much up thier but as I learn stuff(code) the site will grow and hopefuly improve in looks and style...

comp geek01, I see what you are saying about the {p background color not needed. to see things happen, I have just copied code from tutorials, then changed stuff to suit my needs. originaly I had some gaudy pinky purple color that I was too embarassed to post at sys opt. so I just changed things to transparent and blue so it wasnt such an eye sore.

K, well I guess I will go play and see if I can get the 2nd pic to show.
again, thanks for your time. it is apreciated.

ward.


PS...

i found the missing< opening unit, took me forever to see it, I was looking for a > closing guy.( I dont know why?) anyway poped it in their, and the code that showed on the browser has now turned into a sqaure where a pic would be if the browser could see it which aparently it cant since their is just the box with the little red X.

I have done the exact same method to load the other two pics, I had the same prob with them but it was my spelling causing the delema, I have checked and rechecked my spelling, and punctuation, and it all looks good. I will keep workin on it...

compgeek 01, when you did the step by step thing, your code is layed out nicley. spaced out and easy to read. is that what mine should look like??. do one thing drop down a line and do the next entry? I thought about that but figured it would leave big spaces on the page. I think I am seeing some light!!

regards.
ScaryBinary
08-04-2004, 07:39 PM
Originally posted by CompGeek01
I don't think he's QUITE ready for XHTML...maybe 4.01.

Actually, with the clean-ups indicated above, his page is valid XHTML. He just needs to change that amphersand to the associated escape character, which oddly enough I can't enter because SysOpt actually parses it back to an ampersand! :cool: (It would be "&_amp;", without the quotes and underscore, of course.)

See, wardD, you already know XHTML! ;)
ScaryBinary
08-04-2004, 08:09 PM
Originally posted by wardD
compgeek 01, when you did the step by step thing, your code is layed out nicley. spaced out and easy to read. is that what mine should look like??. do one thing drop down a line and do the next entry? I thought about that but figured it would leave big spaces on the page. I think I am seeing some light!!
HTML, by design, ignores "redundant" whitespace. Meaning, if your HTML file has<p>Nice big spaces</p> it is displayed as "Nice big spaces" by the browser. If you want more than once space, you have to "buck the system" by either using what is called a non-breaking space to add space between words, or extra paragraph marks between paragraphs. (More CSS propaganda: you can customize the amount of space around practically any HTML object using CSS!).

Typically, you indent your HTML to make it easier to read and indicate the "level" you're working at. A document with a table might be indented like<html>
<head>
<title>A document with a Table</title>
</head>

<body>
<p>Here is a table with two rows and two columns. Love it. Make it yours.</p>
<table border="2">
<tr> <!-- This is how you make a table row. -->
<td>A table cell in Row 1</td> <!-- This is how you make a table cell. -->
<td>Another table cell</td>
</tr>
<tr> <!-- Here is my second row. -->
<td>A table cell in Row 2</td>
<td>Another table cell</td>
</tr>
</table>
</body>
</html>

It's a personal thing, there's really no set standard. Note that even though all the stuff is indented above, the browser doesn't care - it will render the table on the left side of the window, ignoring any extra spaces.