Webpage Building Guides for the Uninitiated? 64
smilingbandit2 asks: "For the past several months, I've wanted to dive into the world of webpage design. I'm not looking to creative anything cutting edge or even terribly useful, just hobby pages and weblogs that look professionally made. Unfortunately, my knowledge of website design consists of one basic HTML class I took in highschool, about 8 years ago. I feel comfortable enough coding in HTML, but it doesn't give me the results I want, and I know nothing about any other coding languages. Now, I'm not scared of learning new software or languages - in fact, I'm eager to expand my skillsets - but I don't know what to study. XML, Perl, AJAX - nothing but alphabet soup to me. I don't about anything beyond HTML. I'm completely uninitiated in advanced web design. Now, I turn to Slashdot for help. Where should I begin on the path to design enlightenment? What're the languages, programs, or whatever that are worth knowing? Are there good guidebooks, useful websites, or insightful forums? Are formal classes worth a damn? What do you frequently use on your websites? Any helpful advice, generally?"
Mmmm, XHTML is tasty (Score:5, Interesting)
As for programming languages, you'll probably be more comfortable with PHP than Perl. Again, I'd grab a getting started with PHP book and work your way in.
As for programs...I do everything by hand in Notepad. It makes for very sleek webpages, and there's no other way to get full control over your page's code.
Stick with it. I was in your shoes about 3 years ago, and now I do this for a living
Re:Mmmm, XHTML is tasty (Score:4, Insightful)
I concur with the XHTML and CSS. If you don't know these, you don't know the full extent of what you CAN do in the browser. While I don't think every site has to be in XHTML, it makes it much easier to transition over to working with XML docs if you already tag in an XML format.
PHP is a great language for coding the dynamic side. While there are lots of places that use ASP, I found that ASP is awkward and really isn't built well. So stick with PHP. Learn to write SQL queries too, and integration with MySQL won't be so tough.
While I promote hand-coding, look into getting a good IDE of some kind, like TextPad. That way you can validate your code and make sure you don't screw up every five minutes. XMLSpy Home Edition is also pretty good for such things.
CSS is great stuff, and while you'll be frustrated when browser X, Y, or Z doesn't support something, there are ways to make the page degrade gracefully. Start looking for CSS Hacks and you'll find plenty of workarounds. Always write for a good CSS-compliant browser and then fix for the broken (like IE).
Re:Mmmm, XHTML is tasty (Score:2)
Which is entirely different from ASP.NET... which makes PHP look awkward and not built well.
some tools (Score:4, Informative)
A big disadvantage of many hight-level tools is their inability to cope with PHP. (By the way, the parent is right to say that PHP is a much better beginner's choice, since it is not as cryptic in syntax.)
On the client's side, you might find javascript useful. With a HTML layout tool, PHP and javascript, you can probably do most pages.
Re:some tools (Score:1)
LOL, I think you mis-spelled "vim"....
Re:some tools (Score:3, Interesting)
No no no, no nono, nonono.
If you learn using a WYSIWYG editor you learn to use the editor - you don't learn to code websites. Learning to write code by hand is slightly more time-consuming while you're learning, but you're learning the skill you need to do the job, not learning how to instruct one of a selection of flaky, inconsistent, inefficient tools that, imperfectly, do the job f
Dreamweaver is excellent for coding (Score:1)
Re:Mmmm, XHTML is tasty (Score:3, Informative)
Having learned the things I'm about to list in a less-preferred order, I recommend learning in this order. Some may overlap a bit.
First, learn a lot more about HTML than you know. Learn how to create the correct structure in your sites, and try to avoid excessive tags such as tables and divs. Use page headers (h1, h2,...) and paragraph (p) tags and avoid line breaks (br) unless you're actually attempting to do a line break and not just creating space. Here's a good article to read: http://brainstormsandrav [brainstormsandraves.com]
Re:Mmmm, XHTML is tasty (Score:2)
Holy cow I don't even know where to begin with this... Sentence by sentence it is, then.
No, HTML and CSS are the major languages of the web. Unless it's sent with an XML mime type, all browsers treat XHTML as HTML--and that's the case for over 99% of XHTML pages on the web.
Except in a few very important ways, which will make your pages die a horrible dea
html (Score:1)
a few random ramblings on places to start (Score:2)
Re:a few random ramblings on places to start (Score:4, Interesting)
A good web developer knows how and when to do something on the client side or the server side, and can make the two play nice with each other.
What do you want? (Score:2, Informative)
If you don't need any fancy interactivity, just a more professional look, I'd suggest starting with css. It basically allows you to get much more control over layout, etc, than you can with just html. :)
Here's some css inspiration [csszengarden.com].
If you're looking for certain interaction models, maybe tell us more about what you want the site to do, and we can better recommend technologies.
web design or web programming? (Score:5, Informative)
Second, you talk about the alphabet soup of AJAX, XML, Perl, etc. This is web programming. It doesn't have anything to do with web design, it has everything to do with web content. I don't know about advanced web programming (I've done all mine in Perl, PHP, ASP, and ColdFusion, and those last two were five years ago). Others can chime in on that count.
Re:web design or web programming? (Score:3, Informative)
Document markup and design:
HTML: Used for document markup only!
CSS: Used to solve most display requirements
Content management / functionality:
Javascript: Client side DHTML (when you DONT want to refresh the page)
PHP: database interaction, web forms, etc.
The CSS links CanSpice points to are excellent resources. I think you should start there, regardless of wanting to learn a web programming language. Knowing CSS will benefit you
Re:web design or web programming? (Score:2)
HTML 4 is just as much of a "web standard" as XHTML. Both are open specifications published by the W3C, in fact XHTML 1.0 is defined in terms of HTML 4.01. Go read the spec, it's basically just a list of differences between HTML 4.01 and XHTML 1.0.
Re:web design or web programming? (Score:1)
Re:web design or web programming? (Score:3, Informative)
This is not true. HTML 4, being an SGML application, is parsed according to the rules set out in the international standard ISO 8879:1986. The HTML 4 specification lists this standard as a reference.
Who told you that? It's completely wrong. HTML 4 is based upon SGML, a meta markup language that's been around since 1980 (or earlier, depending on
Re:web design or web programming? (Score:2)
Backing up one more level -- what is a good resource, print or online, for giving the big picture of website management (design, servers and programming)? Something that explains the different pieces and how they fit together?
CSS first (Score:3, Informative)
Sitepoint (Score:1)
It really comes down to what you want to do (Score:3, Insightful)
But you will probably better suited with installing a CMS like Joomla! [joomla.com] which will give you functionality that a novice could never program. It may be overkill for a simple hobby page, but it will give you an excellent platform to build a successful, professional, feature-rich site.
In any case, bone up on HTML, PHP, and Javascript.
Oh, and get yourself a good text editor like UltraEdit to make those "quick fixes" a snap.
Re:It really comes down to what you want to do (Score:2)
So, um, as many people hate Mambo with a passion, this might not be the best thing to start with...
Maybe Drupal (http://drupal.org/ [drupal.org]) or one of the many others. You probably have to try to find one that suits your taste anyway (even if it ends up being Mamb^WJoomla).
They are all overkill whatever you do, but such is the nature of the beast.
Web guides (Score:5, Informative)
Re:Web guides (Score:2)
w3schools.com has nothing to do with the W3C, and from a quick glance at their tutorials, they get a number of things utterly wrong. I think it's pretty sleazy for them to take advantage of the W3C's name to get credibility they don't deserve, especially when they do it to foist a load of adverts and diploma offers on you.
Didn't you think that it was a bit odd to go to a "W3C" tutorial site and read all about c [w3schools.com]
Re:Web guides (Score:2)
Start with (Score:2)
And for a more serious answer, here's the tracks I would suggest, the further you go, the more complicated site you can create.
LAMP Method:
HTML
CSS
Javascript
PHP/MySQL
then you can start thinking about things like AJAX, XML etc.
Microsoft Method:
HTML
CSS
Javascript
then you can start thinking about things like AJAX, XML etc.
Re:Start with (Score:2)
Re:Start with (Score:1)
Re:Start with (Score:1)
Dreamweaver (Score:2)
LAMP (Score:1)
But, if you really wanna learn, you should buy a cheap box, and install some form of LAMP [wikipedia.org].
Random assortment of advice (Score:5, Informative)
You'll hear lots of people talking about how you should use XHTML. Ignore them. You'll hear lots of people talking about how you shouldn't use XHTML. Ignore them too.
There's little practical difference between the two languages. Browser support isn't quite there for XHTML, so the chances of there being any practical benefit to you using it are small. People will say that the added strictness will help you learn, but you aren't going to notice that strictness unless you serve it in a special way or validate, and you can validate HTML 4.01 just as you can with XHTML.
A much more important distinction to be made is the difference between Strict and Transitional. Transitional includes all kinds of old-fashioned crap that you shouldn't be using. You should use Strict.
After every edit to a document, run it through a validator. The W3C has free validators [w3.org] that you can use. If you do it this way, you will quickly notice when you are doing something wrong.
Ignore all the buzzwords like Ajax for now. Most buzzwords are things you can learn afterwards and use to enhance what you already know; you should learn the foundations first. You need to have a good working knowledge of HTML, CSS, URIs, and HTTP. Javascript, a server-side language and SQL will come in handy later; PHP is far from ideal, but it's easiest to get hosting with it. Same goes for MySQL.
Remember that the foundation for a website is its HTML. Everything else is an optional extra. Don't write Javascript that breaks things for non-Javascript users, write good alt attribute text so that people with images unavailable can read your pages, etc.
There's a hell of a lot to learn, but don't be intimidated, because most of it's simple, and most of it you can learn piece-by-piece.
Lurk on the relevant Usenet newsgroups: comp.infosystems.www.authoring.*, comp.lang.javascript, etc. Read their FAQs. Read the specifications for things like HTML, CSS, etc - they aren't that hard to read. Use Google before asking anybody anything. Ask smart questions [catb.org].
When debugging something, save it to a temporary test page, and reduce it to the smallest amount of code possible that reproduces the bug. Nine times out of ten, you will find the bug by doing this. The rest of the time, you have a testcase to show people on the newsgroups.
Learn to hate Microsoft in advance. It saves time. You will wish you could travel back in time to kill Internet Explorer's dev team before they release it. It's that bad.
Re:Random assortment of advice (Score:2)
The major thing to learn isn't even the technology --- the technology's easy, it's just a tool that you can pick up on when you need it. The really important thing you need to learn is the set of underlying principles that will let you design good pages. There's all the usual graphic design and HCI stuff that allow you to present information to the user clearly, but above al
Re:Random assortment of advice (Score:1)
Not too hard (Score:4, Interesting)
DO NOT hack up CSS unless you must. I've been developing websites, often professionally, for the last 10 years, and I have NOT ONCE needed to use a CSS hack because IE or some other browser is displaying something incorrectly. You can almost always fix these problems using standard XHTML + CSS without relying on hacks, and your code will be more robust as a result.
Browser tests in script are bad; check for functionality rather than a particular browser (quirksmode had a great article on this).
Remember that every new language/plugin that you use in a page shuts out certain groups. Use them where you must, but don't rely on fancy things such as flash for the core functionality of your website.
Use the right tool for the job, even if it's *gasp* a table or iframe. You'll be much faster than those trying to use some long and complex CSS to do something that you can do with a table, and the result will be indistinguishable (and will probably work on more browsers, since tables have been around for so long).
Project Tracking log (Score:1, Offtopic)
I am currently looking for a Project Tracking log tool. True I could write it myself, but I don't really have the time to do that right now.
I am not really looking for something to the likes of subversion, CVS or MS Project.
I want something similar to a blog, but where I can post entries under various categories. And mark them if they have been addressed or not.
When I code and test stuff, I disable and enable some code, add new functionality etc, or notice that I need to take out (e.g. print statements)
Re:Project Tracking log (Score:1)
You do know about freshmeat [freshmeat.net], don't you?
Of course, you could always just set up a WP blog.
(I'm just wondering if I've been trolled.)
Re:Project Tracking log (Score:2)
and no... I'm not aware of freshMeat..
I've looked around for solutions, I have NetOffice installed, but I'm looking for something much simpler. A lot of stuff out there can do a bunch of stuff and require me to click x amount of buttons to achieve a simple repetitive task..
basically.. I want an iPOD.. not a PDA
Re:Project Tracking log (Score:1)
iPods and PDAs do two different things...do you want to play music or schedule/email/store contacts?
Re:Project Tracking log (Score:1)
WebCollab works for me.
http://webcollab.sourceforge.net/ [sourceforge.net]
Re:Project Tracking log (Score:2)
XHTML+CSS (Score:2)
Ruby on rails (Score:2)
Animated GIFs.... (Score:2)
Add lots of animated GIFs to your page. The more the merrier. You simply CANNOT overdo it. And don't forget liberal use of the tag as well.
Re:Animated GIFs.... (Score:2)
Oh no, you got burned by Slashdot's removal of the vital HTML tag name! So now we all sit and wonder, was it the blink tag, or was it the marquee?
Re:Animated GIFs.... (Score:2)
CSS and PHP (Score:2, Informative)
I recommend using a good text editor (Textpad is the editor of choice at my workplace, for all sorts of coding, web and otherwise) to write your code. You'll learn a lot more (and end up with much better, cleaner code) being right down in the code instead
Lynda video tutorials (Score:1)
I found the XHTML tutorials sold by lynda.com [lynda.com] very helpful. Pausing the video on my PC, to test things out in an editor (I use vim), is an excellent learning method.
The XHTML course only covers CSS lightly, so I also recommend this video [lynda.com], which is very thorough. CSS makes it easy to change the entire look of your site in just a few lines of code. So it's a very powerful tool in combinations with either HTML or XHTML.
If you're comfortable in a Unix
If you want a book... (Score:2)
It covers the essential technologies without as much filler as the other for beginners books do. I especially like how it covers CSS and XHTML.
After you have figured out how the pieces fit together you can get more deeply into CSS with a CSS reference book or just go to w3c.org and find their CSS stuff.
CSS and some basic graphics knowledge will allow you to customize sites,
Oh wow, your isp AOL by any chance? (Score:2, Insightful)
I suppose I shouldn't comment on spelling and grammar, english might not be this guys first language, I am not to good at it myself and anyway this is slashdot where the editors are to busy raking in their fat profits to do anything but hit submit.
Anyway, on with your question. Search the web for absolute beginner guides to the web. You don't even seem to known the difference between presentation (HTML) data (XML) server side scripting (Perl) client side scripting (Javascript
Re:Oh wow, your isp AOL by any chance? (Score:2, Interesting)
I'm still a beginner in web design, but I have found that some people can design and some can't. Some people can write books on design, but can't do it worth crap, and vice versa, the same applies to teaching it. Some people go for what works (the KISS method); others work on making their components applicable to multiple projects (make a template and fill in content). I can make a website that does just about anything I want it to do, but I can't make
Re:Oh wow, your isp AOL by any chance? (Score:1)
Let me make my intentions more clear - I would like improve my web design skills, which are rudementary at best. What I wanted to know was where I should begin.
The advice I have received
what do you really need (Score:2)
really want...start small....I want an intro page that has a bit of flash,
maybe some art work etc...then build from there, then I want a link of that
intro page that goes to an about us page...etc....
You need to figure out a workflow...so that once you have finished
a small step in the overall development, you can move on to the next one.
What techs to use, any really, you know nothing now, but 1 year of development
on y
Client Side Templating via JavaScript (Score:2)
The html sent to the client is very simple and contains only as much html is necessary to reference CSS and JS libraries and initializations. All my data is nested in JS data structures - Arrays, HashMaps and JSON c
Focus on design (Score:1)