A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

HTML - CSS – Felippe M Zancarli HTML Material desenvolvido por Alan Carvalho.

Apresentações semelhantes


Apresentação em tema: "HTML - CSS – Felippe M Zancarli HTML Material desenvolvido por Alan Carvalho."— Transcrição da apresentação:

1 HTML - CSS – Felippe M Zancarli HTML Material desenvolvido por Alan Carvalho

2 HTML - CSS – Felippe M Zancarli Objetivos Introduzir conceitos fundamentais sobre a Web, como hipertexto, hipermídia, linguagens de marcação e outros. Permitir que o Aluno conheça e saiba aplicar recursos da linguagem de marcação de hipertexto HTML na criação de sites. Permitir que o Aluno conheça e saiba aplicar recursos da linguagem de definição de estilos CSS na criação de sites.

3 HTML - CSS – Felippe M Zancarli Conceitos Fundamentais sobre a Web HTML CSS Tópicos Principais

4 HTML - CSS – Felippe M Zancarli Conceitos Fundamentais sobre a Web

5 HTML - CSS – Felippe M Zancarli 1 Conceito de Hipertexto O que é a World Wide Web Origem da Web Características da Web W3 Consortium Introdução

6 HTML - CSS – Felippe M Zancarli Conceito de Hipertexto Hipertexto é um texto construído para ser não- linear, contendo pontos de ligação para outros textos. Hipermídia é um termo usado para hipertexto que não é formado somente por texto, mas por imagens, vídeo ou sons, por exemplo. Ted Nelson definiu o termo hipertexto por volta de 1965 e provavelmente hipermídia também.

7 HTML - CSS – Felippe M Zancarli O que é a World Wide Web Numa tradução livre do original obtido no W3 Consortium: A WorldWideWeb (W3) é uma iniciativa de larga escala para acesso e recuperação de documentos por hipermídia, com o intuito de permitir acesso universal a uma grande variedade de documentos.

8 HTML - CSS – Felippe M Zancarli Origem da Web (1/2) Em 1989, Tim Berners-Lee e Robert Caillau começaram a pensar num modelo de sistema de integração de documentos que pudesse ser usado pelos diferentes tipos de computadores do CERN (laboratório de pesquisa nuclear onde trabalhavam, em Genebra). Não havia uma linguagem comum que permitisse essa integração. Alguns usavam PostScript, TeX e SGML.

9 HTML - CSS – Felippe M Zancarli Origem da Web (2/2) A partir da linguagem de marcação SGML eles projetaram a linguagem HTML e o protocolo HTTP, para transporte dos dados através da rede. O projeto foi iniciado em 1989 e em 1992 a Web passou a existir como parte da Internet.

10 HTML - CSS – Felippe M Zancarli Características da Web (1/3) Fornecer um meio simples de buscar informações armazenadas em sistemas remotos, de forma que possam ser lidas por seres humanos. Permitir que a informação possa ser definida em um formato comum entre fornecedor e consumidor da informação. Permitir a exibição de textos e gráficos nos diversos dispositivos existentes.

11 HTML - CSS – Felippe M Zancarli Características da Web (2/3) Permitir a criação e manutenção de conjuntos de documentos por seus próprios autores. Permitir a ligação entre esses documentos ou conjuntos de documentos. Permitir um meio de busca, baseado em palavras-chave, além de poder ser navegada através dos links.

12 HTML - CSS – Felippe M Zancarli Características da Web (3/3) Permitir o uso de software de domínio público, livre de taxas e que este possa fazer a interface com eventuais sistemas proprietários.

13 HTML - CSS – Felippe M Zancarli W3 Consortium (1/2) É uma associação de empresas, entidades de pesquisa e grupos de usuários ao redor do mundo com o intuito de definir especificações técnicas que regulem o funcionamento da Web. Possui hoje mais de 500 membros, entre eles Netscape, Microsoft, IBM, Novell, Cisco, entre outros.

14 HTML - CSS – Felippe M Zancarli W3 Consortium (2/2) Exemplos: HTML, HTTP, CSS, SMIL, PICS, XHTML, SVG, PNG, DOM, XML etc. Todas as especificações estão disponíveis para consulta e, em alguns casos, download.

15 HTML - CSS – Felippe M Zancarli

16 HTML

17 HTML - CSS – Felippe M Zancarli 2 Introdução O que é a HTML Tags e Atributos Estrutura Básica de uma Página Ambiente de Desenvolvimento Publicação e Recuperação

18 HTML - CSS – Felippe M Zancarli O que é a HTML HTML (HyperText Markup Language) é a língua padrão para publicação de hipertexto e hipermídia na Web. É uma linguagem baseada na SGML, mas sem a complexidade dessa última. HTML não é uma linguagem de programação.

19 HTML - CSS – Felippe M Zancarli Tags ou Elementos Tags ou elementos são marcações que permitem definir a estrutura do documento. conteúdo Algumas tags não possuem o respectivo fechamento

20 HTML - CSS – Felippe M Zancarli Atributos (1/2) São propriedades relativas às tags, que possuem valores definidos por default ou pelo autor do documento. conteúdo Nem todas as tags têm atributos

21 HTML - CSS – Felippe M Zancarli Atributos (2/2) Quando a tag tiver vários atributos, estes devem aparecer separados por um espaço. É recomendado que seus valores sejam escritos entre aspas. Não é necessário escrever os atributos no fechamento da tag. A ordem dos atributos dentro de uma tag não é importante.

22 HTML - CSS – Felippe M Zancarli Estrutura Básica de uma Página Uma página típica possui: Document Type Definition (às vezes) A tag Uma seção delimitada pela tag Em alguns casos usa-se a tag

23 HTML - CSS – Felippe M Zancarli DTD (1/4) A DTD (Document Type Definition) é uma declaração SGML colocada no início do documento. Define o dicionário utilizado na construção da página. Importante no processo de validação. Opcional nos outros casos, em se tratando de HTML.

24 HTML - CSS – Felippe M Zancarli DTD (2/4) Na HTML 4 existem três DTDs: Strict – inclui todos os elementos que não foram considerados depreciados ou não aparecem em definições de framesets.

25 HTML - CSS – Felippe M Zancarli DTD (3/4) Transitional – inclui a Strict DTD e todos os elementos considerados depreciados. É considerada uma forma de manter a compatibilidade com versões anteriores da HTML.

26 HTML - CSS – Felippe M Zancarli DTD (4/4) Frameset – inclui todos os elementos necessários para a criação de frames.

27 HTML - CSS – Felippe M Zancarli Colocada após a DTD e fechada no final da página, define que a página é um documento HTML. É opcional e considerada depreciada quando se declara a DTD pois acaba sendo redundante.

