[PianoMan]

hi

i'm a recent IT graduate who never did any internet programming, and am now looking to learn this skill and create professional looking websites.

I realise that this is going to take a lot of hardwork on my behalf, but i'm prepared for it, and have experience of coding such a java, c++, VB from my degree.

Now my question is this, i want to create a website that looks as good as say, this frontpage www.macnn.com. what languages should i look at first to make this a possibility? XML or PHP & MySQL or XHTML or CSS?

You get the picture that i'm pretty lost. for example to power the back-end of the website, say a weblog, i'm totally unaware which language to use? I know the enteries would have to be achieved into a database (mySQL), therefore should I learn this and PHP or would XML do a better job?

If anyone could at least point me in the right direction as to where to go in terms of learning the best/right language or if i'll need them all, which to learn first. I'm totally determined to get this right and make it happen, so any help i would greatly appreciate it.

[Millennium]

You've got a couple of things confused, but let's get this stuff straightened out. The thing is, only the most trivial sites can be done in only one language. For most site work, you will need to know many different languages.

One quick note to start: XML is not a language. It is a metalanguage; that is, it's a way of defining languages. XHTML is a kind of XML which re-creates HTML in an XML way, and all browsers understand it to at least a limited degree. For now you can get by without knowing XML, though you might want to pick up XHTML.

Anyway, there are three main languages which browsers understand. I'll call them frontend languages. These languages are HTML, CSS, and JavaScript. HTML is used to deliver the structure of a page (paragraphs and such), CSS defines what things on the page look like, and JavaScript defines what things on the page do. Any good Web developer needs to be conversant in at least HTML and CSS; JavaScript is also important but you can get by without it to start.

My favorite beginner's tutorial for XHTML and CSS is at http://www.w3.org/MarkUp/Guide/; it's very basic, but it gets the job done, and it'll give you a good foundation to go out and learn more. Don't learn JavaScript until you're good with these.

I'll cover backend languages in my next post.

[registered_user]

xhtml is the mark-up for your data that a web browser reads and parses, css is the styling language that tells the xhtml how to look. (colors, spacing, position, etc, big emphasis on etc there.) So you'd need to learn xhtml to deliver your data, and that's the very minimum required for publishing data to the web. To actually design the page to make it look like more than boring text, you'll need to learn css.

side note: xhtml is a modernized form of html. html is obsolete. Sure, it still works, and it still will for years to come, but if you're learning from the ground up, I strongly recommend that you work with xhtml in favor of html.

php is a scripting language that does the automation. You don't need it to create a web page, but php or similar server-side scripting language (asp, jsp) will be required to automate a lot of tedium like maintaining a blog.

xml is great, but if you choose to go that route you'll practically have to use xslt to convert xml data to xhtml data so that browsers can understand what they're receiving. So to use xml you should already know xhtml and css. I'd put xml off for now. Besides, once you grasp xhtml, xml will be a cake-walk.

[Millennium]

Backend languages reside on the Web server. They generate code in a frontend language -usually HTML, but they can generate the others as well- and send it to the browser. Some programs in these languages can even generate images on the fly and send these to the browser.

Any language can be used on the backend, since the browser never actually sees the code. Java is very popular as a backend language, and you mentioned that you know it, so I suggest sticking with that. You may also want to pick up Java Server Pages (JSP), which can make your task a little easier; as the name would suggest it is closely related to Java.

PHP, which you also mentioned, is another popular backend language. I recommend sticking with what you know for your own work, but picking up PHP is also wise, because many useful PHP applications exist. You can learn much about Web development from reading their code. Its syntax is closely related to that of C and Java, so you should be able to pick it up without too much trouble.

There's one more thing, however, that most backend languages need: a way of storing data and retrieving it. Databases are very popular ways of doing this, though they aren't strictly necessary; you can use flat files on disk as well. I recommend using flat files until you get your feet under you; databases are great tools, but they add a layer of complexity which you don't need when you're just starting out.

Once you've got flat files mastered, then you can start thinking about databases. When you put data into a database, you need a way of getting it back out again. One of the most popular methods of this is to use a relational database which supports a language called SQL. Your backend language generates SQL and sends it to the database, not unlike the way it generates a frontend language and sends it to the browser. The difference is that with SQL, the database talks back to the frontend language, which can use the replies to gather data. However, there is much more to databases than the SQL language; there is a lot of theory which goes into properly designing them. Some universities even offer advanced degrees in this sort of thing.

