HTML/about.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
<!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>
rule     element selector footer { curly bracelet
              decoration   property   color: green; value
                          }
descendant nav to a
        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>
               <h2>My second Heading</h2>
           </a>
           <nav>
               <ul>
                   <li><a href="index.html">Portfolio</a></li>
                   <li><a href="about.html" class="selected">About</a></li>
                   <li><a href="contact.html">Contact</a></li>
               </ul>
           </nav>
       </header>
       <div id="wrapper">
indentation
           <section>
               <img src="img/amelie.jpg" alt="photograph of Amélie" class="profile-photo"> <!--photo de 200 px height et width-->
               <h3> About </h3>
               <p> hi my name is Amélie </p>
               <p> If you'd to follow me on Twitter, my username is <a href="http:twitter.com"> @amelink </a> </p>
           </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>