Conceitos de Sistemas Para Internet Aula 08

•

ESTÁCIO EAD

Andreson Souza

30/04/2020

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Tecnologias para Internet

325 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
Aula 8- Padrão Tableless e Normas W3C
 
Nome: Prof. Jorge Ferreira
Titulação : Especialista em Análise e Gerência de Projetos.
 PadrãoTableless – AULA8
PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
Conteúdo Programático desta aula
	Divisão entre dados, estrutura e formatação;
	Linguagens de Transformação;
 PadrãoTableless – AULA8
PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
Folhas de Estilo
Para formatar as página html, usávamos formatar na própria página.
Com isso as páginas html ficavam com o código das tags (body, h1, p, etc) e também com o código da formatação. Acarretando uma página pesada.
Resolveram então separar o código html do código da formatação criando assim as FOLHAS DE ESTILO EM CASCATA (STYLESHEET).
Temos três tipos de folha de estilo:
externa, incorporada e inline.
 PadrãoTableless – AULA8
PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
CSS IMPORTADO (EXTERNO)
 As regras CSS são importadas quando estão declaradas em um documento à parte do documento HTML. A folha de estilo CSS é então um arquivo separado do arquivo .html e que tem a extensão .css. 
 Esse tipo de procedimento serve para aplicar regras CSS a várias páginas de um website.
 Utilizando uma folha de estilo externa, podemos mudar a aparência de um
site inteiro modificando apenas um único arquivo. (.css importado).
 PadrãoTableless – AULA8
PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
CSS IMPORTADO (EXTERNO)
 O arquivo .css da folha de estilo externa deverá ser vinculado ao documento HTML, dentro da tag <head>.
Sintaxe:
<head>
 . . .
 <link rel = “stylesheet” type = “text/css” href= “exemplo.css”>
 . . .
</head>
 O navegador interpretará as regras de estilo do arquivo exemplo.css e formatará o documento de acordo com elas.
 PadrãoTableless – AULA8
PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
CSS INCORPORADO (INTERNO)
É possível incorporar regras CSS declarando-as no próprio documento HTML. 
Esse tipo de procedimento serve para aplicar regras CSS a uma única página. 
Com a folha de estilo incorporada ou interna, podemos mudar a aparência somente de um documento, aquele no qual a folha de estilo está incorporada.
As regras CSS internas deverão ser declaradas na seção <head> do documento com a tag de estilo <style>.
 PadrãoTableless – AULA8
PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
CSS INCORPORADO (INTERNO)
Ex:
 <head>
 . . .
 <style type = “text/css”>
 
 body {background-color : #EE0000;}
 h2 { color : #00CC00;}
 p { margin-right : 10px;}
 </style>
 . . .
 </head>
 PadrãoTableless – AULA8
PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
CSS INCORPORADO (INTERNO)
O navegador interpretará as regras CSS na própria página e formatará o documento de acordo com elas.
Normalmente o navegador ignora tags desconhecidas, mas o conteúdo da tag poderá ser mostrado na tela.
Para ocultar o conteúdo das tags em navegadores que não suportam estilos, utilizamos a marcação de comentário do
HTML: <!—(abre comentário) e - - > (fecha comentário).
 PadrãoTableless – AULA8
PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
CSS INLINE
São regras CSS declaradas dentro da tag do elemento HTML (aplica regras a apenas um elemento).
Ao utilizar esse procedimento são perdidas muitas vantagens da CSS, pois o conteúdo é misturado com a apresentação.
O método deve ser usado apenas para aplicar um estilo a uma única ocorrência de um elemento na página Web.
 PadrãoTableless – AULA8
PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
CSS INLINE
<p style = “color:#CC9900; font-size: 14px;”>
Aqui um parágrafo com a cor marrom e com letras tamanho 14
</p>
Estamos aplicando formatação da cor da fonte e do tamanho da fonte diretamente no parágrafo da página.
 PadrãoTableless – AULA8
PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
PRIORIDADES
-estilo inline (dentro de um elemento HTML);
-estilo incorporado (definido na seção head do documento);
-estilo externo (importado ou lincado).
A CSS INLINE PREVALECE SOBRE AS OUTRAS DUAS E A CSS INCORPORADA PREVALECE SOBRE A EXTERNA PARA A MESMA
FORMATAÇÃO.
 PadrãoTableless – AULA8
PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
PRIORIDADES
EX. 
Se uma cor do parágrafo formatada na css externa como vermelho e na incorporada como verde, aparecerá formatação em VERDE.
E se o mesmo parágrafo for formatado INLINE como AZUL, aparecerá o
parágrafo em AZUL.
 PadrãoTableless – AULA8
PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
REGRAS DE FOLHA DE ESTILO (CSS)
Seletor {propriedade : valor;}
Propriedade – É o atributo do elemento HTML ao qual será aplicada a regra.
Valor – É a característica a ser assumida pela propriedade.Ex: fundo preto, letra verdana.
Comentário – É utilizado para documentar trechos de código.
/* este é um comentário */
Ex:
p {font-size : 10px; /* este é outro comentário */
 font-family : verdana, Serif;
}
 PadrãoTableless – AULA8
PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
REGRAS DE FOLHA DE ESTILO (CSS)
- Vários Seletores 
Podemos agrupar, os seletores separando-os com uma vírgula.
 PadrãoTableless – AULA8
PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
SELETOR DE TAG
Um seletor de tag pode ser: body, p, h1, h2, etc.
<html>
 <head>
 <title>SELETOR DE TAG</title>
 <style type="text/css">
 body{background : #00ff00;}
 </style>
 </head>
 <body>
<h1>Esta é uma página com cor VERDE</h1>
 </body>
</html>
 PadrãoTableless – AULA8
PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
Veja como Ficou
 PadrãoTableless – AULA8
PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
CLASSES DE SELETORES
É possível criar classes de seletores com qualquer nome, definindo as regras
CSS.
Sintaxe: elementoHTML.nomedaclasse {propriedade : valor;}
ex:
p.vermelho {color : #FF0000;}
p.verde {color : #00FF00;}
Ou
.vermelho {color : #FF0000;}
.verde {color : #00FF00;}
 PadrãoTableless – AULA8
PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
CLASSES DE SELETORES
APLICAÇÃO:
<p class = “vermelho”> Este parágrafo terá fonte vermelha</p>
<p class = “verde”> Este parágrafo terá fonte verde</p>
 PadrãoTableless – AULA8
PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
Exemplo de classe
<html
 <head>
 <title> Exemplo de classe </title>
 <style type="text/css">
 .vermelho {color : #FF0000;}
 .verde {color : #00FF00;}
 </style>
 </head>
<body>
 <p class = "vermelho"> Este parágrafo terá fonte vermelha</p>
 <p class = "verde"> Este parágrafo terá fonte verde</p>
</body>
</html>
 PadrãoTableless – AULA8
PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
Veja como ficou!
 PadrãoTableless – AULA8
PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
SELETOR ID
O seletor ID é único, podendo ser aplicado a somente um elemento HTML
dentro do documento.
Podemos criar qualquer nome e com este criar uma ID.
A sintaxe básica para o seletor ID é composta por um nome qualquer precedido de tralha.
ex:
#qualquerID {propriedade : valor;}
 PadrãoTableless – AULA8
PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
Exemplo de classe
<html>
 <head>
 <title>seletor id</title>
 <style type="text/css">
 #vermelho {color : #FF0000;}
 #verde {color : #00FF00;}
 #azul {color : #0000FF;}
 </style>
 </head>
<body>
<p id = "vermelho"> Este parágrafo terá fonte vermelha e 22px</p>
<p id = "verde"> Este parágrafo terá fonte verde e 26px</p>
<p id = "azul"> Este parágrafo terá fonte azul e 30px</p>
</body>
</html>
 PadrãoTableless – AULA8
PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
Veja como ficou!
 PadrãoTableless – AULA8
PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
LayOut
 PadrãoTableless – AULA8
PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
<html>
 <head>
 <title>Divs</title>
 <link rel="stylesheet" type="text/css" href="style.css"/> 
 </head>
 <div id="wrapper">
	 <div id="topo">Este é o topo</div>
	 <div id="content">Este é conteudo</div>
	 <div id="sidebar">Este é o menu</div>
	 <div id="footer">Este é o rodapé</div>
 </div>
</html>
Crie um documento HTML
 PadrãoTableless – AULA8
PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
Veja com ficou!
 PadrãoTableless – AULA8
PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
Folha de Estilo
/*comentário emcss */
/* para formatar o WRAPPER(site) digite o código abaixo */
body{ background: #000;}
#wrapper {
background : #ccffcc;
width: 760px;
height: 400px;
}
Temos nela duas linhas de comentários, a formatação do body, que é o corpo da página e a formatação do WRAPPER, que é a caixa que envolve todas as outras que serão criadas.
O fundo coloquei preto mas pode colocar outra cor.
 PadrãoTableless – AULA8
PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
Veja como ficou!
 PadrãoTableless – AULA8
PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
Inserimos um link para chamar a página css, 
<head>
<title>LaytOut</title>
 <link rel="stylesheet" type="text/css" href=“style.css"/>
</head>
 PadrãoTableless – AULA8
PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
CSS Completo
Body{background: #000;}
#wrapper {
background : #ccffcc;
width: 760px;
height: 400px;
}
#branding{
background : #cc33cc;
width: 760px;
height: 100px;
}
 PadrãoTableless – AULA8
PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
Vamos ver um vídeo
#conteudo{
background : #0000ff;
width: 500px;
height: 400px;
float:right;
}
#menu{
background : #ffff00;
width: 250px;
height: 400px;
float:left;
}
#footer{
background : #cc33cc;
width: 760px;
height: 20px;
clear:both;
}
 PadrãoTableless – AULA8
PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
Veja como ficou!
 PadrãoTableless – AULA8
PROGRAMAÇÃO CLIENTE EM SISTEMAS WEB
Referências
- Ajas, Rich Internet Applications e desenvolvimento web para programadores / Paul J Deitel, Harvey M Deitel – São Paulo : Pearson 2008
- www.w3c.org