Introduction into HTML
Table of Contents
Overview
LVW will guess what HTML you text requires, so if you type in your descriptions into the various LVW forms and add a few carriage returns, you will get something that looks OK. In most cases this will be good enough. You can use the Rich Text Editor (under user preferences) and that will produce reasonable HTML for you. Or you can learn a little about HTML.
HTML is a rich tool for formatting web pages and LVW will never create HTML as well as you could.
With HTML, a little knowledge can go along way.
There are a great many books and web pages dedicated to learning HTML - have a read by all means, but one of the reasons for using LVW is not to spend your time learning lots of techie things - every hour spent learning computer languages is a hour not veg*nizing.
I will just explain here the bare minimum to learn to make your pages that little bit better, if your interested.
Remember, that if you include any HTML in the descriptions you write in LVW's input forms, it will assume you know what you are doing and do no formating for you.
Examples are shown in a light yellow color. That color has no bearing on the HTML shown. I'm assuming you are using LVW's standard HTML editor.
What is HTML
HTML is a set of instructions that tell a web browser how to display text, pictures and more fancy things, on web pages. Combined with other technologies, such as CSS it can do some great things, but you will need to know very little, as LVW has done all the hard work for you. But by all means do something flash if you want to. Building web sites can be fun.
Breaking your text into paragraphs
Web browsers won't understand you pressing the return key as meaning 'I want to start a new line', you will need to tell it in HTML terms. It's simple - wrap your text in a HTML paragraph tags <p> and a <\p>.
E.g.
<p>Welcome to my web site. It's my fist and I'm doing very well.<\p>
<p>I can write HTML too!<\p>
HTML Editor tip - highlight the text you want to be a paragraph and press the Paragraph button.
If you want to put returns into your HTML to make it look prettier, then do so, but it will not change the way your browser displays it.
The above example will appear in your browser like this:
Welcome to my web site. It's my fist and I'm doing very well.
I can write HTML too!
Forcing a new line in your text
Use a <\br>.
E.g.
Welcome to my web site.<\br>
I can write HTML too!
Which will look like:
Welcome to my web site.
I can write HTML too!
Using headers
Use <h1> and <\h1> style tags.
E.g.
<h1>Welcome<\h1>
Which will look like:
Use h2 for a less important header, then h3 etc.
Using bold, italic and underscored text
Use <b> and <\b>.
E.g.
This is <b>bold<\b>
Which will look like:
This is bold
Italics are created similarly with <i> and <\i>, and underscores with <u> and <\u>.
HTML Editor tip - highlight the text you want to change and press either the Bold or Italics buttons.
Linking to other pages
Use the <a> tag.
E.g.
This is a link to another <a href="http://www.bbc.co.uk/news">web site <\a>.
This is a link to another part of my <a href="/news">web site <\a>.
Which will look like:
HTML Editor tip - highlight the text you want to be the link text and press either the HTML Link button.
Also see LVW_image IDs for linking to images.
Using images
Use the <img> tag.
E.g., (in its simplest form)
My finger<img src="/static_images/pointing_finger_01.png">
Which will look like:
There are problems with this. How do you get the images there? And you should tell the browser how big the image is or this will slow it down, and you should include a bit of descriptive text with the image for those who cannot see the image.
To get around this use LVW an image ID. Simply replace the filename in the src attribute for the LVW image ID, e.g. src="567". Also see the manual for more details.
To make your image sit in the appropriate position in respect to your text use the align attribute on the img tag.
E.g.,
My finger <src=""16" class="align_right">
Which will look like:
alignment can be 'align_left', 'align_right' or 'align_center' (I know, US spelling).
Some times images look a bit funny without a little bit of border around them in respect to their surrounding text. In this case use its style attribute.
E.g.,
<img src="16", class="align_left" style="margin:5px;"/>
Which will look like:
You can also use the LVW image OD to link to images, either with a text link or with an image thumbnail. The text link is created from the description you gave when you loaded the image into LVW.
E.g.,
Look at <src="t16"\>
These are my toys <src="i16"\>
Which will look like:
HTML Editor tip - Use the Image button.
Using CSS
Note, if you are considering using CSS you may wish to not use any alignment or style controls directly on your image as it will make your CSS more difficult.
Putting it all together
Assume you are writing the introduction description for your site. This is how the text will look if you do not use any HTML:
Welcome to Mull and Iona Veggies.
We are a small veggie group spread over the two lovely Isle of Mull and Iona. Small we may be but we do it in style.
Find out more about veggie friendly accommodation on and off the Islands and join us on our regular veggie adventures around the mountain and bays of North West coast of Scotland.
Now using some HTML:
Welcome to Mull and Iona Veggies.
We are a small veggie group spread over the two lovely
Isle of Mull and Iona. Small we may be but we do it in style.
Find out more about veggie friendly accommodation on and off the Islands and join us on our regular veggie adventures around the mountain and bays of North West coast of Scotland.
Your HTML would look something like this:
<p> We are a small veggie group spread over the two lovely <src="10" class="align_right" style="margin-left:5px;") Isle of Mull and Iona. Small we may be but we do it in style. </p>
<p> Find out more about veggie friendly accommodation on and off the Islands and join us on our regular veggie adventures around the mountain and bays of North West coast of Scotland. </p>
What you do NOT need to use with LVW
LVW wraps your HTML text with its own, the page headers, the menus etc. This means you have no need to, and in fact, should not use these tags (if you ever read about them):
<html>
<head>
<body>
Find out more
The web and your local book shops will be full of books on HTML. WebReference.Com is a good place to have a look around.
All browser have an option to View Source which will allow you to see the HTML code of the web page you are viewing. There is no reason not to learn from how others have constructed their pages, but directly copying someone else's code may be in breach of copyright.