HTML & CSS para pequenas gafanhotas

Transcript

1. HTML E CSS PARA PEQUENAS GAFANHOTAS

2. Na base da estrutura de uma página da Web está

   o HTML (HyperText Markup Language ou, em português, Linguagem de Marcação de HiperTexto). HTML é o que o navegador "lê" para apresentar a página ao usuário em frente ao computador. Para o browser conseguir ler o arquivo, é preciso criá-lo com extensão “.html” ou “.htm”, caso contrário o browser não irá renderizar o conteúdo corretamente. O QUE É HTML?

3. <tag> <outraTag>texto</outraTag> </tag> TAGS ANINHADAS <tag>Conteúdo da tag</tag> ESTRUTURA DE

   UMA TAG O HTML trabalha com tags TAGS HTML

4. Títulos (Do 1 ao 7) <hn> PRINCIPAIS TAGS Parágrafos <p>

   Links <a> Imagens <img> Tabelas <table> Campos <input>

5. Abra o arquivo em um navegador e irá aparecer o

   texto “Olá Mundo” em tamanho grande na página! \o/ Abra o arquivo em um editor de texto, digite <h1>Olá Mundo</h1> e salve o arquivo Crie um arquivo com o nome index.html 3 2 1 COMO CRIAR MEU 1º HTML?

6. No estilo de uma página da Web está o CSS

   (Cascading Style Sheets, em português, Folha de Estilos em Cascata). O CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais. Com o CSS é possível criar diversos estilos diferentes para uma mesma estrutura em HTML. O QUE É CSS?

7. tag - estilo para uma tag id - estilo para

   um elemento único, definido por uma “#" classe - estilo para um grupo de elementos, definido por um “." TIPOS DE SELETORES seletor { propriedade: valor } ESTRUTURA DE UM SELETOR O CSS trabalha com seletores SELETORES CSS

8. identificador único #id EXEMPLOS identificador grupos .class identifica tags tag

   #title .list img

9. Abra o arquivo em um navegador e irá aparecer o

   texto “Olá Mundo” em vermelho \o/ Digite: <style> h1 {color: red;} </style> Abra o arquivo index.html 3 2 1 COMO CRIAR MEU 1º CSS?

10. <style> h1 {color: red;} #title {color: orange;} .hello {color: blue;}

    </style> <h1>Olá mundo </h1> <h1 id="title">Olá mundo </h1> <h1 class="hello">Olá mundo </h1> INDEX.HTML

11. CSS é o que deixa o site mais amigável e

    bonito, assim como o que deixa uma casa mais bonita são as pinturas, decoração, etc. ANALOGIA DA CASA HTML é a estrutura de uma página, assim como a estrutura de uma casa são as madeiras, concretos, etc.

12. Editor de texto para HTML & CSS SUBLIME TEXT Tutoriais

    gratuitos para aprender HTML & CSS CODECADEMY TIPS AND TRICKS

13. OBRIGADA! INAJARALEPPA@GMAIL.COM