HTML

HTML & CSS
Informtica / LECA
Marco Costa
Departamento de Cincia de Computadores Faculdade de Cincias, Universidade do Porto
2005 / 06
Marco Costa (DCC / FCUP)
HTML & CSS
2005 / 06
1 / 157
Contedo
Contedo
1
HTML Introduo Pginas bsicas Texto Listas Imagens Links Tabelas Outras tags CSS Introduo Seleco de elementos Propriedades de formatao Bibliograa
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 2 / 157
HTML
HTML & CSS
2005 / 06
3 / 157
HTML
Introduo
HTML & CSS
2005 / 06
4 / 157
HTML
Introduo
HTML
HTML = HyperText Markup Language
Hyper porque no linear (pode-se navegar entre documentos HTML seguindo links) Text porque um documento HTML um cheiro de texto Markup porque usam-se marcas ou etiquetas no texto para indicar pargrafos, ttulos, listas, etc. Language porque uma linguagem
Ou seja. . .
HTML a linguagem utilizada para criar as pginas da Web Uma pgina corresponde a um cheiro de texto, que pode referenciar outros cheiros (por exemplo, imagens) Os cheiros HTML tm a extenso .html ou .htm
HTML
Introduo
Tags
Denio
Um documento HTML formado por uma hierarquia de elementos (isto , elementos que contm outros) A cada tipo de elemento corresponde uma tag Por exemplo, aos pargrafos correspondem a tag p Para iniciar um pargrafo escreve-se <p>, e para naliz-lo, </p> (note-se o smbolo /) Exemplo de um pargrafo: <p>Isto um pargrafo</p> As tags podem conter atributos Exemplo de uma tag com dois atributos: <p class="topo" id="nada">Isto um pargrafo</p> As tags que no contm nada entre a abertura e o fecho podem ser abreviadas (por exemplo, <br/> em vez de <br></br>)
HTML
Introduo
Browsers
O que um browser?
Um browser um programa utilizado para navegar na Web, isto , visualizar pginas e navegar entre elas
Exemplos de browsers
Internet Explorer Mozilla Firefox Konqueror Safari Opera
HTML & CSS
2005 / 06
7 / 157
HTML
Introduo
Servidores Web
O que um servidor Web?

Um servidor Web um programa que disponibiliza um conjunto de pginas Web Um dos servidores Web mais utilizados o Apache A comunicao entre browsers e servidores feita com base nas regras especicadas no protocolo HTTP (HyperText Transfer Protocol)
HTML & CSS
2005 / 06
8 / 157
HTML
Introduo
Endereos de pginas Web
Denio e exemplo
O endereo de uma pgina Web assume a forma de um URL (Uniform Resource Locator) Estes URLs podem ser divididos em trs partes: o protocolo, o endereo do servidor, e o endereo da pgina dentro do servidor Por exemplo, o endereo http://www.dcc.fc.up.pt/francisco indica o protocolo HTTP, o servidor www.dcc.fc.up.pt, e a pgina /francisco nesse servidor
HTML & CSS
2005 / 06
9 / 157
HTML
Introduo
Modelo cliente servidor

Explicao
A Web funciona com base no modelo cliente-servidor: os browsers so os clientes (pedem as pginas) e so servidos pelos servidores Web (fornecem as pginas)
Exemplo
O Joo inicia o Internet Explorer e coloca o endereo http://www.dcc.fc.up.pt/francisco O browser contacta o servidor no endereo www.dcc.fc.up.pt e pede-lhe a pgina /francisco O servidor localiza a pgina e envia-a ao browser O browser recebe a pgina, interpreta-a e mostra-a ao Joo O Joo selecciona um dos links da pgina O browser contacta o servidor indicado no link, . . .
HTML
Introduo
Histria da Web
Cronologia
Em 6 de Agosto de 1991, Tim Berners-Lee, o criador da Web, disponibilizou as primeiras pginas Web Em Setembro de 1993 foi criado o browser Mosaic, que contribuiu para aumentar a popularidade da Web Em 1993 foi criado o primeiro search engine, o Lycos Em 1994 foi fundado o World Wide Web Consortium (W3C), uma consrcio que cria normas e recomendaes relacionadas com a Web Em 1994 foi lanada a primeira verso do browser Netscape Em 1995 a Microsoft lanou o Internet Explorer Em 2002 foi lanada a primeira verso do Mozilla Firefox, um dos descendentes do Netscape Em 2005, a Yahoo anunciou que o seu search engine indexa mais de 20 mil milhes de pginas e imagens
HTML
Pginas bsicas
HTML & CSS
2005 / 06
12 / 157
HTML
Pginas bsicas
Exemplo de uma pgina bsica

