HTML: Recursos Básicos e Especiais

Transcrição

1 Linguagem de Programação para Web HTML: Recursos Básicos e Especiais Prof. Mauro Lopes

2 Objetivo Iremos aqui apresentar os recursos básicos e especiais do HTML. Serão apresentados, o uso de fontes, listas e imagens. O aluno deverá entender a sintaxe e a utilização dos elementos em um documento HTML. 2

3 Fontes e Cores Listas Listas Não Ordenadas Listas Ordenadas Listas de Definições Plano de Aula Imagens bordas/tamanhos/texto alternativo e alinhamento centralizado Textos e Imagens Efeitos com imagens 3

4 Fontes e Cores A formatação de fontes para ornamentar um documento HTML, deve ser implementada usando recursos baseados em CSS (Folhas de Estilo em Cascata); Para fazer a alteração das fontes de texto, bem como das cores de uma página, deve-se usar as tags <style> e </style> que permitem usar algumas propriedades CSS para definir formatações; Veremos agora algumas propriedades tais como: font-size font-family color background 4

5 Fontes e Cores Propriedade font-size (tamanho da fonte): Possui valores predefinidos como: xx-small extra extrapequeno x-small extrapequeno small pequeno medium médio x-large extragrande xx-large extra extragrande No entanto também é possível definir valores a partir de unidades de medida que podem ser absolutas ou relativas. 5

6 Fontes e Cores Propriedade font-size (tamanho da fonte): Medidas Absolutas: não permitem ajustes de tamanho de fonte nos programas de navegação; cm centímetro in polegadas mm milímetro pc pica pt pontos Medidas Relativas: permitem ajustes de tamanho de fonte nos programas de navegação; em tamanho relativo ao tamanho de uma outra fonte em uso % - para definir valor de ajuste com relação a outra fonte em uso ex tamanho horizontal com relação a outra fonte em uso px - pixels 6

7 Fontes e Cores Propriedade font-size (tamanho da fonte): Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 7

8 Fontes e Cores Propriedade font-family (família ou nome da fonte): Indica o nome de uma fonte específica a ser usada ou permite a definição de uma lista de fontes a serem utilizadas. Caso a primeira fonte não seja localizada no computador, ele procura pela próxima, e assim sucessivamente. É comum incluirmos na nossa lista de fontes, um nome genérico de um conjunto de fontes para dar a certeza de que será apresentado o conteúdo da página. Segue alguns nomes genéricos de conjunto de fontes: serif sans-serif cursive fantasy monospace 8

9 Fontes e Cores Propriedade font-family (família ou nome da fonte): Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 9

10 Fontes e Cores Propriedade color (cor da fonte): Há três maneiras de usarmos a propriedade color: Usando o nome da cor: color:red Usando o código hexadecimal da cor: color:#ff0000 Usando a função rgb( ): color:rgb(255,0,0) O padrão de cores utilizado em um computador é baseado no padrão RGB (Red, Green, Blue), que são as cores base para formação das demais cores; Para visualizar uma tabela de cores, acesse: 10

11 Fontes e Cores Propriedade color (cor da fonte): Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 11

12 Seções e Blocos de Texto <div> e <span> Podemos ir um pouco além da formatação do texto simples, e criar áreas de texto formatadas em nossa página. Para essa finalidade temos duas tags: <div> e </div> e <span> e </span> As tags <div> e </div> são usadas para determinar o agrupamento de blocos de tags em que uma determinada área deve ser dividida (quebrada) em seções, permitindo assim a aplicação de efeitos de formatação a um determinado bloco; As tags <span> e </span> são muito semelhantes às tags <div> e <div>, com a diferença que <span> é usada para formatar um trecho, uma frase, uma palavra ou uma letra de um texto; 12

13 Seções e Blocos de Texto <div> e <span> Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 13

14 Listas As listas são um tipo de recurso que cria uma estrutura padronizada para a apresentação de informações em tópicos; As listas podem ser utilizadas como um sumário, um resumo ou um menu de opções para acesso a outras páginas ou outras partes de um documento HTML; Existem três formas de apresentação da estrutura de lista: lista não ordenada lista ordenada lista de definição 14

15 Listas Listas Não Ordenadas As tags <ul> e </ul> (unordered list), em conjunto com as tags <li> e </li> (list item), são usadas na construção de uma lista não ordenada; <ul> e </ul>: definem o bloco do documento que será usado para apresentar elementos como tópicos; <li> e </li>: definem o texto que será apresentado, como conteúdo da lista; A estrutura de uma lista não ordenada aceita marcadores de tópico, que podem ser disc, circle ou square. Usaremos a propriedade liststyle-type para demonstrar seu uso; A estrutura de uma lista não ordenada aceita também uma imagem como marcador de tópico. Usaremos a propriedade list-style-image para demonstrar seu uso; 15

16 Listas Listas Não Ordenadas Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 16

17 Listas Listas Ordenadas As tags <ol> e </ol> (ordered list), em conjunto com as tags <li> e </li> (list item), são usadas na construção de uma lista ordenada; <ol> e </ol>: definem o bloco do documento que será usado para apresentar elementos como tópicos; <li> e </li>: definem o texto que será apresentado, como conteúdo da lista; A lista ordenada também permite a alteração de seus marcadores; 17

