-
Notifications
You must be signed in to change notification settings - Fork 0
/
Principal.html
153 lines (151 loc) · 7.38 KB
/
Principal.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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dev Front-End</title>
<style>
body{
background-color: azure;
}
</style>
</head>
<body>
<h1>Olá, mundo!</h1>
<p>Esse é um documento em html, códigos digitados por: <br> Felipe Alves.</p>
<h1>Parágrafos e Quebras de linhas.</h1>
<hr>
<p>Um parágrafo pode ser escrito de qualquer jeito.
Basta colocar tudo no meio do par de tags <p> e <p>
</p>Se precisar quebrar o texto em algum lugar específico <br> como esse, usar a tag <br>
<h1>Hierarquia de Títulos</h1>
<p> São Formados por seis niveis do <h1> ao <h6></p>
<h2>Introdução</h2>
<h3>Justificação da Temática</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore architecto veritatis optio reprehenderit quod officiis, velit esse dignissimos voluptatum iusto tempora necessitatibus eos error vero sed laborum quibusdam! Vel, nostrum.</p>
<h4>Regimes terrítoriais</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A aut ex dicta commodi ipsum architecto, adipisci aspernatur cupiditate. Non ipsam pariatur aspernatur eum fugit? Itaque quisquam possimus similique voluptatum? Dicta!</p>
<h5>Code</h5>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptate, aspernatur sequi quam et sed omnis laboriosam ipsa explicabo fugit cum, non amet! Eius iusto reprehenderit nobis nesciunt atque numquam dolore.</p>
<h6>Life</h6>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate fugit reprehenderit beatae, aliquam error debitis ratione enim facilis nostrum soluta. Quis expedita ea ad maxime ipsum dolor, quaerat porro! Nemo.</p>
<h1>Formatação de Textos</h1>
<hr>
<h3>Principais Formatações</h3>
<h4>Negrito / Destaque</h4>
<p>Nessa frase temos um <b>termo em negrito</b> usando a tag <b> (Não semântica).</p>
<h4>Itálico / Ênfase</h4>
<p>Nesta frase, temos um <I>termo em itálico</I> usando a tag <I> (Não semântica).</p>
<p>Nesta frase, temos um <em>termo em ênfase</em> usando a tag <em> (semântica).</p>
<h4>Texto marcado</h4>
<p>Podemos criar também um <mark style="background-color: lightblue;">texto marcado</mark> usando a tag <mark>
</p>
<p>E no outro parágrafo, temos <mark>outro texto marcado</mark> no final.</p>
<h4>Texto grande e pequeno</h4>
<p>Criando <big>texto grande</big> e </small> pequeno </small> nesse parágrafo.<h6>(obs: a tag <big> está obsoleta)</h6></p>
<h4>Texto deletado</h4>
<p>Podemos marcar um <del>texto como excluído</del> para índicar que ele deve ser lido, mas não considerado.</p>
<h4>Texto Inserido</h4>
<p>Podemos marcar um <ins>texto como inserido</ins> para dar ênfase e indicar que ele foi adicionado depois.
Existe também o <u>sublinado</u> com a tag <u> (Não semântica)</p>
<h4>Texto sobrescrito</h4>
<p>Para inserir coisas do tipo x<sup>20+3</sup> ussando a tag <sup></p>
<h4>Texto subscrito</h4>
<p>Para inseir coisas como H<sub>2</sub>o usando a tag <sub> </p>
<h1>Outras Formatações</h1>
<hr>
<h4>Código-Fonte / Pré-Formatação</h4>
<p>O comando <code>document.getElementById('test')</code> é escrito em linguagem JavaScript. com a tag <code> <p>
<pre>
<code>
num = int(input('Dígite um número'))
if num % 2 == 0:
print(f'O número {num} é PAR')
else:
print{f'O número {num} é ÍMPAR'}
print('Fim do programa')
</code>
</pre>
<h4>Citações</h4>
<p>Como dizia Friedrich Nietzsche <q>Os grandes intelectuais são céticos</q> a tag <q> é usada para citações.
<h4>Citações Completas</h4>
<p>Segundo Friedrich Nietzsche, no seu livro Além do Bem e do Mal:</p>
<blockquote cite="https://www.google.com.br/books/edition/Al%C3%A9m_do_bem_e_do_mal/99-NDwAAQBAJ?hl=pt-BR&gbpv=1">
Aquilo que se faz por amor está sempre além do bem e do mal.
</blockquote>
<h4>Abreviações</h4>
<p>Estudando <abbr title="HyperText Markup Linguage"> HTML</abbr> e <abbr title="Cascading Style Sheets"> CSS</abbr> com citações de Nietzsche.
<p>É usado a tag <abbr> para abreviações com descrições.</p>
<h4>Texto Invertido</h4>
<p><bdo dir="rtl">Estou aprendendo a formatar texto com citações de Nietzsche.</bdo></p>
<h2>Font Family</h2>
<hr>
<a href="Família de Fontes.html" rel="next">Font Family</a>
<h1>Trabalhando com Listas</h1>
<hr>
<h4>Listas Ordenadas</h4>
<ol type="1">
<li>Acordar</li>
<li>Tomar Café</li>
<li>Beijo de Bom dia</li>
<li>Trabahar</li>
<li>Hórario para estudar</li>
<li>Lazer</li>
</ol>
<h4>Listas Não Ordenadas</h4>
<ul>
<li>Acordar</li>
<li>Tomar café</li>
<li>Beijo de Bom dia</li>
<li>Trabalhar</li>
<li>Hórario para estudar</li>
<li>Lazer</li>
</ul>
</ol>
<h4>Lista de definições</h4>
<dt>HTML</dt>
<dd>Línguagem de marcação para o desenvolvimento de um site.</dd>
<dt>CSS</dt>
<dd>Línguagem de marcação para o desenvolvimento do design de um site.</dd>
<dt>JavaScript</dt>
<dd>Línguagem de programação para o desenvolvimento de interatividade de um site.</dd>
<p>________</p>
<p>Vamos adicionar alguns símbolos especiais:
®
©
™
€
£
¥
¢
δ
↑
<p>Vamos adicionar alguns emoji:
🖖
🤓
</p>
<h1>Mídias em Site</h1>
<hr>
<p>Para usar imagens em um projeto profissional <a href="https://unsplash.com/pt-br" target="_blank" rel="external"> usar o unsplash</a></p>
<p>Testando carga de imagens, abaixo estará uma imagem que está na mesma pasta.</p>
<img src="Design Sala.jfif" alt="Imagem 220x220">
<p>Confira <a href="Imagem dinâmica.html" rel="next">Imagens Adaptaveis</a></p>
<h1>Trabalhando com Links</h1>
<hr>
<h4>Usando links externos</h4>
<p>Acessar link <a href="https://github.com/felipecod-coder" target="_blank" rel="external"> para acessar o github. </a></p>
<h4>Usando links internos</h4>
<p>Acesse também a <a href="Oferecimento.html" rel="next"> Oferecimento </a></p>
<p>Confira a nossa <a href="Notícias/Notícias.html" target="_self" rel="next"> Página de Notícias</a></p>
<p>Acesse também a <a href="Estilos Css.html" target="_self" rel="next"> Página de Estilos Css</a></p>
<h4>Link para Download</h4>
<ul>
<li><a href="Além do Bem e do Mal.zip.zip" download="Além do Bem e do Mal.zip" type="application/pdf">Além do Bem e do Mal em Pdf.</a></li>
</ul>
<h4>Códigos não explorados</h4>
<ul>
<li>Criar Projeto do Zero</li>
<li>Responsividade para sites</li>
</ul>
</body>
</html>