Introdução à linguagem HTML

LINGUAGEM HTML
Profa. Me. Karen Sica

Técnicas Digitais

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)

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ê!

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,
atributos, 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

Feche e abra o documento novamente

Limpe a sujeira (se houver)

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/logo-
site.gif"><p>Esta é uma imagem!</p>

<h1>No H1 pode ir o título da matéria</h1>

<h2>O H2 pode conter a linha de apoio</h2>

<h3>O H3 pode ser o padrão do texto, por exemplo</h3>

<h4>Título H4</h4>

<h5>Título H5</h5>

<h6>O H6, por ser menor, pode ser créditos</h6>

<p>Mais informações em: <a href="http://www.w3schools.com/html/"
target="_blank">W3Schools</a></p>

</body>

</html>

DEMAIS POR HOJE?
!
SEMANA QUEVEM TEM
ATIVIDADE!

Introdução à linguagem HTML

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Introdução à linguagem HTML

Semelhante a Introdução à linguagem HTML (20)

Mais de Karen Sica

Mais de Karen Sica (20)

Último

Último (20)

Introdução à linguagem HTML