Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML & CSS para pequenas gafanhotas

HTML & CSS para pequenas gafanhotas

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

Avatar for Inajara Leppa

Inajara Leppa

January 29, 2016
Tweet

More Decks by Inajara Leppa

Other Decks in Programming

Transcript

  1. 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?
  2. Títulos (Do 1 ao 7) <hn> PRINCIPAIS TAGS Parágrafos <p>

    Links <a> Imagens <img> Tabelas <table> Campos <input>
  3. 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?
  4. 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?
  5. 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
  6. 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?
  7. <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
  8. 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.
  9. Editor de texto para HTML & CSS SUBLIME TEXT Tutoriais

    gratuitos para aprender HTML & CSS CODECADEMY TIPS AND TRICKS