introduÇÃo ao desenvolvimento webwiki.foz.ifpr.edu.br/wiki/images/8/8a/web7.pdf · 16 tipo de...
TRANSCRIPT
![Page 1: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/8/8a/Web7.pdf · 16 Tipo de numeração Podemos começar a numeração por um número ou letra específica Para](https://reader034.vdocuments.mx/reader034/viewer/2022042414/5f2edcb81b5fb36e22221783/html5/thumbnails/1.jpg)
INTRODUÇÃO AODESENVOLVIMENTO WEB
PROFª. M.Sc. JULIANA H Q BENACCHIO
![Page 2: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/8/8a/Web7.pdf · 16 Tipo de numeração Podemos começar a numeração por um número ou letra específica Para](https://reader034.vdocuments.mx/reader034/viewer/2022042414/5f2edcb81b5fb36e22221783/html5/thumbnails/2.jpg)
2
Listas
As listas são utilizadas para citar, numerar e definir objetos. Também são utilizadas correntemente para deslocar o começo da linha para a direita
Podemos distinguir três tipos de listas:
Listas desordenadas
Listas ordenadas
Listas de definição
![Page 3: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/8/8a/Web7.pdf · 16 Tipo de numeração Podemos começar a numeração por um número ou letra específica Para](https://reader034.vdocuments.mx/reader034/viewer/2022042414/5f2edcb81b5fb36e22221783/html5/thumbnails/3.jpg)
3
Listas desordenadas
São delimitadas pelas tags <ul> e </ul> (unordered list)
Cada um dos elementos da lista é citado por meio de uma etiqueta <li> (sem fechamento, ainda que exista nenhum inconveniente em colocá-lo) </li>
![Page 4: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/8/8a/Web7.pdf · 16 Tipo de numeração Podemos começar a numeração por um número ou letra específica Para](https://reader034.vdocuments.mx/reader034/viewer/2022042414/5f2edcb81b5fb36e22221783/html5/thumbnails/4.jpg)
4
Listas desordenadas
Exemplo:
<p>Itens:</p>
<ul>
<li>item</li>
<li>mais um item</li>
<li>outro item</li>
</ul>
Resultado:
Itens:
item
mais um item
outro item
![Page 5: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/8/8a/Web7.pdf · 16 Tipo de numeração Podemos começar a numeração por um número ou letra específica Para](https://reader034.vdocuments.mx/reader034/viewer/2022042414/5f2edcb81b5fb36e22221783/html5/thumbnails/5.jpg)
5
EXERCÍCIO 1
![Page 6: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/8/8a/Web7.pdf · 16 Tipo de numeração Podemos começar a numeração por um número ou letra específica Para](https://reader034.vdocuments.mx/reader034/viewer/2022042414/5f2edcb81b5fb36e22221783/html5/thumbnails/6.jpg)
6
Tipo de marcador
Podemos definir o tipo de marcador empregado para cada elemento da lista desordenada
Para isso devemos especificá-lo por meio do atributo type incluído dentro da tag de abertura <ul>, se queremos que o estilo seja válido para toda a lista
ou dentro da tag <li> se queremos especificar para um só elemento
![Page 7: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/8/8a/Web7.pdf · 16 Tipo de numeração Podemos começar a numeração por um número ou letra específica Para](https://reader034.vdocuments.mx/reader034/viewer/2022042414/5f2edcb81b5fb36e22221783/html5/thumbnails/7.jpg)
7
Tipo de marcador
A sintaxe é do seguinte tipo:
<ul type="tipo de marcador">
E o tipo de marcador pode ser um dos seguintes:
Disc (padrão)
Circle
Square
![Page 8: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/8/8a/Web7.pdf · 16 Tipo de numeração Podemos começar a numeração por um número ou letra específica Para](https://reader034.vdocuments.mx/reader034/viewer/2022042414/5f2edcb81b5fb36e22221783/html5/thumbnails/8.jpg)
8
Tipo de marcador
Exemplo:
<ul type="square">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li type="circle">Elemento 4</li>
</ul>
![Page 9: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/8/8a/Web7.pdf · 16 Tipo de numeração Podemos começar a numeração por um número ou letra específica Para](https://reader034.vdocuments.mx/reader034/viewer/2022042414/5f2edcb81b5fb36e22221783/html5/thumbnails/9.jpg)
9
Tipo de marcador
Resultado:
Elemento 1
Elemento 2
Elemento 3
Elemento 4
![Page 10: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/8/8a/Web7.pdf · 16 Tipo de numeração Podemos começar a numeração por um número ou letra específica Para](https://reader034.vdocuments.mx/reader034/viewer/2022042414/5f2edcb81b5fb36e22221783/html5/thumbnails/10.jpg)
10
EXERCÍCIO 2
![Page 11: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/8/8a/Web7.pdf · 16 Tipo de numeração Podemos começar a numeração por um número ou letra específica Para](https://reader034.vdocuments.mx/reader034/viewer/2022042414/5f2edcb81b5fb36e22221783/html5/thumbnails/11.jpg)
11
Listas ordenadas
Neste caso, usaremos as tags <ol> (ordered list) e seu fechamento </ol>
Cada elemento será igualmente precedido de sua etiqueta <li>
![Page 12: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/8/8a/Web7.pdf · 16 Tipo de numeração Podemos começar a numeração por um número ou letra específica Para](https://reader034.vdocuments.mx/reader034/viewer/2022042414/5f2edcb81b5fb36e22221783/html5/thumbnails/12.jpg)
12
Listas ordenadas
Exemplo:
<p>Itens ordenados:</p>
<ol>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item </li>
</ol>
Resultado:
Itens ordenados:
1. Primeiro item
2. Segundo item
3. Terceiro item
![Page 13: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/8/8a/Web7.pdf · 16 Tipo de numeração Podemos começar a numeração por um número ou letra específica Para](https://reader034.vdocuments.mx/reader034/viewer/2022042414/5f2edcb81b5fb36e22221783/html5/thumbnails/13.jpg)
13
EXERCÍCIO 3
![Page 14: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/8/8a/Web7.pdf · 16 Tipo de numeração Podemos começar a numeração por um número ou letra específica Para](https://reader034.vdocuments.mx/reader034/viewer/2022042414/5f2edcb81b5fb36e22221783/html5/thumbnails/14.jpg)
14
Tipo de numeração
Do mesmo modo das listas desordenadas, as listas ordenadas oferecem a possibilidade de modificar o estilo
É possível especificar o tipo de numeração empregado escolhendo entre números (1,2,3...), letras (a,b,c...) e suas maiúsculas (A,B,C...) e números romanos em suas versões maiúsculas (I,II,III...) e minúsculas (i,ii,iii...)
![Page 15: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/8/8a/Web7.pdf · 16 Tipo de numeração Podemos começar a numeração por um número ou letra específica Para](https://reader034.vdocuments.mx/reader034/viewer/2022042414/5f2edcb81b5fb36e22221783/html5/thumbnails/15.jpg)
15
Tipo de numeração
Devemos utilizar o atributo type, situado sempre dentro da tag <ol>
Neste caso, os valores que o atributo pode tomar são:
1 Para ordenar por números
a Por letras do alfabeto
A Por letras maiúsculas do alfabeto
i Ordenação por números romanos em minúsculas
I Ordenação por números romanos em maiúsculas
![Page 16: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/8/8a/Web7.pdf · 16 Tipo de numeração Podemos começar a numeração por um número ou letra específica Para](https://reader034.vdocuments.mx/reader034/viewer/2022042414/5f2edcb81b5fb36e22221783/html5/thumbnails/16.jpg)
16
Tipo de numeração
Podemos começar a numeração por um número ou letra específica
Para isso utilizamos o atributo start que terá um número como valor
Este número, que por padrão é 1, corresponde ao valor a partir do qual começamos a definir nossa lista
Para o caso das letras ou dos números romanos, o navegador se encarrega de fazer a tradução do número à letra correspondente
![Page 17: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/8/8a/Web7.pdf · 16 Tipo de numeração Podemos começar a numeração por um número ou letra específica Para](https://reader034.vdocuments.mx/reader034/viewer/2022042414/5f2edcb81b5fb36e22221783/html5/thumbnails/17.jpg)
17
Tipo de numeração
Exemplo:
<p>Ordenado por letras</p>
<ol type="a">
<li>Elemento a</li>
<li>Elemento b</li>
</ol>
![Page 18: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/8/8a/Web7.pdf · 16 Tipo de numeração Podemos começar a numeração por um número ou letra específica Para](https://reader034.vdocuments.mx/reader034/viewer/2022042414/5f2edcb81b5fb36e22221783/html5/thumbnails/18.jpg)
18
Tipo de numeração
Resultado:
Ordenado por letras
a. Elemento a
b. Elemento b
![Page 19: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/8/8a/Web7.pdf · 16 Tipo de numeração Podemos começar a numeração por um número ou letra específica Para](https://reader034.vdocuments.mx/reader034/viewer/2022042414/5f2edcb81b5fb36e22221783/html5/thumbnails/19.jpg)
19
Tipo de numeração
Exemplo:
<p>Ordenados por números romanos
começando pelo 10</p>
<ol type="i" start="10">
<li> Elemento x</li>
<li> Elemento xi</li>
</ol>
![Page 20: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/8/8a/Web7.pdf · 16 Tipo de numeração Podemos começar a numeração por um número ou letra específica Para](https://reader034.vdocuments.mx/reader034/viewer/2022042414/5f2edcb81b5fb36e22221783/html5/thumbnails/20.jpg)
20
Tipo de numeração
Exemplo:
Ordenados por números romanos
começando pelo 10
x. Elemento x
xi. Elemento xi
![Page 21: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/8/8a/Web7.pdf · 16 Tipo de numeração Podemos começar a numeração por um número ou letra específica Para](https://reader034.vdocuments.mx/reader034/viewer/2022042414/5f2edcb81b5fb36e22221783/html5/thumbnails/21.jpg)
21
EXERCÍCIO 4
![Page 22: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/8/8a/Web7.pdf · 16 Tipo de numeração Podemos começar a numeração por um número ou letra específica Para](https://reader034.vdocuments.mx/reader034/viewer/2022042414/5f2edcb81b5fb36e22221783/html5/thumbnails/22.jpg)
22
Combinando Listas
Listas e “sub-listas”
As listas podem ser aninhadas
Quando se misturam listas é muito importante a ordem em que se abrem e fecham as tags
As tags devem estar corretamente aninhados (isto é, a primeira tag a ser aberta tem que ser a última a ser fechada)
![Page 23: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/8/8a/Web7.pdf · 16 Tipo de numeração Podemos começar a numeração por um número ou letra específica Para](https://reader034.vdocuments.mx/reader034/viewer/2022042414/5f2edcb81b5fb36e22221783/html5/thumbnails/23.jpg)
23
Combinando Listas
Exemplo:
<ol> <li>item de uma lista numerada</li> <li>item de uma lista numerada</li> <ul> <li>item de uma lista</li> </ul> <li>item de uma lista numerada</li> </ol>
![Page 24: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/8/8a/Web7.pdf · 16 Tipo de numeração Podemos começar a numeração por um número ou letra específica Para](https://reader034.vdocuments.mx/reader034/viewer/2022042414/5f2edcb81b5fb36e22221783/html5/thumbnails/24.jpg)
24
Combinando Listas
Resultado:
1. item de uma lista numerada 2. item de uma lista numerada
item de uma lista 3. item de uma lista numerada
![Page 25: INTRODUÇÃO AO DESENVOLVIMENTO WEBwiki.foz.ifpr.edu.br/wiki/images/8/8a/Web7.pdf · 16 Tipo de numeração Podemos começar a numeração por um número ou letra específica Para](https://reader034.vdocuments.mx/reader034/viewer/2022042414/5f2edcb81b5fb36e22221783/html5/thumbnails/25.jpg)
25
EXERCÍCIO 5