HEY!
i was looking for a few tutorial websites for coding.
i currently use W3schools but would like to try and see/use some others to create more effects and things which i havent been able to see how to do within W3schools.
so if anyone knows a few goods sites please post links
im sure this thread will come in handy for other people who want to create websites and have no or little experience much like myself not long ago and i still have little experience now and am only creating basic websites.

W3schools

Webmonkey: The Web Developer's Resource

I'd recomend using a few websites as reference, not following tutorials. That way, you learn to really code and find a style that best suits you, not just verbatim copy templates.

i havent just copyed any templates for the website im working on ATM, i did for my first one (calumsdiscos.co.uk) but im recoding that with loads more CSS anyway. this 1 i have used tutorials as reference but coded as much asi could without referring to them. i have struggled to use websites for reference as i sometimes get confused on "why"or "what" tags are for... but with a tut it is easy ad explained making it easy to learn from for first few websites, obviosuly.

Of course thay are useful, expecially since they are complete, so you can look up many things in them. Plain old references might have a few things missing, while a tutorial would have to have them, unless it said "Step 7 - Guess what to do now".

quote:

---

Originally posted by rav0
while a tutorial would have to have them, unless it said "Step 7 - Guess what to do now".

---

You're probably best off using W3Schools as a reference, and analysing tutorial code and website code to see examples of usage in the 'real world'. Then, based on all that info, experiment Nothing beats learning by screwing up repeatedly That's how I learned XHTML and CSS, and bits of the Win32 API as well.

raceprouk is sooooo right. Best way I learnt was by stealing others code and ideas and devloped them into my own. You need something to practice on, show off your skills, how about trying this

Using tables create this template:



Try making it XHTML valid while you are coding, you will learn so much by coding something so simple

i havent yet used tables to create anything like that.
I am making my current website XHTML compatable but have not yet added the XHTML tag at the top as i couldnt see the screen to find out which one i needed.
also my own website (calumsdiscos.co.uk) will be recoded from scratch after the one i am working on now to use more CSS, less HTML and be CHTML compatable

lol good to hear, XHTML is really no different from html, but is a better way to code.

I suggest this doctype for you

code:

---

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

---

do i keep the

quote:

---

Originally posted by Absorbation
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

---

quote:

---

Originally posted by W3 validator

I was not able to extract a character encoding labeling from any of the valid sources for such information. Without encoding information it is impossible to reliably validate the document. I'm falling back to the "UTF-8" encoding and will attempt to perform the validation, but this is likely to fail for all non-trivial documents.

---

Look at the forum source, same doctype, you place at the top of the page before any code starts

oh yes i see now

what about the other bit i asked about {my edit}

Oh you need to add the encoding. You see some browsers may not pick up certain symbols etc so by adding an encoding W3 can reconise how your website was coded

So in the head tags:

code:

---

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

---

ok it works now - sort of...
it keeps saying things arent aloud in DOCTYPE
like: <br> and: <ul>
etc
here is the result page:
http://validator.w3.org/check?uri=http%3A%2F%2Fww...er.net%2Findex.htm

ya change <br> to <br /> tags. Why? Because every tag must be closed, so when you do <b>hi</b> you close the tag.

But you do not go <br></br> Now do we, so we just use a traling slash at the end <br />

i did though .. with most if not all
i have been careful doing that with this website
edit: checked by using "CRTL+F" and it says there are no "<br>" 's

Oh right for some reason you can't use <br /> tags in <li> tags. I had this problem before but i never really use <li>. There must be some reason, next time when you space do the next bullet point close the <li> tag before <br />

Edit: and that seems to be your only problem, the rest of the coding is great

just

code:

---

alt = ""

---

code:

---

       <h3>
           <ul>
               <li>
                   <a href="welcome.htm"> Welcome</a> </li>
                   <li>
                       <a href="flying.htm"> Flying</a> </li>
                       <li>
                           <a href="shooting.htm"> Shooting</a> </li>
                           <li>
                               <a href="sport.htm"> Sports</a> </li>
                                   <li>
                                <a href="annual_camps.htm"> Annual camps</a> </li>   
                <li>
                <a href="duke_of_edinburgh.htm"> Duke of                             Edinburgh Award</a> </li>
                             <li>
                                <a href="events.htm"> Events</a> </li>
             <li>
                 <a href="photos.htm"> Photos </li>
                     <li>
                         <a href="staff.htm"> Staff</a> </li>
                  <li>
                     <a href="forum" target="_blank"> Forums</a> </li>
          </ul>     
      </h3>

---

http://pixel2life.com has some nice tutorials!

i knew about the alternative text for images - i'll add that in a sec

quote:

---

Originally posted by Absorbation
There must be some reason, next time when you space do the next bullet point close the <li> tag before <br />

---

Use the code I provided and it should work

Remove the h3 tags around the ul and use css to change the formating, like it is designed to do
header tags (h1 to h5) are not ment to style your content, the are intended to be used for headers (captain obvious ).
Infact you should never use html tags to apply a certain styling to your page, you should always use css rules.
HTML marks up the page, and CSS styles it

Also get rid of that 500kb gif it looks pants because it's over compressed, and its huuuudge.

quote:

---

Originally posted by Absorbation
just

code:

---

alt = ""

---

in your image tags

---

ok
so i'll change all of the text formatting in my website and then sort that (deleting html - replace with CSS )
and i did set the "alt=" " " as text anyway

and the 504kb image is the background and i want a fade much like that one and the only way to do it that i can think of is to set an image like that - and it has to be big to cover all of the area that the website takes up.
are there any other ways i can get a similar fade without that image?


