Básico em (X)HTML e CSS

1.707 visualizações

Publicada em

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
1.707
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
57
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Básico em (X)HTML e CSS

  1. 1. Básico em (X)HTML e CSSpor Kako Botasso
  2. 2. Apresentação• (X)HTML ▫ Estrutura básica; ▫ Tags de texto; ▫ Tags de bloco; ▫ Links; ▫ Tabelas; ▫ Formulários; ▫ Headers.
  3. 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. 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. 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. 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. 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. 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. 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. 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. 11. (X)HTML• Tabelas ▫ Usar tabelas apenas para e-mails e dados tabulares;
  12. 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. 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. 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. 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. 16. (X)HTML• Headers ▫ <h1>, normalmente é utilizado para o logotipo da empresa, apenas na página inicial <h1> <h2> <h3> <h3> <h3>
  17. 17. CSS• Estrutura básica ▫ Documentos salvos com a extensão.css; ▫ Aplica estilo as tags html; ▫ seletor{ estilo: valor; }
  18. 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. 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. 20. CSS• Semântica ▫ Escrever um CSS semântico é detalhar todos os elementos, até chegar no seu alvo.  Ex.:
  21. 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. 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. 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. 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. 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. 26. CSS• Box Model ▫ Margin  Espaçamento externo ao elemento; ▫ Padding  Espaçamento interno ao elemento;
  27. 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. 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. 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. 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. 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. 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. 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. 34. Assuntos Extras• Para onde ir depois ▫ Javascript, jQuery e AJAX ▫ Ruby ▫ Python ▫ PHP ▫ Java ▫ C#
  35. 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. 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

×