HTML Basic

This tutorial is written for those who don't know about HTML & CSS. Even though iWeb users do not need to learn HTML code, we suggest you to take some minutes, then go over some important HTML attributes & tags. The reason why you have to learn HTML is that you will be needed to customize some widgets which work in the HTML snippets. Since web has numerous codes, we can't cover everything for web. Instead, we listed up important codes frequently used for customizing widgets or making use of HTML snippets.

Introduction

Actually, iWeb is so easy that users don't need to acknowledge HTML, CSS, and javascript. However, to make your iWebsite more professional, it is necessary for users to learn about how to manipulate HTML codes. Through a hundred of tutorials on this site, we have introduced many widgets such as slideshow, gallery, menu, user interface, and so on... If you don't understand HTML including CSS (style tag) basic, you may feel difficult to make them as your own styles. (We have also received many questions about very basic programming.) There is a really great reference website to help users learn everything about Web without any fees.

Through this tutorial, we will reveal several frequently-questioned codes. If you want to learn more about web in detail, please refer to this site: http://www.w3schools.com. This site is such a great text book for those who want to cover from HTML to jQuery, everything about web. We also refer to that site when we need to search very deep knowledge. Don't forget that iWEB is just a tool. All possibilities are up to your experience and skills about web.

Add Borders to div or images

<div style="border: 1px solid #color;">

If you want to add white color, 1px border to an image:
<img style="border: 1px solid #FFF;" src="image path" width="300" height="200" />
<img style="border: none;" src="image path" width="300" height="200" />

How to make borders have round-corners


<div style="-khtml-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;">

This tag will work no matter what a border exists. This style tag will work correctly on every browser except for iE6, 7.

About color for texts / div / table elements


<div style="background-color: white; color: black;">

As you can see, you don't always need to type hexadecimal for color like #000000. It is allowed to type "white", "black", "red", "blue", "navy", and "gray". There are more pre-defined standard colors. If you want to convert RGB color to hex, please visit this website, http://www.javascripter.net/faq/rgbtohex.htm
If you don't want to add any colors to background, add the color to transparent.

Hyperlink target window options

If you want to open a link on a new window:
<a href="URL" target="_blank">
If you want to open a link on same level frame:
<a href="URL" target="_self">
If you want to open a link on a top level frame: (for HTML snippet)
<a href="URL" target="_top">

Set hypertext & anchor color with hover effects

You must follow this order below. Otherwise it will not work. (Replace color & text-decoration as you want.)


a:link{color:#4088b8;text-decoration:none;}      /* unvisited link */

a:visited{color:#4088b8;text-decoration:none;}  /* visited link */

a:hover{color:#4088b8;text-decoration: underline;}  /* mouse over link */

a:active{color:#4088b8;text-decoration: underline;}  /* selected link */

How to align some elements vertically in the middle

It's impossible to align texts or images in the middle within <div>, <p> tags. Instead, you must use "<table>" elements, then insert contents into each cell. (1:1 matching within <td></td>)

<table style="border-collapse:collapse;vertical-align:middle;"><tr><td>content-A</td><td>content-B</td></tr></table>

The correct way to insert relative paths

This is the most-frequently asked tip:
The relative path should begin with "/". For example, if a "jquery.min.js" is placed in "js" folder on the root, the path should be "/js/jquery.min.js".

These are summarized lists from many users' questions. We will keep updating this tutorial when we gather something important for composing HTML & CSS.