How to write your simple 'static' web page
This page is part of Ron Mertens' web page guides.
A web page is basically written in a language called HTML. In HTML you define the text layout, the text itself, links to images,
tables, stuff like that. CSS is an HTML 'add-on' which makes for better written web pages.
I personally think it's a good idea to know some rudimentary HTML and CSS. Even if you later decide to use an automated tool or
a Content Management system, this might come in helpful.
Anyway, this page will not teach you to write HTML or CSS - but just give some basic concepts and pointers to more info.
What is a "static" web page?
A static web page is a page that was made "in advance", and does not contain any dynamic, database-driven data. This very page, for
example, is a static HTML page. See more in our server side vs client side guide.
HTML
HTML is a markup language. Basically it means you write your content, and add formatting information. For example - "this part is bold"
or "this part is in a different font" or "this part is a table" and so on. You 'wrap' your text with formatting directives, which are called
'tags' in HTML.
Here's a short example -
<strong>
this part is bold (or strong text)
</strong>
this part is normal
<small>
<this is small...>
</small>
If I wrote that in HTML, it'll look like -
this part is bold (or strong text)this part is normalthis is small...
Of course HTML is much more complex than this example. You can includes links and images, define layout of pages (using tables), you have 'header' section in which
you can define 'meta' information such as author name or keyword for search engines, and many more things.
CSS
CSS (Cascade style sheets) is rather new, and it was invented to solve a specific problem in HTML - the mix of content and formatting.
Let us assume you have written 100 pages. Then, you want to change all of the headers to purple font. Oops - you'll have to change
all 100 pages! Obviously putting content and formatting in the same document is not so wise.
So here comes CSS. Basically, it allows you to 'name' certain parts of your HTML page. So you say - this part is called MyOwnHeader. Then in a sperate
file (The CSS file) you declare that MyOwnHeader is a header, and has a purple color. Your HTML page includes a pointer to the CSS file, and there you go -
you separated content and formatting.
CSS has become widely popular, and nobody writes plain HTML any more. It makes much more send to use CSS, even in a one page setup. CSS also allows
you to decide the layout of your pages (for example, a page that has 2 columns). This is really neat, because it actually allows you to
display the same content in different layouts, just by choosing a different CSS file.
Tools
Writing HTML and CSS can really be easy. You can use a simple text editor (or even notepad!) and just type away.
There are two major types of editors, that make the job a lot easier -
- HTML editors - These tools are still plain editors, but with extra HTML features. For example, they will highlight the
HTML 'tags' for you, and have some features that help with formatting. They usually offer a quick 'preview', and obviously are much better
than the regular text editors.
- Visual Editors - These are more sophisticated, and allow you to just type the text as you like, with formatting done
on screen, like modern rich-text editors. The most known one is probably Microsoft's Frontpage. The problem with these tools is that
you'll never know how the HTML file will actually look like, and usually it looks like a big mess.
I personally use CoffeCup's HTML editor. I use it as a text-based HTML
editor, and it really helps to put links or tables or formatting or stuff like that.
It has a quick Preview option, and actually has a 'Visual Editor', but I rarely use it. I just like to know exactly
what my HTML looks like!
Another option that some people use is to work with a word processor (such as microsoft Word). Most of these will be able to
'export to HTML', and it's the easiest way to start. But I must warn you that it will create very messy HTML, and it might
be problematic to edit this page later.
You also need some way to 'upload' your pages to your server. You need an FTP program to do that. I recommend the open-source
FileZilla, which I use and like.
Books and on-line help
Obviously there are tons of web pages that teach you how to write HTML and CSS pages. I haven't used any, so I can't recommend. However, for HTML and CSS reference,
there is the excellent W3 Schools page, which is worth a book mark.
Personally I prefer to study from a book. I've learned my HTML/CSS from this book
and
I think it is rather good.
What's next?
Check out next guide about client side scripting.