html - css – felippe m zancarli html material desenvolvido por alan carvalho

HTML - CSS – Felippe M Zancarli

Material desenvolvido por

Alan Carvalho

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.

•Conceitos Fundamentais sobre a Web

•HTML

•CSS

Tópicos Principais

Conceitos Fundamentais sobre a Web

1•Conceito de Hipertexto

•O que é a World Wide Web

•Origem da Web

•Características da Web

•W3 Consortium

Introdução

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.

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.”

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.

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.

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.

•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.

•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.

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.

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

2Introdução

•O que é a HTML

•Tags e Atributos

•Estrutura Básica de uma Página

•Ambiente de Desenvolvimento

•Publicação e Recuperação

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.

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

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

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.

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>

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.

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">

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">

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>

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.

<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.

<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.

<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><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>

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

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

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.

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.

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.

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

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.

O sistema sRGB (2/2)

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.

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.

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).

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.

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.

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

Réguas

Definidas pela tag <hr>, que não têm fechamento.

width – largura da réguaalign – alinhamento horizontalsize – espessura da linha em pixelsnoshade – se definido, preenche a linha

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

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).

Listas

Usadas para exibir listas de ítens. Podem ser:

•Não-ordenadas

•Ordenadas

•Definição

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>

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>

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>

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>

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>

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

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>

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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)

Criando Âncoras (2/2)

Cria a âncora.

<a href=“#nome”>conteúdo</a>

Permite o acesso a essa âncora.

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.

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)

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>

Para marcar regiões circulares:

x,y – coordenadas do centro do círculoz – raio do círculo em pixels

Para marcar regiões retangulares:

Cada par representa um dos cantos opostos do retângulo (ou quadrado).

Para marcar regiões irregulares:

x e y – coordenadas que marcam cada vértice do polígono

Para vincular o mapa à imagem:

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.

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

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

Essa tag não possui fechamento.

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.

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.

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.

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.

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.

Os nomes dos botões em um grupo precisam ser os mesmos.

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.

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.

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.

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.

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).

Botões (3/3)

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.

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.

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.

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.

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.

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.

8Frames

•Conceito

•Criando o Frameset

•Definindo os Frames

•Usando Targets

•Controlando a Aparência dos Frames

•Conteúdo Alternativo

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.

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.

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.

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.

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.

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.

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>.

Outras características podem ser definidas através dessa tag. Ainda veremos quais são elas.

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>.

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.

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.

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.

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>.

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.

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>

9Metatags

•Conceito

•Informações de Documentação

•Mecanismos de Busca

•Definindo o Carregamento

•Fontes de Informação

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.

Informações de Documentação

Declarando o nome do autor:

Declarando o nome do software usado:

Mecanismos de Busca (1/2)

Relação de palavras-chave:

Descrição da página:

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 índicenoindex: não inclui a página no índicenofollow: não inclui qualquer página a partir dessa no índice

Definindo o Carregamento (1/2)

Definindo a data de expiração:

Controle do cache:

Definindo o Carregamento (2/2)

Suporte a idiomas:

Conjunto de caracteres padrão:

Fontes de Informação

Especificação HTML 4.01

http://www.w3.org

RFC 2616

http://www.ietf.org/rfc/rfc2616.txt

10Introdução à CSS

•O que é CSS

•Detalhes de Sintaxe

•Unidades de Medida

•Cores

•Utilizando CSS

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).

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.

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).

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;

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

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.

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

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%)

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

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

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

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.

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

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.

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:

rel – o tipo de linkhref – o endereço e nome do arquivo .CSStype – o tipo MIME da folha de estilos

Utilizando CSS

4. Usando Folhas de Estilo externas (cont.)

A tag <link> é inserida na seção <head>.

Exemplo: abrir a página cssext.html

11Propriedades de Texto

•Indentação da 1ª Linha

•Alinhamento

•Decoração

•Espaçamento

•Caixa Alta / Baixa

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

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

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

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

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

12Propriedades de Fonte

•Tipo da Fonte

•Estilo de Fonte

–Caixa Alta / Baixa

–Versalete

–Negrito

•Tamanho de Fonte

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

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

font-variant: seus valores são

small-caps: produz letras em estilo versaletenormal: define que a fonte não terá o estilo versalete

cssfstyle2

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

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

13Tratando Links

•Conceito

•A pseudo-classe link

•A pseudo-classe visited

•A pseudo-classe hover

•A pseudo-classe active

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.

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

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

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

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

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

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

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

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

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

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

15•O “box model”

•Margens Externas

•Margens Internas

•Estilos de Borda

•Cor de borda

•Espessura de borda

Box Model

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.

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

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.

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.

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

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.

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.

16•Introdução

•Posicionamento Absoluto

•Posicionamento Relativo

•Posicionamento em Camadas

•Visibilidade

Posicionamento

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

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.

cssposica

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.

cssposicr

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

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 html material desenvolvido por alan carvalho

Documents

apostila html,xhtml e css

curso html e css

curso html, css e javascript

html, css e jquery wendell silva soares. sumário html css...

html + css

apostila- html e css -...

caelum html-css-javascript-php

html xhtml e css

html&css 4 - intermediate css (1/2)

html, css & style guides

html, css - uniandesisis3710/...tendencias: html semántico,...

2 html,xhtml e css

livro css + html - maujor

html, css, javascript e php

front-end treinamento html/css

html css javascript php

html css javascript

implementação html e css

html, xhtml e css

tutorial de html & css. apostila sobre html e css