Embed Size (px)
Citation preview
Professor Carlos Correia
22 de Janeiro de 2007
Formação POEFDS
Com Amor pela paciência
e dedicação que sempre senti da Ana,
minha Mulher e melhor Amiga,
que tornou possível este pequeno manual!
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 1
Índice 1. Noções Básicas.......................................................................................... 4
1.1. Sobre a "World Wide Web" ...................................................................... 4 1.1.1. O que é a World Wide Web? .............................................................. 4 1.1.2. Como funciona a WWW?................................................................... 4 1.1.3. Como é que o browser vai buscar as páginas? ......................................... 4 1.1.4. Como é que o browser faz a apresentação das páginas?............................. 5 1.1.5. Quem é responsável pela definição dos padrões da Web?........................... 5
1.2. O que é preciso para criar páginas para a Web? ............................................ 5 2. Linguagens de Programação para a Internet....................................................... 6
2.1. XML ................................................................................................. 6 2.2. HTML ............................................................................................... 6 2.3. XHTML.............................................................................................. 6 2.4. CSS.................................................................................................. 7 2.5. Java ................................................................................................ 7 2.6. JavaScript ......................................................................................... 7 2.7. ASP ................................................................................................. 7 2.8. PHP ................................................................................................. 8 2.9. MySQL .............................................................................................. 8
3. Padrão HTML ............................................................................................ 9 3.1. HTML ............................................................................................... 9 3.2. Usar o Bloco de Notas ........................................................................... 9 3.3. O Código mínimo ................................................................................10 3.4. Escolher o DTD...................................................................................11
3.4.1. HTML ........................................................................................11 3.4.2. XHTML.......................................................................................11
3.5. Etiquetas .........................................................................................12 3.5.1. Etiquetas e Atributos .....................................................................13 3.5.2. Etiquetas Básicas ..........................................................................13 3.5.3.....................................................................................................13 3.5.4. Etiquetas de Texto........................................................................14 3.5.5. Etiquetas de definição de parágrafo ...................................................14 3.5.6. Hiperligações ..............................................................................15
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 2
3.5.7. Listas ........................................................................................15 3.5.8. Imagens .....................................................................................16 3.5.9. Fundo da página ...........................................................................16
4. Cores ....................................................................................................18 4.1. Cores seguras para a Internet .................................................................18 4.2. Mais cores ........................................................................................19
5. Estilos CSS ..............................................................................................26 5.1. Como inserir uma folha de Estilos ............................................................26
5.1.1. Folha de estilos externa..................................................................26 5.1.2. Folhas de estilos internas ................................................................27 5.1.3. Estilos "inline"..............................................................................27
5.2. Sintaxe do CSS ...................................................................................27 5.3. As classes .........................................................................................29 5.4. As id e as DIV’s ..................................................................................30 5.5. Formatação de elementos em CSS ...........................................................31
5.5.1. Formatação do fundo dos elementos (BACKGROUND)...............................31 5.5.2. Formatação de Texto dos elementos (TEXT) .........................................34 5.5.3. Formatação do Tipo de Letra dos elementos (FONT) ...............................38 5.5.4. Formatação de limites dos elementos (BORDER) ....................................40 5.5.5. Formatação de margens dos elementos (MARGINS) .................................43 5.5.6. Formatação da moldura dos elementos (PADDING)..................................46 5.5.7. Formatação de listas (LIST) e marcadores (MARKER)................................49 5.5.8. Formatação de dimensões dos elementos.............................................52 5.5.9. Formatação de classificação (CLASSIFICATION) ......................................54 5.5.10. Formatação de posição (POSITIONING) ................................................58 5.5.11. Formatação de PSEUDO-CLASS ..........................................................61 5.5.12. Formatação de PSEUDO-ELEMENTS.....................................................63
6. Exemplo de site utilizando XHTML e CSS ..........................................................64 6.1. Ficheiro ‘index.html’ ...........................................................................64 6.2. Ficheiro ‘estilo.css’ .............................................................................67
7. Alojamento no SAPO..................................................................................72 7.1. Registo SAPO .....................................................................................72 7.2. Validar o domínio pretendido .................................................................76 7.3. Transferir conteúdo para a homepage usando FTP (File Transfer Protocol) ..........78
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 3
8. Registo no pt.vu .......................................................................................81 9. Submissão do site para o GOOGLE..................................................................84 10. Sites de Interesse ..................................................................................85
10.1. World Wide Web Consortium ...............................................................85 10.2. Validação de programação HTML, CSS e XHTML.........................................85 10.3. Tutoriais de HTML, XHTML e CSS na Internet............................................85 10.4. Registo de Domínios e Alojamento ........................................................85 10.5. Registo de Domínios gratuito...............................................................85 10.6. Alojamento gratuito .........................................................................85
11. Direitos de Autor ...................................................................................86
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 4
1. Noções Básicas
1.1. Sobre a "World Wide Web"
1.1.1. O que é a World Wide Web? A World Wide Web (WWW), designada habitualmente apenas por a Web, é formada por muitas redes de computador ligadas entre si que se estendem por quase todo o mundo.
Todos os computadores que estão ligados à Web podem comunicar uns com os outros.
A comunicação entre os computadores que estão na Web faz-se usando o protocolo padrão HTTP ("HypertText Transfer Protocol,") que significa: Protocolo de Transferência de HiperTexto.
1.1.2. Como funciona a WWW? Na Web a informação é normalmente guardada em documentos designados por páginas da Web, escritos em linguagem HTML.
As páginas da Web são constituídas por ficheiros que estão guardados em computadores designados por servidores da Web.
Os computadores usados para ler as páginas da Web são designados por clientes da Web.
Os clientes da Web usam um programa de software designado por Web browser (ou navegador da Web) para apresentar as páginas graficamente.
Os browsers mais populares são:
• Microsoft Internet Explorer
• Netscape
• Mozilla
• Opera
1.1.3. Como é que o browser vai buscar as páginas? O browser faz um pedido ao servidor da Web que guarda a página que quer ver.
O pedido, que contém o endereço (URL) da página desejada, é enviado usando o protocolo padrão HTTP.
O endereço (URL) tem um aspecto semelhante a este:
http://www.carlos-correia.com
• ‘http://’ identifica o protocolo, neste caso, de transferência de hipertexto
• ‘www’ é o prefixo que significa ‘World Wide Web’
• ‘carlos-correia.com’ é o domínio, a morada do site
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 5
1.1.4. Como é que o browser faz a apresentação das páginas? As páginas contêm instruções que descrevem a forma como devem ser mostradas.
O browser lê as instruções e usa-as para desenhar uma representação gráfica do conteúdo da página.
A forma usada para escrever essas instruções baseia-se na linguagem HTML.
1.1.5. Quem é responsável pela definição dos padrões da Web? Os padrões actuais da Web foram influenciados por aquilo que a Netscape e a Microsoft fizeram no passado com os seus Web browsers mas, actualmente, a influência destas entidades é menor.
O organismo que define as regras para a Web é o World Wide Web Consortium (W3C), que conta com a participação activa dos líderes da indústria e de meios académicos.
O W3C define as especificações técnicas que formam os padrões (linguagens de programação) da Web.
Os padrões mais importantes da Web são: HTML, CSS e XML.
O padrão mais recente da família HTML é o XHTML 1. Esta é uma reformulação da linguagem HTML 4.01 que obedece às regras do XML.
1.2. O que é preciso para criar páginas para a Web? • Um editor de texto capaz
• Um programa para manipular imagens
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 6
2. Linguagens de Programação para a Internet Existem muitas linguagens de programação que nos ajudam de uma forma clara e até fácil a criar um site de Internet ou mesmo uma base de dados.
2.1. XML XML (eXtensible Markup Language) é uma recomendação do W3C para gerar linguagens de marcação para necessidades especiais.
É um subtipo de SGML (acrónimo de Standard Generalized Markup Language, ou Linguagem Padronizada de Marcação Genérica) capaz de descrever diversos tipos de dados. A sua função principal é a facilidade de partilha de informações através da Internet.
Estimulado pela insatisfação com os formatos existentes (padronizados ou não), um grupo de empresas e organizações que se auto denominou World Wide Web Consortium (W3C) começou a trabalhar em meados da década de 1990 numa linguagem de marcação que combinasse a flexibilidade da SGML com a simplicidade da HTML. O principio do projecto era criar uma linguagem que pudesse ser lida por software e integrar-se com as demais linguagens. A sua filosofia seria incorporada por vários princípios importantes:
• Separação do conteúdo da formatação
• Simplicidade e legibilidade tanto para humanos quanto para computadores
• Possibilidade de criação de tags sem limitação
• Criação de arquivos para validação de estrutura (Chamados DTDs)
• Interligação de bancos de dados distintos
• Concentração na estrutura da informação, e não na sua aparência
2.2. HTML HTML (acrónimo para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados pelos navegadores (alguns exemplos de navegadores: Microsoft Internet Explorer, Mozilla FireFox, Opera, Netscape, etc.). A tecnologia é fruto do "casamento" dos padrões HyTime e SGML.
2.3. XHTML O XHTML, ou eXtensible HyperText Markup Language, é uma reformulação da linguagem de marcação HTML baseada em XML. Combina as tag's de marcação HTML com regras da XML. Esse processo de padronização visa a exibição de páginas Web em diversos dispositivos (televisão, palm, telemóveis, etc.). A ideia é acessibilidade.
O XHTML consegue ser interpretado por qualquer dispositivo, independentemente de plataforma pois as suas etiquetas possuem sentido semântico para as máquinas. O HTML não consegue esta implementação.
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 7
O mais curioso é notar que entre o HTML e o XHTML não existem muitas diferenças. O que faz a maior diferença entre um documento HTML e um XHTML é o bom conhecimento do Programador que está a construir os códigos com relação aos Padrões de XHTML recomendados pelo W3C.
Um bom truque para o programador verificar se está a criar páginas XHTML da maneira correcta é conferir o seu código através de um validador online do W3C.
2.4. CSS Cascading Style Sheets, ou simplesmente CSS, é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos nma linguagem de marcação, como HTML, XHTML ou XML. O seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.
Ao invés de colocar a formatação dentro do documento, o programador cria um link (ligação) para uma página que contém os estilos, procedendo de forma idêntica para todas as páginas de um site. Quando quiser alterar a aparência do site basta portanto modificar apenas um arquivo.
2.5. Java Java é uma linguagem de programação orientada a objecto desenvolvida na década de 90 pelo programador James Gosling, na empresa Sun Microsystems. Diferentemente das linguagens convencionais, que são compiladas para código nativo, a linguagem Java é compilada para um "bytecode" que é executado por uma máquina virtual.
2.6. JavaScript JavaScript é uma linguagem de programação criada pela Netscape em 1995, que a princípio se chamava LiveScript, para atender, principalmente, às seguintes necessidades:
• Validação de formulários no lado cliente (programa navegador);
• Interacção com a página. Assim, foi feita como uma linguagem de script. JavaScript tem sintaxe semelhante à do Java, mas é totalmente diferente no conceito e no uso.
• É interpretada, ao invés de compilada;
• Possui óptimas ferramentas padrão para listagens (como as linguagens de script, de modo geral);
• Oferece bom suporte a expressões regulares (característica também comum a linguagens de script).
2.7. ASP O ASP (de Active Server Pages) é uma estrutura de programação em Script que se utiliza de VBScript, JScript, PerlScript ou Python processadas pelo lado servidor, para geração de conteúdo dinâmico na Web. Ele funciona nativamente em servidores Windows, através do
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 8
serviço chamado de IIS (Internet Information Service) – o servidor Web da Microsoft, ou do PWS (Personal Web Server) em ambientes com Windows 98.
Além disso ele pode funcionar noutras plataformas, como Linux no servidor Apache quando usando um Módulo de um programa como o Tomcat. O script é interpretado no lado do servidor e o que é enviado ao lado do usuário (navegador) é apenas a saída, que normalmente é uma linguagem de marcação como HTML, XHTML ou XML.
2.8. PHP PHP (um acrónimo para "PHP: HyperText Preprocessor") é uma linguagem de programação de computadores interpretada, livre e muito utilizada para gerar conteúdo dinâmico na Web. Apesar de ser uma linguagem de fácil aprendizagem e de uso para pequenos scripts dinâmicos simples, o PHP é uma linguagem poderosa orientada a objectos.
2.9. MySQL O MySQL é um sistema de gestão de base de dados (SGBD), que utiliza a linguagem SQL (Structured Query Language - Linguagem de Consulta Estruturada) como interface. É actualmente uma das bases de dados mais populares, com mais de 4 milhões de instalações pelo mundo.
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 9
3. Padrão HTML
3.1. HTML HTML significa HyperText Markup Language.
Um documento HTML é apenas um ficheiro de texto com um código específico (hipertexto), que será descodificado pelo navegador - também conhecido como browser.
Alguns exemplos de browsers são:
• Microsoft Internet Explorer
• Mozilla FireFox
• Netscape
• Opera
3.2. Usar o Bloco de Notas A única restrição usada para que um ficheiro seja de HTML é o uso da extensão .htm ou .html.
O documento HTML pode ser criado usando um simples editor de texto, como por exemplo, o Bloco de Notas ou NOTEPAD.
São as suas etiquetas (marcações ou em inglês tag’s) que indicam ao browser como este deve apresentar o conteúdo no ficheiro: se um determinado é título ou texto simples.
Existem duas maneiras diferentes para iniciar o NOTEPAD de modo a tornar possível a criação de uma página HTML.
A primeira:
• Pressione em Iniciar> Executar
• Escreva ‘notepad’
A segunda:
• Pressione em Iniciar> Todos os Programas> Acessórios> Bloco de Notas
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 10
Após a inserção do código mínimo guarde o ficheiro sempre na sua pasta de trabalho com a extensão .htm ou .html, como ilustra a figura em baixo:
1. Pasta de Trabalho
2. Nome do ficheiro seguido da respectiva extensão (html ou html)
3. Guardar com o tipo de ‘Todos os ficheiros’
3.3. O Código mínimo Todos os ficheiros de HTML devem ter o código essencial, conhecido também como ‘código mínimo’. Este código quando escrito num ficheiro, informa o browser que se trata de um documento HTML.
Eis o código:
<html>
<body>
</body>
</html>
As palavras envolvidas pelos sinais ‘<’ e ‘>’ são as etiquetas.
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 11
As etiquetas têm sentidos e funções específicos. No caso anterior de código mínimo, <html> indica ao browser que se trata de um documento HTML.
A etiqueta <head> refere-se ao cabeçalho da página Web, onde se coloca o título da respectiva ou algum estilo CSS (Cascading Style Sheets).
Por sua vez, a etiqueta <body> indica ao browser o corpo do documento, onde inserimos o texto, as tabelas, as imagens, isto é, todo o conteúdo que pretendemos que seja visível pelo visitante do site.
3.4. Escolher o DTD A declaração !DOCTYPE é a primeira referência que se insere num documento HTML. Esta frase informa o browser qual o tipo de linguagem que ele utiliza.
3.4.1. HTML HTML 4.01 especifica três tipos de documentos: Strict, Transitional, and Frameset.
HTML Strict DTD
Usamos este tipo de DTD quando queremos um documento simples e limpo, compatível com a maioria dos browsers. Podemos usar esta declaração com CSS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML Transitional DTD
Use este tipo de documento quando o nosso público alvo pode não ter browsers compatíveis com CSS.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Frameset DTD
Este tipo de documento deve ser usado quando temos documentos com frames.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
3.4.2. XHTML XHTML 1.0 especifica três tipos de documentos: Strict, Transitional, and Frameset.
XHTML Strict DTD
Usamos este tipo de DTD quando queremos um documento simples e limpo, compatível com a maioria dos browsers. Podemos usar esta declaração com CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 12
XHTML Transitional DTD
Use este tipo de documento quando o nosso público alvo pode não ter browsers compatíveis com CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML Frameset DTD
Este tipo de documento deve ser usado quando temos documentos com frames.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
3.5. Etiquetas As tag’s, ou etiquetas, são usadas para marcar os elementos HTML.
Todos os elementos devem ser envolvidos com os sinais de ‘<’ e ‘>’ para serem considerados start tag (etiqueta de início de elemento).
• Por exemplo, o elemento body, <body> (start tag)
As etiquetas funcionam, na sua grande maioria, aos pares, isto é, sempre que existe uma etiqueta de início (start tag) deve existir uma etiqueta de fim (end tag), para estipular o final do elemento, representado com a adição do sinal ‘/’.
• Para o elemento <body>, </body> (end tag)
As tag’s ou etiquetas são conhecidas por não serem case sensitive. Isto significa que escrevermos os elementos com letras maiúsculas ou minúsculas obtemos o mesmo resultado.
Por uma questão de estrutura, deve-se sempre fechar as etiquetas por ordem hierárquica.
Exemplo correcto:
<head>
</head>
<body>
</body>
Exemplo incorrecto:
<head>
<body>
</head>
</body>
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 13
3.5.1. Etiquetas e Atributos As etiquetas podem ainda ter atributos. Os atributos fornecem informação adicional ao browser ao apresentar a página.
A etiqueta FONT permite alterar as propriedades do tipo de letra de um elemento.
Possíveis atributos da etiqueta FONT são:
• SIZE
• FACE
• COLOR
Ao atributo deve sempre seguir o sinal de igualdade (=) e entre aspas o respectivo valor, como no exemplo seguite:
• <etiqueta atributo=”valor”>texto</etiqueta>
No caso do atributo COLOR em que os valores possíveis são os códigos hexadecimais ou o nome da cor, podemos usar, por exemplo, no elemento h1:
• <h1><font color=”#FFFFFF”>texto</font></h1> ou
• <h1><font color=”white”>texto</font></h1>
3.5.2. Etiquetas Básicas As etiquetas básicas do HTML são:
Etiqueta Objectivo
<html> define o documento como ‘Documento HTML’
<body> define o corpo do documento
<h1>, <h2>, <h3>, <h4>, <h5> e <h6> definem títulos
<p> define o parágrafo
<br> define a quebra de linha simples
<hr> define uma linha horizontal
<!--> define um comentário
3.5.3.
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 14
3.5.4. Etiquetas de Texto
Exemplo em HTML Exemplo no browser
<tt>Texto teletipo</tt><br /> Texto teletipo
<i>Texto itálico</i><br /> Texto Itálico
<b>Texto negrito</b><br /> Texto Negrito
<big>Texto grande</big><br /> Texto grande
<small>Texto pequeno</small><br /> Texto pequeno
<em>Texto emfatizado</em><br /> Texto emfatizado
<strong>Texto forte</strong><br /> Texto fortet
<dfn>Texto de definição</dfn><br /> Texto de definição
<code>Texto de código de computador</code><br /> Texto de código de computador
<samp>Texto de exemplo de CC</samp><br /> Texto de exemplo de CC
<kbd>Texto de teclado</kbd><br /> Texto de teclado
<var>Variável</var><br /> Variável
<cite>Citação</cite> Citação
Este texto está <sub>inferior à linha</sub> Este texto está inferior à linha
Este texto está <sup>superior à linha</sup> Este texto está superior à linha
Uma dúzia são <del>20</del> 12 peças Uma dúzia são 20 12 peças
3.5.5. Etiquetas de definição de parágrafo
Exemplo em HTML Exemplo no browser
<address> Quinta da Malata<br /> Lote 12<br /> Portimão </address>
Quinta da Malatak Lote 12 Portimão
<blockquote>Define um longo discurso</blockquote>
Define um longo discurso
<q>Define um discurso curto</q> Define um discurso curto
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 15
3.5.6. Hiperligações As hiperligações são as ligações a outras páginas Web ou documentos a partir de um objecto, seja texto, imagem ou filme.
Para criarmos uma hiperligação usamos a etiqueta <a> âncora e o atributo href.
• <a href=”url”>Texto</a>
Alguns exemplos específicos de aplicação da âncora:
• Texto “Professor Carlos Correia” a hiperligar ao site online
o <a href=”http://www.carlos-correia.com”>Professor Carlos Correia</a>
• Texto “Receitas” a hiperligar a um documento HTML na mesma directoria
o <a href=”chocolate.html”>Receitas</a>
• Texto “e-mail” a hiperligar para o endereço de e-mail ‘[email protected]’:
o <a href=”mailto:[email protected]”>e-mail</a>
Contudo, o elemento de hiperligação (<a>) tem mais atributos. Um dos atributos também importantes é o que controla o destino da hiperligação, informando ao browser que esta será aberta numa nova página ou no mesmo documento (pré-definição).
O atributo target pode ter os valores: _blank, _self, _parent e _top.
As mais importantes:
Valor do atributo TARGET Objectivo
_blank A hiperligação abrirá numa nova janela
_self A hiperligação abrirá na mesma janela em que foi activada
3.5.7. Listas Listas ordenadas
Quando pretendemos ordenar itens de forma aleatória, usando apenas símbolos para destacar as diferentes palavras ou frases, usamos as etiquetas <ul> e <li>.
Exemplo em HTML Exemplo no browser
<ul>
<li>5 cenouras</li>
<li>1 colher de açúcar</li>
<li> manteiga q.b.</li>
</ul>
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 16
Listas não ordenadas
Quando pretendemos ordenar itens de forma numerada, usamos as etiquetas <ol> e <li>.
Exemplo em HTML Exemplo no browser
<ol>
<li>5 cenouras</li>
<li>1 colher de açúcar</li>
</ol>
3.5.8. Imagens A inserção de imagens num documento faz-se com a etiqueta <img>. Esta etiqueta tem conteúdo vazio, o que significa que ela apenas possui atributos e não tem etiqueta de fecho.
A escolha da imagem a mostrar na página faz-se através do atributo src (que é uma abreviação de "source," ou origem) o qual indica o nome e o local em que pode ser encontrado o ficheiro que contém a imagem.
O exemplo seguinte ilustra o uso deste elemento:
<html>
<body>
<img src="cabecalho.gif">
</body>
</html>
O atributo alt usa-se para definir "texto alternativo" à imagem. Este texto será mostrado em vez da imagem no caso de o browser não conseguir apresentá-la. Usa-se assim:
<img src="paisagem.jpg" alt="Paisagem do Algarve">
3.5.9. Fundo da página Quando pretendemos colocar uma cor de fundo numa página temos que formatar o elemento principal da página, isto é, o <body>.
Dentro do elemento <body> podemos usar dois atributos que alteram as características da página.
Atributos para BODY Objectivo
bgcolor Formata o fundo da página com uma cor usando o código hexadecimal da cor ou o seu nome
background Formata o fundo da página com uma imagem
Alguns exemplos específicos de propriedades no fundo da página:
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 17
• Fundo da página formatado com a cor vermelha
o <body bgcolor=”red”> ou <body bgcolor=”#FF0000”>
• Fundo da página formatado com uma imagem chamada ‘fundo.jpg’ localizada na mesma directoria da página
o <body background=”fundo.jpg”>
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 18
4. Cores Os hardware hoje em dia é ligeiramente diferente e, no mínimo, um visitante normal poderá ter um monitor/placa gráfica a funcionar a 16 bits, o que significa 65 000 cores.
4.1. Cores seguras para a Internet A palete de cores seguras para a Internet assenta nos pressupostos que existem utilizadores que visitam páginas de Internet e têm monitores/placas gráficas antigas, que apenas conseguem mostrar 256 cores. Contudo, eis a palete de 256 cores seguras para a Internet, com os respectivos códigos hexadecimais:
000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 19
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF
4.2. Mais cores Consistem em 16,7 milhões de cores que um monitor CRT (convencional), TFT ou LCD conseguem mostrar.
Nome da Cor
Código HTML
Snow #FFFAFA
GhostWhite #F8F8FF
WhiteSmoke #F5F5F5
Gainsboro #DCDCDC
FloralWhite #FFFAF0
OldLace #FDF5E6
Linen #FAF0E6
AntiqueWhite #FAEBD7
PapayaWhip #FFEFD5
BlanchedAlmond #FFEBCD
Bisque #FFE4C4
PeachPuff #FFDAB9
NavajoWhite #FFDEAD
Moccasin #FFE4B5
Cornsilk #FFF8DC
Ivory #FFFFF0
LemonChiffon #FFFACD
Nome da Cor
Código HTML
Firebrick4 #8B1A1A
Brown1 #FF4040
Brown2 #EE3B3B
Brown3 #CD3333
Brown4 #8B2323
Salmon1 #FF8C69
Salmon2 #EE8262
Salmon3 #CD7054
Salmon4 #8B4C39
LightSalmon1 #FFA07A
LightSalmon2 #EE9572
LightSalmon3 #CD8162
LightSalmon4 #8B5742
Orange1 #FFA500
Orange2 #EE9A00
Orange3 #CD8500
Orange4 #8B5A00
Nome da Cor
Código HTML
Gold4 #8B7500
Goldenrod1 #FFC125
Goldenrod2 #EEB422
Goldenrod3 #CD9B1D
Goldenrod4 #8B6914
DarkGoldenrod1 #FFB90F
DarkGoldenrod2 #EEAD0E
DarkGoldenrod3 #CD950C
DarkGoldenrod4 #8B658B
RosyBrown1 #FFC1C1
RosyBrown2 #EEB4B4
RosyBrown3 #CD9B9B
RosyBrown4 #8B6969
IndianRed1 #FF6A6A
IndianRed2 #EE6363
IndianRed3 #CD5555
IndianRed4 #8B3A3A
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 20
Seashell #FFF5EE
Honeydew #F0FFF0
MintCream #F5FFFA
Azure #F0FFFF
AliceBlue #F0F8FF
lavender #E6E6FA
LavenderBlush #FFF0F5
MistyRose #FFE4E1
White #FFFFFF
Black #000000
DarkSlateGray #2F4F4F
DimGrey #696969
SlateGrey #708090
LightSlateGray #778899
Grey #BEBEBE
LightGray #D3D3D3
MidnightBlue #191970
NavyBlue #000080
CornflowerBlue #6495ED
DarkSlateBlue #483D8B
SlateBlue #6A5ACD
MediumSlateBlue #7B68EE
LightSlateBlue #8470FF
MediumBlue #0000CD
DarkOrange1 #FF7F00
DarkOrange2 #EE7600
DarkOrange3 #CD6600
DarkOrange4 #8B4500
Coral1 #FF7256
Coral2 #EE6A50
Coral3 #CD5B45
Coral4 #8B3E2F
Tomato1 #FF6347
Tomato2 #EE5C42
Tomato3 #CD4F39
Tomato4 #8B3626
OrangeRed1 #FF4500
OrangeRed2 #EE4000
OrangeRed3 #CD3700
OrangeRed4 #8B2500
Red1 #FF0000
Red2 #EE0000
Red3 #CD0000
Red4 #8B0000
DeepPink1 #FF1493
DeepPink2 #EE1289
DeepPink3 #CD1076
DeepPink4 #8B0A50
Sienna1 #FF8247
Sienna2 #EE7942
Sienna3 #CD6839
Sienna4 #8B4726
Burlywood1 #FFD39B
Burlywood2 #EEC591
Burlywood3 #CDAA7D
Burlywood4 #8B7355
Wheat1 #FFE7BA
Wheat2 #EED8AE
Wheat3 #CDBA96
Wheat4 #8B7E66
Tan1 #FFA54F
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 21
RoyalBlue #4169E1
Blue #0000FF
HotPink1 #FF6EB4
HotPink2 #EE6AA7
Gold2 #EEC900
Nome da Cor
Código HTML
DodgerBlue #1E90FF
DeepSkyBlue #00BFFF
SkyBlue #87CEEB
LightSkyBlue #87CEFA
SteelBlue #4682B4
LightSteelBlue #B0C4DE
LightBlue #ADD8E6
PowderBlue #B0E0E6
PaleTurquoise #AFEEEE
DarkTurquoise #00CED1
MediumTurquoise #48D1CC
Turquoise #40E0D0
Cyan #00FFFF
LightCyan #E0FFFF
CadetBlue #5F9EA0
MediumAquamarine #66CDAA
Aquamarine #7FFFD4
DarkGreen #006400
Nome da Cor
Código HTML
SlateGray4 #6C7B8B
LightSteelBlue1 #CAE1FF
LightSteelBlue2 #BCD2EE
LightSteelBlue3 #A2B5CD
LightSteelBlue4 #6E7B8B
LightBlue1 #BFEFFF
LightBlue2 #B2DFEE
LightBlue3 #9AC0CD
LightBlue4 #68838B
LightCyan1 #E0FFFF
LightCyan2 #D1EEEE
LightCyan3 #B4CDCD
LightCyan4 #7A8B8B
PaleTurquoise1 #BBFFFF
PaleTurquoise2 #AEEEEE
PaleTurquoise3 #96CDCD
PaleTurquoise4 #668B8B
CadetBlue1 #98F5FF
Nome da Cor
Código HTML
HotPink3 #CD6090
HotPink4 #8B3A62
Pink1 #FFB5C5
Pink2 #EEA9B8
Pink3 #CD919E
Pink4 #8B636C
LightPink1 #FFAEB9
LightPink2 #EEA2AD
LightPink3 #CD8C95
LightPink4 #8B5F65
PaleVioletRed1 #FF82AB
PaleVioletRed2 #EE799F
PaleVioletRed3 #CD6889
PaleVioletRed4 #8B475D
Maroon1 #FF34B3
Maroon2 #EE30A7
Maroon3 #CD2990
Maroon4 #8B1C62
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 22
DarkOliveGreen #556B2F
DarkSeaGreen #8FBC8F
SeaGreen #2E8B57
MediumSeaGreen #3CB371
LightSeaGreen #20B2AA
PaleGreen #98FB98
SpringGreen #00FF7F
LawnGreen #7CFC00
Green #00FF00
Chartreuse #7FFF00
MedSpringGreen #00FA9A
GreenYellow #ADFF2F
LimeGreen #32CD32
YellowGreen #9ACD32
ForestGreen #228B22
OliveDrab #6B8E23
DarkKhaki #BDB76B
PaleGoldenrod #EEE8AA
LtGoldenrodYello #FAFAD2
LightYellow #FFFFE0
Yellow #FFFF00
Gold #FFD700
LightGoldenrod #EEDD82
goldenrod #DAA520
CadetBlue2 #8EE5EE
CadetBlue3 #7AC5CD
CadetBlue4 #53868B
Turquoise1 #00F5FF
Turquoise2 #00E5EE
Turquoise3 #00C5CD
Turquoise4 #00868B
Cyan1 #00FFFF
Cyan2 #00EEEE
Cyan3 #00CDCD
Cyan4 #008B8B
DarkSlateGray1 #97FFFF
DarkSlateGray2 #8DEEEE
DarkSlateGray3 #79CDCD
DarkSlateGray4 #528B8B
Aquamarine1 #7FFFD4
Aquamarine2 #76EEC6
Aquamarine3 #66CDAA
Aquamarine4 #458B74
DarkSeaGreen1 #C1FFC1
DarkSeaGreen2 #B4EEB4
DarkSeaGreen3 #9BCD9B
DarkSeaGreen4 #698B69
SeaGreen1 #54FF9F
VioletRed1 #FF3E96
VioletRed2 #EE3A8C
VioletRed3 #CD3278
VioletRed4 #8B2252
Magenta1 #FF00FF
Magenta2 #EE00EE
Magenta3 #CD00CD
Magenta4 #8B008B
Orchid1 #FF83FA
Orchid2 #EE7AE9
Orchid3 #CD69C9
Orchid4 #8B4789
Plum1 #FFBBFF
Plum2 #EEAEEE
Plum3 #CD96CD
Plum4 #8B668B
MediumOrchid1 #E066FF
MediumOrchid2 #D15FEE
MediumOrchid3 #B452CD
MediumOrchid4 #7A378B
DarkOrchid1 #BF3EFF
DarkOrchid2 #B23AEE
DarkOrchid3 #9A32CD
DarkOrchid4 #68228B
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 23
DarkGoldenrod #B8860B
SeaGreen2 #4EEE94
Purple1 #9B30FF
Purple2 #912CEE
Nome da Cor
Código HTML
RosyBrown #BC8F8F
IndianRed #CD5C5C
SaddleBrown #8B4513
Sienna #A0522D
Peru #CD853F
Burlywood #DEB887
Beige #F5F5DC
Wheat #F5DEB3
SandyBrown #F4A460
Tan #D2B48C
Chocolate #D2691E
Firebrick #B22222
Brown #A52A2A
DarkSalmon #E9967A
Salmon #FA8072
LightSalmon #FFA07A
Orange #FFA500
DarkOrange #FF8C00
Coral #FF7F50
Nome da Cor
Código HTML
MistyRose1 #FFE4E1
MistyRose2 #EED5D2
MistyRose3 #CDB7B5
MistyRose4 #8B7D7B
Azure1 #F0FFFF
Azure2 #E0EEEE
Azure3 #C1CDCD
Azure4 #838B8B
SlateBlue1 #836FFF
SlateBlue2 #7A67EE
SlateBlue3 #6959CD
SlateBlue4 #473C8B
RoyalBlue1 #4876FF
RoyalBlue2 #436EEE
RoyalBlue3 #3A5FCD
RoyalBlue4 #27408B
Blue1 #0000FF
Blue2 #0000EE
Blue3 #0000CD
Nome da Cor
Código HTML
SeaGreen3 #43CD80
SeaGreen4 #2E8B57
PaleGreen1 #9AFF9A
PaleGreen2 #90EE90
PaleGreen3 #7CCD7C
PaleGreen4 #548B54
SpringGreen1 #00FF7F
SpringGreen2 #00EE76
SpringGreen3 #00CD66
SpringGreen4 #008B45
Green1 #00FF00
Green2 #00EE00
Green3 #00CD00
Green4 #008B00
Chartreuse1 #7FFF00
Chartreuse2 #76EE00
Chartreuse3 #66CD00
Chartreuse4 #458B00
OliveDrab1 #C0FF3E
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 24
LightCoral #F08080
Tomato #FF6347
OrangeRed #FF4500
Red #FF0000
HotPink #FF69B4
DeepPink #FF1493
Pink #FFC0CB
LightPink #FFB6C1
PaleVioletRed #DB7093
Maroon #B03060
MediumVioletRed #C71585
VioletRed #D02090
Magenta #FF00FF
Violet #EE82EE
Plum #DDA0DD
Orchid #DA70D6
MediumOrchid #BA55D3
DarkOrchid #9932CC
DarkViolet #9400D3
BlueViolet #8A2BE2
Purple #A020F0
MediumPurple #9370DB
Thistle #D8BFD8
Snow1 #FFFAFA
Blue4 #00008B
DodgerBlue1 #1E90FF
DodgerBlue2 #1C86EE
DodgerBlue3 #1874CD
DodgerBlue4 #104E8B
SteelBlue1 #63B8FF
SteelBlue2 #5CACEE
SteelBlue3 #4F94CD
SteelBlue4 #36648B
DeepSkyBlue1 #00BFFF
DeepSkyBlue2 #00B2EE
DeepSkyBlue3 #009ACD
DeepSkyBlue4 #00688B
SkyBlue1 #87CEFF
SkyBlue2 #7EC0EE
SkyBlue3 #6CA6CD
SkyBlue4 #4A708B
LightSkyBlue1 #B0E2FF
LightSkyBlue2 #A4D3EE
LightSkyBlue3 #8DB6CD
LightSkyBlue4 #607B8B
SlateGray1 #C6E2FF
SlateGray2 #B9D3EE
SlateGray3 #9FB6CD
OliveDrab2 #B3EE3A
OliveDrab3 #9ACD32
OliveDrab4 #698B22
DarkOliveGreen1 #CAFF70
DarkOliveGreen2 #BCEE68
DarkOliveGreen3 #A2CD5A
DarkOliveGreen4 #6E8B3D
Khaki1 #FFF68F
Khaki2 #EEE685
Khaki3 #CDC673
Khaki4 #8B864E
LightGoldenrod1 #FFEC8B
LightGoldenrod2 #EEDC82
LightGoldenrod3 #CDBE70
LightGoldenrod4 #8B814C
LightYellow1 #FFFFE0
LightYellow2 #EEEED1
LightYellow3 #CDCDB4
LightYellow4 #8B8B7A
Yellow1 #FFFF00
Yellow2 #EEEE00
Yellow3 #CDCD00
Yellow4 #8B8B00
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 25
Gold1 #FFD700
Gold3 #CDAD00
Fonte: http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 26
5. Estilos CSS CSS significa Cascading Style Sheets e permite definir como são apresentados os elementos HTML.
Os estilos CSS são guardados normalmente em ficheiros com a extensão .css e podem ser criados, tal como os ficheiros HTML, com um editor de texto, como o Bloco de Notas.
Um ficheiro CSS pode ter o seguido aspecto:
h2 {font-family:Arial; color:yellow}
p {font-family:Arial; color:blue}
ou
h2 {
font-family:Arial;
color:yellow
}
p {
font-family:Arial;
color:blue
}
Quando o browser lê uma folha de estilos ele guarda na memória as definições que encontra. Ao apresentar a página, que contém referências a esses estilos, ele aplica as definições que leu antes para criar o aspecto gráfico desejado. Existem três maneiras diferentes para definir estilos CSS.
5.1. Como inserir uma folha de Estilos
5.1.1. Folha de estilos externa Uma folha de estilos externa é solução mais indicada quando se pretende aplicar os mesmos estilos a várias páginas. Este método de formatação permite-nos alterar os estilos apenas na folha e tê-los aplicados a todas as páginas imediatamente. Todas as páginas ficam actualizadas com as novas definições. Para uma página poder usar uma folha de estilos basta colocar dentro do cabeçalho (<head>) um elemento <link> com uma referência para a folha de estilos que contém as definições, como se ilustra a seguir:
<head>
<link rel="stylesheet" type="text/css" href="carlos.css">
</head>
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 27
5.1.2. Folhas de estilos internas As folhas de estilos internas devem ser usadas quando as definições são usadas por um único documento. Neste caso as definições dos estilos são colocadas dentro de um elemento <style> no cabeçalho do documento HTML:
<head>
<style type="text/css">
body {background-color:red}
p {font-family:Arial; color:yellow}
</style>
</head>
5.1.3. Estilos "inline" Um estilo "inline" usa-se quando a definição em causa só precisa de ser usada uma única vez.
A definição de estilos "inline" faz-se através do atributo style colocado no elemento ao qual queremos aplicar o estilo. A definição pode conter qualquer uma das propriedades CSS. O exemplo seguinte mostra como podemos alterar a cor e a margem esquerda de um parágrafo:
<p style=" font-family:Arial; color:blue">Isto é um parágrafo</p>
5.2. Sintaxe do CSS As declarações em CSS são feitas em três partes: elemento {propriedade:valor}
Por exemplo:
body {background-image:fundo.png}
Para facilitar a leitura dos estilos CSS é ainda possível especificar a declaração anterior do seguinte modo:
body {
background-image:url(fundo.png)
}
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 28
Exemplo de página com o nome index.html com ligação externa a uma folha de estilo chamado estilo.css que tem definido no elemento body a imagem de fundo (background-image) fundo.png.
Imagem fundo.png
Os vários ficheiros abertos simultaneamente:
A declaração “background-image:url(fundo.png)”, quando ligada a um ficheiro HTML, seja por folha de estilo externa, interna ou inline, faz com que o browser repita a imagem ‘fundo.jpg’ pelo fundo da página.
Podemos ainda agrupar vários elementos ou propriedades separando-os por vírgulas (,) como nos exemplos seguintes.
Agrupar elementos:
h1,h2,h3 {font-family:Arial; color:yellow}
Agrupar propriedades:
p {font-family:Arial; color:yellow}
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 29
5.3. As classes Com o seleccionador de class podemos definir vários estilos ao mesmo elemento HTML.
Caso queiramos assim apresentar vários parágrafos com as mesmas definições mas alinhamentos diferentes podemos “inventar” classes.
É ainda possível criarmos uma classe para qualquer elemento HTML.
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 30
5.4. As id e as DIV’s As id são como as classes mas podem definir um objecto como uma caixa para inserir texto ou imagens.
Neste exemplo foi utilizado no ficheiro HTML o elemento DIV para funcionar como uma tabela.
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 31
5.5. Formatação de elementos em CSS
5.5.1. Formatação do fundo dos elementos (BACKGROUND) A propriedade Background define o efeito de fundo do elemento.
Propriedade Descrição da propriedade
Valores possíveis Definição
background Uma abreviatura para definir todas as propriedades numa só
Todas as propriedades que se apresentam nesta tabela
scroll O fundo roda com o scroll (rolagem) da página background-attachment
Define se a imagem de fundo será fixa ou rodará com o resto da página fixed O fundo fica sempre
fixo
color-rgb Código da core m RGB
color-hex Código da core m hexadecimal
color-name Nome da cor background-color Define a cor de fundo de um elemento
transparent Define a visibilidade do fundo como transparente
url(url) A localização da imagem background-image Define a imagem de
fundo de um elemento none Fundo sem imagem
top left Canto superior esquerdo
top center Superior ao centro
top right Canto superior direito
center left Centro à esquerda
background-position Especifica a posição onde será colocada a imagem
center center Centro centro
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 32
center right Centro à direita
bottom left Canto inferior esquerdo
bottom center Inferior ao centro
bottom right Canto inferior direito
x% y% Usando um valor percentual
xpos ypos Usando valores fixos
repeat Repete o fundo horizontalmente e verticalmente
repeat-x Repete o fundo horizontalmente
repeat-y Repete o fundo verticalmente
background-repeat Define como será repetida a imagem de fundo
no-repeat Não repete o fundo
Exemplos da propriedade background
Propriedade Exemplo em CSS Resultado
background body {
background: url(fundo.png) no-repeat fixed top}
background-attachment
body {
background-image:url(fundo.png);
background-attachment: fixed}
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 33
background-color
body {
background-color:3399CC}
background-image
body {
background-image:url(fundo.png)}
background-position
body {
background-image:url(fundo.png);
background-repeat:no-repeat;
background-position:center center}
background-repeat
body {
background-image:url(fundo.png);
background-repeat:repeat-x}
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 34
5.5.2. Formatação de Texto dos elementos (TEXT)
Propriedade Descrição da propriedade
Valores possíveis Definição
color Especifica a cor do texto Qualquer código ou nome da cor
ltr Da direita para a esquerda
direction Controla a direcção do texto
rtl Da esquerda para a direita
normal Sem distância
número A distância será regulada pelo número inserido x o normal
número + unidade
(20px)
A distância será regulada por um valor e as respectivas unidades
line-height Especifica a distância entre as linhas de texto
número%
A distância será regulada em relação ao espaçamento normal que é igual a 100%
normal Espaçamento normal
letter-spacing Aumenta ou diminui o espaçamento entre caracteres
número + unidade
(20px)
Espaçamento regulado por um valor e unidade
left Alinha à esqueda
right Alinha à direita
center Alinha ao centro text-align Alinha o texto do elemento
justify Justifica o texto ao elemento
text-decoration Decora o texto none Não decora o texto
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 35
underline Sublinha o texto
overline Coloca uma linha superior ao longo do texto
line-through Risca o texto
número + unidade
(20px)
A distância será regulada por um valor e as respectivas unidades
text-indent Avança o texto
número%
A distância será regulada em relação ao espaçamento normal que é igual a 100%
none Texto sem transformação
capitalize Texto com iniciais maiúsculas
uppercase Todo o texto maiúsculo
text-transform Transforma o texto
lowercase Todo o texto minúsculo
normal Espaçamento normal
word-spacing Aumenta ou diminui o espaçamento das palavras
número + unidade
(20px)
Espaçamento regulado por um valor e unidade
Exemplos das propriedades para formatar o texto
Propriedade Exemplo em CSS Resultado
color
body {
background-image:url(fundo.png);
color:#003399}
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 36
direction
body {
background-image:url(fundo.png);
color:#003399;
direction: rtl}
line-height p {
line-height:20px}
letter-spacing
p {
letter-spacing:5px}
text-align p {
text-align:center}
text-decoration
p {
text-decoration:overline}
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 37
text-indent p {
text-indent:20px}
text-transform
p {
text-transform:uppercase}
word-spacing p {
word-spacing:10px}
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 38
5.5.3. Formatação do Tipo de Letra dos elementos (FONT)
Propriedade Descrição da propriedade
Valores possíveis Definição
font
Uma abreviatura para definir todas as propriedades numa só
Todas as propriedades que se apresentam nesta tabela
font-family
Formata o texto do elemento com determinado tipo de letra
family-name Nome do Tipo de Letra
xx-small
x-small
small
médium
large
x-large
xx-large
smaller
larger
número + unidade
(20px)
A distância será regulada por um valor e as respectivas unidades
font-size Regula o tamanho da letra
número% A distância será regulada em relação ao espaçamento normal que é igual a 100%
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 39
normal Sem inclinação
italic Com ligeira inclinação font-style Define a inclinação do Tipo de Letra
oblique Com muita inclinação
none Letras normais font-variant
Define a letra com letras maiúsculas pequenas small-caps Letras maiúsculas pequenas
Exemplos das propriedades para formatar o texto
Propriedade Exemplo em CSS Resultado
font-family p {
font-family:Arial}
font-size p {
font-size:120%}
font-style p {
font-style:italic}
font-variant p {
font-variant:small-caps}
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 40
5.5.4. Formatação de limites dos elementos (BORDER)
Propriedade Descrição da propriedade
Valores possíveis Definição
border-width Largura do limite
border-style Estilo do limite border Uma abreviatura para definir todas as propriedades numa só
border-color Cor do Limite
border-color
Uma abreviatura para definir todas as propriedades de cor dos limites
Cor Qualquer tipo de cor: hexadecimal, nome, etc.
none Sem limites
hidden Limites ocultos
dotted Limites picotados
dashed Limites tracejados
solid Limites contínuos
double Limite duplo
groove Limite tridimensional
ridge Limite tridimensional
inset Limite tridimensional
border-style
Uma abreviatura para definir todas as propriedades do estilo dos limites
outset Limite tridimensional
thin Limite fino
medium Limite médio
thick Limite grosso border-with
Uma abreviatura para definir todas as propriedades da largura dos limites número +
unidade
(20px)
A distância será regulada por um valor e as respectivas unidades
No caso da propriedade border é possível formatar mais propriedades. As propriedades bottom, left, right e top permitem formatar cada limite independentemente.
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 41
Deste modo podemos associar estas propriedades com border, border-color, border-style e border-width do seguinte modo:
• border-bottom
• border-bottom-color
• border-bottom-style
• border-bottom-width
• border-left
• border- left -color
• border- left -style
• border- left -width
• border-right
• border- right -color
• border- right -style
• border- right -width
• border-top
• border- top -color
• border- top -style
• border- top -width
Exemplos das propriedades para formatar a DIV “caixa”
Propriedade Exemplo em CSS Resultado
border
#caixa {
background-color:white;
border:#E0E0E0 dashed;
width:80%;
height:80%}
border-color
#caixa {
background-color:white;
border-color:#D0D0D0;
border-style:dashed;
width:80%;
height:80%}
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 42
border-style
#caixa {
background-color:white;
border-color:#D0D0D0;
border-style:dotted;
width:80%;
height:80%}
border-width
#caixa {
background-color:white;
border-color:#D0D0D0;
border-style:dotted;
border-width:thick;
width:80%;
height:80%}
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 43
5.5.5. Formatação de margens dos elementos (MARGINS)
Propriedade Descrição da propriedade
Valores possíveis Definição
margin Uma abreviatura para definir todas as margens do elemento
Todas as propriedades que se apresentam nesta tabela
auto A margem é definida automaticamente pelo browser
número + unidade
(20px)
A margem será regulada por um valor e as respectivas unidades
margin-bottom Define a margem inferior do elemento
número%
A margem será regulada em relação à altura da página que é 100%
auto A margem é definida automaticamente pelo browser
número + unidade
(20px)
A margem será regulada por um valor e as respectivas unidades
margin-left Define a margem esquerda do elemento
número%
A margem será regulada em relação à altura da página que é 100%
auto A margem é definida automaticamente pelo browser
número + unidade
(20px)
A margem será regulada por um valor e as respectivas unidades
margin-right Define a margem direita do elemento
número% A margem será regulada em relação à altura da página que é
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 44
100%
auto A margem é definida automaticamente pelo browser
número + unidade
(20px)
A margem será regulada por um valor e as respectivas unidades margin-top Define a margem
superior do elemento
número%
A margem será regulada em relação à altura da página que é 100%
Exemplos das propriedades para formatar o texto
Propriedade Exemplo em CSS Resultado
margin
#caixa {
background-color:white;
margin:auto;
width:80%;
height:120px}
margin-bottom
p {
margin-bottom:20px}
margin-left
p {
margin-top:20px;
margin-left:20px}
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 45
margin-right
p {
margin-top:20px;
margin-left:20px;
margin-right:20px}
margin-top p {
margin-top:20px}
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 46
5.5.6. Formatação da moldura dos elementos (PADDING)
Propriedade Descrição da propriedade
Valores possíveis Definição
padding
Uma abreviatura para definir todos os valores da moldura do elemento
Todas as propriedades que se apresentam nesta tabela
número + unidade
(20px)
A moldura será regulada por um valor e as respectivas unidades
padding-bottom Define a moldura inferior do elemento
número%
A moldura será regulada em relação à altura da página que é 100%
número + unidade
(20px)
A moldura será regulada por um valor e as respectivas unidades
padding-left Define a moldura esquerda do elemento
número%
A moldura será regulada em relação à altura da página que é 100%
número + unidade
(20px)
A moldura será regulada por um valor e as respectivas unidades
padding-right Define a moldura direita do elemento
número%
A moldura será regulada em relação à altura da página que é 100%
número + unidade
(20px)
A moldura será regulada por um valor e as respectivas unidades
padding-top Define a moldura superior do elemento
número%
A moldura será regulada em relação à altura da página que é 100%
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 47
Exemplos das propriedades para formatar o texto
Propriedade Exemplo em CSS Resultado
padding
#caixa {
background-color:white;
margin:auto;
padding:20px;
width:70%;
height:100px}
padding -bottom
#caixa {
background-color:white;
margin:auto;
padding-bottom:50px;
width:70%;
height:100px}
padding -left
#caixa {
background-color:white;
margin:auto;
padding-left:50px;
width:70%;
height:100px}
padding -right
#caixa {
background-color:white;
margin:auto;
padding-right:50px;
width:70%;
height:100px}
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 48
padding -top
#caixa {
background-color:white;
margin:auto;
padding-top:20px;
width:70%;
height:100px}
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 49
5.5.7. Formatação de listas (LIST) e marcadores (MARKER)
Propriedade Descrição da propriedade
Valores possíveis Definição
list-style Uma abreviatura para definir a lista
Todas as propriedades que se apresentam nesta tabela à excepção do marker-offset
none Apresenta o marcador • em cada item da lista (predefinido)
list-style-image Especifica uma imagem como marcador da lista
url Apresenta uma imagem como marcador em cada item da lista
inside O marcador apresenta-se com um avanço
list-style-position Especifica onde fica o marcador da lista
outside O marcador apresenta-se na sua posição predefinida
none Não apresenta marcador
disc Apresenta um disco como marcador •
circle Apresenta uma circunferência como marcador ◦
square Apresenta um quadrado como marcador ▪
decimal
Apresenta uma ordenação numerada predefinida como marcador
list-style-type Especifica o tipo de marcador para a lista
lower-roman
Apresenta uma ordenação romana ordenada em minúsculas como marcador
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 50
upper-roman
Apresenta uma ordenação romana ordenada em maiúsculas como marcador
lower-alpha
Apresenta uma ordenação alfabética em minúsculas como marcador
upper-alpha
Apresenta uma ordenação alfabética em minúsculas como marcador
Exemplos das propriedades para formatar o texto
Propriedade Exemplo em CSS Resultado
list-style ul {
list-style:url(star.png) inside}
list-style-image
ul {
font-family:arial;
list-style-image:url(star.png)}
list-style-position
ul {
font-family:arial;
list-style-image:url(star.png);
list-style-position:inside}
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 51
list-style-type
ul {
font-family:arial;
list-style-type:square}
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 52
5.5.8. Formatação de dimensões dos elementos
Propriedade Descrição da propriedade
Valores possíveis Definição
auto
A distância será controlada pelo browser dependendo dos outros elementos
número + unidade
(20px)
A distância será regulada por um valor e as respectivas unidades
height Especifica a altura do elemento
número%
A distância será regulada em relação ao espaçamento normal que é igual a 100%
auto
A distância será controlada pelo browser dependendo dos outros elementos
número + unidade
(20px)
A distância será regulada por um valor e as respectivas unidades
width Especifica a largura do elemento
número%
A distância será regulada em relação ao espaçamento normal que é igual a 100%
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 53
Exemplos das propriedades para formatar o texto
Propriedade Exemplo em CSS Resultado
height
#caixa {
background-color:white;
margin:auto;
padding:10px;
width:70%;
height:100px}
width
#caixa {
background-color:white;
margin:auto;
padding:10px;
width:80%;
height:100px}
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 54
5.5.9. Formatação de classificação (CLASSIFICATION)
Propriedade Descrição da propriedade
Valores possíveis Definição
left Força o elemento a não ter nenhum elemento à esquerda
right Força o elemento a não ter nenhum elemento à direita
both Força o elemento a não ter nenhum elemento à esquerda e à direita
clear
Controla os lados do elemento quando nenhuma outra propriedade de classificação é possível
none Apresenta o elemento normalmente
url
Apresenta uma imagem como cursor. A imagem deve estar no formato ICO
auto O browser define o cursor
crosshair Apresenta o cursor
default O cursor predefinido
pointer Apresenta o cursor
move Apresenta o cursor
text Apresenta o cursor
wait Apresenta o cursor
cursor
Especifica que tipo de cursor será mostrado no elemento.
Estes são os cursores principais.
Ainda existe, por exemplo:
• e-resize
• ne-resize
• nw-resize
• n-resize
• se-resize
• sw-resize
• progress
• not-allowed
• no-drop
• vertical-text
• all-scroll
• col-resize help Apresenta o cursor
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 55
none Não apresenta o elemento
inline Apresenta todos os elementos seguidos
block
Apresenta o elemento usando quebras de linha. É a opção predefinida
display
Controla como o elemento é mostrado.
Estes são os valores mais usados.
list-item
Apresenta os elementos como se fossem listas, sem espaçamento entre os elementos
left O elemento será apresentado a partir do lado esquerdo
right O elemento será apresentado a partir do lado direito
float
Controla onde o elemento será apresentado quando dentro de outro elemento
none
O elemento será apresentado onde inserido. É a opção predefinida
visible Mostra o elemento
hidden Oculta o elemento visibility Controla se o elemento
é visível ou invisível
collapse Torna visível ou invisível linhas ou elementos numa tabela
Exemplos das propriedades para formatar o texto
Propriedade Exemplo em CSS Resultado
clear
p {
font-family:arial;
clear:none}
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 56
clear
p {
font-family:arial;
clear:left}
cursor
p {
font-family:arial;
cursor:url(ok.ico)}
display
p {
font-family:arial;
display:inline}
display
p {
font-family:arial;
display:block}
float
#caixa {
background-color:white;
margin:auto;
padding:10px;
width:80%;
height:40px;
float:right}
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 57
visibility
p.invisivel {
visibility:hidden}
p.visivel {
visibility:visible}
Apenas é apresentado o texto na class visivel
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 58
5.5.10. Formatação de posição (POSITIONING)
Propriedade Descrição da propriedade
Valores possíveis Definição
auto
A distância será controlada pelo browser dependendo dos outros elementos
número + unidade
(20px)
A distância será regulada por um valor e as respectivas unidades
bottom, left, right, top
Especifica a distância que afastará o lado inferior (bottom), esquerdo (left), direito (right) ou superior (top) do elemento em relação ao elemento hierárquico superior
número% A distância será regulada em relação ao elemento
auto O browser mostra o elemento na sua totalidade
clip
Controla a forma de um elemento cortando-o
(top, right, bottom, left) rect
A forma do elemento é cortada consoante os valores
overflow
static
O elemento será posicionado onde inserido no código HTML. É a opção predefinida
relative
O elemento será posiciona no elemento superior onde indicarmos com as propriedades top, left, right e bottom
position Controla a posição do elemento
absolute
O elemento será posicionado na página onde indicarmos com as propriedades top, left, right e bottom
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 59
fixed
O elemento será posicionado na página onde indicarmos com as propriedades top, left, right e bottom, mas mesmo que se faça scroll à página permanecerá fixo
Exemplos das propriedades para formatar o texto
Propriedade Exemplo em CSS Resultado
bottom, left, right, top
#caixa {
background-color:white;
padding:10px;
width:80%;
height:40px;
position:relative;
top:50px}
clip
img.clip {
clip:rect(0px 120px 120px 50px);
position:absolute}
overflow
position
#caixa {
background-color:white;
padding:10px;
width:80%;
height:40px;
position:relative;
top:50px}
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 60
position
#caixa {
background-color:white;
padding:10px;
width:80%;
height:40px;
position:absolute;
top:50px}
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 61
5.5.11. Formatação de PSEUDO-CLASS
Propriedade Descrição da propriedade Valores possíveis
:active Adiciona um estilo ao elemento activo
Todas as propriedades e respectivos valores da linguagem CSS
:hover Adiciona um estilo quando o rato está em cima do elemento
Todas as propriedades e respectivos valores da linguagem CSS
:link Adiciona um estilo à hiperligação que ainda não foi visitada
Todas as propriedades e respectivos valores da linguagem CSS
:visited Adiciona um estilo à hiperligação que já foi visitada
Todas as propriedades e respectivos valores da linguagem CSS
Exemplos de formatações PSEUDO-CLASS
Propriedade Exemplo em CSS
:active
#menu ul li a:active {
color:#006600;
padding:7px;
font-size:12px;
background:url(menuligado.png) center left repeat-x;
font-family:'trebuchet ms', arial;
font-weight:bold;
text-decoration:none;
position:relative;
top:5px}
:hover
#menu ul li a:hover {
background:url(menuligado.png) center left repeat-x;
color:#000000}
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 62
:link
:visited
#menu ul li a:link, #menu ul li a:visited {
color:#006600;
padding:7px;
font-size:12px;
background:url(menudesligado.png) center left repeat-x;
font-family:'trebuchet ms', arial;
font-weight:bold;
text-decoration:none;
position:relative;
top:5px}
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 63
5.5.12. Formatação de PSEUDO-ELEMENTS
Propriedade Descrição da propriedade Valores possíveis
:first-letter Adiciona um estilo à primeira letra do elemento
Todas as propriedades e respectivos valores da linguagem CSS
:first-line Adiciona um estilo à primeira linha do elemento
Todas as propriedades e respectivos valores da linguagem CSS
Exemplos de formatações PSEUDO-ELEMENTS
Propriedade Exemplo em CSS Resultado
:first-letter
#conteudointerior p:first-letter {
margin-top:10px;
color:grey;
font-family:'trebuchet ms';
font-size:20px;
line-height:170%}
:first-line
#conteudointerior p:first-line {
margin-top:10px;
color:grey;
font-family:'trebuchet ms';
font-size:20px;
line-height:170%}
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 64
6. Exemplo de site utilizando XHTML e CSS
6.1. Ficheiro ‘index.html’ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Página em XHTML+CSS</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<!-- TODOS OS ELEMENTOS DEVEM ESTAR DENTRO DA DIV CONTEUDO -->
<div id="conteudo">
<!-- INICIA A DIV CABECALHO -->
<div id="cabecalho">
<div class="titulo">Página em XHTML+CSS
</div>
</div>
<!-- FECHA A DIV CABECALHO -->
<!-- INICIA A DIV MENU -->
<div id="menu">
<ul>
<li><a href="#" title="">início</a></li>
<li><a href="#" title="">história</a></li>
<li><a href="#" title="">serviços</a></li>
<li><a href="#" title="">equipa</a></li>
<li><a href="#" title="">preços</a></li>
<li><a href="#" title="">portfólio</a></li>
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 65
<li><a href="#" title="">contactos</a></li>
</ul>
</div>
<!-- FECHA A DIV MENU -->
<!-- INICIA A DIV PRINCIPAL -->
<div id="principal">
<!-- INICIA DA DIV CONTEUDOINTERIOR -->
<div id="conteudointerior">
<h1>início</h1>
<h2>início</h2>
<h3>Bem-vindo</h3>
<p>Bem vindo à pagina XHTML criada na Formação de FrontPage
da empresa Forma.</p>
<p>Esta formação teve lugar no Sindicato dos Trabalhadores
da Actividade Seguradora
e contou 12 formandos.</p>
<p>A formação foi realizada em horário pós-laboral em todos os dias
úteis da semana,
das 19:45 às 22:45.</p>
<br><br><br><br><br><br>
</div>
<!-- FECHA A DIV CONTEUDOINTERIOR -->
<!-- INICIA A DIV BARRALATERAL -->
<div id="barralateral">
<h1>contacto</h1>
<h2>contacto directo</h2>
<h3>Contacte-nos já!</h3>
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 66
<p><a href="#contactos.html" title="Contacte-nos já!">
Não hesite e contacte-nos já!</a></p>
</div>
<!-- FECHA A DIV BARRALATERAL -->
<div style="clear: both;"></div>
</div>
<!-- FECHA A DIV PRINCIPAL -->
<!-- INICIA A DIV RODAPE -->
<div id="rodape">
<p>:: XHTML 1.1 STRICT :: FORMA :: STAS ::</p>
</div>
<!-- FECHA A DIV RODAPE -->
</div>
<!-- FECHA A DIV CONTEUDO -->
</body>
</html>
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 67
6.2. Ficheiro ‘estilo.css’ body {
font-size:65%;
margin:0px;
padding:0px;
background:url('fundo.png') repeat;
font-family:'trebuchet ms', arial}
#conteudo {
margin:0px auto;
width:683px;
background-color:#339900}
#cabecalho {
margin:0px auto;
width:640px;
height:96px;
background:url('cabecalho.jpg') no-repeat}
.titulo {
position:relative;
font-family:'trebuchet ms', arial;
font-size:30px;
color:#FFFFFF;
top:50px;
left:20px}
#menu {
margin:0px;
margin-left:21px;
margin-right:21px;
height:30px;
background:#99cc00;
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 68
padding:5px}
#menu ul {
margin:0px;
padding:7px;
background:url('menudesligado.png') repeat;
height:28px;
text-align:center;
text-transform:uppercase}
#menu ul li {
list-style:none;
display:inline}
#menu ul li a:link, #menu ul li a:visited {
color:#006600;
padding:7px;
font-size:12px;
background:url(menudesligado.png) center left repeat-x;
font-family:'trebuchet ms', arial;
font-weight:bold;
text-decoration:none;
position:relative;
top:5px}
#menu ul li a:active {
color:#006600;
padding:7px;
font-size:12px;
background:url(menuligado.png) center left repeat-x;
font-family:'trebuchet ms', arial;
font-weight:bold;
text-decoration:none;
position:relative;
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 69
top:5px}
#menu ul li a:hover {
background:url(menuligado.png) center left repeat-x;
color:#000000}
#principal {
min-height:350px;
width:640px;
margin:0px auto;
background-color:white}
#conteudointerior {
float:left;
padding-left:25px;
width:355px}
#conteudointerior p {
margin-top:10px;
color:#565656;
font-family:'trebuchet ms', arial;
font-size:14px;
line-height:170%}
#barralateral {
padding:0px 10px 10px 10px;
margin-top:20px;
float:right;
width:210px;
background:#eeffee}
#barralateral p {
margin:0px;
color:#006600;
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 70
font-family:'trebuchet ms',arial;
font-size:12px;
text-align:right}
#barralateral a:link, #sidebar a:active, #sidebar a:visited {
text-decoration:underline;
color:#006600}
#barralateral a:hover {
text-decoration:none}
h1 {
margin:0px;
font-weight:normal;
color:#ccff99;
font-size:30px}
h2 {
margin:0px;
position:relative;
top:-25px;
left:20px;
font-size:22px;
font-weight:normal;
color:#669900}
h3 {
margin:0px;
font-size:18px;
font-weight:normal;
color:#669900}
#rodape {
margin:0px auto;
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 71
width:641px;
height:39px;
background:url(rodape.png) top left repeat-x}
#rodape p {
display:block;
position:relative;
font-family:'trebuchet ms',arial;
font-size:1.2em;
padding:10px;
color:#669900;
font-weight:bold;
text-align:center}
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 72
7. Alojamento no SAPO
7.1. Registo SAPO Com um Registo SAPO podemos usar todos os serviços, como o Mail, o Mensageiro, as Homepages, os Blogs e outros. É grátis, rápido e imediato.
Para realizarmos o registo SAPO e beneficiarmos do alojamento web gratuito:
1. Visitamos o site http://homepages.sapo.pt e pressionamos em “Crie Já!”
2. A página seguinte pede o registo do SAPO. Vamos partir do princípio que ainda não
temos nenhum registo criado. Pressionamos em “Ainda não tem um NetBI? Carregue aqui”;
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 73
3. A janela que surge é o primeiro dos cinco passos para realizar o registo. Vamos preencher os dados apontando-os (sobretudo o e-mail e a password), pressionar na caixa “Li e aceito os Termos de Utilização*” e depois em “Seguinte”;
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 74
4. No segundo passo pressionamos em “Seguinte”;
5. No terceiro passo, pressionamos na caixa “Não quero associar o meu novo email à
minha conta ADSL” e depois em “CONFIRMAR”;
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 75
6. Na janela seguinte pressionamos apenas em “Seguinte”;
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 76
7. No último passo do registo pressionamos em “Terminar”;
7.2. Validar o domínio pretendido 1. Terminado o registo com sucesso somos direccionados automaticamente para a página
inicial. Vamos pressionar em “Crie Já!” novamente;
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 77
2. Inserimos o domínio pretendido, pressionamos na caixa “Li as regras e aceito-as na íntegra!” e depois “Ok”;
3. Se o domínio pretendido estiver disponível a página seguinte terá a mensagem
“Homepage criada com sucesso! Entre com a sua password do NetBi”;
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 78
7.3. Transferir conteúdo para a homepage usando FTP (File Transfer Protocol)
Acedendo à página inicial das homepages do SAPO (http://homepages.sapo.pt) temos acesso à edição da página. No entanto, para enviarmos todo o conteúdo de uma vez para a homepage funcionar, precisamos apenas de usar o protocolo FTP.
1. Vamos abrir uma janela do browser Internet Explorer e escrever na barra do endereço:
a. ftp://domí[email protected]
O “domíniopretendido” é o domínio que validamos anteriormente.
No nosso caso, cssxhtml.com.sapo.pt fica do seguinte modo:
b. ftp://[email protected]
2. Ao surgir o seguinte quadro, colocamos a respectiva password e pressionamos em “Iniciar sessão”;
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 79
Acabamos de entrar na gestão das homepages utilizando o FTP (File Transfer Protocol). A vista que obtemos é como se de uma pasta se tratasse. Pois nem mais!
3. Eliminamos o(s) ficheiro(s) existente(s);
4. Usando a técnica do “Copiar”, “Colar” transferimos os ficheiros recentes de uma
pasta normal para esta pasta, já que se trata da pasta que contém todo o conteúdo visível através do protocolo http (HyperText Transfer Protocol):
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 80
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 81
8. Registo no pt.vu Após o alojamento, existe a possibilidade de simplificar o nome do domínio. Em vez de ficarmos com um domínio extenso ou demasiado complicado (cssxhtml.com.sapo.pt), podemos registar-nos também num site que oferece domínio gratuitamente.
O site pode ser acedido pelo endereço www.pt.vu.
1. Vamos aceder ao site www.pt.vu e pesquisar pelo domínio que pretendemos, com o objectivo de verificar a sua disponibilidade;
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 82
2. Dos resultados que surgem de seguida, seleccionamos um dos domínios livres e pressionamos em “Go”;
3. Na página seguinte pressionamos em “Criar novo utilizador”;
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 83
4. Preenchemos os dados e pressionamos em “OK”;
5. Na página seguinte inserimos o título da nossa homepage e o endereço onde estão
alojados os nossos ficheiros. De seguida pressionamos em “Confirmar”;
6. A última página do processo informa-nos do nosso novo domínio (cssxhtml.pt.vu) e
alerta-nos que devemos activar a nossa conta de utilizador usando a mensagem de correio electrónico enviado para o nosso e-mail;
Após a realização dessa activação, o nosso domínio não expirará dentro dos 15 dias.
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 84
9. Submissão do site para o GOOGLE Para que o nosso site apareça nas pesquisas do Google, precisamos indicar ao maior motor de busca internacional que o nosso site existe. Para tal:
1. Acedemos ao site:
a. http://www.google.pt/add_url.html
2. Inserimos os dados relativos à nossa página e pressionamos em “Incluir URL”;
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 85
10. Sites de Interesse
10.1. World Wide Web Consortium • www.w3schools.com/
10.2. Validação de programação HTML, CSS e XHTML • www.w3schools.com/site/site_validate.asp
10.3. Tutoriais de HTML, XHTML e CSS na Internet • www.maujor.com/
• www.echoecho.com/css.htm
• pt-br.html.net/tutorials/css/
• www.htmldog.com/
10.4. Registo de Domínios e Alojamento • www.trevowebdesign.com/
• www.hostingpax.com
• www.desital.pt/
10.5. Registo de Domínios gratuito • www.pt.vu
10.6. Alojamento gratuito • homepages.sapo.pt
• registo.ptfreehosting.com
• www.clix.pt
• www.pop.com.br (brasileiro)
HTML, XHTML e CSS
Auxiliar de Formação
HTML, XHTML e CSS www.carlos-correia.com 86
11. Direitos de Autor
© Copyright 2006
É PERMITIDA A REPRODUÇÃO DO PRESENTE MATERIAL, DESDE QUE TENHA FINS EDUCACIONAIS OU DE PESQUISA, DEVENDO,
NO ENTANTO, SER MENCIONADOS EXPRESSAMENTE OS DIREITOS AUTORAIS RESERVADOS. É VEDADA A REPRODUÇÃO PARA QUAISQUER OUTROS FINS, A MENOS QUE CONCEDIDA
EXPRESSA AUTORIZAÇÃO ESCRITA PELO AUTOR.
