-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
81 lines (75 loc) · 4.64 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conhecimentos HTML</title>
</head>
<body>
<h1 id="inicio">Introdução ao HTML</h1>
<hr/>
<h2>Índice</h2>
<ul>
<li><a href="#estrutura">Estrutura Básica de HTML</a></li>
<li><a href="#tags">O que são Tags</a></li>
<li><a href="#atributos">Atributos das Tags</a></li>
<li><a href="#texto">Tags de Texto</a></li>
<li><a href="#lista">Lista Ordenada e Não Ordenada</a></li>
<li><a href="#links">Funcionalidades da tag de Link</a></li>
<li><a href="#referencia">Referências</a></li>
</ul>
<hr>
<h2 id="estrutura">Estrutura Básica de HTML</h2>
<small><a href="#inicio">(Voltar)</a></small>
<p>Para começar a estruturar o html primeiro, é preciso criar um arquivo<u>(index.html)</u>,
esse é o jeito recomendado de se escrever pois é o padrão normalmente usado como a página principal.
O html basicamente tem 3 partes, o <strong>html</strong>, <strong>head</strong> e o <strong>body</strong>.
O <strong>HTML</strong> ele defini a página como html, dentro dele vai todas as tags da página.
O <strong>HEAD</strong> são coisas que vão carregar antes de exibir para o usuário.
O <strong>BODY</strong> são coisas que vão aparecer na página do navegador para o usuário.
</p>
<h2 id="tags">O que são Tags</h2>
<small><a href="#inicio">(Voltar)</a></small>
<p>Existem muitas tags, cada uma com sua função e toda tag tem um sinal de menor(<), o nome da tag (html) e o sinal de maior(>).
Agora para fechar é preciso colocar antes do nome da tag e depois do sinal de menor uma barra(/), sinalisando
o fechamento da tag. Mas existem algumas que não precisa colocar a barra para fechar. EX:
input, img e outras.
</p>
<h2 id="atributos">Atributos das Tags</h2>
<small><a href="#inicio">(Voltar)</a></small>
<p>Atributos são propiedades que mudam a funcionalidade de uma tag, existem atributos que quase toda as tags vão ter EX: class, id e outras.
E as que são expecificas de uma determinada tag. EX: tag = img atributo = src.
</p>
<h2 id="texto">Tags de Texto</h2>
<small><a href="#inicio">(Voltar)</a></small>
<p>Basicamente será o que o usuário vai ler, também chamado de <u>tipografia</u> que é a arte e o processo de criação na composição e
impressão de um texto. Algumas tags mais comuns são EX: h1 até o h2 que são títulos e subtítulos, p que é para paragrafos
e blockquote pode ser usado como se fosse uma sitação de uma pessoa. Também pode colocar tags no meio do texto como EX:
strong = <strong>deixar o texto em negrito</strong>, u = <u>deixar o texto em sublinhado</u>, i = <i>serve para deixar em italico e muito mais</i>.
</p>
<h2 id="lista">Listas Ordenadas e Não Ordenadas</h2>
<small><a href="#inicio">(Voltar)</a></small>
<p>Existem dois tipos de listas e para funcionarem é preciso colocar as tags filhas que são tags dentro de outra tag que essa séria o pai.
Na lista Ordenada os items na lista vão estar em uma ordem com números. Na lista Não Ordenada ele tira os números indícando uma ordem por pontinhos ou bolinhas como marcadores.
Porque não tem um ordem, Da para usar as listas de varias formas como um súmario, menu e outros.
</p>
<h2 id="links">Funcionalidades da tag de Link</h2>
<small><a href="#inicio">(Voltar)</a></small>
<p>Normalmente os links são usados para acessar outras páginas, outros sites como se fosse uma ligação. A tag responsavel por isso é a áncora(a).
E para funcionar é preciso colocar o <strong>href</strong>, que séria onde vai levar para o site, e um texto que vai exibir o link.
Para abrir o link em outra aba usa o target = "_blank", o "_self" é o padrão, abrindo o link na mesma aba.
Também tem o atributo "title" serva para colocar um balão quando o mouse fica em cima do link.
</p>
<h2 id="referencia">Referências</h2>
<small><a href="#inicio">(Voltar)</a></small>
<p>Alguns vídeos que me ajudaram a tirar as minhas dúvidas.</p>
<ol>
<li>
<a href="https://www.youtube.com/watch?v=3oSIqIqzN3M" target="_blank">5 MINUTOS DE HTML PARA INICIAR EM PROGRAMAÇÃO!</a>
</li>
<li>
<a href="https://www.youtube.com/watch?v=SV7TL0hxmIQ" target="_blank">Curso de HTML para iniciantes - Aprenda HTML em 1 hora</a>
</li>
</ol>
</body>
</html>