Introdução à Programação Web: História, Lógica e Fundamentos de HTML

Vivemos em uma era em que a Internet se tornou um componente essencial da vida pessoal e profissional, impulsionada pelo surgimento constante de Aplicações Web para diversas finalidades, o que indica que este mercado está em franca expansão e oferece muitas oportunidades. Aplicações corporativas, comércio eletrônico, redes sociais, filmes, música e notícias estão presentes na Internet, tornando o navegador (browser) o software mais utilizado nos computadores. Este material didático busca cobrir o processo inicial de desenvolvimento de sites, aprofundando conceitos de algoritmos e HTML, além de introduzir a internet e suas características.

A Evolução Histórica e a Infraestrutura da Internet

A disseminação da internet está intrinsecamente ligada ao surgimento do computador pessoal e das redes de computadores. Enquanto tecnologias de comunicação como rádio e televisão tornaram a transmissão de informação mais rápida, o computador possui um dinamismo sem precedentes, podendo atuar como telefone, secretária eletrônica ou televisão simultaneamente. As redes de computadores surgiram para facilitar o acesso compartilhado a recursos de hardware, como impressoras e dispositivos de armazenamento, devido aos altos preços dos equipamentos na época.

Da ARPANET ao WWW

A história da internet remonta aos anos 50, com os primeiros computadores, que eram lentos, pesados e só existiam em laboratórios científicos em países pioneiros como Estados Unidos, Inglaterra e França. Nos anos 60, o Departamento de Defesa dos Estados Unidos começou a desenvolver a ARPANET (Advanced Research Projects Agency Network), uma rede que interligava computadores, inicialmente para propósitos militares.

O projeto da ARPANET, que conectava computadores locais em uma rede privada, inspirou o conceito de internetworking, que visava a criação de uma rede global para conexão simultânea de várias redes. O termo INTERNET foi usado pela primeira vez em 1974, embora tenham sido necessários 20 anos para que a tecnologia se aproximasse da complexidade atual.

Na década de 1980, o cientista Tim Berners-Lee, no CERN, Suíça, desenvolveu a World Wide Web (WWW) ao interligar (fazer link) documentos de hipertexto em sistemas de informação acessíveis por aquela rede primitiva. Berners-Lee é creditado como o criador do HTML (linguagem de marcação para criação de sites) e do HTTP (o protocolo principal para conexões na internet).

A abertura da internet ao público ocorreu em abril de 1993, quando foi anunciado mundialmente que a internet seria livre de royalties (patentes), tornando-a pública e isenta de taxas para uso e criação de projetos online. A partir de meados dos anos 90, a internet revolucionou a sociedade, diminuindo drasticamente as fronteiras e a distância entre as pessoas através da instantaneidade.

Protocolos e Comunicação

A internet, sendo uma rede de computadores, requer um sistema básico de comunicação chamado protocolo. Um protocolo é um conjunto de regras objetivas que os computadores entendem, caracterizando o formato, sincronização, sequência e detecção de erros na transmissão de informações (comutação de pacotes). Para que dois ou mais computadores se comuniquem, eles devem usar o mesmo protocolo.

Os protocolos mais populares incluem:

HTTP (Hypertext Transfer Protocol): Serve de base para a WWW, permitindo a visualização de páginas web.
FTP (File Transfer Protocol): Responsável pela transferência de arquivos, permitindo download (copiar de um PC remoto para o local) e upload (transferir do local para um PC remoto).
IP (Internet Protocol): Um dos protocolos mais importantes, cuja missão é identificar máquinas e redes, realizando o encaminhamento (roteamento) correto das transmissões entre elas.
SMTP (Simple Mail Transfer Protocol): Fornece os meios para transferir mensagens de correio eletrônico entre computadores remotos.
TCP (Transmission Control Protocol): É responsável pelo controle das transmissões de pacotes de informação, reagrupando-os, se necessário, de acordo com sua ordem original para garantir que a mensagem que chega ao receptor seja a mesma que foi enviada.
TCP/IP (Transmission Control Protocol/Internet Protocol): Considerado o protocolo padrão da internet.

Algoritmo e Lógica de Programação

A automação é o processo em que uma tarefa passa a ser executada por máquinas (sejam mecânicas, eletrônicas ou mistas), deixando de ser desempenhada por humanos. Para que a automação seja bem-sucedida, é essencial que seja especificada com clareza a sequência ordenada de passos a ser seguida. A essa especificação dá-se o nome de algoritmo.

Embora o conceito de algoritmo não tenha sido criado para a computação (exemplos incluem receitas de bolo ou manuais de aparelhos eletrônicos), a programação de computadores é um de seus principais campos de aplicação. Um programa de computador é, essencialmente, um algoritmo detalhado passo a passo e escrito em uma forma compreensível pela máquina (linguagem de programação).

Formalmente, um algoritmo é uma sequência finita de passos que levam à execução de uma tarefa; essas instruções devem ser claras, precisas, não redundantes e não subjetivas.

Formas de Representação de Algoritmos

Existem diversas formas de representar algoritmos, que variam conforme o nível de detalhe ou abstração:

Descrição Narrativa: Os algoritmos são expressos diretamente em linguagem natural. Esta forma é pouco usada na prática devido à oportunidade de más interpretações, ambiguidades e imprecisões, como a instrução “afrouxar ligeiramente as porcas”.
Fluxograma Convencional: Uma representação gráfica onde formas geométricas distintas implicam ações diferentes. É menos imprecisa que a descrição narrativa e ajuda no entendimento das ideias do algoritmo, embora se preocupe, muitas vezes, com detalhes de nível físico. Um fluxograma se resume a um único símbolo inicial e um ou mais símbolos finais.
Pseudocódigo (Linguagem Estruturada ou Portugol): Uma forma de representação rica em detalhes, incluindo a definição dos tipos das variáveis. Por se assemelhar muito à forma como os programas são escritos, esta representação é geral o suficiente para permitir que a tradução do algoritmo para uma linguagem de programação específica seja praticamente direta.

Tipos de Dados e Variáveis

O trabalho do computador baseia-se na manipulação de informações classificadas em instruções (comandam o funcionamento da máquina) e dados (porção da informação a ser processada). Os dados podem ser classificados em:

Dados Numéricos: Incluem números inteiros (sem decimais ou fracionários, positivos ou negativos) e números reais (que podem possuir componentes decimais ou fracionários).
Dados Literais (Alfanuméricos, Cadeia de Caracteres, String): Constituídos por uma sequência de caracteres (letras, dígitos e/ou símbolos especiais). São usualmente delimitados por aspas (“).
Dados Lógicos (Booleanos): Usados para representar dois únicos valores lógicos possíveis: verdadeiro (V) e falso (F).

Para manipular informações, o computador utiliza variáveis, que são entidades destinadas a guardar uma informação. Uma variável possui três atributos: nome, tipo de dado associado e a informação guardada.

Fundamentos de HTML

HTML (Hypertext Markup Language) é uma linguagem de marcação de texto. É composta por marcações (tags) simples utilizadas para formatação e diagramação de informações (textos, imagens, sons) e, crucialmente, possibilita a inclusão de hipertexto, que são referências que uma página pode fazer para si mesma ou para outros documentos.

Para visualizar um documento HTML, é necessário um browser (navegador) instalado. O navegador solicita a página a um servidor web, que a envia de volta para ser visualizada. Um documento HTML é um arquivo de texto comum (ASCII) com extensão .htm ou .html e é uma linguagem interpretada.

Estrutura e Tags Básicas

Os comandos em HTML são definidos por tags (etiquetas), que são marcas padrões usadas para indicações ao browser. As tags são cercadas pelos sinais de menor (<) e maior (>) e não diferenciam maiúsculas de minúsculas.

A estrutura básica de um programa HTML é dividida em três partes principais:

Estrutura Principal: Delimitada por <HTML>...</HTML>.
Cabeçalho: Delimitado por <HEAD>...</HEAD>, contém informações de configuração da página, como o título, definido pelas tags <TITLE>...</TITLE>. O título é importante, pois é referenciado em buscas na internet.
Corpo do Documento: Delimitado por <BODY>...</BODY>, contém todo o conteúdo visível do site, incluindo textos, imagens e links.

A tag <BODY> pode receber atributos que definem a aparência da página, como BACKGROUND (imagem de fundo), TEXT (cor do texto), LINK (cor dos links), e BGCOLOR (cor de fundo da página).

Outras tags essenciais incluem:

<BR>: Usada para fazer uma quebra de linha.
<P>...</P>: Usada para dividir o texto em parágrafos, e pode usar o atributo ALIGN (CENTER, RIGHT, LEFT) para alinhamento.

Listas e Imagens

O HTML permite criar listas ordenadas e não ordenadas para organizar o texto em tópicos.

Lista Não Ordenada: Usa a tag <UL> (unordered list) para delimitar a lista, e <LI> (line item) para cada item.
Lista Ordenada: Usa a tag <OL> (ordered list) para delimitar a lista. Pode ser personalizada com atributos como TYPE, START ou VALUE.

A tag <IMG> é utilizada para inserir imagens no corpo do documento, melhorando a aparência das páginas. Seus principais atributos incluem:

SRC: O nome ou caminho completo da figura (obrigatório).
ALIGN: Alinhamento da imagem em relação ao texto (bottom, top, middle).
WIDTH e HEIGHT: Especificam a largura e altura de exibição, em percentual ou pixel.
ALT: Exibe um texto se o browser não encontrar a imagem, ou uma legenda ao passar o cursor sobre ela.

URL e Links (Hyperlinks)

O conceito de hipertexto permite que um documento se ligue a outros por meio de referências especiais chamadas hyperlinks. Com isso, é possível referenciar endereços no computador ou em qualquer servidor na web. Existem três tipos de links: interno (âncora, navegação dentro do documento), externo local (referência a outros documentos no mesmo site) e externos para terceiros (referência a documentos fora do seu site na web).

A sintaxe para criar um link é <a href=”...” name=”...”>Texto </a>, onde:

HREF: Especifica o endereço do URL ao qual o link está associado.
NAME: Especifica o nome da seção do documento à qual o link de hipertexto faz referência.

Para facilitar a compreensão dos protocolos na internet, podemos pensar neles como um conjunto de regras de etiqueta internacional. Assim como pessoas de diferentes países precisam concordar em falar a mesma língua (como o inglês) e seguir certas normas sociais para uma comunicação clara e organizada, os computadores, para trocarem dados de forma eficiente através da rede, precisam “falar a mesma linguagem” e seguir o mesmo conjunto de regras estabelecidas pelos protocolos, como o TCP/IP.