1. Básico em (X)HTML e CSS
por Kako Botasso

2. Apresentação
• (X)HTML
▫ Estrutura básica;
▫ Tags de texto;
▫ Tags de bloco;
▫ Links;
▫ Tabelas;
▫ Formulários;
▫ Headers.

3. Apresentação
• CSS
▫ Estrutura básica;
▫ Força do CSS;
▫ Semântica;
▫ Atributos básicos;
▫ Float e display;
▫ Box Model;
▫ Position e overflow;
▫ IDs e classes;

4. Apresentação
• Assuntos Extras
▫ Cortes no PSD
▫ CSS Sprite
▫ SEO
▫ Indentação e documentação
▫ Javascript
▫ Acessibilidade
▫ Para onde ir depois
▫ Referencias bibliográficas
▫ Editores e IDEs

5. (X)HTML
• Estrutura básica
▫ Documentos salvos com a extensão.html;
▫ Página inicial chama index.html;
▫ Código mínimo para uma página:

6. (X)HTML
• Tags de texto
▫ Paragrafos: <p></p>
 Ex.: <p> Hello World! </p>
▫ Span: <span></span>
 Ex.: <p> Hello <span>World</span>! </p>
▫ Font: <font></font>
 Ex.: <font size=“1” family=“Arial”> Hello! </font>
 Usado, na maioria das vezes, para e-mails

7. (X)HTML
• Tags de texto
▫ Parágrafos são sempre os mais recomendados
▫ Span geralmente é utilizado para estilizar partes
específicas do texto.
▫ Existe também a tag ambígua <strong>, que é
usada principalmente para deixar partes do texto
em negrito.
▫ A também ambígua <em>, é usada principalmente
para partes do texto em itálico.

8. (X)HTML
• Tags de bloco
▫ Listas ordenadas: <ol></ol>
 Ex.:
▫ Listas não ordenadas: <ul></ul>
 Ex.:
▫ Div: <div></div>
 Ex.: <div> <p>Hello World! </p> </div>

9. (X)HTML
• Tags de bloco
▫ Dentro de qualquer lista, seja ela ordenada ou
não, só podem existir <li>
▫ Não existe limite para a criação de divs ou de
listas. O limite é a necessidade, pois cada uma tem
o seu uso.
▫ O principal uso de listas, são menus. Divs
normalmente são usadas para separar blocos

10. (X)HTML
• Links
▫ <a href=“”></a>
 Ex.: <a href=“http://www.google.com”>Google</a>
 href é o caminho daquele link
▫ Âncoras:
 Ex.: <a href=“#topo”> Voltar ao topo </a>
 Âncoras ligam conteúdos da mesma página
▫ Melhores práticas do href:
 Nunca deixar em branco
 Se possível, usar javascript:void(0);
 Usar # já ajuda

11. (X)HTML
• Tabelas
▫ Usar tabelas apenas para e-mails e dados
tabulares;

12. (X)HTML
• Tabelas
▫ Dentro de tabelas, só pode existir <tr>. Dentro de
<tr>, só pode existir <td>
▫ Todas as <tr> devem ter o mesmo numero de
<td>, senão terá que ser usado o atributo colspan.
 Ex.:
Neste exemplo, na
segunda <tr>, existe
apenas uma <td>. O
colspan indica que ela
ocupa o espaço de duas
<td> juntas

13. (X)HTML
• Formularios
▫ <form action=“” method=“”>
 Action é o arquivo que vai dar vida ao formulario
 Method é como este arquivo da action vai interagir.
▫ Label
 <label for=“”></label>
▫ Inputs
 <input type=“text” name=“”/>
 <input type=“radio” name=“” value=“” />
 <input type=“checkbox” name=“” value=“” />
 <input type=“image” src=“” />
 <textarea cols=“1” rows=“1” name=“”></textarea>

14. (X)HTML
• Formularios
▫ Existem dois valores para colocarmos no atributo
method. São eles get e post
▫ Get é usado para buscas pois passa valores na
URL. Post é usado para todos os outros
formularios
▫ A tag <form> aceita qualquer estrutura dentro
dela para a construção de formularios.

15. (X)HTML
• Headers
▫ <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
▫ Os headers definem a ordem de impotancia das
palavras
▫ Só pode existir um único h1 por página
▫ Tem que aparecer em ordem numerica

16. (X)HTML
• Headers
▫ <h1>, normalmente é utilizado para o logotipo da
empresa, apenas na página inicial
<h1>
<h2>
<h3>
<h3>
<h3>

17. CSS
• Estrutura básica
▫ Documentos salvos com a extensão.css;
▫ Aplica estilo as tags html;
▫ seletor{
estilo: valor;
}

18. CSS
• Chamando na página
▫ Chamada externa, no head
 <link rel=“stylesheet” href=“caminho” media=“” />
▫ Chamada na página
 <style type=“text/css”></style>
▫ Chamada no elemento
 <p style=“”> Hello World </p>

19. CSS
• Força do CSS
▫ A chamada externa é a mais fraca das três. A mais
forte é a chamada dentro do próprio elemento.
Regra:
Chamada no elemento > Chamada na página
Chamada na página > Chamada externa
▫ Isso significa que o que for escrito em um arquivo
externo, pode facilmente ser sobrescrito pelas
chamadas internas.

20. CSS
• Semântica
▫ Escrever um CSS semântico é detalhar todos os
elementos, até chegar no seu alvo.
 Ex.:

