WebkitSiteMD/Images.html at master · MrCoderMD/WebkitSiteMD · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Images</title>
    <link rel="stylesheet" href="siteCSS.css">
    <link rel="icon" type="image/x-icon" href="mdsitelogonobg.png">
</head>
<body>
    <header id="header">
        <iframe src="Header.html" id="headeriframe" frameborder="0"></iframe>
    </header>
    <nav id="nav"><div id="content" onclick="iframeshow()">&equiv;</div><iframe src="Navigation.html" frameborder="0" width="100%" height="30px"></iframe></nav>
    <iframe src="Links(iFrame content).html" id="iframe" frameborder="0" class="iframenoshow"></iframe>
    <section>
        <h1>Images</h1>
        <div id="prext"><a href=""><div class="prext">&lt;Previous</div></a>
        <a href=""><div class="prext">Next&gt;</div></div></a>
        <p>Sometimes, it is very hard to understand something with just a bunch of texts. Sometimes you nees an <b>Image</b> as well as to understand that</p>
        <p>Images help us to visualize some thing we want to understand. Many Web sites include images in their web pages to make them more appealing. This action can be done by an image tag.</p>
        <p>In order to insert an image into a web page, we use &lt;img&gt; tag.</p>
        <img src="Images/NotepadImage.png" alt="Code of inserting an image inside an html document" title="Code of inserting an image inside an html document" srcset="">
        <br>
        <img src="Images/ChromeImage.png" alt="Display of image in Chrome" title="Display of image in Chrome">
        <p>An image tag uses following attributes,<br>
        <b>src:</b>This attribute contains the location of the image file. The location can be either relative or absolute and image file can be anything which can be supported by your browser. <br>
        <b>alt:</b>It contains a text which is shown by the browser if the broswer is unable to display the image. <br>
        <img src="Images/ChromeImageNoShow.png" alt="Display of alternate text when the image cannot be shown" title="Display of alternate text when the image cannot be shown" srcset="">
        <b>title:</b>It defines the title for the image it shows when the mouse hovers over the image. <br>
        <b>width</b> and <b>height:</b>These are optional attributes to define the width and height of the image. Keep in mind that giving more dimentions than the actual size can result in blurry images.</p>
        <p id="note">Remember that the src attribute is mandatory to display the image and the path to the image file should be correct or the image will not be shown.</p>
        <br>
        <p id="note">Also remember that image is an inline element, so it will take as much space as the image and the other elements will be rendered right after it.</p>
        <div id="prext"><a href="Text Formatting.html"><div class="prext">&lt;Previous</div></a>
        <a href="ImageMap.html"><div class="prext">Next&gt;</div></div></a>
    </section>
    <script src="SiteScript.js"></script>
</body>
</html>