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

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>
 Definindo o assunto da mensagem
<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 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
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> table
header</thead>
 <tbody> table

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>

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

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;
text-decoration:underline;
color:#FFE4B5;
text-align:center;
word-spacing:5px;
}

FOLHAS DE ESTILO – ESTILO NA
PÁGINA
a:link{
font-size:15px;
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;
color:orange;
text-decoration:none;/*link sem sublinhado*/
width:200px;
background-color:black;
display:block;
}

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>

PÁGINA
<body>
Testando estilo para a tag body
<h1> Testando estilo para tag h1</h1>
<a href="#">Hiperlink1</a>
<h2> Testando estilo para a tag h2</h2>
<h3>Testando estilo para a tag h3</h3>
</body>
</html>

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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

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

Semelhante a Técnicas e processos - HTML / CSS - aula 2 (20)

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