O que é HTML?
Começando com o HTML?
Então, HTML é um tipo especial de documento de texto que é usado pelos navegadores da Web para apresentar textos e gráficos. O texto inclui tags de marcação para indicar o início de um parágrafo <p> e para indicar o fim de um parágrafo </ p>.
Os documentos HTML são frequentemente referidos como “páginas da Web“. O navegador recupera páginas de servidores da Web que, graças à Internet, pode ser praticamente em qualquer lugar no mundo.
Muitas pessoas ainda escrevem HTML manualmente usando ferramentas como o Bloco de Notas, NotePad++ e outros editores disponíveis por ai.
Uma boa maneira de aprender, é ver como outras pessoas tem codificado as suas páginas HTML. Para fazer isso, clique no menu “Visualizar” e em “Fonte”. Em alguns navegadores, você precisa clicar no menu “Arquivo” e depois em “Ver fonte”.
Você vai encontrar-se desenvolvendo um olho crítico, pois muitas páginas parecem uma bagunça sob o capô!
Vamos aprender a:
1. Adicionar um título
2. Adicionar cabeçalhos e parágrafos
3. Adicionar ênfase ao seu texto
4. Adicionar imagens
5. Adicionar links para outras páginas
6. Usar vários tipos de listas
Todo documento HTML precisa de um título. Abaixo está o que você precisa digitar:
<title>Título que aparecerá na Aba dos Navegadores.</title>
Para tentar isso, digite o código acima em um editor de texto e salve o arquivo como “teste.html” e, em seguida, visualize o arquivo em um navegador da Web.
Se a extensão do arquivo for “.html” ou “.htm“, o navegador irá reconhecê-lo como HTML. A maioria dos navegadores mostra o título na barra da legenda da janela. Com apenas um título, o navegador mostrará uma página em branco.
Não se preocupe. A próxima seção mostrará como adicionar conteúdo exibível.
ADICIONAR RUBRICAS E PARÁGRAFOS
Se você usa o Microsoft Word, você está familiarizado com os estilos incorporados para títulos com diferentes significados. Em HTML, existem seis níveis de cabeçalho.
H1 é o mais importante, H2 é um pouco menos importante, e assim por diante até o H6, o menos importante.
Veja como adicionar um título importante:
<h1>Um título importante</h1>
Título um pouco menos importante:
<h2>Um título um pouco menos importante</h2>
Cada parágrafo que você escreve deve começar com uma tag <p>. O </p> é opcional, ao contrário das tags para elementos como cabeçalhos. Por exemplo:
<p> Este é o primeiro parágrafo. </p>
<p> Este é o segundo parágrafo. </p>
Nota: eu sempre fecho a tag, para assim evitar qualquer conflito e erros futuros de tags abertas.
ADICIONANDO ÊNFASE
Você pode enfatizar uma ou mais palavras com a tag <em>, por exemplo:
<p>Este é um tópico realmente <em>interessante</em>!</p>
ADICIONANDO IMAGENS
As imagens podem ser usadas para tornar suas páginas da Web distintas e ajudar grandemente a transmitir sua mensagem.
Vamos assumir que você tem um arquivo de imagem chamado “logomarca.jpg” na mesma pasta/diretório que o seu arquivo HTML.
Esta imagem tem 300 pixels de largura por 150 pixels de altura.
<img src="logomarca.jpg" width="300" height="150">
O atributo “SRC” nomeia o arquivo de imagem. A largura e a altura não são estritamente necessárias, mas ajudam a acelerar a exibição de sua página da Web.
Mais ainda está faltando algo para nossa imagem! As pessoas que não conseguem ver a imagem precisam de uma descrição que aparecerá na sua ausência. Você pode adicionar uma breve descrição da seguinte maneira:
<img src="logomarca.jpg" width="300" height="150" alt="Titulo da minha imagem" longdesc="logomarca.html">
O atributo “ALT” é usado para dar uma breve descrição, neste caso “Titulo da minha imagem”. Para imagens complexas, talvez seja necessário também dar uma descrição mais longa. Supondo que isso tenha sido escrito no arquivo “logomarca.html”, você pode adicionar um como segue usando o atributo longdesc.
Ainda em conjunto com o atributo “ALT”, podemos usa o atributo “TITLE”:
<img src="logomarca.jpg" width="300" height="150" alt="Titulo da minha imagem" title="Titulo da minha imagem">
Você pode criar imagens de várias maneiras, por exemplo, com uma câmera digital, escaneando uma imagem ou criando uma com um programa de pintura ou desenho.
A maioria dos navegadores entende formatos de imagem como GIF, PNG e JPEG. Para evitar atrasos longos enquanto a imagem é baixada pela rede, você deve evitar o uso de arquivos de imagem grandes.
De um modo geral, o JPEG é o melhor para fotografias e outras imagens que variam suavemente, enquanto o GIF e o PNG são bons para arte gráfica envolvendo áreas planas de cores, linhas e texto.
Todos os três formatos suportam opções para renderização progressiva onde uma versão bruta da imagem é enviada primeiro e progressivamente refinada.
ADICIONANDO LINKS
Os links são definidos com a tag <a>. Este permite definir um link para a página definida no arquivo “logomarca.html” na mesma pasta/diretório que o arquivo HTML que você está editando:
<!--Este é um link para a página da logomarca-->
<a href="logomarca.html">Página da Logomarca</a>
O texto entre <a> e o </a> é usado como legenda para o link. É comum que a legenda seja em texto sublinhado azul.
Se o arquivo que você está vinculando estiver em uma pasta/diretório principal, você precisa colocar “../” na frente dele, por exemplo:
<a href="../logomarca.html">Página da Logomarca</a>
Se o arquivo que você está vinculando estiver em um subdiretório, você deve colocar o nome do subdiretório seguido de uma “/” na frente dele, por exemplo:
<a href="subdiretório/logomarca.html">Página da Logomarca</a>
O uso de caminhos relativos permite que você ligue a um arquivo subindo e descendo a árvore de diretórios conforme necessário, por exemplo:
<a href="../images/parceiros/logomarca.html">Página da Logomarca</a>
O primeiro aspecto no diretório pai para outro diretório chamado “images” e, em seguida, em um subdiretório nomeado “parceiros” para um arquivo chamado “logomarca.html”.
Para vincular a uma página em outro site, você precisa fornecer o endereço completo da Web(geralmente chamado de URL), por exemplo, para vincular a www.htmlecsspro.com, você precisa escrever:
<!--Este é um link para-->
<a href="https://www.htmlecsspro.com">HTML e CSS Pro</a>.
Você pode transformar uma imagem em um link de hipertexto, por exemplo, o seguinte link permite clicar no logotipo para acessar a página inicial:
<a href="/">
<img src="logo.jpg" alt="HTML e CSS Pro">
</a>
Isso usa “/” para se referir à raiz da árvore de diretórios, ou seja, a página inicial.
TIPOS DE LISTAS
O HTML suporta três tipos de listas. O primeiro tipo é uma lista marcada, muitas vezes chamada de lista desordenada. Ele usa as tags <ul> e <li>, por exemplo:
<ul>
<li>O primeiro item da lista</li>
<li>O item da segunda lista</li>
<li>O item da terceira lista</li>
</ul>
Observe que você sempre precisa encerrar a lista com a etiqueta final </ul>, mas que </li> é opcional e pode ser deixada.
O segundo tipo de lista é uma lista numerada, geralmente chamada de uma lista ordenada. Ele usa as tags <ol> e <li>. Por exemplo:
<ol>
<li>O primeiro item da lista</li>
<li>O item da segunda lista</li>
<li>O item da terceira lista</li>
</ol>
Como listas marcadas, você sempre precisa encerrar a lista com a marca final </ol>, mas a marca final </li> é opcional e pode ser deixada.
O terceiro e último tipo de lista é a lista de definições. Isso permite que você liste termos e suas definições. Este tipo de lista começa com uma tag <dl> e termina com </dl>.
Cada termo começa com uma marca <dt> e cada definição começa com um <dd>. Por exemplo:
<dl>
<dt>O primeiro termo</dt>
<dd>E sua definição</dd>
<dt>O segundo termo</dt>
<dd>E sua definição</dd>
<dt>O terceiro termo</dt>
<dd>E sua definição</dd>
</dl>