How to Make Kehilalinks Pages

Embedded Objects

Introduction

In this lesson, you'll learn how to embed objects such as Google maps, YouTube videos, and visitor counters in your pages. And you'll learn a little bit of HTML while you do it.


Adding Raw HTML Code

In this course, I've generally stayed away from explaining HTML because, if you aren't a programmer, HTML might be confusing. But sometimes, as you continue to improve your pages, you may need to at least be able to cut and paste some HTML commands. It is relatively easy in Composer to  insert HTML code when necessary, either on the "<HTML> Source" tab at the bottom of the Composer window, or using the "Insert HTML" window. The "<HTML> Source" tab shows you the raw HTML for your entire page, which can be intimidating, so here I'll explain how to use the "Insert HTML" window.

First, open a new Composer window and create a 1x2 table. We will insert our HTML code into a table cell to make it easy to delete the HTML if we make a mistake.

It is very important that, when you use the "Insert HTML" took, you always insert the HTML code into a table. That's because the "Insert HTML" feature doesn't let you edit the HTML commands after you insert them! If you don't use a table, when you make a mistake with the inserted HTML you will have to delete it in the "<HTML> Source" view, and that can be difficult to do if you aren't fluent in HTML.

Insert HTML windowNow click inside the left table cell so the blinking cursor is there and click on
    Insert -> HTML
This will open the "Insert HTML" window. In the big, empty white area, type
"<i> Hello World! </i>" (without the quotes), like in the example shown here.
Then click on the "Insert" button. You should see, in the formerly empty table cell, the words "Hello World!", italicized. The "<i>" and "</i>" are HTML commands that say to italicize the text between them.

Now click in the table cell on the right and open the "Insert HTML" window again, but this time type
"<center> Hello World! </center>".
Before you click the "Insert" button, see if you can guess what those HTML commands do. Now see if you were right.

Now delete the table and -- poof! -- the HTML that you inserted is gone.

 I strongly urge you, whenever you insert HTML code, insert it into a table cell.

Special Characters

In an earlier lesson learned how to use Composer's "Characters and Symbols" tool (Insert -> Characters and Symbols), but we saw that Composer supports only a few of the many possible characters and symbols. The default character encoding used in most recent browsers is called UTF-8. See https://en.wikibooks.org/wiki/Unicode/Character_reference/0000-0FFF for a list of the characters encoded using UTF-8. The code values are hexadecimal - base 16.