XML is another approach which you can take. It has its advantages and disadvantages, as well as its proponents and opponents. You may decide not to use XML in your own work, but it is wise to learn it even if you don't use it yourself. Many useful XML-based tools exist, and just as with PHP, you can learn a lot if you understand how they work.

Does this all sound complex? I suppose it is. At the same time, a good Web developer will pick up many skills -particularly the ability to work with so many disaprate systems at once- which can be useful in other areas of computer science. It's worth knowing at least the basics.

[PianoMan]

thank you guys.

these replies are great and are exactly what i needed. as you can tell i was confused quite a bit, but the information you've presented me here have cleared things up.

I actually bought two books today, "HTML, XHTML, and CSS Bible 3rd Edition" & "PHP5 and MySQL Bible", which as it turns out by the sound of your posts are just what i need. I also have an "XML: 24 hours book".

I've read the first couple of chapters of the PHP/MySQL book and have just set up PHP5 on my iBook G4. But with your recommendations will switch my attention to the "HTML, XHTML & CSS Bible", which is also a good idea as the PHP/MySQL book recommends that you have a good grasp of HTML before going through the book.

Once I've grasped these concepts to a good standard, i'll turn back to "PHP & MySQL Bible". Then finally to XML if i need to (how does that sound?).

In the end I'll want to create a dynamic website that is well structured and holds such things as a weblog and my photo's and maybe my CV etc.

So I'm assuming the best way is to create the client end (front end) using XHTML and Style Sheets (CSS probably) and then write the back end that controls the processes involved (PHP5) and links to the database (MySQL).

Surely i have more of a grasp of it now, right?

[registered_user]

Sounds like you've got a good plan to get learning!

[Phil Sherry]

let's not forget the one thing you need to make a site stand out: a flair for design. you can be as geeky behind the scenes as you like, but it should really look good, too. unfortunately, you can't always learn that from a book. keep at it, though.

[PianoMan]

do you guys know of any applications you might recommend to me in order to get the job done and the learning easier?

At the moment i'll be just focusing on HTML/XHTML & CSS, so what should i look into getting? I have a G4 iBook with OSX 10.3.7.

thanks.

[registered_user]

I'm a big fan of skEdit. It's terrific for xhtml and css.

BBEdit's nice too. And their Text Wrangler is free. Though I've not used Text Wrangler, BBEdit is a slammin' text editor.

[wataru]

I like SubEthaEdit, which is free for educational or personal use. If you have to collaborate on code it's a great tool, although I use it even when not collaborating.

[Phil Sherry]

CSSEdit is pretty darn useful, as well as being free (and featured in my book). there's also Tag, which is a free XHTML editor (which was almost featured in my book, but not ready in time).

TextWrangler is possibly going to end up being my editor of choice at home. if you have money to burn, you could always try Dreamweaver MX 2004; that way, when you start using PHP/MySQL, you can stay in the same familiar environment that you learnt XHTML/CSS in.

[wataru]

Originally posted by Phil Sherry:
CSSEdit is pretty darn useful, as well as being free (and featured in my book).

It may be featured in your book, but it's not free. It's $25, and according to the site:

Demo is fully functional, but saving is limited to style sheets with less than 2499 characters.

Tag is $20, but I couldn't find any description of whether or not the demo is crippled.

[Phil Sherry]

Originally posted by wataru:
It may be featured in your book, but it's not free. It's $25, and according to the site:

Tag is $20, but I couldn't find any description of whether or not the demo is crippled.

my bad. i forgot they were shareware, because i got them for nowt. they're still worth using (which is the main point here)

[PianoMan]

Thanks for the suggestions guys, I'll check out the different programs later tonight. As for Dreamweaver, I think I'll wait a little until i have more of a grasp and understanding of where i'm going. It's a lot of money to folk out.

Phil, what is your book and what is it about? I might check it out.

Thanks.

EDIT: I just noticed your sig

[Phil Sherry]

Originally posted by PianoMan:
As for Dreamweaver, I think I'll wait a little until i have more of a grasp and understanding of where i'm going. It's a lot of money to folk out.

download the 30-day trial, if you're curious. the free/shareware apps are the best way to learn, though, as you have to learn how things work, rather than just click things in Dreamweaver and let it generate code for you. when you've been at it for a few years and you're lazy/short of time, Dreamweaver is where you may end up (like me at my day job)

[PianoMan]

Originally posted by Phil Sherry:
download the 30-day trial, if you're curious. the free/shareware apps are the best way to learn, though, as you have to learn how things work, rather than just click things in Dreamweaver and let it generate code for you. when you've been at it for a few years and you're lazy/short of time, Dreamweaver is where you may end up (like me at my day job)

