Em primeiro lugar, nesta aula, vamos explorar os fundamentos do HTML e entender sua importância na construção de páginas da web. Enfim, o HTML (Hypertext Markup Language) é a linguagem padrão para estruturar e organizar o conteúdo de uma página na web. Dessa forma, ele fornece a estrutura básica necessária para criar e exibir informações de forma coerente e consistente em diferentes dispositivos e navegadores.
Definição do HTML como uma linguagem de marcação usada para estruturar o conteúdo de uma página da web:
O HTML, sigla para Hypertext Markup Language (Linguagem de Marcação de Hipertexto), é uma linguagem de marcação usada para estruturar e organizar o conteúdo de uma página da web. Enfim, o HTML fornece uma estrutura básica que define como o navegador exibe o conteúdo.
No HTML, utilizamos uma série de tags (também conhecidas como elementos) para delimitar e identificar diferentes partes do conteúdo. Enfim, cada tag desempenha uma função específica definindo como o texto, imagens, links e outros elementos exibidos e interagem com o usuário.
A linguagem HTML consiste em uma sintaxe simples, baseada em elementos e atributos. Logo, Os elementos são envolvidos por tags, que são representadas pelos sinais de menor que (<) e maior que (>). Por exemplo, a tag <p> é utilizada para marcar um parágrafo, enquanto a tag <img> é usada para inserir uma imagem na página.
Além das tags, o HTML também utiliza atributos para fornecer informações adicionais sobre os elementos. Enfim, você insere os atributos dentro das tags e eles contêm valores que definem características específicas, como o endereço de uma imagem ou a URL de um link.
A estrutura básica de um documento HTML inclui a tag como a raiz do documento, seguida pela seção que contém informações sobre o documento, como o título da página e links para estilos CSS. Enfim, você coloca o conteúdo real da página dentro da tag <body>, onde insere os elementos que serão exibidos aos usuários.
Ao usar o HTML corretamente e seguir as melhores práticas e padrões estabelecidos, você pode criar páginas da web bem estruturadas, semanticamente corretas e acessíveis aos usuários. Enfim, o HTML é a base fundamental para o desenvolvimento de sites e uma habilidade essencial para qualquer desenvolvedor web.
Estrutura básica de um documento HTML
Agora vamos explorar a estrutura básica de um documento HTML. Desse modo, é essencial entender a estrutura correta de um documento HTML para garantir que os navegadores interpretem corretamente as páginas da web e apresentem o conteúdo de forma adequada. Enfim, vamos examinar os elementos principais que compõem a estrutura de um documento HTML.
Tag HTML
A tag é a raiz de um documento HTML e envolve todo o conteúdo da página. Ela define o início do documento e seu final, e todos os outros elementos HTML devem estar contidos dentro desta tag.
Exemplo:
<!DOCTYPE html>
<html>
<!-- Conteúdo da página -->
</html>
Tag Head
A tag <head> é usada para fornecer informações sobre o documento HTML. Ela não é visível na página, mas contém metadados, como o título da página, links para arquivos de estilo CSS, scripts JavaScript e outras informações relevantes.
Exemplo:
<head>
<title>Título da Página</title>
<link rel="stylesheet" href="estilos.css">
<script src="script.js"></script>
</head>Tag Body
A tag é usada para envolver todo o conteúdo visível da página. Então, é dentro desta tag que é inserido os elementos HTML para serem exibidos para os usuários, como texto, imagens, links, tabelas, formulários, entre outros.
<body>
<h1>Título da Página</h1>
<p>Este é um parágrafo de exemplo.</p>
<img src="imagem.jpg" alt="Imagem de exemplo">
<a href="https://www.exemplo.com">Link de exemplo</a>
</body>Doctype
O doctype é uma instrução especial que você deve colocar no início do documento HTML para informar ao navegador qual versão do HTML está sendo utilizada. Então, ele ajuda a garantir a renderização correta da página e a interpretação correta do código.
<!DOCTYPE html>
<html>
<!-- Conteúdo da página -->
</html>Ao criar um documento HTML, você deve seguir a estrutura básica apresentada nesta aula. Enfim, a tag envolve todo o conteúdo, a tag contém informações sobre o documento e a tag abriga o conteúdo visível da página. Incluir o doctype adequado também é essencial para garantir a compatibilidade com os navegadores.
Lembre-se de que essa é apenas uma visão geral da estrutura básica de um documento HTML. Dessa forma, à medida que avançarmos no curso, você aprenderá a utilizar outros elementos e atributos para estruturar e estilizar seu conteúdo de forma mais detalhada e interativa.
Utilização de tags e elementos
Continuando, vamos explorar as diferentes tags e elementos HTML disponíveis e aprender como utilizá-los para estruturar e organizar o conteúdo de uma página da web. Enfim, cada tag e elemento tem uma finalidade específica e nos permite formatar o texto, adicionar imagens, criar listas, definir cabeçalhos, links e muito mais. Então, vamos conhecer algumas das tags HTML mais comuns e aprender como usá-las corretamente.
Títulos e Parágrafos
A tag <h1> é usada para definir o título principal da página. Existem também as tags<h2>, <h3> e assim por diante, para títulos secundários.
A tag <p> é usada para definir parágrafos de texto.
<h1>Título Principal</h1>
<h2>Título Secundário</h2>
<p>Este é um parágrafo de exemplo.</p>Listas
Usamos a tag <ul> para criar uma lista não ordenada, onde apresentamos os itens com marcadores (pontos, quadrados, círculos, etc.). Usamos a tag <ol> para criar uma lista ordenada com itens são numerados.
A tag <li> utiliza-se a tag para cada item da lista.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>Links
A tag <a> é usada para criar links. O atributo “href” especifica o endereço para onde o link aponta.
O texto entre as tags de abertura e fechamento do link aparece como o texto do link.
<a href="https://www.exemplo.com">Link de exemplo</a>Imagens
A tag <img> é usada para inserir imagens na página. Desse modo, o atributo “src” especifica o caminho para a imagem e o atributo “alt” fornece uma descrição alternativa para a imagem.
<img src="caminho/para/imagem.jpg" alt="Descrição da imagem">Divisões e Seções
Usamos a tag <div> para criar divisões genéricas na página, permitindo agrupar e estilizar elementos.
As tags <header>, <nav>, <main>, <footer> e outras usadas para estruturar seções específicas da página.
<div>
<h1>Título da Divisão</h1>
<p>Conteúdo da Divisão</p>
</div>
<header>
<h1>Logo e Cabeçalho</h1>
</header>
<nav>
<ul>
<li>Item de Navegação 1</li>
<li>Item de Navegação 2</li>
<li>Item de Navegação 3</li>
</ul>
</nav>
<main>
<h1>Conteúdo Principal</h1>
<p>
Texto principal da página</p>
</main>
<footer>
<p>Rodapé da página</p>
</footer>Em conclusão, estes são apenas alguns exemplos das tags HTML mais comuns. Conforme você avança no curso, aprenderá sobre mais tags e elementos que permitem criar páginas da web ricas e interativas. Enfim, lembre-se sempre de utilizar as tags corretas para cada tipo de conteúdo e seguir as boas práticas para obter páginas semanticamente corretas e acessíveis.