The Hebrew characters, for example, are found in the block 0590 - 05FF (see https://en.wikipedia.org/wiki/Hebrew_(Unicode_block) for a compact table). So, for example, the code for the Hebrew letter aleph (א) is 05d0, the code for the Hebrew letter bet (ב) is 05d1, and so on.

To insert special characters into Composer, you can simply copy-and-paste the characters from another web page. If you don't happen to have a web page handy to copy from, however, you can use Composer's "Insert HTML" feature to insert the code for a special character. To insert the Hebrew letter aleph (א) followed by a bet (ב), for example, you would insert the following HTML:
&#x05d0; &#x05d1;
Which looks like this (inserted into a table):
א ב

For each character, the "&#" tells a web browser that what follows is unicode , the "x" says that the code is hexadecimal, then the code is terminated with the semicolon ";".

Note that you can't simply type the codes in Composer, you have to insert them as HTML. Once inserted, you can use all of the text tools (bold, underline, italic, etc.) on the characters.

Inserting as HTML works, but copying and pasting is probably going to be much simpler.

Visitor Counters

Counters let you see how many people have viewed your web page. Counters display as images, but the images are really the output from a counting program on the web server. This means you won't be able to view the counter until you upload your page to the server.

One way to insert a counter for pages on the Kehilalinks site is to use "Insert->Image", with the following image location:
/cgi-bin/counter.exe?link=YourShtetl&style=odometer

Be sure that the "URL is relative" box is checked.

See where the word "YourShtetl" is highlighted in pink? Replace that with your kehila name. Don't leave it as "YourShtetl"!

Another way to insert a counter into your web page is to insert this HTML (don't forget to use "Insert -> HTML", to change the pink highlighted text to the name of your kehila, and to insert it into a table in case you make a mistake):

<img src="/cgi-bin/counter.exe?link=YourShtetl&style=odometer">

That HTML is, in fact, the same HTML that is generated by Composer when you use "Insert -> Image".

Here is what the image looks like: Example visitor counter

Note that the counter won't be visible in Composer or when you browse the file on your own computer. It only works after you upload your page to the Kehilalinks server and browse it there. That is because, as I mentioned earlier, the image is actually the output of a program on the web server. That program is only available to web pages on the same server. In Composer, and when browsed on your computer, the page can't connect to the program on the Kehilalinks server, so it will look as if the image URL is incorrect. Be sure to upload your page to the Kehilalinks server to be able to try this out.

You must use a different "link" name (i.e., where it says "YourShtetl" above) for each page where you want a counter, or else the counter will count every view of every page.  For example, I could use "Kovel1", "Kovel2", etc. for each of the pages on a Kovel Kehilalinks site. That would keep the counts separate for each page and  I could tell which page is visited the most and which is visited the least.

Be careful to use a "link" value that is unique to your site and that does not duplicate a name used by someone else. Using the same "link" value as someone else would screw up the count for you and for the other person because the count would be for both your page and the other person's page.

You can change the font of the numbers in the counter if you'd like. See http://www.Kehilalinks.jewishgen.org/documentation/counter.htm for more information.

Embedding Video

Many sites, such as YouTube, encourage you to embed video from their site into your page. These sites even give you the HTML code you need to use. For example, here is a link to a YouTube video about Lviv: https://www.youtube.com/watch?v=rMrLkDYKbvI. Click on the link where it says "Share", and then on the link where it says "Embed" to see the HTML code.

Here is the "embed" HTML code provided by YouTube for that video:

<iframe width="420" height="315" src="https://www.youtube.com/embed/rMrLkDYKbvI" frameborder="0" allowfullscreen>
</iframe>


Here is the video embedded in my page (I inserted the HTML code into a table, so the video is in a table -- can you see the border?):


Even though the video appears in my page, it is actually on the YouTube server. I didn't have to copy the video; the HTML code links to it.

Note that you have to browse the page to be able to see the video. You can't view it in Composer.

Embedding Maps

You will find that many different web sites offer some way to embed their content in your pages. The method of doing so is similar to how you did it for YouTube videos. Here, I'll show you how to do it on Google Maps. Other sites may have similar features.

First, on Google Maps, search for the place you want to have a map of in your page. For me, that's Kamen Kashirskiy. In the panel on the left side of the window, click where it says "Share" (I've shakily circled that in red next to a written, red "1" at the bottom of the screen shot on the left). That will open another window that gives you a choice of "Share link" or "Embed map". Click on "Embed map" (which I've also shakily circled in red next to a written, red "2").

Google map
 Google map embed

You can see the HTML for embedding the map. It starts with "<iframe". Select and copy all of the HTML. Insert the HTML into a table cell.

Here is the HTML that Google provided for a map of the area around Kamen Kashirskiy:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d317110.1622944059!2d24.726021724979276!3d51.61545750584391!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x472696f31fa48f1f%3A0xc62186f874952ed0!2sKamin&#39;-Kashyrs&#39;kyi%2C+Volyns&#39;ka+oblast%2C+Ukraine!5e0!3m2!1sen!2sus!4v1466787246940" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>

Here is what that HTML does when I insert it into my page (as with the video, I inserted the HTML code into a table, so the map is appears in a table):


You can click and drag the map, zoom in and out, and use all of the other Google Map features.

Once again, you have to browse the page in order to see the map. It won't show up in Composer. So don't panic if you've inserted the HTML in Composer and can't see the map. Just save and browse the page to see it.

Google Site Search

Google offers a free site search feature, which will search just a domain (or do a complete web search, if you want it to), but Google Search only works on domains, not folders. The domain of a web site is the part of a URL after "http://" and before the next "/". So, for example, the URL of my Kamen Kashirskiy site is "http://kehilalinks.jewishgen.org/Kamen-Kashirskiy/", but the domain is just "kehilalinks.jewishgen.org". In fact, the domain for all of our Kehilalinks sites is "kehilalinks.jewishgen.org".

Here's what the Google Site Search looks like (in the bottom cell of the table below). I've set it to search the entire kehilalinks.jewishgen.org domain, but I've added "Kamen Kashirskiy" as a default search term so that, unless someone deletes the term, it will be included in the search and, hopefully, find the pages on my Kehilalinks site:

Use the search term "Kamen Kashirskiy" along with your search term to search the Kamen Kashirskiy Kehilalinks site.
 
Google
Web Search Site Search

Google hasn't found my site yet (because it hasn't gone live), so this search won't turn up much. Try replacing "Kamen Kashirsky" with "Kovel" to see what that turns up in the search.

This is the HTML I inserted in the bottom cell of the table:

<!-- SiteSearch Google -->
<FORM method=GET action="http://www.google.com/search">
<input type=hidden name=ie value=UTF-8>
<input type=hidden name=oe value=UTF-8>
<TABLE bgcolor="#FFFFFF" align="center"><tr><td>
<A HREF="http://www.google.com/">
<IMG SRC="http://www.google.com/logos/Logo_40wht.gif"
border="0" ALT="Google"></A>
</td>
<td>
<INPUT TYPE=text name=q size=31 maxlength=255 value="Kamen Kashirskiy">
<INPUT type=submit name=btnG VALUE="Google Search">
<font size=-1>
<input type=hidden name=domains value="kehilalinks.jewishgen.org"><br><input type=radio
name=sitesearch value=""> Web Search <input type=radio name=sitesearch value="kehilalinks.jewishgen.org" checked> Site Search <br>
</font>
</td></tr></TABLE>
</FORM>
<!-- SiteSearch Google -->

You can copy and paste this HTML into a table to use it in your page. See the words "Kamen Kashirskiy" highlighted in pink? That is where to put the text that you want to have already in the search box. Be sure to edit the text when you are inserting the HTML!

Note about Internet Explorer

Internet Explorer is extremely cautious when it comes to embedded content. It may give a warning message and require you to explicitly allow it to display the embedded content, or it may simply ignore it and people who view your pages will not be able to see it. That's just one more example of how browsers are different and how you have to do your best to take that into account when you design and build your pages.

Assignment

Try out some of these features in your site. At the very least, add a counter to your home page, and maybe a Google site search.


Top of the page Back to the Course Outline

Copyright © 2009, 2010, 2012, 2013, 2014, 2016 Mark Heckman.  All rights reserved.    

 counter