Introdução à Web e HTML · elucas

Bem-vindo ao mundo da Web e HTML! Neste artigo, você aprenderá sobre a importância e o papel da World Wide Web (Web) na sociedade atual e como ela permite acesso e compartilhamento de informações em todo o mundo. Além disso, você descobrirá como criar páginas web usando HTML, a linguagem de marcação fundamental para a criação de conteúdo na Internet. Aprender sobre HTML é uma habilidade valiosa no mercado de trabalho atual e uma porta de entrada para outras tecnologias da Web. Vamos começar nossa jornada juntos!

O que é a Web e como ela funciona

A World Wide Web (WWW ou simplesmente a Web) é um sistema de informações hipertextual interligadas e acessíveis na Internet. Ela permite ao usuário navegar e acessar informações através de links (hiperlinks) em páginas web. As páginas web são documentos HTML (Hypertext Markup Language) que são exibidos em um navegador web, como o Google Chrome, Mozilla Firefox ou Safari. Inclusive esse post que você está lendo, foi criado tendo como base o HTML, se você está lendo em um navegador com toda certeza este artigo está estruturado em html.

O funcionamento da Web é baseado em três tecnologias principais: HTML para a criação de conteúdo, CSS para estilização do conteúdo e JavaScript para a criação de interações dinâmicas. Quando um usuário faz uma requisição a uma página web, o servidor da Web envia o documento HTML para o navegador, que, por sua vez, o interpreta e o exibe na tela.

Em resumo, a Web permite que informações sejam compartilhadas e acessadas globalmente através da Internet, tornando-se uma das principais fontes de informação e comunicação da atualidade.

Histórico e evolução da Web

A evolução da Web é uma história fascinante, marcada por eventos importantes que são lembrados e registrados na vasta mídia digital. Sendo assim, também quero deixar minha marca registrando estes tópicos que considero significativos na história da Web, demonstrando sua evolução ao longo do tempo:

1989: Tim Berners-Lee, um cientista da computação britânico, propõe o conceito de hipertexto interligado e cria a World Wide Web (Web) como uma forma de compartilhar informações na Internet.
1991: O primeiro servidor web é criado e o primeiro site é publicado na Internet.
1993: O primeiro navegador gráfico, o Mosaic, é lançado, tornando a navegação na Web muito mais fácil e acessível para o público em geral.
1995: O HTML 2.0 é lançado, fornecendo uma linguagem de marcação padrão para a criação de páginas web.
1998: O Google é fundado, revolucionando a pesquisa na Web.
2000: A criação de aplicativos web e a popularização do JavaScript permitem interações dinâmicas nas páginas web.
2006: A popularização dos smartphones e da conectividade móvel leva ao aumento do uso da Web em dispositivos móveis.
2010: A popularização da nuvem permite acesso a aplicativos e dados a partir de qualquer lugar com conexão à Internet.

Estes subtópicos apresentam uma visão geral da evolução da Web ao longo dos anos e como ela se tornou a importante plataforma de informação e comunicação que é hoje. Destaca também as tecnologias e inovações que contribuíram para o crescimento e evolução da Web.

Como criar uma página web usando HTML

Agora vamos aprender como criar sua primeira página web, então segue o passo a passo para finalmente criar sua primeira página web:

Escolha um editor de código: Existem muitos editores de código disponíveis, tanto gratuitos quanto pagos, que você pode usar para escrever o seu código HTML. Alguns dos mais populares incluem o Visual Studio Code, Sublime Text e Notepad++.
Abra um novo arquivo HTML: Depois de escolher um editor de código, abra um novo arquivo HTML. Você pode fazer isso clicando em "File" e depois em "New" ou usando um atalho de teclado.
Adicione a estrutura básica do HTML: Todas as páginas HTML precisam ter uma estrutura básica, que inclui as seguintes tags:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>

