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
Básico em (X)HTML e CSS por Kako Botasso
Apresentação
• (X)HTML
▫ Estrutura básica;
▫ Tags de texto;
▫ Tags de bloco;
▫ Links;
▫ Tabelas;
▫ Formulários;
▫ Headers.
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;
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
(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:
(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
(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.
(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>
(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
(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
(X)HTML
• Tabelas
▫ Usar tabelas apenas para e-mails e dados tabulares;
(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
(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>
(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.
(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
(X)HTML
• Headers
▫ <h1>, normalmente é utilizado para o logotipo da empresa, apenas na página inicial
<h1>
<h2>
<h3>
<h3>
<h3>
CSS
• Estrutura básica
▫ Documentos salvos com a extensão.css;
▫ Aplica estilo as tags html;
▫ seletor{
estilo: valor;
}
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>
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
CSS
• Semântica
▫ Escrever um CSS semântico é detalhar todos os elementos, até chegar no seu alvo.
Ex.:
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%; }
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; }
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; }
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.
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
CSS
• Box Model
▫ Margin
Espaçamento externo ao elemento;
▫ Padding
Espaçamento interno ao elemento;
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;
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;
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
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.
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.
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
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;
Assuntos Extras
• Para onde ir depois
▫ Javascript, jQuery e AJAX
▫ Ruby
▫ Python
▫ PHP
▫ Java
▫ C#
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
FIM!
• Editores de texto
▫ VIM, Sublime, TextMate, Intype, Notepad++
• IDEs
▫ Netbeans, Eclipse, Visual Studio, Aptana, Dreamweaver, HomeSite, Expression Web
• Dúvidas?