Disciplina

Programação Web

Unidade 1
Desenvolvimento em Aplicações Web

Aula 1
A importância de aprender HTML

Introdução da Unidade

Objetivos da Unidade

Ao longo desta Unidade, você irá:

esclarecer a importância do HTML;

descrever o desenvolvimento do HTML5;
aplicar formulários e tabelas em HTML.
Disciplina

Programação Web

Introdução da Unidade

Ao longo dos anos, a internet tornou-se fundamental para a sociedade. Estamos sempre
conectados à grande rede mundial de computadores e isso tem trazido mudanças profundas no
mercado de trabalho; empresas que não estão na web correm o risco de deixarem de existir. Por
esse motivo e outros, cada vez mais profissionais capacitados estão sendo requisitados na área
de desenvolvimento web.
As aplicações web, ou seja, aquelas que são executadas a partir da internet, podem ser
construídas usando-se uma gama de linguagens de marcação, estilo e programação. Portanto, o
caminho para se tornar um desenvolvedor web é longo e envolve muita dedicação, e nesta
unidade, você dará o primeiro passo.
Na primeira aula, você aprenderá os fundamentos da linguagem de marcação de hipertexto
(HTML), suas versões, diferenças e elementos básicos.
Na segunda aula, você aprenderá sobre elementos estruturais da linguagem HTML e as tags
relacionadas à inserção de texto, listas, links e imagens; conhecerá, ainda, o conceito de iframes
e de design responsivo.
Por fim, na terceira aula, você aprenderá a construir tabelas e formulários, bem como conhecerá
os tipos de campos de entrada e outros elementos.
Vamos lá?

Introdução da Aula
Disciplina

Programação Web

Qual é o foco da aula?

Nesta aula, você irá conhecer o desenvolvimento de sites.

Objetivos gerais de aprendizagem

Ao longo desta aula, você irá:

apontar problemas em códigos-fonte ;

explicar a construção de novas páginas web;
aplicar a linguagem HTML.

Situação-problema
Nesta aula, você aprenderá os fundamentos do desenvolvimento de websites; conhecerá, ainda,
os serviços de hospedagem de páginas web e como são editados a partir de editores de
códigos.
Aprender os fundamentos para construção de websites é fundamental para o sucesso no
mercado de trabalho, que, a cada dia, requer mais profissionais da tecnologia da informação
capacitados para lidar com aplicações web.

Uma das linguagens fundamentais para o desenvolvimento web é a linguagem HTML,

ou linguagem de marcação de hipertexto, que é a principal linguagem utilizada para
Disciplina

Programação Web

construção de documentos web. Conhecer a fundo os elementos básicos do HTML é

fundamental para se compreender, na prática, os princípios do desenvolvimento de
aplicações web.

A fim de colocar em prática os conhecimentos a serem adquiridos nesta aula, imagine que você
acaba de ser contratado como estagiário em uma empresa que vende planos de internet. A
empresa que o contratou é bastante conceituada no mercado, entretanto, a maior parte das
operações de vendas é realizada com métodos antigos, como ligações telefônicas. No começo
das atividades dessa empresa, isso não era um problema, pois a maioria dos clientes não
possuía acesso à internet, logo, requisitavam os serviços da empresa. Entretanto, nos últimos
tempos, a empresa passou a focar na atração de clientes de outras provedoras de internet,
tornando-se necessário construir aplicações web para isso.
Entre as funções que você deverá desempenhar, podemos listar: detecção de problemas em
códigos-fonte da empresa e construção de novas páginas web.
Você, então, inicia o desenvolvimento de uma página web construindo o código HTML:

Página HTML para comercializar planos de internet. Fonte: Elaborado pelo autor.

Em seguida, você testa essa página em um navegador do Google Chrome e obtém este
resultado:
Disciplina

Programação Web

Visualização no Google Chrome. Fonte: Captura de tela do Google Chrome elaborada pelo autor.

Entretanto, ao testá-la em outro navegador, você se depara com o seguinte problema:

Visualização no Internet Explorer. Fonte: Captura de tela do Internet Explorer elaborada pelo autor.
Disciplina

Programação Web

Como resolver esse problema?

Conceito-Chave

Os primeiros computadores, ainda nos primórdios do século XX, eram estrondosas máquinas
que ocupavam prédios inteiros, mas tinham um baixo poder de processamento. Naquela época,
eles eram usados, principalmente, nos grandes centros de pesquisa e em bases militares para
cálculos balísticos. Era o auge da Guerra Fria e os militares precisavam de meios rápidos para a
troca de informações entre bases militares; surgiu, assim, a ARPANET, uma rede remota que
interligava bases militares e permitia a troca de informações entre computadores (LAMBERT et
al., 2005).
Mais tarde, as grandes universidades americanas obtiveram permissão para acessar a rede de
computadores, que foi dividida em duas: (i) MILNET, rede de acesso exclusivo militar, e (ii)
internet, rede disponível publicamente (LAMBERT et al., 2005).
Com a evolução dos componentes eletrônicos, surgiu a possibilidade de comunicação entre
usuários comuns. Naquele tempo, vários protocolos foram implementados, como o protocolo
TCP/IP, que passou a permitir que dispositivos construídos por diferentes fabricantes pudessem
se conectar em uma linguagem universal. Entretanto, somente nos anos 1990 a web se
popularizou devido ao surgimento de um novo protocolo de comunicação por meio de
hipertextos, chamado HTTP (Hypertext Transfer Protocol) (GOURLEY et al., 2002).
______
🔁 Assimile
O hipertexto é um tipo de documento que vai além de blocos de textos comuns, agregando
diversos outros componentes, como imagens, cores, sons, vídeos, entre outros. As páginas de
Disciplina

Programação Web

hipertexto podem ser interligadas a partir das chamadas hiperligações, que são links que
permitem que o usuário acesse determinado documento com um único clique. Os links se
diferem de textos simples por serem exibidos em uma cor distinta, em geral, azul, além de serem
sublinhados.
______
O protocolo HTTP foi criado por Tim Berners-Lee, professor do Massachusetts Institute of
Technology (MIT) e fundador do W3C (World Wide Web Consortium). O protocolo HTTP permitiu
o surgimento de uma nova forma de acessar conteúdo em formato de hipertexto na chamada
World Wide Web (WWW) ou rede mundial de computadores. Por meio de navegadores de
internet, um usuário conseguia acessar páginas web armazenadas em computadores remotos.
Entretanto, por muitos anos, a internet ficou restrita a um público que tinha maiores recursos
financeiros, uma vez que computadores e até mesmo o acesso a linhas telefônicas (necessárias
para conexões com a internet) tinham alto custo. A popularização da internet teve início nos
anos 2000 com a melhoria da infraestrutura de comunicação e componentes eletrônicos.
Nos últimos anos, houve um crescimento significativo na quantidade e variedade de dispositivos
eletrônicos conectados à internet, como laptops, smartphones, tablets, relógios inteligentes e os
tradicionais computadores de torres, conectados por redes de comunicação disponíveis 24
horas. Além disso, devido ao fato de estarmos tão conectados, grande parte das aplicações, de
banco de dados e servidores migraram para a “nuvem”, isto é, super computadores que
armazenam informações, fornecem serviços e podem ser localizados em qualquer ponto
geográfico.

A internet é formada por uma grande rede de dispositivos conectados remotamente que engloba todo o mundo. Fonte:
Shutterstock.
Disciplina

Programação Web

Além disso, faz-se importante destacar que, com o advento da internet, a quantidade de
dispositivos e de aplicações online também contribuiu para o aumento da quantidade de dados e
informações enviadas para a nuvem para, em seguida, serem analisadas e auxiliarem na tomada
de decisão das empresas, demandando uma maior utilização da internet.
Com a internet, os usuários puderam compartilhar informações por meio de locais específicos,
chamados de páginas da internet, documentos web, websites ou apenas sites. As páginas da
internet podem ser acessadas por meio de dois componentes básicos:

um navegador de internet, também conhecido como browser (Figura 1.4). São exemplos de
navegadores: Chrome, Firefox, Opera, Edge e Safari.
um endereço URL (uniform resource locator ou, na tradução, “localizador uniforme de
recursos”).

Estrutura de um navegador (browser). Fonte: Shutterstock.

Browser é um programa de computador que recebe um endereço de URL, realiza uma requisição
a um servidor remoto (também pode ser usado para visualizar arquivos locais), obtém os
arquivos codificados em uma linguagem de marcação, interpreta-os e formata o documento que
será exibido para o usuário. Em geral, navegadores são utilizados para acessar documentos de
hipertexto (e veremos mais sobre isso na próxima aula).
______
📝 Exemplificando
As URLs não estão presentes apenas em navegadores; elas podem ser usadas como sistemas
de navegação em redes para acesso de recursos e dispositivos. Observe, a seguir, uma ilustração
de como funciona uma URL: protocolo://domínio:porta/caminho/recurso?busca#identificador
Disciplina

Programação Web

o protocolo indica o método de acesso, como HTTP (protocolo de transferência de

hipertexto), HTTPS (transferência criptografada de hipertexto), FTP (protocolo de
transferência de arquivos) e outros.
o domínio indica o endereço em que se encontra o recurso.
a porta filtra o acesso a um dispositivo alvo. Por exemplo: o protocolo HTTP usa a porta 80
e o HTTPS a 443.
o caminho indica a localização de pastas e diretórios em que se encontra algum recurso
(ou arquivo) desejado.
a busca e o identificador são atributos opcionais que permitem o envio de informações ao
documento acessado e o acesso a posições específicas, respectivamente.

