HTML & CSS para pequenas gafanhotas

Apresentação sobre o básico do HTML e CSS feita para LadyTalks :)

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