Lição

Desenvolvimento web 

Introdução ao HTML

Bem-vindo ao mundo do desenvolvimento web! Esta lição irá apresentá-lo aos blocos de construção fundamentais da internet: HTML. HTML significa HyperText Markup Language, e é a linguagem padrão para a criação de páginas web. Pense nisso como o esqueleto de um website – ele fornece a estrutura e o conteúdo.

Sem HTML, os navegadores web não saberiam como exibir texto, imagens ou links. É essencial para qualquer pessoa interessada em construir websites, desde páginas pessoais simples até aplicações web complexas. Começaremos com o básico e trabalharemos para criar um layout de página web simples.

Estrutura HTML: O Modelo Básico

Todo documento HTML segue uma estrutura básica. Essa estrutura informa ao navegador que ele está lendo um arquivo HTML e fornece os elementos essenciais para a página. Aqui está um modelo HTML mínimo:

            
<!DOCTYPE html>
<html>
<head>
    <title>Título da Página</title>
</head>
<body>
    <!-- Page content goes here -->
</body>
</html>

Vamos detalhar cada parte:

  • <!DOCTYPE html>: Esta declaração informa ao navegador que o documento é um documento HTML5. Deve ser sempre a primeira coisa no seu arquivo HTML.
  • <html>: Este é o elemento raiz da página. Tudo o mais vai dentro desta tag.
  • <head>: Esta seção contém meta-informações sobre o documento HTML, como o título, conjunto de caracteres e links para folhas de estilo.
  • <title>: Especifica um título para a página HTML (que é exibido na barra de título ou aba do navegador).
  • <body>: É aqui que todo o conteúdo da sua página web vai – o texto, imagens, links e todo o resto que os usuários veem.

Tags HTML: Elementos e Atributos

HTML usa tags para definir elementos. A maioria das tags vem em pares: uma tag de abertura e uma tag de fechamento. Por exemplo, <p> é a tag de abertura para um parágrafo, e </p> é a tag de fechamento.

Algumas tags são de fechamento automático, o que significa que não precisam de uma tag de fechamento separada. Um exemplo é a tag <br>, que cria uma quebra de linha. As tags também podem ter atributos, que fornecem informações adicionais sobre o elemento. Por exemplo, a tag <img> (para imagens) usa o atributo src para especificar a origem da imagem.

Títulos: <h1> a <h6>

Os títulos são usados para estruturar seu conteúdo e torná-lo mais fácil de ler. HTML fornece seis níveis de títulos, de <h1> (o mais importante) a <h6> (o menos importante). Tipicamente, <h1> é usado para o título principal da página.

Aqui está um exemplo:

            
<h1>Este é um Título de Nível 1</h1>
<h2>Este é um Título de Nível 2</h2>
<h3>Este é um Título de Nível 3</h3>

Parágrafos: <p>

Parágrafos são usados para exibir blocos de texto. A tag <p> define um parágrafo.

Exemplo:

            
<p>Este é um parágrafo de texto. Ele pode conter múltiplas frases e palavras.</p>
<p>Este é outro parágrafo. Parágrafos são automaticamente separados por uma linha em branco.</p>

Listas: <ul> e <ol>

HTML fornece dois tipos de listas: listas não ordenadas (<ul>) e listas ordenadas (<ol>). Listas não ordenadas são usadas para itens que não têm uma ordem específica, enquanto listas ordenadas são usadas para itens que precisam estar em uma sequência particular. Os itens da lista são definidos usando a tag <li>.

Aqui estão exemplos de ambos:

            
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<ol>
    <li>Primeiro item</li>
    <li>Segundo item</li>
    <li>Terceiro item</li>
</ol>

Links: <a>

Links permitem que os usuários naveguem entre diferentes páginas web ou seções dentro da mesma página. A tag <a> define um hiperlink. O atributo mais importante é href, que especifica a URL do link.

Exemplo:

            
<a href="https://www.example.com">Visite Example.com</a>

O atributo target pode ser usado para especificar onde abrir o documento linkado. target="_blank" abre o link em uma nova aba ou janela.

Imagens: <img>

A tag <img> é usada para incorporar imagens em uma página web. O atributo src especifica o caminho para o arquivo de imagem. O atributo alt fornece texto alternativo para a imagem, que é exibido se a imagem não puder ser carregada e é importante para a acessibilidade.

Exemplo:

            
<img src="image.jpg" alt="Descrição da imagem">

Construindo um Layout de Página Web Simples

Agora, vamos combinar tudo o que aprendemos para criar um layout de página web básico. Incluiremos um título, um parágrafo, uma lista, um link e uma imagem.

Aqui está o código HTML completo:

            
<!DOCTYPE html>
<html>
<head>
    <title>Minha Primeira Página Web</title>
</head>
<body>
    <h1>Bem-vindo à Minha Página Web!</h1>
    <p>Esta é uma página web simples criada usando os fundamentos de HTML.</p>
    <ul>
        <li>Aprender HTML</li>
        <li>Praticar codificação</li>
        <li>Construir websites incríveis</li>
    </ul>
    <a href="https://www.google.com" target="_blank">Visite o Google</a>
    <img src="placeholder.jpg" alt="Uma imagem de placeholder">
</body>
</html>

Lembre-se de substituir "placeholder.jpg" pelo caminho real para um arquivo de imagem. Salve este código como um arquivo HTML (por exemplo, "index.html") e abra-o no seu navegador web para ver o resultado. Agora você tem uma página HTML totalmente funcional!



-/- ✔: 0, ✖: 0