Guia Desenvolvedor Web

Entendendo o HTML

Sintaxe de Linguagem

Tag

- Toda tag é iniciada por um sinal de menor (<) e encerrada por um sinal de maior (>).
Tag de fechamento

- Também existe a tag de fechamento, que contém uma barra (/).
Tag sem fechamento

- Em alguns casos podem existir tags que não necessitam de fechamento (), mas fecham em si mesma.
Atributo

- Algumas tags precisam de mais especificações para chegarmos ao objetivo desejado.
<p>Texto em parágrafo</p>
<img src="imagem.png" alt="imagem">
Vamos conhecer algumas regras para o uso correto do HTML:
As tags devem ser escritas em letras minúsculas;

As tags devem ser aninhadas;

A primeira tag aberta deve ser a última a ser fechada, e a última tag aberta deve ser a primeira a ser fechada;

Sempre fechar as tags;

Todo o atributo deve possuir o sinal de igual, e o valor dele colocado entre aspas;

Há raras exceções em que o atributo não tem valor, por não haver necessidade de especificação, esses chamados de atributos booleanos;
<input type="checkbox" name="cursos" checked>

Estrutura Básica

DTD (Document Type Definition)

- É a definição do tipo de documento, que diz ao navegador o tipo de site que estamos criando.
<!doctype html>
Tag HTML

- Tag que dá início ao projeto. Ela é fechada ao final do projeto com </html>.
<html lang="pt-br">
Tag Head

- Define o cabeçalho da página.
Tag Title

- O title ou título do site é o nome que aparecerá na barra de título do navegador.
<title>Guia Desenvolvedor Web - CodeBlue</html>
Tag Body

- O corpo do site, onde serão inseridas as informações em si. Ao final, a estrutura básica para iniciarmos qualquer projeto ficará assim:
<!doctype html>
<html lang="pt-br">
<head>
<title>Guia Desenvolvedor Web - CodeBlue</html>
</head>
<body>

</body>
</html>
Quer saber mais sobre as tag's no HTML?

Acesse o site MDN Web Docs

Criação de textos para o seu site

Sintaxe de Linguagem

Strong

- Texto em Negrito <strong></strong>.
Em

- Texto em Itálico <em></em>.
P

- Novo parágrafo <p></p>.
Br

- Quebra de linha <br>.
Span

- Estilização linear <span></span>.
Hr

- Linha horizonta <hr>.
<body>
<p>
<strong>Web standarts</strong>, são um conjunto de normas, diretizes, recomendações, notas, artigos, tutorias e afins de caráter técnico, produzidos pelo <em>W3C</em> e destinados a orientar fabricantes, desenvolvedores e projetista
Seu uso possibilita a criação de uma <em>WEB</em> acessível a todos.
</p>
</body>

Cabeçalhos

Headings

- Tag's de cabeçalho <h1></h1>, <h2></h2>, <h3></h3>, ...
<body>
<h1><img src="logo.png" alt="Logo"></h1>
<head>
<title>Guia Desenvolvedor Web - CodeBlue</html>
</head>
<body>

</body>
</html>

Listas

Listas não ordenadas

- Lista não ordenada, definida pela tag <ul></ul>
Listas ordenadas

- Lista ordenadas, definida pela tag <ol></ol>
- Cada item da lista será definido pela tag <li></li>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>
</body>
- Em alguns momentos uma lista pode possuir sublistasg
<body>
<ul>
<li>Front-End</li>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Back-End</li>
<ul>
<li>PHP</li>
<li>.NET</li>
<li>MySQL</li>
</ul>
</li>
</ul>
</body>
Quer saber mais sobre textos no HTML?

Acesse o site MDN Web Docs

Recursos visuais do site

Imagens

Img

- Tag para inserir imagens <img>.
src

- Determina o caminho para a imagem que gostaríamos de inserir, seguido do nome e extensão da mesma.
Alt

- Texto alternativo para que deficientes visuais possam saber qual objeto está inserido.
Width

- Largura da imagem. Valor em pixels.
Heigth

- Altura da imagem. Valor em pixels.
Hr

- Linha horizonta <hr>.
<body>
<img src="../imagens/logo.png" alt="Log da CodeBlue" width="300px" heigth="150px">
</body>

Tag figure

Figure

- Ela será utilizada para envolver as imagens do seu projeto em um container <figure></figure>.
Figcaption

- Inserir uma legenda para a imagem a ser exibida na página <figcaption></figcaption>.
<body>
<figure>
<img src="../imagens/logo.png" alt="Log da CodeBlue" width="300px" heigth="150px">
<figcaption>Legenda da foto</figcaption>
</figure>
</body>

Boas práticas para imagens

Picture

- Esta tag permite definirmos outras imagens para serem carregadas em dispositivos diferentes, para não acontecer de uma imagem pesada <picture></picture>.
Source

- Definirmos em qual dispositivo serão carregadas através do atributo media. <source>.
<body>
<picture>
<source media="(min-width: 650px)" srcset="../arquivos/flower.png">
<source media="(min-width: 465px)" srcset="../arquivos/flower.png">
</picture>
</body>
Loading

- Carregamentos das imagens apenas quando a imagem for exibida na tela usamos o valor lazy. <source>.
<body>
<img src="../imagens/logo.png" alt="Log da CodeBlue" loading="lazy">
</body>

Favicon

Link

- São aqueles pequenos ícones que ficam ao lado do título na aba da página.
<link rel="icon" href="../imagens/favicon.png" type="img/x-icon">
Quer saber mais sobre imagens no HTML?

Acesse o site MDN Web Docs

Criando tabelas no seu site

Tabelas

Table

- Tag para criação de tabelas é a <table></table>.
Thead

- Cabeçalho de uma tabela <thead></thead>.
Tbody

- Estrutura todo conteúdo da tabela <tbody></tbody>.
Tfoot

- Estrura para o radapé da tabela <tfoot></tfoot>.
Th

- Cabeçalho contido dentro da tabela <th></th>.
Tr

- Criação de linhas na tabela <tr></tr>.
Td

- Criação de colunas na tabela <td></td>.
<body>
<table>
<thead>
<tr>
<th> scope="col">Carros</th>
<th> scope="col">Valores</th>
<th> scope="col">Ano</th>
</tr>
</thead>
<tbody>
<tr>
<td> scope="col">Delorean</td>
<td> scope="col">R$ 580.000,00</td>
<td> scope="col">1975</td>
</tr>
<tr>
<td> scope="col">Karmann Ghia</td>
<td> scope="col">R$ 5.000,00</td>
<td> scope="col">1955</td>
</tr>
<tr>
<td> scope="col">Golf GTI</td>
<td> scope="col">R$ 299.000,00</td>
<td> scope="col">2021</td>
</tr>
</tbody>
</table>
</body>
Quer saber mais sobre tabelas no HTML?

Acesse o site MDN Web Docs

Aplicando iframes

Iframes

Iframe

- Inserir um elemento externo em uma página <iframe></iframe>.
<body>
<iframe width="560" heigth="315" src="https://www.youtbe.com/embed/DJFLASJS12"
title="Youtube" frameborder="0" allow="accelerometer; auotplay</iframe>
</body>
Quer saber mais sobre iframes no HTML?

Acesse o site MDN Web Docs

Criando link's para o site

Link's

Href

- Adicionando um link a sua página <a href></a>.
target

- Abrir o link em outra janela do navegador <_blank>.
<a href="https://www.codeblue.com.br target="_blank">Clique Aqui"</a>
Âncora

- Muito usados por landing-pages, esse link leva diretamente até o conteúdo desejado <id>.
<body>
<a href="#sobre</a>
<div>
<a id="sobre"</a>
</div>
<body>
Quer saber mais sobre links no HTML?

Acesse o site MDN Web Docs

Metadados em HTML

Meta-tags

Meta

- As Meta Tags auxiliam os mecanismos de busca (search engines) a encontrarem o seu site na web.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<meta name="author" content="Chris Mills>
<name="description" content="A Área de Aprendizagem>
<title><Guia Desenvolvedor Web</title>
<name="robots" content="noindex,nofollow">
</head>
Quer saber mais sobre meta-tags no HTML?

Acesse o site MDN Web Docs

Estrutura de layout

Layout por DIV

Div

- Div é uma tag que cria uma seção na página <div></div>.
Div wrap

- Div wrap contém todos os outros elementos dentro dela.
Div header

