AULA 02 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 : Produção e Programação Bacharel em Sistema de Informação TECNOLOGIA EM JOGOS DIGITAIS GAME ENGINE
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>
HTML Tabelas
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">
HTML Background e Fontes Definindo uma imagem de fundo <body background="bg-top-shadow.png "> <body background=" /images/bg-topshadow.png ">
HTML Background e Fontes Configurando uma fonte <font size="2" face="verdana">texto com fonte específica.</font>
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
CSS http://www.csszengarden.com/
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}
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
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>
CSS Como definir (1/3) Existem 3 maneiras se definir um CSS para um documento HTML Criando um link externo
CSS Como definir (1/3)
CSS Como definir (2/3) Internamente (dentro da própria página HTML a ser exibida)
Definindo de forma inline CSS Como definir (3/3)
CSS Como definir (3/3) Caso existam várias definições para um mesmo elemento, a prioridade é: inline, interna e externa
Aplicações Com CSS podemos formatar: Background Textos Fontes Margens Bordas Listas Tabelas
Aplicações http://www.w3schools.com/css/css_examples.a sp
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.
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;
ATIVIDADE Objetivo: Utilização de estilos Crie um documento HTML cujo conteúdo seja semelhante ao apresentado na figura abaixo
ATIVIDADE Crie o arquivo CSS (estilo) para aplicar o layout no arquivo HTML que foi realizado anteriormente.
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
MATERIAL EXTRA http://www.maujor.com/blog/w3c/rec-forms.html http://www.w3schools.com/html/html_forms.asp http://dev.opera.com/articles/view/20-html-forms-the-basics/ http://dev.opera.com/articles/view/34-styling-forms/ http://dev.opera.com/articles/view/improve-your-forms-using-html5/