My first web page

Tex-Guides

JCW Docs

Home

This page describes the basics of writing a first web page. It then goes on to add a few very simple parts, such as pictures, then section headings, links, and the opportunity to add an email link.

Web pages are written in html (hypertext markup language). Like many other languages, html works by defining "environments".

Web pages can be written in "raw html" - using a text editor to type the commands and efine environments, or using something like Dreamweaver which is a more graphical programme and has much more flexibility. These notes are for a beginner to write their first web page using a simple text editor.

Preliminaries for Canterbury University

In order to create web pages at Canterbry University, the following steps must first be followed:

Request the computer manager to set appropriate permissions for you to have your own web pages
Login to one of the Canty Uni linux machines: login01,...login04. (from outide canterbury, need to first login to bardeen.canterbury.ac.nz)
In your html directory, once your page is created, you need to set global read permissions:
```
chmod a+r mywebpage.html
```
You only need to do this once for each page that you create.

Very first page

All web pages start and end with "tags" (words put in angled brackets "<" and ">") defining an html environment:

<html>

</html>

All other text on the page goes between these tags.

Next, all pages have a "head", and a "body". These environments are also defined by tags...

<html>
<head>

</head>

<body>

</body>
</html>

Information like ownership of the page, keywords for search engines to use, redirections to other pages, ..., basically stuff that doesn't appear simply as text on the web page is stuck in the head. The only relevant piece of information for the head for our purposes is giving the web page a title. The title is the words that appear at the top of a web browser when it's looking at your page.

Add a title in the "head" region within "title" tags:

<title>My first web page<title>

At this stage you should save your page, and can view it now (though it'll be pretty empty!). I shall assume you save the page with title firstpage.html (Canterbury University users: you should now save your page, and make sure that the permissions are set as above.)

You should now view your page in a web browser. For UoC physics users, the page location is:

http://www2.phys.canterbury.ac.nz/~/firstpage.html

where username is your usernam (mine is jcw83). note the tilde which is required also in the url.

The new page has a title in the top bar of the browser saying "My first web page", but otherwise no content yet.

Adding some content to the web page

Now that our web page exists, it's very easy to a basic content to the page. Items you might want include:

Headers

The term "header" is used, as title is what goes at the toop of the browser. Headers come in 4 main sizes. Best to use the headers to set sizes, rather than just defining font sizes manually, as this ensure it looks good on all browsers. Basically you use header size 1 for the main title of your page, and size 2 for sub sections, and 3 and 4 for lesser headings. As with all other environments, the headers are define with start and end tags within angled brackets. Try adding a few headers into the body of your html document:

<body>

>h1< Welcome to my first web page    >/h1<

Hi. This is my first web page

>h2< A second-level header >/h2<

Second-level headers can be used to define subsections, and ot
separate parts of your web page.

</body>

Separating paragraphs of text

Paragraphs are an exception on the pattern of starting an ending tags. For paragraphs (as also for items wthin a list), only a "starting" tag is needed. Paragraphs of text are separated using

<p>

at the start of each paragraph. Experiment with this a little on your new page.

Lists

Often it's nice to have some lists of things, e.g. instructions, or a table of content. Again done with tags.

For lists, define the list environment with:

unordered list tag = ul

ordered (i.e. numbered) list tag = ol

Each individual list item in the list is started, like each paragraph with

<li>

It is not necessary to close the list item tag but, like the paragraph tag, it is not an error to do so. An example list is written like:

<ol>
<li> item number 1 on my list
<li> second item on my list
</ol>

The output from this ordered list looks like:

item number 1 on my list
second item on my list

Highlighting my text

Again, text is emphasised with using tags for environments. You shouldn't use the underline environment as underlined text in html usually represents a link that a user can click on, and it's very frustrating when underlined text is not a link.

To have b or emphasized text (italics), use

<b>...</b>
<em>...</em>

Adding hypertext references

Hypertext references allow you to navigate around the web, within your own website, within a particular page.

My favourite links

The basic web reference, called a URL (Uniform Resource Locator) is to another web page. Rather than explain the meanings of the tags, I'll just tel you what to do:

<a href="http://www.the.web.page.ref/page.html">Words that represent
link</a>

Here it is usually good to just cut and past in the web location to avoid errors. The "words that represent link" will appear on your web page, and are underlined. When a user clicks on the underlined text, their browser is redirected to the http location. For example, to put a link to the news page of the BBC, you would do:

<a href="http://news.bbc.co.uk">Link to BBC news page</a>

Which appears on your page like:

Link to BBC news page

(though it won't appear in an unordered list environment unless you specifically code it to).

I'm the author

It's always nice to include a link so that people can email you. This is also done with an "a href" command:

<a href="mailto:physjcw@gmail.com">Feel free to email questions
to me</a>

This command will create a link so that the users browser opens up their default mail client with a compose window to email the person in the "mailto" field.

My photos

Before including photos on a web page, it's best to have them in the same directory or, better, a subdirectory, of where your html page is. That done, you can include photos ("IMaGes") easily:

<img src="myphoto.jpg">

If the image is too big, you can also include in the img tag a "width" or "height" tag. These are included in "point" sizes (72 points to the inch, so

<img src="myphoto.jpg" width=72>

Will include your photo on the page, but only with width of 1 inch.

Errors

It's easy to make mistakes - generally not closing a tag - e.g. by dong an </h3> to close what is actually an h2 field, or not having the "/" on the closing tag, will leave the tag open. Common errors look like:

Too much text underlined: means you haven't closed a link properly with </a> (don't use underline in an html document, as that is usualy reserved to show a link a user can click on!)
Too much text huge: means you haven't closed a header tag properly
Missing or deformed table: errors in table tags, e.g. unclosed data or row element or text typed outside a data tag
Too much text in bold or italics or in wrong font: unclosed bold, emphasise, code, etc environment
Big chunk of text indented: probably an improperly or unclosed list environment.

More help please

Google is the answer - in a google search window, type your question, or at least the keywords from your question. E.g. "table in html". From there you will find many web pages with worked examples, explanations, refinements, etc for making your first table in html. Top

Last modified:

Email: physjcw@gmail.com