Entretanto, ao acessar um site, nem todas essas características precisam ser informadas.
Observe o exemplo a seguir: [Link]
Nesse exemplo, podemos observar que o protocolo utilizado é o HTTPS, ou seja, o recurso
acessado corresponde a um documento de hipertexto que foi acessado em uma conexão
segura.
Para acessar um site, informar o protocolo não é obrigatório. Observe o domínio acessado:
[Link]. Veja que a porta não é informada; o navegador entende que, ao acessar o
protocolo HTTPS, a porta de acesso ao servidor é a 443. Por fim, o endereço informado
apresenta o caminho uk, e isso indica que os arquivos daquele site estão disponíveis em um
diretório denominado uk.

Como funciona um site?

Disciplina

Programação Web

Um site pode ser considerado um documento de hipertexto que pode ser acessado a partir de
um navegador. Para que um site seja acessado por um cliente (e/ou um usuário), ele deve estar
disponibilizado em um computador que fique, o tempo todo, conectado à internet, a fim de
permitir que outros dispositivos o acessem. A esse computador remoto dá-se o nome de
servidor web (figura abaixo). Um servidor é um dispositivo que fornece algum serviço. No caso
do servidor web, esse computador fornece o serviço de hospedagem de documentos web.

Usuário acessando um site hospedado em um servidor remoto. Fonte: Shutterstock.

Na teoria, seria possível hospedar um site em seu próprio computador apenas instalando um
software servidor web e adquirindo um domínio e um endereço de IP fixo. Entretanto, a
configuração desses sistemas é um pouco complexa e, a depender da quantidade de acessos ao
site, pode tornar o uso de seu computador inviável. Em geral, para se colocar um site no ar, é
preciso adquirir um domínio e alugar um servidor de hospedagem.
______
📝 Exemplificando
No Brasil, o departamento responsável pelo registro e pela manutenção de nomes de domínios
com terminação “.br” é o [Link]. Em geral, a aquisição de um domínio é cobrada anualmente
e deve ser renovada enquanto o desenvolvedor desejar manter o nome de domínio.
______
Entretanto, antes de se adquirir um domínio, é preciso conhecer os conceitos que envolvem o
desenvolvimento de um site.
______
💭 Reflita
Antigamente, os endereços de site eram precedidos pela combinação de letras www (um
acrônimo para world wide web ou, na tradução, “rede mundial de computadores”), como:
Disciplina

Programação Web

[Link]. Nos dias de hoje, esse mesmo site pode ser acessado sem o www:
[Link]. Reflita sobre os motivos disso.
______

Programação para WEB

O desenvolvimento web consiste na construção de documentos que podem ser acessados a

partir de websites. Na prática, o desenvolvimento web utiliza linguagens próprias para a
construção de documentos: linguagens de marcação de hipertexto, de estilo e até mesmo de
programação para construção de páginas web dinâmicas. Em geral, as linguagens de
desenvolvimento web podem ser classificadas como linguagens back-end e linguagens front-
end.
Linguagens back-end são aquelas que são executadas diretamente no servidor. Elas podem ser
utilizadas, por exemplo, para gerar uma página dinâmica que será enviada ao browser. São
exemplos de linguagem back-end: PHP (PHP: Hypertext Preprocessor) e ASP (Active Server
Pages). Já as linguagens front-end são aquelas executadas diretamente no navegador do cliente,
como, JavaScript, CSS (Cascading Style Sheets) e HTML (HyperText Markup Language). A figura
abaixo ilustra algumas das principais linguagens de desenvolvimento web.
Disciplina

Programação Web

Linguagens de desenvolvimento web. Fonte: Shutterstock.

No desenvolvimento de uma página web, a primeira linguagem que se deve compreender é o

HTML.

Hypertext Markup Language (HTML)

Disciplina

Programação Web

HTML é um acrônimo para HyperText Markup Language ou, na tradução, “linguagem de

marcação de hipertexto”. O HTML fornece conjuntos de códigos que permitem a estruturação de
uma página de internet que os navegadores conseguem interpretar e exibir o documento
formatado de forma compreensiva ao usuário.

Versionamento da linguagem HTML e suas diferenças

Disciplina

Programação Web

A linguagem HTML foi oficialmente proposta no início dos anos 1990 pelo cientista da
computação Tim Berners-Lee, enquanto trabalhava no CERN (Conseil Européen pour la
Recherche Nucléaire – Conselho Europeu de Pesquisa Nuclear). Tim Berners-Lee se inspirou na
linguagem SGML (Standard Generalized Markup Language) e ainda foi idealizador do conceito
WWW (World Wide Web).
Inicialmente, o HTML foi construído para facilitar a comunicação entre colaboradores do CERN,
entretanto, sua popularidade cresceu tanto que, em 1991, foi disponibilizado para o público.
Disciplina

Programação Web

Linha do tempo da linguagem HTML. Fonte: Elaborado pelo autor.

Em 1995, a versão 2.0 do HTML foi publicada por Berners-Lee e um grupo de desenvolvedores. O
HTML 2.0 surgiu como um esforço para se criar uma especificação que permitisse
interoperabilidade entre diversas implementações do HTML.
Nos anos seguintes, o HTML passou a ser uma recomendação oficial do W3C (World Wide Web
Consortium), logo, iniciaram o desenvolvimento da terceira versão do HTML. Entretanto, a nova
versão trouxe tantas diferenças em relação ao HTML 2.0 que tiveram problemas na implantação
da proposta. Diante disso, os desenvolvedores decidiram abandonar a versão 3.0 e iniciar o
desenvolvimento de uma nova versão, denominada HTML 3.2, oficialmente lançada em 1997.
O HTML 3.2 trouxe uma série de novos recursos, como a possibilidade de inserção de tabelas e
de texto ao redor de imagens.
Em dezembro de 1999, o W3C propôs oficialmente a versão HTML 4.01. Essa versão trouxe
novos recursos com suporte a frames e tornou obsoletas algumas tags das versões anteriores
do HTML. A quarta versão do HTML trazia recursos considerados revolucionários na época,
como suporte a linguagens de scripts e a folhas de estilo em cascata. Nos anos seguintes, a
W3C ainda propôs uma integração entre HTML e XML (eXtensible Markup Language), que ficou
conhecida como XHTML (eXtensible Hypertext Markup Language), visando à construção de
documentos que fossem XMLs válidos.
A versão HTML5 veio apenas em 2014, trazendo uma série de novos recursos que visavam,
principalmente, à simplificação da sintaxe da linguagem. HTML5 trouxe suporte a inserções de
áudio e vídeo diretamente no HTML, além de suporte a imagens vetoriais, como o formato SVG
(Scalable Vector Graphics).

Elementos básicos
Disciplina

Programação Web

HTML é fundamentado no conceito das chamadas tags (marcações), que são códigos especiais
inseridos entre parênteses angulares, ou seja, os sinais de < (menor que) e > (maior que). As tags
podem ser do tipo simples ou composto (MARIANO; DE MELO-MINARDI, 2017).

tag simples:
Disciplina

Programação Web

tag composta:

As tags compostas são constituídas de uma declaração de abertura, do conteúdo que se deseja
inserir e, por fim, de uma declaração de fechamento </exemplo-de-tag-composta>, que se
distingue da declaração de abertura apenas pela barra inserida antes do nome da tag. Por outro
lado, as tags simples não requerem uma declaração de fechamento.
As tags podem ser personalizadas a partir da inserção de atributos, que recebem valores,
geralmente, declarados entre aspas, da seguinte forma:
Disciplina

Programação Web

Pode-se, ainda, inserir uma tag dentro de outra tag. Nesse caso, a tag no interior é denominada
como tag filha. Observe:

Neste caso, a tag pai possui três tags filhas. A menos que especificado, as tags filhas herdam
regras de formatação aplicadas à tag pai. Não há limites na quantidade de tags embutidas em
Disciplina

Programação Web

outras tags:

Em geral, costuma-se inserir tabulações (tab) para indicar que uma tag está contida dentro de
outra. Isso é denominado indentação, e indentar o código não é obrigatório em HTML, entretanto,
um código bem indentado facilita a leitura e, portanto, constitui em uma boa prática de
desenvolvimento de códigos.
Páginas HTML devem ser salvas com a terminação “.html”. Em geral, denominamos a primeira
página com o nome “[Link]” (na tradução para o português: “índice”).
______
📝 Exemplificando
Documentos web podem ser construídos utilizando-se simples editores de texto, como o Bloco
de Notas (Windows) ou o Gedit (Linux). Há desenvolvedores que preferem utilizar editores de
terminal de linha de comando, como vi ou nano. Há, ainda, editores com recursos personalizados
para desenvolvimento de códigos, como a indicação de linhas e o syntax highlight, que é quando
o editor colore palavras e blocos de código de acordo com a função delimitada pela linguagem
utilizada. Como exemplo desses editores, podemos citar o Notepad++, o Visual Studio Code e o
Sublime Text (figura abaixo).
A escolha do editor depende da escolha pessoal do desenvolvedor.
Disciplina

Programação Web

Exemplo de página construída usando Subline Text. Fonte: captura de tela do Sublime Text elaborada pelo autor.

“Olá, Mundo!”: Criando sua primeira página HTML

Disciplina

Programação Web

Agora que você foi introduzido aos conceitos básicos do HTML, vamos começar a criar nossa
primeira página de internet.
Disciplina

Programação Web

Minha primeira página. Fonte: Elaborado pelo autor.

Você pode, também, copiar o código em um bloco de notas, salvá-lo como “[Link]” e abri-lo
em um navegador. Você verá a seguinte página:

Meu primeiro documento web exibido no navegador Chrome. Fonte: Captura de tela do navegador Chrome elaborada pelo
autor.

Agora, vamos analisar o que é realizado para cada linha de código:

1. <!DOCTYPE html>