Texto do cheiro HTML
<html> <head><title>Hello World</title></head> <body> <p>Hello world</p> </body> </html>
Elementos/tags que compem o documento HTML

A tag html indica um documento HTML; abre e fecha o documento A tag head indica o cabealho do documento A tag title indica o ttulo do documento, e deve aparecer na head A tag body indica o corpo do documento A tag p indica um pargrafo (o texto aparece entre <p> e </p>)
HTML
Pginas bsicas
Algumas complicaes Verses

DTDs
Desde que foi criado, o HTML sofreu vrias alteraes Por isso, existem vrias verses do HTML Cada verso denida por um DTD (Document Type Denition) Vamos utilizar a verso XHTML 1.0 Transitional Devemos indicar no prprio documento HTML qual a verso utilizada Antes do elemento html escrevemos:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
E acrescentamos o atributo xmlns ao elemento html, cando:

<html xmlns="http://www.w3.org/1999/xhtml">
HTML & CSS
2005 / 06
15 / 157
HTML
Pginas bsicas
Algumas complicaes Codicao de caracteres
Codicao de caracteres
Os documentos HTML podem ser escritos utilizando diferentes codicaes de caracteres Devemos indicar no documento qual a codicao utilizada Inclumos um elemento meta no cabealho do documento Se utilizarmos a codicao iso-8859-1, escrevemos: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
HTML & CSS
2005 / 06
16 / 157
HTML
Pginas bsicas
Algumas complicaes Resultado

Verso nal do documento apresentado anteriormente
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hello World</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> </head> <body> <p>Hello world</p> </body> </html>
Dica
Utilize este documento HTML como ponto de partida (copy-n-paste)
HTML
Pginas bsicas
Validao de documentos HTML
O que ? Como se faz?

Os browsers no se costumam queixar dos erros contidos nos documentos HTML Por isso, os erros passam muitas vezes despercebidos Mas existem formas de validar os documentos Pode-se assim detectar a presena de erros e, mais importante, corrigi-los Por exemplo, utilizando o validador online disponvel no seguinte endereo: http://validator.w3.org/
HTML & CSS
2005 / 06
19 / 157
HTML
Texto
HTML & CSS
2005 / 06
20 / 157
HTML
Texto
Pargrafos
Funcionamento
A tag p dene um pargrafo A tag br dene uma quebra de linha (o pargrafo actual continua, mas na linha seguinte)
Notas
1 2
A tag br normalmente utilizado na forma abreviada No interessa quantos espaos se escreve entre as palavras; s considerado um deles
HTML & CSS
2005 / 06
22 / 157
HTML
Texto
Pargrafos Exemplo
Exemplo
<p>Este o primeiro pargrafo.</p> <p>Este o segundo pargrafo. <br/> Isto tambm <br/> Exemplo pertence ao <br/> segundo pargrafo.</p>
Este o primeiro pargrafo. Este o primeiro pargrafo. Este o segundo pargrafo. Isto tambm pertence ao segundo pargrafo.
HTML & CSS
2005 / 06
24 / 157
HTML
Texto
Ttulos
Funcionamento
As tags h1, h2 e h3 (e outras) denem ttulos h1 um ttulo mais importante que h2, que mais importante que h3
HTML & CSS
2005 / 06
26 / 157
HTML
Texto
Exemplo
Ttulos Exemplo
Exemplo <h1>Introduo</h1> <p>Isto a introduo.</p> <h2>Objectivos</h2> <p>Aqui vou falar dos objectivos.</p> <h3>Objectivo A</h3> <p>O objectivo A ...</p>
Introduo
Isto a introduo.
Objectivos
Aqui vou falar dos objectivos.
Objectivo A
O objectivo A ...
Concluso
HTML
Texto
Formatao de texto
Funcionamento
A tag b dene texto em negrito A tag i dene texto em itlico As tags sup e sub denem texto superior e inferior linha
Exemplo
<p><b>Negrito</b>, <i>itlico</i>, linha<sub>inferior</sub>, linha<sup>superior</sup></p>
Negrito, itlico, linhainferior, linhasuperior
HTML & CSS
2005 / 06
30 / 157
HTML
Listas
HTML & CSS
2005 / 06
31 / 157
HTML
Listas
Listas
Funcionamento
A tag ul dene uma lista no numerada A tag ol dene uma lista numerada A tag li dene um elemento de uma lista; deve ser includo dentro de uma lista (numerada ou no)
HTML & CSS
2005 / 06
33 / 157
HTML
Listas
Listas Exemplo
Lista no numerada <p>Lista no numerada</p> <ul> <li>Um</li> <li>Dois</li> Exemplo <li>Trs</li> </ul> Lista numerada <p>Lista numerada</p> <ol> <li>Um</li> <li>Dois</li> <li>Trs</li> Exemplo </ol>
Lista no numerada Um Dois Trs
Lista numerada 1. Um 2. Dois 3. Trs
HTML & CSS
2005 / 06
35 / 157
HTML
Listas
Listas multi-nvel
Funcionamento
Listas multi-nvel so listas dentro de listas Para criar uma lista dentro de outra lista, abre-se uma nova lista dentro de um elemento da lista anterior Podem-se misturar listas ordenadas com listas no ordenadas Exemplo Exemplo <p>Lista com dois nveis</p> <ul> <li>Nivel um <ul> <li>Nvel dois</li> </ul></li> <li>Nvel um</li> </ul>
Marco Costa (DCC / FCUP) HTML & CSS
Lista com dois nveis Nivel um Nvel dois Nvel um
2005 / 06
37 / 157
HTML
Imagens
HTML & CSS
2005 / 06
38 / 157
HTML
Imagens
Imagens
Funcionamento
Para incluir uma imagem num documento HTML utiliza-se a tag img O atributo src utilizado para indicar a localizao da imagem, na forma de um URL O atributo alt deve ser utilizado para indicar uma descrio curta da imagem Essas descries so utilizadas em alternativa imagem, por exemplo, quando a pgina ouvida em vez de lida Os atributos width e height podem ser utilizados para indicar as dimenses da imagem (permitindo redimensionar a imagem) A tag img normalmente utilizada na forma abreviada
HTML & CSS
2005 / 06
40 / 157
HTML
Imagens
Imagens Exemplo
Imagem local
<img src="fcup.png" alt="Logotipo da FCUP" />
Exemplo
HTML & CSS
2005 / 06
42 / 157
HTML
Imagens
Imagens Exemplo
Imagem (remota e redimensionada)
<p>Bandeira de Portugal</p> <img src="http://www.crwflags.com/fotw/images/p/pt.gif" alt="Bandeira de Portugal" width="192" height="64" Exemplo />
Bandeira de Portugal
HTML & CSS
2005 / 06
44 / 157
HTML
Links
HTML & CSS
2005 / 06
45 / 157
HTML
Links
Links
Funcionamento
Um link, quando activado pelo utilizador, permite-lhe navegar para outra localizao (normalmente, outra pgina) Para criar um link utiliza-se a tag a, indicando-se no atributo href o URL destino O texto (ou outro contedo) que representa o link colocado dentro da tag a (entre <a> e </a>)
Exemplo
<p>A <a href="http://www.fc.up.pt/">FCUP</a> pertence Exemplo <a href="http://www.up.pt/">UP</a>.</p>
A FCUP pertence UP.

