HTML básico

LINGUAGEM HTML
Profa. Me. Karen Sica
Técnicas Digitais 2013
segunda-feira, 29 de abril de 13

AFINAL, O QUE É?
HyperText Markup Language
Linguagem padrão para criação de sites
Linguagem de marcação hipertextual
Linguagem interpretada por navegadores
Criada por Tim Berners-Lee (1989)

HIPERTEXTUAL?
Sim, são documentos com referências internas a eles
e a outros documentos.
Extensões que englobam outras linguagens, além do
texto, claro...

COMO DECIFRAR?
Não precisa, o computador faz isso para você!

DEVO APRENDER?
É BOM SABER!

CARACTERÍSTICAS
Para criar as páginas ou os textos em HTML, são
utilizadas etiquetas, conhecidas como TAGS.
Estas etiquetas são os comandos de formatação da
linguagem.
Um elemento é formado por um nome de etiqueta,
tributos, valores e ﬁlhos (que podem ser outros
elementos ou textos).

ENTENDENDO AS TAGS
Deve-se sempre abrir e fechar as tags
Os textos ﬁcam sempre entre < > ou </ >
< e > podem afetar uma página ou todo o
conteúdo. CUIDADO!
<tag> é a etiqueta de abertura
</tag> é a etiqueta de fechamento

DOCUMENTOS HTML
São compostos de texto HTML e texto plano
Exibem conteúdo de página da web
Podem ser chamadas de páginas da web
propriamente dita

DO QUEVOCÊ PRECISA?
Não precisa de um site
Não precisa de um editor HTML
Não precisa de um servidor web
Precisa apenas de:
editor de texto simples ou
bloco de notas

COMO CRIAR UM HTML?
Abra o editor de textos
Crie um arquivo em branco
Salve o arquivo com a extensão .html
Inicie a edição do arquivo

ESTRUTURA DE UMA PÁGINA
<!DOCTYPE html> indica o tipo de HTML que será reconhecido pelo navegador
<HTML> indica informações HTML
<HEAD> cabeçalho
<TITLE> início do título da página
</TITLE> fecha título da página
</HEAD> fecha cabeçalho
<BODY> corpo principal da página
</BODY> fecha corpo principal da página
</HTML> ﬁm do documento HTML

ARQUIVO BÁSICO HTML
<!DOCTYPE html>
<html>
<head>
<title> minha página </title>
</head>
<body>
.... conteúdo da página...
</body>
</html>

MAIS TAGS IMPORTANTES
CABEÇALHOS: são representados por <h1> até <h6>
Exemplo:
<h1> esse é o cabeçalho 1 </h1>
<h2> esse é o cabeçalho 2 </h2>

PARÁGRAFOS: são deﬁnidos com a tag <p>
Exemplo:
<p> aí está o parágrafo </p>
<p> agora temos outro parágrafo </p>
LINKS: são representados pela tag <a>
O endereço é representado no atributo href (hypertext
reference)
Exemplo:
<a href=“http://www.confrariadopet.com.br”> Acesse a
Confraria do Pet </a>

IMAGENS: são deﬁnidos com a tag <img>
O nome e o tamanho da imagem são fornecidos nos
atributos.
src = source
Exemplo:
<img src=“nomedaimagem.jpg” width= “500” height=“300”
/>

ELEMENTOSVAZIOS: são aqueles que após abertos não
são mais fechados
Exemplo:
<br> - usado para dar quebra de linha

FIQUE LIGADO
INDENTAÇÃO:
Recuo do texto em relação à margem
Ressalta a hierarquia entre os elementos
Torna a leitura do código mais simples e fácil
Facilita a alteração do código fonte

EXEMPLO
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<p>Este é um html</p>
<p><a href="http://www.confrariadopet.com.br/">Este é um link!</a></p>
<img src="http://confrariadopet.com.br/wp-content/uploads/2013/04/
logook.jpg"><p>Esta é uma imagem!</p>
<h1>Título H1</h1>
<h2>Título H2</h2>
<h3>Título H3</h3>
<h4>Título H4</h4>
<h5>Título H5</h5>
<h6>Título H6</h6>
<p>Mais informações em: <a href="http://www.w3schools.com/html/"
target="_blank">W3Schools</a></p>
</body>
</html>

EXEMPLO

DEMAIS POR HOJE?
SEMANA QUEVEM TEM MAIS!

HTML básico

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (7)

Destaque

Destaque (20)

Semelhante a HTML básico

Semelhante a HTML básico (20)

Mais de Karen Sica

Mais de Karen Sica (20)

Último

Último (20)

HTML básico