1. Curso Online ao Vivo - Primeiros
Passos na Web com HTML e CSS Aprenda Boas Práticas
PROFº GUSTAVO ROMA
2. Estrutura básica do HTML
O que é HTML?
HTML (abreviação para a expressão inglesa
HyperText Markup Language, que significa
Linguagem de Marcação de Hipertexto) é uma
linguagem de marcação utilizada para produzir
páginas na Web. Documentos HTML podem ser
interpretados por navegadores. Exemplo: Mozilla
Firefox, Google Chrome etc.
PROFº GUSTAVO ROMA
3. Estrutura básica do HTML
VERSÕES
A primeira linha do documento HTML, deve ser a declaração do
Doctype. Ele é responsável por informar ao navegador, qual a versão
do HTML utilizado.
Apesar da versão mais recente ser o HTML5, a mais utilizada,
continua sendo a HTML4.0.1, pois os navegadores antigos (ex:
internet explorer 8 ou inferior), não renderizam as novas tags do
HTML5.
Exemplo do doctype HTML4.0.1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Exemplo do doctype HTML5
<!DOCTYPE html>
PROFº GUSTAVO ROMA
4. Estrutura básica do HTML
EDITOR
Editor HTML ou editor Web é um software para a criação de páginas web
utilizando a linguagem de marcação HTML. Embora a edição em linguagem
HTML de uma página web possa ser feita com qualquer editor de texto, editores
HTML específicos oferecem vários recursos extras para auxiliar na criação de
páginas, além disso, acrescentam outras funcionalidades, e muitos dão a opção
de visualização do projeto, tanto em linhas de código HTML quanto o resultado
delas no design da página. Editores são ótimas ferramentas para
desenvolvedores e demais profissionais de sistemas para internet, visto que
lhes poupam trabalhos pequenos, mas que consomem muito tempo, e assim
permitem que o foco seja desviado para detalhes mais importantes.
Editor aconselhado: Sublime Text
http://www.sublimetext.com
PROFº GUSTAVO ROMA
5. Estrutura básica do HTML
VERSÕES
A primeira linha do documento HTML, deve ser a declaração do
Doctype. Ele é responsável por informar ao navegador, qual a versão
do HTML utilizado.
Apesar da versão mais recente ser o HTML5, a mais utilizada,
continua sendo a HTML4.0.1, pois os navegadores antigos (ex:
internet explorer 8 ou inferior), não renderizam as novas tags do
HTML5.
Exemplo do doctype HTML4.0.1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Exemplo do doctype HTML5
<!DOCTYPE html>
PROFº GUSTAVO ROMA
6. Estrutura básica do HTML
TAGS
Tags são rótulos usados para informar ao navegador como deve ser
apresentado o website.
Todas as tags têm o mesmo formato: começam com um sinal de
menor "<" e acabam com um sinal de maior ">".
Exemplo:
<title>Este texto é o título da página</title>
<strong>Este texto deve ser em negrito.</strong>
<em>Este texto deve ser em itálico.</em>
<p>Este texto é um parágrafo.</p>
<h1>Este é um título</h1>
<h2>Este é um sub título</h2>
PROFº GUSTAVO ROMA
7. Estrutura básica do HTML
Exemplo básico HTML5
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Título da Página</title>
</head>
<body>
<h1>Este é um título</h1>
<h2>Este é um sub título</h2>
<p>Aqui o texto de um parágrafo</p>
</body>
</html>
PROFº GUSTAVO ROMA
8. Estrutura básica do HTML
Exemplo básico HTML4.0.1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>Título da Página</title>
</head>
<body>
<h1>Este é um título</h1>
<h2>Este é um sub título</h2>
<p>Aqui o texto de um parágrafo</p>
</body>
</html>
PROFº GUSTAVO ROMA
9. Estrutura básica do HTML
Metatag Charset
No nosso exemplo há uma metatag responsável por chavear qual
tabela de caractéres a página está utilizando.
No HTML5:
<meta charset="utf-8">
Nas versões anteriores ao HTML5, essa tag era escrita da forma
abaixo:
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
Essa forma antiga será também suportada no HTML5. Contudo, é
melhor que você utilize a nova forma.
PROFº GUSTAVO ROMA
10. Estrutura básica do HTML
Inserindo uma imagem
A tag utilizada para se inserir imagens é a tag <img />, que pode ser
aberta e fechada no mesmo bloco da tag. Também precisamos
informar o endereço da imagem ao navegador então para isso
utilizaremos o comando src.
Exemplo:
<img src="link_da_imagem"/>
É importante observarmos que o link da imagem deve sempre terminar
com o nome da imagem, ponto (.) a extensão do tipo da imagem. E se
a imagem está em uma pasta no mesmo diretório do documento
HTML, devemos colocar o nome da pasta seguido de barra (/), antes
do nome da imagem.
Exemplo:
<img src="minha_pasta/minha_imagem.png"/>
PROFº GUSTAVO ROMA
11. Estrutura básica do HTML
Lista não ordenada
Uma lista não ordenada é muito utilizada para construir menu de um
site.
Para criar uma lista não ordenada usa-se a tag <ul>. Dentro desse
elemento os vários itens são criados com outra tag <li>.
Esta é a codificação:
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
É importante notar que dentro de uma lista não ordenada podemos
colocar parágrafos, quebras de linha, imagens, outras listas, etc...
PROFº GUSTAVO ROMA
12. Estrutura básica do HTML
O que é <div>
Os elementos div e span foram criados com o HTML 4
com a finalidade de fornecer um mecanismo genérico
para agrupar e prover estrutura aos documentos. O
elemento div é um container nível de bloco e span é um
elemento inline. Uma id e/ou class é em geral usada para
fornecer uma identidade a uma div ou span com o
propósito de fornecer uma referência para estilização por
CSS ou captura por um script.
Exemplo:
<div id=”header” class=”textopadrao”>...</div>
PROFº GUSTAVO ROMA
13. Estrutura básica do HTML
O que é CSS?
CSS é a abreviatura para Cascading Style Sheets - Folha de
Estilos em Cascata
CSS é uma linguagem para estilos que define o layout de documentos
HTML. Por exemplo, CSS controla fontes, cores, margens, linhas,
alturas, larguras, imagens de fundo, posicionamentos e muito mais.
HTML é usado para definir a estrutura do website. Contudo, o CSS
proporciona mais opções e é mais preciso e sofisticado. CSS é
suportado por todos os navegadores atuais.
Conclusão: HTML é usado para estruturar conteúdos. CSS é usado
para formatar conteúdos estruturados.
PROFº GUSTAVO ROMA
14. Estrutura básica do HTML
Dica:
Não caia na armadilha de construir todo o layout e depois testar, pois você poderá
constatar uma quebra de layout difícil de detectar devido a grande quantidade de
código. Construa em passos pequenos e teste cada passo em diferentes
navegadores. Assim fazendo você irá detectar eventuais problemas com o layout
tão logo eles apareçam, tornando a correção mais fácil.
Valide com freqüência seu HTML e CSS. Muitos problemas com layouts podem ser
corrigidos com auxílio dos relatórios do validador.
W3C - World Wide Web Consortium é o órgão superior de codificação web.
Como padrão da vida, tudo tem regras, certo? Pois é, a web também. Fazer sites
não é somente desenhar e codificar, tem uma serie de padrões a serem seguidos.
Padrões estes que são organizado pela W3C.
Validador W3C: http://validator.w3.org/
PROFº GUSTAVO ROMA
15. Estrutura básica do HTML
COMENTÁRIO
Os comentários em HTML são muito fáceis de inserir. É como uma etiqueta que tem
um início e um fim. Todo o texto que colocar dentro está comentado, ou seja, não
aparecerá na página. Dentro de um comentário pode colocar o texto ou código
HTML, como etiquetas.
O comentário começa por <!-- e finaliza por --> Tudo o que colocar entre essas
etiquetas está comentado.
Exemplo:
<div id="header">
<ul class="menu">
<li class="item">Menu</li>
<li class="item">Menu</li>
</ul>
</div><!-- fim header →
Comentário é muito importante para organização do código.
PROFº GUSTAVO ROMA
16. Estrutura básica do HTML
O que é CSS?
CSS é a abreviatura para Cascading Style Sheets - Folha de
Estilos em Cascata
CSS é uma linguagem para estilos que define o layout de documentos
HTML. Por exemplo, CSS controla fontes, cores, margens, linhas,
alturas, larguras, imagens de fundo, posicionamentos e muito mais.
HTML é usado para definir a estrutura do website. Contudo, o CSS
proporciona mais opções e é mais preciso e sofisticado. CSS é
suportado por todos os navegadores atuais.
Conclusão: HTML é usado para estruturar conteúdos. CSS é usado
para formatar conteúdos estruturados.
PROFº GUSTAVO ROMA
17. Estrutura básica do HTML
Definindo o CSS:
Os containers do layout devem ser posicionados com uso dos métodos
CSS de posicionamento. Para isso vamos definir regras de estilo no
CSS.
<style type=”text/css”>
body{
...
}
#container{
...
}
#header{
...
}
#footer{
...
}
</style>
PROFº GUSTAVO ROMA
18. Estrutura básica do HTML
Definindo o atributos no CSS:
Vamos definir uma fonte, tamanho, cor e background na tag body:
body{
font-family: Arial, Verdana;
font-color: #000;
font-size: 12px;
background-color: #f2f2f2;
}
Atributo
Atributo
Atributo
Atributo
font-family, define a família de fontes utilizadas.
font-color, define a cor da fonte.
font-size, define o tamanho da fonte.
background-color, define a cor do plano de fundo do site.
PROFº GUSTAVO ROMA
19. Estrutura básica do HTML
Definindo o atributos no CSS:
Vamos definir uma largura,altura e uma borda em uma <div>
#header{
width: 980px;
height: 200px;
border: 1px solid #ccc;
}
Atributo width, define a largura da <div> com id header
Atributo height, define a altura da <div> com id header
Atributo border, define a borda com espessura de 1 pixel sólida com cor
cinza claro da <div> com id header
PROFº GUSTAVO ROMA
20. Estrutura básica do HTML
Definindo link tag <a> e <link>:
Há dois tipos de links no HTML: a tag <a>, que são links que levam o usuário para outros
documentos e a tag <link>, que são links para fontes externas que serão usadas no documento.
Exemplo link tag <a>:
<a>Link</link>
Exemplo link tag <a> com atributo href:
<a href=”http://www.google.com”>Link</a>
Exemplo link tag <a> com atributo target_blank, o mesmo ao clicar, vai abrir outra janela do
navegador:
<a href=”http://www.google.com” target=”_blank”>Link</a>
Exemplo arquivo tag <link>:
<link rel="stylesheet" type="text/css" href="css/style.css" />
O atributo rel="stylesheet" indica que aquele link é relativo a importação de um arquivo referente a
folhas de estilo css.
PROFº GUSTAVO ROMA
21. Estrutura básica do HTML
Definindo link mailto tag <a>
Mailto é uma forma de inserir no HTML um link para algum endereço de email. Desta forma, o
usuário tem a possibilidade de enviar uma mensagem para este email apenas clicando no link
gerado. Veja no exemplo abaixo:
<a href=”mailto:gustavo.roma@profite.com.br”>gustavo.roma@profite.com.br</a>
Quando o usuário clica sobre o link de um endereço de email, automaticamente abre-se uma
janela de seu aplicativo de email padrão para criação de uma nova mensagem, que já estará
com o campo do destinatário preenchido com aquele endereço.
É possível também adicionar um parâmetro ao valor do mailto no HTML que irá sugerir um
Subject para a nova mensagem aberta. Assim, na janela de criação da nova mensagem, o
usuário poderá ver que o Subject também já estará preenchido.
<a
href=”mailto:gustavo.roma@profite.com.br?subject=AssuntoEmail”>gustavo.roma@profite.com.br
</a>
PROFº GUSTAVO ROMA
