HTML & CSS para pequenas gafanhotas

HTML & CSS para pequenas gafanhotas

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

272b9265412fa0f1c4514ee5c5f4e01f?s=128

Inajara Leppa

January 29, 2016
Tweet

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