Could you follow a recipe to cook scones? If so, read on.
A lot of tools these days try to protect people from HTML — that’s the coding that turns text into a web page. But even if you’re using an easy publishing system, or a blog, having a bit of a grasp of some of the basics of HTML gives you more knowledge, more power and a greater ability to produce great results. And the basics are not hard. If you can follow a recipe to make scones then you can use some basic HTML.
The Basic Starter Kit
Here’s the world’s most basic web page. Copy the following text and paste it into a document using a text editor such as Notepad on Windows or TextEdit on Macs — both programs are supplied free with the Operating System. Check the settings on both programs to check they save files as plain text, not as RTF or any other format. Mac users see Use Plain Text options for TextEdit when writing HTML files.
Save the file on your desktop with the filename: page01.html. Do not under any circumstances use a word processor such as MS Office, because it inserts invisible weird characters that later show up in odd places.
<html> <head> <title>My first web page</title> </head> <body> <p>My first paragraph. </p> </body> </html>
And yes, most of it is lower case.
Now, a real web designer will fall over laughing at this and probably expostulate that you need all kinds of other coding for even a minimum web page. That’s what I’d do, if I were reading this instead of writing a 600 word article. But this is the bare minimum you need, to start understanding HTML. The stuff that’s important for us is what comes between <body> and </body> — the body of a web page. Just ignore the rest (but don’t leave it out).
Open the Web Page
My first paragraph.
Now that you’ve saved the file page01.html on your Desktop open up a web browser: Internet Explorer, Firefox, Safari, or whichever one you use. Go to the File menu and choose a command like Open File. Choose page01.html and open it into your web browser. [The screenshot shows the page after adding a second paragraph and emphasising some text, as described below.]
Your first web page will be displayed. It’s a bit plain, and bland, and raw, but it’s a start, and you made it. It should say: “My first paragraph.“. If it doesn’t, double check what you’ve typed against what’s written here. All those angle brackets and things should be identical.
Change the Web Page
Go back to your text editor where page01.html should still be open (or open it again). The HTML tags (codes) <p> and </p> show where a paragraph starts (<p>) and stops ( </p>). The slash in the second tag shows that you’ve ‘closed’ the paragraph. Click after </p> and type another pair of paragraph tags: <p> </p>
.
Now click between the two tags you’ve just added and type another paragraph. Here’s how that section of my page looks now:
<p>My first paragraph. </p> <p>My second paragraph uses fake words to make it stretch over a few lines: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida. Donec rutrum. Nunc interdum lorem eget nibh ullamcorper vestibulum. Integer nisi. Pellentesque id orci vitae sem dapibus placerat. </p>
Check your coding
Save your document and go to your web browser. Either click the Refresh / Reload button or follow the earlier steps to open the saved file. Your web page should now have two paragraphs.
Emphasise a few words
Just one more thing for this starter recipe. You may feel it’s pretty important that this is your first web page, so let’s emphasise that word. Bold may leap to your mind as formatting that shows something is important, but other techniques sometimes feature on websites too, such as red, or upper case, or larger text, or italics. How you show a word or phrase as emphasised is between you and your web designer. What you need to do in the HTML is show that the text should stand out somehow on the grounds that it’s emphasised.
You need to code it as being ‘strong‘ (emphasis). Most web browsers will automatically use bold for that, but a web designer can make the web browser use another technique.
Here’s what you do — you use the <strong> tag, like this:
<p>My <strong>first</strong> paragraph. </p>
Save your web page again and again refresh your web browser. You should now see that the word ‘first‘ stands out.
Now you’re coding!
In the next Tip I’ll show you how to add some headings and a link. (Headings tip for the adventurous: experiment with these: <h1> </h1>, <h2> </h2>, <h3> </h3>).
Written by Miraz Jordan for, and reproduced from CommunityNet Aotearoa Panui, August 2008. This article may have been modified for publication here.
Update: The whole series:
These Posts may interest you too:
- ‘My second page’ – a basic HTML recipe Last month My first page – a basic HTML recipe introduced some basic concepts of HTML for people wanting to understand a bit more about writing blog posts or adding...
- My third page – a basic HTML recipe The previous Tips in this series introduced a little basic HTML, showing you how to make paragraphs and headings and emphasise a few words. See: My first page — a...
- ‘My fourth page’ – a basic HTML recipe How to link to a photo from inside a web page. Recently I have explained the HTML coding for headings, paragraphs, and links. The HTML for an image combines techniques...
- Use Plain Text options for TextEdit when writing HTML files If you were going to write some HTML using the Mac’s free text editor TextEdit you need to make sure the Preferences are set for plain text, not for RTF....
- Customise the WordPress login page (Thesis theme) Customise your WordPress login page with a couple of functions. Use the Thesis theme? This takes only a few steps. Here's how. ...
Add your Comment
{ 3 trackbacks }