28 HTML - CSS – Felippe M Zancarli Colocada logo após a tag ou a DTD. Opcional porém, se usada, precisa ser aberta e fechada. Define uma seção da página onde aparecem informações sobre a mesma como título e palavras-chave para pesquisa.

29 HTML - CSS – Felippe M Zancarli Opcional e definida dentro da seção aberta por. Toda página deve ter um título. Precisa ser aberta e fechada. Alguns browsers podem ler o título para pessoas com limitações visuais.

30 HTML - CSS – Felippe M Zancarli Opcional e definida após o final da seção aberta por. Se for utilizada, precisa ser aberta e fechada. Define a seção onde o conteúdo da página é inserido, seja ele texto, imagem, animação, som, vídeo etc.

31 HTML - CSS – Felippe M Zancarli Web Sites - HTML A Linguagem HTML HTML e a linguagem fundamental para marcacao de hipertexto e publicacao de conteudo na World Wide Web.

32 HTML - CSS – Felippe M Zancarli Ambiente de Desenvolvimento Ambiente básico de desenvolvimento: Editor de textos que salve em formato ASCII sem formatação. Browsers para testar as páginas –Microsoft Internet Explorer –Netscape Communicator 4.7x –Netscape 6.01

33 HTML - CSS – Felippe M Zancarli Ambiente de Desenvolvimento Outros softwares, como editores WYSIWYG (ou quase), podem aumentar a produtividade do desenvolvedor, desde que este saiba o que está fazendo. Macromedia Dreamweaver Adobe GoLive Microsoft FrontPage Allaire HomeSite

34 HTML - CSS – Felippe M Zancarli Publicação e Recuperação (1/3) Os documentos (páginas) e todos os arquivos que compõem o site necessitam ser disponibilizados para visualização a partir de um servidor Web ou servidor HTTP. Para isso, utiliza-se algum software que trabalhe com o protocolo FTP ou a simples gravação dos arquivos em algum diretório configurado para receber o site no disco do servidor Web.

35 HTML - CSS – Felippe M Zancarli Publicação e Recuperação (2/3) Após a publicação, as páginas estão disponíveis para visualização através do browser. Para acessar uma página qualquer: 1. O visitante requisita a URL da página no browser. 2. O browser envia através da rede a requisição para o servidor.

36 HTML - CSS – Felippe M Zancarli Publicação e Recuperação (3/3) 3. O servidor recebe a solicitação e pesquisa na estrutura de diretórios se a página desejada existe. Se não existir: devolve uma mensagem de erro Se existir: envia a página para o browser, que começa a interpretar e exibir seu conteúdo 4. Para cada arquivo referenciado na página, uma nova requisição será feita pelo browser.

37 HTML - CSS – Felippe M Zancarli

38 3 Formatação de Página e Texto Cores de Texto e Fundo Cabeçalhos Parágrafos e Blocos Negrito, Itálico, Sublinhado e outros efeitos Réguas Definindo Características de Fonte Listas

39 HTML - CSS – Felippe M Zancarli O sistema sRGB (1/2) As cores são definidas por tons de vermelho (R), verde(G) e azul(B). São 255 tons para cada cor, formando aproximadamente 16M cores definidas por um código hexadecimal de seis dígitos. Em alguns casos, o nome da cor pode ser usado no lugar do código. Uso da paleta segura de 216 cores.

40 HTML - CSS – Felippe M Zancarli O sistema sRGB (2/2)

41 HTML - CSS – Felippe M Zancarli Acentuação Não se recomenda acentuar o texto diretamente, como se estivesse usando um processador de textos. No lugar disso, recomenda-se usar as chamadas referências de caracteres, que são códigos para símbolos especiais, como acentos e outros sinais. Na especificação HTML existe a relação completa de códigos.

42 HTML - CSS – Felippe M Zancarli Cores de Texto e Fundo bgcolor – define a cor de fundo text – define a cor do texto Se não definidas, usa-se o padrão do browser. A cor obedece ao padrão sRGB (single RGB) e pode ser definida com seu nome ou código hexadecimal.

43 HTML - CSS – Felippe M Zancarli Cabeçalhos texto Define um padrão de título O n é um número de 1 a 6 (1 é o maior título; 6 é o menor título) O atributo align permite definir o alinhamento do cabeçalho ( left, right, center ou justify ).

44 HTML - CSS – Felippe M Zancarli Parágrafos e Quebras de Linha São definidos pela tag, que tem seu fechamento opcional. texto Os parágrafos serão separados por uma linha em branco. As quebras de linha são definidas pela tag, que não tem fechamento.

45 HTML - CSS – Felippe M Zancarli Blocos Definidos pela tag, que tem seu fechamento obrigatório. texto Muito utilizados na definição de camadas para efeitos de HTML dinâmica. Assemelham-se também a parágrafos.

46 HTML - CSS – Felippe M Zancarli Efeitos de Texto texto - negrito texto - itálico texto - sublinhado texto - sobrescrito (expoente) texto - subscrito (índice) texto - aumenta o texto texto - diminue o texto texto - usa fonte monoespaçada texto - obedece formatação

47 HTML - CSS – Felippe M Zancarli Réguas Definidas pela tag, que não têm fechamento. width – largura da régua align – alinhamento horizontal size – espessura da linha em pixels noshade – se definido, preenche a linha

48 HTML - CSS – Felippe M Zancarli Definindo Fontes Através da tag, cujo fechamento é obrigatório, definem-se três atributos para a fonte. texto size – tamanho do texto (entre 1 e 7) color – cor (código ou nome) face – lista de tipos

49 HTML - CSS – Felippe M Zancarli Definindo Fontes O nome da fonte não é case-sensitive. Caso o usuário não tenha a 1ª fonte da lista instalada em seu computador, será assumida a próxima fonte e assim sucessivamente, até utilizar a fonte padrão do browser. Não há uma correspondência entre o tamanho da cor e qualquer medida tipográfica (pt, por exemplo).

50 HTML - CSS – Felippe M Zancarli Listas Usadas para exibir listas de ítens. Podem ser: Não-ordenadas Ordenadas Definição

51 HTML - CSS – Felippe M Zancarli Listas Não-Ordenadas (1/2) Definidas pela tag, com seu respectivo fechamento e pela tag, sem necessidade de fechamento. Software Hardware Manuais

52 HTML - CSS – Felippe M Zancarli Listas Não-Ordenadas (2/2) As tags e aceitam o atributo type, que define o tipo do marcador ( circle, square ou disc ). Software Hardware Manuais

53 HTML - CSS – Felippe M Zancarli Listas Ordenadas (1/3) Definidas pela tag, com seu respectivo fechamento e pela tag, sem necessidade de fechamento. Software Hardware Manuais

54 HTML - CSS – Felippe M Zancarli Listas Ordenadas (2/3) As tags e aceitam o atributo type, que define o estilo de numeração ( 1, A, a, I ou i ). Software Hardware Manuais

55 HTML - CSS – Felippe M Zancarli Listas Ordenadas (3/3) A tag aceita o atributo start, que define o valor inicial para os elementos da lista. Software Hardware Manuais

56 HTML - CSS – Felippe M Zancarli Listas de Definição (1/2) Permitem listar tópicos e suas definições, numa idéia de sumário inicia e termina a lista - define um tópico - define o texto desse tópico

57 HTML - CSS – Felippe M Zancarli Listas de Definição (2/2) HTML Linguagem de marcacao usada na Web JavaScript Linguagem de scripts usada para automacao de paginas ASP Tecnologia que permite criar conteudo dinamico

58 HTML - CSS – Felippe M Zancarli

59 4 Tipos de Imagens Aceitas A tag Definindo a URL Definindo Texto Alternativo Definindo as Dimensões Definindo o Alinhamento Definindo o Espaçamento Plano de Fundo Inserindo Imagens

60 HTML - CSS – Felippe M Zancarli Tipos de Imagens Aceitas GIF (Graphical Interchange Format) JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics) Esses tipos de arquivo proporcionam compressão com boa qualidade de apresentação. Imagens de outros tipos devem ser convertidas.

61 HTML - CSS – Felippe M Zancarli A tag A tag é usada para inserir uma imagem em qualquer parte do conteúdo de uma página. Ela não possui fechamento, pois não delimita uma área da página para inserção da imagem. Quanto maior o tamanho do arquivo da imagem, mais tempo levará para seu download.

62 HTML - CSS – Felippe M Zancarli Definindo a URL (1/2) Define a URL da imagem a ser inserida na página para exibição. Pode ser uma URL relativa ou absoluta. O arquivo poderá fazer parte de outro site, desde que não infrinja a legislação de direitos autorais.

63 HTML - CSS – Felippe M Zancarli Definindo a URL (2/2) A URL relativa baseia-se na URL da página. A URL absoluta é o caminho completo para o recurso. Usar imagens de outro site tem algumas desvantagens. Se a imagem não for encontrada ou carregada, aparecerá algum sinal indicativo em seu lugar.

64 HTML - CSS – Felippe M Zancarli Definindo Texto Alternativo Caso o browser não possa exibir imagens, pode ser definido um texto alternativo, que aparecerá no espaço destinado à imagem. Essa é uma prática recomendada. O atributo ALT permite definir o texto alternativo. Alguns desenvolvedores colocam o tamanho do arquivo no texto.

65 HTML - CSS – Felippe M Zancarli Definindo as Dimensões Normalmente, as imagens são exibidas em seu tamanho natural. Pode-se mudar o tamanho da imagem na tela, declarando suas novas dimensões ( WIDTH para largura e HEIGHT para altura) em pixels ou usando uma porcentagem. Somente uma das medidas pode ser informada. O ajuste é feito automaticamente. É recomendado definir esses atributos.

66 HTML - CSS – Felippe M Zancarli Definindo o Alinhamento O alinhamento da imagem é em relação ao conteúdo inserido logo após essa imagem. O atributo usado para isso é ALIGN e seus valores podem ser bottom, middle, top, left e right. Cada browser pode interpretar esses valores de forma diferente. Não é vantajoso em todos os casos.

67 HTML - CSS – Felippe M Zancarli Definindo o Espaçamento Serve como uma espécie de margem ao redor da figura, separando-a do conteúdo que aparece antes e após a figura. Existem dois atributos que definem os espaçamentos: VSPACE (vertical) e HSPACE (horizontal), definidos em pixels. Servem como paliativo para posicionamento da imagem.

68 HTML - CSS – Felippe M Zancarli Plano de Fundo Define uma figura para servir como papel de parede da página. A figura é repetida por toda a página. A cor de fundo fica atrás da figura. Quanto menor o tamanho do arquivo, melhor. Cuidado com as cores e padrão da figura.

69 HTML - CSS – Felippe M Zancarli

70 5 A tag Definindo a URL Links para Arquivos Links para Criando Âncoras (bookmarks) Cores dos Links Mapas de Imagem Criando Links

71 HTML - CSS – Felippe M Zancarli A tag A tag permite definir links, que são regiões de uma página que servirão de ponto de acesso para qualquer URL. Essa tag precisa ser fechada, quando usada. Os links são destacados no browser por default; geralmente o texto fica sublinhado e as figuras com uma borda ao seu redor.

72 HTML - CSS – Felippe M Zancarli Definindo a URL Use conteúdo A URL pode ser relativa ou absoluta. A URL pode ser qualquer arquivo ou recurso disponível na rede. Se a URL não existir, será retornada uma mensagem 404 Error para o browser.

73 HTML - CSS – Felippe M Zancarli Links para Arquivos Basta que o link aponte para uma URL referente a um arquivo. Se o tipo do arquivo for reconhecido pelo browser, ele poderá ser aberto. Caso não seja, aparecerá a caixa para que o usuário defina o que fará com o arquivo. Possibilidade de criar links de download.

74 HTML - CSS – Felippe M Zancarli Links para conteúdo O software de do usuário será acionado automaticamente, caso esteja instalado e configurado corretamente. Não há segurança de que a mensagem será enviada.

75 HTML - CSS – Felippe M Zancarli Criando Âncoras (1/2) Âncoras ou bookmarks são pontos determinados dentro de uma página para os quais é possível criar links. Isso permite que sejam criados links para outras partes dentro da mesma página, facilitando a navegação quando o conteúdo da página é longo. Ex: FAQ (Frequently Asked Questions)

76 HTML - CSS – Felippe M Zancarli Criando Âncoras (2/2) Cria a âncora. conteúdo Permite o acesso a essa âncora.

77 HTML - CSS – Felippe M Zancarli Cores dos Links link – os links para páginas que ainda não foram visitadas. vlink – os links para páginas que já foram visitadas. alink – o link ativo (o último link acionado) A relação de páginas acessadas fica no histórico do browser.

78 HTML - CSS – Felippe M Zancarli Mapas de Imagem (1/7) Permite definir mais de um link para uma mesma imagem. O link é relativo a uma determinada região da imagem, delimitada por coordenadas relativas ao primeiro pixel (0,0) da imagem. Três tipos de regiões podem ser definidas: Círculos – Retângulos (ou quadrados) – Polígonos (formas irregulares)

79 HTML - CSS – Felippe M Zancarli Mapas de Imagem (2/7) O mapa de imagem é uma espécie de gabarito de links aplicado sobre uma determinada imagem. Todo mapa deve ter um nome, para que possa ser vinculado a uma imagem. Para dar o nome ao mapa, usa-se a tag, que precisa ser fechada. dados

80 HTML - CSS – Felippe M Zancarli Mapas de Imagem (3/7) Para marcar regiões circulares: x,y – coordenadas do centro do círculo z – raio do círculo em pixels

81 HTML - CSS – Felippe M Zancarli Mapas de Imagem (4/7) Para marcar regiões retangulares: Cada par representa um dos cantos opostos do retângulo (ou quadrado).

82 HTML - CSS – Felippe M Zancarli Mapas de Imagem (5/7) Para marcar regiões irregulares: x e y – coordenadas que marcam cada vértice do polígono

83 HTML - CSS – Felippe M Zancarli Mapas de Imagem (6/7) Para vincular o mapa à imagem:

84 HTML - CSS – Felippe M Zancarli Mapas de Imagem (7/7) Os editores de sites (FrontPage, DreamWeaver etc) têm recursos para criação facilitada de mapas de imagens. Existem softwares especialmente desenvolvidos para a criação de mapas de imagens.

85 HTML - CSS – Felippe M Zancarli

86 6 Definindo a Tabela Definindo Linhas e Dados Largura de Tabela e Células Alinhamento de Tabela, Linhas e Células Cores e Fundos Expandindo Células Espaçamento entre Células Tabelas

87 HTML - CSS – Felippe M Zancarli Definindo a Tabela Tabelas são usadas não só para exibir dados em formato de linhas ou colunas, mas principalmente para controlar o posicionamento de imagens e textos em uma página. A tag é usada para criar tabelas. Deve ser aberta e fechada.

88 HTML - CSS – Felippe M Zancarli Definindo Linhas e Dados Use para definir cada linha de dados. Essa tag pode ou não ser fechada. Use ou para definir cada célula que faça parte de uma determinada linha. Essas tags podem ou não ser fechadas. A tag coloca automaticamente os dados em negrito e centralizados.

89 HTML - CSS – Felippe M Zancarli Largura de Tabela e Células O atributo width pode ser usado tanto na tabela (tag ) como nas células (tags ou ). A largura pode ser em pixels ou em porcentagem. Se a largura da tabela for em porcentagem, esta se adaptará ao espaço da janela do browser.

90 HTML - CSS – Felippe M Zancarli Alinhamento O atributo align pode ser usado na tabela, linhas e células, controlando o alinhamento horizontal dos dados. O atributo valign pode ser usado nas linhas e células, controlando o alinhamento vertical dos dados.

91 HTML - CSS – Felippe M Zancarli Cores e Fundos A tabela é transparente. Por isso, assume a cor de fundo da página. O atributo bgcolor pode ser usado na tabela, linhas e células para definir a cor de fundo. O atributo background não faz parte da especificação padrão HTML e é tratado de formas diferentes pelos browsers.

92 HTML - CSS – Felippe M Zancarli Expandindo Células O atributo colspan permite estender o alcance de uma célula por diversas colunas na tabela. O atributo rowspan permite estender o alcance de uma célula por diversas linhas na tabela.

93 HTML - CSS – Felippe M Zancarli Espaçamento entre Células O atributo cellspacing controla o número de pixels entre as células. O atributo cellpadding controla o número de pixels dentro das células.

94 HTML - CSS – Felippe M Zancarli

95 7 Formulários Considerações Iniciais Definindo o Formulário Definindo Controles Tipos de Controles Controle de Tabulação Teclas de Acesso Evitando o Acesso a Controles Definindo o Envio

96 HTML - CSS – Felippe M Zancarli Considerações Iniciais No que se refere à HTML, é importante notar que é possível apenas criar a interface, ou seja, definir os campos com suas características básicas. Não se consegue implementar qualquer espécie de programação ou interação com bancos de dados em HTML, para o que são necessárias outras linguagens e tecnologias como JavaScript, ASP, PHP etc.

97 HTML - CSS – Felippe M Zancarli Definindo o Formulário (1/2) A tag é usada para definir o início e o final do formulário. É necessário fechar essa tag. Na tag existem diversos atributos que definem o endereço de destino dos dados, bem como a forma de codificação dos dados e o método de envio. Esses atributos serão vistos nesse Capítulo.

98 HTML - CSS – Felippe M Zancarli Definindo o Formulário (2/2) Existem diversos tipos de campos, semelhantes aos encontrados em caixas de diálogo de diversos softwares, de forma que o preenchimento do formulário é, até certo ponto, conhecido pela maior parte dos usuários. Quaisquer limites e/ou restrições devem ser indicadas no formulário e geralmente usam-se legendas para isso.

99 HTML - CSS – Felippe M Zancarli Definindo Controles Controle é o nome que se dá a cada campo do formulário. Todo controle possui um atributo ( name ) que o identifica. Todo controle possui valores iniciais (default) ou definidos pelo usuário quando do preenchimento do formulário. Todos os valores decorrentes do preenchimento do formulário são considerados texto.

100 HTML - CSS – Felippe M Zancarli Texto Simples Exibe uma única linha de texto, na qual pode ser inserida qualquer espécie de caractere. São usadas para nomes, endereços, endereços de , CEP, números, CPF, RG etc. Essa tag não possui fechamento.

101 HTML - CSS – Felippe M Zancarli Caixa de Texto Exibe uma caixa de texto que pode ser dimensionada pelo desenvolvedor. Qualquer espécie de caractere pode ser inserida nessa caixa e não há como definir limite de caracteres. valordefault O fechamento dessa tag é necessário.

102 HTML - CSS – Felippe M Zancarli Caixa de Seleção (combo) – 1/2 Exibe um menu com diversas opções, sendo que o usuário pode selecionar uma ou mais opções. É necessário fechar essa tag.

103 HTML - CSS – Felippe M Zancarli Caixa de Seleção (combo) – 2/2 A tag define cada opção do menu. O fechamento dessa tag é opcional. Texto O valor representa a informação atribuída ao campo se a opção for escolhida. Se o atributo selected for usado, a opção virá previamente selecionada, sendo que o default é a primeira opção.

104 HTML - CSS – Felippe M Zancarli Checkbox É uma caixa do tipo liga/desliga que pode ser modificada livremente pelo usuário. Se o atributo checked for usado, a caixa virá ligada por default. Essa tag não possui fechamento.

105 HTML - CSS – Felippe M Zancarli Radio São botões semelhantes a checkboxes, mas que são de escolha mutuamente exclusiva, ou seja, em um grupo de botões, apenas um deles pode ser selecionado. Essa tag não possui fechamento. Os nomes dos botões em um grupo precisam ser os mesmos.

106 HTML - CSS – Felippe M Zancarli Campos Ocultos São usados geralmente quando é necessário enviar alguma espécie de informação que não deva ser alterada pelo usuário, pois o campo não aparece para modificação. Essa tag não possui fechamento.

107 HTML - CSS – Felippe M Zancarli Senha Semelhante à caixa de texto de uma linha, na qual aparecem asteriscos durante a digitação dos dados. Esse campo não possui qualquer segurança do tipo criptografia; apenas exibe os asteriscos. Essa tag não possui fechamento.

108 HTML - CSS – Felippe M Zancarli Arquivo Permite a seleção de um arquivo no disco do computador do visitante. Esse campo é geralmente usado para permitir upload de arquivos, mas necessita de um script auxiliar (ASP, PHP, CGI) para que o envio do arquivo funcione. Essa tag não possui fechamento.

109 HTML - CSS – Felippe M Zancarli Botões (1/3) Existem quatro tipos de botões, definidos através da tag, que não possui fechamento. - submit : faz com que o browser envie os dados para o endereço definido na tag. - reset : faz com que o formulário seja recarregado.

110 HTML - CSS – Felippe M Zancarli Botões (2/3) - image : cria um botão de envio baseado em uma imagem, cuja URL deve ser definida na tag. - button : cria um botão que não possui ação previamente definida, devendo esta ser programada pelo desenvolvedor através de scripts executados no browser (com JavaScript ou VBScript, por exemplo).

111 HTML - CSS – Felippe M Zancarli Botões (3/3)

112 HTML - CSS – Felippe M Zancarli Controle de Tabulação Normalmente, o cursor passa de um controle para outro através da tecla [Tab] na sequência da inserção dos controles no formulário. Caso deseje alterar essa sequência, pode-se utilizar o atributo tabindex, com valores válidos de 1 a

113 HTML - CSS – Felippe M Zancarli Teclas de Acesso Pode ser programada uma tecla de acesso rápido ao controle através do atributo accesskey. Em sistemas Windows, deve-se usar [Alt]+tecla. No Macintosh, usa-se [Cmd]+tecla.

114 HTML - CSS – Felippe M Zancarli Evitando o Acesso ao Controle O acesso ao controle pode ser evitado através dos atributos disabled e readonly. Valores de controles disabled não são enviados. Valores de controles readonly são enviados.

115 HTML - CSS – Felippe M Zancarli Definindo o Envio (1/3) O envio é definido através de atributos da tag : action – define a URL responsável pela entrega dos dados, geralmente um script criado pelo desenvolvedor ou fornecido pelo provedor. Pode ser usada a URL mailto: para acionar o software de do cliente.

116 HTML - CSS – Felippe M Zancarli Definindo o Envio (2/3) method – pode ser post ou get. Se for get, os dados serão anexados à URL definida no atributo action, separados desta por um ? e separados entre si por um &. Existe um limite de 1024 caracteres nesse método. Se for post, os dados serão enviados diretamente para a URL definida em action. O melhor método dependerá da necessidade do desenvolvedor.

117 HTML - CSS – Felippe M Zancarli Definindo o Envio (3/3) enctype – define o tipo MIME dos dados a ser usado, quando o método for post. O valor default é application/x-www- form-urlencoded, que transforma caracteres especiais em códigos escaped. Se for usado mailto: em action, deverá ser usado text/plain.

118 HTML - CSS – Felippe M Zancarli

119 8 Frames Conceito Criando o Frameset Definindo os Frames Usando Targets Controlando a Aparência dos Frames Conteúdo Alternativo

120 HTML - CSS – Felippe M Zancarli Conceito (1/2) Os frames permitem exibir diversas páginas ao mesmo tempo dentro da mesma janela do browser, criando ou não uma relação entre essas páginas. Isso permite manter determinadas informações sendo exibidas, enquanto que outras são modificadas.

121 HTML - CSS – Felippe M Zancarli Conceito (2/2) Exemplo: ter ao mesmo tempo um banner sendo exibido em uma região da janela, uma barra de navegação sendo exibida em outra e o conteúdo propriamente dito sendo exibido em uma terceira parte da janela. O banner pode ser trocado a qualquer instante sem a necessidade de recarregar a página por completo, o mesmo acontecendo com o conteúdo, quando um link for acionado.

122 HTML - CSS – Felippe M Zancarli Criando o Frameset (1/4) Frameset é uma espécie de gabarito, que representa a disposição das páginas na janela do browser. Para criar o frameset usa-se a tag, que precisa ser fechada.

123 HTML - CSS – Felippe M Zancarli Criando o Frameset (2/4) Define duas colunas, cada uma ocupando 50% da largura da janela. Define três linhas, sendo que a primeira (superior) ocupa 10% da altura da janela, a segunda (central) ocupa 30% dessa altura e a última (inferior) ocupa 60% da altura da janela.

124 HTML - CSS – Felippe M Zancarli Criando o Frameset (3/4) Define duas colunas, sendo a primeira (da esquerda) com 200 pixels de largura e a segunda com o espaço restante da janela do browser. Define duas linhas, sendo que a inferior ocupa 30% da altura disponível e a superior o espaço restante.

125 HTML - CSS – Felippe M Zancarli Criando o Frameset (4/4) Define duas colunas, sendo que a da esquerda receberá 25% (1/4) e a da direita 75% (3/4) do espaço disponível. Define duas colunas com 50% de largura e duas linhas com 50% de altura, formando uma grade.

126 HTML - CSS – Felippe M Zancarli Definindo os Frames Através da tag define-se o conteúdo de cada frame. Para cada frame criado em é obrigatória a inserção de uma tag. Outras características podem ser definidas através dessa tag. Ainda veremos quais são elas.

127 HTML - CSS – Felippe M Zancarli Usando Targets (1/2) Por default, um link abrirá sua URL no mesmo frame onde se localiza. Caso queira indicar outro frame, é necessário inserir no link o atributo target, seguido do nome do frame. Então, ao criar o frame, seu nome deve ser definido através do atributo name da tag.

128 HTML - CSS – Felippe M Zancarli Usando Targets (2/2) Outros targets interessantes são: _blank – faz com que a página seja aberta em outra janela do browser. _top – faz com que a página seja aberta ocupando toda a janela do browser, ou seja, destruindo os frames. _self – faz com que a página seja aberta no próprio frame do link.

