Web-Dev-Fund/tutorial.html at master · conesco3/Web-Dev-Fund · 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
<!DOCTYPE html>
<html lang="en">

<head>
	<title>Tutorial</title>
  <!-- Universal Transformation Format 8 bit - is tha standard character set for the WWW -->
  <meta charset="utf-8">
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<!-- jQuery library -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="css/style.css">
	<script>
	$(document).ready(function(){
		$("#main").hide();
		$("#main").toggle("slow");
	})
	</script>
</head>

<body>

	<nav id="nav">
	  <ul>
	    <li><a href="index.html">Home</a></li>
	    <li><a href="tutorial.html">Tutorial</a></li>
            <li><a href="contact.html">Contact</a></li>
	  </ul>
	</nav>

<div id="brand">
	<img class="header" src="images/opusblue.png" alt="opusblue"/>
</div>

<div id="main">
  <h1> Web Images Tutorial </h1>

    <table>
      <tr>
	<td colspan="2"><hr></td>
      </tr>
      <tr>
        <td><img src="images/photo.jpg" alt="This is a JPG image">
        <td>
            <h1>Joint Photographic Group</h1>
            <p class="text-center"> The image on the left shows a typical JPG image, The joint Photographic Experts Group or JPEG image file
                                    is a 24-bit bitmap type with excellent file compression. It is most suitable for displaying realistic and
                                    complex images like photographs, images with complex textures and images with gradient colour transitions
                                    or any images that require more than 256 colours used on the web.
      </tr>
      <tr>
	<td colspan="2"><hr></td>
      </tr>
      <tr>
        <td><img src="images/ping.png" alt="This is a PNG image">
        <td>
            <h1>Portable Network Graphics</h1>
            <p class="text-center"> The image on the left shows a typical PNG image. The Portable Network Graphics or PNG image file is an 8-bit
                                    and 24-bit bitmap type with very goof file compression. It is most suitable for non-optimisied, original art
                                    files but can be used for displaying both non-realistic images on the web and has some special properties that
                                    the other formats don't have. Some browser version don't understand this file type.
      </tr>
      <tr>
	<td colspan="2"><hr></td>
      </tr>
      <tr>
        <td><img src="images/Wizard.gif" alt="This is a GIF image">
        <td>
            <h1>Graphic Interchange Format</h1>
            <p class="text-center"> The image on the left shows a typical GIF image.The Graphic Interchange Format or GIF image file is an 8-bit bitmap
                                    type with very good file compression. It is most suitable for displaying non-realistic images like logs, diagrams and
                                    cartoon-like drawings on the Web.
      </tr>
      <tr>
	<td colspan="2"><hr></td>
      </tr>
    </table>
    <br />
    <br />
    <br />

</div>

<div id="footer">

</div>

</body>

</html>