Slashdot Mirror
Webpage Building Guides for the Uninitiated?
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?"
Good news, friend. XHTML, CSS, and PHP are the three major languages of the web today, and you already know one. XHTML is very, very similar to HTML. One change, for example, is the/>. The reason is that all tags must have a closing tag, like <a> </a> does. Lots of other stuff is mostly the same. The one big change you'll need to make is that all style tags have been dropped from XHTML. No more <b>! You use CSS now. Grab a book on moving from HTML to XHTML. There are lots out there! :)
tag being replaced with
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
ACs are modded -6. I don't read you, I don't mod you, I don't see you. Don't like it? Don't be a coward.
There are a few nice tutorials and ebooks here Get well aquainted with HTML and if you just want a nice blog, try wordpress. It's very easy.
Beer! It's what's for breakfast!
AJAX is a variety of fancy JavaScript tricks. Chances are you don't need it yet.
Finally, make sure you're formatting nicely with CSS stylesheets instead of stuffing stuff in FONT tags and bgcolor="" attributes.
The World Wide Web is dying. Soon, we shall have only the Internet.
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.
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.
Powered by Web3.5 RC 2
You really sound like you're talking about two different things. First off, you say you want to learn better and more advanced web design. If this is the case, then you should check out the CSS Zen Garden for inspiration. Use that as a basis for learning about advanced CSS (Cascading Style Sheets) techniques, page layout, colour integration, and so on. They have links there for places you can steal from. Eric Meyer also has excellent ideas. A List Apart has excellent columns and tutorials.
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.
Based on your situation, study CSS first. Once you have HTML and CSS together, you can move onto javascript (a client-side programming language), or PHP (or ASP) a server-side language depending on what your needs are.
I'm completely uninitiated in advanced web design. Now, I turn to Slashdot for help.
Trust me, you don't wanna be looking under the hood of slashdot for tips on advanced web design. : p
http://www.sitepoint.com/ is a great site for articles, blogs, books and forums. The forums are the best part. The community is great and really helpful. Definitly a worth a look.
For hobby pages, something like NVU or Word will give you simple pages with surprising power.
But you will probably better suited with installing a CMS like Joomla! 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.
My mom always said, "Jim, you're 1 in a million." Given the current population, there are 7000 of me. God help us all!
I was in your shoes, too --- just a smattering of HTML. I needed to create pages for my students and local sailing association, so I availed myself of Web Schools from W3C, which is pretty straight from the horses mouth, but no tricks or advanced techniques, and then studying layout like CSS Zen Garden and Boxes Tutorials. I tried to go XHTML 1.0 Strict, and validated my pages with the W3C validator, which gave useful feedback. (Don't look at my "home" page indicated by my ID --- it's just a stub). You're welcome to look at my amateurish example at my school home page. Good luck.
GRAMMAR. It's pretty standardized right now. Most non-technical people can handle it. It's even been around for a while. Once you can master GRAMMAR, you can move on to HTML.
.NET/SQL Server
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.
Do not meddle in the affairs of sysadmins, for they are subtle, and quick to anger.
A true (X)HTML freak will probably use a sophisticated text editor (like EditPad for Windows, nedit, bluefish or even emacs for Linux...), but for beginners a tools like Dreamweaver or Mozilla Composer or its next version nvu might be a good place to start. With NVU / Mozilla Composer, if you need something special in your source, you can switch to source-edit-mode and change or insert it.
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.
For learning about the different languages you'd need to learn, I've always found the "For Dummies" and "Sam's Teach Yourself in 21 Days" lines of books to be great to get yourself started with the basics.
Free MacMini
I found CGI Programming with Perl really useful when I was learning, it goes over URL encoding and the acutal HTTP request/response. But after learning some perl, I prefer PHP. The syntax is clearer and the online manual is great...infact if you have any real programming experience (not html), you could just read the PHP manual and pick it up.
But, if you really wanna learn, you should buy a cheap box, and install some form of LAMP.
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 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.
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.
Bogtha Bogtha Bogtha
XHTML, CSS, and one server-side language (I like Perl, but use whatever you want) are really all that you need. You might benefit from some Javascript knowledge, but lack thereof won't kill you.
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).
Hi,
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) or add new stuff. I would like to just enter that stuff into a form easily and maybe query entries in those categories at a later date.. or view entries that were entered on a specific day through a calendar...
any suggestions..
Pick up a book on CSS and make sure to frequent sites and IRC channels on the topic (google will probably reveal these to you, freenode is a good irc network), including portability best-practices. You should be set as far as aesthetic "design" goes. XHTML is a more strict form of HTML that conforms to XML syntax. You don't have to worry about why this is right now, it's not relevant, just make sure that you are conforming to XHTML as much as possible (and document stuff religiously when you can't conform to the standard or best practice). It will make life down the road much easier.
As far as implementing back-ends for dynamic web-sites, that is venturing into programming proper. There are any number of starting points for programming in general. Python and Java are two good places to start. Once you have general programming concepts under your belt you can pretty much pick up anything.
And no, formal classes aren't worth a damn.
It's 10 PM. Do you know if you're un-American?
Ruby on rails would be a good framework to do rapid site development. Built in AJAX capabilities and MVC pattern.
95% of all sigs are made up.
Style tip #413:
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.
I'll just throw in my $0.02 with a lot of other posters and say that (X)HTML, CSS, and PHP is all you really need to know to do some really nice hobby-level pages (and even some pages you get paid to build - throw in some MySQL and you're really rolling).
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 of relying on some layout program that auto-generates code.
Just be prepared for an unbelievable amount of frustration when you start trying to do anything with CSS - every browser's implementation of CSS is broken (in different and incompatible ways), so even the simplest design you dream up will require a lot of hair pulling to actually implement so that it looks right in, say, IE and Firefox. That's far and away the worst, most frustrating part of building websites with CSS. If browsers implemented the specification consistently and correctly, CSS would be outstanding, but they don't, so it'll leave you a broken shell of a man.
JRjr
I was in the exact same situation as you, smilingbandit2.
I found the XHTML tutorials sold by 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, 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 environment, You might want to get an account at freeshell.org. It only costs a buck (to validate yourself) and the basic user account comes with 20Megs of space. Which you can keep for life, I believe.
I work in a bookstore. There is only one beginners book I recommend to people -- Master VISUALLY Creating Web Pages by Joe Kraynak
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, blogs, forums, to your hearts content. enjoy!
What comes first, finding a teacher or becoming a student?
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) etc.
I am not suprised then that your current efforts don't give you the result you want. I think even google would find it a challenge to make a weblog with nothing but HTML.
You don't "code" in HTML, you design. If the distinction isn't obvious to you, give up now. Perhaps I have just been exposed to too many highly intelligent people hired during the internet boom and who I had to teach how to code. My boss at the time didn't seem to be able to grasp that just because somebody scores highly in logic tests does not mean they can code. I remember one guy I knew for a fact was much more intelligent then me who just couldn't get his head around the way a PHP website deals with variables being passed. If you don't know, if you put something like this in php
you will not have made a programming error, it will not give an error and will display 1 on your page. Expecting it to however ever go higher on reloads means you have not grasped the fundamental nature of the web.
In short the guy could just not grasp the stateless nature of the web. Amazing but I seen examples like this to often to believe that everyone has it in them to program (++$count vs $count++ anyone?. Nothing odd really, everyone knows some people can do art and others can't. Why should the other half of the brain not exclude certain people. (Ever tried explaining that "0 is false". No not "and 1 is true". Nothing is true except that wich isn't false.)
Then there is another count against you. You ask on slashdot without seemingly having done any research beyond noticing some buzzwords. Good coders do not ask, they find things for themselves. Good or even mediocre programming skill comes from having that drive to figure things out, to question, to search, to test.
It not like it has hard to google for beginner guides. But you are to lazy or to dumb to do that. I see lazy wannabe coders all the time, just make the mistake of hanging around in game modding forums. Guys who want to create the next counterstrike while they shouldn't be allowed within a mile of an ini file. As for dumb, recent post suggested the following. (like it anyway)
To modify fame set it to 15.
Question: so it becomes like $actor=15
Answer: DO NOT EVER CHANGE YOUR JOB TO PROGRAMMER
Some people can code, some people can't. Yes I am bitter from having to train a lot of them (the ones who could didn't need to be trained, just given a good book, a practice enviroment and a month or two with maybe the odd session on monday to introduce some advanced subjects and hard earned practical knowledge) during the boom. Maybe I was just a bad teacher, I seen others fail as well, but some people just should not try it.
You sound like one of those people. I really don't want to be mean or anything but look at your post. You confuse HTML with a coding language wich it isn't. Perhaps the L of the acronym confuses you, it does a lot of people, but then a bit of basic googling should have set you straight.
You claim to know HTML but are unable to make proffesional looking sites with it. NEWSFLASH, HTML is what all the pros use. One sign of a person who cannot code is the believe there is a magic tool/language out there that everyone is hiding from them that will instantly turn them leet. There is one but it there is already a job shortage so we are
MMO Quests are like orgasms:
You may solo them, I prefer them in a group.
It all depends, but I would say that first you need to think of what it is you
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 your own asking questions searching on google etc...will make you a small time
pro real fast.
www.experts-exchange is one of the best places for novices to begin, if they get
stuck...then there is google if you are really good with their search
capability (hint.... " html form posting site:www.experts-exchange.com" in google will yield alot of results...)
Last but not least, actually should have been first, is do not panic!
Do you need it now...check sourceforge to see if they already have it....are you
under pressure, need this tomorrow...then check out www.rentacoder.com
if you want to learn on your own through making lots of mistakes and enjoying
yourself when you realize you just figured something out....then go to
www.w3school.com...for html,css,javascript etc...
I would suggest also cheating alot by using the view source code of your
favorite websites you want to duplicate, helps learn real quick how others
have done it!
Cheers....happy developing!
L.A.
You've touched upon two very different topics: design and programming. Making a website look professional requires a whole different skillset than writing the backend.
If you want to design websites, take a class on graphic design and be sure to read the Yale Site Style Guide. Also be sure to work on those Photoshop and Fireworks skills.
As far as all the backend stuff goes, get some good books on PHP and MySQL, which will quickly get you going.
""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. "
Kind of addressed by someone else. Design and programming are two different things. Books like "Don't make me think" and other "web pages do's and don't" books will be useful. You might even get a few "look at these web pages that some artists did" books for inspiration.
I've been hacking a web app for several years now and have been pushing farther and farther away from using a templating engine on the server side. Since I am hacking mostly in Java Server side, I focus on a simple template model using servlets to control JavaScript libraries sent to the client.
...)
:[ )
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 constructs.
It takes a little while to learn how to prevent pitfals of searializing data to JS constructs but it is well worth it. Just a few libraries server side to handle your marshalling of data is needed. Not complex code at all.
Once you have this model built, the sky is the limit with what you can do. If you want to use AJAX or AJAJ, your web apps are ready to go.
The biggest advantage of simplifying the client server model is that you can build client side prototypes of your tool for customers to see in a quarter of the time it would take to get a real working version going with JSP's or other server side templating methodology.
Honestly, this is the future of web application development. I've been doing it for several years now and my apps are very fast and extremely easy to debug.
But you will have to learn how to debug JavaScript which is a feat on it's own but just follow these suggestions and you will actually enjoy hacking in JS:
1) Build in Mozilla (FireFox
. . Code written in Mozilla works in IE most of the time. Be careful of how you code but it works.
2) Build up yourself a debugging library
. function dbg(sMsg){
. . Should do a dump of the message as a well as any stack info
. function dbgErr(sMsg,e){
. . Make sMsg optional
. . Will show message, Show complete information from error `e`, Show stack
. Use Window.onerror handler.
. wrap any complex methods with try{...body...}catch(ex){debugErr(ex)}
. Because of stupid flaws in IE (No stack property of error), you must catch the error as close to its origin as possible.
3) Create or use a good JS library to extend and simplify JS. A great example of JS hacking is www.cross-browser.com. Very nice hacks indeed!
4) Create a console toolset
. . Sometimes, debugging with alerts does not work. This is especially true with event models blur / click...
. . Have a function that opens and configures a new window or floating frame
. . Create a simple set of methods to push data to this console
. . Use this whenever you have very complex code that you would like to fully understand the sequence of code. (very very handy)
5) Learn and use JSON
. Great way to nest complex function/method arguments
. Great way to do your OO programming to preserve NameSpace
. Also very clean and efficient way of expressing data
. Native construct of JavaScript, Python and Ruby(?) ~ ergo fast
6) Hack in Mozilla
. . I am repeating becuase most wannabe DHTML hackers start with IE and fail misserably in the long run. Good example is a guy by the handle of StereoFrog. That guy had great code and ideas but did not respect the Moz. He only supported IE and now he has vanished from the earth. (Sad because I lost my copy of his libraries...
JsD
[:==Moz+AJAJ+OSX==:]
As a web designer of six years, I still love Dreamweaver's coding interface. The CSS and XHTML references are handy, and the tag autocomplete is great. The tabbed interface really helps when you're switching between multiple files, and the button rows give easy access to some XHTML code chunks. The CSS editor is also excellent if you can't remember all of the property names, and Dreamweaver is clever enough to write CSS shorthand code. Overall it's a far more mature application than Bluefish (Bluefish doesn't even have proper syntax highlighting, and the find/replace feature is atrocious), and way more tuned for webdesign than EditPad or Vi. It's sad though that many think of DW as only a WYSIWYG editor; DW's code editor is second to none.
If you want to learn web design, focus on learning design. The forest, not the trees. Read up on composition, technical communications and page layout. Learn the basics of color theory. You'll then understand the medium better than 90% of teenage webdesigners. After that, teach yourself the tools. XHTML and CSS are a must; both have very good to excellent support among all current browsers (XHTML being effectively refined HTML). With this knowledge alone, you'll have a mature body of knowledge on which to build.
No, you don't need to learn the latest buzzwords to advance as a webdesigner. AJAX can wait. But PHP is very useful for more flexible backend and changing content. Want to code a blog? Use PHP and a MySQL database. It's not that hard, and it's much easier to maintain than the plain XHTML equivalent.
All in all, keep sight of the big picture. Realize that your webpages should look good, but also clear. Minimize design elements, but make the every element count. As in writing, "kill your darlings"; keep the bold pieces of your design that make it stand out, and lose the details that just add noise. Balance clarity and artistry, and you will become a competent webdesigner.
I'm a self-taught hobbyist myself, from a combination of books (O'Reilly), tutorials (try www.w3schools.com), and looking to see how people better than myself did it (View Source). I learned a lot from View Source over the years, but as pages have become more complex, it becomes more challenging to identify the code giving rise to the feature of interest.
If you're in a center of any decent size, there should be nightclasses.
The other possibility would be to go with a content management system - a pre-written blog or wiki software - many of which can be tweaked and customized to produce static pages or a mixture of static and dynamic pages. I've learned a certain amount of CSS through messing with their templates. More writing, less markup.