Download - Desenvolvimento Web Parte II
![Page 1: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/1.jpg)
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
![Page 2: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/2.jpg)
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
![Page 3: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/3.jpg)
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.
![Page 4: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/4.jpg)
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).
![Page 5: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/5.jpg)
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.
![Page 6: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/6.jpg)
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
![Page 7: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/7.jpg)
Um pouco de história• Como funciona a Web? (3/4)
Navegador (Browser)
![Page 8: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/8.jpg)
Um pouco de história• Como funciona a Web? (4/4)
![Page 9: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/9.jpg)
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.
![Page 10: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/10.jpg)
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.
![Page 11: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/11.jpg)
(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.
![Page 12: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/12.jpg)
(X)HTML• TAGs HTML
• Atributos HTML
![Page 13: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/13.jpg)
(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.
![Page 14: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/14.jpg)
(X)HTML• Algumas TAGs
...
![Page 15: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/15.jpg)
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.
![Page 16: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/16.jpg)
CSS• Sintaxe
![Page 17: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/17.jpg)
CSS• Associar CSSs a documentos HTML
![Page 18: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/18.jpg)
CSS• Associar CSSs a documentos HTML
![Page 19: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/19.jpg)
CSS• Associar CSSs a documentos HTML
![Page 20: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/20.jpg)
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.
![Page 21: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/21.jpg)
CSS• Trabalhando com classes
![Page 22: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/22.jpg)
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 "#".
![Page 23: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/23.jpg)
CSS• Definindo um estilo para um elemento
específico
![Page 24: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/24.jpg)
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.
![Page 25: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/25.jpg)
CSS• Adicionando comentários
![Page 26: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/26.jpg)
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;
![Page 27: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/27.jpg)
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;
![Page 28: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/28.jpg)
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;
![Page 29: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/29.jpg)
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;
![Page 30: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/30.jpg)
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;
![Page 31: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/31.jpg)
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;
![Page 32: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/32.jpg)
Fixe bem...“(X)HTML para estruturar
e
CSS para apresentar (formatação).”
![Page 33: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/33.jpg)
![Page 34: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/34.jpg)
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/
![Page 35: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/35.jpg)
Estudo de Caso: Palitex
![Page 36: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/36.jpg)
![Page 37: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/37.jpg)
![Page 38: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/38.jpg)
![Page 39: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/39.jpg)
![Page 40: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/40.jpg)
![Page 41: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/41.jpg)
![Page 42: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/42.jpg)
![Page 43: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/43.jpg)
![Page 44: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/44.jpg)
![Page 45: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/45.jpg)
![Page 46: Desenvolvimento Web Parte II](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/559a2d101a28abef758b473c/html5/thumbnails/46.jpg)