Introdução e Conceitos

Programação/Desenvolvimento Web Responsivo • Prof. Me. William Tenório

Internet e Web: conceitos essenciais

O que é Internet?

A Internet é uma rede mundial de computadores interligados que se comunicam por meio de protocolos padronizados.

Internet não é a mesma coisa que Web. A Web é um serviço que funciona sobre a Internet.

Como funciona a Web?

A Web funciona no modelo cliente-servidor.

Ciclo de requisição e resposta

O navegador resolve o domínio (DNS), obtém o IP do servidor, abre conexão (TCP/TLS se HTTPS), envia requisição HTTP e recebe resposta HTTP com cabeçalhos e corpo (HTML, JSON, etc.).

Diagrama 1
Figura 1 – Ciclo de requisição e resposta.

A Web é gráfica e fácil de ser navegada

Antes da Web, a internet era majoritariamente textual. Com a criação da Web, tornou-se possível:

A Web Distribuída

A Web é descentralizada e distribuída em diversos servidores pelo mundo.

A Web é dinâmica

Inicialmente as páginas eram estáticas. Hoje a Web permite conteúdo dinâmico.

A Web é independente de plataforma

Pode ser acessada em diferentes sistemas operacionais.

História do HTML e CSS

O HTML (HyperText Markup Language) é a linguagem de marcação utilizada para estruturar conteúdos na Web. Ele foi criado em 1991 por Tim Berners-Lee, no CERN (Organização Europeia para a Pesquisa Nuclear), com o objetivo de permitir o compartilhamento de documentos científicos entre pesquisadores.

O HTML foi inspirado no conceito de hipertexto, que permite a criação de documentos interligados por meio de links (hyperlinks). Essa ideia revolucionou a forma como as informações eram organizadas e acessadas na internet.

Principais marcos na evolução do HTML:

O HTML evoluiu de uma linguagem simples de marcação de textos para a base estrutural de aplicações web modernas, sendo hoje mantido como um padrão vivo (Living Standard).

O CSS (Cascading Style Sheets) foi criado em 1996 com o objetivo de resolver um problema crescente na Web: a mistura entre conteúdo e formatação dentro do HTML. Antes do CSS, era comum utilizar tags como <font> para definir cores, tamanhos e estilos diretamente no código HTML, tornando os documentos difíceis de manter.

A proposta do CSS foi separar completamente a estrutura (HTML) da apresentação visual (design), permitindo maior organização, reutilização de estilos e padronização visual entre páginas.

Principais marcos na evolução do CSS:

Com a evolução do CSS, tornou-se possível desenvolver layouts responsivos, adaptar páginas para dispositivos móveis e criar interfaces modernas sem depender de soluções baseadas exclusivamente em scripts.

Hoje, HTML e CSS trabalham de forma complementar: o HTML organiza e estrutura o conteúdo, enquanto o CSS define como esse conteúdo será apresentado visualmente ao usuário.

Web Standards: W3C e WHATWG

Web Standards são:

Servem para garantir:

World Wide Web Consortium (W3C)

Criado em 1994 por Tim Berners-Lee com o objetivo de manter a Web aberta, acessível e padronizada. Função:

Web Hypertext Application Technology Working Group (WHATWG)

Criado em 2004 por empresas como Apple, Mozilla e Opera. Motivação: Acelerar a evolução do HTML. Trabalha junto com o W3C no desenvolvimento do HTML Living Standard.

Desenvolvimento Web

Desenvolvimento web é a área de tecnologia que cria e mantém sites, aplicativos e sistemas para a internet, envolvendo desde o design visual (front-end) até a lógica do servidor e banco de dados (back-end), com profissionais como desenvolvedores front-end, back-end e full stack usando linguagens como HTML, CSS, JavaScript, Python, etc., para construir experiências digitais funcionais e seguras.

Comparativo de Layouts

Diagrama 1
Figura 2 – Comparação de layouts - fixo vs responsivo.

Inicialmente, havia as opções:

Problemas:

Com a evolução dos dispositivos móveis, empresas passaram a criar uma versão mobile do seu site, com URL diferente: layout adaptado.

Problemas:

Conceito central: Responsividade

Desenvolvimento web responsivo é a prática de criar sites que se adaptam automaticamente a qualquer tamanho de tela (desktop, tablet, celular), reorganizando o layout conforme o dispositivo do usuário.
O layout responsivo não é uma tecnologia separada; é uma abordagem ao web design e um conjunto de melhores práticas usado para criar um layout que possa responder ao dispositivo que está sendo usado para visualizar o conteúdo.

Vantagens:

Exercícios

Exercício 1

Digite e analise o código abaixo, com e sem CSS.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Exercício Aula 01</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <header>
    <h1>Minha Primeira Página</h1>
  </header>

  <main>
    <section class="conteudo">
      <p>Conteúdo principal da página</p>
    </section>

    <section class="conteudo">
      <p>Outro bloco de conteúdo</p>
    </section>
  </main>

  <footer>
    <p>Rodapé</p>
  </footer>

</body>
</html>

body {
  font-family: Arial, sans-serif;
  margin: 0;
  background: #f0f0f0;
}

header, footer {
  background: #333;
  color: white;
  padding: 15px;
  text-align: center;
}

main {
  padding: 20px;
}