- Espaço destinado ao topo da página.
Div menu

- Barra de navegação do site.
Div content

- Conteúdo da página.
Div footer

- Rodapé do site.
Quer saber mais sobre layout em div no HTML?

Acesse o site MDN Web Docs

HTML 5

Estrutura de layout pelas novas tags HTML 5

Header

- Define uma seção para o topo da página <header></header>.
Nav

- Barra de navegação <nav></nav>.
Main

- Seção para todo o conteúdo <main></main>.
Section

- Bloco de contúdo <section></section>.
Article

- Área para inserção de uma subregião de conteúdo <article></article>.
Aside

- Segundo menu de categorias <side></side>.
Footer

- Bloco para inserção do rodapé da página <footer></footer>.
Quer saber mais sobre novas tags em HTML5?

Acesse o site MDN Web Docs

Trabalhando com Formulários

Formulários

Form

- Criação de formulários <form></form>.
Action

- Atributo será o arquivo executado quando o usuário clicar no botão de envio (submit).
Enctype

- Define o tipos.
Method

- Método de envio das informações.
<form action="form.php" method="post">
<p>
<label for="nome>Nome"</label>
<input type="text" name="nome" id="nome>
</p>
</form>
Input

- A tag que irá inserir grande parte dos objetos de formulário <input>.
Type

- Cria um campo de texto padrão para valores genéricos.
Name

- Define o nome do campo para o que Back-end possa reconhecê-lo.
Maxlength

- Define o número maximo de caracteres.
Checkbox

- Criação de caixas onde é possível escolher mais de uma opção.
Value

- Indica o valor que será processado.
Checked

- Serve para que se tenha um estado inicial como marcado.
Radio

- Botão onde apenas um opção pode ser escolhida.
Select

- Representa um controle que apresenta um menu de opções <select></select>.
Option

- Opções de listas <option></option>.
Selected

- Atributo boleano é usado para iniciar no estado selecionado.
Quer saber mais sobre formários no HTML?

Acesse o site MDN Web Docs

Introdução ao CSS

Linkando

link

- Cria uma relação entre um documento HTML e um arquivo de estilo CSS.
rel

- Define o tipo de arquivo (stylesheet para CSS). É possível linkar outros também como favicons.
href

- Define o caminho do arquivo.
<link rel="stylesheet" href="/style.css">
Quer saber mais sobre CSS?

Acesse o site MDN Web Docs

Sintaxe CSS

Anatomia CSS

Seletor

- Seleciona o elemento(s) que deve ser estilizado.
Chaves

- Engloba as propriedades { } que serão aplicadas ao seletor.
Propriedade

- Define o que será alterador.
Valor

- Define o valor do novo estilo.
Quer saber mais sobre estrturas do CSS?

Acesse o site MDN Web Docs

Seletores no CSS

Seletores

Seletor universal

- Elemento chave que atingirá todas as tags do documento *.
*{
margin: 0;
padding: 0;
border: 0;
}
Seletor de elementos

- Atacar uma tag específica do HTML.
p{
color: blue;
}
Seletor de elementos

- Atacar uma tag específica do HTML.
Agrupamentos

- A vírgula permite selecionarmos múltiplos elementos para a aplicação de um mesmo estilo.
p,h1,h2{
font-family: 'Rubik', sans-serif;
}
Class

- Atributo HTML que adiciona um identificador reutilizável na tag.
.galeria{
border-bottom: 1px solid white;
}
Id

- Atributo HTML que adiciona um identificador único na tag.
#topo{
padding: 60px;
}
Descendente

- Atacar uma tag está inserida dentro de outra.
.box li a{
color: orange;
}

Pseudo-classes

hover

- Momento em que o usuário posiciona o mouse sobre o elemento.
a:hover{
color: red;
text-decoration: underline;
}
focus

- Momento em que um elemento, como um campo de formulário, entra em foco.
input:focus{
border: 1px solid gray;
}
last-child

- Seleciona o último elemento de uma área, como o último item de uma lista.
.box li:last-child{
border: 1px solid black;
}
first-child

- Seleciona o primeiro elemento de uma área, como o último item de uma lista.
.box li:first-child{
border: 1px solid green;
}
nth-child(n)

