Home

Embedding Documents to a Webpage

   

Pictures on a Webpage

 

Introduction

Embedding consists of including a document inside a webpage. The other document (the one being embedded) can be text-based or not and it must display alongside the other parts of the webpage.

Editing a Picture

There are different types of graphics you can use on a webpage. One of the categories is a picture. For legal reasons (copyright, etc) and familiarity, the easiest pictures you can use are those that belong to you or to your customer (or the company you work for). Most of the pictures you will use are not always the right size. When that's the case, you may have to change the size of the picture. This depends on the application you are using.

Practical Learning: Editing a Picture

  1. In the html_public folder or the wattsaloan folder, create a folder named pictures
  2. Get on an Internet search engine such as search.com, Yahoo, Bing, or Google
  3. Do a search on the expression office worker
  4. Click a link labeled Images for office worker (or something like that)
  5. Locate a picture of a woman. Here is an example:

    Picture of Office Worker

  6. On your keyboard, press Print Screen
  7. Start your graphics application. If you are using Corel PaintShop Pro, start it and create a new file of any size
  8. Paste the picture in your application. If you are using Corel PaintShop Pro, press Ctrl + Shift + V (or on the main menu, click Edit -> Past As New Image)
  9. Using your graphics application, click the tool to make a selection and select the area that can isolate the woman. Here is an example:

    Picture Selection

  10. Copy the selection (you can press Ctrl + C)
  11. Start a new file in the same application and paste the selection. If you are using Corel PaintShop Pro, on the main menu, click Edit -> Paste As New Image.
    In the picture you are using, if the woman's face is directed to the left, change the orientation so she would look to the right.
    If you are using Corel PaintShop Pro, on the main menu, click Image -> Mirror -> Mirror Horizontal

    Picture Orieentation

    If you are using Windows Paint, on the Ribbon, click Rotate -> Flip Horizontal. Here is an example:

    Picture Orieentation

  12. Save the picture as watts1 in the pictures folder of the wattsaloan site. Select the appropriate extension. If you are using Windows Paint or Corel PaintShop Pro, select the GIF (or PNG) extension. If you are using Adobe Photoshop, use the JPG extension
  13. Create a second picture:
    • If you are working from Microsoft Windows and if you have Microsoft Office, start either Microsoft Word or Microsoft PowerPoint
    • If you are using Linux, start LibreOffice Draw
  14. Draw a rounded rectangle to the document:
    • If you using Microsoft Word or Microsoft PowerPoint, click Insert on the Ribbon. In the Illustrations section, click Shapes -> Rounded Rectangle
    • If you are using LibreOffice Draw, in the bottom toolbar, click the arrow of the Basic Shapes button and click Rectangle, Rounded

      Rounded Rectangle
    • Set the border to a thin weight:
      If you are using Microsoft Word, while the shape in the document is selected, click the Format tab on the Ribbon, then click Shape Outline -> Weight -> 1/4 pt
  15. Use the small yellow button in the top-left section of the shape to significantly reduce the round in the corners without completely eliminating them

    Rounded Rectangle

  16. Import the saved picture to the rounded rectangle. Make sure the rounded rectangle is selected on the document or the slide:
    • If you are using Microsoft Word or Microsoft PowerPoint. In the Format tab of the Ribbon, click Shape Fill -> Picture. Select the picture you had saved and click Insert
    • If you are using LibreOffice Draw, on the main menu, click Insert Image... Locate and select the picture you had saved. Click Open
  17. Resize the shape so that the woman is neither too large nor too thin (the goal is to make it proportional to the original shape)
  18. Resize the picture to a reasonable size. Here is an example:

  19. On your keyboard, press Print Screen
  20. Copy the selection (you can press Ctrl + C)
  21. In your graphics application, paste the picture:
    • If you are using Windows Paint, press Ctrl + C
    • If you are using Corel PaintShop Pro, on the main menu, click Edit -> Paste As New Image
  22. Make a selection that isolates only the rounded rectangle. Here is an example:

  23. Start a new picture and paste the selection
  24. Save the picture as watts2 in the images folder of the site and select the appropriate extension as mentioned earlier
  25. Use the same techniques to create two pictures (a large and a small/medium) for a man. Save them as heyman1 and heyman2. Save them in the images folder of the site and select the desired extension
  26. Use the same techniques to create two pictures (a large and a small/medium) for a man. Save them as bene1 and bene2. Save them in the images folder of the site and select the desired extension