Na primeira linha, vemos a declaração do tipo de documento; isso informa ao navegador que o
documento em questão se trata de uma página web que usa HTML. Essa declaração indica,
ainda, que se trata de uma página que usa HTML5. Outras versões do HTML utilizam declarações
diferentes. A declaração do HTML 4.01 é feita da seguinte forma:
Disciplina

Programação Web

A tag <html> aparece a seguir. Todo o conteúdo da página HTML deve ser inserido dentro dessa
tag, por isso, ela é fechada apenas na última linha.
2. html>
A tag <head> deve conter informações do cabeçalho da página, indicando seus itens de
configuração. Os conteúdos inseridos aqui não são exibidos no corpo da página.
3. <head>
A tag <title> permite a configuração do título que aparecerá no navegador (figura abaixo).
4. <title>Minha primeira página</title>
Disciplina

Programação Web

Título. Captura de tela do navegador Chrome elaborada pelo autor.

A tag <meta> permite a inserção de metadados na página (SILVA, 2018). Neste exemplo, a tag
meta recebe o atributo charset, que, por sua vez, recebe o valor utf-8 (8-bit Unicode
Transformation Format). Esse atributo altera a codificação de caracteres na página e permite que
seu site tenha palavras com acento.
5. <meta charset="utf-8">
______
🔁 Assimile
A tag meta é inserida dentro da tag <head>; ela tem múltiplos propósitos e funcionalidades, em
geral, relacionados a metadados da página. Observe algumas variações dessa tag:

meta name: recebe os metadados do documento na forma de pares nome/valor. Exemplo:

Disciplina

Programação Web

meta http-equiv=refresh: atualiza a página após um determinado número de segundos.

meta charset: declaração de codificação de caracteres do documento. Exemplo:

Disciplina

Programação Web

A tag <head> é fechada na linha 6; em seguida, a tag <body> é aberta. Essa tag permite a
inserção do conteúdo que será exibido no corpo da página.
6. </head>
7. <body>
A tag <p> indica a inserção de parágrafos.
8. <p>Olá mundo!</p>
Por fim, as tags <body> e <html> são fechadas. Todas as tags compostas devem ser fechadas.
9. </body>
10.</html>

Parágrafo e títulos
Disciplina

Programação Web

No exemplo descrito anteriormente, conhecemos algumas tags usadas para inserção de textos,
como a tag <p>. Agora, observe a figura a seguir:
Disciplina

Programação Web

Estrutura de uma página e tags de texto. Fonte: Elaborado pelo autor.

Nessa figura, vemos a estrutura de uma página, além de tags utilizadas para inserção de
parágrafos e títulos. A principal diferença entre elas está no tamanho da fonte. Títulos podem ser
inseridos por meio das tags <h1> a <h6>, sendo <h1> a maior e <h6> a menor (veja abaixo).

Tags relacionadas a títulos. Fonte: Elaborado pelo autor.

Agora que você aprendeu os fundamentos do HTML, vamos fixar os conhecimentos sobre essa
linguagem e iniciar o desenvolvimento de uma página web. Mãos à obra!

Conclusão
Disciplina

Programação Web

No início da aula, você foi desafiado a solucionar este problema ocasionado pelo Código 1.1: no
Internet Explorer os acentos e cedilha foram trocados por outros caracteres, dificultando a leitura
do texto proposto.
A solução para isso seria declarar a codificação usada:
Disciplina

Programação Web

Página HTML para comercializar planos de internet. Fonte: Elaborado pelo autor.

O resultado seria este:

UTF-8 permite o uso de acentos. Fonte: Captura de tela do Internet Explorer elaborada pelo autor.
Disciplina

Programação Web

A codificação UTF-8 permite a inserção de caracteres como acentos e cedilha. Alguns

navegadores conseguem identificar automaticamente a codificação usada, mas outros não,
portanto, é recomendado, sempre, a inserção do código:

Aula 2
Desenvolvimento com HTML5

Introdução da Aula
Disciplina

Programação Web

Qual é o foco da aula?

Nesta aula, você irá aprender sobre estruturas de páginas HTML.

Objetivos gerais de aprendizagem

Ao longo desta aula, você irá:

transcrever novas tags para aprimorar websites;

empregar listas e link que conectam páginas;
usar iframes que adicionam conteúdo externo a uma página.

Situação-problema
Olá! Nesta aula, você conhecerá algumas tags utilizadas para se determinar a estrutura de
páginas HTML. Tags estruturais agem como containers que delimitam o posicionamento de
elementos em páginas. A partir delas, é possível determinar a forma e o posicionamento de cada
elemento em um documento web.
A tag estrutural mais utilizada é a div. Essa tag cria um container que permite a aplicação de
propriedades de estilo a todas as outras tags posicionadas dentro do bloco. Entretanto, HTML5
trouxe uma série de novas tags que adicionam semântica à estrutura das páginas, apesar de, na
prática, possuírem a mesma funcionalidade que a tag div. São exemplos dessas tags estruturais
HTML: section, header, footer, nav, article e aside.
Além disso, você conhecerá novas tags para aprimorar a tipografia de seus websites usando
elementos inline, como adicionar textos em negrito, itálico e sublinhado. Você aprenderá, ainda, a
criar listas ordenadas e não ordenadas, a inserir links que conectam sua página a outros
Disciplina

Programação Web

endereços, a criar iframes que adicionam conteúdo externo a sua página e a adicionar mídias,
como imagens, áudios e vídeos, usando HTML5.
Por fim, você será introduzido ao conceito de design responsivo. Responsividade é um conceito
recente, que prevê que páginas se comportem de maneira distinta, a depender do dispositivo
utilizado para acesso. Por exemplo, um mesmo site responsivo acessado por um smartphone,
um tablet e um notebook deverá apresentar três distintas interfaces, de forma que facilitem a
interação dos usuários. Mas não se preocupe com a implementação disso agora.
O importante é que você compreenda os conceitos envolvidos. A responsividade depende de
componentes relacionados a folhas de estilo (que veremos nas próximas aulas).
Nesta aula, você será apresentado a uma série de novas tags HTML, por isso, é importante que
pratique o que aprender. Reproduza os exemplos apresentados em seu computador e verifique a
execução em diferentes navegadores.
Agora, imagine que você acaba de ser contratado para realizar um estágio em uma empresa que
vende planos de internet. Em seu primeiro dia de trabalho, seu chefe lhe apresentou as funções
que desempenhará. Uma delas envolve prestar manutenção no código-fonte do site de vendas
da empresa.
A página de vendas possui, atualmente, um problema relacionado à configuração do layout. Um
estagiário que também trabalha na empresa era o responsável pela página, entretanto, por algum
descuido, enquanto alterava o código-fonte para alteração de preços do site, acabou
desconfigurando a estrutura da página.
Veja como a página se encontra atualmente:

Estrutura da página. Fonte: Elaborado pelo autor.

Infelizmente, o estagiário teve que se ausentar do trabalho hoje. A cada segundo que a página
fica desconfigurada, a empresa perde possíveis vendas. Então, cabe a você corrigir o problema.
Disciplina

Programação Web

Para isso, você deve, inicialmente, observar o código-fonte:

Código-fonte. Fonte: Elaborado pelo autor.

Supondo que você não tenha conhecimento das folhas de estilo utilizadas e faça alterações
apenas nos códigos HTML, descreva os passos para a resolução do problema.
Disciplina

Programação Web

Pronto para mergulhar a fundo no mundo do desenvolvimento web com HTML5?

Então, vamos lá!

Conceito-chave

Para desenvolver websites usando HTML, é importante conhecer as tags de marcação

disponíveis. Entretanto, HTML possui um total de mais de 100 elementos de tags definidos na
especificação (SILVA, 2018). É claro que não é necessário decorar todas as tags, porém é
importante conhecer algumas das principais.
Anteriormente, foram apresentadas as tags de definição do documento (html, head, body), as
tags do cabeçalho do documento (title e meta) e as tags relacionadas à inserção de parágrafos
(p) e títulos (h1 a h6). Outras tags importantes são as tags estruturais, que são utilizadas para
organizar a estrutura de uma página, uma vez que, ao se construir um website, é preciso que
determinados elementos fiquem acoplados em posições específicas.
A figura abaixo ilustra um exemplo de estrutura de uma página web. Observe as divisões e os
posicionamentos enumerados na página.
Disciplina

Programação Web

Exemplo de organização em um site. Há três seções visualmente identificáveis: (1) artigo principal; (2) quatro blocos de
artigos secundários (abaixo do principal); e (3) bloco lateral esquerdo com uma lista de textos secundários. Fonte: Elaborado
pelo autor.

A princípio, pode ser difícil perceber, mas cada bloco de conteúdo da página está organizado em
blocos de códigos (containers) cercados por uma tag HTML, conforme pode ser visto na figura
acima. Esses blocos, por sua vez, estão organizados dentro de outros blocos, de forma a
construir uma estrutura física para o conteúdo da página. Cada um desses containers, embora
não apareça no exemplo, pode ser visualizado se se aplicar os códigos de estilo).
Geralmente, o espaço ocupado pelo conteúdo é delimitado de maneira quadrangular. Observe, na
figura a seguir, as possíveis posições das tags estruturais. Perceba que as seções 1 e 2 (Artigos)
fazem parte de um container maior localizado ao lado da seção 3 (News).
Disciplina

Programação Web

Delimitação da posição de containers usados na organização de um site. Fonte: Elaborado pelo autor.