Adicione o título da página: Dentro da tag <head>, você deve adicionar o título da sua página usando a tag <title>:

<head>
   <title>Meu Título</title>
</head>

Adicione o conteúdo da página: Dentro da tag <body>, você pode adicionar o conteúdo da sua página usando tags HTML como <h1>, <p>, <ul>, <ol>, entre outras. Por exemplo:

<body>
   <h1>Meu Título Principal</h1>
   <p>Meu primeiro parágrafo.</p>
   <ul>
      <li>Item 1</li>
      <li>Item 2</li>
   </ul>
</body>

Salve o arquivo: Salve o arquivo com a extensão .html (por exemplo, "pagina.html").
Abra a página no navegador: Para ver como sua página está ficando, basta abri-la no seu navegador web preferido. Para fazer isso, clique com o botão direito do mouse no arquivo e escolha "Abrir com" e depois o navegador que você deseja usar.
Teste e refine: Teste a página e refine o código se necessário. Adicione mais conteúdo, modifique o design e experimente novas tags HTML até ter a página como você deseja.

Com esses passos, você pode começar a criar sua própria página web usando HTML. Lembre-se de que a HTML é uma linguagem simples, mas poderosa, e há muito mais que você pode aprender e fazer. Como constumo dizer:

com programação o céu é o limite

Estrutura básica de um documento HTML

A estrutura básica de um documento HTML é mostrada no passo 3, do tópico anterior ela é composta por três elementos principais: o elemento raiz HTML, o elemento de cabeçalho HEAD e o elemento de corpo BODY.

O elemento raiz HTML é o elemento que envolve todo o conteúdo da página web e é o primeiro elemento a ser declarado no documento HTML.

O elemento de cabeçalho HEAD contém informações importantes sobre a página, como o título da página, descrições meta e links para folhas de estilo. Estas informações são usadas pelos motores de busca e pelos navegadores para entender o conteúdo da página.

O elemento de corpo BODY é o elemento que contém todo o conteúdo visível da página, como títulos, parágrafos, imagens e links. Este é o elemento onde você irá adicionar o conteúdo da sua página web.

É importante destacar que este é apenas um exemplo básico e que existem muitos outros elementos e atributos que podem ser adicionados a um documento HTML para melhorar sua estrutura e acessibilidade. No entanto, entender a estrutura básica é fundamental para quem está começando a aprender sobre HTML.

Elementos HTML

Ao aprender HTML, é importante conhecer os elementos HTML mais comuns, que são usados para construir a estrutura e o conteúdo de uma página web. Aqui estão alguns dos elementos HTML mais comuns:

Cabeçalhos: são usados para criar títulos e subtítulos na página. Existem seis níveis de cabeçalhos, desde o mais importante (h1) até o menos importante (h6).

Parágrafos: são usados para criar parágrafos de texto. O elemento p é usado para definir um parágrafo.

Listas: são usadas para criar listas não numeradas (ul) ou listas numeradas (ol). Cada item na lista é marcado com o elemento li.

Links: são usados para criar links para outras páginas ou para arquivos. O elemento a é usado para definir um link.

Imagens: são usadas para adicionar imagens à página. O elemento img é usado para definir uma imagem.

Tabelas: são usadas para exibir dados em uma tabela com linhas e colunas. Os elementos table, tr, th e td são usados para criar tabelas.

Formulários: são usados para coletar informações dos usuários. O elemento form é usado para criar um formulário, enquanto elementos como input, select, textarea e button são usados para criar diferentes tipos de campos de formulário.

Estes são apenas alguns dos elementos HTML mais comuns. Conhecer esses elementos e aprender a usá-los é fundamental para criar páginas web de forma eficiente e eficaz.

Atributos HTML

Os atributos HTML são adicionais aos elementos HTML que permitem ajustar ou especificar mais informações sobre o elemento em questão. Eles são incluídos na tag de abertura do elemento e têm a forma de chave-valor. Por exemplo, o atributo "class" pode ser usado para atribuir uma classe CSS a um elemento HTML, enquanto o atributo "src" pode ser usado para especificar a fonte de uma imagem.