Creating Graphics From a Font

One of the ways you can create small graphics or icons is by using a graphic font.

Practical Learning: Creating Graphics From a Font

  1. Start a word editor (if you are working from Microsoft Windows, if you have Microsoft Office, start Microsoft Word or Microsoft PowerPoint; otherwise launch Wordpad; if you are on Linux, start something like LibreOffice Writer Document)
  2. In the list of fonts, select a graphics font (if you are using Microsoft Windows, select Webdings)
  3. Set the font size to 14 (if the application has a zoom, keep it to 100%)
  4. Press the key that produces two rectangles or one (if you are using Webdings, press 2). Here is an example:

  5. On your keyboard, press Print Screen
  6. In your graphics application, paste the picture
  7. Using your graphics application, click the tool to make a selection and select the area where the symbol is. Here is an example:

  8. Copy the selection (you can press Ctrl + C)
  9. Start a new file in the same application and paste the selection. If you are using Corel PaintShop Pro, on the main menu, click Edit -> Paste As New Image
  10. If your application is equipped to do so, resize the picture to an approximate width of 350 (pixels)
  11. Save the picture as external and select the appropriate extension. If you are Corel PaintShop Pro, select the GIF (or PNG) extension. If you are using Adobe Photoshop, use the JPG extension

An Image Object

The most common object to embed on a webpage is a picture. The element used to display a picture on a webpage is named img. To do its job, the img element uses various attributes. As with other HTML elements, when adding the attributes, you can create them in any order of your choice.

The Source of a Picture

The most fundamental piece of information about an embedded document is its location. The source of a document indicates where the browser must retrieve it. The browser would then import the picture to display where the element is created. To support this, the img element has an attribute named src. This attribute takes a path that follows the same rules of the addresses of links. The name of the picture file must include the file extension. Most browsers support all the popular picture formats (gif, jpg, png, and bmp). Other browsers may support other particular formats.

An Alternate Description for a Picture

If the browser cannot locate or find the picture, it may display an empty area or an error. As an option, you should provide a discription of the picture. In reality, the description would help whether the picture displays or not and the description can assist those in need of more information about the picture. To support the description of the picture, the img element is equipped with an attribute named alt. This attribute takes any string or description of your choice.

The Dimensions of a Picture

It is a good idea to indicate to the browser how must physical screen space it will need to display the picture. To let you provide this information, the img element is equipped with two (self-explanatory) attributes named width and height. Each takes an integer (a natural number) as value, which should be provided as a string. The values are represented in pixels.

Practical Learning: Embedding a Picture in a Webpage

Here are the pictures we will use If you want to use them, right-click each and follow the options on the screen to save them. Save the pictures in the pictures folder of your website:

Catherine Watts Catherine Watts
Frank Heyman Frank Heyman
Justine Bene Justine Bene
Big Picture Big Picture Big Picture External Link
  1. From the root of the wattsaloan site, open the aboutus.htm file
  2. Change the file as follows:
    <html>
    <head>
    
    <meta name="author" content="Catherine Watts">
    <meta name="keywords" content="watts, personal, business, loan, about, us, wattsaloan, mission, statement, business, strategy, communitty, outreach">
    <meta name="description" content="This webpage describes Watts A Loan business. The page also provides information about the management and the leadership personnel of the company.">
    
    <title>Watts A Loan: About Us</title>
    
    </head>
    <body>
    
    <div align="center">
    
      <table width="960" height="110" background="images/bg1.gif">
        <tr>
          <td width="10">&nbsp;</td>
          <td>&nbsp;</td>
          <td width="30">&nbsp;</td>
        </tr>
      </table>
    
      <table width="960" background="images/bg2a.gif">
        <tr>
          <td width="10">&nbsp;</td>
          <td>&nbsp;</td>
          <td width="30">&nbsp;</td>
        </tr>
        <tr>
          <td width="10">&nbsp;</td>
          <td>
    
            <h1 id="top" align="center">About Us</h1>
    
            <hr>
    
          </td>
          <td width="30">&nbsp;</td>
        </tr>
      </table>
    
      <table width="960" background="images/bg2b.gif">
        <tr>
          <td width="10">&nbsp;</td>
          <td>
    
            <p><b>Watts A Loan</b> is a financial management business founded in 2002 
    by Catherine Watts. The company creates loans and lends money to people 
    as well as businesses. <b>Watts A Loan</b> combines innovation in financial 
    services, expertise in loan management, and specialization in particular 
    needs. The company&apos;s customers include regular people (personal loans, 
    vehicle and boat financing, etc), small businesses (business startup), and 
    organizations (commercial or <abbr title="Non-Governmental Organization">NGO</abbr>).</p>
    
            <p><b>Watts A Loan</b> started with one office. It has lately expanded and 
    is now represented in many communities. <b>Watts A Loan</b> has offices at 
    Wheaton Plaza (<i>mall</i>), at Montgomery Circle, and in Columbia. The 
    company plans to open new office in other cities while it is growing.</p>
    
            <p>Besides regular business activities, <b>Watts A Loan</b> is committed 
    to financial responsibility (<em>risk management</em>), research &amp; 
    development, and community outreach. The goals are to be financially 
    accountable and community oriented towards its customers and other 
    stakeholders.</p>
    
            <h2 id="mission" title="A sentence that defines why a company exists and what its goals are.">Mission Statement</h2>
    
            <h3>Our Mission</h3>
    
            <p>To build-up people who inspire.</p>
    
            <h3>Our Strategy</h3>
    
            <p>To be the most recommendable financial lending institution in the areas where its offices are located.</p>
    
            <h3>Our Ambition</h3>
    
            <p>To re-invent the way people interpret commercial lending.</p>
    
            <hr style="background: red;">
    
            <h2>Company Leadership</h2>
    
            <p><b>Watts A Loan</b> is lead by a team of business-minded and family-oriented professionals.</p>
    
            <table>
              <tr>
                <td colspan="2"><h3 align="center"><h3><b>Watts A Loan</b> Owner and <abbr title="Chief Executive Officer">CEO</abbr>: Catherine Watts</h3></td>
              </tr>
              <tr>
                <td><img src="pictures/watts2.gif" alt="Watts A Loan Owner and CEO: Catherine Watts" height="155" width="232"></td>
                <td><p><strong>Catherine Watts</strong> founded <b>Watts A Loan</b> from a 
    shining idea of creating personal loans that rebuild people&#39;s lives 
    and challenge other financial institutions. Although primarily aiming 
    to cater to individuals (<i>the personal niche</i>), Cathy quickly found 
    some individual personal needs and the increasing demanding world of 
    small businesses.</p>
    
                  <p>Catherine holds a Bachelor&#039;s degree in business management, a 
    Master&#x00027;s degree in banking processes, and an MBA. She has also attended various 
    international conferences on business management.<a href="pictures/watts1.gif" target="_new"><img alt="Catherine Watts - Bigger Picture" height="32" src="images/bp1.gif" width="29" border="0"></a></p></td>
              </tr>
            </table>
    
            <hr>
    
            <table>
              <tr>
                <td colspan="2"><h3 align="right">Marketing Director and Business Strategist: Frank Heyman</h3></td>
              </tr>
              <tr>
                <td><p><strong>Frank Heyman</strong> is a former business executive. His 
    r&eacute;sum&eacute; includes many major financial firms of different 
    types of businesses, including accounting firms, consumer services, 
    and Internet startups.</p>
    
                  <p>Frank holds a Bachelor&apos;s degree in financial accounting and a 
    Master&#039;s degree in banking strategies. Frank is in charge of the 
    <b>Watts A Loan</b> business orientation and financial goals. He regularly 
    conducts marketing seminars at local community colleges. He is also the 
    author of a very popular blog on marketing strategies, business growth, 
    performance analysis, brand loyalty, and merchandizing.
    <a href="pictures/heyman1.gif" target="_new"><img alt="Frank Heyman - Bigger Picture" height="31" src="images/bp2.gif" width="28" border="0"></a></p></td>
                <td><img src="pictures/heyman2.gif" alt="Marketing Director and Business Strategist: Frank Heyman" height="156" width="232"></td>
              </tr>
            </table>
    
            <hr>
    
            <table>
              <tr>
                <td colspan="2"><h3>Human Resource and Corporate Outreach Officer: Justine Bene</h3></td>
              </tr>
              <tr>
                <td><img src="pictures/bene2.gif" alt="Human Resource and Corporate Outreach Officer: Justine Bene" height="156" width="232"></td>
    <td><p><b>Justine Bene</b> manages <b>Watts A Loan</b>&#039;s human resources as 
    well as the company&#039;s community outreach. She is in charge of all hiring 
    procedures and personel issues.  When it comes to community outreach, 
    Justine ensures that the company is accountable to the community and the 
    environment.</p>
    
                  <p>Justine holds a Bachelor&#039;s degree in human resources and has 
    many professional certifications. Justine is a besuiness advisor to the mayor and 
    an active member of various local organizations whose goals are to design, present, and 
    promote the business advantages of the state, the county, and the city.<a href="pictures/bene1.gif" target="_new"><img alt="Justine Bene - Bigger Picture" height="34" src="images/bp3.gif" width="29" border="0"></a></p></td>
              </tr>
            </table>
    
            <hr>
       
            <h2 id="finances">Finances &amp; Revenues</h2>
    
            <p><b>Watts A Loan</b> is currently managing a budget of <b>$15,000,000</b> 
    and growing. The budget is shared among the company departments:</p>
    
          <table width="350" border="8" align="center">
            <tr>
        	  <td align="center"><b>Department</b></td>
      	  <td align="center"><b title="This section includes the budget allocated to each department">Revenues</b></td>
              <td align="center"><b title="This section shows the budget fraction available for each department of the company">Margin</b></td>
            </tr>
            <tr>
              <td title="The administration includes employees payroll, community services, etc">Administration</td>
              <td align="right">3,500,000</td>
              <td align="center">23.33%</td>
            </tr>
            <tr>
              <td>Loans/Services</td>
              <td align="right">9,000,000</td>
              <td align="center">60.00%</td>
            </tr>
            <tr>
              <td>Marketing</td>
              <td align="right">1,120,000</td>
        	  <td align="center">6.80%</td>
            </tr>
            <tr>
              <td>R &amp; D</td>
    	  <td align="right">1,350,000</td>
    	  <td align="center">7.33%</td>
            </tr>
            <tr>
    	  <td>Community Outreach</td>
    	  <td align="right">480,000</td>
              <td align="center">2.53%</td>
            </tr>
          </table>
    
          <hr>
          </td>
          <td width="30">&nbsp;</td>
        </tr>
      </table>
    
      <table width="960" height="50" background="images/bg2c.gif">
        <tr>
          <td width="10">&nbsp;</td>
          <td>
    
            <p align="center"><a href="index.htm">Home</a> | <a href="offices.htm">Offices Locations</a> | <a href="services/index.htm">Services</a> | <a href="process.htm">Loan Process</a> | <a href="https://www.sba.gov/sites/default/files/files/FY%202013%20AFR%20from%20CV%20Dec%2016.pdf" target="_new">SBA - Accountability <img src="pictures/external.gif" alt="SBA - Accountability - External Window" height="13" width="15"></a></p>
    
          </td>
          <td width="30">&nbsp;</td>
        </tr>
      </table>
    </div>
    
    </body>
    </html>
  3. Save and close the file
  4. From the services folder, open the outreach.htm file
  5. Change the file as follows:
    <html>
    <head>
    
    <meta name="author" content="Catherine Watts">
    <meta name="keywords" content="watts, personal, business, loan, community, outreach">
    <meta name="description" content="This webpage describes the community activities in which  Watts A Loan is involved.">
    
    <title>Watts A Loan: Community Outreach</title>
    
    <head>
    <body>
    
    <div align="center">
    
      <table width="960" height="110" background="../images/bg1.gif">
        <tr>
          <td width="10">&nbsp;</td>
          <td>&nbsp;</td>
          <td width="30">&nbsp;</td>
        </tr>
        <tr>
          <td width="10">&nbsp;</td>
          <td>&nbsp;</td>
          <td width="30">&nbsp;</td>
        </tr>
      </table>
    
      <table width="960" background="../images/bg2a.gif">
        <tr>
          <td width="10">&nbsp;</td>
          <td>
    
            <br>
    
            <h1 align="center">Watts A Loan: Community Outreach</h1>
    
            <hr>
    
          </td>
          <td width="30">&nbsp;</td>
        </tr>
      </table>
    
      <table width="960" background="../images/bg2b.gif">
        <tr>
          <td width="10">&nbsp;</td>
          <td>
    
            <p><b>Watts A Loan</b> is seriously involved in the communities where its offices 
    are located. In recent years, <b>Watts A Loan</b> invested in the purchase of 
    school supplies for various institutions in the area. <b>Watts A Loan</b> also 
    participated in the sponsoring of a 5K marathon.</p>
    
            <hr>
    
          </td>
          <td width="30">&nbsp;</td>
        </tr>
      </table>
    
      <table width="960" height="50" background="../images/bg2c.gif">
        <tr>
          <td width="10">&nbsp;</td>
          <td>
    
            <p align="center"><a href="index.htm">Home</a> | <a href="../aboutus.htm">About Us</a> | <a href="../offices.htm">Offices Locations</a> | <a href="http://managementhelp.org/businessfinance/#anchor1860217" target="_blank">Financial Management <img src="../pictures/external.gif" alt="SBA - Accountability - External Window" height="13" width="15"></a></p>
    
          </td>
          <td width="30">&nbsp;</td>
        </tr>
      </table>
    
    </div>
    
    </body>
    </html>
  6. Save and close the file.
    If you had set up a website and if you are working from your computer, upload the files now
  7. Preview the index.htm file from your website or from your computer, and click the links

