20 Mar 2011

iWeb 101 – The HTML Snippet

3 Comments iWeb 101

Another ‘in preparation for’ post this time to get you ready for the next post on All About iWeb; this time I want to explain how the HTML Snippet in iWeb works, and how it manages to allow all manner of different web-design magic display on your iWeb site. Of course, you don’t necessarily need to know all of this information before you add things to iWeb but it should give you a greater understanding of how your iWeb site works.

The easiest way of explaining how the HTML snippet works in iWeb is to imagine your iWeb page as a flat piece of paper as shown in the image below.

When you add an HTML snippet to your iWeb page, iWeb creates a completely new page upon which it adds the code you have pasted into the HTML snippet window. At the same time iWeb cuts a rectangular hole into your original iWeb page so that the new HTML snippet page can show through. This gives the illusion of all being the same page when in fact it’s not.

Your original page will still have its original name (eg. home.html) whereas the HTML snippet will be called something along the lines of  ‘widget1_markup.html’.

When you view your site in its folder, as explained in my previous iWeb 101 post, the new page that the HTML snippet has created does not actually appear as a new page amongst all the others. iWeb creates the page within the original page’s own folder; the one that contains the images etc.

Of course, adding HTML snippets can slow down the loading time of a page depending on the content of that snippet, and if you have too many on one page that can cause speed issues too, so be careful how you use them. That said, without the HTML snippet, adding interactive elements to our iWeb sites would be a lot more difficult.

Now you know how iWeb adds HTML snippets to an iWeb page you are all set for the forthcoming post which will explain how to add the popular Nivo Slider to your iWeb site. It’s coming soon.

Tags: ,
written by
AllAboutiWeb (AAi) is your one stop shop for everything iWeb. We provide tips, tricks and more to get the most out of your iWeb website. Follow us in twitter at @allaboutiweb
Related Posts

3 Responses to “iWeb 101 – The HTML Snippet”

  1. Reply Joel says:

    Hi everybody!
    Thanks for a great site, it has alredy helpt me allot!
    I just cant wait on getting to know how to add the Nivo slide, been trying but havent understod how to get it to work at all.

    Also been having a question I dont seem to find the anwser of anywhere. Is there by some means possible to make a site in iWeb and have a adminsite where you could change text in a “box” of that site without using iweb? For exampel if you make a box and list prices and stuff and you want to be able to change the price from any computer?
    Thanks for all help!
    Joel

  2. Reply Kerry Kline says:

    Joel
    1) If you need help with the nivo slider, send me an email and I can help. Most of my iweb designs use it.

    2) You can edit any text box by opening the pagename.html file in a text editor and then save it back to the server.

  3. Reply Scarlet says:

    Thank so much Tim for all your informative articles. If it weren’t for you I wouldn’t have found Kerry Kline who has helped me so much! Keep the information coming!

Leave a Reply