Técnicas e processos - HTML / CSS - aula 2
-
Upload
ritielle-de-souza -
Category
Design
-
view
63 -
download
1
Transcript of Técnicas e processos - HTML / CSS - aula 2
![Page 1: Técnicas e processos - HTML / CSS - aula 2](https://reader036.fdocumentos.tips/reader036/viewer/2022062308/55baa252bb61ebaa548b4584/html5/thumbnails/1.jpg)
Técnicas e processos de
produçãoProfº Ritielle Souza
![Page 2: Técnicas e processos - HTML / CSS - aula 2](https://reader036.fdocumentos.tips/reader036/viewer/2022062308/55baa252bb61ebaa548b4584/html5/thumbnails/2.jpg)
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>
![Page 3: Técnicas e processos - HTML / CSS - aula 2](https://reader036.fdocumentos.tips/reader036/viewer/2022062308/55baa252bb61ebaa548b4584/html5/thumbnails/3.jpg)
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>
![Page 4: Técnicas e processos - HTML / CSS - aula 2](https://reader036.fdocumentos.tips/reader036/viewer/2022062308/55baa252bb61ebaa548b4584/html5/thumbnails/4.jpg)
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.
![Page 5: Técnicas e processos - HTML / CSS - aula 2](https://reader036.fdocumentos.tips/reader036/viewer/2022062308/55baa252bb61ebaa548b4584/html5/thumbnails/5.jpg)
TABELAS
![Page 6: Técnicas e processos - HTML / CSS - aula 2](https://reader036.fdocumentos.tips/reader036/viewer/2022062308/55baa252bb61ebaa548b4584/html5/thumbnails/6.jpg)
TABELASParâmetros de table
BorderBgcolorWidthHeightAlign
BackgroundBordercolorCellpaddingCellspacing
![Page 7: Técnicas e processos - HTML / CSS - aula 2](https://reader036.fdocumentos.tips/reader036/viewer/2022062308/55baa252bb61ebaa548b4584/html5/thumbnails/7.jpg)
TABELAS
<table border="1" bgcolor="yellow" bordercolor="red" width="600" height="400" align="center" cellspacing="10“>
![Page 8: Técnicas e processos - HTML / CSS - aula 2](https://reader036.fdocumentos.tips/reader036/viewer/2022062308/55baa252bb61ebaa548b4584/html5/thumbnails/8.jpg)
TABELAS
Para criar tabelas usamos as tags: <table> table </table> <tr> table row </tr> <td> table data</td>
![Page 9: Técnicas e processos - HTML / CSS - aula 2](https://reader036.fdocumentos.tips/reader036/viewer/2022062308/55baa252bb61ebaa548b4584/html5/thumbnails/9.jpg)
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>
![Page 10: Técnicas e processos - HTML / CSS - aula 2](https://reader036.fdocumentos.tips/reader036/viewer/2022062308/55baa252bb61ebaa548b4584/html5/thumbnails/10.jpg)
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>
![Page 11: Técnicas e processos - HTML / CSS - aula 2](https://reader036.fdocumentos.tips/reader036/viewer/2022062308/55baa252bb61ebaa548b4584/html5/thumbnails/11.jpg)
TABELAS
DADO1 Dado2 Dado3 Dado4
Dado5 Dado6 Dado7
Dado8 Dado 9
Dado10 Dado 11 Dado 12
![Page 12: Técnicas e processos - HTML / CSS - aula 2](https://reader036.fdocumentos.tips/reader036/viewer/2022062308/55baa252bb61ebaa548b4584/html5/thumbnails/12.jpg)
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
![Page 13: Técnicas e processos - HTML / CSS - aula 2](https://reader036.fdocumentos.tips/reader036/viewer/2022062308/55baa252bb61ebaa548b4584/html5/thumbnails/13.jpg)
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.
![Page 14: Técnicas e processos - HTML / CSS - aula 2](https://reader036.fdocumentos.tips/reader036/viewer/2022062308/55baa252bb61ebaa548b4584/html5/thumbnails/14.jpg)
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;}
![Page 15: Técnicas e processos - HTML / CSS - aula 2](https://reader036.fdocumentos.tips/reader036/viewer/2022062308/55baa252bb61ebaa548b4584/html5/thumbnails/15.jpg)
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*/
![Page 16: Técnicas e processos - HTML / CSS - aula 2](https://reader036.fdocumentos.tips/reader036/viewer/2022062308/55baa252bb61ebaa548b4584/html5/thumbnails/16.jpg)
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
![Page 17: Técnicas e processos - HTML / CSS - aula 2](https://reader036.fdocumentos.tips/reader036/viewer/2022062308/55baa252bb61ebaa548b4584/html5/thumbnails/17.jpg)
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*/}
![Page 18: Técnicas e processos - HTML / CSS - aula 2](https://reader036.fdocumentos.tips/reader036/viewer/2022062308/55baa252bb61ebaa548b4584/html5/thumbnails/18.jpg)
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;}
![Page 19: Técnicas e processos - HTML / CSS - aula 2](https://reader036.fdocumentos.tips/reader036/viewer/2022062308/55baa252bb61ebaa548b4584/html5/thumbnails/19.jpg)
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;}
![Page 20: Técnicas e processos - HTML / CSS - aula 2](https://reader036.fdocumentos.tips/reader036/viewer/2022062308/55baa252bb61ebaa548b4584/html5/thumbnails/20.jpg)
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>
![Page 21: Técnicas e processos - HTML / CSS - aula 2](https://reader036.fdocumentos.tips/reader036/viewer/2022062308/55baa252bb61ebaa548b4584/html5/thumbnails/21.jpg)
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>