Scribd Logo
Upload

Welcome to Scribd!

  • Images&Links

    Uploaded by

    Ummu Mohammed Tukur
    4 views23 pages

    Original Title

    4. Images&Links

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    4 views23 pages

    Images&Links

    Uploaded by

    Ummu Mohammed Tukur

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 23

    Creating Web Images

    Creating Web Images


    A bit different from creating images for output on paper Six main factors distinguish them:
    1.

    2.
    3. 4.

    5.
    6.

    Format Colour Size/resolution Speed Transparency Animation

    6 factors that you keep in


    mind as you create Web pages

    Format
    Web accessed by Macs, Window-based PCs, Unix machines and etc Two most widely used formats are on the Web

    GIF
    JPG PNG

    Netscape and Explorer can view all three format

    Color
    24-bit @ true color monitor 16,777,216 colors 16-bit monitor 65, 536 colors 8-bit monitor 256 colors

    Size & Resolution


    Computer images are measured in PIXELS 640x480 pixels how BIG is that?

    Printer at 200 ppi (pixels per inch) 3.2x2.4 inches Web the image depend on monitor 86 ppi 7.5x5.5 inches (19x14 cm)

    The higher the resolution, the more pixels

    Web page designers, tend to keep their pages under 600 pixels wide, so that viewers can see the entire contents of the page without scrolling horizontally

    Speed
    How can you keep download time to a minimum??? small picture The larger an images file size the longer it takes

    Transparency

    Important for 2 reasons:


    You can create complex layouts by making one image move behind another 2. You can take advantage of transparency to give an image a non-rectangular outline, adding visual interest to your pages
    1.

    Animation
    Moving images GIF Flash

    Images

    Images are placed in Web documents using the img tag This tag is empty, and therefore has no closing tag The tag is < img >, < img > by itself is pointless-- it will do nothing At the very least, you need to let the browser know where to find the image that it's supposed to place in the document. In order to make the img tag work, you need to use an src attribute src stands for "source," as in, "the source of this graphic. The value of src is the URL of the graphic you want to have displayed on your Web page. Thus, a typical image tag will take the form: <

    img src ="URL of graphic">

    images.ht m

    Inserting Images on a Page

    The location of the image


    <img src="Winter.jpg"/>

    Offering alternate text


    Add

    descriptive text that will appear of the image does not

    <img src="Water lilies.jpg" alt="water lilies"/>

    Specify SIZE of the image

    Within img tag, after src attribute, type width=x height=y (in pixels)
    <img src="Sunset.jpg" alt="sunset" width="150" height="100"/>

    Links

    Starts with <a> and ends with </a> Cannot use the <a> tag by itself, because it doesn't do anything.

    You'll need to enhance the <A> tag with attributes like..

    href

    Stands for hypertext reference, A way of saying, "The location of the file I want to load." Most anchors are in the form <a href="URL">, where URL is the location of the resource to which you want the link to point.

    Linking Thumbnails to Images


    If you have a particularly large image, you can create a miniature versions or thumbnail of it That link leads the visitor to the full size image

    <a href="C:\Documents and Settings\hanamunira\ My Documents\2007-S1\IP-ICT 1083-DSN4\mystuff \week two\Sunset.jpg"> <img src="ss.jpg" alt=sunset /> <br />

    Making Images Float

    Image float along side of your web page, with text and other elements wrapping around the other
    <img src="Blue hills.jpg" align="right" alt="bluehills" width="150" height="100"/>

    as

    default LEFT align RIGHT or LEFT

    <!-- making image float --> <p> <img src="Blue hills.jpg" align="right" alt="bluehills" width="150" height="100"/> <img src="Blue hills.jpg" align="left" alt="bluehills" width="150" height="100"/>

    </p>
    <center> <img src="Blue hills.jpg" alt="bluehills" width="150" height="100"/> </center>

    Stopping Element from Wrapping

    Image will appear at the end of the image

    <br clear=right />

    Adding Space around an Image

    Use deprecated vspace and hspace attributes to add a buffer around the image

    <body> <h1> MAIN TITLE </h1> <img src=image1.jpg align=right width=200 height=350 alt=an IMAGE vspace=15/> <br clear=right /> <p>This IMAGE1 are align to the RIGHT of this text</p> </body>

    Aligning Images

    align attribute is for aligning images with text

    <img src=tall.jpg alt=tall image />default <img src=square.jpg align=texttop alt=square /> texttop <p><img src=tall.jpg alt=tall image />default <img src=square.jpg align=top alt=square /> top</p> <p><img src=tall.jpg alt=tall image />default <img src=square.jpg align=middle alt=square /> middle</p> <p><img src=tall.jpg alt=tall image />default <img src=square.jpg align=absmiddle alt=square /> absmiddle</p> <p><img src=tall.jpg align=texttop alt=tall image />texttop <img src=square.jpg align=bottom alt=square /> bottom</p> <p><img src=tall.jpg align=texttop alt=tall image />texttop <img src=square.jpg align=absbottom alt=square /> absbottom</p>

    1. 2. 3. 4.

    5.
    6.

    Texttop aligns the square with the highest text in the line Top align the square with the highest element in the line Middle aligns the middle of the square with the middle of the text Absmiddle aligns the middle of the square with the middle of the largest item in the line Bottom aligns the bottom of the square with the baseline of the text Absbottom aligns the bottom of the square with the bottom of the largest item in the line

    Adding Horizontal Rules

    One graphic element that is completely supported by the majority of the browsers is the horizontal rule

    <body> <hr size=20 width=80% align=center noshade=noshade /> </body>

    Break 5 !
    links

    You might also like