HTML Básico
HTML Básico
html
Aninhando elementos
Você pode colocar elementos dentro de outros elementos também — isso é
chamado de aninhamento. Se quiséssemos afirmar que nosso gato é muito mal-
humorado, poderíamos envolver a palavra "muito" em um elemento <strong>, o
que significa que a palavra deve ser fortemente enfatizada:
html
html
<p>Meu gatinho é <strong>muito</strong> mal humorado.</p>
Elementos vazios
Alguns elementos não possuem conteúdo e são chamados de elementos vazios.
Considere o elemento <img> que temos na nossa página HTML:
html
<img src="imagens/firefox-icon.png" alt="Minha imagem de teste" />
Ele contém dois atributos, mas não há tag </img> de fechamento, e não
há conteúdo interno. Isso acontece porque um elemento de imagem
não envolve conteúdo para ter efeito em si mesmo. Sua proposta é
incorporar uma imagem na página HTML no lugar que o código
aparece.
html
Copy to Clipboard
<!doctype html>
<html>
<head>
</head>
<body>
</html>
html
Copy to Clipboard
Como dissemos antes, isso incorpora uma imagem na nossa página na posição que aparece. Isso é feito
pelo atributo src (source), que contém o caminho para nosso arquivo de imagem.
Incluímos também um atributo alt (alternative). Neste atributo, você especifica um texto descritivo para
usuários que não podem ver a imagem, possivelmente devido aos seguintes motivos:
Eles são deficientes visuais. Usuários com deficiências visuais significativas costumam usar ferramentas
chamadas leitores de tela para ler o texto alternativo para eles.
Algo deu errado, fazendo com que a imagem não seja exibida. Por exemplo, tente alterar
deliberadamente o caminho dentro do atributo src para torná-lo incorreto. Se você salvar e recarregar a
página, você deve ver algo assim no lugar da imagem:
As palavras-chave para o texto alternativo são "texto descritivo". O texto alternativo que você escreve
deve fornecer ao leitor informações suficientes para ter uma boa ideia do que a imagem mostra. Neste
exemplo, nosso texto "Minha imagem teste" não é bom para todos. Uma alternativa muito melhor para
o nosso logotipo do Firefox seria "A logo do Firefox: uma raposa em chamas envolvendo a Terra."
Marcando o texto
Essa seção abordará alguns dos elementos HTML essenciais que você usará para marcar o texto.
Cabeçalhos
Os elementos de cabeçalhos permitem especificar que certas partes do seu conteúdo são títulos ou
subtítulos. Da mesma forma que um livro tem o título principal e os capítulos possuem títulos e
subtítulos, um documento HTML também tem. HTML contém 6 níveis de título, <h1> - <h6>, embora
você normalmente só use de 3 a 4:
<h3>Meu subtítulo</h3>
Agora tente adicionar um título adequado à sua página HTML logo acima do
elemento <img>.
Nota: você verá que seu título de nível 1 tem um estilo implícito. Não use elementos de cabeçalho para
deixar o texto maior ou em negrito, pois eles são usados para acessibilidade e outros motivos, como
SEO. Tente criar uma sequência significativa de títulos em suas páginas, sem pular níveis.
Parágrafo
Como explicado acima, os elementos <p> são para conter parágrafos de texto; você os usará com
frequência ao marcar um conteúdo de texto regular:
html
Adicione seu texto de exemplo (você o obteve em Como será o seu site?) Em um ou alguns parágrafos,
colocados diretamente abaixo do seu elemento <img>.
Listas
Muito do conteúdo da web é de listas e o HTML tem elementos especiais para elas. Listas de marcação
sempre consistem em pelo menos 2 elementos. Os tipos mais comuns de lista são ordenadas e não
ordenadas:
Listas não ordenadas são para listas onde a ordem dos itens não importa, como uma lista de compras,
por exemplo. Essas são envolvidas em um elemento <ul>.
Listas Ordenadas são para listas onde a ordem dos itens importa, como uma receita. Essas são
envolvidas em um elemento <ol>.
Cada item dentro das listas é posto dentro de um elemento <li> (item de lista).
Por exemplo, se nós quisermos tornar uma parte de um parágrafo numa lista:
html
<p>
</p>
html
<ul>
<li>tecnólogos</li>
<li>pensadores</li>
<li>construtores</li>
</ul>
Tente adicionar uma lista ordenada ou não ordenada à sua página de exemplo.
Links
Links são muito importantes — eles são o que faz da web ser de fato uma REDE! Para adicionar um link,
precisamos usar um elemento simples — <a> — "a" é a forma abreviada de "âncora". Para transformar o
texto do seu parágrafo em um link, siga estas etapas:
html
Copy to Clipboard
<a>Mozilla Manifesto</a>
html
Copy to Clipboard
Preencha o valor desse atributo com o endereço da Web que você deseja vincular o link:
html
Copy to Clipboard
<a href="https://www.mozilla.org/pt-BR/about/manifesto/"
>Mozilla Manifesto</a
>
Você pode obter resultados inesperados se omitir a parte https:// ou o http://, o chamado protocolo, no
começo do endereço web. Então depois de criar um link, clique nele para ter certeza de que ele está
indo para onde você deseja.
Nota: href pode parecer, numa primeira impressão, uma escolha obscura para um nome de atributo. Se
você está tendo problemas para lembrar do nome, lembre que significa hypertext reference. (referência
em hipertexto)
Adicione um link em sua página agora, se ainda não tiver feito isso.
Conclusão
Se você seguiu todas as instruções neste artigo, você deve terminar com uma página que pareça algo do
tipo (você também pode vê-la aqui):
Uma captura de tela da página da Web mostrando um logotipo do Firefox, um título dizendo que o
mozilla é legal e dois parágrafos de texto de preenchimento
Se você ficar emperrado, pode sempre comparar seu trabalho com nosso código de exemplo finalizado
no Github.
Aqui, nós só arranhamos na superfície do HTML. Para descobrir mais, vá a nossa Estruturando a web
com HTML.