HTML Aula 2.

Tamanho: px

Começar a partir da página:

Download "HTML Aula 2."

Leonor Gesser Marinho
7 Há anos
Visualizações:

1 Aula 2 kawamoto@utfpr.edu.br

2 Parágrafos em HTML são delimitados pelas tags <p> e </p> Os parágrafos podem ser facilmente justificados à esquerda, ao centro ou à direita, especificando tal justificação no interior da etiqueta por meio de um atributo align. Um atributo é um parâmetro incluído na etiqueta que ajuda a definir o funcionamento dessa etiqueta

3 <p align="left">texto alinhado à esquerda</p> O resultado seria: Texto alinhado à esquerda Da mesma maneira podemos usar align: Center Right O valor left é padrão para atributo align

4 O atributo align pode ser usado em várias outras tags, como iremos ver futuramente (textos, imagens, etc.)

5 Considere um texto relativamente longo onde todos os parágrafos estão centralizados (por exemplo). Uma forma de simplificar o código e de evitar a introdução repetida do atributo align sobre cada uma de nossas etiquetas é utilizando a etiqueta <div>.

6 DIV é uma tag que insere uma divisão lógica no documento No caso de alinhamento, Esta tag por si só não serve para nada. Ela precisa estar acompanhada do atributo align, que nos permite alinhar qualquer elemento (parágrafo ou imagem) da maneira que nós desejarmos.

7 Assim, o código: HTML <p align= center">paragrafo1</p> <p align= center">parágrafo2</p> <p align= center">paragrafo3</p> É equivalente a: <div align="left"> <p>paragrafo1</p> <p>paragrafo2</p> <p>paragrafo3</p> </div>

8 Atividade Procurar o significado e escrever 1 (um) parágrafo para cada um dos seguintes termos: DNS PROXY HTTP HTTPS HTML FTP

9 Formatar os parágrafos de maneira que seja gerada uma página que tenha, nesta ordem: 2 parágrafos centralizados 3 parágrafos à direita Um salto triplo de linha 1 parágrafo alinhado à esquerda

10 Listas em HTML HTML Há 3 tipos de listas em HTML Listas desordenadas Listas ordenadas Listas de Definição

11 São delimitadas pelas etiquetas <ul> e </ul> (unordered list). Cada um dos elementos da lista é citado por meio de uma etiqueta <li> (não é preciso a tag de fechamento, ainda que exista nenhum inconveniente em colocá-la).

12 Exemplo <p>países do mundo</p> <ul> <li>brasil</li> <li>espanha</li> <li>austrália</li> </ul>

13 Podemos definir o tipo de marcador empregado para cada elemento. Para isso usamos o atributo type dentro da etiqueta de abertura <ul>, se queremos que o estilo seja válido para toda a lista, ou dentro da etiqueta <li> se queremos especificar um só elemento.

14 A sintaxe é a seguinte: <ul type="tipo de marcador"> E o tipo de marcador pode ser um dos seguintes: Circle Disc Square

15 Exemplo de lista com um quadrado ao invés de uma bolinha e, no último elemento, um círculo. <ul type="square"> <li>elemento 1</li> <li>elemento 2</li> <li>elemento 3</li> <li type="circle">elemento 4</li> </ul>

16 Listas ordenadas Neste caso, usaremos as etiquetas <ol> (ordered list) e seu fechamento. Cada elemento será igualmente precedido de sua etiqueta <li>.

17 Exemplo: <p>regras de comportamento em sala: </p> <ol> <li>o professor sempre tem a razão</li> <li>em caso de dúvida, aplicar a regra 1</li> </ol>

18 Do mesmo modo das listas desordenadas, as listas ordenadas oferecem a possibilidade de modificar o estil Para realizar tal seleção temos de utilizar, como para o caso anterior, o atributo type, o qual será situado dentro da etiqueta <ol>.

19 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 o (alterar os marcadores)

20 Exemplos: HTML <p>marcadores números</p> <ol type="1"> <li>elemento 1</li> <li>elemento 2</li> </ol> <p>marcadores letras</p> <ol type="a"> <li>elemento a</li> <li>elemento b</li> </ol>

21 Exemplos HTML <números romanos começando pelo 10</p> <ol type="i" start="10"> <li> Elemento x</li> <li> Elemento xi</li> </ol>

22 Listas de definição Cada elemento é apresentado junto com sua definição. A definição principal é <dl> e </dl> (definition list). As etiquetas do elemento e sua definição são <dt> (difinition term) e <dd> (definition definition) respectivamente.

23 Exemplo HTML <p>dicionário da Língua Portuguesa</p> <dl> <dt>açougue</dt> <dd>estabelecimento onde se vendem carnes frescas</dd> <dt>colheita</dt> <dd>ato de colher os produtos agrícolas</dd> </dl>

24 Observe que em cada linha <dd> está deslocada da direção da esquerda. Este tipo de etiquetas é usado muitas vezes com o propósito de criar textos mais ou menos deslocados da direção da esquerda.

25 Exemplo: <dl> <dd>primeiro nível de deslocamento <dl> <dd>segundo nível de deslocamento <dl> <dd>terceiro nível de deslocamento </dl> </dl> </dl>

26 Combinando listas Nada nos impede de utilizar todas estas tags de forma combinada como vimos em outros casos. Dessa forma, podemos conseguir listas mistas como, por exemplo:

27 <p>cidades do mundo</p> <ul> <li>brasil <ol> <li>rio de Janeiro <li>salvador </ol> <li>espanha <ol> <li>madrid <li>barcelona </ol> </ul>

28 Caracteres Especiais para não confundir com tags HTML &lt < &gt > &amp & &quot Outros em arquivo.doc

29 Atividade HTML Crie uma Página com a descrição do curso (disciplinas separadas por ano) Depois, para cada uma das disciplinas criar uma lista de definição contendo o que se vê (ementa) de cada disciplina

30 Atividade HTML Criar uma página com as regiões do Brasil, seus Estados, Capitais e principais cidades. Usar Cabeçalhos, Listas de Marcadores, Listas numeradas, e o que mais for conveniente

Documentos relacionados

Programação Web Prof. Wladimir

Programação Web Prof. Wladimir Linguagem HTML Listas e Formulários @wre2008 1 Sumário Listas Revisão da tag Criação de formulários HTML @wre2008 2 Listas As listas são utilizadas para citar, numerar