RapidWeaver FAQ - Basic HTML Codes knowledge base
Here you will find some very useful HTML Codes knowledge...
Even using RapidWeaver you will find yourself working with HTML codes. Especially following some of the tutorials on this website or in my E-Book which are a little more advanced but don't be scared! Here I will discuss some basics about HTML and tell you where to find certain informations when needed.
Before we start I think it is important for you to know that when you open a certain tag you also have to close it
is closed with
, ... except for some few codes like
(you will read what these codes are used for in this chapter).
<img src="URLofTheImage" style="width:200px; height:500px;">
where URLofTheImage has to be replaced with the URL of the image. To know how to upload an image and find out its URL read How to upload files. Also have a look at Stylings for borders.
How to make links and image-links
<a href="URL of the page to open" title="Title of the link" target="_top">Link text</a>
In some codes you have to use apostrophes/single quotes ' instead of quotes " when adding a link code. Hence use:
<a href='URL of the page to open’ title="Title of the link" target='_top'>Link text</a>
Title of the link is what displays when pointing the mouse over the link
Link text stays for the text displaying as a link. Alternatively if you want to use an image instead of text as the link replace Link text with the code to add an image:
<img src="URLofTheImage" style="200px; height:80px; border:0px;">
<a href="URL of the page to open" title="Title of the link" target="_top"><img src= "URLofTheImage" style="200px; height:80px; border:0px;"></a>
where URLofTheImage has to be replaced with the URL of the image. To know how to upload an image and find out its URL read How do I upload a file which is not added directly to RapidWeaver and what will its URL be?
Note the border:0px in the code. With image-links in some browsers you get a blue border around them. This way the browser tells people that this image is a link. By adding border:0px to the img code you can keep this blue border from appearing. Also have a look at Stylings for borders.
Links on the web can have different targets:
target="_self" means that it opens in the same area as the page the link is on. If you have such a link in an iFrame it opens the page only in the iFrame area.
target="_blank" means that the link opens in a new window.
target="_top" opens the linked page in the same window as the page the link is on. If you have such a link in an iFrame the link does not only open in the iFrame. Instead it opens in the full size of the window.
Stylings for fonts and text formatting
How can I change the font, the size and color of a text in HTML?
<div style="font-family: Arial; font-size: 12px; font-weight:none; font-style:none; color:#000000;">Your content</div>
font-family:"Arial"; Have a look at the following page to see which possibilities there are: http://www.dev-archive.net/articles/examples/font-family.html
font-size: 13px; The higher the number the bigger the size of the displaying text. You can also replace px with pt if you prefer.
line-height: 30px; If you want to increase the spacing between the lines you can add the line-height parameter to your style
font-weight: none; Enter none or bold
font-style: none; Enter none or italic
color: #000000; Change the text-color by changing the color designation as explained in the previous subchapter
How can I change the font, the size and color of only part of the text?
Instead of using a
<span style="font-family: Arial; font-size: 12px; color:#000000;">Your content</span>
How can I change the font, the size and color of a paragraph only?
Paragraphs in a text are marked as
Of course you can style the font in a paragraph by using this code:
<p style="font-family: Arial; font-size: 16px; font-weight: none; color:#000000;">Type your text here</p>
You can have multiple paragraphs in a text and each of them can have its own styling applied if you want.
What about text alignment?
For text alignment you can use text-align in the style part of either a
or a paragraph.
<div style="font-family:Arial; font-size:16px; font-weight:none; color:#000000; text-align:justify;">Type your text here</div>
justify results in the text filling in the entire area, you can also use left or center or right
What about text decoration?
<span style="font-family:Arial; font-size:16px; font-weight:none; color:#000000; text-decoration:underline;">Type your text here</span>
text-decoration:underline; of course causes the text to be underlined. You can also choose overline or line-through or combine overline and underline as text-decoration:overline underline;
Bold, Italic and Bold italic
will make your text appear as bold. It is recommended to use the first method since the second one isn’t considered to be a web-standard.
will make your text appear as italic. It is recommended to use the first method since the second one isn’t considered to be a web-standard.
Combine the two codes for bold-italic
It is important to have an opening tag and a closing tag. As you see above the closing tag contains a / in addition to the tag which tells “the effect ends here”
Color-codes and designations
There are various ways to define colors on the web. The most used one is a # followed by a 6-digit-code made of letters and numbers.
#000000 stays for black, #ffffff for white, ... Codes for other colors can be found here http://www.w3schools.com/html/html_colors.asp
Or in RapidWeaver itself open "Colors” window and select “Web Safe Colors”. Scroll & find the desired color. Near the color you will find a 6 character alpha-numeric code for that color (example: white equals FFFFFF). That’s the code you need. Remember to put # in front of it (if you want white you would have to put #FFFFFF in the code).
Otherwise colors are sometimes also defined by just typing in their names like “black”, “white”, ...
Another way is using RGB Decimal designations like (204, 204, 204) for light-gray. In that case refer to http://html-color-codes.com/rgb.html
You will find some more very useful Basic HTML Codes knowledge in the free sample of my RapidWeaverFAQ.org E-Book which you can download here for free.
This FAQ is also discussed in my RapidWeaverFAQ.org E-Book (sample)
RapidWeaverFAQ.org - Tutorials, Tips & Tricks is made with RapidWeaver and for RapidWeaver.
It's an EBookStoreToday.com company. It's presented by Cédric Giger and hosted by HostGator.com
Thank you for visiting and supporting my website,
- Cédric -