Observe, na figura acima, a primeira linha pontilhada (primeiro container), que delimita todo o
conteúdo da página. Dentro desse container, temos dois outros containers, que dividem a página
em uma seção principal (tópicos 1 e 2, à esquerda) e um menu secundário (tópico 3, à direita).
Os textos em News (tópico 3) foram inseridos linearmente, logo, não é necessário adicionar tags
estruturais para cada um deles. Por padrão, HTML insere novos elementos abaixo de outros
elementos.
A figura acima, na caixa à esquerda, apresenta a seção Artigos, em que novas divisórias foram
inseridas (representadas pelos retângulos azuis). A primeira delas foi dividida em duas partes. A
seguir, um novo bloco foi dividido em quatro containers, que, por sua vez, são divididos em duas
partes (imagem/texto). Nesse caso, foi aplicada uma propriedade para que os quatro containers
que representam artigos sejam alocados lado a lado, sendo cada um adicionado em seu próprio
container.
Cada um desses containers possui uma tag composta, que deve ser corretamente posicionada
dentro ou ao lado de outras tags. Caso uma dessas tags compostas não seja corretamente
fechada, a estrutura da página pode ser corrompida, causando danos no layout do site, como o
problema apresentado na figura a seguir.
Disciplina

Programação Web

Estrutura da página corrompida devido a uma tag não fechada. Elaborado pelo autor.

Nesse caso, apenas uma tag em um dos containers não foi fechada, desconfigurando
completamente a estrutura da página. Esse é considerado um dos erros mais comuns em
programação web e, mesmo assim, ainda pode ser um erro difícil de solucionar, isso porque, em
páginas muito grandes, uma tag incorretamente fechada pode ser difícil de ser detectada. Por
isso, é sempre importante indentar corretamente o seu código.
______
📝 Exemplificando
O código a seguir apresenta um erro que corrompe a estrutura da página. Você conseguiria dizer
onde está o erro?
Disciplina

Programação Web

Código com erro. Fonte: Elaborado pelo autor.

Provavelmente não, pois o código não está corretamente indentado.

Agora, vamos apresentar esse mesmo código indentado. Observe, a seguir, como os blocos de
tags compostas estão organizados. A maioria dos editores de código inclui marcadores e linhas
que delimitam as declarações de abertura e fechamento de tags, logo, observe que o erro pode
ser facilmente encontrado: há uma tag não fechada na linha 19.
Disciplina

Programação Web

Código indentado. Fonte: Elaborado pelo autor.

Novidades do HTML5
Disciplina

Programação Web

Em versões anteriores do HTML, em geral, utiliza-se a tag <div> para construção de containers
genéricos. HTML5 trouxe uma série de tags específicas para cada seção da página, como
<article> para inserção de artigos, <header> para o cabeçalho, <nav> para o menu de navegação,
entre outras (figura abaixo).
Disciplina

Programação Web

Tags estruturais do HTML5. Fonte: Adaptado de Mariano (2020); W3C (2012).

Na prática, as tags estruturais em HTML têm funcionalidade idêntica; o que as diferencia é o

contexto em que são aplicadas. Por exemplo: a tag <article> foi construída para armazenar
conteúdos de artigos, entretanto, nada impede o desenvolvedor de usar uma tag <div> com o
Disciplina

Programação Web

mesmo propósito. HTML5 ainda permite o uso da tag <div>, que é utilizada na maioria dos casos
pelos desenvolvedores mais antigos.
______
📝 Exemplificando
Observe como a figura anterior seria estruturada em um documento HTML (preste atenção nos
níveis de indentação):

Estruturação em documento HTML. Fonte: Elaborado pelo autor.

Entretanto, ao implementar esse código, você não verá nada no navegador, uma vez que tags
estruturais apenas delimitam o posicionamento em que os itens serão inseridos. Você poderá
visualizá-los quando implementar regras de estilo com CSS.
______
A figura abaixo ilustra um exemplo de implementação dessas tags para se estruturar uma página
HTML.
Disciplina

Programação Web

Exemplo de uso de tags estruturais em uma página HTML. Fonte: Mariano; de Melo-Minardi (2017, p. 93).

Nesse exemplo, vemos que a tag <header> é usada para delimitar a região do cabeçalho da
página (não confunda com o cabeçalho do documento, que apenas mantém os metadados da
página e, portanto, não é exibido). Dentro da tag <header> está a tag <nav>, utilizada para
armazenar menus de navegação. Observe que poderia ser utilizada a tag <menu>, a depender do
contexto, ou, ainda, inverter a ordem em que <header> e <nav> estão descritas.
A seguir, uma <div> delimitará todo o conteúdo central de uma página (figura: Tags estruturais do
HTML5). Em geral, essa seção é utilizada para carregar elementos dinâmicos (i.e., elementos que
serão alterados em diferentes páginas). Esse container, então, é dividido em duas colunas: (1)
<article>, região em que será adicionado o texto e que ocupa a maior parte do espaço da div; e
(2) <aside>, que receberá menus laterais e, portanto, possui uma largura menor.
Dentro de <article>, pode-se inserir tags do tipo <section>, a fim de se categorizar o conteúdo e
facilitar a navegação em páginas muito grandes; por fim, o <footer>, também conhecido como
rodapé, recebe informações complementares, que, em geral, são repetidas em todas as páginas.
______
💭 Reflita
Em versões anteriores ao HTML 4, desenvolvedores costumavam utilizar tabelas para organizar a
estrutura da página; hoje em dia, essa prática foi completamente abandonada devido à criação
de tags específicas para diversas seções de documentos web.
Você consegue imaginar os motivos que levaram à criação de tags específicas para a
estruturação de uma página?

Formatação avançada de textos e outros elementos INLINE

Disciplina

Programação Web

Vimos, anteriormente, que a tag <p> permite a inserção de simples estruturas de parágrafos,
enquanto as tags <h1> a <h6> permitem a inserção de títulos. Entretanto, a escrita de textos
requer uma gama maior de funcionalidades, como adição de trechos em destaque: uso de
negrito, itálico e sublinhado (figura abaixo).
Disciplina

Programação Web

Formatação avançada de texto e outros elementos HTML5. Fonte: Adaptado de Mariano (2020); W3C (2012).

Crie um arquivo HTML contendo o código a seguir:

Código para criação de arquivo HTML. Fonte: Elaborado pelo autor.

Disciplina

Programação Web

A seguir, abra o arquivo em um navegador; assim, você terá a página da figura abaixo.

Estilos de texto. Fonte: Captura de tela do [Link] elaborada pelo autor.

Observe que a tag <span> não insere qualquer informação perceptível na página (linha 8 do
código acima). Trata-se de uma tag container usada, preferencialmente, para delimitar textos. Em
geral, HTML insere novos elementos, um abaixo do outro, entretanto, todas as tags inseridas
dentro de <span> são adicionadas na mesma linha. Por esse motivo, são denominadas tags
inline.
Perceba que as tags <b> e <strong> têm o mesmo efeito no texto: a inserção de negrito (linhas 9-
10); da mesma forma, <i> e <em> alteram o texto para itálico (linhas 11-12). Apesar de terem
efeitos práticos similares, o motivo de uso dessas tags deve estar relacionado ao contexto
empregado. Em geral, <strong> e <em> são indicados para inserção de ênfase, enquanto <b> e
<i> são as tags tradicionais usadas para configuração de negrito e itálico.
Outro recurso textual do HTML é o que corresponde à inserção de listas, que podem ser
ordenadas (ol) ou não ordenadas (ul). Observe a implementação de listas a seguir:
Disciplina

Programação Web

Inserção de listas. Fonte: Elaborado pelo autor.

Teste em seu navegador para visualizar a saída das listas.

Listas em HTML. Fonte: Captura de tela do [Link] elaborada pelo autor.

Disciplina

Programação Web

Ambos os tipos de lista têm o mesmo método para inserção de itens: a tag <li>. Observe que a
lista não ordenada insere apenas um ponto (bullet) antes do item, já a lista ordenada insere um
numeral.
A tag <pre> é utilizada para representar um texto pré-formatado. Observe, a seguir, a comparação
de um texto inserido com a tag <p> e um texto inserido com a tag <pre>. A figura abaixo ilustra os
exemplos de saída utilizando as tags <p>Texto normal</p><pre>Texto pre</pre>.

Comparação de tags:

Texto normal

Texto pre

. Fonte: Captura de tela do [Link] elaborada pelo autor.

Uma outra tag que vale a pena mencionar é <style>. Essa tag permite alterar os estilos da página,
que serão abordados com maior intensidade quando falarmos sobre folhas de estilo em cascata
(CSS). Entretanto, aqui, apresentaremos um breve uso dessa tag sem entrar em detalhes.
O código a seguir reproduz a figura acima com a cor de fundo vermelha. Essa configuração foi
feita usando-se a propriedade CSS backgroung-color com o valor red (vermelho em inglês)
aplicada à tag body.
Disciplina

Programação Web

Reprodução da figura “Comparação de tags:

Texto normal

Texto pre

” com fundo vermelho. Fonte: Elaborado pelo autor.

Disciplina

Programação Web

Fundo (background) do corpo da página (body) na cor vermelha (red). Captura de tela do [Link] elaborada pelo autor.

A tag <style> permite a inserção de códigos CSS diretamente no código fonte HTML, no entanto,
o seu uso não é muito recomendado, uma vez que o ideal é separar os códigos de estilo em
arquivos diferentes. (Detalhes sobre os códigos apresentados dentro de <style> serão
apresentados em outra oportunidade.)

Links em HTML

A tag <a> é um elemento do tipo inline que permite a inserção de links para outras páginas
(SILVA, 2018). Por padrão, o texto em um link é exibido sublinhado e na cor azul, entretanto,
essas configurações podem ser alteradas usando-se folhas de estilos.
Um link recebe, no atributo href, o endereço ao qual será direcionado. Além disso, links podem
ser absolutos ou relativos. Os links absolutos informam o endereço completo do item a ser
acessado. Observe um exemplo de link absoluto:
Disciplina