.conteudo {
  background: #fff;
  padding: 15px;
  margin-bottom: 15px;
}

Exercício 2

Analise os layouts disponíveis AQUI; reduza o tamanho da janela do navegador para simular dispositivos de diferentes tamanhos.

Exercício 3

Escolha um site conhecido e avalie sua responsividade. Responda: o site se adapta para diferentes dispositivos e tamanhos de tela? Há informações perdidas na visualização em dispositivos menores?

Estruturas Básicas do Desenvolvimento Web

Uma página web é uma combinação de estrutura + estilo + comportamento:

O fundamento para o desenvolvimento responsivo está na combinação de HTML e CSS.

Elemento HTML

<p>Conhecendo o HTML para criar sites</p>

Um elemento HTML é composto por:

A tag de abertura indica onde o elemento começa. A tag de fechamento indica onde o elemento termina. Esquecer a tag de fechamento é um erro comum de iniciantes.

Atributos

Elementos HTML podem conter atributos, que fornecem informações extras. Exemplos: 

<p class="meus-paragrafos">Conhecendo o HTML para criar sites</p>

Um atributo sempre deve conter:

Aninhamento de Elementos

É possível colocar elementos dentro de outros elementos, o que é chamado de aninhamento. O código abaixo deixa a palavra HTML em negrito, por meio do elemento <b>.

É importante fechar os elementos na ordem correta: o último que abre deve ser o primeiro a fechar. No exemplo acima, abrimos primeiro o elemento <p>, depois o elemento <b>; portanto, temos que fechar primeiro o elemento <b>, depois o elemento <p>.

Elementos Vazios

Alguns elementos não possuem conteúdo interno e são chamados de elementos vazios. 

<img src="imgs/minha-imagem.png" alt="Minha imagem de teste">

No exemplo é exibido o elemento <img>. Ele contém dois atributos, mas não há tag </img> de fechamento e não há conteúdo interno.

Estrutura Básica de um Documento HTML

O HTML (HyperText Markup Language) é fundamental porque atua como o “esqueleto” de toda página da web, organizando e estruturando o conteúdo — textos, imagens, vídeos e links — para que navegadores possam exibi-los corretamente.
Todo documento HTML possui uma estrutura mínima obrigatória: 

<!DOCTYPE html>
<html lang="pt-BR">
 <head>
 <meta charset="UTF-8">
 <meta name="keywords" content="curso java curso C#">
 <title>Minha Página</title>
 </head>
 <body>
 <!-- Aqui vai o conteúdo da página -->
 </body>
</html>

<!DOCTYPE html> Para um navegador exibir corretamente uma página web, devemos informar explicitamente o tipo do documento. O tipo do documento é informado com a declaração <!DOCTYPE html>.

<html> Os elementos HTML, com exceção do DOCTYPE, devem ser inseridos no conteúdo do elemento html. Esse elemento é aberto com a tag <html> no início do documento e fechado com a tag </html> no final, e deve conter exatamente um elemento head seguido de exatamente um elemento body. Recomenda-se a utilização do atributo lang para indicar o idioma utilizado no documento HTML ou na maior parte dele (ferramentas de leitura ou de tradução de texto).

<head> A principal função do elemento head é agrupar informações sobre o documento HTML (metadados). São exemplos de metadados: o encoding, o autor, a descrição e as palavras chaves do documento HTML.

O elemento meta é utilizado para definir os metadados.

O elemento head deve conter também o elemento title, que define o título do documento HTML.

<body> Todo o conteúdo de uma página web deve ser definido no corpo do elemento body. Por exemplo, podemos inserir no corpo do body cabeçalhos, textos, listas, tabelas, entre outros componentes.

Comentários - Podemos adicionar comentários em um documento HTML dentro das tags <!-- e -- >. Os comentários são ignorados pelos navegadores.

Elementos Básicos

Títulos

Uma página web pode conter uma hierarquia de títulos e subtítulos para estabelecer uma divisão do seu conteúdo. Devemos utilizar os elementos h1, h2, h3, h4, h5 e h6. Os sufixos numéricos de 1 a 6 indicam o nível do título dentro da hierarquia de títulos do documento. 

<h1>Título Principal</h1>
<h2>Subtítulo Nível 2</h2>
<h3>Subtítulo Nível 2 </h3>

Devemos utilizar os títulos com cautela, pois eles são usados como critério de ranqueamento por buscadores como Google. O uso correto dos elementos de título é fortemente recomendado pelos especialistas em SEO (Search Engine Optimization):

Parágrafos

O elemento <p> é utilizado para definir o início de um novo parágrafo, deixando uma linha em branco entre este e o texto anterior. Caso seja necessário forçar uma quebra de linha entre duas palavras contidas em um parágrafo, podemos utilizar o elemento <br>.

Marcadores de Estilo

É possível criar efeitos no texto, alterando a forma e o tamanho da fonte. Todas as tags deste tipo devem abertas e fechadas, marcando o início e o fim do texto a ser formatado:

Exercícios

Portal de uma empresa de tecnologia

Você foi contratado para criar a estrutura inicial de um site institucional de uma empresa fictícia de tecnologia.

Crie um arquivo chamado: index.html

Requisitos obrigatórios – o documento deve conter:

Regras:

Desafios: