AULA 02 Introdução (HTML, CSS e Javascript) PROGRAMAÇÃO PARA WEB Marcelo Henrique dos Santos

Tamanho: px

Começar a partir da página:

Download "AULA 02 Introdução (HTML, CSS e Javascript) PROGRAMAÇÃO PARA WEB Marcelo Henrique dos Santos"

Maria das Graças da Mota
5 Há anos
Visualizações:

1 AULA 02 Introdução (HTML, CSS e Javascript)

2 Mestrado em Educação (em andamento) MBA em Negócios em Mídias Digitais MBA em Marketing e Vendas Especialista em games : Produção e Programação Bacharel em Sistema de Informação TECNOLOGIA EM JOGOS DIGITAIS GAME ENGINE

3 HTML Tabelas <table border="1"> <tr> <th>coluna 1</th> <th>coluna 2</th> </tr> <tr> <td>linha 1, valor 1</td> <td>linha 1, valor 2</td> </tr> <tr> <td>linha 2, valor 1</td> <td>linha 2, valor 2</td> </tr> </table>

4 HTML Tabelas

5 HTML Background e Fontes Formas de se definir um background preto para o corpo da página <body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black">

6 HTML Background e Fontes Definindo uma imagem de fundo <body background="bg-top-shadow.png "> <body background=" /images/bg-topshadow.png ">

7 HTML Background e Fontes Configurando uma fonte <font size="2" face="verdana">texto com fonte específica.</font>

8 CSS Cascading Style Sheets Estilos definem como elementos html devem ser apresentados Permite a separação entre definição de conteúdo e formatação em HTML Style sheets externos são definidos através de arquivos CSS Atualmente é o padrão para inserção de estilo na construção de páginas html

9 CSS

10 CSS Formato geral: seletor { propriedade: valor } Uma definição de estilo em CSS será composta por uma sequência de definições como esta acima Exemplos: body { color: black } p { font-family: Verdana ; text-align: center; color: red } h1,h2,h3,h4,h5,h6 { color: green } p {margin-left: 20px}

11 CSS Classes em CSS permitem que um mesmo elemento seja exibido de diferentes formas Formato usando classes: seletor.classe { propriedade: valor } Exemplos: p.direita {text-align: right} // Alinha à direita p.centro {text-align: center} // Centraliza.esquerda {text-align: left} // Aplicado a qualquer elemento html que contenha classe esquerda

12 CSS <p class= direita >Este parágrafo será alinhado à direita</p> <p class= centro >Este parágrafo será centralizado</p> <p class= esquerda >Este será à esquerda</p>

13 CSS Como definir (1/3) Existem 3 maneiras se definir um CSS para um documento HTML Criando um link externo

14 CSS Como definir (1/3)

15 CSS Como definir (2/3) Internamente (dentro da própria página HTML a ser exibida)

16 Definindo de forma inline CSS Como definir (3/3)

17 CSS Como definir (3/3) Caso existam várias definições para um mesmo elemento, a prioridade é: inline, interna e externa

18 Aplicações Com CSS podemos formatar: Background Textos Fontes Margens Bordas Listas Tabelas

19 Aplicações sp

20 Propriedades CSS referenciadas na aula (em Inglês site SitePoint) Bordas: border-width: largura da borda; border-style: estilo da borda; border-color: cor da borda.

21 Propriedades CSS referenciadas na aula (em Inglês site SitePoint) Determinar a cor da letra e o fundo: color:cor do elemento; background-color: cor de fundo; background-image: imagem de fundo; width: largura de um elemento;

22 ATIVIDADE Objetivo: Utilização de estilos Crie um documento HTML cujo conteúdo seja semelhante ao apresentado na figura abaixo

23 ATIVIDADE Crie o arquivo CSS (estilo) para aplicar o layout no arquivo HTML que foi realizado anteriormente.

24 BIBLIOGRAFIA BAZILIO, Carlos. Introdução à Programação para Web. Memória de aula da Universidade Federal Fluminense (Polo Universitário de Rio das Ostras) BAZILIO, Carlos. HTML, CSS e Javascript. Memória de aula da Universidade Federal Fluminense (Polo Universitário de Rio das Ostras) ROLIM, Carlos Oberdan. Linguagem de Programação IV - Introdução. Material de aula da universidade URI - Santo Ângelo. PAULA, Bruno C. Laboratório de Informática Formulários em HTML. Material de aula da PUCPR

25 MATERIAL EXTRA

Documentos relacionados

AULA 01. Introdução (HTML, CSS e Javascript) JAVA ENTERPRISE EDITION - DESENVOLVENDO APLICAÇÕES CORPORATIVAS

AULA 01. Introdução (HTML, CSS e Javascript) JAVA ENTERPRISE EDITION - DESENVOLVENDO APLICAÇÕES CORPORATIVAS AULA 01 Introdução (HTML, CSS e Javascript) Mestrado em Educação (em andamento) MBA em Negócios em Mídias Digitais MBA em Marketing e Vendas Especialista em games Bacharel em Sistema de Informação Email: