PAGINAS DA INTERNET HTML, Esquemas de Informática

Baixe PAGINAS DA INTERNET HTML e outras Esquemas em PDF para Informática, somente na Docsity!

LISTAS

COM HTML

M01C

LISTAS COM HTML

★ Listas são importantes

★ Facilitam a leitura

★ Organizam o conteúdo

★ Simplificam a apresentação dos itens

★ Viu como é simples?

★ Quer aprender como se faz?

★ Vem comigo!

A tag

possui um parâmetro type, onde configuramos o tipo de marcador da lista atual. As opções de valores para esse parâmetro são: ‣ 1 - Valor padrão. Cria listas numeradas. Ex: 1, 2, 3, 4, … ‣ A - Cria listas alfabéticas em maiúsculas. Ex: A, B, C, D, … ‣ a - Cria listas alfabéticas em minúsculas. Ex: a, b, c, d, … ‣ I - Cria listas com algarismos romanos em maiúsculas. Ex: I, II, III, IV, … ‣ i - Cria listas com algarismos romanos em minúsculas. Ex: i, ii, iii, iv, … Você também pode indicar o início da contagem usando o parâmetro start. Por exemplo, a tag
vai gerar itens numerados como V, VI, VII, VIII, IX, … Listas não Ordenadas Se você compreendeu a criação de listas ordenadas, com certeza vai entender as unordered lists , também chamadas de listas com marcadores, que são aquelas onde a ordem dos itens não influenciará no significado da lista. Ela é apenas uma ótima maneira para organizar os itens que não apresentam uma classificação necessariamente. Para criar uma unordered list , vamos usar a tag
para delimitar a lista e a tag
• para criar cada um dos seus itens internos. O marcador padrão é a bolinha preta totalmente preenchida (circle), mas existe a opção de configurar a propriedade type da tag
  com os seguintes valores: ‣ disc - padrão. Uma bola preta totalmente pintada ‣ circle - Uma bola com uma borda preta e sem preenchimento ‣ square - Um pequeno quadrado preto totalmente pintado

  Misturando as coisas Podemos também criar listas mistas, configurando listas dentro de outras listas. Veja o exemplo a seguir: O resultado visual do código que vimos anteriormente será semelhante ao que temos a seguir: Note que os itens da lista interna (a, b, c, …) está deslocado para a direita em relação ao item 2, do qual essa sub-lista é filha. Exercício proposto Crie seu próprio código e faça a seguinte lista aninhada com seus jogos favoritos de acordo com a plataforma. DICA: Além de aninhar listas ordenadas, podemos juntar listas

  com
  e vice-versa. As listas internas sempre terão deslocamento interno para a direita.

  O resultado visual dessa lista aplicado pelo navegador é: Cada navegador pode mostrar um resultado ligeiramente diferente para listas de definição, mas o que mais importa é o significado desse tipo de listagem, pois ele relaciona diretamente os pares Termo + Descrição e isso nos ajuda bastante com mecanismos de busca. Hora de exercitar Chegou a hora de acessar o endereço do nosso repositório público em

  https://gustavoguanabara.github.io/html-css/

  exercicios/ e executar o exercício 009 no seu computador. Agora

  tente atingir esse mesmo resultado em casa, sem copiar o código que eu criei. Nesse momento, a prática é algo que você mais precisa. Se por acaso ficar difícil, pode acessar o repositório público de HTML e CSS e dar uma olhada nos comandos, mas EVITE COPIAR. Quer acompanhar tudo em vídeo? Eu sei que às vezes as pessoas gostam mais de assistir vídeos do que ler livros, e é por isso que eu lanço há anos materiais no canal Curso em Vídeo no YouTube. O link que vou compartilhar contigo faz parte da playlist completa onde você encontra o Módulo 1 do Curso de HTML5 e CSS3 , completamente gravado com base nesse material. Além de acessar o link a seguir, você também pode ter acesso às aulas apontando a câmera do seu celular para o código QR ao lado. Todo dispositivo smartphone ou tablet atualizado já possui esse recurso de leitura de códigos habilitado por padrão. Módulo 1 do curso: https://www.youtube.com/ p l a y l i s t? l i s t = P L H z _ A r e H m 4 d k Z 9 - atkcmcBaMZdmLHft8n

  Teste seus conhecimentos Terminou de ler esse capítulo e já acompanhou todos os vídeos e referências externas que indicamos? Pois agora, responda a essas 10 perguntas objetivas e marque em cada uma delas a única opção verdadeira. Aí sim, você vai poder comprovar que realmente entendeu o conteúdo.

  1. Em HTML5, temos vários tipos de lista. Qual dos itens a seguir não é um tipo de lista suportado pela linguagem? lista ordenada lista não ordenada lista semi ordenada lista de definição
  2. Na construção das listas ordenadas e nas não ordenadas, o uso de uma das tags se repete nos dois casos. Que tag é essa?

     2. Para criar uma lista ordenada, devemos limitar todos os seus itens dentro de um par único de tags:
        e
        e

        e

        e
        4. Segundo as novas normas da W3C, qual das tags de lista a seguir é a única que possui fechamento opcional?
        1. 5. Em listas ordenadas, podemos usar o parâmetro _____ para modificar o formato da contagem e o parâmetro ____ para mudar o número inicial da contagem. type / init style / start type / start style / init 6. Ao personalizar a numeração de uma lista ordenada, podemos indicar vários tipos de contagem. Qual das opções a seguir é a única que não pode ser usada para essa personalização? 1 A I X

        Suas anotações Não guarde conhecimento. Ele é livre. Compartilhe o seu e veja ele se espalhando pelo mundo 🌎

        _________________________________________________________

        __________________________________________________________

        __________________________________________________________

        __________________________________________________________

        __________________________________________________________

        __________________________________________________________

        __________________________________________________________

        __________________________________________________________

        __________________________________________________________

        __________________________________________________________

        __________________________________________________________

        __________________________________________________________

        __________________________________________________________

        __________________________________________________________

        __________________________________________________________

        __________________________________________________________

        __________________________________________________________

        __________________________________________________________

        __________________________________________________________

        __________________________________________________________

        __________________________________________________________

        __________________________________________________________

        __________________________________________________________

        __________________________________________________________

        __________________________________________________________

        __________________________________________________________

        __________________________________________________________

        __________________________________________________________

        __________________________________________________________

        __________________________________________________________

        __________________________________________________________

        __________________________________________________________

        __________________________________________________________

        __________________________________________________________

        __________________________________________________________