técnicas e processos - html / css - aula 2
TRANSCRIPT
Técnicas e processos de
produçãoProfº Ritielle Souza
Ferramentas Programáveis
Mensagem para mais de um destinatário<a href=mailto:[email protected];[email protected]>FALE CONOSCO</a>
Definindo o assunto da mensagem<a href=
mailto:[email protected]?subject=Aulas de XHTML>FALE CONOSCO</a>
LINKS NA MESMA PÁGINA
Depois do body criar o link :
<a href=“#final”>Clique para o final da página</a>
No final da página colocar a âncora
<a name=“final” id=“final” /> texto</a>
TABELAS
As tabelas eram usadas para diagramação, atualmente a diagramação é feita com camadas e com folhas de estilos (tabless).
Mas tabelas ainda são necessarias para fazer tabulações.
TABELAS
TABELASParâmetros de table
BorderBgcolorWidthHeightAlign
BackgroundBordercolorCellpaddingCellspacing
TABELAS
<table border="1" bgcolor="yellow" bordercolor="red" width="600" height="400" align="center" cellspacing="10“>
TABELAS
Para criar tabelas usamos as tags: <table> table </table> <tr> table row </tr> <td> table data</td>
TABELAS
Para criar tabelas usamos as tags: <th> table heading</th> <caption> cabeçalho </caption> <thead> table header</thead> <tbody> table body </tbody> <tfoot> table footer </tfoot>
TABELASParâmetros colspan e rowspan
<td colspan=“4”>texto</td> - número de colunas que foram unidas
<td rowspan=“2”> - número de linhas que foram unidas</td>
TABELAS
DADO1 Dado2 Dado3 Dado4
Dado5 Dado6 Dado7
Dado8 Dado 9
Dado10 Dado 11 Dado 12
Folhas de Estilo
Existem três formas de trabalharmos com folhas de estilos
Forma mais usual – CSS Externo Estilo na página <style> Forma menos usual – estilo inline
Sintaxe CSS – Folha de Estilo
Regra CSS é a unidade básica de uma folha de estilo. Uma regra CSS é composta de duas partes: o seletor e a declaração. A declaração compreende uma propriedade e um valor.
Sintaxe CSS – Folha de Estilo
seletor{propriedade:valor}declaração
REGRA CSS
p{ color:#000000; background-color:#ff0000; font-style:italic; text-align:right; font-family:tahoma;}
Comentários em CSS
/*Este é um comentário em linha*/
Bloco de comentário /*Este é um bloco de comentários
em linhas diferentes contendo muitas informações sobre um trecho da folha de estilos*/
Formatação de TextoAtributos Valor Definição
color Valor em hexadecimal ou
nome da cor
Cor do texto
font-family Nome da fonte Tipo da Fonte
font-size Valor referente ao tamanho
Tamanho da fonte
font-weight Normal, bold Estilos de negrito
font-style Normal, oblique ou itálico
Estilo do texto
text-align Left, center, right ou justify
Ajuste do alinhamento do
texto
text-decoration Underline, overline
Decoração do texto
Folha de Estilo – Estilo na Página
<html><head><title> Folhas de Estilo</title><style type=“text/css”>body{ font-size:20px; font-family:verdana; color:#ff0000; background-color:#fcfccc; font-weight:bold; font-style:italic; background-image:url("imagens/porsche01.jpg"); background-repeat:no-repeat; background-position:center right; background-attachment:fixed;*/bgproperties do html*/}
Folhas de Estilo – Estilo na página
h1{ font-size:25px; font-family:arial; color:white; text-align:center; text-decoration:none; background-color:blue; width:400px;}h2{
font-size:18px; font-family:verdana; text-decoration:underline; color:#FFE4B5; text-align:center; word-spacing:5px;}
FOLHAS DE ESTILO – ESTILO NA PÁGINA
a:link{ font-size:15px; font-family:verdana; color:orange; text-decoration:none;/*link sem sublinhado*/ width:200px; background-color:black; display:block;/*exibe o conteúdo em bloco*/}
a:visited{ font-size:15px; font-family:verdana; color:orange; text-decoration:none;/*link sem sublinhado*/ width:200px; background-color:black; display:block;}
FOLHAS DE ESTILO – ESTILO NA PÁGINA
a:hover{ text-align:center;
border-color:orange; border-style:solid; background-image:url("imagens/fundo08.jpg"); } h3{ font-size:25px; font-family:tahoma; color:#ff8fcf; text-align:center;}</style>
FOLHAS DE ESTILO – ESTILO NA PÁGINA
<body>Testando estilo para a tag body<h1> Testando estilo para tag h1</h1><a href="#">Hiperlink1</a><a href="#">Hiperlink2</a><a href="#">Hiperlink3</a><a href="#">Hiperlink4</a><a href="#">Hiperlink5</a><a href="#">Hiperlink6</a><h2> Testando estilo para a tag h2</h2><h3>Testando estilo para a tag h3</h3></body></html>