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@igorpimentel.comemail@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