iWeb FAQ - Alternative HTML



HTML Snippets are great but they don’t add the code where it’s supposed to be. Is there any alternative to add HTML code?

La stessa pagina in italiano                             Die gleiche Seite auf Deutsch

Chapter 1: In short...

Chapter 2: Using MassReplaceIt (Recommended!) (Detailed tutorial and exercise. Follow it to see how it works!)

Chapter 3: Manually editing HTML (TextWrangler)

Chapter 1: In short...

What is Alternative HTML?

Alternative HTML is an alternative way to add HTML codes into your website's pages.

How does it work?

The concept works like a Find & Replace. You type some text into your page for example DogPictureGoHere, publish your site and after you published your site you open MassReplaceIt (freeware application) and tell it to search for DogPictureGoHere and replace it with the appropriate HTML code perhaps

<img src="URL to the image" style="width:200px;height:160px;">

So MassReplaceIt is nothing but a tool to perform Find&Replace actions. But it's much faster than doing it manually in a TextEditor or HTML editor.

Why not just use HTML Snippets?

Because for some things HTML Snippets simply don't work.

HTML Snippets don't add the code to the page you added the Snippet to. What they do is create a new page to which the code you entered in the Snippet is added to and this new page is then embedded into the page you added the HTML Snippet to with an iFrame.

Some codes however need to be added to the page itself and don't work when added in an HTML Snippet (like Tell a friend widgets).

Another reason is that since HTML Snippets are embedded with an iFrame they are fixed in size. Some codes however (like Drop down menus) need room to expand and again won't work in HTML Snippets.

Why use Alternative HTML? Why is it better?

Alternative HTML puts the code in the page where you want to have it (HTML Snippets don't). If you want to add the same code to multiple pages (perhaps a menu) and later need to edit if you're using Alternative HTML you just edit it once in MassReplaceIt. If you use HTML Snippets you have to edit it on each page. There is no way to have HTML Snippets inline (for them to move with text) so you always have to adapt their position when editing the content of a page. With Alternative HTML you can have the text to be replaced inline for it to move with the rest of the content. No need to reposition.

Chapter 2: Using MassReplaceIt (Recommended!)

The first solution is much better. Since the first solution is the one I do recommend you to use the tutorial is setup as an exercise. Best is you follow it and do it yourself step by step to learn how it works!

Basically you add some text to your page which later will be replaced with the appropriate HTML Code by MassReplaceIt with a Find&Replace.

Note that this works only by publishing to a folder (not by publishing from iWeb directly to a server)

1. Go here and Download MassReplaceIt (it’s free)

2. Open iWeb, go to File, New Site and choose White theme, Blank page. Rename the site MRI and make sure it gets published to a folder. Choose the Desktop as the publishing to location.

3. On the Blank page add a TextBox sized 516x387 (width:516px, height:387px). In this TextBox type "NASAGoesHere" (without quotes)

4. Publish the MRI site and you will see a file called "index.html" and a folder called "MRI" appearing on your Desktop

5. Open MassReplaceIt. Going to File, Preferences make sure you have the following setup:

Under Options

Under Mask choose All criteria and click on Add...

Search items whose "Filename"

"ends with" .html

Hit "Add".

6. Under Find...

In Find enter NASAGoesHere

In Replace you enter the following line of HTML Code:

<img src="http://iwebfaq.org/media/nasa.jpg" style="width:516;height:387px;">

7. Under Files add the MRI folder, either by hitting Add... and choosing the MRI folder or drag&drop the MRI folder from your Desktop into the area surrounded with blue.

8. Hit Replace

MassReplaceIt now looks in your files where it needs to replace something with code.

Once it has finished looking through your files hit Replace All and MassReplaceIt replaces the text on your page it has to replace with the code it has to replace the text with.

That's it. If you now go to the MRI folder on your Desktop and double-click the Blank.html file it will open Safari and you see this image

where in iWeb the TextBox appeared (the example only works if your computer has a working internet connection since it retrieves the image from my server).

2.1 FAQ about using MassReplaceIt...

1. Do I have to add an extra TextBox for each code or can I add the code to be replaced right inside my main TextBox?

No, you don't need to add an extra TextBox for each code. For Anchors it is recommended to add the text which needs to be replaced with the code right in the main TextBox. However for stuff like videos or photos or any things which need a certain amount of space to work properly it is recommended to add a TextBox with the sizes needed for the item to display properly since iWeb's pages are fixed length they do not adapt in length when content is added post-publishing. Hence add a TextBox to give the item the room it needs to correctly display.

2. How can I make sure a TextBox moves with my content when I add or remove text?

To fix it on a page copy and paste the TextBox in the main TextBox of your page. Now if you add text to the page it will move automatically with the page. No need to re-position the TextBox by hand every time you add or remove content on the page.

2.2 Notes about using MassReplaceIt in general...

- You can set multiple Find&Replace to a single query by clicking on

- Once you have setup all the Find&Replace you need go to File, Save Query As... give it a name and check the Make query the default box if you want. Saving the query saves you a lot of time since you don't have to re-add all the stuff every time you launch MassReplaceIt.

- If you want to add the same code to multiple pages just add the same TextBox to all the pages

- The good thing about using MassReplaceIt is that once you need to change the code you just change it once in MassReplaceIt for the changes to apply to all the pages

- The other good thing is that the code is where it is supposed to be: in the page itself.

- After running MassReplaceIt remember to upload the files to your server

- Re-run MassReplaceIt every time you (re-)publish from iWeb. Note that changes applied with MassReplaceIt are applied only to published files. They do not appear in iWeb itself.

- If you run MassReplaceIt and it said it worked but looking at the page on the web you still see the text-codes try emptying the cache of your browser (Sarai: Safari=>Empty cache) then reload the page.

At first glance it may seem to be extremely complicated and quite a hassle but it isn’t. To me it’s more than worth it and often also the only way you can go to add a certain feature (tear and drop down menus, Anchors, Statcounter and Google Analytics, Highslide JS, ...). It simply makes iWeb more advanced.

I usually make a Publish Entire Site to a folder from File menu. Run MassReplaceIt and use the Synchronize feature of Cyberduck to upload. This makes the whole process pretty fast. More about Cyberduck’s Synchronize feature on the Publishing and Hosting FAQ in this E-Book.

If you don’t like the idea of using MassReplaceIt to add HTML codes to your site you can also use chapter 1 of this page.

2.3 Troubleshoot about using MassReplaceIt...

If MassReplaceIt didn’t work. If MassReplaceIt didn’t find any of the TextBoxes to replace with HTML codes. First make sure you followed the tutorial and performed every step as I described it. Then read my MassReplaceIt & HTML troubleshoot page.

Chapter 3: Manually editing HTML (TextWrangler)

If you have only few pages and few codes to add one solution would be editing the HTML code manually post-publishing. If you have many pages and many codes to add use Chapter 1 of this FAQ instead!

1. Where you want to add the code on your page in iWeb add a TextBox and type some text in it like HereGoesTheCodeForTheGallery or something and publish the site.

2. Once you published the site open the published page (.html) where you want to add the HTML code to in TextWrangler.

- If you publish to a folder go to the folder where you publish to and open the page of interest in TextWrangler

- If you publish to a server connect to it via Cyberduck, select the page of interest, crtrl+click on it, choose “open with”, and select TextWrangler

3. Search for the spot where you want the code to be added (where you wrote HereGoesTheCodeForTheGallery or whatever). When you find the right place select the code you entered and paste the HTML code in the page instead of it.

4. If the instructions you’re following tell you to paste some code into the <head> part of the page search for </head> and paste the code which needs to go into the <head> part of the page right before the closing </head> tag.

Problem: Every time you publish you have to do it all over again. If you have a lot of codes and a lot of pages (and I do!) that’s pretty time consuming, thus that solution doesn’t work for me.

This FAQ is also discussed in my iWebFAQ.org E-Book (sample)

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 -