thanks man, sounds like good advice.

[Chris O'Brien]

Originally posted by Phil Sherry:
Dreamweaver is where you may end up (like me at my day job)

Slacker

I'm trying to remember how I started out with things... Viewing the source of websites and seeing which bits fit where on the page, I think. And then, Front Page came out and i spent all of half an hour on it before vowing to never use it again.

It's a harder start, but doing everything by hand is the way to go. Especially if you use something like SubEthaEdit (my editor of choice until TextWrangler recently became free) which has live previews. That's very helpful.

[Phil Sherry]

Originally posted by Black Book:
Slacker

SHAP u!

i started out using Notepad.exe (i was a pc user for years! booooooo!), viewing source, etc, just like you said up there. it's the nut'n'bolts that you need to know first. if you don't get a handle on that, you're going to have a hard time when it comes to bug fixes in your code, etc.

[Peder Rice]

The first tag that I learned was <p>, and I didn't know at the time that I need a closing, </p> tag. Aaah... good times.

Nowadays, I'm designing PHP 5 objects and building advanced PHP/Javascript programs (those are the worst, by the way, since you end up writing much of the same code twice).

[bluedog]

Here's a link to some wonderful articles about CSS, formatting HTML and doing it correctly from the start:

http://www.wpdfd.com/editorial/articles.htm

[genevish]

I'll throw in my 2 cents on the free text editors:

http://jedit.sourceforge.net/

-Scott

[PianoMan]

hi guys.

i'm working really hard on (x)html and css at the moment. i'm pretty confident with xhtml-it's easier than i thought, but the book i have doesn't go to advanced into css. could you recommend any really good css books that explain everything including advanced techniques to make things look professional.

thanks.

[Phil Sherry]

search amazon for the following: Meyer on CSS, More Meyer on CSS, CSS Zen Garden (is this out yet?), and Zeldman's book will really help you out. oh, and buy mine anyway

[Simon Mundy]

Originally posted by Phil Sherry:
search amazon for the following: Meyer on CSS, More Meyer on CSS, CSS Zen Garden (is this out yet?), and Zeldman's book will really help you out. oh, and buy mine anyway

Shameless. Absolutely shameless.

[Phil Sherry]

Originally posted by Simon Mundy:
Shameless. Absolutely shameless.

that's me

[PianoMan]

Originally posted by Phil Sherry:
search amazon for the following: Meyer on CSS, More Meyer on CSS, CSS Zen Garden (is this out yet?), and Zeldman's book will really help you out. oh, and buy mine anyway

i actually ordered both of the meyer books from amazon last night. I'm also learning a hell of a lot from csszengarden.com, just by looking through the css code and code from all the different examples there. I've even made my own header and put together a little page on my local drives and it looks really nice. although it is very much based on one of the designs there. but it'll change as i learn.

thanks.

[Zim]

For backend scripting don't forget Perl. Every time I spend a little time in php for any heavy-lifting scripts, I go running back to Perl. I only use php in ways similar to javsscript (ie. interpreted in-line code in html pages).

Mike

[Millennium]

Originally posted by PianoMan:
i actually ordered both of the meyer books from amazon last night. I'm also learning a hell of a lot from csszengarden.com, just by looking through the css code and code from all the different examples there. I've even made my own header and put together a little page on my local drives and it looks really nice. although it is very much based on one of the designs there. but it'll change as i learn.

thanks.

The CSS Zen Garden is a great learning resource, since the HTML never changes so there's only one variable: the CSS itself. It's surprising what some of the people have been able to do with it. This is one of my favorites; watch the diver as you scroll down the page (scroll wheel recommended).

[Arkham_c]

Originally posted by Zim:
For backend scripting don't forget Perl. Every time I spend a little time in php for any heavy-lifting scripts, I go running back to Perl. I only use php in ways similar to javsscript (ie. interpreted in-line code in html pages).

Ugh. Please don't learn Perl if you don't know it. It just makes a mess for the rest of us to have to come clean up later

I've spent YEARS converting old corporate applications from Perl CGI to Java servlets to increase performance and maintainability. If you really like Perl, use PHP. The syntax is similar and it's better suited to web applications.

I personally prefer java for web development (Velocity + servlets is my favorite), but as you'll discover, most commercial hosting sites support PHP but not java.

[Zim]

Originally posted by Arkham_c:
Ugh. Please don't learn Perl if you don't know it. It just makes a mess for the rest of us to have to come clean up later

I've spent YEARS converting old corporate applications from Perl CGI to Java servlets to increase performance and maintainability. If you really like Perl, use PHP. The syntax is similar and it's better suited to web applications.

I personally prefer java for web development (Velocity + servlets is my favorite), but as you'll discover, most commercial hosting sites support PHP but not java.

I fail to see how well-written Perl is any harder to maintain than well-written PHP?

Also I have yet to sit down to an out-of-box *nix install (or web host) that has a command-line verion of PHP installed.... in that regard Perl is much more functional for development/debug (keeping in mind that in many situations, root privs for install are not an option). I'm well aware that the command line version exists, but as I say, it doesn't seem to be widely installed by default.

Mike

[Arkham_c]

Originally posted by Zim:
I fail to see how well-written Perl is any harder to maintain than well-written PHP?

I don't want to get into Perl bashing. It is a very powerful, useful language and has its place (for example, command line scripts, especially those requiring regular expressions, are perfect applications for Perl).

The problem with Perl is the language itself encourages inconsistency and sloppiness. The whole "There's more than one way to do it" philosophy pervades Perl code that I've seen over the years. There are no consistent naming conventions, there are weird rules about variable scope, and there are obscure things like $$__ that are wholly unnecessary and serve only to confuse the future maintainer of the code.

When you look at some java or python that you've never seen before, you don't generally have these issues because the languages were designed from the start to promote readable, maintainable code. That was never a design goal for Perl.

[Phil Sherry]

Originally posted by Arkham_c:
When you look at some java or python that you've never seen before, you don't generally have these issues because the languages were designed from the start to promote readable, maintainable code. That was never a design goal for Perl.

agreed, python is readable to a novice.

speaking of novices, the original poster wanted to know about things like XHTML, CSS, and how to make web pages. while i also agree with how powerful Perl is, i hardly think it's worth derailing a thread for (in this instance).

[york28]

Piano Man:

Bravo on the choice of PHP and MySQL. One suggestion that I have for you is to download some PHP scripts and go through the source to see how they work. I find this immensly helpful when learning a new language. Something like Textpattern or WordPress or something that you might even end up using while you learn your way around.

There could be licensing issues if you directly copy anything you see, but I've always just used it as a way to see how other people were doing things.

Good luck with the project.

[PianoMan]

thanks for the advice man. i'll be picking up my php sql books once i'm pretty confident with CSS and maybe even planned my design.

I'm currently going through the exercises in the Eric Meyer books and while i'm picking things up from this and my CSS bible, i'm still confused over a few things. little things such as when to use <span> or <div> or make the elements block-elements using display: block;

I'd sort of came to the assumption that <div> should be used to style a large block of text or elements and <span> only to apply styles to a certain line of text. Although I may be wrong.

Other than that I've got my head around the differences of id and class. for instance i should use id on unique elements that will appear only once and class on elements that can be used over again.

[PianoMan]

Hi guys.

just to let you know that things are going well with CSS and i'm mastering how to present my website tests with it.

I do have a question however. I want to create a backgound using the cheat method where you can have an equal length main section and sidebar. Now i know how to do this in the sense that i create an image about 760px wide for example and only 2px in height then just repeat-y.

the problem i'm having however is that i'm looking to create a background that incorporates shadows, like i've noticed on many sites, adiumx.com being an example.

this is a direct link to their main background image: http://adiumx.com/images/bordercentral.png

notice the shadow effect on the left and right of the background. I'm wondering how this is achievable? Could any of you guys possibly give me some tips in this area and or point me in the right direction, regarding maybe some online tutorials showing how to do this?

I have photoshop cs and am in the process of learning it, but my book doesn't give an indication on how to achieve this.

thanks again.

[PianoMan]

oops delete.

[PianoMan]

Originally posted by Millennium:
Backend languages reside on the Web server. They generate code in a frontend language -usually HTML, but they can generate the others as well- and send it to the browser. Some programs in these languages can even generate images on the fly and send these to the browser.

Any language can be used on the backend, since the browser never actually sees the code. Java is very popular as a backend language, and you mentioned that you know it, so I suggest sticking with that. You may also want to pick up Java Server Pages (JSP), which can make your task a little easier; as the name would suggest it is closely related to Java.

PHP, which you also mentioned, is another popular backend language. I recommend sticking with what you know for your own work, but picking up PHP is also wise, because many useful PHP applications exist. You can learn much about Web development from reading their code. Its syntax is closely related to that of C and Java, so you should be able to pick it up without too much trouble.

There's one more thing, however, that most backend languages need: a way of storing data and retrieving it. Databases are very popular ways of doing this, though they aren't strictly necessary; you can use flat files on disk as well. I recommend using flat files until you get your feet under you; databases are great tools, but they add a layer of complexity which you don't need when you're just starting out.

Once you've got flat files mastered, then you can start thinking about databases. When you put data into a database, you need a way of getting it back out again. One of the most popular methods of this is to use a relational database which supports a language called SQL. Your backend language generates SQL and sends it to the database, not unlike the way it generates a frontend language and sends it to the browser. The difference is that with SQL, the database talks back to the frontend language, which can use the replies to gather data. However, there is much more to databases than the SQL language; there is a lot of theory which goes into properly designing them. Some universities even offer advanced degrees in this sort of thing.

XML is another approach which you can take. It has its advantages and disadvantages, as well as its proponents and opponents. You may decide not to use XML in your own work, but it is wise to learn it even if you don't use it yourself. Many useful XML-based tools exist, and just as with PHP, you can learn a lot if you understand how they work.

Does this all sound complex? I suppose it is. At the same time, a good Web developer will pick up many skills -particularly the ability to work with so many disaprate systems at once- which can be useful in other areas of computer science. It's worth knowing at least the basics.

Oh by the way Millennium, your advice has turned out to be first class. Now that I'm mastering XHTML and CSS, and going through all the books I bought on the subject and constantly reading other sites source code, I'm gaining a great understanding of the way websites are put together.

I'm glad I started with CSS and XHTML at your advice as it gives me a chance to actually create something visual which in turn gives me an incentive to get into the real nitty-gritty stuff of the backend of the website. I might enjoy it more if I have a goal to aim for which a completed front end gives you.

Thank you.

[genevish]

Originally posted by PianoMan:
Hi guys.

just to let you know that things are going well with CSS and i'm mastering how to present my website tests with it.

I do have a question however. I want to create a backgound using the cheat method where you can have an equal length main section and sidebar. Now i know how to do this in the sense that i create an image about 760px wide for example and only 2px in height then just repeat-y.

the problem i'm having however is that i'm looking to create a background that incorporates shadows, like i've noticed on many sites, adiumx.com being an example.

this is a direct link to their main background image: http://adiumx.com/images/bordercentral.png

notice the shadow effect on the left and right of the background. I'm wondering how this is achievable? Could any of you guys possibly give me some tips in this area and or point me in the right direction, regarding maybe some online tutorials showing how to do this?

I have photoshop cs and am in the process of learning it, but my book doesn't give an indication on how to achieve this.

thanks again.

Well, as you see in the image you linked to, you just create the shadow as part of the repeating image. I have Photoshop CS at home, but I'm at work now. I know Fireworks has an option to add a shadow on any selected object, but Photoshop doesn't use vector artwork the same way, so I don't remember how to do it offhand... I'll post when I get home if no one beats me to it.

[PianoMan]

Originally posted by genevish:
Well, as you see in the image you linked to, you just create the shadow as part of the repeating image. I have Photoshop CS at home, but I'm at work now. I know Fireworks has an option to add a shadow on any selected object, but Photoshop doesn't use vector artwork the same way, so I don't remember how to do it offhand... I'll post when I get home if no one beats me to it.

thanks man.

i was just a bit confused, as i know of the drop shadow and inner shadow options, but when you look at the graphic i posted, it has shadows on either side and you even sometimes see them on the line of a seperate coloured sidebar, in between the two outer shadows.

Its sort of like each shadow is independent of the other, and i've no idea how to achieve that.

[Chuckit]

You can create a two-equal-shadows effect in Photoshop just by making the shadow's distance 0. This way the shadow will be cast in both directions equally.

Also, you can create a shadow effect yourself (i.e. the Hard Way) with gradients and/or feathered selections. I've done this before when I wanted perspective shadows that look like they're on a surface. Hopefully that helps. It shouldn't be too hard to figure out once you get how gradients and selection filling work.

[Balneum]

I use Dreamveawer MX 2004 with dual view. I can drop-down a table and check the code at the same time. Since I know the language I don�t have to do all the things manually. Old School-style is just too slow for me. At the end it�s the same code on the screen. Dreamveawer is too expensive for your first editor and for the start you should learn the basics. For professional use it�s in my opinion just great...

[OptimusG4]

Another book I recommend:
Web Standard Solutions

For a hefty program like Dreamweaver without the bloat and price, I recommend skEdit. $20 isn't bad, and there's a 25 day demo to try also.

[PianoMan]

i actually bought that book on recommendation of another poster here. it's one of the best purchases i've made regarding web development.