Tags HTML fundamentais para criação de páginas

Tags html
Tecnologias Web
Profª Claudete de Sá

O que são Tags HTML?
É a estrutura utilizada para
criar páginas HTML. As tags
são responsáveis pelo
navegador interpretar o que
estão entre elas. Sem elas não
seria possível interpretar um
website.

Tags Básicas (importantes)
<html> - abertura do documento
<head> - cabeçalho
<title> - titulo da página
<body> - corpo da página

Tag <head>
Dentro do cabeçalho podemos
encontrar os seguintes comandos:
<title>: define o título da página, que é
exibido na barra de título dos navegadores.
<style>: define formatação em CSS

Tag <body>
Dentro do corpo podemos encontrar
outras várias etiquetas que irão moldar a
página, como por exemplo:
<h1>, <h2>,... <h6>: cabeçalhos e títulos
no documento em diversos tamanhos.
<p>: novo parágrafo.
<img>: imagem

Simples Documento
<html>
<head><title>Meu site</title>
</head>
<body>
Aqui fica imagens, links, textos, vídeos.
</body>
</html>

Simples Documento
<html>
<head><title>Meu site</title>
</head>
<body>
<p>Navegador interpreta um parágrafo</p>
</body>
</html>

Cabeçalhos
Obs: Os cabeçalhos vão do NÍVEL H1 AO H6

Tags sem fechamento
Geralmente Inserem um elemento na página.
<br/> Insere uma quebra de linha
<hr/> Insere uma linha horizontal

Tags sem fechamento
Note que a tag é escrita como se fosse
uma mistura de tag de abertura e de
fechamento com uma barra "/" no final:
<br/> Insere uma quebra de linha
<hr/> Insere uma linha horizontal

Hiperligações (Links)
É uma propriedade
importante dos
documentos HTML é a
possibilidade de fazer
hiperligações.
Para isso usa-se a
etiqueta <a> (do inglês,
anchor).

Links
Para inserir um link em um documento, utilizamos a
etiqueta <A>, da seguinte forma:
<A HREF = "arq_destino">âncora</A>
onde:
arq_destino -> é a URL do documento de destino;
Âncora-> é o texto ou imagem que servirá de ligação do
documento apresentado para o documento de destino.

Links
<A HREF = “http://www.liceu.edu.br">
Visitar site do LICEU</A>
Visitar site do LICEU
O que aparece para o usuário:
Página de Destino

Links (Email)
Link para endereço de email.

Tags (Fontes)
Aumentar o tamanho da Fonte:
<font size=“+1”>Texto</font>
Alterar a cor da Fonte
<font color=“yellow”</font>
Alterar a Fonte(letra)
<font face=“verdana”</font>

LINK (mudança de cores)
• LINK
cor dos links (padrão: azul)
• ALINK
cor dos links, quando acionados
(padrão: vermelho)
• VLINK
cor dos links, depois de visitados
(padrão: azul escuro ou roxo)

• <BODY BGCOLOR="#rrggbb" TEXT="#rrggbb"
LINK="#rrggbb" ALINK="#rrggbb"
VLINK="#rrggbb” BACKGROUND="URL">

Atributos e Valores
Uma etiqueta/tag é formada por
comandos, atributos e valores. Os
atributos modificam os resultados
padrões e os valores caracterizam essa
mudança.

Atributos e Valores (Exemplo)
<a font color=“red">Meu Texto</font>
No qual:
font = comando que para alterar opções
de uma palavra ou texto
color = atributo que especifica a cor da
barra
red = valor do atributo color, que é a cor
do texto que será apresentado.

Atributos e Valores
Cada etiqueta tem seus atributos
possíveis e seus valores.
Um exemplo, é o atributo size que pode
ser usado com a tag FONT, com a HR mas
que não pode ser usado com a tag BODY.
Isso quer dizer que devemos saber
exatamente quais os atributos e valores
possíveis para cada comando.

