wysiwyg HTML: the basics!
I write (and you should write):
<![CDATA[
<html>
<head>
<title> put title of the page here </title>
</head>
<body>
start your main text here ......
...... bla bla bla
</body>
</html>
]]>
- use your favourite text editor to create your web page:
TeachText for the Mac, NotePad for PC's, ... and use
your favourite web browser to display it!
- write your web page with the text editor.
- save your document with a .html (or .htm)
extension. For instance, bla.html
- load the document in your web browser. In general, choose
open page from the File menu and select the document
in the file browser: the web page will be displayed.
- Each time you make a change with the text editor, save the file
and hit the reload button on your web browser: the new changes will be
displayed.
These are some of the basic tools that you will
use to build your web pages.
- Comments
- Headings
- Paragraph
- Line Breaks
- Centering
- Indenting
- Indented List
- Unordered Lists (bullets type)
- Ordered Lists (number type)
- Pre-Formatted Text
- xmp
- Horizontal Ruler
- Style: Bold, Italics, Typewriter Text
- Special Characters
- Hypertext Links
- Syntax
- Within your document
- To another file
- Graphics
- Graphics Link
- To a picture
- To a document
- Sounds, Movies
- Do's and Don't
I write:
<![CDATA[
<!-- I have no comments-->
]]>
You see:
Nothing! The comments will not appear in the web page; use them within your html document as
headers to know what is what in your html document and if you intend to share
your document with someone else.
I write:
<![CDATA[
<h1> heading 1 </h1>
<h2> heading 2 </h2>
<h3> heading 3 </h3>
<h4> heading 4 </h4>
<h5> heading 5 </h5>
<h6> heading 6 </h6>
]]>
You see:
heading 1
heading 2
heading 3
heading 4
heading 5
heading 6
I write:
<![CDATA[
This is a paragraph followed by another paragraph. <p>
There is a theory which states that if ever anyone
discovers exactly what the universe is for and why
it is here, it will instantly disappear and be replaced
by something even more bizarre and inexplicable. There is
another which states that this has already happened.
(The Hitchhikers Guide To The Galaxy<p>
]]>
You see:
This is a paragraph followed by another paragraph.
There is a theory which states that if ever anyone
discovers exactly what the universe is for and why
it is here, it will instantly disappear and be replaced
by something even more bizarre and inexplicable. There is
another which states that this has already happened.
(The Hitchhikers Guide To The Galaxy)
I write:
<![CDATA[
I will put a break line after this.<br>
Can you see the difference with the paragraph tag? <p>
]]>
You see:
I will put a break line after this.
Can you see the difference with the paragraph tag?
NB: There is no blank line after a line break.
I write:
<![CDATA[
<center> The text is centered!!! </center>
]]>
You see:
The text is centered!!!
I write:
<![CDATA[
<dl>
<dt> minor title (non indented)
<dd> indented text 1<p>
<dt> The Hitchhikers Guide To The Galaxy (excerpt):
<dd> "You know," said Arthur, "it's at times like
this, when I'm trapped in a Vogon airlock with a
man from Betelgeuse, and about to die from
asphyxiation in deep space that I really wish
I'd listened to what my mother told me when I was young."
<dd> "Why, what did she tell you?"
<dd> "I don't know, I didn't listen."
</dl>
]]>
You see:
- minor title (non indented)
- indented text 1
- The Hitchhikers Guide To The Galaxy (excerpt):
- "You know," said Arthur, "it's at times like
this, when I'm trapped in a Vogon airlock with a
man from Betelgeuse, and about to die from
asphyxiation in deep space that I really wish
I'd listened to what my mother told me when I was young."
- "Why, what did she tell you?"
- "I don't know, I didn't listen."
I write:
<![CDATA[
<ul>
<li> Anything that happens, happens.
<li> Anything that, in happening, causes
something else to happen, causes something
else to happen.
<li> Anything that, in happening, causes
itself to happen again, happens again.
<li> It doesn't necessarily do it in
</ul>
]]>
You see:
- Anything that happens, happens.
- Anything that, in happening, causes
something else to happen, causes something
else to happen.
- Anything that, in happening, causes
itself to happen again, happens again.
- It doesn't necessarily do it in
chronological order, though.
I write:
<![CDATA[
<ol>
<li> item 1
<li> item 2
<li> item 3
</ol>
]]>
You see:
- item 1
- item 2
- item 3
I write:
<![CDATA[
<pre>
Text typed between
those commands
will appear as is.
However I cannot see html tags
such as <b> this one </b>!
</pre>
]]>
You see:
Text typed between
those commands
will appear as is.
However I cannot see html tags
such as this one !
I write:
<xmp>
<![CDATA[
Text and html tags typed between
those <b> html tags </b> will appear as is.
]]>
</xmp>
You see:
<![CDATA[
Text and html tags typed between
those <b> html tags </b> will appear as is.
]]>
I write:
<![CDATA[
<hr>
]]>
You see:
I write:
<![CDATA[
<b> text here will be bold </b> <br>
<i> text here will be in italics </i> <br>
<tt> text here will be in typewriter text </tt> <br>
]]>
You see:
text here will be bold
text here will be in italics
text here will be in typewriter text
Special characters (some specific to html language,
some specific to a foreign language) can be displayed using a
special syntax.
I write:
<![CDATA[
> < & " <br>
æ é à Å <br>
© µ
]]>
You see:
> < & "
æ é à Å
© µ
See the ISO 8859-1 characters List for a more complete list of characters.
<![CDATA[
<a href="URL://host.domain/path/filename#destination"> destination text </a>
]]>
NB:
If you do not know what are paths, you might want to
visit this page .
You first need to define the destination text you want to jump to:
I will define "where I want to go!".
I write:
<![CDATA[
<a name="destination">where I want to go! </a><p>
]]>
You see:
where I want to go!
You can now define the link.
I write:
<![CDATA[
<a href="#destination"> If I click here, I will go to
where I want to go! </a>
]]>
You see:
If I click here, I will go to
where I want to go!
Several cases must be considered: whether your file is in your current
directory or somewhere else.
Use a
relative pathname:
I write:
<![CDATA[
<a href="file_current_dir.html">
Click here to see that this file is indeed in my current directory! </a>
]]>
You see:
Click here to see that this file is indeed in my current directory!
Use a
relative pathname:
I write:
<![CDATA[
<a href="subdirectory/file_subdirectory.html">
Click here to see that this file is in a subdirectory called "subdirectory"
of my current directory! </a>
]]>
You see:
Click here to see that this file is in a subdirectory called "subdirectory"
of my current directory!
Use an
absolute pathname:
I write:
<![CDATA[
<a href="http://www.usyd.edu.au/su/emu/filename.html">
This file is located on "extro" the Sydney Uni
server in the emu directory. </a><p>
]]>
You see:
This file is located on "extro" the Sydney Uni
server in the emu directory.
NB:
You can if you want, define a destination name
in the file you are linking to.
<![CDATA[
For instance, you could type:
<a href="http://tea.or.coffee/dir/subdir/filename.html#destination">
link to this page </a>
]]>
The following image formats are best to use:
gif and jpeg.
I write:
<![CDATA[
<img src="image.gif" alt="This is a sunset!"><p>
]]>
You see:
NB: alternate option <alt> displays the text entered
between the quotes when the image cannot be displayed.
I write:
<![CDATA[
<a href="big_image.gif"> <img src="image.gif"
alt="This is the same sunset!"></a>
]]>
You see:
I write:
<![CDATA[
<a href="document.html"> <img src="image.gif"
alt="Link to a Document"></a>
]]>
You see:
NB:
You can if you want, link your image to a document
(image, audio, html document) located on another
machine.
<![CDATA[
For instance, you could type:
<a href="http://tea.or.coffee/dir/subdir/image.gif">
link to this graphic </a>
]]>
Use the same syntax as for links
(i.e. <a href="oops.ext"> some text here </a>),
for sounds and movies; the filename extension (.ext) will be different.
For instance, to hear the sounds of the forest:
I write:
<![CDATA[
<a href="forest.au"> Play this sound </a>
]]>
You see:
Play this sound
For instance, to view the VisLab animation (an MPEG movie):
I write:
<![CDATA[
<a href="http://www.usyd.edu.au/su/vislab/opera.mpeg">
Look at the VisLab logo animation (MPEG 400 KB) </a>
]]>
You see:
Look at the VisLab logo animation (MPEG 400 KB)
- no overlapping tags: no "<b><ul>....</b></ul>"
but "<b><ul>....</ul></b>"
- do not embed a tag within an anchor:
no "<a href=...><h1>...</h1></a>"; however
"<h1><a href=...>...</a></h1>" is acceptable!
- avoid embedding different tags:
no "<i><b>...</b></i>"
- no large images
- check your links
- no 'click "here" to see my page about blah' but
"click here to see my page about blah" or 'that is
"my page about blah"'
Are you ready for intermediate level html?
Click here to access the "wysiwyg html: intermediate level"
or
Back to the introduction
