FirstRepo/TagsHTML.html at master · marcelodof/FirstRepo · 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
<html>

<head>
  <title>Tags_HTML</title>
  <style>
  .teste {
    text-align: center;
    color: red;
  }
  .menu{
    margin: 0;
    padding: 0; <!-- esses 2 estilos fazem com que a lista começe no canto da tela (tira a margem) -->
  }
  .topo{
    display: block;
    background-color: #dddddd;
    position: fixed;

  }
  body{
    background-color: #ccccFF;
    background-position: right;
  }
  </style>
  <!-- isso é uma classe no CSS -->

  <style>
  #centroverde{
    text-align: center;
    color: green;
  }
  </style>
  <!-- isso é um ID no CSS-->
</head>

<body>
  <div class="topo">
  <i><b style="font-size: 30px"> Este site foi feito para:</b></i>
  <ul>
    <li>Demonstrar as Tags de html</li>
    <li>Testar coisas de CSS</li>
    <li>Se divertir</li>
  </ul>
  <hr>
</div>
<div style="text-align: right; position: fixed; float: right">
<img src="http://www.osul.com.br/wp-content/uploads/2015/06/bandeira_brasil.jpg">
</div>
<div style="padding-top: 300px">a</div>
  <ol style="float: left">
    <li><h1> Tamanho 1 </h1></li>
    <li><h2> Tamanho 2 </h2></li>
    <li><h3> Tamanho 3 </h3></li>
    <li><h4> Tamanho 4 </h4></li>
    <li><h5> Tamanho 5 </h5></li>
    <li><h6> Tamanho 6 </h6></li>
  </ol>
  <a href="http://slides.com/imeworkshop/oficina-html-css#/">
    clique aqui para ir pro tutorial de HTML e CSS do USPCodeLabs</a>

    <p> <span style="color: green;">NOTA</span>:
      digitar "HTML" e enter no atom cria o esqueleto de um site </p>

      <div style="font-style: bold">
        <p style="color: red"> "style" é um complemento tag para localizar o CSS em um grupo de elementos</p>
        </div>

        <p style="text-align: center; float: right"> A diferença entre ID e class é q id é unico, ele deve ser usado somente uma vez em um elemento, já classe
          pode ser usada varias vezes em qualquer tag. Logo, eu somente vou usar classes aqui</p>

          <hr>
          <p id="centroverde"> a partir daqui, testes com CSS:</p>

          <p style="width: 5px;"> "width" define a largura no texto</p>
          <p class="teste"> </p>

        <div style="width: 5px">
        a
        a
        a
        a
        a
        a
        a
        aa
        a
        aa
        a
        aa
        a
        aa
        a
        aa
        a
        aa
        a
        aa
        a
        aa
        a
        aa
        a
        aa
        a
        aa
        a
        aa
        a
        aa
        a
        aa
        a
        aa
        a
        aa
        a
        a
      </div>
          <!-- comentario -->
        </body>

        </html>