HTML/index.html at master · amelink/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
<!DOCTYPE html> = HTML 5
<html> The html element represents the root of an HTML document. Il représenent la racine du document
    <head> représente tous les méta-Data (données cachées) du document
        <meta charset="utf-8"> character set = encodage des caractères
        <title>Hello</title> le titre est requis avec le head
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400i,700,700i,800" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/responsive.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--
        <style>
        footer { curly bracelet
                      decoration   property   color: green; value
                                  }
        nav a {
            color: white; le texte va devenir orange
            background-color: orange
        }-->
        </style>
    </head>
    <body> corp du contenu
       <header>
           <a href="index.html" id="logo">
               <h1>My First Heading</h1> h1 heading titre de paragraphe niveau 1
               <h2>My First Heading</h2> h2 heading titre de paragraphe niveau 2
           </a>
           <nav>
               <ul>
                   <li><a href="index.html" class="selected">Portfolio</a></li>
                   <li><a href="about.html">About</a></li>
                   <li><a href="contact.html">Contact</a></li>
               <ul>
           </nav>
       </header>
       <div id="wrapper">
indentation
           <section>
                <p>Paragraphe 1</p>
                <ul id="gallery">
                    <li>
                        <a href="image localisation">
                            <img src="image localisation" alt"">
                            <p>Experimentation with color and texture</p>
                        </a>
                    </li>
                    <li>
                        <a href="image localisation">
                            <img src="image localisation" alt"">
                            <p>Playing with blending modes in Photoshop</p>
                        </a>
                    </li>
                    <li>
                        <a href="image localisation">
                            <img src="image localisation" alt"">
                            <p>Trying to create an 80's style of glows</p>
                        </a>
                    </li>
                    <li>
                        <a href="image localisation">
                            <img src="image localisation" alt"">
                            <p>Drips created Using Photoshop brushes</p>
                        </a>
                    </li>
                    <li>
                        <a href="image localisation">
                            <img src="image localisation" alt"">
                            <p>creating shapes using repetitions</p>
                        </a>
                    </li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="contact.html">Contact</a></li>
                <ul>
           </section>
           <footer>
               <a href="http:twitter.com"><img src="img/twitter-wrap.png" alt="twitter logo" class="social-icon"></a>
               <a href="http:facebook.com"><img src="img/facebook-wrap.png" alt="facebook logo" class="social-icon"></a>
                 <p>&copy; Paragraphe 2</p>
           </footer>
     </div>
   </body>
</html>