HTML
Links
Links locais
Funcionamento
Um link local um link que aponta para uma localizao na pgina actual Quando o utilizador activa um link local, o browser avana ou recua (faz scroll) na pgina actual at que o local para onde o link aponta que visvel A tag a utilizada para criar os links e tambm para criar ancoras (stios para onde os links locais podem apontar) Para criar uma ancora utiliza-se a tag a, indicando-se com o atributo name o nome da ancora Para apontar para uma ancora utiliza-se tambm a tag a, indicando-se com o atributo href o nome da ancora para onde o link aponta (coloca-se # antes do nome)
HTML
Links
Links locais Exemplo

Exemplo
<p> Link para o <a href="#segundo">segundo pargrafo</a>. </p> <p><a name="segundo"/>Segundo pargrafo.</p> Exemplo
Link para o segundo pargrafo. Segundo pargrafo.
HTML & CSS
2005 / 06
51 / 157
HTML
Links
Links com imagens

Funcionamento
As imagens podem ser utilizadas para representar links Em vez de texto, coloca-se uma imagem entre <a> e </a> Nestas situaes um link activado quando a imagem clicada
Exemplo
<p>A <a href="http://www.fc.up.pt/"> <img src="fc-up.gif" alt="FCUP" height="48"/> </a> pertence <a href="http://www.up.pt/">UP</a>.</p>
A
pertence UP.
HTML & CSS 2005 / 06 53 / 157
HTML
Tabelas
HTML & CSS
2005 / 06
54 / 157
HTML
Tabelas
Tabelas
Funcionamento
As tabelas permitem organizar contedo de forma tabular A tag table cria uma tabela A tag tr cria uma linha numa tabela (dentro de table) A tag td cria uma clula (dentro de tr) A tag th cria uma clula ttulo, cujo texto normalmente mostrado centrado e a negrito (dentro de tr) Exemplo <table> <tr><th>Nome</th><th>Idade</th></tr> <tr><td>Joo</td><td>25</td></tr> <tr><td>Maria</td><td>47</td></tr> </table>
Nome Idade Joo 25 Maria 47
2005 / 06
56 / 157
HTML
Tabelas
Tabelas com limites

Funcionamento
O atributo border permite indicar se uma tabela deve ou no incluir limites (borders) Por defeito as tabelas no possuem limites Exemplo <table border="1"> <tr><th>Nome</th><th>Idade</th></tr> <tr><td>Joo</td><td>25</td></tr> <tr><td>Maria</td><td>47</td></tr> </table>
Nome Idade Joo 25 Maria 47
HTML & CSS
2005 / 06
58 / 157
HTML
Tabelas
Clulas que abrangem vrias linhas/colunas

Funcionamento
Os atributos rowspan e colspan permitem criar clulas que abrangem mais do que uma linha e/ou coluna Por defeito, cada clula abrange apenas uma linha e uma coluna Exemplo <table border="1"> <tr><th colspan="2">Dados</th></tr> <tr><th>Nome</th><th>Idade</th></tr> <tr><td>Joo</td><td>25</td></tr> <tr><td>Maria</td><td>47</td></tr> </table>
Dados Nome Idade Joo 25 Maria 47
HTML & CSS
2005 / 06
60 / 157
HTML
Tabelas
Tabelas com legendas
Funcionamento
A tag caption pode ser utilizada para atribuir uma legenda a uma tabela Exemplo <table border="1"> <caption>Legenda</caption> <tr><th>Nome</th><th>Idade</th></tr> <tr><td>Joo</td><td>25</td></tr> <tr><td>Maria</td><td>47</td></tr> </table>
Legenda Nome Idade Joo 25 Maria 47
HTML & CSS
2005 / 06
62 / 157
HTML
Outras tags
HTML & CSS
2005 / 06
63 / 157
HTML
Outras tags
Tag div
Funcionamento
A tag div permite criar elementos que dividem o documento HTML em blocos Cada bloco pode incorporar vrios pargrafos, imagens, tabelas, etc. S por si, no tem nenhum efeito na forma como o browser mostra o documento A utilidade de dividir o documento em blocos est em poder atribuir diferentes estilos a cada bloco (como se ver mais adiante) Exemplo <div> <p>Parte 1</p> </div> <div><p>Parte 2</p></div>
Parte 1 Parte 2
2005 / 06
65 / 157
HTML
Outras tags
Tag span
Funcionamento
A tag span utilizada para criar um sub-elemento a partir de parte do contedo de outro elemento (por exemplo, parte do texto de um pargrafo) S por si, no tem nenhum efeito na forma como o browser mostra o documento Exemplo Mas pode-se aplicar um estilo ao sub-elemento span diferente do estilo do resto do elemento Exemplo <h1>Dia <span>25</span></h1> <p>Vai <span>chover</span>.</p>
Dia 25
Vai chover.
2005 / 06 67 / 157
HTML & CSS
HTML
Outras tags
Tag hr
Funcionamento
A tag hr permite criar uma barra horizontal Normalmente, estas barras so utilizadas como separadores, e so escritas na forma abreviada (<hr/>) Exemplo <p>Parte 1</p> <hr/> <p>Parte 2</p>
Parte 1 Parte 2
HTML & CSS
2005 / 06
69 / 157
CSS
HTML & CSS
2005 / 06
70 / 157
CSS
Introduo
HTML & CSS
2005 / 06
71 / 157
CSS
Introduo
CSS Cascading Style Sheets

O que so folhas de estilo?
Uma folha de estilos, ou style sheet, formada por um conjunto de regras que indicam ao browser como deve apresentar um documento Cada regra formada por um selector e um estilo O selector indica a que elementos que o estilo deve ser aplicado O estilo especicado atribuindo valores a um conjunto de propriedades que se aplicam aos elementos a estilar
Exemplo de uma folha de estilos

/* Comentrio: elementos h1 com letra extra-grande, a vermelho, e elementos h2 com letra grande, a azul */ h1 { font-size: x-large; color: red } h2 { font-size: large; color: blue }
CSS
Introduo
Aplicao de folhas de estilo a documentos HTML
Formas de aplicar uma folha de estilos

1
A folha de estilos escrita directamente no documento HTML, dentro de um elemento style, no cabealho do documento A folha de estilos escrita num cheiro (com extenso .css) e feita uma ligao a esse cheiro a partir de um elemento link no cabealho do documento HTML
HTML & CSS
2005 / 06
75 / 157
CSS
Introduo
Exemplo: folha de estilos no documento HTML
Ficheiro HTML
... <head> ... <style type="text/css"> h1 { font-size: x-large; color: red } h2 { font-size: large; color: blue } </style> ... </head> ...
HTML & CSS
2005 / 06
77 / 157
CSS
Introduo
Exemplo: folha de estilos num cheiro .css

Ficheiro HTML
... <head> ... <link media="all" href="styles.css" rel="stylesheet" type="text/css"/> ... </head> ...
Ficheiro styles.css
h1 { font-size: x-large; color: red } h2 { font-size: large; color: blue }
CSS
Introduo
Herana de estilos
Descrio
A maioria da formatao aplicada a um elemento herdada pelos seus descendentes Por exemplo, se for atribudo um valor propriedade color no elemento body, ento esse valor vai ser aplicado nos pargrafos, e no texto dos outros elementos descendentes do elemento body Existem excepes regra; por exemplo, as margens denidas no elemento body no so herdadas pelos pargrafos
HTML & CSS
2005 / 06
80 / 157
CSS
Introduo
Conitos e prioridades
Prioridades
As regras especicadas nas folhas de estilo podem entrar em conito quanto formatao a aplicar a alguns elementos Por exemplo, a um pargrafo de classe nota pode ser aplicada formatao seleccionada por se tratar de um pargrafo (selector: p) ou por ser um pargrafo de classe nota (selector: p.nota) Os conitos so resolvidos de acordo com certas regras, que incluem:
1
As regras mais especcas prevalecem sobre as mais gerais; no exemplo anterior, prevaleceria a regra com o selector p.nota Entre duas regras com a mesma especicidade dada prioridade que vem em ltimo lugar
HTML & CSS
2005 / 06
81 / 157
CSS
Seleco de elementos
HTML & CSS
2005 / 06
82 / 157
CSS
Seleco de elementos
Selectores
Tipos de selectores
Os selectores utilizados nas regras de formatao podem seleccionar elementos de vrias formas, entre elas:
1 2 3 4
Pela tag dos elementos Pelo atributo class dos elementos Por pseudo-elemento ou pseudo-classe Por um contexto formado por vrios selectores
Agrupamento de selectores
Para diminuir as repeties, possvel agrupar selectores e declaraes Por exemplo, para aplicar uma formatao igual aos elementos h1, h2 e h3, escreve-se: h1, h2, h3 { font-family: Arial; color: blue }
CSS
Seleco de elementos
Seleco por tag

Funcionamento
A seleco de elementos por tag feita indicando as tags dos elementos a seleccionar
Exemplo: Seleco de todos os pargrafos

p { color: blue }
Exemplo: Seleco de texto a itlico

it { color: red }
Exemplo: Seleco dos ttulos h1 e h2

h1, h2 { font-weight: bold }
HTML & CSS
2005 / 06
86 / 157
CSS
Seleco de elementos
Seleco pelo atributo class
Funcionamento
O atributo class um atributo especial que pode ser utilizado em qualquer elemento A um nico elemento podem ser atribudas vrias classes (no mesmo atributo, separadas por espaos) Pode-se assim ser aplicar vrias regras de formatao, cada uma delas seleccionada com base numa classe
HTML & CSS
2005 / 06
88 / 157
CSS
Seleco de elementos
Seleco pelo atributo class Exemplo I
HTML
<p class="fundo">Alerta</p>
CSS
/* fundo amarelo nos pargrafosfile:///c:/aaa/Aulas/Inf/html/p18... com classe fundo */ Exemplo p.fundo { background-color: yellow }
Alerta
HTML & CSS
2005 / 06
90 / 157
CSS
Seleco de elementos
Seleco pelo atributo class Exemplo II

HTML
<p>Isto <b>importante</b></p> <p>Isto <span class="vermelho">importante</span></p> <p class="vermelho">Isto importante</p>
CSS
/* O texto bold aparece a vermelho */ Exemplo /* O texto dos elementos com classe vermelho tambm */ b, .vermelho { color: red }
Isto importante Isto importante Isto importante

CSS
Seleco de elementos
Seleco pelo atributo class Exemplo III

HTML
<p class="fundo vermelho">Este texto <span class="nota">aparece</span> com fundo amarelo e texto vermelho</p>
CSS
.nota { font-style: italic; font-size: 16pt } Exemplo .fundo { background-color: yellow } .vermelho { color: red }
Este texto aparece com fundo amarelo e texto vermelho
HTML & CSS
2005 / 06
94 / 157
CSS
Seleco de elementos
Seleco pelo atributo class Exemplo I
HTML
<p class="fundo">Alerta</p>
CSS
/* fundo amarelo nos pargrafosfile:///c:/aaa/Aulas/Inf/html/p18... com classe fundo */ Exemplo p.fundo { background-color: yellow }
Alerta
HTML & CSS
2005 / 06
96 / 157
CSS
Seleco de elementos
Seleco por pseudo-elemento ou pseudo-classe

O que so?
As pseudo-classes e os pseudo-elementos so classes e elementos especiais que podem ser utilizados nos selectores As pseudo-classes permitem distinguir entre diferentes estados dos elementos; so utilizados, por exemplo, para distinguir links j visitados de links ainda no visitados Os pseudo-elementos referem-se a sub-partes de elementos; por exemplo, primeira letra de um pargrafo
Como so utilizados?
O nome da pseudo-classe ou do pseudo elemento acrescentado ao selector, separado por dois pontos Por exemplo, o selector a:visited selecciona os links que j foram visitados
CSS
Seleco de elementos
Pseudo-classes do elemento a
Referncia
link Refere-se ainda no visitados active Refere-se a links activos (links em que se est a clicar) visited Refere-se a links j visitados hover Refere-se a links que tm o ponteiro do rato por cima
Exemplos
/* Pelas regras da prioridade, um link activo que j tenha sido visitado aparece a azul, e no a verde */ a:link a:visited a:active a:hover { { { { color: color: color: color: red } green; font-size: 85% } blue; font-size: 125% } #000; font-size: 125% }
HTML & CSS 2005 / 06 100 / 157
CSS
Seleco de elementos
Pseudo-elementos first-letter e first-line
Referncia
first-line Refere-se primeira linha de texto do elemento first-letter Refere-se primeira letra de texto do elemento
Exemplos
/* A primeira linha aparece a negrito e a primeira letra aparece maior */ p:first-line { font-weight: bold } p:first-letter { font-size: 300% }
HTML & CSS
2005 / 06
102 / 157
CSS
Seleco de elementos
Seleco por contexto

Funcionamento
A seleco de elementos por contexto feita indicando vrios selectores separados por espaos Esses selectores indicam uma hierarquia Para um elemento ser seleccionado, deve pertencer a uma hierarquia compatvel com a indicada no selector
Exemplo I
/* elementos it pertencentes a pargrafos */ p it { color: red }
Exemplo II
/* elementos com classe nota pertencentes a ttulos h1 */ h1 .nota { color: blue }
CSS
Propriedades de formatao
HTML & CSS
2005 / 06
105 / 157
CSS
Tamanhos e unidades de medida

Tamanhos
Um valor de tamanho formado por um - ou + opcional, seguido por um nmero e duas letras que indicam a unidade de medida utilizada (sem espaos entre o nmero e a unidade). Unidadas relativas 1em a altura normal dos caracteres 1ex a altura da letra x 1px um pixel Unidadas absolutas 1in uma polegada, e 1in=2.54cm 1cm um centmetro 1mm milmetro 1pt um ponto, e 1pt=1/72in 1pc um pica, e 1pc=12pt
CSS
Propriedade font-family
Funcionamento
Indica a fonte a ser utilizada (tipo de letra) Pode-se indicar mais do que uma fonte; o browser comea pela esquerda at encontrar uma que possa utilizar
Valores possveis
O nome de uma fonte (por exemplo, Arial, ou "Times New Roman") Uma categoria de fontes (por exemplo, serif, sans-serif, ou monospace)
Exemplos
h1 { font-family: sans-serif } p { font-family: "New Century Schoolbook", Times, serif }
CSS
Propriedade font-style
Funcionamento
Indica se o texto deve ser itlico, oblquo, ou normal
Valores possveis
normal, italic ou oblique O valor por defeito normal
Exemplos
h3 { font-style: italic }
HTML & CSS
2005 / 06
111 / 157
CSS
Propriedade font-weight
Funcionamento
Indica se o texto deve ser mais claro ou mais escuro (negrito)
Alguns valores possveis

normal, bold, bolder ou lighter
Exemplos
h1 { font-weight: bold } p { font-weight: normal }
HTML & CSS
2005 / 06
113 / 157
CSS
Propriedade font-size
Funcionamento
Indica o tamanho do texto (dos caracteres)

Um dos valores xx-small, x-small, small, medium, large, x-large ou xx-large Um tamanho ou uma percentagem A percentagem em relao ao tamanho do texto no elemento-pai
Exemplos
h1 { font-size: xx-large } p { font-size: 12pt }
HTML & CSS
2005 / 06
115 / 157
CSS
Propriedade color
Funcionamento
Indica a cor dos elementos (por exemplo, do texto)

Uma da seguintes cores, identicadas por nome: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white ou yellow Uma cor em formato rgb: #rrggbb ou #rgb
Exemplos
h1 { color: olive } p.nota { color: #fff800 } b { color: #000 }
CSS
Propriedade background-color
Funcionamento
Indica a cor de fundo dos elementos
Valores possveis
O valor transparent, mais os valores possveis para a propriedade color O valor por defeito transparent
Exemplos
h1 { background-color: transparent } p.nota { background-color: #ccc }
HTML & CSS
2005 / 06
119 / 157
CSS
Propriedade background-image
Funcionamento
Indica a imagem de fundo dos elementos
Valores possveis
O URL de uma imagem
Exemplos
body { background-image: url(/images/foo.gif) } p { background-image: url(http://www.htmlhelp.com/bg.png) }
HTML & CSS
2005 / 06
121 / 157
CSS
Propriedade background-repeat
Funcionamento
Indica como uma imagem de fundo repetida
Valores possveis
Um dos seguintes valores: repeat, repeat-x, repeat-y ou no-repeat O valor por defeito repeat
Exemplos
body { background-repeat: repeat-x } table { background-repeat: repeat }
HTML & CSS
2005 / 06
123 / 157
CSS
Propriedade text-decoration
Funcionamento
Indica como que o texto deve ser decorado
Valores possveis
O valor none, ou uma combinao dos seguintes valores: underline, overline, line-through e blink O valor por defeito none
Exemplos
.nota { text-decoration: blink } .apagado { text-decoration: line-through }
HTML & CSS
2005 / 06
125 / 157
CSS
Propriedade vertical-align
Funcionamento
Indica o alinhamento vertical de um sub-elemento em relao

Um dos seguintes valores: baseline, sub, super, top, text-top, middle, bottom ou text-bottom Um valor numrico indicado em percentagem O valor por defeito baseline
Exemplos
img.meio { vertical-align: middle } img { vertical-align: 50% } .expoente { vertical-align: super }
CSS
Propriedade text-align
Funcionamento
Indica como que o texto deve ser alinhado (na horizontal)

Um dos seguintes valores: left, right, center ou justify
Exemplos
h1 { text-align: center } p.nota { text-align: justify }
HTML & CSS
2005 / 06
129 / 157
CSS
Propriedade text-indent
Funcionamento
Indica o avano da primeira linha de texto do elemento
Valores possveis
Uma percentagem ou um tamanho A percentagem em relao largura do elemento-pai O valor por defeito 0pt
Exemplos
/* avanar a primeira linha dos pargrafos */ p { text-indent: 5em }
HTML & CSS
2005 / 06
131 / 157
CSS
Propriedade text-transform
Funcionamento
Indica se o texto do elemento deve ser convertido para maisculas (todo ou s a primeira letra de cada palavra) ou para minsculas
Valores possveis
Um dos seguintes valores: none, capitalize, uppercase ou lowercase O valor por defeito none
Exemplos
h1 { text-transform: uppercase } h2 { text-transform: capitalize }
HTML & CSS
2005 / 06
133 / 157
CSS
Propriedade line-height
Funcionamento
Indica a altura das linhas de texto
Valores possveis
O valor normal, um valor numrico sem unidades, um tamanho (valor numrico com unidades) ou uma percentagem O valor por defeito normal Se o valor numrico no tiver unidades, ento a altura da linha ser a sua altura normal, multiplicada pelo valor indicado A percentagem em relao altura normal da linha
Exemplos
/* texto com espaamento de duas linhas */ p { line-height: 200% }
CSS
Propriedades margin-top, margin-bottom, margin-left, margin-right e margin

Funcionamento
Tamanho de uma ou todas as margens do elemento (com margin) Na propriedade margin a ordem top-right-bottom-left; indicando-se um s valor, as margens so todas iguais; indicando-se mais, as margens em falta so iguais s dos lados opostos
Valores possveis
Um tamanho (0 por defeito), uma percentagem (em relao largura do elemento-pai), ou o valor auto
Exemplos
body { margin: 5em } /* todas iguais */ p { margin: 2em 4em } /* top/bottom 2em, left/right 4em */
CSS
Propriedades padding-top, padding-bottom, padding-left, padding-right e padding

Funcionamento
Tamanho do espao entre a margem do elemento e o seu contedo Na propriedade padding aplicam-se as mesmas regras da propriedade margin
Valores possveis
Um tamanho (0 por defeito), ou uma percentagem (em relao largura do elemento-pai)
Exemplos
body { padding: 10px } /* igual nos 4 lados */ span.nota { padding-top: 2em; padding-bottom: 1em }
CSS
Propriedades border-top-width, border-bottom-width, border-left-width, border-right-width e border-width

Funcionamento
Tamanho dos limites (borders) do elemento Na propriedade border-width aplicam-se as mesmas regras da propriedade margin
Valores possveis
Um dos seguintes valores: thin, medium ou tick Um tamanho
Exemplos
h1 { border-width: 2px } p { border-width: 2px 4px }
CSS
Propriedade border-color
Funcionamento
Indica as cores utilizadas nos limites (borders) do elemento Podem-se indicar entre uma e quatro cores, aplicando-se as mesmas regras da propriedade margin
Valores possveis
Uma a quatro cores, identicadas por nome ou por rgb
Exemplos
h1 { border-color: red } p { border-color: #ccc }
HTML & CSS
2005 / 06
143 / 157
CSS
Propriedade border-style
Funcionamento
Indica o estilo dos limites (borders) do elemento (slido, tracejado, pontos, etc.) Podem-se indicar entre um e quatro valores, aplicando-se as mesmas regras da propriedade margin
Valores possveis
Um a quatro valores de entre os valores possveis: none, dotted, dashed, solid, double, groove, ridge, inset e outset
Exemplos
h1 { border-style: dotted } p { border-style: solid }
CSS
Propriedades border-top, border-bottom, border-left e border-right
Funcionamento
Permitem indicar ao mesmo tempo a largura, estilo e cor de um dos limites do elemento A ordem width-style-color
Exemplos
h1 { border-bottom: 1px solid black } p { border-left: 1mm dotted red }
HTML & CSS
2005 / 06
147 / 157
CSS
Propriedade border
Funcionamento
Permitem indicar ao mesmo tempo a largura, estilo e cor de todos os limites do elemento Os limites sero iguais nos quatro lados A ordem width-style-color
Exemplos
h1 { border: 1px solid black } p { border: 1mm dotted red }
HTML & CSS
2005 / 06
149 / 157
CSS
Propriedades width e height
Funcionamento
Indicam a largura e a altura do elemento (no aplicvel a todos os elementos)
Valores possveis
Um tamanho, uma percentagem (s para width, e em relao largura do elemento-pai), ou o valor auto (o valor por defeito)
Exemplos
.nota { width: 10em }
HTML & CSS
2005 / 06
151 / 157
CSS
Propriedades float e clear

Funcionamento
A propriedade float indica que o elemento utuante, isto , que pode ser rodeado pelo texto de outros elementos A propriedade clear indica em que lados que o elemento no pode ser rodeado por elementos utuantes
Valores possveis
Propriedade float: um dos valores left, right ou none (valor por defeito) Propriedade clear: um dos valores left, right, both ou none (valor por defeito)
Exemplos
.nota { float: left; width: 5cm; clear: left }
CSS
Propriedade display
Funcionamento
Indica como deve ser visualizado o elemento: block Como um bloco, com quebras de linha antes e depois inline Sem quebras de linha item-list Como elemento de uma lista, com quebras de linha antes e depois none O elemento e os seus descendentes no so mostrados
Exemplos
.esconder { display: none }
HTML & CSS
2005 / 06
155 / 157
Bibliograa
HTML & CSS
2005 / 06
156 / 157

HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML

Transféré par

Droits d'auteur :

Formats disponibles

HTML & CSS

Marco Costa (DCC / FCUP)

HTML & CSS

Marco Costa (DCC / FCUP)

HTML & CSS

Marco Costa (DCC / FCUP)

HTML & CSS

Marco Costa (DCC / FCUP)

HTML & CSS

O que um servidor Web?

Marco Costa (DCC / FCUP)

HTML & CSS

Endereos de pginas Web

Marco Costa (DCC / FCUP)

HTML & CSS

Modelo cliente servidor

Marco Costa (DCC / FCUP)

HTML & CSS

Exemplo de uma pgina bsica

Elementos/tags que compem o documento HTML

Algumas complicaes Verses

E acrescentamos o atributo xmlns ao elemento html, cando:

Marco Costa (DCC / FCUP)

HTML & CSS

Algumas complicaes Codicao de caracteres

Marco Costa (DCC / FCUP)

HTML & CSS

Algumas complicaes Resultado

Validao de documentos HTML

O que ? Como se faz?

Marco Costa (DCC / FCUP)

HTML & CSS

Marco Costa (DCC / FCUP)

HTML & CSS

Marco Costa (DCC / FCUP)

HTML & CSS

Marco Costa (DCC / FCUP)

HTML & CSS

Marco Costa (DCC / FCUP)

HTML & CSS

Negrito, itlico, linhainferior, linhasuperior

Marco Costa (DCC / FCUP)

HTML & CSS

Marco Costa (DCC / FCUP)

HTML & CSS

Marco Costa (DCC / FCUP)

HTML & CSS

Lista no numerada Um Dois Trs

Lista numerada 1. Um 2. Dois 3. Trs

Marco Costa (DCC / FCUP)

HTML & CSS

Lista com dois nveis Nivel um Nvel dois Nvel um

Marco Costa (DCC / FCUP)

HTML & CSS

Marco Costa (DCC / FCUP)

HTML & CSS

Marco Costa (DCC / FCUP)

HTML & CSS

Marco Costa (DCC / FCUP)

HTML & CSS

Marco Costa (DCC / FCUP)

HTML & CSS

A FCUP pertence UP.

Links locais Exemplo