TIPS ABOUT LINKS AND TARGETS
Setting targets - Build and check your targets - Using iframes - Exercise


SETTING TARGETS INTO A PAGE WITH FRAMES

Suppose that we have some pages that we want to be put into the page divs and an iframe ito each div. Here we have this example of page zones just to show how to magage our links
    header logo at the screen top  
   

name "left _place"

THEME
1

Item 1

Item 2

item 3

item 4

 

here we send
different theme menus

DIV ID and DIV name "right_place"

We want put here one of some pages that we send from our left menu

click item 1 sends page 1 to "right_place"

clicking item 2 sendspage 2

clicking item 3 sends page 3

clicking item 4 sends page 4

The other menu has links leading to other main theme pages or simply puts a left menu with a different THEME


Theme1        Theme 2        Theme 3

send to theme menu

 

this zone in black is the screen zone where put all the other DIVs

FIGURE 1. Screen splitted with DIVs
To highlight that one area is contained in another area, let's leave a border between the zones


PROCEDURE: let's resume by our editor the last htm page that we have previously prepared , and write the divisions (DIV) in their places between <BODY> ... </ BODY> described by a stylesheet set in the <head>... </head>. It is.

<link href="mystylesheet.css" rel="stylesheet" type="text/css" />

The nested zones can't work properly if you don't assign them their own properties, that is, at least width, lenght and position. There we have to assign many other properties, according to our specifications. All such properties are assigned by this linked CSS.

. A general expression that calls a page is

<a href="page 1.htm" target="right_place" >Item 1</a></li>

that is, the title Item1 linked to the page nemed page1_htm will fall into the target named right_place. Here is supposed that all the pages involved are into the same folder.

This statement can be appllied however the item titles are written. For example let's say that

a) the page containing the menu is simply made with <p>.... </p>tags

We will have in the page theme 1.htm containing the THEME 1 items

<p style= "...."><a href="page 1.htm" target="right_place" >Item 1</a></p>

<p style= "...."><a href="page 2.htm" target="right_place" >Item 2</a></p>

<p style= "...."><a href="page 3.htm" target="right_place" >Item 3</a></p>

and so on ....


b) the themes menu can send to change and replace THEME 1 with another

We will have in the page theme 1.htm containing the THEME 1 items

<p style= "...."><a href="theme 1.htm" target="left_place" >Theme 1</a></p>

<p style= "...."><a href="thme 2.htm" target="left_place" >Theme 2</a></p>

<p style= "...."><a href="theme 3.htm" target="left_place" >Theme 3</a></p>

and so on ....


b) The links of the upper upper Menu of Themes can also send to change and replace the entire main page with another one. In this case we will open a new page each theme:
Of course the new main page can be cloned from the first one, and if there's sometjong different the initial content of each frame must be defined.
For example if we open mainpage1, is better to assign page 1.htm to the right side and menu 1 .to the left side In this case the target must be set to '_top'

In fact if we simply change the menu, unless we use a script, we cannot change the page which at that moment stands at right, and we have to click an item from the the new left side menu to change it.

that is, the title theme1 linked to the page named theme 1.htm will fall into the target named left_place. Here is supposed that all the pages involved are into the same folder

With regard to DIVs it's preferable to assign 'speaking names', That is, indicating by its name the position and function of each single DIV. Here I have given the names DIV in my language..


BUILDING AND CHECKING OUR TARGET

