Desenvolvimento Web Parte II

Montando páginas Web com (X)HTML e CSS Igor Pimentel www.igorpimentel.com [email_address]

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 Web Criada 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 1994 para 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.

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 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 Definindo um estilo para um elemento específico Pode-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 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ências Silva, 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/

Desenvolvimento Web Parte II

Mais conteúdo relacionado

Mais procurados

Semelhante a Desenvolvimento Web Parte II

Mais de igorpimentel

Último

Desenvolvimento Web Parte II