- Seleciona um elemento descendente específico.
.box li:nth-child(3){
border: 1px solid pink;
}

Pseudo-elementos

first-letter

- Para a estilização da primeira letra de um elemento HTML.
p::first-letter{
font-size: 18px;
}
first-line

- Para a estilização da primeira linha de um texto.
p::first-line{
content: "texto de exemplo";
}
after

- Permite a inserção de conteúdo após um elemento.
p::after{
content: "texto de exemplo";
display: block;
font-size: 1rem;
}
before

- Permite a inserção de conteúdo antes de um elemento.
p::before{
content: "texto de exemplo";
display: block;
font-size: 1rem;
}

Seletores avançados

Seletor de atributo

- O seletor de atributos combina elementos baseado no valor de um atributo dado.
a[title]{
color: "silver";
}
Elemento filho

- Caso não queiramos que os elementos filhos dos filhos recebam um valor, podemos definir um sinal de maior que (>).
nav > ul > li{
color: "blue-marine";
}
Elemento irmão

- Também podemos apontar para elementos irmãos, ou seja, quando as tags possuem o mesmo pai direto, podemos definir um sinal de maior que (>).
p ~ p{
font-size: "12px";
}
Quer saber mais sobre seletores?

Acesse o site MDN Web Docs

Propriedades no CSS

Unidades de medida

px

- É considerada relativa pois depende do pixel físico do dispositivo, mas se comporta como absoluta.
%

- Depende da referência do elemento pai.
em

- Depende da referência do elemento pai.
rem

- Depende da referência da tag bodys.

Cores

Nome em inglês

- Definir a cor em inglês, mas é pouco utilizado.
Hexadecimal

- Ele pode ser escrito só com 3 letras e números ou com 6
rgb

- O código rgb é semelhante ao hexadecimal mas escrito de outra forma.
rgba

- Utilizado para colocar transparência na cor.

Formatação de textos

font-family

- Alterar o tipo da letra.
font-size

- Tamanho da letra.
font-style

- Define valores como Itálico.
font-weight

- Define valores em Negrito.
color

- Alterar a cor da letra.
text-aling

- Alinhamento de texto.
text-decoration

- Sublinhado.
text-transform

- Altera a caixa do texto.
line-height

- Altera a altura da linha.
h1{
font-family: 'comics-sans';
font-size: 14px;
color: blue;
text-align: center;
font-weight: normal;
font-style: italic;
text-decoration: underline;
}

Listas no CSS

list-style-type

- Define o tipo de marcador.
list-style-position

- Define a posição do marcador.
list-style-image

- Define uma imagem como marcador.
li{
font-style: inside square;
}
Quer saber mais sobre propriedades no CSS?

Acesse o site MDN Web Docs

Propriedades para o Box-model

Box-model

content

- Define a largura inicial da caixa conteúdo.
padding

- Separa o conteúdo das bordas da caixa. É a margem interna preenchimento.
border

- Define bordas para a caixa borda.
margin

- Define a distância entre uma caixa e outra margem.
width

- A largura total da caixa, por padrão é o somatório do conteúdo + padding (left/right) + border (left/right) largura.
heigth

- A largura total da caixa, por padrão é o somatório do conteúdo + padding (top/bottom) + border (top/bottom) altura.
overflow

- Atribuir um comportamento para elementos além dos limites do box auto hidden scroll.
Quer saber mais sobre Box-model?

Acesse o site MDN Web Docs

Propriedades Display

Display

inline

- Muda a exibição do elemento para em linha.
block

- Muda a exibição do elemento para em bloco.
none

- Não faz alteração na exibição do elemento ou retorna para o padrão.
table

- Muda a exibição do elemento para dados tabulares.
inline-block

- Muda a exibição do elemento para um elemento que se comporta ao mesmo tempo como linha e como bloco.
a{
display: block;
}

Width & Height

width

- Valor numérico para largura.
max-width

- Valor numérico para largura máxima que o elemento poderá ter.
min-width

- Valor numérico para largura mínima que o elemento poderá ter.
height

- Valor numérico para altura.
max-height

- Valor numérico para altura máxima que o elemento poderá ter.
min-height

- Valor numérico para altura mínima que o elemento poderá ter.
div{
width: 200px;
height: 300px;
}

Box-sizing

box-sizing

- Propriedade para não alterar o tamanho da box (padding e border) border-box.
.box{
width: 200px;
height: 300px;
border: 1px solid blue;
box-sizing: border-box;
}
Quer saber mais sobre Display?

Acesse o site MDN Web Docs

Aplicando background

Background

background-color

- Cor de fundo.
background-image

- Imagem de fundo.
background-repeat

- Tipo de repetição da imagem de fundo.
background-position

- Posição da imagem de fundo.
background-attachment

- Rolagem do fundo.
body{
background-color: blue;
background-image: url(../imagens/fundo.png);
background-repeat: no-repeat;
background-position: 400px 100px;
background-attachment: fixed;
}
Quer saber mais sobre background?

Acesse o site MDN Web Docs

Posicionamento

Position

position

- Define a referência para o posicionamento absolute relative fixed sticky.
z-index

- Define a ordem do posicionamento das div's.
.box{
postion: relative;
top: -20px;
z-index: 3;
}
float

- Flutua o elemento na página right left none.
clear

- Faz com que o elemento se comporte respeitando elementos flutuados right left both.
.box{
width: 35%;
height: 450px;
float: left;
}
Quer saber mais sobre position?

Acesse o site MDN Web Docs

Display Flex

Flexbox

display:flex

- Os filhos passam a ter um tamanho flexível e ficam um ao lado do outro.
flex-wrap

- Caso não caiba todos os elementos em uma mesma linha, quebre para a próxima ou não. wrap no-wrap
align-itens

- Alinha os elementos verticalmente flex-start flex-end center space-betweenspace-around space-evenly
justify-content

- Alinha os elementos horizalmente flex-start flex-end center space-betweenspace-around space-evenly
order

- Altera a posição do elemento.
flex-grow

- Aumenta o tamanho do elemento.
flex-shrink

- Diminui o tamanho do elemento.
Bora aprender mais?

- Uma lista completa de todas as Possibilidades acessando o site CSS-TRICKS www.css-tricks.com.

- Você poderá ver esses métodos de estruturação de layout de forma aplicada e explicada no site www.pt-br.learnlayout.com.
Quer saber mais sobre flexbox?

Acesse o site MDN Web Docs

Layout Responsivo

Responsivo

@media

- A @media gera um bloco de código que só será ativado caso a condição entre parênteses seja verdadeira.
@media (max-width:500)

- Aplica as condições abaixo de 500px
{
@media screen and (max-width:500);
body:{
background: blue;
}
}
Quer saber mais sobre lasyouts responsivos?

Acesse o site MDN Web Docs

Introdução ao JavaScript

Linkando

script

- para vincular um JavaScript interno a HTML.
src

- Define o caminho do arquivo.
<script src="js/scripts.js">
Quer saber mais sobre JavaScript?

Acesse o site MDN Web Docs

Sintaxe JS

Sintaxe

var x = 5;
var y = 6;
var z = x + y;

Tipos de dados

Boolean

- true e false.
null

- Uma palavra-chave que indica valor nulo. Devido JavaScript ser case-sensitive, null não é o mesmo que Null, NULL, ou ainda outra variação.
undefined

- Uma propriedade superior cujo valor é indefinido.
Number

- 42 ou 3.14159.
String

- “Olá Mundo!”.
Symbol

- (novo em ECMAScript 6). Um tipo de dado cuja as instâncias são únicas e imutáveis.

Variáveis

var x = 5;
var y = 6;
var z = x + y;

Operadores

Adição

- Usado para somar dois números ou juntar duas strings (concatenação) +.
Subtração, multiplicação, divisão

- Fazem exatamente o que você espera que eles façam na matemática básica -, *, /.
Atribuição

- Define que algo vale determinado valor =.
Igualdade

- Faz um teste para ver se dois valores são iguais, retornando um resultado true/false (booleano) ===.
Negação, não igual

- Quando usado junto com o operador de igualdade, o operador de negação testa se os valores são diferentes !, !==.
Incremento

- Atribui valores até determinado ponto definido ++.
Decremento

- Remove valores até determinado ponto definido --.
Ou

- Define que um ou outro valor podem ser verdadeiros ou falsos ||.
E

