Log in

View Full Version : Website Coding



SoKz
04-28-2008, 12:33 AM
Hello
I was told to come here to find help with coding...
i was wondering what do i need to learn to code a layout i made with photoshop. And is there any programs that will help

boogyman
04-28-2008, 12:40 AM
first you need to learn basic html
start by viewing http://www.howtocreate.co.uk/tutorials/html/basics

SoKz
04-28-2008, 12:59 AM
alright what now?

SoKz
04-28-2008, 01:39 AM
alright, i just got done learning about the basics
is that all i need to learn the basics?
what do i need to do next
<html>
<head>
<tilttle>
<body>
<p>

Medyman
04-28-2008, 02:05 AM
alright, i just got done learning about the basics
is that all i need to learn the basics?

That was fast...lol. I doubt you have all the basics down. But I always learn from trial and error, so here goes.

The first step, as Nile kindly pointed out, is to learn basic (X)HTML syntax and write the basic structure of the page. This will be bear-bones, no styling yet or layout yet.

Next, you should lay the page out as you need. This is done through CSS. You can Google your heart out and learn all you want/need to know about it.

Here are some CSS layouts that might get you started: http://www.dynamicdrive.com/style/layouts/


Then, apply your styling -- colors, fonts, background images, etc... Again, with CSS.

Finally, validate (http://validator.w3.org/) your markup.

hyk
04-28-2008, 04:52 AM
lol, are you sure judging by your time of your posts, you eh master the basics in 1hr, i learnt at http://www.w3schools.com/html( took a week or few days to understand the basics) . seems kinda of slow. lol, you could ask medyman how slow i was just learning flash slow :o

oh btw, i google abit on html, found this site on html cheatsheet

http://www.webmonkey.com/webmonkey/reference/html_cheatsheet/

Another looks like having all sort of stuffs on html

[URL="http://www.webmonkey.com/webmonkey/reference/html_cheatsheet/"]http://www.echoecho.com/html.htm

hope its helps ;)

djr33
04-28-2008, 05:35 AM
You're asking an incredibly broad question. Much like a real language you can't just say "oh, how do I learn Chinese"... you just start from the beginning, looking at various sites (and their source), with help from tutorials. Photoshop itself can export some limited html (through imageready in the versions before CS3), but you'll probably want to use other techniques as well. You do not need a program, just anything that can save a text document (html) like notepad, and start writing code.

hyk
04-28-2008, 06:38 AM
I had to agree with djr33 in some of the stuffs he say. Was given a lecture by him once :D

you can start by by saying what kind of things you wan to have in the html other than the stuff from photoshop. If you using notepad, be sure to save the text file as xxx.html or xxx.htm , the type of file to save as, you put it as all files.

Mayb* you can consider using an html editor, since notepad will not tell you where is your errors (so you might have a hard time looking for it if you have alot of stuff in )

Hope I help you in some ways :)

boogyman
04-28-2008, 12:45 PM
The first step, as Nile kindly pointed out, is to learn basic (X)HTML syntax and write the basic structure of the page. This will be bear-bones, no styling yet or layout yet.
XHTML would be a bad idea... its still not supported by IE

SoKz
04-28-2008, 01:16 PM
haha well i kinda cheated and watched some videos
but so what i need to do it look into it more?

And when i learn HTML and CSS i will be able to code my whole page?
like have drop down menus,click a button and it takes you to another page, scroll menus.
i was really hoping to learn some other stuff but i will ask those questions when i get this down

