Técnicas e 
processos de 
produção 
Profº Ritielle Souza
Ferramentas Programáveis 
 Mensagem para mais de um 
destinatário 
<a href= 
mailto:alguem@alguem.com.>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 ...
TABELAS 
 As tabelas eram usadas para 
diagramação, atualmente a 
diagramação é feita com camadas e 
com folhas de estilo...
TABELAS
TABELAS 
Parâmetros de table 
Bord 
er 
Bgco 
lor 
Width 
Heigh 
t 
Backgr 
ound 
Border 
color 
Cellpa 
dding 
Cellsp
TABELAS 
<table 
border="1" 
bgcolor="yello 
w" 
bordercolor="r 
ed" width="600" 
height="400" 
align="center"
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> t...
TABELAS 
Parâmetros colspan e rowspan 
<td colspan=“4”>texto</td> - número de 
colunas que foram unidas 
<td 
rowspan=“2” ...
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 n...
Sintaxe CSS – Folha de Estilo 
 Regra CSS é a unidade básica de 
uma folha de estilo. Uma regra 
CSS é composta de duas p...
Sintaxe CSS – Folha de Estilo 
 seletor{propriedade:valor} 
declaração 
REGRA CSS 
p{ 
color:#000000; 
background-color:#...
Comentários em CSS 
 /*Este é um comentário em linha*/ 
Bloco de comentário 
 /*Este é um bloco de comentários 
em linha...
Formatação de Texto 
Atributos Valor Definição 
color Valor em 
hexadecimal ou 
nome da cor 
Cor do texto 
font-family Nom...
Folha de Estilo – Estilo na 
Página 
<html> 
<head> 
<title> Folhas de Estilo</title> 
<style type=“text/css”> 
body{ 
fon...
Folhas de Estilo – Estilo na página 
h1{ 
font-size:25px; 
font-family:arial; 
color:white; 
text-align:center; 
text-deco...
FOLHAS DE ESTILO – ESTILO NA 
PÁGINA 
a:link{ 
font-size:15px; 
font-family:verdana; 
color:orange; 
text-decoration:none;...
FOLHAS DE ESTILO – ESTILO NA 
PÁGINA 
a:hover{ 
text-align:center; 
border-color:orange; 
border-style:solid; 
background-...
FOLHAS DE ESTILO – ESTILO NA 
PÁGINA 
<body> 
Testando estilo para a tag body 
<h1> Testando estilo para tag h1</h1> 
<a h...
Próximos SlideShares
Carregando em…5
×

Técnicas e processos - HTML / CSS - aula 2

285 visualizações

Publicada em

Curso Design

Publicada em: Design
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
285
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
6
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Técnicas e processos - HTML / CSS - aula 2

  1. 1. Técnicas e processos de produção Profº Ritielle Souza
  2. 2. Ferramentas Programáveis  Mensagem para mais de um destinatário <a href= mailto:alguem@alguem.com.>FALE CONOSCO</a>  Definindo o assunto da mensagem <a href= mailto:alguem@alguem.com.>FALE CONOSCO</a>
  3. 3. 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>
  4. 4. 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.
  5. 5. TABELAS
  6. 6. TABELAS Parâmetros de table Bord er Bgco lor Width Heigh t Backgr ound Border color Cellpa dding Cellsp
  7. 7. TABELAS <table border="1" bgcolor="yello w" bordercolor="r ed" width="600" height="400" align="center"
  8. 8. TABELAS  Para criar tabelas usamos as tags:  <table> table </table>  <tr> table row </tr>  <td> table data</td>
  9. 9. TABELAS  Para criar tabelas usamos as tags:  <th> table heading</th>  <caption> cabeçalho </caption>  <thead> table header</thead>  <tbody> table
  10. 10. TABELAS Parâ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>
  11. 11. TABELAS DADO1 Dado2 Dado3 Dado4 Dado5 Dado6 Dado7 Dado8 Dado 9 Dado10 Dado 11 Dado 12
  12. 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
  13. 13. 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.
  14. 14. 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; }
  15. 15. 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*/
  16. 16. Formatação de Texto Atributos 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
  17. 17. 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*/ }
  18. 18. 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; }
  19. 19. 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; }
  20. 20. 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>
  21. 21. 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>

×