Programação Web

Os links relativos devem levar em consideração a posição do arquivo que se deseja acessar. Por
exemplo: se o arquivo que deseja está na “public/views”, você deve acessá-lo desta forma (figura
abaixo):

Criando um link para uma página secundária usando Sublime Text. Fonte: Captura de tela do Sublime Text elaborada pelo
autor.
Disciplina

Programação Web

Caso queira criar um link desse outro arquivo, indique que o arquivo se encontra duas pastas
antes. Para isso, use a seguinte estrutura:

Sendo que cada “..” indica que está retornando a uma pasta anterior.
Para abrir o link em uma nova página, use o atributo target="_blank":
Disciplina

Programação Web

⚠️Atenção
Não confunda a tag <a> com a tag <link>!
A tag <a> cria ligações para outros locais, enquanto a tag <link> cria uma ligação entre o
documento atual e um conteúdo externo, como quando queremos adicionar um arquivo CSS a
nossa página.

Imagens, áudios e vídeos

Imagens podem ser inseridas em HTML usando-se a tag <img>. Essa tag recebe o atributo src,
que receberá o endereço completo da imagem. Nesse caso, as regras utilizadas para se definir o
endereço são as mesmas usadas para se inserir links <a>. Observe o uso da tag <img>:
Disciplina

Programação Web

📝 Exemplificando
Exemplo simples: imagem no mesmo diretório
No exemplo a seguir, adicionaremos uma imagem denominada “[Link]” a uma página HTML
(figura abaixo).

Imagem utilizada. Fonte: Captura de tela elaborada pelo autor.

Disciplina

Programação Web

Antes de inserir a imagem, é importante atentar-se à extensão da imagem utilizada. Neste caso,
é usada uma imagem no formato PNG (Portable Network Graphics).
Se estiver usando Windows e seu sistema não estiver apresentando a extensão do arquivo,
clique em “Exibir” e marque a opção “Extensões e nomes de arquivos” (figura abaixo).

Exibindo extensões de arquivo. Fonte: Captura de tela da pasta site elaborada pelo autor.

Agora vamos inserir a imagem usando a tag <img>:

Agora vamos inserir a imagem usando a tag <img>:

Disciplina

Programação Web

Inserindo a imagem. Fonte: Elaborado pelo autor.

Ao abrir esse arquivo no navegador, você verá a seguinte página (figura abaixo):

Página web com a imagem. Fonte: Elaborado pelo autor.

Disciplina

Programação Web

Podemos, ainda, incluir imagens da internet em uma página web apesar de não ser uma boa
prática inserir o src da imagem diretamente da internet, pois isso mantém seu site dependente
de uma página, ou seja, de uma imagem hospedada em outro servidor, e isso pode deixar seu
carregamento mais lento.
HTML ainda permite a inserção de arquivos de áudio e vídeo diretamente na página por meio das
tags <audio> e <video>, respectivamente. A seguir, mostraremos um exemplo contendo as tags
<audio> e <video>.

Código contendo as tags

Esse exemplo gera a seguinte visualização (figura abaixo):

Disciplina

Programação Web

Inserindo áudio e vídeo. Fonte: Captura de tela da página img elaborada pelo autor.

IFRAMES
Disciplina

Programação Web

A tag <iframe> permite a inserção de páginas externas diretamente na sua página. O uso mais
comum da tag <iframe> está na incorporação de vídeos do YouTube. Observe o exemplo a
seguir:
Disciplina

Programação Web

Nesse exemplo, você só precisa informar o endereço do elemento que será incorporado; a partir
do acesso a um servidor externo, o item será inserido e todos os componentes dele serão
incluídos na sua página, sem a necessidade de se acrescentar qualquer outro código. O exemplo
apresentado gera a seguinte página:

Usando um iframe para carregar um vídeo do YouTube. Fonte: Captura de tela da página img elaborada pelo autor.
Disciplina

Programação Web

É possível, ainda, controlar a largura e a altura do iframe por meio dos atributos width e height,
respectivamente. Esses atributos recebem valores em pixels. Por exemplo:

Controlando a dimensão do iframe. Fonte: Elaborado pelo autor

O código apresentado cria um iframe de tamanho 640px de largura por 480px de altura.

HTML5 responsivo
Disciplina

Programação Web

Nos últimos anos, novos meios de acesso a websites têm se popularizado, como celulares,
tablets, laptops e computadores com telas de diversos tamanhos. Assim, um site desenvolvido
especificadamente para um dispositivo com tela FULL HD (1920x1080) não pode ser visualizado
corretamente em um smartphone cuja resolução é 375x812.
Devido a isso, introduziu-se o conceito de design responsivo. Nessa técnica, o website pode ser
exibido de diferentes formas, a depender do dispositivo usado para acesso (figura abaixo).
Disciplina

Programação Web

Exemplo de uma página carregada em três diferentes dispositivos: computador desktop, tablet e smartphone. Fonte:
Capturas de tela do site da Biblioteca Virtual da Kroton com adaptação do autor.

Atualmente, navegadores fornecem funções nativas para testagem da responsividade de

páginas, como a ferramenta de alternância de dispositivo da função inspecionar elemento do
Google Chrome (figura abaixo). A ferramenta está disponível por meio do atalho CTRL+SHIFT+I
ou clicando com o botão direito e, em seguida, em inspecionar.
Disciplina

Programação Web

Ferramenta de alternância de dispositivo da função inspecionar elemento de um navegador permite simular design
responsivo. Fonte: Captura de tela do navegador Google Chrome elaborada pelo autor.

A implementação do design responsivo também requer o uso de folhas de estilos (CSS), que
serão apresentadas nas próximas aulas.

Conclusão
Disciplina

Programação Web

No início desta aula, você conheceu a uma página com layout desconfigurado e o seu respectivo
código-fonte. O seu desafio consiste em consertá-lo.
Para solução do problema, você deve verificar, inicialmente, onde ele ocorreu.
Perceba que o problema de configuração aparece entre o segundo e o terceiro bloco.
Disciplina

Programação Web

Estrutura da página com destaque no erro. Fonte: Elaborado pelo autor.

Percebemos que o possível trecho com erro envolve o texto div class="card mb-4-shadow-sm".
Vamos, então, pesquisar todas as ocorrências desse termo Código-fonte(exposto
anteriormente). Observe que esse termo aparece três vezes:
Disciplina

Programação Web

Se estiver utilizando um editor de códigos, o syntax highlight (quando o código é colorido de

acordo com sua função) destacará claramente que há um problema na última ocorrência. Ao
compararmos os códigos, percebemos que falta um parêntese angular < na abertura da tag
<div>, logo, basta inseri-lo para a página voltar ao normal.

Estrutura da página ajustada. Fonte: Elaborado pelo autor.

Nesse caso, o estagiário deve ter apagado, inconscientemente, o símbolo da abertura da tag. A
solução pode parecer simples, entretanto, muitos problemas em codificação de sites ocorrem
quando pequenos erros aparecem em códigos muito grandes. É fundamental, portanto, que um
programador web saiba identificá-los e corrigi-los.

Aula 3
Desenvolvimentos de formulários e tabelas em HTML5

Introdução da Aula
Disciplina

Programação Web

Qual é o foco da aula?

Nesta aula, você verá a construção de tabelas e formulários em HTML.

Objetivos gerais de aprendizagem

Ao longo desta aula, você irá:

apontar formulários HTML interativos;

descrever a linguagem back-end;
examinar outras tags relacionadas a tabelas.

Situação-problema
Olá! Nesta aula, você aprenderá sobre a construção de tabelas (componentes que permitem a
inserção de dados tabulares) e de formulários (tipos de elementos HTML usados para envio de
informações).
Tabelas são essenciais para organizar dados e podem ser criadas usando-se a tag <table>.
Devemos ressaltar que cada elemento da tabela deve ser declarado separadamente usando-se a
tag <td>, que representa uma célula. Além disso, um conjunto de células deve ser organizado em
uma linha, que deve ser criada usando-se o comando <tr>. Apesar de as tabelas poderem receber
uma quantidade maior de linhas, essas são consideradas as principais tags para se produzir uma
Disciplina

Programação Web

tabela mínima. Nesta aula, você conhecerá também as outras tags relacionadas a tabelas e suas
particularidades.
Por fim, você também verá como criar formulários HTML, que permitem que clientes interajam
com seu website. A função dos formulários é receber valores digitados ou arquivos inseridos e,
então, enviá-los para o servidor, por meio de uma página previamente estabelecida, a fim de que
seja processado por uma linguagem back-end.
Formulários possuem uma variada gama de entradas de diversos tipos, facilitando a
compreensão dos clientes sobre o que deve ser enviado e auxiliando o desenvolvedor na coleta
de diferentes tipos de dados, sem que haja problemas em seu formato.
Vide por exemplo um sistema que coleta data de nascimento. Qual seria a forma ideal de digitar
a data? 01-01-2021, 01/01/2021 ou 1º de janeiro de 2021? E para clientes de países em que o
mês é digitado em uma posição invertida ao dia? Todas essas questões representam problemas
na hora de processar os dados. Por isso, HTML5 apresentou a tag input do tipo date, que coleta a
data correta, pedindo ao usuário que apenas a selecione no calendário.
Para colocar em prática os conhecimentos a serem aprendidos nesta aula, considere que você
foi contratado por uma empresa que possui sistema de atendimento telefônico e atendimento
por e-mail. Entretanto, poucas pessoas utilizam o serviço de e-mail para contatá-los. Vendo a
necessidade de facilitar essa dinâmica, a equipe definiu que deve ser construída uma página de
contato dentro do site da empresa. Essa página deverá receber o nome, o e-mail, o telefone de
contato, o assunto e a mensagem do cliente. Todas essas informações deverão, então, ser
enviadas para a caixa de mensagens da empresa.
Diante disso, requisitaram a você para construir essa página por meio da qual os clientes da
empresa de planos de internet poderão entrar em contato com o estabelecimento. Você, então,
pesquisou modelos de formulários de contato e encontrou o exemplo da figura a seguir.

