In which I suddenly realize I don't know how to make web pages

July 26, 2007 3:42 PM

Having made myself dependent on Dreamweaver and CMSes, I suddenly find myself ignorant of the basics of reusable site content. Help.

I've been running my own website for seven years and blogging for five, and yet all of the reusable content issues (banner logo, image link nav menu, etc.) are handled either by blogging software running PHP (which I don't know) or the Templates feature of Dreamweaver. I understand CSS and how stylesheets work, but a weird thing happened.

I was asked this week to make a small site for a friend- literally a half-dozen pages, with a standard logo bar, menu, etc... and I suddenly realized I have no idea how to do that unless I'm using Dreamweaver Templates or running a blog. In other words, I've been making a web page for years and yet I don't ... actually... know how to make a web site (or at least an efficient one).

Basically, I feel like I forgot to read the first chapter of an HTML book or something, and all my searches for an explanation bring me to beginner's "how to make your first web page" types of how-tos. I can make all these pages by hand tonight if I wanted to, but I couldn't make them in a way where, sans DW templates or them being pages in WordPress, if I wanted to say, change a link in the nav menu I would only have to fix one file instead of a half-dozen.

Stupid as it sounds, that's what I'm asking: how do I do that? If it's possible, maybe down the line I can redo my own site so I'm not using Dreamweaver for all the menu and non-page body elements as well.

posted by XQUZYPHYR to computers & internet (15 comments total)

Well the old-school way to do this is with frames. These days, you can use iframes

Otherwise, you need something server side to grab from code from several files and put them togther into pages. The most common way to do this is a PHP include.
posted by phrontist at 4:01 PM on July 26, 2007

Well, futzing with HTML won't let you do that, unless you do some wacky CSS. But what you really should be learning is PHP (or ASP if you're hosting on Windows). PHP should be fairly simple for you to learn, conceptually, and it will simplify your HTML reuse (as well as give you a lot more control over things, if you ever want).
posted by lubujackson at 4:02 PM on July 26, 2007

I use Textpattern for content management, but it can be confusing. Way back when, I'd modularize all the different parts of my website with PHP. It's inelegant and there are better ways to do it, but it's easy and it always worked well for me.

All you have to do is separate the different elements of your site (header, menu, footer, etc.) into html/php/whatever files and use PHP's include function to place them into your page as desired. You'll want to hard-code the actual content into the page rather than include it. Well, you don't have to, but since the content will be unique for every page it'd just be an extra step.

Repeat for every page. Then, whenever a change needs to be made to one of the site's elements (say a new section needs to be added to the menu), just edit your menu.php file and the changes will show up on every page that you've included that file.

I hope I was clear enough in describing this. Someone else will probably post a better solution, but if this interests you at all and you'd like some dummy files to get a better idea of what I mean, my e-mail's in my profile.
posted by kryptondog at 4:36 PM on July 26, 2007

The PHP include stuff seems like a good call, but what I'm curious about is how, if that's how PHP works, why a site that loads reusable data in PHP still show up as a raw HTML file.