Pictures on a Webpage

Pictures on a Webpage

 
 
 

Inline Frames

 

Introduction

A frame is a web page (a file with partial or complete HTML code) that is embedded (imported to display) inside another webpage. It is also referred to as inline frame. To get an inline frame in a webpage, create an element named iframe.

The Source of a Frame

In order to create a frame, you must have a webpage. You primarily create it using any of the HTML rules we have reviewed so far and others that we will see. That document is referred to as the source of the frame.

To let you specify the source of the frame, the iframe element is equipped with an attribute named src. The value of this attribute follows the rules of addresses of links.

The Size of a Frame

You can indicate to the browser how much physical space should be allocated to the frame. When it comes to the size of a frame, you can provide either or both the width and height of the frame. To let you provide this information, the iframe element is equipped with two attributes named width and height.

Scroll Bars for a Frame

A frame can contain almost any type of document. Graphic-based documents such as pictures have fixed sizes. Also, browsers allocate a default size to a frame. As a result, when the browser is asked to display something in a frame, the size of the object may be higher than the default. If that's the case, the browser may automatically equip the frame with one or both the vertical and horizontal scroll bars. Here is an example:

<html>
<head>
<title>Car Rental Company</title>
<head>
<body>

<footer>
  <iframe src="vehicle1.jpg">Voiture</iframe>
</footer>

</body>
</html>

To let you control whether the frame should display the scroll bars, the iframe element is equipped with an attribute named scrolling. The value of the scrolling attribute can be:

  • auto: This is the default value. It applies if you don't use the scrolling attribute. This values means that you let the browser decide whether the scroll bars are necessary
  • yes: This value means that the scroll bars should be displayed. This may depend on the browser. In Internet Explorer, if you provide dimensions sufficient to display the content of the frame, the browser will display a disabled vertical scroll bar. Otherwise:
    • If you provide a width that is not sufficient, the frame would be equipped with a horizontal scroll bar
    • If you provide a height that is not sufficient, the frame would be equipped with a vertical scroll bar
  • no: The frame will not be equipped with scroll bars and the user cannot scroll, even if the frame is not showing the whole content

If a frame is equipped with one or more scroll bars, the visitor can scroll to a hidden area using the mouse (or the keyboard.

The Name of a Frame

If you are planning to refer to a frame many times, you can give it a name. This is not a requirement but a suggestion. To let you name a frame, the iframe element is equipped with an attribute named name.

   
   
 

Previous Copyright © 2015, FunctionX Next