- Define que um e outro valor podem ser verdadeiros ou falsos &&.

Condições

if (condição) {
instrução1
} else {
instrução2
}

Funções

<body>
<p id="demo"></p>
<script>
function myFunction(p1, p2) {
return p1 * p2;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
Quer saber mais sobre sintaxe JavaScript?

Acesse o site MDN Web Docs

Introdução jQuery

Sintaxe

Sintaxe JavaScript

- document.getElementsByTagName("p").
Sintaxe jQuery

- $("p").
Sintaxe JavaScript

- ddocument.getElementById(“um”).setAttribute(“class”,“co r”).
Sintaxe jQuery

- $("#um").attr("class", "cor").
Quer saber mais sobre jQuery?

Acesse o site MDN Web Docs

Likando seu jQuery

Likando

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="js/script.js"><

Construindo Funções

fuction

Começando

- é importante começar sempre os scripts com “$(document).ready(function(){});
<script>
$(document).ready(function(){
$("p").click(function(){
$ (this).hide();
});
});
</script">

Esconder e Exibir Elementos

Hide

“$("#hide")”

- Que ao ser clicado “.click(function()” deve executar a ocultação de todo elemento.
“$("#show")”

- Que quando clicado, fará com que o elemento apareça.

Plugins jQuery

Lightbox

Lightbox

- LIGHTBOX by Lokesh Dhakar

Documentação jQuery

jQuery

site jQuery

- jQuery write less, do more.

Bootstrap

Introdução

O que é Bootstrap

- Framework mais conhecido do mundo para criar sites responsivos e mobile, comece com o BootstrapCDN e nosso template inicial.

Containers Bootstrap

Containers

container

- Container são para centralizar o conteúdo no centro de um site.
container-fluid

- container-fluid ocupa 100% da página.

Grid system

Grid

grid

- Criar layouts de todas as formas e tamanhos, graças ao sistema de doze colunas, cinco breakpoints responsivos.
row

- Linhas para conter colunas.
col

- Sistema de colunas, sempre dentro de uma row

Documentação Bootstrap

Bootstrap

Site Bootstrap

- Bootstrap. Build fast! realy FAST!

Github

Configurações Gerais

Setar usuário
git config --global user.name "Tom Delonge"
Setar email
git config --global user.email [email protected]
Listar configurações
git config --list

Comandos + usados no Github

Repositório Local

Criar novo repositório
git init
Verificar estado dos arquivos/diretórios
git status
Adicionar um arquivo em específico
it add meu_arquivo.html
Adicionar todos os arquivos/diretórios
git add .
Comitar um arquivo
git commit -m "minha mensagem de commit"
Enviar arquivos
git push
Atualizar reositório atual
git pull

Outros Comandos

outros comandos mais usados no GitHub

Vincular repositório local com um repositório remoto
git remote add origin [email protected]:tomdelonge/curso-git.git
Listar branches
git branch
Clonar um repositório remoto já existente
git clone [email protected]:tomdelonge/curso-git.git

Documentação GitHub

GitHub

Site GitHub

- GitHub - Where the world builds software.

Entendendo o HTML

Sintaxe de Linguagem

Tag

Tag de fechamento

Tag sem fechamento

Atributo

Estrutura Básica

DTD (Document Type Definition)

Tag HTML

Tag Head

Tag Title

Tag Body

Criação de textos para o seu site

Sintaxe de Linguagem

Strong

Em

P

Br

Span

Hr

Cabeçalhos

Headings

Listas

Listas não ordenadas

Listas ordenadas

Recursos visuais do site

Imagens

Img

src

Alt

Width

Heigth

Hr

Tag figure

Figure

Figcaption

Boas práticas para imagens

Picture

Source

Loading

Favicon

Link

Criando tabelas no seu site

Tabelas

Table

Thead

Tbody

Tfoot

Th

Tr

Td

Aplicando iframes

Iframes

Iframe

Criando link's para o site

Link's

Href

target

Âncora

Metadados em HTML

Meta-tags

Meta

Estrutura de layout

Layout por DIV

Div

Div wrap

Div header

Div menu

Div content

Div footer

HTML 5

Estrutura de layout pelas novas tags HTML 5

Header

Nav

Main

Section

Article

Aside

Footer

Trabalhando com Formulários