21. CSS
• Atributos básicos
▫ color – cor do texto
 Ex.: p{ color:#f00; } ou p{ color:red }
▫ text-align – alinhamento do texto
 Ex.: p{ text-align:center; } ( Pode ser center, left, right )
▫ width – largura
 Ex.: p{ width:50px; } ou p{ width:100%; }
▫ height - altura
 Ex.: p{ height:50px; } ou p{ height:50%; }

22. CSS
• Atributos básicos
▫ border- borda
 Ex.: p{ border:1px solid #f00; } (largura, tipo, cor)
▫ font-family – tipo da fonte
 Ex.: p{ font-family: Arial }
▫ font-weight – grossura da fonte
 Ex.: p{ font-weight:bold; } (bold = negrito)
▫ font-size – tamanho do texto
 Ex.: p{ font-size:12px; }

23. CSS
• Atributos básicos
▫ background
 Ex.: div{ background-color:#f00; }
 Ex.: div{ background-image: url(“caminho”); }
 Ex.: div{ background-repeat: no-repeat; } (repeat-x
ou repeat-y)
 Ex.: div{ background-position: 10px 10px } (x e y)
 OU
 Ex.: div{ background: #f00 url(“”) no-repeat 0px
0px; }

24. CSS
• Float e display
▫ Float é um dos atributos mais importantes
 Ex.: p{ float:left; } (left, right, none)
▫ Sua importância é dada pelo fato de ele diminuir a
diferença entre os navegadores.
▫ Ele tem duas funções. Entender a largura e altura
do elemento e deixar o elemento flutuando na
página.

25. CSS
• Float e display
▫ display - exibição
 Ex.: p{ display:none; } (block, none, inline, inline-block)
▫ display:block; é quase, uma alternativa ao float. A
principal diferença entre os dois, é o display não
deixa o elemento flutuando
▫ display:none; é usado para esconder elementos

26. CSS
• Box Model
▫ Margin
 Espaçamento externo ao elemento;
▫ Padding
 Espaçamento interno ao elemento;

27. CSS
• Box Model
▫ Os dois tem maneiras iguais de serem escritos
 padding: 10px; ( 4 lados ao mesmo tempo )
 padding: 10px 10px; ( top/bottom, left/right )
 padding: 10px 10px 10px; ( top, left/right, bottom )
 padding: 10px 10px 10px 10px; ( 4 lados separados )
▫ Por ser interno ao elemento, o padding influencia no
background e nas distancias das bordas
▫ Margin gera erros no IE6 e IE7. Para corrigir, coloque
junto dele um display:inline;

28. CSS
• Position e overflow
▫ Position
 Existem 3 tipos. Relativa, absoluta e fixa;
 As posições absoluta e fixa, devem ter 2 bases
declaradas. Topo/rodapé e esquerda/direita;
 Position, só deve ser usado quando queremos colocar
um elemento sobre o outro.
 Toda posição absoluta deve ter um pai relativo;

29. CSS
• Position e overflow
▫ Overflow
 Responsável por gerar rolagem dentro da pagina
 Pode ser de dois tipos, escondido ou automatico
 Ele escondido, é muito usado para efeitos

30. CSS
• IDs e classes
▫ Ids
 É usado para identificar um ÚNICO elemento no html
 Ex.: <p id=“textoVermelho”> Hello! </p>
 Para pegar esse elemento no CSS, usamos o #
 Ex.: #textoVermelho{ color:#f00; }
 Não pode haver mais de 1 id com o mesmo nome na
mesma página.

31. CSS
• IDs e classes
▫ Classes
 É usado para identificar elementos no html
 Ex.: <p class=“textoVermelho”> Hello! </p>
 Para pegar esse elemento no CSS, usamos o .
 Ex.: .textoVermelho{ color:#f00; }
 Classes podem aparecer quantas vezes forem
necessárias, em qualquer tipo de elemento.

32. Assuntos Extras
• Cortes no PSD
• CSS Sprite
▫ Técnica de cortar, em apenas uma imagem, várias
imagens diferentes, formando um “efeito” e, por CSS,
realizar este efeito.
• SEO
▫ Search Engine Optimization (SEO) é um conjunto de
técnicas, métodos e/ou estudos que visam melhorar o
posicionamento de suas páginas no mecanismo de
buscaIndentação e documentação

33. Assuntos Extras
• Indentação e documentação
▫ Indente seu código SEMPRE. Comente SEMPRE de
maneira lógica, e de preferência, por blocos;
• Javascript
▫ Presente em boa parte dos sites. Utilizado para fazer
animações, validações, galerias e etc.
▫ Colocado, preferencialmente, no final do código;
• Acessibilidade
▫ Escrever o HTML de maneira lógica, pensando
sempre na sequencia de leitura;

34. Assuntos Extras
• Para onde ir depois
▫ Javascript, jQuery e AJAX
▫ Ruby
▫ Python
▫ PHP
▫ Java
▫ C#

35. Assuntos Extras
• Referencias bibliográficas
▫ Construindo Sites com CSS e (X)HTML –> Maurício
Samy Silva
▫ Criando Sites com HTML –> Maurício Samy Silva
▫ Criando Páginas Web com Css – Soluções Avançadas
para Padrões Web –> Simon Collison, Cameron Moll
e Andy Budd

36. FIM!
• Editores de texto
▫ VIM, Sublime, TextMate, Intype, Notepad++
• IDEs
▫ Netbeans, Eclipse, Visual Studio, Aptana,
Dreamweaver, HomeSite, Expression Web
• Dúvidas?
▫ html@kakobotasso.com.br