Buscar

Revisão WebDesign

Teste o Premium para desbloquear

Aproveite todos os benefícios por 3 dias sem pagar! 😉
Já tem cadastro?
Você viu 1, do total de 2 páginas

Prévia do material em texto

Resumo - Web Design 
 
Website ​é a coleção unificada de páginas relacionadas. 
Hiperlinks ​são ligações entre as páginas de um site e também entre websites. 
FAPESP ​= registro.br: Controla registros de domínios no Brasil. .com.br 
Internic ​– Registro de sites com domínio .com 
–​ Páginas estáticas​: o conteúdo está inserido dentro do arquivo HTML armazenado no 
servidor, que pode conter ainda JavaScript, Flash e CSS. 
– ​Páginas dinâmicas​: o conteúdo é criado dinamicamente por um script ou API, exigindo 
processamento no servidor, o qual gera uma página estática para ser enviada ao cliente. – 
Utiliza linguagens de programação para conexão ao BD (Banco de Dados), como 
ColdFusion, PHP, JSP, ASP, ASP.Net, ou scripts específicos, como Phyton, Perl, CGI, C#, 
Java, etc. 
DHTML ​(Dynamic HTML): páginas HTML com JavaScript. 
O ​HTML​ é uma linguagem de marcação, que serve para desenvolver páginas web, 
utilizando ​tags​ que informam ao browser como exibir a página. Elas abrem e fecham. 
Os ​atributos​ são normalmente usados para identificar um tag ou para complementar sua 
função, ele deve estar sempre entre aspas. (os tags de fechamento não possuem atributos). 
O html é dividido em duas partes, o head e o body. 
<​br​> quebra de linha / <​p​> parágrafo / <​div​> bloco de texto / <​pre​> Texto pré-formatado 
<​tt​> monoespaçado 
 
Links 
Os links são usados para direcionar o usuário para partes da página atual ou outras páginas 
sendo do site ou não. <a> - tag de definição / “href” - atributo de destino. Ex.: <a href = 
”http://site.com.br”> nome do site </a>. Adicionando o atributo target = “blank/new” diz se a 
nova página deve abrir por cima da atual ao não. 
Os links internos apontam para pontos específicos dentro da mesma página web, chamados 
âncoras e definidos com o uso de um id no tag destino. Assim, no link o id é referenciado no 
href com a utilização de uma # . Ex.:<a href = ”#topo”> voltar ao topo</a> 
 
Imagens 
As imagens são incluídas através do tag <img src=”foto.png”> 
Ex.: <img src = “imagem.jpg” alt=”imagem title = “imagem” width = “5” height= “5”> 
 
CSS 
Conhecido como “folhas de estilo”. Ele tem a vantagem de separar a forma da estrutura, são 
puramente textos, não exigem plugins e facilitam a codificação e manutenções posteriores. 
Uma regra CSS é composta de três partes: seletor, propriedade e valor. 
As folhas de estilo podem ser vinculadas a um documento de três maneiras distintas: 
Inline ​(no próprio tag) - <body><p style = “font-family: arial”> texto </p></body> 
Embedded ​(dentro do head) - <head><style type = “text/css”> p{font-family: arial;} 
</style></head> 
Linked ​(através da tag link a um arquivo externo) - <head><link rel=”stylesheet” 
href=”estilo.css type= “text/css”></head> 
Imported ​(através de import a um arquivo externo) - <head><style type = “text/css”> @impot 
url(“estilo.css”); body{font-family: arial;} </style></head> 
 
As ​propriedades ​devem estar entre chaves. Podem existir duas ou mais propriedades por 
seletor, desde que separadas por um “;”. 
.classe1​ {font-family: arial;} - pode ser aplicada a muitas tags diferentes 
p.classe1​ {font-family: arial;} - só pode ser aplicada à tag <p> 
As pseudo-classes são seletores que influenciam o comportamento da tag “A” - a: 
link/visited/hover/active font-family: arial; 
 
Seletores do tipo ​ID​, deve ser usado apenas uma vez na página para definir um único 
elemento. Muito utilizados para organizar seletores contextuais criando uma seqüência 
lógica de atributos; permitem também que funções JavaScript identifiquem um objeto 
exclusivo na tela. 
 
Caixas de exibição ​de tags de bloco apresentam características como: borda, margens, 
padding (margens internas), background, etc. As caixas são formatadas, estilizadas e 
dispostas pelas CSS segundo uma sequência, onde cada elemento HTML ocupa uma caixa. 
padding​: define o espaço entre a borda da caixa (box) e seu conteúdo interno 
margin​: define a margem, o espaço em volta da caixa (box), da borda para fora 
O ​float ​é um atributo que faz os objetos flutuarem em relação a outros; seus valores são 
none, left e right, sendo none o default. 
O atributo ​clear ​provoca uma quebra no efeito do float; seus valores são none, right, left e 
both. fazendo com que, se houver um elemento com float antes do que recebe o clear, o 
elemento com clear apareça depois do anterior, ignorando o float. 
 
Posicionamento Estático:​ Mantém a posição normal do elemento no documento. Não 
suporta propriedades left, top, right, e botom. <style> div {position: static;} </style> (no head) 
Posicionamento Absoluto​: Posiciona o objeto em qualquer lugar à partir de coordenadas: 
top, right, bottom e left. 
Posicionamento Relativo:​ Posiciona o objeto a partir de coordenadas levando em 
consideração a posição do objeto “pai”. 
Empilhamento de camadas:​ Permite que objetos sejam empilhados utilizando o atributo z- 
index. 
 
As ​Listas ​são muito leves, práticas, semanticamente corretas, e tem múltiplas possibilidades 
(vertical e horizontal) se adaptando facilmente a qualquer layout. 
 
Class é com . (ponto) 
Id é com # (cerquilha)