129 HTML - CSS – Felippe M Zancarli Aparência dos Frames (1/3) Existem diversos atributos da tag que permitem controlar a aparência dos frames. frameborder – se definido como 1 (default), desenha uma linha separadora entre o frame e aqueles que lhe são próximos. Se definido como 0, não desenha essa linha. noresize – se inserido, faz com que o frame não possa ser redimensionado.

130 HTML - CSS – Felippe M Zancarli Aparência dos Frames (2/3) marginwidth – define a margem esquerda do conteúdo do frame em pixels. marginheight – define a margem superior do conteúdo do frame em pixels. Esses atributos também podem ser definidos na tag, embora isso não esteja previsto na especificação HTML padrão.

131 HTML - CSS – Felippe M Zancarli Aparência dos Frames (3/3) scrolling – se definido como auto (default), informa ao browser que, se necessário, deve exibir a barra de rolagem no frame. Se definido como no, não exibe a barra e se for yes, exibe a barra sempre. Para controlar o espaçamento entre os frames, existem dois atributos não definidos pelo W3C: framespacing e border, que devem ser inseridos na tag.

132 HTML - CSS – Felippe M Zancarli Conteúdo Alternativo (1/2) Existem browsers que não suportam o uso de frames ou mesmo que possam ser configurados para não aceitar frames. Assim, existe a necessidade de definir um conteúdo alternativo para ser exibido nesses casos. Isso é feito através da tag, que é inserida no frameset e precisa ser fechada.

133 HTML - CSS – Felippe M Zancarli Conteúdo Alternativo (2/2) aqui vem a página a ser exibida caso o browser do visitante não suporte frames

134 HTML - CSS – Felippe M Zancarli

135 9 Metatags Conceito Informações de Documentação Mecanismos de Busca Definindo o Carregamento Fontes de Informação

136 HTML - CSS – Felippe M Zancarli Conceito Metatags ou tags meta são tags de informação sobre a página onde estão inseridas. Todas as metatags aparecem na seção da página. Algumas metatags definem características referentes ao carregamento da página, enquanto outras apenas servirão como documentação da página, por exemplo.

137 HTML - CSS – Felippe M Zancarli Informações de Documentação Declarando o nome do autor: Declarando o nome do software usado:

138 HTML - CSS – Felippe M Zancarli Mecanismos de Busca (1/2) Relação de palavras-chave: Descrição da página:

139 HTML - CSS – Felippe M Zancarli Mecanismos de Busca (2/2) Controle do robot de catalogação: Os controles podem ser: all : inclui todas as páginas no índice (é o default) index : inclui a página no índice noindex : não inclui a página no índice nofollow : não inclui qualquer página a partir dessa no índice

140 HTML - CSS – Felippe M Zancarli Definindo o Carregamento (1/2) Definindo a data de expiração: Controle do cache:

141 HTML - CSS – Felippe M Zancarli Definindo o Carregamento (2/2) Suporte a idiomas: Conjunto de caracteres padrão:

142 HTML - CSS – Felippe M Zancarli Fontes de Informação Especificação HTML RFC 2616

143 HTML - CSS – Felippe M Zancarli

144 CSS

145 HTML - CSS – Felippe M Zancarli 10 Introdução à CSS O que é CSS Detalhes de Sintaxe Unidades de Medida Cores Utilizando CSS

146 HTML - CSS – Felippe M Zancarli O que é CSS CSS (Cascading Style Sheets) é uma linguagem que permite aos desenvolvedores anexar estilos (definição de fontes, alinhamento, espaçamento etc.) a documentos estruturados (páginas HTML e XML, por exemplo).

147 HTML - CSS – Felippe M Zancarli O que é CSS Uma das vantagens de se trabalhar com CSS é a possibilidade de manter a estrutura e conteúdo separados, o que facilita a manutenção em muitos casos. O W3C recomenda que, no lugar de tags e atributos considerados depreciados, sejam utilizados os recursos da CSS.