Tags - Listas
<ul>
<li>Texto 1</li>
<li>Texto 2</li>
</ul>
• Texto 1
• Texto 2
Resultado:

Tags - Listas
<ol>
<li>Texto 1</li>
<li>Texto 2</li>
</ol>
Listas Ordenadas.
1. Texto 1
2. Texto 2
Resultado:

Negrito e itálico
<b>
Meu Texto
</b>
<i>
Meu Texto
</i>
Meu Texto
Resultado:
Meu Texto
Resultado:

Tags Aninhadas
<b>
<i>
Meu Texto
</i>
</b>
Meu Texto
Resultado:

Tags Aninhadas
<h1>
<b>
<i>
Meu Texto
</i>
</b>
</h1>
Meu Texto
Resultado:

Tags Aninhadas
Conclusão:
As últimas tags a serem abertas têm
que ser as primeiras a serem
fechadas, e as primeiras a serem
abertas terão de ser as últimas a
serem fechadas.

Mais Tags - Imagens
<IMG>: Tag para inserir uma imagem.
Src: Local de origem da imagem
Alt: Atributo para descrever a imagem.
Width: Atributo para definir a largura da imagem.
Height: Atributo para definir a altura da imagem.
Border: Inserir uma borda na imagem.
Align: Alinhamento da Imagem.
Código para inserir uma imagem:
<img src=“brasil.jpg” alt=“Brasil” width=“400” height=“200”/>

Mais Tags - Imagens
Código para inserir uma imagem:
<img src=“brasil.jpg” alt=“Brasil” align= “left” border=“1” />
Seu texto irá ficar alinhado a
esquerda da imagem.
A imagem tem uma borda
que foi definida pelo atributo
BORDER=“1”.

Mais Tags - Tabelas
Tabelas são usadas para apresentar
"dados tabulares", isto é, informação que
deva ser apresentada em linhas e
colunas, de forma lógica e organizada.

Mais Tags - Tabelas
Código para inserir uma tabela:
<table>
<tr><td>Célula 1 </td></tr>
<tr>
<td>Célula 2</td>
</tr>
</table>
Célula 1
Célula 2
Resultado:

Mais Tags - Tabelas
Código para inserir uma tabela:
<table border=“1”>
<tr><td>Célula 1 </td></tr>
<tr>
<td>Célula 2</td>
</tr>
</table>
Célula 1
Célula 2
Resultado:

Meta Tags
Define propriedades da página, como
codificação de caracteres, descrição da
página, autor, entre outras.
São meta informações sobre o documento.
Tais campos são muitos usados por
mecanismos de busca (como o Google) para
obter mais informações sobre o
documento, a fim de classificá-lo melhor no
resultado da pesquisa.

Meta Tags (Como usar)
As meta tags devem ser incluídas no seu
código HTML, dentro da tag <head>.

Meta tags com o atributo "name" são
usadas para tipos que não correspondem a
cabeçalhos HTTP.
Meta Tags (Exemplos)

Mais do que divulgar seu site nos buscadores
As meta tags não servem só para divulgar seu
conteúdo. Basicamente, a função delas é fornecer
informações adicionais sobre seu site.

Orienta os navegadores a exibir acentuação e
caracteres especiais corretamente e facilita o uso
de corretores ortográficos.

Meta tags com o atributto HTTP-Equiv são equivalentes
aos cabeçalhos http. Normalmente elas controlam as
ações dos navegadores e podem ser usadas para melhor
especificar as informações.

pt-br Português do Brasil
en-us Inglês dos EUA
fr Francês
de Alemão
es Espanhol

Especifica o tipo de conteúdo da página e o
conjunto de caracteres que ela usa.

Tags HTML fundamentais para criação de páginas

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Semelhante a Tags HTML fundamentais para criação de páginas

Semelhante a Tags HTML fundamentais para criação de páginas (20)

Tags HTML fundamentais para criação de páginas