Page 5: Examining the Program Structure of Images and Links

[ashimo]

Structure of a program in which an image or link is created

So, let’s examine the structure of the program that we just created.


1. Image display

Code:

{image source = {url curl_logo.gif}}

To display an image, use the image style. First, using the source property, specify the path to the image that you want to display using a url object. At this point, we can specify the width and height options to specify the displayed size of the image. When a height or width are not specified, the size of the image is calculated and the size set automatically.

Example of setting the height and width of an image

Code:

{image
    source = {url curl_logo.gif},
    width = 3cm,   || Specifies the width
    height = 4cm   || Specifies the height
}

---

The image isn’t displayed. What could be the cause?
If loading a specified image fails, then an image like that shown below is displayed.

• The path is incorrectly specified. The image does not exist
  
• The image file is damaged
  
• Access to the image has been refused
  

Below are some possible causes for this failure. If the display of an image fails, check the above points

---

2. Creating “commented-out” text

Code:

||Link to Curl home page

Immediately before the word 'Link' is the character sequence "||". Whenever "||" appears, the subsequent text on that line is displayed in green in the source-code editor. This green text is referred to as being “commented-out.” At runtime, such text is neither interpreted nor displayed. This feature lets us, for example, write memos within a program, or leave (rather than delete) any changed sections. By using “|# ～ #|”, we can comment out a block of text containing more than one line.

Example of commenting-out text

Code:

Hello Curl ||  1 line is commented-out
{text
    color = red,
    Hello Curl!
    |# Multiple lines are commented out
       This section is
       neither interpreted nor displayed.#|
}

---

The "Comment Out" shortcut key
In the IDE, select the lines that you want to comment-out, and then press the F8 key. The selected lines are automatically commented out. The commenting-out can be lifted from a range of text by selecting it in the same way, and then holding down the “Shift” key and pressing “F8.”

---

3. Creating a link

We can use the link style to create a hypertext link. We use href to specify the url to which we want to link. Then, after inserting “,” as a delimiter, we can specify whatever we want to display as the hyperlink.

Code:

{link href = {url http://www.curl.com/}, Curl home page is here}

Usually, the site to which we are linking will be displayed in the same browser window but, by using the target option, we can also open the page in a new browser window.

Code:

{link
    href = {url http://www.curlap.com/},
    target = _blank,
    Curl home page is here
}

---

IDE Help

In addition to the editor functions, the IDE offers many other functions. Among these is the Help Document Display function. You can open the Help Documents from the IDE "Help" menu. The contents of the Help are exactly the same for both the Personal and Pro versions. First, let’s take a look at the Help by selecting “Curl IDE Help” from the “Help” menu. The Help Documents contain four Curl documentation libraries. This Help gives you access to a huge amount of information about Curl.



The document viewer is divided into two main areas. The left-hand side of the screen is the Navigation pane, while the right-hand side is the Contents pane. The Navigation pane has three tabs, namely, “Contents,” “Index,” and “Search.” The tabs allow you to retrieve information from the documents, but each in a different way.



With the “Index” and “Search tabs, you can use the “Search Range” drop-down list to specify the documents to be searched. A particular feature of the Curl Help is that it contains many executable sample programs. And, the Help also provides the source code for many of those samples. You can thus modify the code directly and then confirm the operation of your modified code. Let’s try editing some source code, and then make a check by executing the code.


After editing the source code, we can simply click the Execute button to see the effects of our changes in a pop-up window.