iWeb FAQ - Basic HTML Codes knowledge base

iWebFAQ.org

 

Here you will find some very useful HTML Codes knowledge...

La stessa pagina in italiano                             Die gleiche Seite auf Deutsch
 

Even using iWeb 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 <div> is closed with </div>, <strong> with </strong>, <iframe> with </iframe>, ... except for some few codes like <img> and <br> (you will read what these codes are used for in this chapter).



Images


Code:


<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


Link code:


<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;">


Resulting in:


<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 iWeb 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. Since HTML Snippets are iFrames if you have a link with target self in an HTML Snippet the linked page will only open and display in the area of the HTML Snippet.

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 or in an HTML Snippet the link does not only open in the iFrame or HTML Snippet area. Instead it opens in the full size of the window.


iWeb links per default are target self, you can get them to be target blank by checking the “Open in a new window” box. The only way to have a link in an iFrame opening in the entire window is to use HTML Snippets for the link _top



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 <div> use <span> like this:


<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 <p>The text</p>


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 <div> 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


<strong>Your text</strong> or <b>Your text</b>

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.


<em>Your text</em> or <i>Your text</i>

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 <strong><em>Your text</em></strong>


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 iWeb itself open the "Colors” window and select "Color Palettes" (third one from left). In the “Palette” drop-down menu 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 iWebFAQ.org E-Book which you can download here for free.




iWebFAQ.org - Tutorials, Tips & Tricks is made with iWeb and for iWeb.

It’s an EBookStoreToday.com company. It’s presented by Cédric Giger and hosted by HostGator.


Thank you for visiting and supporting my website,

- Cédric -


 

 

Share/Bookmark

Share/Bookmark