html - css – felippe m zancarli html material desenvolvido por alan carvalho
TRANSCRIPT
HTML - CSS – Felippe M Zancarli
HTML
Material desenvolvido por
Alan Carvalho
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.
HTML - CSS – Felippe M Zancarli
•Conceitos Fundamentais sobre a Web
•HTML
•CSS
Tópicos Principais
HTML - CSS – Felippe M Zancarli
Conceitos Fundamentais sobre a Web
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
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.
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.”
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.
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.
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.
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.
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.
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.
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.
http://www.w3.org
HTML - CSS – Felippe M Zancarli
HTML - CSS – Felippe M Zancarli
HTML
HTML - CSS – Felippe M Zancarli
2Introdução
•O que é a HTML
•Tags e Atributos
•Estrutura Básica de uma Página
•Ambiente de Desenvolvimento
•Publicação e Recuperação
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.
HTML - CSS – Felippe M Zancarli
Tags ou Elementos
Tags ou elementos são marcações que permitem definir a estrutura do documento.
<enciclopédia> <volume> <tópico> conteúdo </tópico> </volume></enciclopédia>
Algumas tags não possuem o respectivo fechamento
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.
<enciclopédia nome=“Saber Total”> <volume numero=“1”> <tópico nome=“Internet”> conteúdo </tópico> </volume></enciclopédia>
Nem todas as tags têm atributos
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.
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 <HTML>
•Uma seção delimitada pela tag <HEAD>
•Uma seção delimitada pela tag <BODY>
•Em alguns casos usa-se a tag <FRAMESET>
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.
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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN""http://www.w3.org/TR/html4/strict.dtd">
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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
HTML - CSS – Felippe M Zancarli
DTD (4/4)
Frameset – inclui todos os elementos necessários para a criação de frames.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN""http://www.w3.org/TR/html4/frameset.dtd">
HTML - CSS – Felippe M Zancarli
<HTML>
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.
HTML - CSS – Felippe M Zancarli
<HEAD>
Colocada logo após a tag <HTML> 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.
HTML - CSS – Felippe M Zancarli
<TITLE>
Opcional e definida dentro da seção aberta por <HEAD>.
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.
HTML - CSS – Felippe M Zancarli
<BODY>
Opcional e definida após o final da seção aberta por <HEAD>.
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.
HTML - CSS – Felippe M Zancarli
<html><head> <title>Web Sites - HTML</title></head><body> <h1>A Linguagem HTML</h1> <p>HTML e a linguagem fundamental para marcacao de hipertexto e publicacao de conteudo na World Wide Web.</p></body></html>
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
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
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.
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.
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 erroSe existir: envia a página para o browser, que começa a interpretar e exibir seu conteúdo4. Para cada arquivo referenciado na página, uma nova requisição será feita pelo browser.
HTML - CSS – Felippe M Zancarli
HTML - CSS – Felippe M Zancarli
3Formataçã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
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.
HTML - CSS – Felippe M Zancarli
O sistema sRGB (2/2)
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.
HTML - CSS – Felippe M Zancarli
Cores de Texto e Fundo
<body bgcolor=“cor” text=“cor”>
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.
HTML - CSS – Felippe M Zancarli
Cabeçalhos
<hn align=“val”>texto</hn>
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).
HTML - CSS – Felippe M Zancarli
Parágrafos e Quebras de Linha
São definidos pela tag <p>, que tem seu fechamento opcional.
<p align=“val”>texto</p>
Os parágrafos serão separados por uma linha em branco.
As quebras de linha são definidas pela tag <br>, que não tem fechamento.
HTML - CSS – Felippe M Zancarli
Blocos
Definidos pela tag <div>, que tem seu fechamento obrigatório.
<div align=“val”>texto</div>
Muito utilizados na definição de camadas para efeitos de HTML dinâmica.
Assemelham-se também a parágrafos.
HTML - CSS – Felippe M Zancarli
Efeitos de Texto
<b>texto</b> - negrito<i>texto</i> - itálico<u>texto</u> - sublinhado<sup>texto</sup> - sobrescrito (expoente)<sub>texto</sub> - subscrito (índice)<big>texto</big> - aumenta o texto<small>texto</small> - diminue o texto<tt>texto</tt> - usa fonte monoespaçada<pre>texto</pre> - obedece formatação
HTML - CSS – Felippe M Zancarli
Réguas
Definidas pela tag <hr>, que não têm fechamento.
<hr width=“larg” align=“val” size=“alt” noshade>
width – largura da réguaalign – alinhamento horizontalsize – espessura da linha em pixelsnoshade – se definido, preenche a linha
HTML - CSS – Felippe M Zancarli
Definindo Fontes
Através da tag <font>, cujo fechamento é obrigatório, definem-se três atributos para a fonte.
<font size=“tam” color=“cor” face=“tipos”>texto</font>
size – tamanho do texto (entre 1 e 7)color – cor (código ou nome)face – lista de tipos
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).
HTML - CSS – Felippe M Zancarli
Listas
Usadas para exibir listas de ítens. Podem ser:
•Não-ordenadas
•Ordenadas
•Definição
HTML - CSS – Felippe M Zancarli
Listas Não-Ordenadas (1/2)
Definidas pela tag <ul>, com seu respectivo fechamento e pela tag <li>, sem necessidade de fechamento.
<ul> <li>Software <li>Hardware <li>Manuais</ul>
HTML - CSS – Felippe M Zancarli
Listas Não-Ordenadas (2/2)
As tags <ul> e <li> aceitam o atributo type, que define o tipo do marcador (circle, square ou disc).
<ul type=“circle”> <li>Software <li type=“disc”>Hardware <li>Manuais</ul>
HTML - CSS – Felippe M Zancarli
Listas Ordenadas (1/3)
Definidas pela tag <ol>, com seu respectivo fechamento e pela tag <li>, sem necessidade de fechamento.
<ol> <li>Software <li>Hardware <li>Manuais</ol>
HTML - CSS – Felippe M Zancarli
Listas Ordenadas (2/3)
As tags <ol> e <li> aceitam o atributo type, que define o estilo de numeração (1, A, a, I ou i).
<ol type=“I”> <li>Software <li type=“A”>Hardware <li>Manuais</ol>
HTML - CSS – Felippe M Zancarli
Listas Ordenadas (3/3)
A tag <ol> aceita o atributo start, que define o valor inicial para os elementos da lista.
<ol type=“I” start=“5”> <li>Software <li>Hardware <li>Manuais</ol>
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.
<dl>...</dl> - inicia e termina a lista
<dt> - define um tópico
<dd> - define o texto desse tópico
HTML - CSS – Felippe M Zancarli
Listas de Definição (2/2)
<dl> <dt>HTML <dd>Linguagem de marcacao usada na Web <dt>JavaScript <dd>Linguagem de scripts usada para automacao de paginas <dt>ASP <dd>Tecnologia que permite criar conteudo dinamico</dl>
HTML - CSS – Felippe M Zancarli
HTML - CSS – Felippe M Zancarli
4•Tipos de Imagens Aceitas
•A tag <IMG>
•Definindo a URL
•Definindo Texto Alternativo
•Definindo as Dimensões
•Definindo o Alinhamento
•Definindo o Espaçamento
•Plano de Fundo
Inserindo Imagens
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.
HTML - CSS – Felippe M Zancarli
A tag <IMG>
A tag <IMG> é 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.
HTML - CSS – Felippe M Zancarli
Definindo a URL (1/2)
<img src=“URL”>
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.
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.
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.
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.
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.
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.
HTML - CSS – Felippe M Zancarli
Plano de Fundo
<body background=“url”>
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.
HTML - CSS – Felippe M Zancarli
HTML - CSS – Felippe M Zancarli
5•A tag <A>
•Definindo a URL
•Links para Arquivos
•Links para e-mail
•Criando Âncoras (bookmarks)
•Cores dos Links
•Mapas de Imagem
Criando Links
HTML - CSS – Felippe M Zancarli
A tag <A>
A tag <A> 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.
HTML - CSS – Felippe M Zancarli
Definindo a URL
Use <a href=“URL”>conteúdo</a>
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.
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.
HTML - CSS – Felippe M Zancarli
Links para e-mail
<a href=“mailto:endereco”>conteúdo</a>
O software de e-mail do usuário será acionado automaticamente, caso esteja instalado e configurado corretamente.
Não há segurança de que a mensagem será enviada.
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)
HTML - CSS – Felippe M Zancarli
Criando Âncoras (2/2)
<a name=“nome”></a>
Cria a âncora.
<a href=“#nome”>conteúdo</a>
Permite o acesso a essa âncora.
HTML - CSS – Felippe M Zancarli
Cores dos Links
<body link=“cor” vlink=“cor” alink=“cor”>
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.
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)
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 <map>, que precisa ser fechada.
<map name=“nome”>dados</map>
HTML - CSS – Felippe M Zancarli
Mapas de Imagem (3/7)
Para marcar regiões circulares:
<area shape=“circle” href=“URL” coords=“x,y,z”>
x,y – coordenadas do centro do círculoz – raio do círculo em pixels
<area shape=“circle” href=“saopaulo.html” coords=“100,200,50”>
HTML - CSS – Felippe M Zancarli
Mapas de Imagem (4/7)
Para marcar regiões retangulares:
<area shape=“rect” href=“URL” coords=“a,b,c,d”>
Cada par representa um dos cantos opostos do retângulo (ou quadrado).
<area shape=“rect” href=“URL” coords=“10,20,100,100”>
HTML - CSS – Felippe M Zancarli
Mapas de Imagem (5/7)
Para marcar regiões irregulares:
<area shape=“polygon” href=“URL” coords=“x,y,x1,y1,x2,y2,x3,y3,x4,y4...”>
x e y – coordenadas que marcam cada vértice do polígono
HTML - CSS – Felippe M Zancarli
Mapas de Imagem (6/7)
Para vincular o mapa à imagem:
<img usemap=“#nome_do_mapa”>
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.
HTML - CSS – Felippe M Zancarli
HTML - CSS – Felippe M Zancarli
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
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 <table> é usada para criar tabelas. Deve ser aberta e fechada.
HTML - CSS – Felippe M Zancarli
Definindo Linhas e Dados
Use <tr> para definir cada linha de dados. Essa tag pode ou não ser fechada.
Use <td> ou <th> para definir cada célula que faça parte de uma determinada linha. Essas tags podem ou não ser fechadas.
A tag <th> coloca automaticamente os dados em negrito e centralizados.
HTML - CSS – Felippe M Zancarli
Largura de Tabela e Células
O atributo width pode ser usado tanto na tabela (tag <table>) como nas células (tags <td> ou <th>).
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.
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.
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.
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.
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.
HTML - CSS – Felippe M Zancarli
HTML - CSS – Felippe M Zancarli
7Formulá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
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.
HTML - CSS – Felippe M Zancarli
Definindo o Formulário (1/2)
A tag <form> é usada para definir o início e o final do formulário. É necessário fechar essa tag.
Na tag <form> 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.
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.
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.
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 e-mail, CEP, números, CPF, RG etc.
<input type=“text” name=“nome” size=“tam” maxlength=“tam” value=“valordefault”>
Essa tag não possui fechamento.
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.
<textarea name=“nome” rows=“lin” cols=“col”>valordefault</textarea>
O fechamento dessa tag é necessário.
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.
<select name=“nome” size=“lin” multiple>
É necessário fechar essa tag.
HTML - CSS – Felippe M Zancarli
Caixa de Seleção (combo) – 2/2
A tag <option> define cada opção do menu. O fechamento dessa tag é opcional.
<option value=“valor” selected>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.
HTML - CSS – Felippe M Zancarli
Checkbox
É uma caixa do tipo liga/desliga que pode ser modificada livremente pelo usuário.
<input type=“checkbox” name=“nome” value=“valor” checked>
Se o atributo checked for usado, a caixa virá ligada por default.
Essa tag não possui fechamento.
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.
<input type=“radio” name=“nome” value=“valor” checked>
Essa tag não possui fechamento.
Os nomes dos botões em um grupo precisam ser os mesmos.
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.
<input type=“hidden” name=“nome” value=“valor”>
Essa tag não possui fechamento.
HTML - CSS – Felippe M Zancarli
Senha
Semelhante à caixa de texto de uma linha, na qual aparecem asteriscos durante a digitação dos dados.
<input type=“password” name=“nome” size=“tam” maxlength=“tam”>
Esse campo não possui qualquer segurança do tipo criptografia; apenas exibe os asteriscos.
Essa tag não possui fechamento.
HTML - CSS – Felippe M Zancarli
Arquivo
Permite a seleção de um arquivo no disco do computador do visitante.
<input type=“file” name=“nome”>
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.
HTML - CSS – Felippe M Zancarli
Botões (1/3)
Existem quatro tipos de botões, definidos através da tag <input>, que não possui fechamento.
- submit: faz com que o browser envie os dados para o endereço definido na tag <form>.
- reset: faz com que o formulário seja recarregado.
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).
HTML - CSS – Felippe M Zancarli
Botões (3/3)
<input type=“submit” value=“texto”>
<input type=“reset” value=“texto”>
<input type=“image” src=“URL”>
<input type=“button” value=“texto”>
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 32767.
<input type=“text” name=“nome” tabindex=“3”>
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.
<input type=“text” name=“nome” accesskey=“n”>
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.
<input type=“text” name=“nome” readonly>
<input type=“text” name=“nome” disabled>
HTML - CSS – Felippe M Zancarli
Definindo o Envio (1/3)
O envio é definido através de atributos da tag <form>:
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 e-mail do cliente.
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.
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.
HTML - CSS – Felippe M Zancarli
HTML - CSS – Felippe M Zancarli
8Frames
•Conceito
•Criando o Frameset
•Definindo os Frames
•Usando Targets
•Controlando a Aparência dos Frames
•Conteúdo Alternativo
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.
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.
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 <frameset>, que precisa ser fechada.
<frameset cols=“listadecolunas”>
<frameset rows=“listadelinhas”>
HTML - CSS – Felippe M Zancarli
Criando o Frameset (2/4)
<frameset cols=“50%,50%”>
Define duas colunas, cada uma ocupando 50% da largura da janela.
<frameset rows=“10%,30%,60%”>
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.
HTML - CSS – Felippe M Zancarli
Criando o Frameset (3/4)
<frameset cols=“200,*”>
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.
<frameset rows=“*,30%”>
Define duas linhas, sendo que a inferior ocupa 30% da altura disponível e a superior o espaço restante.
HTML - CSS – Felippe M Zancarli
Criando o Frameset (4/4)
<frameset cols=“1*, 3*”>
Define duas colunas, sendo que a da esquerda receberá 25% (1/4) e a da direita 75% (3/4) do espaço disponível.
<frameset cols=“50%,*” rows=“50%,*”>
Define duas colunas com 50% de largura e duas linhas com 50% de altura, formando uma grade.
HTML - CSS – Felippe M Zancarli
Definindo os Frames
Através da tag <frame> define-se o conteúdo de cada frame.
Para cada frame criado em <frameset> é obrigatória a inserção de uma tag <frame>.
<frame src=“url”>
Outras características podem ser definidas através dessa tag. Ainda veremos quais são elas.
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 <frame>.
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.
HTML - CSS – Felippe M Zancarli
Aparência dos Frames (1/3)
Existem diversos atributos da tag <frame> 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.
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 <body>, embora isso não esteja previsto na especificação HTML padrão.
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 <frameset>.
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 <noframes>, que é inserida no frameset e precisa ser fechada.
HTML - CSS – Felippe M Zancarli
Conteúdo Alternativo (2/2)
<html><frameset rows=“100,*”> <frame src=“superior.html”> <frame src=“inferior.html”> <noframes> aqui vem a página a ser exibida caso o browser do visitante não suporte frames </noframes></frameset></html>
HTML - CSS – Felippe M Zancarli
HTML - CSS – Felippe M Zancarli
9Metatags
•Conceito
•Informações de Documentação
•Mecanismos de Busca
•Definindo o Carregamento
•Fontes de Informação
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 <head> 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.
HTML - CSS – Felippe M Zancarli
Informações de Documentação
Declarando o nome do autor:
<meta name=“author” content=“seu nome”>
Declarando o nome do software usado:
<meta name=“generator” content=“EditPad”>
HTML - CSS – Felippe M Zancarli
Mecanismos de Busca (1/2)
Relação de palavras-chave:
<meta name=“keywords” content=“lista_de_palavras”>
Descrição da página:
<meta name=“description” content=“descrição da página ou site”>
HTML - CSS – Felippe M Zancarli
Mecanismos de Busca (2/2)
Controle do “robot” de catalogação:
<meta name=“robots” content=“controles”>
Os controles podem ser:
all: inclui todas as páginas no índice (é o default)index: inclui a página no índicenoindex: não inclui a página no índicenofollow: não inclui qualquer página a partir dessa no índice
HTML - CSS – Felippe M Zancarli
Definindo o Carregamento (1/2)
Definindo a data de expiração:
<meta http-equiv=“Expires” content=“Tue, 08 May 2001 3:00:00 GMT”>
Controle do cache:
<meta http-equiv=“Cache-Control” content=“no-cache”>
HTML - CSS – Felippe M Zancarli
Definindo o Carregamento (2/2)
Suporte a idiomas:
<meta http-equiv=“Content-Language” content=“br,pt,en”>
Conjunto de caracteres padrão:
<meta http-equiv=“Content-Type” content=“text/html; charset=ISO-8859-1”>
HTML - CSS – Felippe M Zancarli
Fontes de Informação
Especificação HTML 4.01
http://www.w3.org
RFC 2616
http://www.ietf.org/rfc/rfc2616.txt
HTML - CSS – Felippe M Zancarli
HTML - CSS – Felippe M Zancarli
CSS
HTML - CSS – Felippe M Zancarli
10Introdução à CSS
•O que é CSS
•Detalhes de Sintaxe
•Unidades de Medida
•Cores
•Utilizando CSS
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).
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.
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).
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;
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
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.
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ímetros cm – centímetrosin – polegadas px – pixels
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%)
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
HTML - CSS – Felippe M Zancarli
Utilizando CSS
1. Modificando o comportamento de tags
Define-se na folha de estilos, delimitada pela tag <style> (que precisa ser fechada), quais as novas propriedades das tags desejadas.
Exemplo: abrir a página cssbeh.html
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
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.
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
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.
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 <link>, que não possui fechamento:
<link rel=“stylesheet” href=“URL” type=“text/css”>
rel – o tipo de linkhref – o endereço e nome do arquivo .CSStype – o tipo MIME da folha de estilos
HTML - CSS – Felippe M Zancarli
Utilizando CSS
4. Usando Folhas de Estilo externas (cont.)
A tag <link> é inserida na seção <head>.
Exemplo: abrir a página cssext.html
HTML - CSS – Felippe M Zancarli
HTML - CSS – Felippe M Zancarli
11Propriedades de Texto
•Indentação da 1ª Linha
•Alinhamento
•Decoração
•Espaçamento
•Caixa Alta / Baixa
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
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
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 efeitounderline - equivale ao sublinhadooverline - coloca uma linha acima do textoline-through - equivalente ao tachadoblink - texto piscante (muitos browsers não suportam esse efeito)
cssdecor
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 textomedida - qualquer medida válida, que será adicionada ao espaçamento normal entre as letras
cssletter
HTML - CSS – Felippe M Zancarli
Caixa Alta / Baixa
text-transform: define efeitos de caixa alta ou baixa. Seus valores são:
none - sem qualquer efeitouppercase - coloca em caixa altalowercase - coloca em caixa baixacapitalize - coloca as primeiras letras das palavras em caixa alta e as demais em caixa baixa
csstransform
HTML - CSS – Felippe M Zancarli
HTML - CSS – Felippe M Zancarli
12Propriedades de Fonte
•Tipo da Fonte
•Estilo de Fonte
–Caixa Alta / Baixa
–Versalete
–Negrito
•Tamanho de Fonte
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
HTML - CSS – Felippe M Zancarli
Estilo de Fonte (1/3)
font-style: permite escolher entre
normal - estilo “normal” da fonte em usooblique - 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
HTML - CSS – Felippe M Zancarli
Estilo de Fonte (2/3)
font-variant: seus valores são
small-caps: produz letras em estilo versaletenormal: define que a fonte não terá o estilo versalete
cssfstyle2
HTML - CSS – Felippe M Zancarli
Estilo de Fonte (3/3)
font-weight: define o “peso” da fonte. Seus valores podem ser
100...900 - níveis de negrito, sendo que o 100 é o menor nível e o 900 é o mais fortenormal - o mesmo que 400, sem negritobold - o mesmo que 700bolder - o próximo nível de negritolighter - o nível anterior de negrito
cssfstyle3
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ívelmedida - uma medida válida pode ser usadaporcentagem - uma porcentagem relativa ao tamanho de fonte que está sendo usado
cssfsize
HTML - CSS – Felippe M Zancarli
HTML - CSS – Felippe M Zancarli
13Tratando Links
•Conceito
•A pseudo-classe link
•A pseudo-classe visited
•A pseudo-classe hover
•A pseudo-classe active
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.
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
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
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
HTML - CSS – Felippe M Zancarli
HTML - CSS – Felippe M Zancarli
14Cores 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
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: redcolor: #ff0000color: rgb(255,0,0)color: rgb(100%,0,0)
csscolor
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
HTML - CSS – Felippe M Zancarli
Figura de Fundo
background-image: define a imagem de fundo, de forma semelhante ao atributo background da tag <body>.
background-image: url(URL)
Se a figura não puder ser exibida, prevalecerá a cor de fundo definida.
cssbacki
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 horizontalrepeat-y: repete somente na verticalno-repeat: exibe apenas uma vez a imagem
cssbackir
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
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áginafixed: a imagem fica fixa no fundo da página
cssbackia
HTML - CSS – Felippe M Zancarli
HTML - CSS – Felippe M Zancarli
15•O “box model”
•Margens Externas
•Margens Internas
•Estilos de Borda
•Cor de borda
•Espessura de borda
Box Model
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.
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
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.
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.
HTML - CSS – Felippe M Zancarli
Estilos de Borda (2/2)
Os estilos válidos para bordas são:
dotted dashed solid
double groove ridge
inset outset none ou hidden
cssbords
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.
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.
HTML - CSS – Felippe M Zancarli
HTML - CSS – Felippe M Zancarli
16•Introdução
•Posicionamento Absoluto
•Posicionamento Relativo
•Posicionamento em Camadas
•Visibilidade
Posicionamento
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 janelarelative – a posição é na verdade a distância em relação a algum ítem posicionado na janela
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
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
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 propriedadez-index: camadasendo que a camada base é a 0 e sobre ela são definidas as outras camadas.
csslayer
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
HTML - CSS – Felippe M Zancarli