Exemplo de formulário de contato. Fonte: Captura de tela do menu contato da Biblioteca Virtual da Kroton elaborada pelo
Disciplina

Programação Web

autor.

Com base no modelo apresentado na figura acima, construa um código HTML que reproduza um
formulário de contato. Utilize tabelas sem bordas para alinhar os campos e-mail e telefone.
Neste momento, não se preocupe com o processamento e o envio de e-mails, pois isso será
apresentado posteriormente. E quando tratarmos sobre CSS, aprenderemos métodos melhores
para alinhar elementos lado a lado.
Vamos, então, aprender a construir tabelas e formulários?
Bons estudos!

Tabelas

Estudante, você já viu como páginas podem ser estruturadas, agora, verá tags que representam
componentes importantes do HTML, como as tabelas.
Você já deve ter visto alguma tabela, no entanto, é importante que relembre alguns conceitos
para entender como ela é interpretada em HTML. Uma tabela possibilita organizar informações
em três componentes principais: colunas, linhas e células, conforme a figura abaixo.
Disciplina

Programação Web

Exemplo de tabela. Fonte: Elaborado pelo autor.

Nas primeiras versões do HTML, as tabelas eram utilizadas como um elemento estrutural, para
se organizar o layout da tela. Nas versões mais recentes, novas tags estruturais foram
introduzidas e tabelas passaram a ser utilizadas apenas para exibir dados tabulares (TITTEL;
NOBLE; COUTO, 2018).
Em HTML, tabelas são definidas por meio da tag composta <table>. Ao criar uma tabela, as
linhas são inseridas por meio da tag <tr>. Células podem ser inseridas usando-se a tag <th>, para
célula de cabeçalho, ou <td>, para células comuns. Por padrão, o texto inserido a partir da tag de
cabeçalho <th> está em negrito, enquanto os elementos inseridos por meio da tag de células
comuns <td> são alinhados à esquerda em fonte normal. A figura abaixo ilustra como uma tabela
pode ser estruturada em HTML.
Disciplina

Programação Web

Exemplo básico de tabela. Fonte: Mariano; de Melo-Minardi (2017, p. 75).

A figura a seguir nos mostra um exemplo de uma simples tabela em HTML. A saída do código da
tabela pode ser visualizada na figura abaixo (Visualização da tabela no navegador) e
corresponde à visualização em um navegador (browser). No simulador, você consegue executar
e modificar a informação da tabela.
Disciplina

Programação Web

Exemplo de uma tabela em HTML. Fonte: Elaborado pelo autor.

Visualização da tabela no navegador. Fonte: Captura de tela do [Link] elaborada pelo autor.

Vamos interpretar cada parte do código:

Disciplina

Programação Web

Por padrão, tabelas inseridas não possuem borda. Você pode inseri-las usando o atributo border,
que recebe um valor numérico indicando a largura desejada para a borda, conforme vemos na
figura abaixo.
Disciplina

Programação Web

Tabela com bordas. Fonte: Captura de tela do [Link] elaborada pelo autor.

Você pode, ainda, adicionar cor ao fundo de uma tabela usando o atributo bgcolor, que recebe o
nome da cor desejada (em inglês). Neste caso, foi inserida a cor amarela (yellow).
Outra forma de se inserir cor é utilizando códigos em hexadecimal da cor. Na figura abaixo
(Alterando cor de fundo de uma tabela), podemos observar a cor do fundo da tabela.
Disciplina

Programação Web

Alterando cor de fundo de uma tabela. Fonte: Captura de tela do [Link] elaborada pelo autor.

A seguir, apresentaremos uma tabela em HTML contendo algumas cores e seus códigos em
hexadecimal. Observe que utilizamos o atributo bgcolor com a tag <td> para cada linha da
primeira coluna na tabela; já na segunda coluna, temos os códigos em hexadecimal. Tais cores
podem ser utilizadas na concepção de uma página web em HTML. Observe a tabela e seu código
na ferramenta Trinket:
Disciplina

Programação Web

Pode-se, ainda, alterar a largura e a altura de partes da tabela. No exemplo a seguir, faremos a
alteração da altura e da largura apenas da primeira linha, observe o resultado na figura a seguir e
o código alterado na ferramenta Trinket

Alterando largura e altura de partes de uma tabela. Fonte: Captura de tela do [Link] elaborada pelo autor.
Disciplina

Programação Web

O atributo height recebe um valor em pixels para definir a altura do item. Observe que ele foi
aplicado apenas na primeira linha <tr>. O atributo width determina a largura do item, logo,
observe que, após ter sido aplicado em cada célula, a largura delas nas linhas seguintes também
foi alterada.
______
💭 Reflita
Apesar desses atributos permitirem alterações de cores, bordas e larguras, a sua utilização não é
recomendada. É preferível o uso de propriedades de estilo CSS (que estudaremos em outro
momento).
Quais seriam os motivos para isso?

Mesclando células

É possível mesclar células usando o atributo colspan, utilizado para mesclar colunas, como na
Figura 1.39. Podemos, ainda, mesclar linhas utilizando o atributo rowspan. Observe a estrutura
na figura a seguir (Atributo rowspan). Esses atributos podem ser utilizados tanto em células do
tipo <th> quanto do tipo <td>. Para isso, primeiro você deve determinar quantas colunas serão
mescladas (no exemplo a seguir, duas). A seguir, utilizar o atributo colspan para indicar quais
células serão unidas. Como mencionado, pode-se, ainda, utilizar a propriedade rowspan para unir
linhas.
Disciplina

Programação Web

Atributo colspan. Fonte: Adaptada de Mariano; de Melo-Minardi (2017).

Atributo rowspan. Fonte: Adaptada de Mariano; de Melo-Minardi (2017).

Novidades de HTML5 para tabelas

Disciplina

Programação Web

HTML5 trouxe tags que permitem uma melhor maneira de organizar tabelas: <thead>, <tbody> e
<tfoot>. A tag <thead> é utilizada para inserir as células do cabeçalho. O conteúdo da tabela deve
ser inserido em <tbody>; já <tfoot> pode ser usado para inserção de linhas conclusivas ou de
notas de rodapé. Observe a tabela criada e ilustrada na figura abaixo.
Disciplina

Programação Web

Tags , e . Fonte: Captura de tela do [Link] elaborada pelo autor.

Estudante, agora que você conhece as tags para criação de tabela, aprenderá a criar outro
elemento em HTML: os formulários. Você já deve ter se deparado com páginas de serviços na
internet em que é preciso preencher formulários de contato, de suporte, de atendimento,
orçamento, compras, cadastro, entre outros. Então, agora você conhecerá algumas das tags
utilizadas na construção de formulários.

Formulários
Disciplina

Programação Web

Formulários são tipos de elementos HTML usados para coletar os dados que o desenvolvedor
deseja processar e/ou salvar (TITTEL; NOBLE; COUTO, 2018). O uso de formulários é a forma
mais efetiva para se obter dados relevantes dos usuários do seu website (GUPTA, 2013). A figura
abaixo ilustra um exemplo de formulário de contato com alguns campos para inclusão de dados
pessoais e mensagem.
Disciplina

Programação Web

Exemplo de formulário de contato. Fonte: Captura de tela do menu contato da Biblioteca Virtual da Kroton elaborada pelo
autor.

Formulários podem ser criados usando-se a tag <form>, que pode receber como principais
atributos action, method e name (MARIANO; DE MELO-MINARDI, 2017). O atributo action informa
ao navegador para qual endereço deve enviar as informações presentes no formulário; o atributo
method indica o método a ser utilizado para envio (POST e GET são os mais comuns); por fim, o
atributo name indica o nome utilizado para o formulário.
______
🔁 Assimile
POST versus GET
No método POST, as informações passadas pelo formulário são transmitidas junto ao corpo da
requisição HTTP (ou seja, a transmissão é feita de forma criptografada).
POST pode ser utilizado, por exemplo, para envio de arquivos ou em formulários com dados
sigilosos.
Por outro lado, os envios por meio do método GET transmitem os dados pela URL da página. Por
exemplo:
[Link]/?id=1
Nesse exemplo, é feita uma requisição do tipo GET, em que a variável id é igual a 1. Portanto, os
dados enviados em GET são visualmente públicos (MARIANO; DE MELO-MINARDI, 2017).
______
Além de name, method e action, formulários podem receber o atributo enctype. O atributo
enctype determina como os dados do formulário devem ser codificados quando enviados ao
servidor. Ele pode receber os valores: (i) application/x-www-form-urlencoded, para caracteres
codificados antes do envio; (ii) multipart/form-data, usado para envio de arquivos, uma vez que
não fornece codificação; e (iii) text/plain, que codifica apenas os espaçamentos.
Disciplina

Programação Web

Exemplo de um formulário. Fonte: Elaborado pelo autor.

A seguir, o código é explicado:

