CSS and HTML text editor

March 8, 2009 11:52 AM

Web development filter: CSS / HTML text editor? I'm making a series of VERY basic websites: around 5 pages each of static pages. I've handcoded with CSS and HTML so far (I'm a complete NOOB here, though.) I'm constantly fiddling with elements which are common to each page, and then therefore have to copy and paste across all the pages. Seems like there has to be a better way...

For example, I'll play around with the graphic elements on the header or menu. I want to roll that to every page. (As an example, see my work in progress here: www.flockofpinkflamingos.com.)

Is there a text editor where I can define the common elements and automagically copy them after I edit a common element? Should I give up on finding a tool to do this and just learn PHP. (I don't even know HTML, so seems like a lot of work to learn ANOTHER language.)

I'm using WordPad now, so I can imagine anything will be an improvement. As you can probably tell - I know nothing about this stuff so the HiveMind's advice is much appreciated!

posted by mtstover to computers & internet (17 comments total)

Are you on Windows/Mac/Linux?
posted by ceri richard at 11:56 AM on March 8

Windows
posted by mtstover at 11:57 AM on March 8

Sorry, WordPad is Windows only, yes?

If you're looking for an open source editor, try HTML-Kit or Nvu but php or a WordPress install would really simplify things for you. It's not a huge learning curve (honest!) and there are plenty of excellent tutorials out there.
posted by ceri richard at 11:59 AM on March 8

You need to learn PHP.

<? include('./header.html'); ?>

will make your life a lot better.
posted by sonic meat machine at 11:59 AM on March 8

A few things going on here:

If you just want to avoid copy/paste, Dreamweaver has templates. However they are buggy and the software is expensive. The bottom line, though, is that even if this makes less work on your end, you are still cluttering your server with multiple copies of the same thing.

What you really want is to learn to use includes, which are little chunks of code which the sever can include in many different pages when the user requests them.

It is possible to do "server side includes" in html- however not all servers will display them without some configuration. The other option, and the one I would recommend, is to learn just enough php to do includes that way.

As for editors, it sounds like you're on PC, so I highly recommend getting Notepad++ I don't know that it does what you're asking here, but it's a fantastic text editor and free and it will make your life 1000 times easier in other ways.
posted by drjimmy11 at 12:02 PM on March 8

I would learn php...infact you don't have to learn much, something like this would do:

header.php (containing only html):

[html]
 [head]
  ...
 [/head]

 [body]
 (your image header, menu..etc.)

footer.php (containing only html):

 (copyright, stuff at bottom)
 [/body]
[/html]

allothers.php (contains only 2 lines of php):

<?php include('header.php'); ?>
(content that changes on each page)
<?php include('footer.php'); ?>

posted by Sonic_Molson at 12:08 PM on March 8 [2 favorites]

If you go down the php route (recommended), the ThemeForest blog has been running a series of PHP and Wordpress screencasts that should get you up to speed in no time.
posted by ceri richard at 12:10 PM on March 8 [4 favorites]

If you can hand code consider using Jquery, it's a javascript library that is really easy to use. Not really like working with a language as someone has already done all the hard work for you.

Say you are reusing an element on every page. You could have that as a seperate html file then you would have a placeholder div on the page. Using Jquery you can load the external file.

It's as simple as having $('#header').load(header.html) in the head of your document.

Regarding an editor, I normally use a mac but when on Windows I've found Notepad++ to be excellent. Microsoft Visual Studio is great also (there is a free version), and has wysiwyg.
posted by twistedonion at 12:11 PM on March 8

I forgot to say, if you are just using regular html have you looked at basic server side includes?

[!--#include file="file.html" --]

Replace [] with <>

Try it out, if your server supports it then that should be your problem solved.
posted by twistedonion at 12:19 PM on March 8

I've not used it myself, but yGen claims to do exactly what you're requesting. (But learning a language is no doubt more useful in the long run.)
posted by 4eyes at 12:39 PM on March 8

yep, definitely learn php. i only needed to do a VERY few things with it, and taught myself what i needed from the w3 tutorials. so give those a look. you can still do everything in wordpad if you want, it's basically just a matter of creating a file for your header, and then in your main pages calling that header file.
posted by misanthropicsarah at 12:44 PM on March 8 [1 favorite]

Another vote for PHP. Here's a basic screencast on doing exactly what you want:

Working Modularly With PHP
posted by backwards guitar at 1:16 PM on March 8

Another recommend for PHP. It's NOT as difficult as you may think.

This site has a lot of what you need and is VERY friendly.

http://www.tizag.com/phpT/

A "require" header & footer is probably all you will end up needing.

If you can do CSS and HTML you can do PHP and if you end up rolling with it, SQL ain't too hard either.
posted by crustix at 1:41 PM on March 8 [1 favorite]

Sorry, after re-reading, you are looking for a TEXT EDITOR with 'automagical' properties. All have search and replace. Most support regex. You could read up on regular expressions but using PHP Requires and Includes will be much faster and do not need special text editors.
posted by crustix at 1:48 PM on March 8

Notepad++ will do a search and replace in all open files, which should work fine for you if you're working on ~5-page sites. It also happens to be my favorite HTML and CSS editor, for many other reasons.
posted by timepiece at 4:49 PM on March 8

Thanks all! Downloaded Notepad++ and it looks much better than Wordpad! I'll investigate PHP as well. Thanks for the help, as always.
posted by mtstover at 3:14 AM on March 9

Homesite used to be my tool for this, but it sadly got eaten up by Dreamweaver. Believe it or not the closest equivalent I've found has been MS Expressions with WYSIWYG mode turned off - especially suprising since Expressions is the latest incarnation of Frontpage (yuck! spit!). Sounds like notepad++ pretty much covers you though.
posted by Artw at 9:55 AM on March 9