hyk
04-28-2008, 01:33 PM
for your qns, its a yes & no. Depending what kind of stuff you are doing
If you are talking about those, its should works properly (if its doesn`t it could be the syntax)

For example hyperlinks <a href="http://www.yahoo.com"> (write the text to cover the hyperlink</a>


drop down menus,click a button and it takes you to another page, scroll menus.

I should be correct :)

ps: may medyman or boggyman etc correct mi if i`m wrong. Thanks:D

boogyman
04-28-2008, 03:31 PM
yes that is the correct syntax for a hyperlink. but if he wants a dropdown menu its alot more complicated... Since he is just learning HTML, i would suggest using a canned template, where all he needs to do is follow a format, rather than create the whole syntax himself.

SoKz, if you jump out of these forums and into the main portion of DynamicDrive you will see all sorts of types of tutorials / scripts you can use to create a dropdown, and a lot of other types of web display modules

please feel free to ask questions if you have any... but also remember to search the forums (in the upper right corner) first to see if your question has already been asked / answered.

SoKz
04-28-2008, 10:08 PM
well back to the matter of HTML,
so how long should i practice it before i move on to the next step what ever that is..

djr33
04-28-2008, 10:57 PM
I've been using html for.... um... 8 years? Just work with it and learn what you can. I'd suggest definitely UNDERSTANDING the IDEAS of html before moving on to the next language, but you don't really need to memorize everything at first. HTML is the base for anything on the web, so javascript, css, php, flash, and everything else all relate to html and require html to actually do anything, whether or not you know those languages. So, know how to use html and work with it, but then start learning the others as well. You'll certainly never finish learning html.

SoKz
04-28-2008, 11:42 PM
well i kinda dont understand..
what im i suppose to be doin now?/?
practice with HTML and just keep practicing lol or what

djr33
04-28-2008, 11:50 PM
Right. Keep practicing. It's a skill, not something you can just learn and finish. You'll get better over time. Have patience and wait a bit. You just started in the last couple days, right? So give it a while and then start on the next step. There's no NEED to wait, but if you jump ahead right now it'll just be slower to learn the next step if html is still confusing. Once you don't feel confused, go ahead and move on.

SoKz
04-29-2008, 12:09 AM
alright well i got another question lol it may sound dumb but hey i am new...
alright well here is the code. i was just trying to test something out and post a picture of the site on the page but it wont work...why?

<html>
<head>
<title> Page Layouts </title>
</head>

<Body>


Welcome <hr> <img src=Site Layout 2.png/>


</body>
</html>

Medyman
04-29-2008, 12:11 AM
<img src="Site Layout 2.png">

Note the quotes.

SoKz
04-29-2008, 12:19 AM
alright i will check that out, and man this really isnt that hard lol (untill you get to where you guys are lol)

Medyman
04-29-2008, 02:42 AM
alright i will check that out, and man this really isnt that hard lol (untill you get to where you guys are lol)

It's not a matter of it being hard. It's a matter of throughly understanding the principals, techniques and standards behind proper web design. A lot of people throw this together (a page with an image and a caption on it):


<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<img src="image.jpg">
<p>A caption</p>
</body>
</html>

and think that they understand how to create websites. Of course the very basics are easy, but the tools you need to create effective, accessible and beautiful websites are down the line. Once you become proficient in the basics can you only be effective with the rest.

Otherwise, the results are the tons of websites on the Net with scripts and snippets of code from here and there that just create a mess.

SoKz
04-29-2008, 04:38 AM
umm i have a question...i was practicing on coding in notepad and i saved but now everytime i try to open it, it takes me to the layout...is there anyway i can open it and edit again.....i was thinking right click then go to view source then copying that, im i right?

hyk
04-29-2008, 04:59 AM
i was practicing on coding in notepad and i saved but now everytime i try to open it, it takes me to the layout...

Do you mean when you click it, its will go into internet explorer( displaying the buttons )etc?


i was thinking right click then go to view source

you are right on that, after editing, you save it or overwrite at the filename which you gave for the earlier version :) ( i should be right on this part):p

Regarding the editing part , perhaps you should backup your old copy 1st in case you make alot of changes to the html & unsure where the error

SoKz
04-29-2008, 05:17 AM
haha i finally got something right, do you guys know any sites that were made by only HTML and CSS because i want to take a look at what i can make when i learn this

hyk
04-29-2008, 06:16 AM
Eh, I not too sure if i guided you in the right direction. :D

here the link http://www.w3schools.com/Css/demo_default.htm

Anyway, html is just plain old text, css will make the website look nicer , more presentable & ( guys can help me add in stuffs? I out of explainations)

On the right hand side, the text you should have seen it before & look familer to you. if you click on the left side is the stored css.

here the tutorial on css
http://www.w3schools.com/Css/css_intro.asp
http://www.echoecho.com/css.htm

Boggyman, medyman etc might have even better tutorials to offer, I just google & took the 1st tutorials i saw, hope you don`t mind. Sorrie

If you using css in your webpage, you might wan to use some of these in DD css library , they might come in handy& looks nice too
http://www.dynamicdrive.com/style/


ps: As usual, if i`m wrong can you guys out there correct me , Thanks :)

Medyman
04-29-2008, 12:02 PM
haha i finally got something right, do you guys know any sites that were made by only HTML and CSS because i want to take a look at what i can make when i learn this

Most websites that you'll find on the net are written with mostly HTML/CSS. There might be a bit of javascript here and there. But for the most part, everything is HTML/CSS.

The biggest exception would be full flash sites.

boogyman
04-29-2008, 01:15 PM
http://www.howtocreate.co.uk

and a note about images... try to avoid spaces in file names. spaces are not a valid (acceptable) character in url terms... instead they are usually converted (by the server) to %20 which from the link below I am sure you can understand how pain/frustration they can cause.

domain.com/Folder%201/Sub%20Folder2/Image%20230498%duck%20this.png

it is also good to note that using PNG images is not a good idea because they are such high quality and resolution that it can take up to 10x longer to download than is necessary. So try to optimize (convert) all images that you use on the web to a more friendly format, like jpeg or gif.

and ask djr said, practice is really the best way to learn. the good thing about practice is that there are discussion forums like this one that will offer free (WOW SUCH A NOVEL CONCEPT) help and consultation... typically we try to explain the method behind the concept, rather then just do it for you, because well... if you dont understand the concept you cannot learn to do it yourself

SoKz
05-07-2008, 02:30 AM
well fellas iam back and ready to try coding again
i was creating some layouts, i still hardly understand it so if you could give me a site/tutorial that would be such a huge help:)

hyk
05-07-2008, 06:52 AM
Hi, welcome back.


i was creating some layouts, i still hardly understand it so if you could give me a site/tutorial that would be such a huge help

Eh, its very broad topic SoKz. could you let us know what kind/designs of layouts you would to have. :D