Básico em (X)HTML e CSS
-
Upload
kako-botasso -
Category
Technology
-
view
1.250 -
download
7
Transcript of Básico em (X)HTML e CSS
![Page 1: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/1.jpg)
Básico em (X)HTML e CSS por Kako Botasso
![Page 2: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/2.jpg)
Apresentação
• (X)HTML
▫ Estrutura básica;
▫ Tags de texto;
▫ Tags de bloco;
▫ Links;
▫ Tabelas;
▫ Formulários;
▫ Headers.
![Page 3: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/3.jpg)
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;
![Page 4: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/4.jpg)
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
![Page 5: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/5.jpg)
(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:
![Page 6: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/6.jpg)
(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
![Page 7: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/7.jpg)
(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.
![Page 8: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/8.jpg)
(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>
![Page 9: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/9.jpg)
(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
![Page 10: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/10.jpg)
(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
![Page 11: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/11.jpg)
(X)HTML
• Tabelas
▫ Usar tabelas apenas para e-mails e dados tabulares;
![Page 12: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/12.jpg)
(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
![Page 13: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/13.jpg)
(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>
![Page 14: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/14.jpg)
(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.
![Page 15: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/15.jpg)
(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
![Page 16: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/16.jpg)
(X)HTML
• Headers
▫ <h1>, normalmente é utilizado para o logotipo da empresa, apenas na página inicial
<h1>
<h2>
<h3>
<h3>
<h3>
![Page 17: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/17.jpg)
CSS
• Estrutura básica
▫ Documentos salvos com a extensão.css;
▫ Aplica estilo as tags html;
▫ seletor{
estilo: valor;
}
![Page 18: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/18.jpg)
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>
![Page 19: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/19.jpg)
CSS
• Força do CSS
▫ A chamada externa é a mais fraca das três. A mais forte é a chamada dentro do próprio elemento.
▫ Isso significa que o que for escrito em um arquivo externo, pode facilmente ser sobrescrito pelas chamadas internas.
Regra: Chamada no elemento > Chamada na página Chamada na página > Chamada externa
![Page 20: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/20.jpg)
CSS
• Semântica
▫ Escrever um CSS semântico é detalhar todos os elementos, até chegar no seu alvo.
Ex.:
![Page 21: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/21.jpg)
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%; }
![Page 22: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/22.jpg)
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; }
![Page 23: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/23.jpg)
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; }
![Page 24: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/24.jpg)
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.
![Page 25: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/25.jpg)
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
![Page 26: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/26.jpg)
CSS
• Box Model
▫ Margin
Espaçamento externo ao elemento;
▫ Padding
Espaçamento interno ao elemento;
![Page 27: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/27.jpg)
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;
![Page 28: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/28.jpg)
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;
![Page 29: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/29.jpg)
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
![Page 30: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/30.jpg)
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.
![Page 31: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/31.jpg)
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.
![Page 32: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/32.jpg)
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
![Page 33: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/33.jpg)
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;
![Page 34: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/34.jpg)
Assuntos Extras
• Para onde ir depois
▫ Javascript, jQuery e AJAX
▫ Ruby
▫ Python
▫ PHP
▫ Java
▫ C#
![Page 35: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/35.jpg)
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
![Page 36: Básico em (X)HTML e CSS](https://reader034.fdocument.pub/reader034/viewer/2022042607/557605f9d8b42a81158b524b/html5/thumbnails/36.jpg)
FIM!
• Editores de texto
▫ VIM, Sublime, TextMate, Intype, Notepad++
• IDEs
▫ Netbeans, Eclipse, Visual Studio, Aptana, Dreamweaver, HomeSite, Expression Web
• Dúvidas?