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?

▫ html@kakobotasso.com.br