observe que o formulário é aberto por meio da tag <form> e fechado via tag </form>.
em name="meu_primeiro_formulario", define-se o nome do formulário. No caso, ele foi
nomeado como “meu_primeiro_formulario”. Observe que evitamos o uso de espaços ou
outros caracteres especiais. Isso se dá uma vez que esse nome pode ser utilizado na etapa
de processamento, já os caracteres especiais podem ser codificados ou não, a depender do
tipo de enctype utilizado para envio.
em method="POST" define-se o método de envio considerado, o qual foi o POST.
em action="[Link]" define-se que o atributo action aponta para
“[Link]”. Assim, para que esse formulário funcione corretamente, deve existir um
arquivo denominado “[Link]”, que recebe os dados enviados pelo método POST
e processa-os usando a linguagem de programação PHP (outras linguagens também
podem ser utilizadas, entretanto, citaremos apenas PHP aqui, pois será a linguagem
abordada ao final dos nossos estudos).
por fim, em enctype="multipart/form-data", define-se que o enctype utilizado é o
“multipart/form-data”. Declarar o enctype é necessário quando queremos enviar arquivos
anexados ao formulário.

A seguir, você conhecerá os elementos que podem ser incluídos em formulários HTML.

Elementos de formulários
Disciplina

Programação Web

Há uma série de elementos que tornam os formulários HTML altamente versáteis:

menu de seleção: elemento que fornece um menu suspenso que será exibido quando o
usuário clicar. É criado com a tag <select>. Cada item é adicionado usando-se a tag
<option>. Observe o exemplo com um menu de seleção com os dias da semana.

Menu de seleção com os dias da semana. Fonte: Elaborado pelo autor.

Disciplina

Programação Web

No exemplo, observe que a tag <select> foi nomeada como “dias_da_semana”: <select
name="dias_da_semana">. Essa tag é fechada com </select>. Dentro da tag <select> temos as
opções a serem selecionadas; no caso, as opções possuem como valor (value) os dias da
semana <option value="segunda">Segunda-Feira</option>.

áreas de texto: permitem que usuários insiram textos com várias linhas e são criadas com
a tag <textarea>. Exemplo (formulário de contato):

botões: botões permitem diversos tipos de ação e podem ser integrados por meio de
scripts. São criados com a tag <button>.
Disciplina

Programação Web

rótulos: inseridos com a tag <label>, permitem a identificação de partes dos formulários.

O código a seguir apresenta um exemplo de formulário contendo as opções de dias da semana.

Observe que o resultado do código apresentado gera o resultado ilustrado na figura abaixo (
Disciplina

Programação Web

Elementos de formulários: menu de seleção, área de texto e botão (à esquerda). À direita é

exibido o menu de seleção quando clicado).

Formulário com opções de dias da semana. Fonte: Elaborado pelo autor.

Disciplina

Programação Web

Elementos de formulários: menu de seleção, área de texto e botão (à esquerda). À direita é exibido o menu de seleção quando
clicado. Fonte: Elaborado pelo autor.

Elementos de formulários: menu de seleção, área de texto e botão (à esquerda). À direita é

exibido o menu de seleção quando clicado. Fonte: Elaborado pelo autor.

entradas: são o tipo de elemento mais importante em formulários. Elas são inseridas
usando-se a tag <input>, por exemplo:
Disciplina

Programação Web

A tag <input> pode ter diversos tipos (especificados no atributo type), como caixas de texto,
senhas, caixas de seleção múltiplas e únicas, entre outros.

Tipos de entrada e atributos

Disciplina

Programação Web

A tag <input> recebe uma série de atributos que definirão o tipo dos dados que serão submetidos
como entrada. Observe a figura a seguir.
Disciplina

Programação Web

Tipos de input. Fonte: Adaptado de Mariano (2020); W3C (2012).

📝 Exemplificando
Aplicação dos elementos em HTML5
No exemplo a seguir, implementaremos todos os tipos de elementos de entrada em um
formulário:
Disciplina

Programação Web
Disciplina

Programação Web

Formulário com todos os elementos de entrada. Fonte: Elaborado pelo autor.

Observe, a seguir, a página construída ilustrada.

Disciplina

Programação Web

Tipos de elementos input. Fonte: Captura de tela da página Formulários elaborada pelo autor.

Agora, vamos, então, analisar alguns desses elementos.

Caixas de texto e senhas

Disciplina

Programação Web

As caixas de texto (type text) são os elementos de entrada mais comuns. Esse tipo de input gera
uma caixa de texto de linha única em que o usuário poderá digitar qualquer tipo de informação.
As caixas de texto de senhas (type password) são bastante similares a elas. A principal diferença
é que nos inputs do tipo password, o texto é criptografado diretamente quando digitado. Observe
o exemplo da figura abaixo (Inputs dos tipos text e password. Ao digitar no campo do tipo
password, os caracteres são exibidos como marcadores).
Disciplina

Programação Web

Inputs dos tipos text e password. Ao digitar no campo do tipo password, os caracteres são exibidos como marcadores. Fonte:
Elaborado pelo autor.

Ambas as entradas aceitam diversos atributos, como o atributo value, em que se pode inserir os
valores padrão para o campo, ou o atributo placeholder, que exibe um texto informativo no
campo (esse texto desaparece quando o usuário clica na caixa de texto).
Disciplina

Programação Web

Botões

Além do elemento <button>, HTML fornece duas outras formas de criação de botões. A primeira
delas é utilizando-se o input do tipo button. A outra forma de gerar um botão é utilizando um
input do tipo submit. Entretanto, o botão do tipo submit tem a função específica de enviar o
formulário para a página indicada no atributo action de form, conforme a figura abaixo (Tipos
button e submit).
Disciplina

Programação Web

Tipos button e submit. Fonte: Elaborada pelo autor.

Caixas de seleção únicas e múltiplas

Disciplina

Programação Web

As caixas de seleção permitem que usuários escolham certas opções. Elas são divididas em
dois tipos: caixas de seleção únicas (radio), caracterizadas por seu formato circular, e caixas de
seleção múltiplas (checkbox), caracterizadas pelo seu formato quadrangular.
Disciplina

Programação Web

Código de seleção múltipla. Fonte: Elaborado pelo autor.

Código de seleção única. Fonte: Elaborado pelo autor.

Disciplina

Programação Web

Caixas de seleção múltiplas (checkbox) e únicas (radio). Fonte: Elaborado pelo autor.

Perceba que cada entrada apresenta um mesmo valor para o atributo name. Isso indica à página
de processamento que os campos de seleção representam uma mesma variável. A diferença
entre os campos será dada pelo valor existente no atributo value. Nos códigos de seleção
múltipla e única apresentados, observe que a variável múltiplo recebe os valores [1, 2, 3],
enquanto a variável única recebe o valor 2.

Novos recursos do HTML5 para formulários

Disciplina

Programação Web

HTML5 apresentou novos tipos de entradas para formulários, como os inputs dos tipos date e
color. O tipo date fornece um campo que, quando clicado, exibe um calendário que permite ao
usuário selecionar uma data. A figura abaixo ilustra o resultado da utilização do input do tipo
date.
Disciplina

Programação Web

Input do tipo date. Fonte: Captura de tela da página Formulários elaborada pelo autor.

Já as entradas do tipo color permitem que o usuário selecione uma cor. Esse elemento retorna
um código de cores RGB, como vemos na figura a abaixo (Input do tipo color).
Disciplina

Programação Web

Input do tipo colo. Fonte: Captura de tela da página Formulários elaborada pelo autor.

Teste as tags <input type="date"> e <input type="color"> utilizando a ferramenta Trinket.

Chegamos ao final de uma unidade. O aprendizado foi grande e você conheceu a linguagem
HTML. Agora, você pode iniciar seus projetos de páginas WEB, aplicar os conhecimentos e criar
estruturas de páginas e formulários em HTML.
Bom trabalho!

Conclusão
Disciplina

Programação Web

Conforme a situação-problema apresentada, você ficou responsável por construir uma página
por meio da qual os clientes da empresa de planos de internet poderão entrar em contato com o
estabelecimento.
Para construir uma página de contato usando apenas HTML, seu código-fonte deve ficar da
seguinte forma:
Disciplina

Programação Web

Vamos, então, analisar cada parte do código. Inicialmente é feita a declaração do cabeçalho:
Disciplina

Programação Web
Disciplina

Programação Web

Análise código-fonte. Fonte: Elaborado pelo autor.

Formulário de contato construído usando apenas HTML. Fonte: Captura de tela da página Formulários elaborada pelo autor.

Observe que o código apresentado apresenta alguns novos atributos; são eles: size, cols e rows.
Disciplina

Programação Web

Size altera o tamanho da entrada do tipo text. Observe que os campos e-mail e telefone
apresentam o tamanho padrão. Apenas os campos nome e assunto foram alterados para
ficarem com um tamanho maior.
O elemento textarea recebe os outros dois atributos. Cols determina a quantidade de colunas
permitidas (tem um efeito similar ao size), enquanto rows determina a quantidade de linhas que
a área de texto deverá ter (no exemplo, cinco linhas).
É notável, ainda, que o formulário de contato construído apenas com HTML apresenta diferenças
visuais quando comparado ao formulário modelo (figura: Exemplo de formulário de contato),
uma vez que este aplicou folhas de estilo personalizadas (CSS), que veremos em outra
oportunidade.

Videoaula: Introdução de programação para web

Este conteúdo é um vídeo!

Para assistir este conteúdo é necessário que você acesse o AVA pelo
computador ou pelo aplicativo. Você pode baixar os vídeos direto no aplicativo
para assistir mesmo sem conexão à internet.

Videoaula sobre introdução de programação para web.

Referências
Disciplina

Programação Web