Alguns dos atributos mais comuns incluem:

class: especifica uma ou mais classes para um elemento, permitindo que ele seja estilizado através de folhas de estilo CSS.
id: especifica um identificador único para um elemento, permitindo que ele seja direcionado através de folhas de estilo CSS ou scripts JavaScript.
src: especifica a fonte de um elemento, como a URL de uma imagem.
href: especifica o destino de um link.
alt: especifica o texto alternativo para um elemento, como uma descrição de uma imagem.

É importante destacar que nem todos os elementos HTML aceitam todos os atributos, e alguns elementos têm atributos específicos que são exclusivos para eles. Por isso, é importante sempre consultar a documentação para saber quais atributos estão disponíveis para cada elemento HTML.

Hierarquia de elementos HTML

A hierarquia de elementos HTML é a ordem de importância e significado dos elementos na estrutura de uma página web. Cada elemento HTML tem um propósito específico e pode conter outros elementos em seu interior, formando assim uma hierarquia de elementos. É importante entender essa hierarquia, pois isso afeta como a página é apresentada e interpretada pelos navegadores.

A estrutura básica de um documento HTML consiste em um elemento raiz, o elemento HTML, que envolve todo o conteúdo da página. O elemento de cabeçalho (HEAD) contém informações meta sobre a página, enquanto o elemento de corpo (BODY) contém todo o conteúdo visível da página, como títulos, parágrafos, imagens e links.

Na hierarquia de elementos HTML, existem elementos de cabeçalho, como H1, H2, H3, etc., que são usados para definir títulos e subtítulos na página. Elementos de parágrafo, como P, são usados para definir parágrafos de texto. Elementos de lista, como UL e LI, são usados para criar listas não numeradas e numeradas, respectivamente. Elementos de link, como A, são usados para criar links para outras páginas ou recursos na web. Elementos de imagem, como IMG, são usados para exibir imagens na página. Elementos de tabela, como TABLE, TR, TH e TD, são usados para criar tabelas de dados. E elementos de formulário, como FORM, INPUT, SELECT, TEXTAREA, etc., são usados para criar formulários interativos na página.

Ao aprender a usar esses elementos e compreender a hierarquia de elementos HTML, você pode criar páginas web estruturadas e bem organizadas que são fáceis de entender e navegar para os usuários. É importante lembrar que a hierarquia de elementos é apenas uma das muitas considerações importantes na criação de páginas web eficientes e acessíveis.

Validação de documentos HTML com o W3C Validator

A Validação de documentos HTML é uma verificação importante no desenvolvimento de páginas web. O objetivo é garantir que o código HTML esteja escrito corretamente e seguindo as recomendações estabelecidas pelo W3C (World Wide Web Consortium). Isso é importante para garantir a compatibilidade e acessibilidade das páginas.

O W3C Validator é uma ferramenta online gratuita que permite validar documentos HTML. Para usar, basta inserir a URL da página ou fazer upload do arquivo HTML e clicar em "Validar". A ferramenta irá verificar o código e informar se há algum erro ou alerta.

Existem muitas vantagens em validar seu documento HTML. Algumas delas incluem:

Melhoria da compatibilidade com diferentes navegadores e dispositivos;
Melhoria da acessibilidade para usuários com necessidades especiais;
Melhoria do SEO (Search Engine Optimization), pois motores de busca podem entender melhor o conteúdo da página;
Identificação precoce de erros e correção antes da publicação da página.
Em resumo, a validação de documentos HTML com o W3C Validator é uma prática importante e recomendada para todos que desejam desenvolver páginas web de alta qualidade e acessíveis. Além disso, é uma forma simples e rápida de identificar e corrigir erros antes da publicação da página.