EDIT:
i think...i think... i think i've sorted it
apart from a few errors (11) which i cant see how to fix i think it's ok
i am now using CSS instead of HTML for the text
and i have alt: "" tags
and DOCTYPE
and META tags
i think its ok

(to check go to: www.2347atc.teaspoondiner.net/index.htm
its only the homepahe in XHTML at the moment!
* DJKAL is happy and runs around bedroom dancing and being hyper

* DJKAL doesnt do hyper or dancing! so i was lying

Result:       Passed validation
YAAAAAAYYYYYYYYYYYY

Instead of using a GIF, use a PNG for the background. It allows full 32-bit colour, and will compress well.

i thought PNG took longer to load on the internet because if its huge size...

thats why i used gif and not PNG even though i considered PNG for that colour reason

Try PNG8 instead of PNG32, also you can strech the image so it does not need to be so big

quote:

---

Originally posted by Absorbation
Try PNG8 instead of PNG32, also you can strech the image so it does not need to be so big

---

i have saved it as PNG
try and see what its like now
www.2347atc.teaspoondiner.net

quote:

---

Originally posted by DJKAL
i have saved it as PNG
try and see what its like now
www.2347atc.teaspoondiner.net

---

i know the size is a bit
but i dont know any way to compress it

nah he wants a fade like that ( the site is for my mate's AC squadron )

EDIT:
the home page (i think)is to plain,
i was wondering if it was possable to get the hyperlinks on the left to go from where they are now and move to the left of the "2347ATC logo" (alt. text) but keeping the logo in the same place (centered)

i used:

code:

---

img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}

---

You can make it fade going down very easy, I suggest you try that

quote:

---

Originally posted by Absorbation
You can make it fade going down very easy, I suggest you try that

---

quote:

---

Originally posted by DJKAL

quote:

---

Originally posted by Absorbation
You can make it fade going down very easy, I suggest you try that

---

by coding?

how?!

---

quote:

---

Originally posted by John Anderton
You can find almost everytrick in the book on w3schools tbh

---

Well you make a background image that takes most of the page (down) but like 1px thick. You then using css make it repeat to the side and stop repeating down. Then add a background colour to finished the fade effect

Check out this

code:

---

<style type="text/css">
body
{
background-color: #000000;
background-image: url('bgdesert.jpg');
background-repeat: repeat-x
}
</style>

---

ok - i've done that and its fine.... thanks

still no ideas on sorting out the image on the homepage though?

quote:

---

Originally posted by DJKAL
ok - i've done that and its fine.... thanks

still no ideas on sorting out the image on the homepage though?

---

code:

---

align="right"

---

the image wont be in the center then though will it?
i want the image in the center...but the text (hyperlinks)  to the left of it

Just one question: why is the page so long? Home pages should really have all the main links in the top part, so you don't have to scroll.

thats what im tryng to sort ...
i want the links to "rise" and be next to the 2347ATC logo image but whilst keeping that in the center.
to make it "less plain" and also to stop veiwers havint to scrolll

I heartily recommend you think about XHTML Strict, and move all formatting to CSS. Of course, if you wish to stick to Transitional, that's fine: it's for 'transitioning' between old HTML and XHTML Strict, after all.

Anyway:
- Remove all the <br />s from around the image
- Swap the h1 and h2
- Use CSS to set the image to 'float', with some positioning attributes to make it float in the right place (you may want to look at <div> tags for this)

mabye im wrong in my outlook on this bit - but:

quote:

---

Originally posted by raceprouk
Remove all the <br />s from around the image

---

quote:

---

Originally posted by raceprouk
- Swap the h1 and h2

---

quote:

---

Originally posted by raceprouk
Use CSS to set the image to 'float', with some positioning attributes to make it float in the right place (you may want to look at <div> tags for this)

---

<h1> is meant to be the page title, <h2> a subtitle. There's a reason there's 6 different heading tags
As for the image: CSS margin-top

quote:

---

Originally posted by raceprouk
meant to be

---

Adding a margin-top to the image will allow you pixel-fine control of the image location. In fact, since you have two images, assign an ID to each one, then use the '#id' selector to set the margin CSS properties.
Example:
<img src="logo.gif" alt="Logo" id="Logo"/>
with CSS
#Logo {
margin-top: 25px;
}

ok,
can the ID be anything?

but this doesnt make the links able to move up the float next to the logo image whilst keeping that in the center

I know it doesn't make the image float: I only told you how to position the top
To get the 'floating', try this: wrap the <ul> in a div, wrap that <div> and the <img> in another div, and set the inner <div> to 'float: left;'. Scrap that: it doesn't want to work. Just experiment

uuuuuhhhoooooooooohhhhhh
ready for my major screw up.....

code:

---

div.two {float: left}

---

code:

---

<div class="two"><img src="2347atc.gif" alt="2347ATC logo" />
                <br />
                <br />
<div><ul>

LIST HERE

</ul></div></div>

---

http://www.google.com/search?sitesearch=www.w3schools.com&as_q=div

so - the <div> can be used to customise paragraphs and headinhs/= or links differently whiklst only coding it once

i think

quote:

---

Originally posted by DJKAL
so - the <div> can be used to customise paragraphs and headinhs/= or links differently whiklst only coding it once

i think

---

i have used the class attributes on the website i've just finished coding (but have just decided to change some of the codes to make it neater ... im gunna link back to a CSS style sheet }
but is that code in my other post correct for floating the image to the right of text - but keeping it in the center?