COMO a internet funciona? [S.l.: s.n.], 2020. 1 vídeo (6:56 min.). Publicado pelo canal Diego
Mariano. Disponível em: <[Link] Acesso em: 30 jul. 2021.
GOURLEY, D. et al. HTTP: the definitive guide. [S.l.]: O’Reilly Media, 2002.
GUPTA, G. Mastering HTML5 Forms. Birmingham: Packt Publishing, 2013.
IMAGENS. [S.l.: s.n.], 2017. 1 vídeo (3:05 min.). Publicado pelo canal Diego Mariano. Disponível
em: <[Link] Acesso em: 30 jul. 2021.
LAMBERT, L. et al. The Internet: a historical encyclopedia. [S.l.]: ABC-CLIO, 2005.
LINKS. [S.l.: s.n.], 2017. 1 vídeo (3:35 min.). Publicado pelo canal Diego Mariano. Disponível em:
<[Link] Acesso em: 30 jul. 2021.
MARIANO, D. Fundamentos do HTML. Diegomariano, 12 ago. 2020a. Disponível em:
<[Link] Acesso em: 30 jul. 2021.
MARIANO, D. Introdução ao HTML. Diegomariano, 13 ago. 2020b. Disponível em:
<[Link] Acesso em: 30 jul. 2021.
MARIANO, D. Tags HTML5. 2020. Disponível em: <[Link] Acesso em: 30 jul.
2021.
MARIANO, D. Tags HTML5. Diegomariano, 31 ago. 2020. Disponível em:
<[Link] Acesso em: 30 jul. 2021.
MARIANO, D.; DE MELO-MINARDI, R. Introdução à programação web para bioinformática: html,
css, php and javascript. [S.l.]: Independently Published, 2017.
MARIANO, D.; DE MELO-MINARDI, R. Introdução à programação web para bioinformática: HTML,
CSS, PHP & JavaScript. Belo Horizonte: [s.n.], 2017.
Disciplina

Programação Web

MARIANO, D.; DE MELO-MINARDI, R. Introdução à programação web para bioinformática: html,

css, php and javascript. [S.l.]: Independently Published, 2017.
O QUE é um Website? [S.l.: s.n.], 2020. 1 vídeo (5:28 min.). Publicado pelo canal Diego Mariano.
Disponível em: <[Link] Acesso em: 30 jul. 2021.
SILVA, M. S. Fundamentos de HTML5 e CSS3. São Paulo: Novatec Editora, 2018.
SILVA, M. S. Fundamentos de HTML5 e CSS3. São Paulo: Novatec Editora, 2018.
TAGS. [S.l.: s.n.], 2017. 1 vídeo (5:14 min.). Publicado pelo canal Diego Mariano. Disponível em:
[Link] Acesso em: 30 jul. 2021.
TITTEL, E.; NOBLE, J.; COUTO, E. HTML, XHTML e CSS Para Leigos. Tradução de Elda Couto. Rio
de Janeiro: Alta Books, 2018.
W3C WORKING DRAFT. HTML: the markup language (an HTML language reference). [s.d.].
Disponível em: <[Link] Acesso em: 30 jul. 2021.
W3C WORKING DRAFT. HTML: the markup language (an HTML language reference). [s.d].
Disponível em: <[Link] Acesso em: 30 jul. 2021.
W3SCHOOLS. HTML <form> enctype Attribute. [s.d.] Disponível em: <[Link]
Acesso em: 30 jul. 2021.
,

Unidade 2
Utilizando CSS

Aula 1
A importância do CSS na construção de websites

Introdução da Unidade
Disciplina

Programação Web

Estudante, nesta unidade você se aprofundará nos estudos para se tornar um desenvolvedor
web. Com os conhecimentos apresentados nesta unidade, você aprenderá a estilizar as páginas
em html, tornando-as visualmente mais amigáveis. Agora, você vai aperfeiçoar o layout de suas
páginas. Aqui, veremos as folhas de estilo em cascata.
Na aula 1, veremos uma breve introdução à linguagem CSS (Cascading Style Sheets), a inclusão
do CSS em um website, as regras e os seletores CSS, além das propriedades de texto,
formatação, cores e propriedades background em CSS.
Na aula 2, abordaremos layouts em CSS; aprenderemos os conceitos do box model HTML/CSS,
como as propriedades de bordas, preenchimentos e margens; e veremos o posicionamento de
elementos em páginas HTML, além de propriedades como largura e altura. Por fim, na aula 3,
veremos a formatação em tabelas CSS e em formulários HTML, animações e transição usando-
se CSS, além de alguns frameworks CSS.
Vamos lá!

Introdução da Aula
Disciplina

Programação Web

Qual é o foco da aula?

Disciplina

Programação Web

Nesta aula, irá conhecer Cascating Style Sheet (CSS)

Objetivos gerais de aprendizagem

Ao longo desta aula, você irá:

aplicar formas da linguagem CSS;

empregar construção de códigos HTML;
examinar formatar textos e imagens em sites..

Situação-problema
Olá!
O conhecimento dos fundamentos da linguagem HTML permite a você a construção de seus
primeiros websites. Entretanto, as páginas que você pode construir usando apenas os
conhecimentos adquiridos nessa linguagem de marcação, possivelmente, não apresentarão uma
interface muito amigável.
Isso se deve ao fato de a linguagem HTML ter sido planejada para armazenar e estruturar os
conteúdos, enquanto a aparência da página é de responsabilidade das folhas de estilo.

CSS é a sigla para cascating style sheet (folha de estilo em cascata). CSS é uma
linguagem propriamente desenvolvida para configuração de estilo e aparência. Ela é
fundamentada na definição de estilos aplicados a seletores (elementos HTML) por
meio das propriedades.

Códigos CSS podem ser inseridos de três formas:

Por meio de declarações inline realizadas diretamente do elemento que se deseja formatar.
Por meio de declarações na tag de estilos.
E por meio de arquivos externos.

Aqui, veremos como construir códigos HTML usando-se as três formas e qual delas é
considerada mais apropriada.
Nesta aula, você vai conhecer os fundamentos da linguagem CSS, sua sintaxe e principais
características. Você verá, ainda, como formatar textos, alterar cores de elementos e adicionar
imagens como planos de fundo.
Você foi contratado por uma empresa de provedor de internet que solicitou que você crie a
página web do provedor. Assim, você deverá criar a estrutura das páginas e aplicar o estilo (CSS).
Dessa vez, você criará uma página de apresentação da empresa (“QUEM SOMOS”), mas
enquanto você trabalhava em uma página experimental para a empresa de vendas de planos de
internet, você construiu os códigos [Link] e [Link] a seguir:
Disciplina

Programação Web

[Link]. Fonte: Elaborado pelo autor.

[Link]. Fonte: Elaborado pelo autor.

Foi sugerido por um dos membros da equipe, a inclusão de uma fonte externa, a fonte “Roboto”:
uma fonte gratuita disponível na plataforma de fontes do Google. Você acessou o site, fez o
Disciplina

Programação Web

download da fonte e a instalou em seu computador.

Entretanto, ao visualizar a página no navegador de outro computador, você notou que a fonte
correta não estava sendo carregada, como pode ser visto na figura a seguir:

Como a página foi exibida. Fonte: Elaborado pelo autor.

Roboto é uma fonte não serifada, o que difere da fonte apresentada. Observe a figura a seguir:
Disciplina

Programação Web

Exemplo de texto escrito com a fonte Roboto. Fonte: Captura de tela do Google Fonts adaptada pelo autor.

Explique o que pode ter ocorrido e como você pode resolver esse problema.
Faça o download da fonte Roboto em Google Fonts.

Conceito-Chave
Disciplina

Programação Web

A estrutura de uma página Web pode ser criada utilizando-se apenas a linguagem HTML,
possibilitando a construção de seus primeiros websites, todavia, é possível criar páginas com o
Disciplina

Programação Web

visual não tão amigável para o usuário. Na medida em que páginas da internet se tornaram mais
complexas, tornou-se necessário melhorar e estruturar o seu desenvolvimento. Isso se deve ao
fato de a linguagem HTML ter sido planejada para armazenar e estruturar os conteúdos, porém o
visual e a aparência da página devem ser desenvolvidos por meio das folhas de estilo em
cascata (ou CSS).

Folhas de estilo em cascata

CSS, do inglês cascading style sheets, ou na tradução “folhas de estilos em cascata”, é uma
linguagem de estilos utilizada para se definir a aparência de um documento web. CSS surgiu com
um dos objetivos de separar códigos relacionados a conteúdo dos códigos relacionados à
aparência de uma página. A Figura “Como a página foi exibida” ilustra a estrutura de separação
de conteúdo e a aparência de um website. Observe que, para o conteúdo e a estrutura de uma
página, é utilizada a linguagem html, e para a aparência (“estilo”) da página, a linguagem CSS.
Assim, enquanto a estrutura básica e o conteúdo de uma página, tais como tags estruturais,
textos, imagens e vídeos, são construídos em arquivos HTML, os arquivos CSS armazenam os
estilos, como fontes, espaçamentos, cores, tamanhos e outros elementos estruturais.
Disciplina

Programação Web

Separação de conteúdo e aparência para a criação de um website. Fonte: Elaborado pelo autor.

Com o CSS, é possível criar um único arquivo de folhas de estilo e importá-lo em diversas
páginas HTML, o que permitirá economizar muito tempo no desenvolvimento e na manutenção
de códigos.
______
⚠️Atenção
HTML e CSS não são linguagens de programação. Enquanto HTML é uma linguagem de
marcação de hipertextos, CSS é uma linguagem de folhas de estilos.

Incluindo CSS em uma página HTML

Disciplina

Programação Web

Há três formas de incluir estilos em arquivos HTML:

Atributo style (inserção inline).

Tag <style>.
Importação de arquivo “.css”.

Atributo Style
Disciplina

Programação Web

As configurações de estilo são aplicadas diretamente na tag que se deseja formatar:

Disciplina

Programação Web

No trecho <p style= "color: red">Olá mundo!</p> , a cor do texto (color) é alterada para vermelho
(red) por meio do atributo de estilos (style), que pode ser aplicado a qualquer tag HTML.

Tag