how do I put up a web-page?

Factual Questions
1

So, after what, 15 years of surfing the web, it occurred to me that maybe I should know something about how web-pages are put up there for techno-peasants like me to read.

I’m on a Mac, which has iWeb pre-loaded, but I know nothing about how to make that program work, or how to design a web-page in general.

Can you guys point me to some very basic introductory books on the topic? and when I say “basic”, I mean something that assumes no previous knowledge of the subject.

To put it in context, I have taken precisely one (1) university course on computers. We entered our programs into the main frame via punch-cards. :eek:

I understand that it has something to do with inter-connected tubes? pneumatic, I asume?

Thanks for any help.

2

Publishing a webpage is a multi-tiered project. We could give you tips on getting started if you narrow it down for us :slight_smile:

  1. Owning a domain name (such as http://northernpiper.com)
  2. Setting up a web-server (or using a pre-setup service such as Geocities’ paid service)
  3. Writing HTML (or using a webpage builder such as Frontpage or Dreamweaver)

… or all of the above.

3

Hmm. These days, there are a lot of services that hide the inner workings of the web and do all the dirty work for you: Facebook, MySpace, Blogger, Windows Live Spaces, Google Pages, etc. all let you have your own little place on the web without knowing how the behind-the-scenes stuff works.

And that’s the way it should be, IMHO, just like driving a car. It should Just Work ™.

But if you really want to learn the technical stuff, here’s a brief overview:
[ol]
[li]Scattered around the world are gazillions of computers connected to each other through cables and wireless links to form what we call the Internet. A portion of that, the World Wide Web, is what the majority of the connected world uses on a day-to-day basis to Dope for answers or Google for porn. The web is like a national interstate system, used by everyone, whereas the greater Internet can be thought of as the sum of ALL roads in a country, most of which goes empty and unused most of the time but are ultimately there for a reason.[/li][li]These computers speak to each other through “protocols” or computer languages that range from low-level interactions that can be compared to vowels in speech to higher-level, complex ideas that can be compared to full-on storytelling.[/li][li]This “storytelling”, when done on the Web, comes in the form of a language called “HTML” or Hypertext Markup Language. You know how, here on the Dope, you can make certain words bolded or italicized? And notice the stuff in [square brackets] around the affected words while you’re editing? That’s a markup tag for ya, and HTML consists of zillions of these things that are used to describe everything from what color a word should be to where a certain paragraph should appear onscreen… and much, much more.[/li][li]Now, a webpage is nothing more than a document (like a Word doc) consisting of HTML tags and your content. It sits on a webhost – any computer that serves a webpage to another computer – somewhere until requested. Once somebody’s web browser (Firefox or Internet Explorer, for example) decides it’s looking for a page, it requests that particular page from a particular webhost. The host sends your browser the HTML page, the browser thinks about it in a deep philosophical trance, and then shows you what it thinks the page should look like.[/li]
Again, any person can make a webpage and any computer can be a web host, but the quality and complexity of both can vary from simple one-sentence pages to highly complex operations like Google or Amazon. For your purposes, see my recommendations in the next section as to how to actually get started.
[li]Or at least that’s how it worked back in the '90s, anyway. Newly emerged technologies and languages have slowly been merged into the fabric of the web over the years, giving us fancy, snobby things like images, buttons, animated cartoons, music and videos, and even full online computer programs or video games. The Web is much more than just basic HTML these days, but basic HTML is still the starting point and the backbone of all the other technologies, so that’s what you’ll need to learn first of all and most of all.[/li][/ol]

I can go on and on and give you a brief tutorial to HTML and web hosting itself, but really, it’s been done to death and I think it’d be much easier to just buy a book like Creating Web Pages for Dummies to get yourself started. There are probably a million different ones covering the same topic.

So that’s my suggestion. But if you have any questions or if you really want me to explain something in more depth, ask away :slight_smile:

4

I like 1and1, it’s a webhost. You can get pretty cheap packages with lots of bandwidth for a home user

Then go to your library and check out a book called:

Head First HTML with CSS & XHTML by O’Reilly Media.

It’s simple and explains all you need to know.

There are HTML editors that will do the work for you, but it’s so much better to use this book, as you’ll learn WHY you need to do things. The if you want you can go back an use an editor.

HTML (XHTML) isn’t hard to learn, the frustrating thing is to get your webpage to look good. Because not only can the page look different in Firefox or IE or Opera or another browser, it can look different in IE6 to IE7

So that book will explain it simply, you won’t be sorry you read it.

The great thing is you can build your simple webpage as you read the book, then by the time your done you can get complex

5

I didn’t know hewas responsible.

6

I can second the recommendation for 1and1. I have found it to be much cheaper and more reliable than GoDaddy.

7

If you’re an absolute beginner, I’d suggest starting with something simple like Google Sites, a friendly website building tool that does the bulk of the hard work for you.

If you complete your Google Sites website but remain hungry to learn more, I’d recommend only then proceeding further. I see so many tenchical interests get killed because the learner bites off more than he/she can chew, declares it “too hard”, and gives up.

8

Who is your ISP?

Almost all Internet connection plans include a small amount of personal webspace. So, without having to buy your own domain name (www.NorthernPiper.com), you can host your domain somewhere like www.cox.net, your personal webspace would be something like: http://members.cox.net/NorthernPiper

iWeb can publish your website to a folder on your HD, and then you can upload to your ISP using FTP (I use RBrowser).

It might be simpler to just get a Mobile Me account from Apple - it’s $100 per year, and it has all kinds of nice features, including personal webspace that syncs with iWeb, online backups, Address book and Calendar syncing, etc.

9

I know you’re probably just simplifying, but it’s worth pointing out that HTML (or XHTML) should not be used to describe things like font colors and the positioning of paragraphs. The HTML or XHTML markup should describe only the semantic structure of the document, i.e., the hierarchy of elements that make up the content of the document: divisions, headings, paragraphs, lists, tables, images, and so on. All the details of presentation (page layout, colors, background images, positioning, etc.) should be added using stylesheets. (Even as much as the CSS standard sucks for visual designers, abusing markup to implement presentation is worse.)

This sort of thing is probably daunting to the beginner, but if you’re going to learn to code pages by hand, you’ll benefit immensely from learning to do it right from the start. Granted, this is why most people who just want a casual personal web page should just use a WYSIWYG editor; they get immediate gratification and much less of the horrible, horrible pain created by a conflicting mass of woefully deficient web standards and insanely inconsistent browser implementations. :smiley:

No kidding. You can pretty much take for granted that if you write a sensible, standards-compliant web page with XHTML and CSS, IE6 will rape it horribly. But then, nobody should be using IE6 in this day and age. When I’m building a web page layout, I design first for Firefox, which often produces a result that also works perfectly in all the other good browsers. Then I tweak it until it works in IE7 (which, mercifully, is usually not all that painful). I don’t even think about IE6 anymore. :stuck_out_tongue:

10

Yep yep. I’m a CSS freak myself, but how do you propose getting beginners to accept that when you can’t even get them to do it in Word? The style-content separation just doesn’t happen, in my experience, until you get more experienced.

11

Maybe start teaching style-content separation in grade school? :stuck_out_tongue:

12

Crap. I just signed a five-year commitment with godaddy yesterday. :frowning: I wish I had known about 1and1. Anyway, what’s the difference between Linux hosting and Windows hosting?

13

Linux makes the Windows fanbois hate you. Windows makes you hate yourself after the first worm.

14

Jokes aside, as a general rule there are more (sometimes free) 3rd party web tools like Wikis, forums, etc available in Linux Hosting than for Windows; however, always check what are the most likely tools you will use (like Wordpress, Drupal, etc) in your website to decide what is the most convenient Operating System to use.

Depending on your provider, support for the installation of those tools may be available so check with the provider what tools are available before choosing your provider and the operating system.

15

Here’s my stab at a just-the-basics overview:

  1. A web server is just a program that runs on some computer and responds to http requests. At its most basic, it is just a mapping from URL to a particular directory on the computer. So for example, if your web server is configured to serve files from c:\mywebfiles and you go to http://mywebserver/foo.html, all the server does is spit back c:\mywebfiles\foo.html when the browser requests it. This is a web page. Frequently, a web page will contain images that are also sitting on that server, so foo.html may refer to “images/header.jpg”, in which case the browser will make another request for http://mywebserver/foo/images/header.jpg, and the web server will return c:\mywebfiles\images\header.jpg. The vast majority of personal web pages built by casual webmasters are just this: you create the files, and you put them in a particular directory on your web server, and they are magically available as a web page.

  2. When you get a domain name, you specify what IP address you’d like that name to refer to. So if you got northernpiper.com, you’d set up a record with your domain registrar that says “www.northernpiper.com is found at 123.45.67.89.” The address is the address of whatever computer is running the web server, and could even be your own computer sitting in your house (although this usually complicates things due to firewall issues and ISP user agreements, so it’s not really advised). More realistically, you will find a “web hosting” company like some recommended here. A web hosting company basically has a buttload of web servers running and assigns you to one, where you get your own directory which holds the files for www.northernpiper.com, and you’re limited to a particular amount of space, etc. They’d tell you the IP address of your server, and you’d point your name at that address. (btw, I recommend www.nearlyfreespeech.net – they are super basic service and incredibly cheap for pages that hardly get any traffic. I spent under 10 cents in my first 6 months as their customer)

  3. The way you put files on the web server also varies. I think the most common is probably FTP. You write your web pages on your computer (either by hand or using some web page authoring tool like FrontPage, which I’m sure is a horribly outdated dinosaur with many much better alternatives, but I’m not up on that type of software), and when you like what you see, you upload them to your web hosting server and they are visible to the world. FTP, scp, WebDAV, FrontPage extensions (? does this still exist?) – these are all different ways of getting the files onto the server.

  4. The difference between linux hosting and windows hosting is largely irrelevant for the types of pages I’ve been talking about so far. The differences come in when you want to do more sophisticated stuff like having programs actually running on the server which generate pages dynamically. For plain static web pages (what I’ve been describing), the only impact that the OS will have is in how you transfer the files. If you’re hosted on windows, they probably don’t support scp, for example, and if you’re hosted on linux, Frontpage extensions are unlikely.

Hope that helps.

16

To address something in the OP…

iWeb is a WYSIWIG (pronounced “whizzy-wig”, what-you-see-is-what-you-get) editor, and it’s on the far side of such things. Programs like Dreamweaver are also WYSIWYG editors but they make HTML on the fly and let you edit the HTML directly if you wish (most serious Web designers who use this application do a lot of HTML).

iWeb, however, does not make HTML on the fly. It uses its own technology to let you place items on a “web page” and link “pages” together. When you’re all done you click a button to “publish” and iWeb takes all of the layout info you gave it and spits out HTML files, JavaScript files, CSS files and folders.

You then take these files it spits out and upload them to your Web site. If you have purchased Web space, you need a program to do the uploading. You can either use an FTP client like Fetch or you can use something even easier called Easy iWeb Publisher.

If you want you can instead put your Web site up at mac.com - I believe every Mac user has a Mac.com address and Web space. I also think you can use tools within iWeb to publish right to your Mac.com web space.

Anyway, to get back to what iWeb is and does.

If you decide to learn HTML and you also want to use iWeb, you’ll be pulling your hair out. Why? Because there’s no HTML in iWeb until you publish. So if you put your HTML skills to work on the HTML files that are spit out of iWeb, your Web pages will not match your iWeb “project.” If you make changes in iWeb and then publish again, whatever changes you’d made to your HTML files will be over-written.

You basically can’t do both.

iWeb is fine if you just want to make something that looks decent and put it up on the Web. But really, it has NOTHING to do with HTML or Javascript or CSS skills. You have to choose the path that is most useful to you.

If you are interested in actually learning HTML, then ask some of the helpful folks here to recommend good HTML editors for the Mac that actually let you (or make you) fiddle with the HTML code yourself. Otherwise, iWeb is fine and some of the great info given here has little or no relevance to your plan.

Good luck! :slight_smile:

17

I started a website using one of the free CSS templates from http://www.oswd.org It served as a nice introduction to CSS.

18

thanks for the comments, everyone. I think I’ll have to buy the Dummies book and start from page 1. Sadly, most of what’s been said here has gone right over my head, just like the famous Gary Larson cartoons about “what we say to dogs”.

What sparked my interest is that I belong to a couple of community associations. One doesn’t have a web-page, and the other is badly outdated. I’ve got some free time coming up, so I thought I would volunteer to try to start a web-page for the one that doesn’t have one, and maybe see if the other could be updated. Nothing too fancy - purpose of the association, upcoming events, how to contact the directors, how to join - that sort of thing.

I will go and get a Dummies book and then re-visit this thread once I’ve had a chance to look at it.

I think, though, that it doesn’t sound as if iWeb is what I’m looking for - I think I would want to learn more about the coding itself, rather than rely on the iWeb program.

Again, thanks for comments, everyone.

19

My own stab at “HTML and web pages for the ignorant.” :smiley:
First off, assume that you have some computers that are connected with wires so that they can share information around. This is a ‘network’, and it could be planet-wide or confined to a small building. There are lots of different ways of encoding this information so that both the computer asking for it and the computer sending it understand what’s going on - we call these different ways ‘protocols.’ You don’t need to understand much about protocols except that they exist, and that they have different capabilities and strengths.

So, what sort of information do we want to send around with a Web-page? There are a few critical elements that web-pages are good for, or can be used for:

  • Text
  • Images
  • Multimedia
  • Formatting
  • Hyperlinks to other information (like other people’s web pages.)

It’s also important about web-pages that they are usually meant for people to see through a web-browser, rather than to look at more directly, (though once you start to write code yourself, you might want to look at their own code,) or to be processed by other computer programs, (though there are ‘web robots’ who do look at lots of other web pages, in order to create a search engine, for instance.)

The ‘protocol’ that the web uses is HTTP, or hyper-text transfer protocol, and it will handle a lot of stuff for you automatically, like implementing an addressing system so that people can find your web-page if you want them to, and what a browser should do if the page somebody asks for isn’t there, for instance. There’s another ‘HT-’ term that’s important for web-pages, and that’s HTML, hyper-text markup language. This is a document language that you can write your web-page in.

The ‘M’ in HTML refers to marks, or tags, that you put into a web-page to tell the browser various things. I think that I’m going to post reply at this point, and then come up with an example of web-page code that shows a few of the most important tags.

20

Okay, here’s the code of my example, hopefully this’ll make some things clearer about HTML:



<HTML>
<HEAD>
<TITLE>Sample web-page for Northern Piper</TITLE>
</HEAD>
<BODY>
<H1>Hi, <U>Northern Piper</U></H1>

<P>Here's some of the great things you can do with HTML...</P>
<OL><LI>Link to another place on the web, like the 
<A href='http://boards.straightdope.com/sdmb/'>SDMB</A></LI>
<LI>Show pictures, like this avatar I use on another message board: 
<IMG src='skaylee2.gif'></LI>
<LI>You knew this was coming... <I>Hi, Opal!</I></LI></OL>

</BODY></HTML>

To see how this all looks in a browser, you can go to my ISP webspace, where I’ve just put it: http://home.cogeco.ca/~ckenworthy1/npiper.html

There are lots of different tags in here, in order of first appearance:
<HTML>, which isn’t really required, but helpful for the browser to realize that the whole thing is an HTML file
<HEAD>, which marks off stuff that’s basic information, not really part of your web-page document. Here, the only HEAD element we have is:
<TITLE>, showing the title information that can go across the top of the browser window.
<BODY>, in contrast, contains information that should show in the main browser area.
<H1>, is a level one heading, with very emphatic formatting. You can go down to an <H5> for heading level five
<U> inducates underline formatting.
<P> calls for a simple paragraph.
<OL> marks off a list with number headings on each item.
<LI> seperates the different items in a list
<A href…> is a link to somewhere else, like another web address.
<IMG> puts an image file inside the webpage
<I> indicates underline formatting.

There are lots of other HTML tags, but these should suffice to give you a basic idea. There are lots of pages you can go to learn more about the nuts and bolts of HTML.

Most of these tags have closing tags, which are the same except they have a / before the opening <. It’s a good idea to be sure that you have your tags closed off, unless you’re sure that’s not needed, like with IMG, and that if you start one tag ‘inside’ another, you should close it inside as well and not have them overlap untidily.

You’ll need to understand about web addressing too, but that should be fairly easy to start with. To give you the address to my page, for instant, I started with http://home.cogeco.ca/~ckenworthy1/ , which is the address for my home page that my ISP gave me, and added the filename of the page I made for you at the end of it, npiper.html (HTML pages should end with an extension of htm or html in general.)

You’ll also need to learn how to transfer the webpage to a server that can deliver it to anybody who asks for it, which can be simple or tricky. I use an FTP client to send pages to my home space, which is another internet protocol, and lets you send files from place to place, and enter a username and password to make sure that other people can’t mess with your webspace.

Does that spiel help you out at all? :slight_smile: