-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
166 lines (86 loc) · 5.58 KB
/
index.html
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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html> <!-- informa que vc ja esta na versão do html 5 -->
<!-- Truque de amigo para vc, escreva: ! e de um "enter" ( somente um ponto de esclamação e de enter ) -->
<html lang="pt-br"> <!-- inicio do site -->
<head> <!-- cabeçalho do site onde fica links para o java e o css alem de tags adicionais como meta e title-->
<meta charset="UTF-8"> <!-- charset do servidor norte americano "UTF-*" -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- compatibilidade com qualquer dispositivo -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- escala de 100% de largura do seu site-->
<script src="script.js" defer></script>
<!-- o atributo defer faz com que o site carregue o html e o java script mas
executa o java script somente quedo o html estiver carregado por completo-->
<!-- o atributo asmyr carrega o html e o java script ao mesmo tempo mas
para o carregamengto do html para executar codigos do java script-->
<title> Tags basicas do HTML </title> <!-- tag onde sera exibida o nome da aba de pesquisa-->
</head>
<body> <!-- Corpo do site onde vai aparecer tudo que esta na tela do seu site -->
<header></header> <!-- tag de abertura e de fexamento --- tradução de cabeçalho do site... ex: o menu-->
<main> <!-- parte Principal do site onde abrange o conteudo dele -->
<img src="#" alt="imagem do site">
<!-- img é uma tag para exibir uma imagem atravez do atributo src e o
atributo alt é uma questao de acessibilidade do seu site para pessoas cegas -->
<div></div> <!-- div é uma tag de divisao, é meio que uma caixa ( ou container ) que carrega um conteudo -->
<div class="tt"></div> <!-- o atributo class é um atributo que nomeia uma classe entre tags
para que todas as tags que tenha uma classe igual serem modificadas no css iguamente -->
<div class="tt"></div> <!-- resumindo uma tag com a mesma classe que outra compartilha um mesmo codigo no css -->
<div id="ub"></div>
<!-- o atributo id é um atributo que nomeia um nome expecifico
para ser modificado no css ( um atributo de nome unico ) -->
<nav> <!-- o nav é uma tag de navegação serve para menus e é so utilizada em menus -->
<ul> <!-- tag que organiza listas de modo nao numerada ou seja nao organizadas -->
<li> <!-- tag que cria as listas -->
<a href="httpsblablabla">
<!-- a tag a é uma tag que traz links de qualquer site
ela é acompanhada pelo atributo href="que traz o link do
site que vc esta desejando"-->
Algum nome ( Clique Aqui ) <!-- a tag a nao é visivel por isso se coloca um conteudo dentro dela -->
</a>
</li>
<li>
<a href="passaros.com">
<img src="tucano.png" alt="tucano">
<!-- tambem pode colocar imagens para ser representadas como um link-->
</a>
</li>
</ul>
<!-------------------------------------------------------->
<h1> <!-- exitem 6 hs ex: h1, h2, h4, h5 e h6, o h1 pode ser utilizado somente uma ves a cada pagina web -->
Receitas <!-- conteudo -->
</h1>
<h2> <!-- sub titulo, se utiliza quando se tem um titulo ou seja um h1 -->
Bolo de laranja
</h2>
<h3> <!-- o h3 pode ser utilisado para titulos menores -->
ingledientes
</h3>
<ol> <!-- a tag ol é uma tag que seguras listas numeradas, uma tag que deixa as listas organizadas -->
<li>
farinha de trigo
</li>
<li>
cenora
</li>
<li>
etc...
</li>
</ol>
</nav>
<address> <!-- se utiliza para colocar informações pessoais como email, telefone e etc... ( enderesso ) -->
<a href=”tel:+5502122222222″> <!-- sempre que for colocar um numero de telefone deve ser colocado ( tel: ) na frente -->
+55(0)21 – 2222-2222
</a>
<a href="linkedin.com.br">
Meu linkedIn
</a>
<a href="mailto:moreicdasilvaT7@gmail.com"> <!-- sempre que for colocar um gmail vc deve colocar ( mailto: )-->
<img src="icon de gmail" alt="icone de gmail">
</a>
</address>
<br>
<!-- se ouver um texto antes da tag br ele faz uma quebra de linaha
no texto ja que o html nao reconhce quando vc pula uma linha, se nao
ele pula linha dividindo o conteudo de cima pelo de baixo -->
<hr> <!-- o tag hr cria uma linha crusando o site ( geralmente para demonstrar uma divisao no conteudo ) -->
</main>
<footer></footer> <!-- rodape do site -->
</body>
</html>