For example, my friend made this site (sadly I can't reach her to ask the coder directly right now) and I'm sure that it used PHP for almost all the content save for the internal copy, yet viewing the source, it looks like a normal HTML file.
posted by XQUZYPHYR at 4:41 PM on July 26, 2007

XQUZYPHYR: Because it's all done server-side. In other words, the server takes that file, passes it to PHP, PHP spits out HTML, and the server passes the HTML to the the browser. The interpolation of your include is done on the server.
posted by phrontist at 4:51 PM on July 26, 2007

Ah. Well, PHP's ultimate goal in most situations is simply to output HTML. At least, in the situations where basic web designing is concerned. PHP files are served as text or HTML files by default on most webservers that support it. So, when someone visits a PHP webpage, the server-side PHP interpreter runs the code, and produces HTML that is sent to you.

For example, when you go to a PHP BBS' thread listing page, the PHP code is authenticating you, checking for errors, talking to the database and outputting information based on certain parameters, yada yada, but by the time it actually reaches you it'll appear as plain jane HTML.

Also, PHP files can contain HTML. In my example, the only actual PHP code that you'd need is the include function. And when you'd go to the website and view source, you won't be able to see any PHP code at all- it would have been processed and served as HTML.

OP: What phrontist said.

Web gurus, feel free to correct if I'm offering old or outdated information. I'm a little rusty.
posted by kryptondog at 4:53 PM on July 26, 2007

Ugh, I feel like a moron after seeing that explanation. So basically, just so I'm clear here... I can make an HTML file, like index.html, and include a PHP tag to load, for example, topmenu.html?

I'm not in a position to fully learn PHP just for this project but if you're saying that those tags are all I'd need for a simple project like this then it would just be a matter of making sure PHP is enabled on my friend's web server.
posted by XQUZYPHYR at 4:56 PM on July 26, 2007

So basically, just so I'm clear here... I can make an HTML file, like index.html, and include a PHP tag to load, for example, topmenu.html

Almost, but the file you create has to end in .php (and the server that's hosting the pages has to have PHP installed and enabled) in order for the PHP script to actually get processed by the server and not just served up as raw code.
posted by camcgee at 5:17 PM on July 26, 2007

At it's absolute simplest, you could put:

<?php include("file.html"); ?>
posted by camcgee at 5:22 PM on July 26, 2007

What camcgee said. And don't be worried about just learning enough PHP to be dangerous- one of the great things about it is that it's very "forgiving" compared to a lot of similar solutions. I'd recommend reading some tutorials to get a decent grasp of how it works and whatnot, but don't feel bashful about learning enough to get what you need done and picking up the rest as you go- that's how a lot of people get their start. Also, many great PHP scripts assume no knowledge of PHP code outside of how to install it.
posted by kryptondog at 5:25 PM on July 26, 2007

Almost, but the file you create has to end in .php (and the server that's hosting the pages has to have PHP installed and enabled) in order for the PHP script to actually get processed by the server and not just served up as raw code.

I'm confused there- if that's the case, how come the pages in the example I linked to are HTML? I'm sure I've seen lots of other sites with PHP have an HTML file structure as well.
posted by XQUZYPHYR at 5:52 PM on July 26, 2007

It's possible to tell Apache to treat files with the .html extension as PHP files. People do this for a variety of reasons, such as preventing would-be hackers from knowing what scripting language was used to make the code.

Usually (at least in my experience), shared hosting providers don't have this option enabled. It's possible to circumvent this by using .htaccess files, but that's a whole 'nother episode. IMO, it'd be best to just end all the webpage files with .php, including the pure HTML files. At least, that's what I did when I was learning. It'll take the guess-work out of it.

Also (since we're on the subject), files named index.php will behave just as index.html files in that if you go to a directory on a site (www.site.com/directory/), it'll go to that page.
posted by kryptondog at 6:27 PM on July 26, 2007

PHP is not the only option, of course. If you're using an apache web server, and it has server side includes turned on, this is designed to do exactly what you want without loading the whole messy php interpreter for every page.

Basically, just make sure that SSI is enabled, and then include a line which looks like this to include some shared chunk of html:

<!--#include virtual="/footer.html" -->
posted by dkg at 8:22 PM on July 26, 2007

A good primer on using PHP to dynamically manage content can be found at A List Apart's PHP CMS article.

It uses the include technique suggested by several others above and offers a sound introduction to PHP.

If you're not already familiar with it, A List Apart is an essential web design resource, with an emphasis on coding-by-hand and so would be well suited to your original question.
posted by banter at 8:39 PM on July 26, 2007

You probably don't want to go telling Apache to treat .html as PHP unless you run into a reason to do so. It will add processing time to all HTML files and possibly make debugging more confusing. Better to just stick with .php as the extension, at least until you're done building. All that matters to a web browser is the page's MIME type. When PHP, or any other language used in this manner, finishes what it's doing, the server spits the file out to your browser with the same MIME type as an .html file.

Regardless, the general ideas here are a good, easy solution to what you want to do. Put as much of the display as you can in CSS/ use as little HTML to create the interface as possible. Then put as much of the HTML as you can into include files. Traditionally you wind up with a header and a footer include with the content in the individual pages.
posted by yerfatma at 5:18 AM on July 27, 2007