There are different possibilities of using links

  • The default link targets of links are
    • "_top",         the linked item shall open into the same window
    • "_blank",     the linked item shall open into a new window
    • "_self"         The linked item shall open into the same zone

  • The targets that we set in the same page.that is
    <a name="EC" id="EC"></a> let's say these are "named anchors"
    they are clalled by menu items that are into the page itself, for example
    <a href="#EC" target="_self"> Build and check your targets</a>
    in this case the page will slide down (or up) to the named anchor point
  • the target we set to call pages into named zones, that is the ones we have described up here
  • the target we set to call from a menu, not only pages into named zones, bul also when we want the point to be shown into the called page.

    lets take the upper example when ckicking the menu's item1 we send to the right_place ·the page page1.htm

    <p style= "...."><a href="page 1.htm" target="right_place">Item 1</a></p>

  • if we want to reach a point named P1 of page_1.htm we have to write

    <p style= "...."><a href="page 1.htm#P1" target="right_place" >Item 1</a></p>

    Of course, firts we must have set the point P1 as a "named anchor" P1 into the page. In this way, we open page1.htm into right_place at the point P1

    <a name="P1" id="P1"></a>

     

    WARNING . the references TAGs <a href=" ..."> ...</a> MUST refer to the relative positions of pages in the directory tree in espect of the position of your link.

    In the previous example if you have your menu pages in a subdirectory 1 level down the link will be

    <p style= "...."><a href="../page 1.htm#P1" target="right_place" >Item 1</a></p>

    If you editor allows you to see what happens when you change the link code, or allows to choose the property of the link intself, this isn't a problem.

    For more infos chek th item 'structurig a site' on this left-side menu

     

    ADDING IMAGES

    After removing background colors, we want to add the following elements in order,

    • A background image on the whole page. The image was taken from nternet and manipulated so as to mitigate the colors and reduce as much as possible the weight (for instructions refer to the relevant part of this site)
    • A background image in the left column. The image was taken from the internet and manipulated so as to fit the size and reduce as much as possible the weight (for instructions refer to the relevant part of this site)
    • A column on the right in div 'corpo' and related background images
    • A strip of images in the header. The images were taken from the Internet, manipulated to fit the size and pasted in to a strip (for instructions refer to the relevant part of this site)

    Examples of editing CSS with added images

    Click the button CSS element to modify

    CSS code modified

    1 body: the image roma-di-notte.jpg is added body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;background-image:url(../../../images/roma-di-notte.jpg);}
    2 #colonna-sinistra
    Adding a background image with lesser dimensions than the DIV that then is repeated up to fill the space
    #colonna-sinistra { width: 200px; height: 598px; position:absolute; background-image:url(../../../images/sanpietro1.png ) ; text-align: center; }
    3 #testata
    Adding a background image as above

    #testata { margin: 0px auto; top: 0px; width: 100%; height: 80px; position: relative; background-image: url(../../../images/testaroma.jpg);
    }

    4 ALTERING THE ABOVE CSS IN HEADER'S width TO 100%

    #testata { margin: 0px auto; top: 0px; width: 100%; height: 80px; position: relative; background-image: url(../../../images/testaroma.jpg);
    }


    TABLE 2

    Examples of editing CSS HTML page above. This allows you to edit in the same way all the pages linked to a style sheet. For example, changing the background images in CSS, it changes in the same way in all the pages that contain the link to this CSS

    ADDING ITEMS BY 'IFRAME'

    The 'iframe' is an element identified each with its own name, that enables the following functions:

    a) insert an .htm page within the 'iframe'

    b) insert an 'iframe' within a DIV

    c) dynamically change the page contained in it giving as address with the name of the 'iframe'

    For better understanding I give here an example graph using the pattern of the previous FIGURE 1, by inserting an IFRAME in each DIV

    we use DIV 'testata' to put an iframe here identified with name = "sopra" which in turn contains a page with logos and whatnot
    we use the DIV "colonna-sinistra" to put inside it an iframe identified as name = "sinist" which in turn it contains a page with a menu
    Inside the DIV 'corpo' we put another DIV

    We insert the DIV id = "colonna-destra" to put inside it an iframe identified as 'dest' ie name = "dest" which at first contains a first page.

    <DIV id="cornice">
    <DIV id="testata"></DIV>
    <DIV id="corpo">
    <DIV id="colonna-sinistra"></DIV>
    <DIV id="colonna-destra"></DIV>
    </DIV>
    </DIV>


    FIGURE 2 - setting 'iframes' into the page DIVs

    Here the style sheet modified with the addition of a right column, flanked to the left column  and with complementary width.

    <style type="text/css">

    body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;background-image:url(../../../images/roma-di-notte.jpg);}
    # cornice { padding: 0px; text-align: center; margin: 0 auto; }

    #testata { margin: 0px auto; top: 0px; width: 100%; height: 80px; position: relative; background-image: url(../../../images/testaroma.jpg);
    }

    #colonna-sinistra { width: 200px; height: 598px; position:absolute; background-image:url(../../../images/sanpietro1.png ) ; text-align: center; }

    #colonna-destra
    { width: 760px; height: 598px; position:absolute; left: 201px;
    background-image:url(../../../images/pansoff..png ) ; text-align: center; }

    #corpo { margin: 0px auto; border: 0px solid rgb(0, 0, 0); border-image: none; width: 980px; height: 600px; text-align: left; padding-bottom: 0px; position:relative;}

    </style>


    As you can see we have included a right column with a semi-transparent background-image (pansoff.png) which will allow a better sight of the text that we will write.

    We provide now to build pages for different frames, left to right. If you want to build a page to fit into the header, remember that here the height of the frame should not exceed 80px.

    A) Simple menu into the left column

    Let's take an example of the statement to be written between <div id = "colonna-sinistra"> ..... </ div> to add a menu named paginamenu.htm

    <div id="colonna-sinistra">
    <iframe id= "sinist" src="paginamenu.htm" margin="0" width="350" height="500" frameborder="0" overflow="visible" ></iframe></div>

    Initially in each 'iframe' we will have an fixed page. By clicking a link in the left column of the menu you can change the page to the right column by assigning as 'target' (target) the name of the iframe entered the right column. Here is the link of the menu item that brings into the right column iframe a file called 'pagmissione.htm'. The insertion occurs when you click a link from the menu.

    <a href="pagmissione.htm" target="dest" accesskey="M">Co<u>M</u>e Funziona</a>

    Let's build at first the menu into the left column, and after a few pages to be included on the right column byr clicking links assigned to each item in the menu on the left.

    Table: elements to be included into the IFRAMEs

    Click the button Item

    CSS and HTML code

    1 paginamenu.htm
    page containing menu items to use into an iframe named "sinist" iinto the DIV "colonna-sinistra"

    body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;}
    table {  table-layout: fixed; width: 200px; border:thin; border-collapse: separate; border-spacing: 5px; background:white;
    border-radius:10px; column-width:200; white-space:normal;
    background-size:auto; }

    td {background-color:#06F; color:#FFF; font-family:Cambria; font-weight:bold; width:200px; border-radius:10px; height:35px; alignment-baseline:middle; padding-left:10px; padding-top:3px;}

    2 pagmissione.htm
    page to put into the iframe named "dest" into the DIV "colonna-destra"
    CALL THE PAGE AND SEE YOURSELF HOW IT IS MADE THE HTML CODE. The style sheet is embedded in the head of the page. You could also separate it in another linked style sheet
    3

    With these statements we put into the page of Figure 2
    1) the menu 'paginamenu.htm' by the iframe 'sinist'
    2) The page 'pagmissione by ' iframe 'dest'

    <div id="cornice">
    <div id="testata"></div>
    <div id="corpo">
    <div id="colonna-sinistra"><iframe name="sinist" src="../../software/esempi/opere/paginamenu.htm" margin="0" width="100%" height="100%" frameborder="0" overflow-style="visible" scrolling="no" vspace="80"></iframe></div>
    <div id="colonna-destra">
    <iframe name="dest" src="../../software/esempi/opere/pagmissione.htm" margin="0" width="760" height="100%" frameborder="0" overflow-style="visible" scrolling="no" vspace="80"></iframe>
    </div>

    </div>
    </div>

    TABLE 3: Elements to be included in the iframes

    To insert an iframe in a DIV must write between <DIV> ... </ DIV> a statement like the following:

    • assign the name (name) to the frame, in this case name = "dest"
    • put in the frame the desired page with the statement
      src = "../../ software / examples / works / pagmissione.htm"
      where in this case we recall the page pagmissione.htm. See above code in blue.
    • assign margin. size, and other  congruent characteristics of the frame
      <Iframe name = "dest" src = "../../ software / examples / works / pagmissione.htm" margin = "0" width = "760" height = "100%" frameborder = "0" overflow-style = "visible" scrolling = "no" </ iframe>

    When by menu you want to put a page inside an iframe just give the page address with the target the name of the target frame.
    Here we've used iframe inside a DIV, but there may be DIV inside an iframe, or nested iframes. The language XHTML is very versatile and easy. Just enough understand the mechanisms. 

    EXERCISE to try if I explained well

    1. Prepare new folders for your pages as on Figure 1_1 (Par: Setting a page)
    2. Open pressing the button 3 in the above table 3 and try to operate the menu, to check if the pages work correctly.
    3. 'Save as' with a name of your choice the browser page to the folder 'Principale' that you have prepared. This shall be the start page, that is the main page. The browser should create another subfolder that contains all the files referring to the saved page. You can open with the editors all the files related to the page and also to see the saved pictures .
    4. Drag all the images files into the folder named 'images' from the files folder created by your browser.
    5. Drag all the .htm files into the folder named 'archives' from the files folder created by your browser. Let untouched the start htm file under the folder 'principale' (Main)
    6. Drag all the .css files into the folder named 'CSS' from the files folder created by your browser. Othewise you can recreate it with the editor.
    7. In the main page head delete the stile text and replace it with a link to the stilesheet file that you've created before into the style's subfolder.
      <link href=".CSS/mycssfile.css" rel="stylesheet" type="text/css" />
      where the address of the .css file shall drive the interpreter to take the file where it is resident, starting from the page HTML that calls it.
    8. REPEAT ANALOGOUS OPERATIONS 4 - 7 TO EVERY OTHER HTM FILE IN THE SUBFOLDER ARCHIVES.
    9. NOW YOU HAVE TO CHANGE ALL LINKS TO EACH FILE, STARTING FROM THE MAIN ONE referring to the images path, htm files path css and you should change links to images.
    10. Open your main file with your browser

    After all this, il you can run your main page by the DIR 'Principale',  you have passed the exam. 

    NOTE:
    the address of the .css file shall drive the interpreter to take the file where it is resident, referencing from the page HTML that calls it. Remember that the statement 'target' of menu links must be that of the iframe name.

    Here I used iframes inside DIVs, but there may be als DIV inside an iframe. The language XHTML is very versatile and easy. You've just to understand the mechanisms.

    WARNING:
    HTM PAGES AND ALL FILES - CSS FIGURES SCRIPT ETC - ARE PICKED UP THROUGH AN ADDRESS. THAT IS THE POSITION AS IS COMPARED TO FILE WHICH CALLS. If there is NOT clear this concept, go to see the article 'structure a site'

     
    Lino Bertuzzi - Roma August 2014 translated 17/05/2015