Slashdot is powered by your submissions, so send in your scoop

 


Forgot your password?
Close
typodupeerror
×
Communications Programming The Internet Technology

Webpage Building Guides for the Uninitiated? 64

Posted by Cliff from the beyond-HTML dept.
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?"
This discussion has been archived. No new comments can be posted.

Webpage Building Guides for the Uninitiated? More

Webpage Building Guides for the Uninitiated?

Comments Filter:

  • Mmmm, XHTML is tasty (Score:5, Interesting)

    by Southpaw018 ( 793465 ) * on Monday December 19, 2005 @02:38PM (#14292659) Journal
    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 <br> tag being replaced with <br />. 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!
    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)

      by Cyphertube ( 62291 ) on Monday December 19, 2005 @02:49PM (#14292777) Homepage Journal

      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).

      • "While there are lots of places that use ASP, I found that ASP is awkward and really isn't built well."

        Which is entirely different from ASP.NET... which makes PHP look awkward and not built well.

    • some tools (Score:4, Informative)

      by kwench ( 539630 ) <kwench79@yahoo.de> on Monday December 19, 2005 @03:02PM (#14292929) Homepage
      A true (X)HTML freak will probably use a sophisticated text editor (like EditPad [editpadpro.com] for Windows, nedit [nedit.org], bluefish [openoffice.nl] or even emacs for Linux...), but for beginners a tools like Dreamweaver or Mozilla Composer [mozilla.org] or its next version nvu [nvu.com] 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.
      • or even emacs for Linux...


        LOL, I think you mis-spelled "vim"....

      • Re:some tools (Score:3, Interesting)

        by Shaper_pmp ( 825142 )
        "but for beginners a tools like Dreamweaver or Mozilla Composer or its next version nvu might be a good place to start."

        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
      • 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 d

    • 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]

    • Holy cow I don't even know where to begin with this... Sentence by sentence it is, then.

      Good news, friend. XHTML, CSS, and PHP are the three major languages of the web today, and you already know one.

      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.

      XHTML is very, very similar to HTML.

      Except in a few very important ways, which will make your pages die a horrible dea

  • There are a few nice tutorials and ebooks here [programmingebooks.tk] Get well aquainted with HTML and if you just want a nice blog, try wordpress. It's very easy.
  • HTML (or better, XHTML) is the stuff your web browser uses, okay, you got that. Everything else is just a way to output XHTML from the server using some sort of script or program, instead of just serving up a file. PHP is a popular language for this, and .php files are often just HTML pages with snippets of embedded programming. JSPs are similar. Perl, Python, Ruby and such aren't so much embedded with the HTML itself (though this is often considered a good thing), but as long as you can get them to talk to

  • What do you want? (Score:2, Informative)

    by tfinniga ( 555989 )

    just hobby pages and weblogs that look professionally made

    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)

    by CanSpice ( 300894 ) on Monday December 19, 2005 @02:45PM (#14292718) Homepage
    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 [csszengarden.com] 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 [ericmeyeroncss.com] also has excellent ideas. A List Apart [alistapart.com] 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.
    • The way I do things, there are several components to Web Development:

      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

      • Start on the right path with web standards (as opposed to old HTML 4 sins that many webmasters commit to this day).

        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.

        • HTML 4 may be a standard, but there really isn't a standard way to parse it. It's based upon XML, but is loose about a few of the fundamental rules. The things that it allows you to get away with forces browsers to use a tag soup parser which can have unpredicable results.

          • HTML 4 may be a standard, but there really isn't a standard way to parse it.

            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.

            It's based upon XML, but is loose about a few of the fundamental rules.

            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

    • I'm in the same boat as the questioner (inherited responsibility for an organization's web site and have been banging away at its Front Page-based files with Nvu with marginal success), and you've offered what seems like the most helpful reply so far, so I'd like to push it a bit more:

      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)

    by Will2k_is_here ( 675262 ) on Monday December 19, 2005 @02:45PM (#14292722)
    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.
  • http://www.sitepoint.com/ [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.

  • It really comes down to what you want to do (Score:3, Insightful)

    by jbarr ( 2233 ) on Monday December 19, 2005 @02:51PM (#14292804) Homepage
    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! [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.
    • Joomla is Mambo though...
      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)

    by wanerious ( 712877 ) on Monday December 19, 2005 @02:53PM (#14292833) Homepage
    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 [w3schools.com], which is pretty straight from the horses mouth, but no tricks or advanced techniques, and then studying layout like CSS Zen Garden [csszengarden.com] and Boxes Tutorials [thenoodleincident.com]. 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 [okccc.edu]. Good luck.

    • I availed myself of Web Schools from W3C, which is pretty straight from the horses mouth

      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]

      • Thanks --- color me fooled. Thought that it was directly related to the W3C. Anyway, I *did* learn some rudimentary CSS from it, though only for basic tag syntax. I learned the most about layout from studying examples. I didn't think anything was odd since I don't use VB, but thanks for the notice.
  • 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.

    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 .NET/SQL Server
    then you can start thinking about things like AJAX, XML etc.
    • After re-reading the post, I'm now of the assumption that English is your second language. If that is the case, please excuse my rudeness.
    • English is my first language. Does that mean you don't apologize for being uneccessarily rude? I will admit that I didn't give my post a thorough rereading before I submitted it, and it definitely has a rushed quality to it, but this isn't a thesis. I feel that I got my point across well enough. Thankfully, there were a number of posters who offered helpful advice without being rude. TACT. It's pretty easy to learn, though it seems that few bother these days.
    • I would just like to add that, grammar issues aside, I appreciate your answer. I am curious though about the differences between the two methods you list. What are the relative advantages and disadvantages of .NET/SQL and PHP/MySQL?
  • First step is deciding exactly what you want your page to do. Simply deliver static information, be interactive? Your objectives are going to determine a lot of what you need to do/learn. Next step, use a good web development program, like Macromedia Dreamweaver. You can get a free 30 (or 60 I forget) day trial of the program and it's a pretty nice WYSIWYG editor that will do must of the work for you, but of course anything more advanced than HTML and CSS (like PHP or js) you will still need do a lot of

  • LAMP (Score:1)

    by fmwap ( 686598 )
    I found CGI Programming with Perl [oreilly.com] 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 [php.org]. 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 [wikipedia.org].

  • Random assortment of advice (Score:5, Informative)

    by Bogtha ( 906264 ) on Monday December 19, 2005 @03:13PM (#14293045)

    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.

    • 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.

      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

    • "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." Well said! After having to learn some basic HTML to help my wife straighten out her web pages for her local NA group she was tasked to build (and only knowing FrontPage, that's what she used), I learned to resent some of the things IE has imposed on websites....Thanks Microsoft, you scumbags!

  • Not too hard (Score:4, Interesting)

    by Metasquares ( 555685 ) <slashdot.metasquared@com> on Monday December 19, 2005 @03:14PM (#14293056) Homepage
    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)
  • 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 confor
  • Ruby on rails [rubyonrails.org] would be a good framework to do rapid site development. Built in AJAX capabilities and MVC pattern.
  • 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.

  • CSS and PHP (Score:2, Informative)

    by vapspwi ( 634069 )
    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
  • I was in the exact same situation as you, smilingbandit2.
    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
  • 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,
  • I am kidding (it isn't is it?)

    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

    • Personally, I have to agree with everything you said.

      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
    • Well, I feel you were a little harsh in your post, but you're not really wrong. Please forgive the garbled grammar of my original post. When I wrote it, I was writing as though /. was a forum, which I now realize it is not. I should have taken the time to proofread and rewrite before I submitted. For that I apologize.

      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
  • 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 y
  • 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 c
  • 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 whi

Slashdot Top Deals

Our OS who art in CPU, UNIX be thy name. Thy programs run, thy syscalls done, In kernel as it is in user!

Close