Desenvolvimento Web Parte II
-
Upload
igorpimentel -
Category
Education
-
view
2.039 -
download
1
description
Transcript of Desenvolvimento Web Parte II
Montando páginas Web com Montando páginas Web com (X)HTML e CSS(X)HTML e CSS
Igor PimentelIgor Pimentelwww.igorpimentel.comwww.igorpimentel.com
[email protected]@igorpimentel.com
Programa• Um pouco de história
– O Início da Web– O que é Web?– Como funciona a Web?– W3C e os Padrões Web
• (X)HTML• CSS• Estudo de Caso: Palitex
Um pouco de história
• O Início da WebCriada por Tim Berners-Lee em 1989.Baseado no projeto ENQUIRE (1980), enquanto ele trabalhava na CERN.Seu intento original do sistema foi tornar mais fácil o compartilhamento de documentos de pesquisas entre os colegas.
Um pouco de história• A Web
Também conhecida como World-Wide Web (WWW) é a parte multimídia da Internet, portanto possibilita a exibição de páginas de hipertexto, ou seja, texto em formato digital, documentos que podem conter todo o tipo de informação: textos, fotos, animações, trechos de vídeo e sons e programas e que permite conexões entre documentos (os links).
Um pouco de história• Como funciona a Web? (1/4)
A web consiste em um sistema cliente-servidor.A comunicação entre os clientes e servidores se dá através do protocolo HTTP:1. Usuário digita uma URL navegador (browser) ou clica em um link;2. Navegador envia a requisição até o servidor de web;3. Servidor de web envia o conteúdo requisitado para o navegador;4. O Navegador apresenta a informação para o usuário.
Um pouco de história• Como funciona a Web? (2/4)
HTTP (acrônimo para Hypertext Transfer Protocol, que significa Protocolo de Transferência de Hipertexto).É um protocolo de aplicação responsável pelo tratamento de pedidos/respostas entre cliente e servidor na Web.URL (de Uniform Resource Locator), em português Localizador de Recursos Universal, é o endereço de um recurso (um arquivo, uma impressora etc.), disponível em uma rede. Uma URL tem a seguinte estrutura:protocolo://máquina/caminho/recurso
Um pouco de história• Como funciona a Web? (3/4)
Navegador (Browser)
Um pouco de história• Como funciona a Web? (4/4)
Um pouco de história• W3C e os Padrões Web (1/2)
W3C (World Wide Web Consortium) é um consórcio de empresas de tecnologia. Fundado por Tim Berners-Lee em 1994para levar a Web ao seu potencial máximo.
Um pouco de história• W3C e os Padrões Web (2/2)
Padrões Web ou Web Standards é um conjunto de recomendações, produzidos pelo W3C e destinados a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que possibilitem a criação de uma Web acessível a todos, independentemente dos dispositivos usados ou de suas necessidades especiais.
(X)HTML• O que é HTML?
HTML é a abreviação para HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação para Hipertexto.Compõe a estrutura de uma página Web através de etiquetas (tags) e atributos.
(X)HTML• TAGs HTML
• Atributos HTML
(X)HTML• O que é (X)HTML?
O (X)HTML, ou eXtensible Hypertext Markup Language, é uma reformulação da linguagem de marcação HTML baseada em XML.Deverá ser o sucessor do HTML. Assim, muitos consideram que XHTML é a atual ou mais nova versão do HTML.
(X)HTML• Algumas TAGs
...
CSS• O que é CSS?
Cascading Style Sheets, em português Folhas de Estilo em Cascata, são documentos que descrevem de que forma o HTML deve ser apresentado.Contêm um conjunto de regras que descrevem o aspecto visual dos elementos (as tags) HTML.
CSS• Sintaxe
CSS• Associar CSSs a documentos HTML
CSS• Associar CSSs a documentos HTML
CSS• Associar CSSs a documentos HTML
CSS• Trabalhando com classes
Uma classe define a variação de um estilo, o qual é referenciado através de uma ocorrência específica de um elemento utilizando o atributo class.
CSS• Trabalhando com classes
CSS• Definindo um estilo para um elemento
específicoPode-se atribuir um ID aos elementos e então associar estilos à este ID.Para declarar o estilo para um ID é usado o símbolo "#".
CSS• Definindo um estilo para um elemento
específico
CSS• Adicionando comentários
Assim como em qualquer linguagem de programação, em CSS é possível adicionar comentários para melhor documentar o código.
CSS• Adicionando comentários
CSS• Algumas propriedades (1/7)
display: Define como um elemento é exibido.Ex: display: none;float: Faz o elemento flutuar à esquerda ou à direita do restante do conteúdo.Ex: float: left;
CSS• Algumas propriedades (2/7)
margin-top, margin-right, margin-bottom e margin-left: Define a margem superior, direita, inferior e esquerda de um elemento.Ex: margin-top: 10px;padding-top, padding-right, padding-bottom e padding-left: Define a área superior, direita, inferior e esquerda de espaçamento de um elemento.Ex: padding-right: 5px;
CSS• Algumas propriedades (4/7)
font-family: Relação de nomes específicos de famílias de fontes ou de seus nomes genéricos.Ex: font-family: Arial, Helvetica, sans-serif;font-size: Define o tamanho de uma fonte.Ex: font-size: 11px;font-weight: Define o peso de uma fonte.Ex: font-weight: bold;color: Define a cor do texto.Ex: color: red;
CSS• Algumas propriedades (5/7)
text-align: Alinha o texto em um elemento.Ex: text-align: center;text-decoration: Acrescenta decoração de texto.Ex: text-decoration: underline;
CSS• Algumas propriedades (6/7)
background-color: Define a cor de fundo de um elemento.Ex: background-color: blue;background-image: Define uma imagem como plano de fundo.Ex: background-image: url(images/bg.jpg);background-repeat: Define como uma imagem de fundo será repetida.Ex: background-repeat: no-repeat;
CSS• Algumas propriedades (7/7)
border-width: Define a largura da borda de um elemento.Ex: border-width: 3px;border-style: Define o estilo da borda.Ex: border-style: dotted;border-color: Define a cor da borda.Ex: border-color: #000000;
Fixe bem...“(X)HTML para estruturar
e
CSS para apresentar (formatação).”
ReferênciasSilva, Maurício Samy – Construindo sites com CSS e (X)HTML. -- São Paulo: Novatec, 2008.
Site da web: http://pt.wikipedia.org/wiki/
Site da web: http://www.w3schools.com/
Site da web: http://www.maujor.com/
Site da web: http://www.tecnoclasta.com/
Estudo de Caso: Palitex