fssd-html/basic06-img-pitcure.html at master · anmarjarjees/fssd-html · 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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Working with Images</title>
</head>

<body>
    <h1>Working with Images</h1>
    <!--
            <img>: is inline element and empty element (self-closed tag)

            The 3 img types (extension) for the web:
            .jpg
            .png
            .gif

            NOT .psd or .bmp etc...

            The img has three attributes:
            src:
            The src attribute stands for "source",
            and it has to be included. It tells the browser where to find an image.
            It contains the path to the image and the image file name

            alt:
            is a required attribute (short for alternative)
            W3C (if missing)=> Error: An img element must have an alt attribute

            Two reasons for adding alt:
            - screen reader software used by visually impaired users
              can read the alt description and provide a context for the image
            - if the image cannot be loaded alt will give us an alternative text to be displayed

            title:
            attribute (optional): The text appears only when we hover the mouse over the image
        -->

    <img src="code-01.png" alt="Code Institute Logo" title="The company logo">
    <!--
        Notice that img is an inline element, which means it will share
        its horizontal space with other inline elements,
        so we can embed the image inside a paragraph!
        img element has a width and height attribute

        - avoid reduce/change the image dimensions using the attributes: width and height:
        Reasons:
        - if the actual image width is 1000px => and you change it to width = 500
        this will not change the actual dimensions of the image,
        which means we are loading the 1000px to be displayed as 300px!!!
        we should change the image width/height using a photo editor

        - avoid using "width" or "height" to make our image responsive
        width or height will give an image a fixed size/dimensions
        RWD => Responsive Web Design
    -->
    <img src="code-01.png" alt="Code Institute Logo" title="The company logo" width="400">

    <!-- since img is an inline element, we can place it inside p element -->
    <p>Canadian Business College
        <img src="https://canadianbusinesscollege.com/wp-content/uploads/2020/09/CBC-New-Logo-Website.png"
            alt="CBC Logo">
    </p>
    <!--
        use the file coding.jpg inside folder "images"
        using the actual width and height of the image file
     -->
    <img src="images/coding.jpg" alt="A group of programmers" width="1050" height="700">
    <!--
        Hints:
        - You can download Gimp (Free image editor) to modify your image:
        - The link: https://www.gimp.org/

        - You can check this page if you want to use some free images in your work:
        https://www.computerhope.com/issues/ch000845.htm
    -->

    <!--
        for now we can use "align" attribute to align our images!
        but then we should use CSS to style the image and never use align there are also two more attributes that we should not use: width: height:

        align can have the following values:
        - left
        - right
        - middle

        W3C: Error: The align attribute on the img element is obsolete.

        Let's make it a hyperlink "Absolute Link"
    -->
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur delectus expedita hic ut dolores nisi quisquam
        a iusto eveniet obcaecati quibusdam quas omnis nulla in fuga, quae quos sapiente illum.
        <a href="https://canadianbusinesscollege.com" target="_blank">
            <img src="images/CBC-New-Logo-Website.png" alt="CBC logo" align="middle">
        </a>
    </p>
    <hr>
    <!--
        For displaying multiple images, we can use the <picture> element:
        https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

        The HTML <picture> element contains:
        - zero or more <source> elements
        - one <img> element to offer alternative versions of an image for different display/device scenarios.

        Notice that all IE versions don't support this element
     -->
    <picture>
        <!--
            The <source> element is a self-closing element; it does not need a closing tag.
            It needs two important attributes:
            - srcset: defines the URL of the image to show
            - media which accepts a media query
            Examples:
            media="(min-width: 800px)"
            media="(max-width: 1000px)"

            Media queries are used in responsive design
            to control what can be seen on different screen sizes.
         -->
        <source srcset="images/coding.jpg" media="(min-width: 2000px)">
        <source srcset="images/library.jpg" media="(min-width: 1024px)">
        <source srcset="images/pc.jpg" media="(min-width: 500px)">
        <!--
            The <img> element:
            - is required as the last child element of the <picture> element.
            - is used to provide backward compatibility for browsers
            that do not support the <picture> element,
            or if none of the <source> elements media queries are active
        -->
        <img src="images/light.jpg" alt="Light is on">
    </picture>
</body>

</html>