18 Listas Listas Ordenadas Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 18

19 Listas Listas de Definições As tags <dl> e </dl> (definition list), em conjunto com as tags <dt> e </dt> (definition term) ou com as tags <dd> e </dd> (definition description) são usadas na construção de uma lista de definições; <dl> e </dl>: definem o bloco do documento que será usado para apresentar elementos de definições; <dt> e </dt>: definem o texto que será apresentado, como conteúdo da lista. <dt> representa a palavra ou o termo a ser explicado; <dd> e </dd>: definem o texto que será apresentado, como conteúdo da lista. <dd> representa a explicação da palavra ou o termo indicado; 19

20 Listas Listas de Definições Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 20

21 Imagens Uma maneira de influenciar a estética e o visual de uma página é colocar imagens. Apesar de útil, esse recurso deve ser usado com muita cautela, pois o excesso de imagens em um site torna-o muitas vezes pesado ; Os formatos mais comuns de imagens são.gif,.jpg e.png, pois em média ocupam menos espaço de armazenamento; Formatos como.jpeg e.bmp devem ser evitados; Para incluir uma imagem em nosso documento iremos utilizar a tag orfã <img />; 21

22 Imagens Tag <img />, vamos ver alguns atributos: src: identifica o nome da imagem e o local em que se encontra armazenada (atributo obrigatório em HTML); alt: apresenta um texto alternativo ou explicativo, quando a ponteira do mouse fica sobre a imagem (atributo obrigatório em XHTML); title: mesma ação do alt; longdesc: indicação de ponto de ligação com texto explicativo longo; width: largura; height: altura; Uma observação importante é que a inserção de uma imagem deve ser posicionada dentro das tags <div> e </div>; 22

23 Tag <img />: INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA DO MARANHÃO IFMA Imagens Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 23

24 Imagens:bordas Além dos parâmetros anteriormente comentados, há algumas propriedades CSS que podem ser aplicadas a uma imagem. A propriedade border é uma delas; border: [comprimento] [estilo] [cor] Para o [estilo] temos: none: nenhuma linha e contorno é desenhada; dotted: linha de contorno de borda com pontos; dashed: linha de contorno de borda com pontos; double: linha de contorno de borda em formato duplo; groove, ridge,inset e outset: linha de contorno de borda com efeito 3D; 24

25 Imagens:bordas border: [comprimento] [estilo] [cor] Para o [comprimento] (espessura da linha) temos: thin: apresenta uma linha de borda fina; medium: apresenta uma linha de borda média; thick: mostra uma linha de borda grossa; personalizado: permite que se escolha a espessura de uma linha de borda nas unidades de medida em, ex, px, in, cm, mm, pt e pc; border: [comprimento] [estilo] [cor] Para a [cor] temos: Para escolher as cores de uma borda, podem ser usados os nomes das cores, os código hexadecimais ou os códigos decimais com a função rgb(); 25

26 Imagens:bordas border: [comprimento] [estilo] [cor] Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 26

27 Imagens: tamanhos, texto alternativo e alinhamento centralizado Tamanhos: width (comprimento) e height (altura): O valor dos parâmetros width e height da tag <img /> pode ser fornecido em quantidade de pixels ou no formato percentual: Texto alternativo (alt e title): Podemos usar breves textos explicativos que são apresentados quando o ponteiro do mouse fica sobre uma imagem por mais de um segundo. Esse efeito é gerado pelos parâmetros alt e title. alt: breve texto explicativo no Internet Explorer (Atualmente o IE já aceita também o title) title: breve texto explicativo no Mozilla Firefox Alinhamento centralizado: Conseguiremos esse efeito usando a tag <div> e um alinhamento de texto centralizado (propriedade text-align); 27

28 Imagens: tamanhos, texto alternativo e alinhamento centralizado Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 28

29 Textos e Imagens Propriedade float e clear: Podemos usar um texto junto com uma imagem. Este efeito é muito comum em notícias em sites desta natureza (globo, terra ou uol). A imagem pode ser posicionada à esquerda ou à direita e o texto ficar ao lado da imagem. Para conseguir este efeito usamos as propriedade float e clear: float: permite flutuar o elemento para o lado esquerdo (left) ou para o lado direito (right); clear: usado para indicar qual lado do elemento apresentado pode ficar limpo: o esquerdo (left), o direito (right) ou ambos os lados (both); 29

30 Propriedade float e clear: Textos e Imagens Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 30

31 Efeitos com Imagens Linha Horizontal de Separação: Uso em conjunto com a tag <div>; Papel de Parede: Uso da propriedade background-image; Lista Não Ordenada com Imagens: Uso da propriedade list-style-image; Imagem como Ponto de Ligação: Uso em conjunto com a tag <a>; Vamos ver na prática!!! Acompanhe o exemplo exposto pelo Professor. 31

32 Perguntas Página do Professor Mauro: 32

33 Próxima Aula... Recursos Complementares (Tabelas e Formulários). 33

34 Referências Materiais avulsos da Internet e o Livro Guia de Orientação e Desenvolvimento de Sites - Html, Xhtml, Css e Javascript / Jscript, Jose Augusto N. G. Manzano, 1ª Edição - Editora Érica, 382 páginas. 34