-
Notifications
You must be signed in to change notification settings - Fork 0
/
listas_e_entidades.html
executable file
·251 lines (238 loc) · 10.7 KB
/
listas_e_entidades.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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta name="keywords" content="HTML,CSS">
<meta name="author" content="Alexandre Gomes de Lima">
<link href='http://fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="estilos/aulas.css">
<title>IFRN/DIATINF/Design Web: Listas e entidades de caractere</title>
</head>
<body>
<div id="tudo">
<header id="cabecalho">
<img src="imagens/logo_ifrn.png" alt="IFRN" id="logoifrn">
<h1 class="cabecalho">
Diretoria Acadêmica de Gestão e Tecnologia da Informação
</h1>
<h2 class="cabecalho">
Disciplina de Design Web e Arquitetura da Informação
</h2>
</header>
<article id="conteudo">
<h1>Listas e entidades de caractere </h1>
<p>
Nesta aula iremos conhecer as tags necessárias para a criação de listas ordenadas e de listas
não-ordenadas, além do conceito de entidade de caractere.
</p>
<section>
<h2>Listas não-ordenadas</h2>
<p>
São listas que apresentam um conjunto de itens. A renderização padrão define uma linha para cada item
e que inicia com um marcador. Para definir uma lista não-ordenadas utilizamos a tag <span class="html">ul</span>
e para os itens utilizamos a tag <span class="html">li</span>. Todos os itens devem ser definidos como
conteúdo da tag <span class="html">ul</span>. Veja o exemplo a seguir:
</p>
<pre class="html">
<strong><ul>
<li>Araruna</li>
<li>Boi Calemba</li>
<li>Chegança</li>
<li>Maculelê</li>
</ul></strong>
</pre>
<figure>
<img src="listas_e_entidades/figura01.png"
alt="Renderização de uma lista não-ordenada">
</figure>
<p>
É possível usar outras tags como conteúdo de um item de lista. Por exemplo:
</p>
<pre class="html">
<ul>
<li>
<strong><img src="https://curiozzzo.com/wp-content/uploads/2018/12/post-curiozzzo-com-danc3a7a-araruna-pista-dancarinos-thumb.png" alt="Araruna"></strong>
</li>
<li>
<strong><a href="http://www.tribunadonorte.com.br/noticia/boi-calemba-pintadinho-tem-hista-ria-documentada/451989">Boi Calemba</a></strong>
</li>
</ul>
</pre>
<figure>
<img src="listas_e_entidades/figura02.png"
alt="Renderização de uma lista não-ordenada com imagem e link nos itens">
</figure>
<p>
Também é possível criar listas aninhadas. Para tal, basta definir uma lista como conteúdo do item de outra lista.
</p>
<pre class="html">
<ul>
<li>
<strong>Zona Oeste:
<ul>
<li>Planalto</li>
<li>Guarapes</li>
<li>Cidade da Esperança</li>
</ul></strong>
</li>
<li>
<strong>Zona Leste:
<ul>
<li>Rocas</li>
<li>Ribeira</li>
<li>Tirol</li>
</ul></strong>
</li>
</ul>
</pre>
<figure>
<img src="listas_e_entidades/figura03.png"
alt="Renderização de listas aninhadas">
</figure>
</section>
<section>
<h2>Listas ordenadas</h2>
<p>
Listas ordenadas são definidas através da tag <span class="html">ol</span> e cada item
recebe uma numeração como marcador. Assim como nas listas não-ordenadas, um item é
definido através da tag <span class="html">li</span>.
</p>
<pre class="html">
<strong><ol>
<li>Natal</li>
<li>Mossoró</li>
<li>Parnamirim</li>
</ol></strong>
</pre>
<figure>
<img src="listas_e_entidades/figura04.png"
alt="Renderização de lista ordenada">
</figure>
<p>
É possível indicar o tipo de numeração desejado através do atributo <span class="html">type</span>
e os seguintes valores: <span class="html">1</span> (algarimos indo-arábicos - valor padrão);
<span class="html">A</span> (letras maiúsculas); <span class="html">a</span> (letras minúsculas);
<span class="html">I</span> (algarismos romanos maiúsculos); <span class="html">i</span> (algarimos romanos minúsculos).
</p>
<pre class="html">
<ol <strong>type="I"</strong>>
<li>Natal</li>
<li>Mossoró</li>
<li>Parnamirim</li>
</ol>
</pre>
<figure>
<img src="listas_e_entidades/figura05.png"
alt="Renderização de lista ordenada com numeração em algarimos romanos maiúsculos">
</figure>
</section>
<section>
<h2>Entidades de caractere</h2>
<p>
Em HTML alguns caracteres são reservados, isto é, não podem ser utilizados como conteúdo de tag ou
como valor de atributo (i.e., de forma literal). Isto acontece porque estes caracteres possuem um significado especial,
como o símbolo <strong><</strong> que é utilizado no início de uma tag. Também há a situação em que um determinado
caractere não está presente no teclado e desta forma não pode ser inserido de forma direta, como o caractere
<strong>®</strong>. Quando houver a necessidade da utilização de tais caracteres de forma literal, devemos recorrer às
entidades de caractere, as quais possuem o formato <span class="html">&<em>nome_da_entidade</em>;</span> ou
<span class="html">&#<em>código_da_entidade</em>;</span>. Por exemplo, para inserir a expressão
<strong>3 < 5</strong> podemos utilizar uma das duas formas a seguir:
</p>
<pre class="html">
<p>3 <strong>&lt;</strong> 5</p>
<p>3 <strong>&#60;</strong> 5</p>
</pre>
<p>
A seguir é apresentada uma pequena relação de algumas entidades de caractere disponíveis.
Uma relação mais ampla está disponível em
<a href="https://www.w3schools.com/charsets/ref_html_entities_4.asp">https://www.w3schools.com/charsets/ref_html_entities_4.asp</a>.
</p>
<table>
<thead>
<tr>
<th>Caractere</th>
<th>Descrição</th>
<th>Nome de entidade</th>
<th>Código de entidade</th>
</tr>
</thead>
<tbody>
<tr>
<td class="centralizada"> </td>
<td>Espaço em branco</td>
<td class="centralizada">&nbsp;</td>
<td class="centralizada">&#160;</td>
</tr>
<tr>
<td class="centralizada"><</td>
<td>Menor que</td>
<td class="centralizada">&lt;</td>
<td class="centralizada">&#60;</td>
</tr>
<tr>
<td class="centralizada">></td>
<td>Maior que</td>
<td class="centralizada">&gt;</td>
<td class="centralizada">&#62;</td>
</tr>
<tr>
<td class="centralizada">&</td>
<td>E comercial</td>
<td class="centralizada">&amp;</td>
<td class="centralizada">&#38;</td>
</tr>
<tr>
<td class="centralizada">"</td>
<td>Apas duplas</td>
<td class="centralizada">&quot;</td>
<td class="centralizada">&#34;</td>
</tr>
<tr>
<td class="centralizada">'</td>
<td>Aspas simples</td>
<td class="centralizada">&apos;</td>
<td class="centralizada">&#39;</td>
</tr>
<tr>
<td class="centralizada">®</td>
<td>Marca registrada</td>
<td class="centralizada">&reg;</td>
<td class="centralizada">&#174;</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2>Exercícios</h2>
<p>
1) Crie uma página HTML com uma lista ordenada contendo os nomes dos estados da região Nordeste
com suas respectivas quantidades de habitantes. Ordene a lista de forma decrescente de acordo com
a quantidade de habitantes.
</p>
<p>
2) Escreva uma página HTML com uma lista não-ordenada de dois níveis. No primeiro nível informe nomes de categorias
de animais (e.g., anfíbios, mamíferos, etc) e no segundo nível insira imagens de animais pertencentes à categoria.
Veja o exemplo abaixo.
</p>
<figure>
<img src="listas_e_entidades/figura06.png"
alt="Exemplo de lista requerida no exercício 2.">
</figure>
</section>
<section>
<h2 class="referencias">Referências</h2>
<ul>
<li class="referencia">
PAPAIZ, Fabiano. <em class="referencia">Caracter de Entidade</em>. Notas de aula.
</li>
<li class="referencia">
W3Schools. <em class="referencia">HTML Lists</em>. Disponível em <<a href="https://www.w3schools.com/html/html_lists.asp">https://www.w3schools.com/html/html_lists.asp</a>>.
</li>
<li class="referencia">
W3Schools. <em class="referencia">HTML 4 Entity Names</em>. Disponível em <<a href="https://www.w3schools.com/html/html_entities.asp">https://www.w3schools.com/html/html_entities.asp</a>>.
</li>
</ul>
</section>
</article>
</div>
</body>
</html>