148 HTML - CSS – Felippe M Zancarli O que é CSS A especificação mais atual é a CSS2, suportada parcialmente pelos browsers. Essa especificação foi baseada na CSS1, tendo sido acrescentados diversos recursos. Está em desenvolvimento a especificação CSS3. As especificações podem ser obtidas no site do W3C (http://www.w3.org).

149 HTML - CSS – Felippe M Zancarli Detalhes de Sintaxe A CSS possui uma sintaxe própria, baseada nos conceitos de propriedade e valor, que podem ser associados aos conceitos de atributo e valor. Uma declaração é composta pela propriedade, seguida de dois pontos e de seu respectivo valor. propriedade:valor;

150 HTML - CSS – Felippe M Zancarli Detalhes de Sintaxe As declarações podem, dependendo do caso, ser escritas em grupos, devendo ser separadas por ponto-e-vírgula. font-weight:bold; font-size:10pt; color:Blue; font-family:Verdana,Helvetica

151 HTML - CSS – Felippe M Zancarli Detalhes de Sintaxe Se uma propriedade inexistente for inserida, será ignorada pelo browser. Se um valor inexistente ou utilizado de maneira inválida for inserido, será ignorado pelo browser.

152 HTML - CSS – Felippe M Zancarli Unidades de Medida A CSS possui uma gama muito maior de unidades de medida que a HTML, permitindo uma melhor definição da apresentação do conteúdo. Alguns exemplos: pt – pontos (1/72)pc – picas (12pt) mm – milímetroscm – centímetros in – polegadaspx – pixels

153 HTML - CSS – Felippe M Zancarli Cores Também existe uma maior variedade de representações das cores: - nomes das cores: os 16 nomes padronizados na linguagem HTML podem ser usados - código hexadecimal da cor - rgb(nn,nn,nn) - rgb(nn%,nn%,nn%)

154 HTML - CSS – Felippe M Zancarli Utilizando CSS Existem quatro maneiras de utilizar as propriedades da CSS em uma página: 1. Modificando o comportamento de tags 2. Usando CSS inline 3. Usando Classes e IDs 4. Usando Folhas de Estilo externas

155 HTML - CSS – Felippe M Zancarli Utilizando CSS 1. Modificando o comportamento de tags Define-se na folha de estilos, delimitada pela tag (que precisa ser fechada), quais as novas propriedades das tags desejadas. Exemplo: abrir a página cssbeh.html

156 HTML - CSS – Felippe M Zancarli Utilizando CSS 2. Usando CSS inline Utiliza-se o atributo style na tag que o aceitar, definido cada declaração separada por ponto-e-vírgula. Exemplo: abrir a página cssin.html

157 HTML - CSS – Felippe M Zancarli Utilizando CSS 3. Usando Classes e IDs Pode-se definir um conjunto de declarações e atribuir-lhe um nome de classe, que pode ser entendido como um nome de estilo. Os IDs também podem ser entendidos como nomes de estilos, embora sejam mais usados na definição de camadas para uso em DHTML.

158 HTML - CSS – Felippe M Zancarli Utilizando CSS 3. Usando Classes e IDs (cont.) As classes têm seus nomes iniciados por ponto, enquanto que os IDs têm o # (sharp) no início de seu nome. Exemplo: abrir a página csscla.html

159 HTML - CSS – Felippe M Zancarli Utilizando CSS 4. Usando Folhas de Estilo externas É o modo mais flexível e poderoso de utilização das folhas de estilo, pois pode-se modificar a apresentação das páginas sem a necessidade de alterá-las, bastando efetuar a modificação na folha de estilos. Uma folha de estilos externa é um arquivo.CSS, sem qualquer componente da HTML.

160 HTML - CSS – Felippe M Zancarli Utilizando CSS 4. Usando Folhas de Estilo externas (cont.) Para associar a folha de estilos à página, usa- se a tag, que não possui fechamento: rel – o tipo de link href – o endereço e nome do arquivo.CSS type – o tipo MIME da folha de estilos

161 HTML - CSS – Felippe M Zancarli Utilizando CSS 4. Usando Folhas de Estilo externas (cont.) A tag é inserida na seção. Exemplo: abrir a página cssext.html

162 HTML - CSS – Felippe M Zancarli

163 11 Propriedades de Texto Indentação da 1ª Linha Alinhamento Decoração Espaçamento Caixa Alta / Baixa

164 HTML - CSS – Felippe M Zancarli Indentação da 1ª Linha text-indent : define a indentação da 1ª linha de um bloco de texto. Seus valores podem ser quaisquer medidas válidas (ver unidades de medida) ou uma porcentagem. A porcentagem será calculada em função da largura total do bloco de texto. cssindent

165 HTML - CSS – Felippe M Zancarli Alinhamento text-align : define o alinhamento de um bloco. Seus valores podem ser left, right, center ou justify. O W3C recomenda que essa propriedade seja utilizada em substituição ao atributo align, presente em diversas tags HTML. cssalign

166 HTML - CSS – Felippe M Zancarli Decoração text-decoration : permite adicionar alguns efeitos decorativos ao texto. Seus valores válidos são: none - remove qualquer efeito underline - equivale ao sublinhado overline - coloca uma linha acima do texto line-through - equivalente ao tachado blink - texto piscante (muitos browsers não suportam esse efeito) cssdecor

167 HTML - CSS – Felippe M Zancarli Espaçamento letter-spacing : define o espaçamento entre as letras em um bloco de texto. Seus valores podem ser: normal - o espaçamento normal, definido através dos atributos da fonte utilizada para a exibição do texto medida - qualquer medida válida, que será adicionada ao espaçamento normal entre as letras cssletter

168 HTML - CSS – Felippe M Zancarli Caixa Alta / Baixa text-transform : define efeitos de caixa alta ou baixa. Seus valores são: none - sem qualquer efeito uppercase - coloca em caixa alta lowercase - coloca em caixa baixa capitalize - coloca as primeiras letras das palavras em caixa alta e as demais em caixa baixa csstransform

169 HTML - CSS – Felippe M Zancarli

170 12 Propriedades de Fonte Tipo da Fonte Estilo de Fonte –Caixa Alta / Baixa –Versalete –Negrito Tamanho de Fonte

171 HTML - CSS – Felippe M Zancarli Tipo da Fonte font-family : define uma lista de tipos de fonte que deverão ser usadas na exibição do texto. Caso algum nome de fonte tenha espaços, como por exemplo Times New Roman, esse nome deverá vir entre aspas. Se as fontes definidas na lista não estiverem instaladas, será assumida a fonte default do browser. cssffamily

172 HTML - CSS – Felippe M Zancarli Estilo de Fonte (1/3) font-style : permite escolher entre normal - estilo normal da fonte em uso oblique - estilo Oblique, Slanted ou Incline da fonte em uso (equivale ao itálico em muitos casos) italic - estilo itálico da fonte em uso cssfstyle1

173 HTML - CSS – Felippe M Zancarli Estilo de Fonte (2/3) font-variant : seus valores são small-caps : produz letras em estilo versalete normal : define que a fonte não terá o estilo versalete cssfstyle2

174 HTML - CSS – Felippe M Zancarli Estilo de Fonte (3/3) font-weight : define o peso da fonte. Seus valores podem ser níveis de negrito, sendo que o 100 é o menor nível e o 900 é o mais forte normal - o mesmo que 400, sem negrito bold - o mesmo que 700 bolder - o próximo nível de negrito lighter - o nível anterior de negrito cssfstyle3

175 HTML - CSS – Felippe M Zancarli Tamanho de Fonte font-size : possui os valores xx-small / x-small / small / medium / large / x-large / xx- large - escala do menor ao maior tamanho possível medida - uma medida válida pode ser usada porcentagem - uma porcentagem relativa ao tamanho de fonte que está sendo usado cssfsize

176 HTML - CSS – Felippe M Zancarli

177 13 Tratando Links Conceito A pseudo-classe link A pseudo-classe visited A pseudo-classe hover A pseudo-classe active

178 HTML - CSS – Felippe M Zancarli Conceito Os browsers costumam exibir os links de maneiras diferentes, de acordo com as ações executadas pelo usuário durante a navegação. Através da HTML pode-se definir uma série de cores para diferentes tipos de links. Isso também é possível através das chamadas pseudo-classes em CSS.

179 HTML - CSS – Felippe M Zancarli As pseudo-classes link e visited A pseudo-classe link refere-se às características dos links ainda não visitados pelo usuário. A pseudo-classe visited refere-se às características dos links já visitados pelo usuário. Essas pseudo-classes são mutuamente exclusivas, ou seja, um link não terá as características das duas classes ao mesmo tempo. csslink

180 HTML - CSS – Felippe M Zancarli As pseudo-classes hover e active A pseudo-classe hover refere-se às características do link quando o usuário passa com o ponteiro do mouse sobre o link. A pseudo-classe active refere-se às características do link ativo. Essas pseudo-classes não são mutuamente exclusivas, ou seja, um link poderá ter as características das duas classes ao mesmo tempo. csshover

181 HTML - CSS – Felippe M Zancarli Classes Individuais As pseudo-classes afetam todos os links de uma página, porém podem ser criadas classes para determinados links. As características das pseudo-classes que afetam todos os links serão herdadas pelas classes criadas pelo usuário. cssindiv

182 HTML - CSS – Felippe M Zancarli

183 14 Cores e Fundos Cor de Primeiro Plano Cor de Fundo Imagem de Fundo Repetição da Imagem de Fundo Posição da Imagem de Fundo Efeito de Marca dágua

184 HTML - CSS – Felippe M Zancarli Cor de Primeiro Plano color : define a cor de primeiro plano, geralmente aplicada ao texto. color: cor Relembrando, há quatro formas de definir a cor: color: red color: #ff0000 color: rgb(255,0,0) color: rgb(100%,0,0) csscolor

185 HTML - CSS – Felippe M Zancarli Cor de Fundo background-color : define a cor de fundo, com as mesmas possibilidades da propriedade color. background-color: cor Caso não seja definida qualquer cor, será adotado o padrão definido no browser do visitante. cssbackc

186 HTML - CSS – Felippe M Zancarli Figura de Fundo background-image : define a imagem de fundo, de forma semelhante ao atributo background da tag. background-image: url(URL) Se a figura não puder ser exibida, prevalecerá a cor de fundo definida. cssbacki

187 HTML - CSS – Felippe M Zancarli Repetição da Imagem de Fundo background-repeat : define a repetição da imagem de fundo. O default é o valor repeat, que provoca a repetição na horizontal e vertical. background-repeat: valor Outros valores possíveis são: repeat-x : repete somente na horizontal repeat-y : repete somente na vertical no-repeat : exibe apenas uma vez a imagem cssbackir

188 HTML - CSS – Felippe M Zancarli Posição da Imagem de Fundo background-position : define a posição da imagem de fundo, sendo que os valores válidos são: esq top - define a posição a partir da esquerda e topo em termos percentuais ou com uma medida válida As palavras left, right, center, top e bottom também podem ser usadas. cssbackip

189 HTML - CSS – Felippe M Zancarli Efeito de Marca dágua background-attachment : define se a imagem de fundo ficará fixa ou acompanhará a rolagem da página, como é o default. background-attachment: valor Os valores possíveis são: scroll : a imagem acompanha a rolagem da página fixed : a imagem fica fixa no fundo da página cssbackia

190 HTML - CSS – Felippe M Zancarli

191 15 O box model Margens Externas Margens Internas Estilos de Borda Cor de borda Espessura de borda Box Model

192 HTML - CSS – Felippe M Zancarli O box model A CSS define que todo conteúdo é inserido em uma caixa e que podem ser definidas medidas de margem externa e interna, além de estilos de borda para a caixa. A margem externa é tratada como margin. A margem interna é tratada como padding. As bordas que podem ser colocadas ao redor das caixas são tratadas como border.

193 HTML - CSS – Felippe M Zancarli Margens Externas margin-top : define a margem superior externa da caixa. margin-bottom : define a margem inferior externa da caixa. margin-left : define a margem esquerda externa da caixa. margin-right : define a margem direita externa da caixa. Qualquer medida válida pode ser usada. cssmarge

194 HTML - CSS – Felippe M Zancarli Margens Internas cssmargi padding-top : define a margem superior interna da caixa. padding-bottom : define a margem inferior interna da caixa. padding-left : define a margem esquerda interna da caixa. padding-right : define a margem direita interna da caixa. Qualquer medida válida pode ser usada.

195 HTML - CSS – Felippe M Zancarli Estilos de Borda (1/2) border-top-style : define o estilo da borda superior da caixa. border-bottom-style : define o estilo da borda inferior da caixa. border-left-style : define o estilo da borda esquerda da caixa. border-right-style : define o estilo da borda direita da caixa.

196 HTML - CSS – Felippe M Zancarli Estilos de Borda (2/2) Os estilos válidos para bordas são: dotteddashedsolid doublegrooveridge insetoutsetnone ou hidden cssbords

197 HTML - CSS – Felippe M Zancarli cssbordc Cor de Borda border-top-color : define a cor da borda superior da caixa. border-bottom-color : define a cor da borda inferior da caixa. border-left-color : define a cor da borda esquerda da caixa. border-right-color : define a cor da borda direita da caixa.

198 HTML - CSS – Felippe M Zancarli cssbordw Espessura de Borda border-top-width : define a espessura da borda superior da caixa. border-bottom-width : define a espessura da borda inferior da caixa. border-left-width : define a espessura da borda esquerda da caixa. border-right-width : define a espessura da borda direita da caixa.

199 HTML - CSS – Felippe M Zancarli

200 16 Introdução Posicionamento Absoluto Posicionamento Relativo Posicionamento em Camadas Visibilidade Posicionamento

201 HTML - CSS – Felippe M Zancarli Introdução É possível posicionar elementos usando a CSS para definir o que chamamos de camada. Os tipos de posicionamento possíveis são definidos pela propriedade position e seus valores são: absolute – a posição é fixa na janela relative – a posição é na verdade a distância em relação a algum ítem posicionado na janela

202 HTML - CSS – Felippe M Zancarli Posicionamento Absoluto position: absolute A posição da camada é definida através das medidas top, left, right e bottom. A camada terá uma posição fixa na janela, independente de outros elementos inseridos. Qualquer medida válida pode ser usada. cssposica

203 HTML - CSS – Felippe M Zancarli Posicionamento Relativo position: relative A posição da camada é definida através das medidas top, left, right e bottom. A camada terá posicionamento absoluto ao ítem após o qual foi inserida. Qualquer medida válida pode ser usada. cssposicr

204 HTML - CSS – Felippe M Zancarli Posicionamento em Camadas Toda camada em CSS é posicionada em três dimensões: horizontal, vertical e um eixo-Z, o que permite posicionar itens em camadas, um sobre o outro no espaço da janela do browser. Isso pode ser efetivado através da propriedade z-index: camada sendo que a camada base é a 0 e sobre ela são definidas as outras camadas. csslayer

205 HTML - CSS – Felippe M Zancarli Visibilidade Uma camada pode ter sua visibilidade controlada através da propriedade visibility, que possui os seguintes valores: visible – a camada fica visível (default) hidden – a camada fica invisível Uma vez que o estado de uma camada seja definido, somente poderá ser modificado através de linguagens de script, como JavaScript. cssvisible

206 HTML - CSS – Felippe M Zancarli


Carregar ppt "HTML - CSS – Felippe M Zancarli HTML Material desenvolvido por Alan Carvalho."

Apresentações semelhantes


Anúncios Google