Welcome - This page assumes you are using Amaya Browser/Editor

Beginning a site from nothing is hard. You need a layout plan and some knowedge of Amaya, CSS and HTML before you can begin.
The best way to learn is to use other people's pages and modify them

Modify this page to suit yourself, and learn Amaya while you do. Look at the source code occasionally to learn from what you have just done.

Getting this page:
Open this page (tut1.html) and its CSS in Amaya. To get style.css just change tut1.html to style.css in Amaya's navigation line at the top and press Enter Or click Format > Style sheets > Open, and choose it. Do a File > Save_As into a directory on your computer. To work correctly you need all the pages including style.css and the pictures with their original names in the same directory on your computer. You can get the pictures with Firefox or Internet Explorer (but not Amaya) by right clicking on them and selecting Save Image As. Make a backup of the whole site and then you can change things while you learn Amaya, CSS, and HTML. You can use this as a model for your own site or take any of the thousands of pages off the internet. Respect copyright. Very few internet pages are valid code.
The style sheet is attached by the statement <link href= "style.css" rel= "stylesheet" type= "text/css"> in the invisible <head> section of the the html.Call your style sheet something_imaginative.css. I use style.css as an example.

Examining the Source:
At any time you can examine the code by pressing CTRL U O. That is hold down the control button and push u then o on the keyboard and the source code will open. Ctrl U H will close the window again. Double clicking on the (pink?) line at the bottom opens and closes the source code also and you can use the View menu. Look at the bottom left (html>body>div>div>p) to tell you structure. You can click on the structure items.

Get started by typing:
Click here and add some text to this paragraph as if you are using a word processor. Enter gives a new paragraph and Ctrl Enter gives a new line. Edit > Undo or CTRL Z will remove mistakes.
Select a piece of your text. Go to Insert > Information Type and choose one. Experiment.
Select a piece of your text. Go to Insert > Character Element and choose one. Experiment.

Get started with a heading:
Select some text by dragging across it. Go to Insert > Heading and choose one. You should get a heading. Work on improved formatting later.

Get started with an image:
With the cursor somewhere on the page go to the Menu Bar. Click Insert > Image. Click the picture of the folder and select an image as usual for other software. Type something into the Alternate Text. Click Confirm.this is alt text You should now have an image. Drag the mouse across the image to select it and resize as if you are in a word processor. Worry about layout later.

Make a link
Type something and drag across it to select it. A link. Go to the Menu Bar. Links > Create or Change a Link. Type in the name of a page. eg http://www.gmail.com or tut3.html and click on Confirm.

The View Menu
Take a minute to try each of the options in the View Menu. They are fairly self-evident. Use the ones that you are comfortable with, but they all have value.

The Insert Menu
Take some time to find what is in the Insert Menu. Some you will never use, and some you will want often. Give yourself some blank space to experiment (Enter Enter Enter) and use Ctrl Z (Edit > Undo) to reverse mistakes.

This is a <div class="caption"> with a colored border. Click inside it and press F2. You should have the whole div selected. Go to Format > Show Applied Style and you will be able to click to open the stylesheet to see why it is centered with colored borders and space around it.

 

This is the same as the div above

image of sunrise over Wellington Wharves. This is alt text

This <div class="caption"> contains the heading above and another div called <div class="pictureright"> which allows text like this to float past it on the left. Note that when a div floats it is other things that move. The floating div stays put. Confusing.

Select the picture by dragging on it and press F2 to select the div then go to Format > Show Applied Style and click on a line to the stylesheet to find out why it floats on the right side.

Replace the image by dragging on it and press delete. Then without moving the insertiion point go to the menu item Insert > Image. Click on the yellow folder and insert an image of your own. Drag to size. Images on the internet do not need to be larger than 100k and often 30k will do.

Next page >
This page is written on Amaya 11.3 running on Ubuntu 10.04.


Pictures are taken in Wellington, New Zealand.
I have changed my NZ local English to American where it is also used as code (color & center).
Any comments, Amaya experiences and extra material very welcome.

jeffhunt90@gmail.com
Amaya logo Last Updated: 2010-06-23