|
|
 |
Contents of this page: Working with HTML | Text style | Font size and font color | Hyperlinks to external webpages | Hyperlinks to email addresses | Internal hyperlinks | Extra images | Downloadable documents | Horizontal lines | Advanced options
Working with HTML
HTML (HyperText Markup Language) is a computer language developed in the beginning of the 90's for linking up texts in documents with each other (so-called 'hypertext') in an easy way. Only later HTML has become the standard language for producing documents to be viewed on the World Wide Web.
The use of hand-made HTML codes in the texts in QwikZite offers many extra possibilities. Beneath you will find the most practical applications, which you can use without further knowledge of HTML. The colors indicate the following:
| | | The text in HTML encoding as entered at the backend. | | The visible result at the frontend. |
Only one aspect of HTML is essential to know: in general, HTML encoding of a specific function comprises a set of 2 codes:
- a startcode for the function: <function>
- and an endcode for the function: </function>
Do not forget the endcode!
Text style
| | This is a <B>bold</B> text. | | This is a bold text. | | | This is an <I>italic</I> text. | | This is an italic text. | | | This text is <B><I>bold and italic</I></B>. | | This text is bold and italic. |
Font size and font color
| | Text parts can be set in <FONT SIZE="2">size 2</FONT> or <FONT SIZE="3">size 3</FONT> if you wish. | | Text parts can be set in size 2 or size 3 if you wish. | | | This text is <FONT COLOR="#FF0000">displayed in red color</FONT>. | | This text is displayed in red color. | | | This text is <FONT SIZE="2" COLOR="#FF0000">in size 2 ánd in red</FONT>. | | This text is in size 2 ánd in red. |
Hyperlinks to external webpages
| | Transforming the text 'QwikZite' into a hyperlink to the web location 'http://www.qwikzite.com': | | <A HREF="http://www.qwikzite.com">QwikZite</A> | | QwikZite | | | Transforming the text 'http://www.qwikzite.com' into a hyperlink to the web location 'http://www.qwikzite.com': | | <A HREF="http://www.qwikzite.com">http://www.qwikzite.com</A> | | http://www.qwikzite.com | | | It is common usage to have external links being opened in a new browser screen, so visitors will not unintentionally leave your site. This is done by adding the TARGET attribute: | | <A HREF="http://www.qwikzite.com" TARGET="_blank">QwikZite</A> | | QwikZite |
Hyperlinks to email addresses
| | Transforming the text 'QwikZite Support' into a hyperlink to the email address 'support@qwikzite.com': | | <A HREF="mailto:support@qwikzite.com">QwikZite Support</A> | | QwikZite Support | | | Transforming the text 'support@qwikzite.com' into a hyperlink to the email address 'support@qwikzite.com': | | <A HREF="mailto:support@qwikzite.com">support@qwikzite.com</A> | | support@qwikzite.com |
Internal hyperlinks
| The page 'Working with colors' (http://www.qwikzite.net/index.php?page_id=74&style_id=) has been linked up with the topic 'Colors' (in the 'Topic' menu).
To make a hyperlink to this page, with the text 'More information about working with colors', you can confine yourself to: | | <A HREF="colors">More information about working with colors</A> | | More information about working with colors |
| When developing an open site (see Working with sitestyles), you can also add another sitestyle.
If you have linked up the homepage with the topic 'Home' (in the 'Topic' menu), you can refer to the homepage in another sitestyle by using: | | <A HREF="home&style_id=4">View this site in sitestyle 4</A> |
Extra images
| | To add an extra image on the webpage, of which the image file has been uploaded in the 'Foto' menu, you can insert the following encoding in the text: | | <IMG SRC="foto/20" WIDTH="200" BORDER="1" HSPACE="5" VSPACE="5" ALIGN="right"> |  |
- SRC: The ID number of the image in the 'Foto' table.
- WIDTH: The width (in pixels) in which you want to display the image; the height will adjust itself automatically.
- BORDER: the thickness (in pixels) of the border around the image; enter the value 0 if no border shall be displayed.
- HSPACE: Horizontal space (in pixels) between image and surrounding text.
- VSPACE: Vertical space (in pixels) between image and surrounding text.
- ALIGN: Situation of the image on the page. Possible values: 'right' or 'left'.
If a next text paragraph or a next image is unintentionally displayed beside instead of beneath the image, you can solve this problem by inserting a 'hard return' in the text:
| | <br clear="all"> | | | You can transform the image into a hyperlink, e.g. to the page 'colors', with: | | <A HREF="colors"><IMG SRC="foto/20" WIDTH="200" BORDER="1" HSPACE="5" VSPACE="5" ALIGN="right"></A> | | | You can also transform the image into a hyperlink to another image (such as a larger version of the same image) with: | | <A HREF="foto/15" TARGET="_blank"><IMG SRC="foto/20" WIDTH="200" BORDER="1" HSPACE="5" VSPACE="5" ALIGN="right"></A> | |
Downloadable documents
| | To insert a link in the text to a downloadable document, which has been uploaded in the 'File' menu, you can use the following encoding. In this case, reference is made to the file with ID number 1 in the 'File' table: | | Download: <A HREF="file/1">Suares info</A> | | Download: Suares info | | | It is common usage to add details about file type and file size, e.g.: | | Download: <A HREF="file/1">Suares info (MsWord, 20 kB)</A> | | Download: Suares info (MsWord, 20 kB) |
Horizontal lines
| | Inserting a horizontal line in the text with a thickness of 1 pixel and a width of 100%: | | <HR SIZE=1 NOSHADE WIDTH=100%> |
| | | Inserting a horizontal line in the text with a thickness of 3 pixels and a width of 50%: | | <HR SIZE=3 NOSHADE WIDTH=50%> |
|
Advanced options
A number of HTML features cannot be applied in QwikZite without some necessary adjustments. More information about these options is included in Advanced HTML options in the 'Tips & Tricks' section of QwikZite.Net.
Go to top | Text style | Font size and font color | Hyperlinks to external webpages | Hyperlinks to email addresses | Internal hyperlinks | Extra images | Downloadable documents | Horizontal lines | Advanced options
|
|
|