Title: Padrões Web (Livro Novo)

[Image: Capa do livro padrões web]

Capítulo 1 - História da Internet: da Arpanet ao HTML

Sem título CustomCSS

Sem título ObjetivoCapDEAD

Ao longo deste estudo, buscaremos primeiramente conhecer a história e a arquitetura da Internet, traçando a jornada que transformou uma rede de pesquisa em um dos pilares da sociedade moderna. Uma vez estabelecida essa base, mergulharemos no universo dos serviços web e no protocolo HTTP, elementos cruciais que regem a comunicação na rede. Avançando para o aprendizado das diferenças entre linguagens do lado do cliente e do servidor, dominaremos a compreensão de como a dinâmica entre essas duas esferas molda a experiência do usuário. Em seguida, iremos aprofundar-nos no conceito de marcação de texto, explorando sua importância na estruturação de conteúdo digital. Através da sintaxe HTML, poderemos discernir as regras e os elementos que permitem a criação e a organização de páginas web, culminando na capacidade de construir a espinha dorsal de qualquer site.

Sem título Text

Introdução

A história da Internet é sobre muito mais do que apenas o crescimento de uma tecnologia: é sobre as pessoas, suas ideias e eventos que moldaram a forma como a rede mundial de computadores evoluiu. A Internet transformou a humanidade de maneiras que poucos poderiam imaginar, desde os primeiros experimentos com redes interconectadas até sua massificação doméstica e comercial. Atualmente, para podermos navegar por essa rede imensa, uma linguagem em particular se destaca por sua capacidade de estruturar e apresentar informações organizadamente e visualmente agradáveis: o HTML, ou Linguagem de Marcação de Hipertexto. Ela não só facilitou a criação e o design de páginas web, como também se tornou um alicerce para o desenvolvimento e crescimento da própria Internet. A seguir, veremos como se deu essa evolução e qual é o seu impacto na sociedade moderna contemporânea.

Os primeiros mainframes e a Ethernet de Robert Metcalfe

A história da Internet começa com a criação dos mainframes, que são grandes computadores usados por empresas e organizações governamentais. Os primeiros mainframes foram desenvolvidos na década de 1950 para processar quantidades massivas de dados, normalmente bancários ou científicos. Na época, esses computadores eram enormes, caros e  a maioria das pessoas não tinha acesso a eles, o que deixava a informática algo bem restrito à academia e aos técnicos de serviços de alta complexidade. A seguir, vamos ver o slideshow para compreendermos melhor como eram esses computadores e como eles funcionavam.

Sem título Text

A tecnologia dos mainframes foi avançando rapidamente, tornando-os mais acessíveis e com maior capacidade de processamento. Isso permitiu que as empresas e organizações governamentais usassem os mainframes para compartilhar informações e recursos de forma mais eficiente. Foi nesse contexto que Robert Metcalfe, um engenheiro da Xerox, inventou a Ethernet em 1973. A Ethernet era uma tecnologia que permitia que vários computadores se comunicassem em rede, permitindo que as empresas compartilhassem informações e recursos de forma mais eficiente. Ela revolucionou a forma como os computadores eram usados, permitindo que as empresas compartilhassem informações e recursos de forma mais eficiente. Isso foi um avanço significativo, pois permitiu que não só elas, mas também organizações governamentais compartilhassem dados e recursos em tempo real, melhorando a eficiência e a produtividade. A Figura 1 abaixo mostra o esquema inicial da Ethernet.

Figura 1: Esquema da Ethernet concebido por Robert Metcalfe

Sem título Image Hotspots

Transceiver

Sem título Text

Texto sobre o transceiver

Interface

Sem título Text

Texto da interface

Controller

Sem título Text

Texto sobre o controller

The ether

Sem título Text

Texto sobre o ether

Terminator

Sem título Text

Texto terminator

Sem título Text

Fonte: Ethernet Diagram (Comitê de Padrões IEEE 802)

A Ethernet permitiu que as empresas criassem suas próprias redes locais (Local Area Networks - LANs). De acordo com Tanenbaum (2013), uma LAN é uma rede privada que opera dentro e nas proximidades de um único edifício, seja ele uma residência, um escritório ou uma fábrica. Ela é amplamente utilizada para conectar computadores e dispositivos eletrônicos, possibilitando o compartilhamento de recursos (impressoras, storages, máquinas virtuais, etc) e a troca de informações. As LANs são mais seguras e confiáveis do que as redes públicas. Esse diferencial garante às empresas uma proteção mais eficaz de suas informações e dados confidenciais.

Nas décadas seguintes, a Ethernet se tornou amplamente utilizada, impulsionando o crescimento e a evolução da tecnologia de rede. Hoje, a Ethernet é a tecnologia de rede padrão para a maioria das redes locais, estando sob o padrão IEEE 802.3, de longe o tipo mais comum de LAN com fios atualmente.

Sem título Text

Arpanet a crise dos mísseis

Em 1969, a Agência de Projetos de Pesquisa Avançada do Departamento de Defesa dos Estados Unidos criou a Arpanet, uma rede de computadores destinada a permitir a comunicação entre cientistas e pesquisadores em todo o país. A Figura 2 mostra a logo da Arpanet, que descreve justamente isso: os pontos representam os computadores mainframes e as linhas, a conexão entre eles. Na década de 1980, a Arpanet expandiu-se para incluir várias outras redes, formando a Internet como a conhecemos hoje.

Figura 2: Logo e topologia da Arpanet nos anos 70

[Image: Mapa da ARPANET na década de 70]

Sem título Text

Fonte:  Adaptado de ( olhardigital.com.br)

Durante a crise dos mísseis de 1983, a Arpanet se mostrou uma ferramenta vital para a comunicação entre os líderes mundiais. Na época, o mundo estava à beira de uma guerra nuclear entre os Estados Unidos e a União Soviética, e a comunicação rápida e precisa era crucial para evitar um conflito. Nesse contexto, a Arpanet foi usada para transmitir mensagens entre líderes mundiais, incluindo o presidente dos Estados Unidos, Ronald Reagan, e o líder soviético, Yuri Andropov. Essas mensagens foram transmitidas por meio de uma rede de computadores segura e criptografada, garantindo que as informações transitassem com segurança e precisão. Além disso, a Arpanet também foi usada para compartilhar informações sobre a crise entre os líderes militares dos Estados Unidos e seus aliados, permitindo que eles colaborassem e coordenassem suas ações.

Essa experiência demonstrou o potencial da tecnologia de rede para a comunicação em tempo real em uma escala global. A Arpanet e a posterior Internet se tornaram plataformas importantes para a colaboração e a comunicação em todo o mundo. Desde então, a Internet tem sido usada em uma série de crises e desastres naturais, incluindo terremotos, furacões e ataques terroristas, demonstrando sua importância como uma ferramenta vital para a comunicação e coordenação em tempos de crise.

Sem título Text

Fusão com Cyclades e NPL

Durante a década de 1970, outras redes de computadores foram criadas em todo o mundo, incluindo a Cyclades na França e a NPL no Reino Unido. A Figura 3 mostra a topologia da rede Cyclades em 1973. Nos anos seguintes, houve várias negociações entre os governos dos Estados Unidos e da França, o que finalmente resultou na união das redes Arpanet e Cyclades, em 1978, criando uma rede global de computadores. Essa fusão permitiu que a Internet se expandisse ainda mais, tornando-se uma ferramenta essencial para a comunicação, a pesquisa e o comércio em todo o mundo.

Figura 3: Topologia da rede Cyclades em 1973

[Image: Mapa da rede Cyclades em 1973]

Sem título Text

Fonte: L. Pouzin.

Logo em seguida, a fusão entre Cyclades e NPL do Reino Unido, além de expandir a Internet, também introduziu novas tecnologias e protocolos, como o Transmission Control Protocol/Internet Protocol (TCP/IP), que se tornou padrão para a comunicação entre computadores na Internet. O TCP/IP permite que os dados sejam divididos em pacotes e transmitidos pela rede, garantindo a entrega confiável dos dados.

A partir da década de 1990, a Internet se tornou mais acessível ao público em geral, com o surgimento da World Wide Web (WWW), que permitiu que as pessoas acessassem e compartilhassem informações na Internet de forma mais fácil e intuitiva. A WWW foi criada por Tim Berners-Lee, um cientista da computação do CERN que desenvolveu o protocolo Hypertext Transfer Protocol (HTTP) e a linguagem de marcação HyperText Markup Language (HTML). O vídeo a seguir mostra como se deu toda a evolução da Internet.

Sem título Text

Arquitetura da Internet

A Internet está organizada sobre uma arquitetura, que é um conjunto complexo de elementos interconectados que permitem a troca de informações e o acesso a recursos online em todo o mundo. Pense na Internet como uma imensa rede interconectada de computadores, smartphones, tablets e outros dispositivos eletrônicos. Esses dispositivos são chamados de clientes, quando acessam informações ou recursos online, e de servidores, quando os fornecem. A Figura 4 mostra um exemplo visual de interação entre os clientes e o servidor. Ela é um dos elementos centrais da arquitetura da Internet. Lembrando:  os clientes são os dispositivos utilizados pelos usuários, como computadores, smartphones e tablets, que solicitam e acessam informações ou recursos online fornecidos pelos servidores. Os servidores, por outro lado, são os computadores ou sistemas que fornecem essas informações ou recursos, atendendo às solicitações dos clientes.

Figura 4: Arquitetura Cliente-Servidor

Sem título Text

Fonte: Adaptado de (ctrlzeta.com)

Quando você está usando a Internet, seu dispositivo (cliente) envia uma solicitação para um servidor específico. Essa solicitação pode ser para abrir uma página da Web, enviar um e-mail, fazer o download de um arquivo, assistir a um vídeo ou qualquer outra coisa que você queira fazer online. O servidor recebe a solicitação e envia a resposta (vídeo, e-mail, arquivo, etc.) de volta para o seu dispositivo. Esse envio gera um tráfego de rede, que é um fluxo de dados que ocorre na Internet da seguinte maneira: quando um cliente solicita um recurso ou uma informação, uma série de pacotes de dados é enviada pela rede, seguindo as rotas determinadas pelos roteadores. Os roteadores são dispositivos responsáveis por enviar os pacotes de dados de um local para outro, definindo uma rota e garantindo que eles cheguem ao destino correto. Esse envio de dados entre clientes e servidores é regido por um conjunto de regras chamadas de TCP/IP, como demonstra a Figura 5. Essas regras definem como os dados são transmitidos e roteados pela rede. Sendo assim, dentro da Internet, a arquitetura TCP/IP desempenha um papel fundamental para que a comunicação cliente-servidor ocorra.

Figura 5: Modelo da arquitetura TCP/IP

Modelo da arquitetura TCP/IP.

Host A

Sem título Text

Cria e empacota a mensagem a ser transmitida.

Aplicação

Sem título Text

Protocolos específicos, como HTTP, FTP, SMTP, entre outros, formatam a mensagem para transmissão e determinam o endereço de destino.

Transporte

Sem título Text

Na camada de transporte, os dados são segmentados.  O protocolo TCP garante entrega e controle, enquanto o UDP permite transmissões rápidas sem garantias.

Internet

Sem título Text

Na camada de rede, os segmentos são transformados em pacotes pelo protocolo IP, que define seus endereços e direciona sua rota através de roteadores.

Rede

Sem título Text

Na camada de acesso à rede, os pacotes são convertidos em quadros adaptados ao meio físico específico, como Ethernet, Wi-Fi, entre outros. Em seguida os quadros são transmitidos pelo respectivo meio, como cabos ou ondas de rádio. Ao chegar no destino, são reconvertidos em pacotes e, em seguida, na mensagem original para a aplicação.

Sem título Text

Fonte: Adaptado de ( datarain.com)

A arquitetura TCP/IP é um conjunto de protocolos (regras) de comunicação que define como os dados são transmitidos e roteados pela rede. Ele é composto de quatro camadas: aplicação, que lida com as aplicações e serviços que utilizamos na Internet, como navegadores da Web, e-mail, transferência de arquivos, transferência de hipertexto, etc.; transporte, que é responsável por garantir uma comunicação confiável e eficiente entre os dispositivos, utilizando os protocolos TCP, que estabelece uma conexão confiável cliente-servidor, e o UDP, mais simples e rápido, porém sem garantias de uma entrega confiável de dados; Internet, que lida com o endereçamento dos pacotes de dados (o endereço IP) e o roteamento deles através da rede; e, por fim, rede, que é responsável pela comunicação entre o dispositivo e a rede física em forma de bits por meio de cabos, sinais de rádio ou qualquer outro meio de transmissão.

Vamos entender melhor as duas camadas principais do TCP/IP.  A camada TCP garante que os dados sejam enviados e recebidos corretamente, dividindo as informações em pequenos pacotes de dados que são enviados pela rede, garantindo que todos cheguem ao destino correto e na ordem certa, mesmo que alguns se percam ou cheguem fora de ordem durante a transmissão. Já a camada de Internet é responsável pelo endereçamento e roteamento dos pacotes de dados. Cada dispositivo conectado à Internet tem um endereço IP único, que funciona como um número de identificação, e é usado para que os pacotes de dados sejam encaminhados pelos roteadores e direcionados ao destino correto, atravessando diferentes redes e servidores. Além disso, existem também os switches, que são dispositivos que conectam diferentes dispositivos em uma rede local (LAN - Local Area Network). Eles direcionam os pacotes de dados diretamente para o destino pretendido, tornando a comunicação mais rápida e eficiente.

Para garantir a segurança da arquitetura TCP/IP, são usados firewalls, que são como barreiras de proteção que protegem contra ameaças e acessos não autorizados. Os firewalls controlam o tráfego de rede com base em regras predefinidas, permitindo que apenas as conexões autorizadas entrem ou saiam dela. A Figura 6 mostra um exemplo de firewall. Eles monitoram o fluxo de dados em busca de ameaças e bloqueiam conexões não autorizadas ou de caráter malicioso, inclusive gerenciando as portas de entrada e saída utilizadas pelos protocolos da camada de aplicação. Dentre esses protocolos está o de transferência de hipertexto (HTTP), que é amplamente utilizado para a transferência de dados na Web, permitindo o acesso a sites e recursos online. Esse protocolo utiliza a linguagem HTML (Hypertext Markup Language) para criar e estruturar páginas da Web. É com o HTML que definimos o layout, o texto, as imagens, os links e outros elementos que compõem uma página. Além do HTML, são utilizadas outras linguagens do lado do cliente, como JavaScript, para adicionar interatividade a página, e CSS, que adiciona regras de estilos às páginas da Web.

Figura 6: Modelo explicando o que é um firewall

Firewall

Usuário

Sem título Text

Usuário: Acessa um site na Internet.

Sem título Text

Firewall: Gerencia os dados que serão enviados e recebidos do navegador. Caso receba alguma solicitação, dado ou requisição suspeita, ele bloqueia o acesso do navegador.

Navegador

Sem título Text

Navegador: Envia requisições para o servidor e, ao receber as informações solicitadas, as direciona para o usuário. Pode sofrer ataques externos que mandam para ele respostas e dados contaminados.

Servidor

Sem título Text

Servidor: Recebe as solicitações do navegador e responde com a mensagem solicitada.

Hacker

Sem título Text

Hacker: Invade a solicitação do navegador e gera respostas corrompidas com intuito malicioso para o browser do usuário.

Sem título Text

Fonte: Adaptado de Avast

Quando falamos "o lado do servidor", estamos nos referindo à parte da aplicação que é executada no servidor, que é um computador especializado e dedicado a responder às solicitações dos clientes. No lado do servidor, são utilizadas várias linguagens de programação, como PHP, Python, Ruby, Java, entre outras. Temos “o lado do cliente" quando a aplicação é executada no dispositivo do usuário, como um computador, smartphone ou tablet. Dessa forma, o código da aplicação no navegador web é baixado do servidor em um arquivo que é executado no dispositivo do cliente. Normalmente, a linguagem utilizada no lado do cliente é o JavaScript, que é interpretado pelo navegador e executa as ações definidas pelo desenvolvedor diretamente no dispositivo do usuário. Essa linguagem de programação permite adicionar interatividade e dinamismo às páginas web, com manipulação de elementos HTML, realização de requisições a servidores, validação de formulários, criação de animações, entre outras funcionalidades que veremos mais adiante. Para entendermos melhor todo esse processo, vamos assistir a um vídeo chamado Guerreiros da Internet.

Sem título Text

Resumindo, a arquitetura da Internet (TCP/IP) envolve a comunicação entre clientes e servidores, o uso de protocolos, o controle do tráfego de rede (TCP/UDP), a segurança com firewalls, a função dos roteadores e switches, endereçamento IP, além da criação de páginas web com HTML, CSS e JavaScript. Vamos praticar? Responda ao quiz abaixo.

Atividade 1 Capítulo 1

Q: Qual é a função da camada de Internet?
- Endereçamento e roteamento dos pacotes de dados (correct)
- Gerenciamento de segurança da rede
- Interação com o usuário
- Execução de aplicações

Q: Quais são os dois protocolos de transporte principais utilizados no TCP/IP?
- TCP e UDP (correct)
- HTTP e FTP
- SMTP e POP3
- DNS e DHCP

Q: O que são firewalls no contexto da arquitetura TCP/IP?
- Barreiras de proteção contra ameaças e acessos não autorizados (correct)
- Protocolos de comunicação
- Dispositivos para conectar diferentes dispositivos em uma LAN
- Pacotes de dados transmitidos pela rede

Feedback (0 to 100%): 100

Sem título Text

Marcação de texto e Sintaxe HTML

Muitas vezes, as pessoas têm a ideia equivocada de que a única maneira de acessar a Internet é por meio de um navegador. Atualmente, com a IoT (Internet of Things), vários dispositivos já acessam a Internet, enviando dados e recebendo solicitações. Os navegadores da Web são os aplicativos que permitem aos usuários acessar e interagir com a World Wide Web. Eles interpretam o código HTML e outros recursos da Web, como CSS (Cascading Style Sheets) e JavaScript, para exibir páginas em um formato visualmente agradável. Alguns dos navegadores mais populares incluem o Google Chrome, Mozilla Firefox, Microsoft Edge, Safari e Opera. A Figura 7 mostra a logo dos principais navegadores no mercado.

Figura 7: Modelos de browsers mais utilizados, todos são compatíveis tanto com desktops quanto com mobile

[Image: Imagem com os modelos de browser: Safari, Firefox, Chorme, Edge e Opera]

Sem título Text

Fonte: Adaptado de Coschedule.com

Cada navegador possui sua própria interface e recursos exclusivos, mas todos eles têm como objetivo principal permitir a navegação na Web.  Eles fornecem recursos como a capacidade de inserir URLs (Uniform Resource Locators) para acessar páginas da Web específicas, navegar por links, visualizar imagens e reproduzir conteúdo multimídia, como vídeos e áudio. Eles também suportam recursos avançados, como preenchimento automático de formulários, bloqueio de anúncios, gerenciamento de senhas e extensões personalizadas.

Ao longo dos anos, os navegadores evoluíram significativamente, adicionando suporte a tecnologias mais recentes, como HTML5, CSS3 e WebGL. Eles se tornaram mais rápidos, seguros e versáteis, permitindo que os usuários acessem uma ampla gama de serviços online, como redes sociais, serviços bancários, streaming de mídia e muito mais. No entanto, existem várias outras opções para desfrutar da vastidão da Web.

Além dos navegadores, uma infinidade de programas e serviços estão disponíveis para nos conectar ao mundo online e explorar seus recursos. Hoje em dia, programas de mensagens, por exemplo, oferecem uma maneira rápida e conveniente de se comunicar com outras pessoas. Eles permitem trocar mensagens instantâneas, fazer chamadas de voz e vídeo, compartilhar arquivos e até mesmo participar de videoconferências, tudo isso sem precisar abrir um navegador. Essas ferramentas de comunicação tornam o contato com amigos, familiares e colegas de trabalho mais fácil e acessível. Outra forma de acessar a Internet é através de serviços de streaming de áudio e vídeo. Com essas plataformas, é possível acessar os mais recentes álbuns musicais, ouvir podcasts, descobrir novas músicas e até mesmo criar listas de reprodução personalizadas. Dessa forma, é possível desfrutar de conteúdo de áudio cativante e variado, adequado aos nossos gostos e interesses, sem a necessidade de um navegador.

Dica!

Ao desenvolver páginas web, é muito importante testá-las em diversos navegadores para saber como elas irão se comportar em cada um deles.

Sem título Text

Além disso, a computação em nuvem tornou-se uma opção popular para acessar e armazenar dados online. Através de serviços de armazenamento em nuvem, é possível fazer o upload e o compartilhamento de arquivos, documentos e fotos, tornando-os acessíveis a partir de qualquer dispositivo conectado à Internet. Essa flexibilidade oferecida pela computação em nuvem permite que os usuários acessem seus arquivos importantes e trabalhem de forma colaborativa, independentemente do navegador que estejam utilizando. É importante lembrar que todas essas formas de acesso à Internet estão baseadas na World Wide Web, que é a espinha dorsal da Internet moderna. A Figura 8 mostra um modelo de Cloud Computing.

Figura 8: Modelo de Cloud Computing

[Image: Desenho sobre computação em nuvem]

Sem título Text

Fonte: Adaptado de help desk geek

A WWW possibilita aos usuários de computador localizar e visualizar uma infinidade de documentos multimídia, como textos, imagens, animações, áudios e vídeos. Essa riqueza de conteúdo disponível online nos permite aprender, comunicar, entreter e explorar de maneiras nunca antes imaginadas. A World Wide Web é um sistema de informação global que permite o acesso e a interligação de documentos e recursos na Internet. A Web é baseada em um conjunto de tecnologias que permitem a criação, organização e visualização de conteúdo na forma de páginas. Os elementos fundamentais da Web incluem o hipertexto, que permite a criação de links entre documentos e recursos, e o Protocolo de Transferência de Hipertexto (HTTP), que permite a transferência de dados na Web.  Este protocolo é responsável pela transferência de arquivos no formato de hipertexto, principalmente no formato HTML. Essa é uma linguagem de marcação utilizada para estruturar e apresentar conteúdo na World Wide Web. Foi criada por Tim Berners-Lee na década de 1990 e se tornou a base da Web moderna.

A linguagem HTML é composta por uma série de elementos ou tags, que são inseridos em um documento para indicar como o conteúdo deve ser organizado e exibido em um navegador. Cada elemento é delimitado por uma marca de abertura () e uma marca de fechamento (), e o conteúdo é inserido entre essas marcas. Estas tags HTML podem ser usadas para definir diferentes tipos de conteúdo, como parágrafos, títulos, listas, links, imagens, tabelas e muito mais. Cada elemento possui um propósito específico e é formatado e exibido de acordo com as regras definidas pelos navegadores. Além dos elementos básicos, o HTML também permite adicionar atributos aos elementos para fornecer informações adicionais e controle sobre seu comportamento. Os atributos são inseridos nas tags e podem especificar coisas como cores, tamanhos, alinhamentos, URLs de destino, entre outros. A estrutura do HTML é organizada em uma árvore hierárquica, onde os elementos podem estar aninhados uns dentro dos outros, formando uma estrutura de conteúdo. Essa estrutura é importante para definir a semântica e a estrutura lógica do documento, permitindo que os navegadores interpretem e exibam o conteúdo corretamente.

Com o passar do tempo, o HTML evoluiu e diferentes versões foram lançadas. A versão mais recente é o HTML5, que trouxe uma série de recursos avançados, como suporte à mídia integrada (como áudio e vídeo), elementos de formulário aprimorados, gráficos vetoriais e muito mais. O HTML5 também permitiu o desenvolvimento de aplicativos web mais ricos e interativos. É uma linguagem fundamental para o desenvolvimento de sites e aplicações web. Junto com o CSS e o JavaScript, forma a base para a criação de páginas web dinâmicas e atrativas visualmente. Com o HTML, os desenvolvedores podem estruturar e organizar o conteúdo, tornando-o acessível, legível e interativo para os usuários da Web.

Sem título Text

Conclusão

A história da Internet iniciou nas décadas de 1960 e 1970 com o desenvolvimento de redes pioneiras, como Arapanet, Cyclades e a NPL. A Arpanet, financiada pela DARPA dos EUA, foi uma das primeiras redes a implementar o protocolo TCP/IP, fundamental para o desenvolvimento da Internet moderna. Cyclades, uma rede francesa, contribuiu significativamente para o conceito de datagrama, também vital para o TCP/IP. A Ethernet, desenvolvida por Robert Metcalfe, foi crucial para padronizar a comunicação em redes locais. A arquitetura cliente/servidor emergiu como um modelo fundamental na Internet, onde servidores fornecem recursos ou serviços, e clientes os acessam. O TCP/IP, composto pelos protocolos de controle de transmissão (TCP) e protocolo de Internet (IP), tornou-se a espinha dorsal da Internet, facilitando a comunicação e transferência de dados. Firewalls foram desenvolvidos para proteger redes contra acessos não autorizados, monitorando e controlando o tráfego de entrada e saída. Por fim, o HTML (Linguagem de Marcação de Hipertexto) foi criado por Tim Berners-Lee, revolucionando a Internet ao permitir a criação de páginas web e navegadores, fundamentais para a World Wide Web.

Sem título Text

Glossário

Mainframes: Grandes computadores utilizados por empresas e organizações governamentais para processamento massivo de dados.

Ethernet: Tecnologia inventada por Robert Metcalfe em 1973, permitindo a comunicação em rede entre vários computadores.

LAN (Rede Local): Rede privada operando dentro de um único edifício, conectando computadores e dispositivos eletrônicos.

Arpanet: Rede de computadores criada em 1969 pela Agência de Projetos de Pesquisa Avançada do Departamento de Defesa dos EUA.

TCP/IP (Transmission Control Protocol/Internet Protocol): Conjunto de protocolos de comunicação que define a transmissão e roteamento de dados pela rede.

World Wide Web (WWW): Sistema global de informação permitindo o acesso e interligação de documentos e recursos online.

Navegador da Web: Aplicativo que permite aos usuários acessar e interagir com a World Wide Web, interpretando HTML, CSS e JavaScript.

IoT (Internet of Things): Conceito que se refere à interconexão de dispositivos físicos à Internet para coleta e troca de dados.

Computação em Nuvem: Modelo que oferece acesso sob demanda a recursos de computação, como armazenamento e processamento, pela Internet.

HTML (Hypertext Markup Language): Linguagem de marcação utilizada para estruturar e apresentar conteúdo na World Wide Web.

CSS (Cascading Style Sheets): Linguagem utilizada para adicionar estilos e formatação a documentos HTML.

JavaScript: Linguagem de programação do lado do cliente utilizada para adicionar interatividade a páginas web.

Firewall: Barreira de proteção que controla o tráfego de rede com base em regras predefinidas, protegendo contra ameaças.

Cloud computing: Modelo que oferece acesso a recursos de computação através da Internet, como armazenamento e processamento.

Capítulo 2 - HTML: HyperText Markup Language

Sem título CustomCSS

Sem título ObjetivoCapDEAD

Ao longo deste estudo, buscaremos primeiramente conhecer a história e a estrutura do HTML, desvendando como a marcação de texto se tornou a base da web. Em seguida, iremos aprofundar-nos nas tags de formatação de texto e no funcionamento dos hiperlinks, elementos cruciais para a apresentação e a navegação de conteúdo. Avançando, aprenderemos a trabalhar com imagens, vídeos e listas em HTML, enriquecendo as páginas com elementos multimídia e estruturação de informações. Por fim, exploraremos os conceitos do CSS, compreendendo o uso de IDs e classes e as principais regras para dar estilo e vida às nossas criações.

Sem título Text

Introdução

HTML é a abreviação de "HyperText Markup Language", que, traduzido para o português, significa "Linguagem de Marcação de Hipertexto", sendo a linguagem fundamental para a construção e estruturação de páginas na internet. O termo "hipertexto" pode ser um pouco complexo e multifacetado, dando margem a diversas interpretações e debates técnicos e teóricos. No entanto, para simplificar e facilitar o entendimento, podemos definir hipertexto como todo o conteúdo inserido em um documento destinado à Web. Sua característica mais distintiva é a capacidade de se conectar a outros documentos ou páginas na Web, criando uma rede interconectada de informações e documentos de diversos tipos. Nos anos 90, o mundo testemunhou uma revolução digital sem precedentes, com o desenvolvimento da World Wide Web e, em seu cerne, a linguagem HTML, que ajudou a trazer seu conteúdo à vida e evoluiu rapidamente.

Já em sua versão 2.0, o HTML recebeu uma melhoria substancial em relação à sua forma original, consolidando muitas das práticas de marcação e sendo amplamente adotado na internet, estabelecendo-se como o padrão para criação de páginas web. Não demorou muito para que a demanda por recursos mais avançados de formatação e interatividade levasse ao desenvolvimento das versões subsequentes. O HTML 3.2, lançado em janeiro de 1997, foi um marco importante, principalmente por ter sido a primeira versão a ser formalizada pelo World Wide Web Consortium (W3C), uma organização internacional que trabalha no desenvolvimento de padrões para a Web. Esta versão trouxe consigo uma série de novos recursos, como tabelas, applets Java e suporte a texto e cores, além de trazer mais consistência e interoperabilidade entre os navegadores da época, que muitas vezes interpretavam o HTML de maneira diferenciada. No mesmo ano, o W3C lançou a versão 4.0 do HTML, expandindo ainda mais o leque de possibilidades para os desenvolvedores e designers web. Com a inclusão de CSS (Cascading Style Sheets), possibilitou-se um controle mais refinado sobre a aparência dos elementos de uma página, separando o conteúdo da apresentação visual. Além disso, melhorias na acessibilidade e internacionalização foram implementadas, refletindo o crescimento global da internet.

Já no final da década, em 1999, a versão 4.01 do HTML foi lançada como uma revisão menor, que corrigiu vários bugs e clarificou especificações ambíguas, pavimentando o caminho para o que viria a ser o futuro da marcação web com o advento do XHTML e, mais tarde, do HTML5. O envolvimento do W3C foi crucial durante todo esse período pois, com o seu apoio, o HTML se transformou de uma linguagem de marcação simples para uma plataforma robusta que suporta a complexa ecologia de aplicações web que temos hoje.

Neste capítulo, vamos mergulhar no fascinante mundo do HTML e entender sua intrínseca relação com a W3C. Começaremos explorando a evolução do HTML, desde suas origens humildes, como uma simples linguagem de marcação, até sua transformação em uma ferramenta poderosa que sustenta grande parte da Web que conhecemos hoje. Discutiremos suas características fundamentais, a sintaxe básica e as diversas tags e atributos que compõem essa linguagem. Além disso, examinaremos como o HTML, em sua jornada, enfrentou desafios de padronização e interoperabilidade, sendo esse o contexto em que a W3C desempenhou um papel fundamental como guardiã dos padrões da Web, garantindo que tecnologias como HTML, CSS e JavaScript fossem consistentes e acessíveis em diferentes plataformas e navegadores.

Sem título Text

Uma breve história do HTML

A invenção da World Wide Web (WWW) revolucionou a forma como compartilhamos e acessamos informações. Essa inovação foi concebida em 1992 por Sir Tim Berners-Lee (Figura 1), um cientista da computação britânico, enquanto trabalhava no CERN, o Laboratório Europeu de Física de Partículas. O principal objetivo de Berners-Lee era desenvolver um sistema que permitisse aos cientistas de todo o mundo compartilhar eletronicamente seus textos, pesquisas e descobertas, pois ele percebeu a necessidade de criar um método mais eficiente para a disseminação de conhecimento entre a comunidade científica global. Nessa busca, Sir Tim Berners-Lee introduziu o conceito de hipertexto, uma forma de texto que contém links para outros textos. Isso levou à criação da noção de "Web" e "hiperlinks", como conhecemos hoje. Em vez de apenas ler um documento linearmente, os usuários poderiam clicar em links específicos para serem direcionados a outros documentos relacionados, criando assim uma rede interconectada de informações.

Figura 1: Tim Berners-Lee, o inventor da Web

[Image: Imagem de Tim Berners-Lee, 1998]

Sem título Text

Fonte: W3C (w3.org)

Em 1990, antes mesmo da formalização da World Wide Web, Berners-Lee desenvolveu o Nexus, o primeiro navegador Web. Esse software permitia aos usuários visualizar documentos na Web e navegar entre eles usando hiperlinks. O Nexus não era apenas um navegador (browser), mas também um editor, permitindo que os usuários criassem e editassem páginas Web. Com o tempo, o conceito de navegador evoluiu e muitos outros navegadores foram desenvolvidos, cada um com suas características e funcionalidades. No entanto, o objetivo central permaneceu o mesmo: permitir que os usuários naveguem pela vastidão da Web, acessando, visualizando e interagindo com uma infinidade de documentos e informações. A invenção da Web por Sir Tim Berners-Lee e sua equipe no CERN foi um marco na história da tecnologia e da comunicação, moldando a forma como interagimos com o mundo digital até hoje. Para compor as páginas, eram utilizadas linguagens de marcação de texto, como por exemplo, o HTML.

Figura 2: A história da internet

Sem título Course Presentation

Sem título Text

A História do HTML

Sem título Text

Uma jornada através do tempo explorando a evolução do HTML

Sem título Text

O Início - Anos 90

Sem título Text

Criação do HTML por Tim Berners-Lee: Compartilhar documentos e pesquisas entre cientistas

Sem título Text

HTML - Primeiras Versões

Sem título Text

Criação de links, cabeçalhos, listas. criação dos navegadores Mosaic e Netscape.

Sem título Text

O Surgimento da W3C

Sem título Text

Fundada em 1994 com o objetivo de Padronizar e orientar o desenvolvimento do HTML

Sem título Text

HTML 4 e a Era do XHTML

Sem título Text

Introdução do CSS e do XHTML: Uma reformulação do HTML com rigor do XML.

Sem título Text

A Revolução do HTML5

Sem título Text

Suporte nativo para multimídia, API's para desenvolvimento avançado e melhorias de semântica e acessibilidade.

Sem título Text

Desafios e Competição

Sem título Text

Problemas de compatibilidade entre navegadores e necessidade de padronização.

Sem título Text

O Futuro do HTML

Sem título Text

Integração com tecnologias emergentes e continuação da padronização e acessibilidade

Sem título Text

Conclusão

Sem título Text

"Do compartilhamento de documentos científicos à criação de experiências Web ricas e interativas, o HTML continua a ser a espinha dorsal da Web."

Sem título Text

Referências e Leituras Adicionais

Sem título Text

https://www.w3c.br/Sobre/ConhecendoW3C

https://www.infoescola.com/informatica/html/

Sem título Text

Fonte: Elaborada pelo autor

O HTML (HyperText Markup Language) tem sido a espinha dorsal da Web desde os seus primórdios. Ele permitiu aos desenvolvedores criar páginas web estruturadas, incorporando elementos como texto, imagens e links. No entanto, à medida que a Web evoluía e as necessidades dos usuários se tornavam mais complexas, ficou claro que a linguagem precisava evoluir para atender a essas demandas. Por outro lado, tínhamos o XHTML, uma reformulação do HTML baseada em XML. O XHTML foi projetado para ser mais rigoroso e compatível com as normas, exigindo que os desenvolvedores seguissem regras mais estritas ao codificar suas páginas. Isso proporcionou uma estrutura mais consistente e previsível, mas também apresentou alguns desafios em termos de flexibilidade e compatibilidade com navegadores mais antigos. Reconhecendo a necessidade de uma abordagem mais unificada e moderna, o consórcio World Wide Web (W3C) (Figura 2) e o grupo de trabalho WHATWG começaram a colaborar na criação do HTML5. O W3C é um consórcio internacional em que uma equipe em tempo integral, organizações filiadas e o público geral trabalham juntos para desenvolver padrões para a Web. Sob a liderança de Tim Berners-Lee, o inventor da Web, e do CEO Jeffrey Jaffe, o W3C tem a missão de impulsionar todo o potencial da World Wide Web, desenvolvendo protocolos e diretrizes que garantam seu crescimento a longo prazo.

Figura 3: Logo da W3C

[Image: Logo da World Wide Web Consortium (W3C)]

Sem título Text

Fonte: W3C (w3c.org)

Com o novo HTML5, um novo padrão foi projetado para incorporar o melhor dos mundos HTML e XHTML, introduzindo uma série de novas funcionalidades, como suporte nativo para vídeo e áudio, gráficos avançados através do Canvas e melhorias na semântica e acessibilidade da Web. O HTML5 também foi projetado com a visão de ser agnóstico em relação ao dispositivo, permitindo que os desenvolvedores criassem aplicações e sites que funcionassem de forma consistente em desktops, tablets, smartphones e outros dispositivos. Isso foi crucial em uma era em que a computação móvel estava em rápido crescimento. Isso porque o HTML5 não é apenas uma atualização do HTML, mas uma redefinição de como o conteúdo e as aplicações são entregues e experienciados na Web, tornando-a mais rica, acessível e versátil.

Atividade 1 Capítulo 2

Arraste as palavras para os campos corretos

Q: Tim Berners-Lee, enquanto trabalhava no CERN, inventou a World Wide Web e escreveu o primeiro [...]

O protocolo [...] é a base da transferência de dados na internet.

A sigla [...] significa Hypertext Markup Language.
A: Browser; HTTP; HTML

Sem título Text

Estrutura do HTML

Atualmente, o HTML mantém sua posição como a pedra angular da Web, sustentando a estrutura e apresentação de bilhões de páginas na World Wide Web. Enquanto suas origens remontam a um meio simples de compartilhar documentos acadêmicos, hoje o HTML evoluiu para se tornar uma linguagem de marcação dinâmica e versátil, apta a responder às demandas crescentes da era digital.

Para funcionar, o HTML utiliza marcações em seu código, que determinam como o conteúdo será interpretado e exibido pelos navegadores. Dessa forma, a estrutura básica de um documento HTML é composta por tags, que são palavras-chave cercadas pelos símbolos maior e menor ("<" e ">"). Cada tag possui uma função específica e ajuda a definir a estrutura e o formato do conteúdo. Por exemplo, a tag "<h1>" é usada para criar um título principal, enquanto a tag "<p>" é usada para criar parágrafos. Entretanto, há algumas exceções para o funcionamento aos pares, como por exemplo a marcação que indica uma quebra de linha <br>, que não possui tag de fechamento. A estrutura básica do HTML é composta pelas seguintes tags.

Figura 4: Estrutura Básica e Tags Essenciais de um Documento HTML

Sem título Image Hotspots

Início e Fim do Documento

Sem título Text

A tag <html> é o elemento raiz que envolve todo o conteúdo de uma página da web. Ela sinaliza para o navegador que o documento é um arquivo HTML. Todas as outras tags, como <head> e <body>, devem estar contidas dentro dela.

Cabeçalho do Documento

Sem título Text

A seção <head> (cabeçalho) contém metadados e informações sobre o documento que não são exibidas diretamente no conteúdo da página. Aqui são definidos o título da página (que aparece na aba do navegador), links para folhas de estilo (CSS), scripts (JavaScript) e outras informações importantes para os navegadores e mecanismos de busca.

Corpo da Página

Sem título Text

A tag <body> (corpo) define o conteúdo principal e visível da página da web. Tudo o que o usuário vê na janela do navegador – como textos, títulos, parágrafos, imagens, links, tabelas e vídeos – deve ser colocado dentro desta tag.

Sem título Text

Fonte: Adaptado pelo autor

Os editores de texto mais recentes já estruturam o HTML de forma a levar em consideração os diferentes tamanhos de tela em que os sites são apresentados atualmente e o idioma do site, adicionando mais tags meta com algumas configurações de portabilidade e linguagem a esta estrutura, como vemos logo abaixo.

Figura 4: Estrutura Básica de um Documento HTML

Sem título Image Hotspots

<!DOCTYPE html>

Sem título Text

Estrutura inicial herdada do XHTML

<html lang="en">

Sem título Text

Tag inicial do HTML com definição da linguagem da página;

<head>

Sem título Text

Tag onde se insere os metadados da página;

<meta charset="UTF-8">

Sem título Text

Tag de metadado informando os tipos de caracteres presentes na página;

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Sem título Text

Tag que define a escala de adequação à tela de 1:1;

<body>

Sem título Text

Onde fica todo o conteúdo do site que será mostrado ao usuário.

Sem título Text

Fonte: Adaptado pelo autor

Ao observarmos o esqueleto inicial do HTML5, fica claro o quão fundamentais são suas tags estruturais na criação de uma página web bem organizada. Elementos como , que define o início e o fim de um documento, e , que aloca metadados cruciais, são muito importantes para a estruturação do website. Dentro do , temos a tag, que determina o conjunto de caracteres usado na página, garantindo a correta exibição de textos.

Dica

Ao desenvolver um site responsivo, é crucial incluir a tag <meta name="viewport" content="width=device-width, initial-scale=1.0"> dentro do <head>. Essa tag garante que o layout da página se ajuste adequadamente a diferentes tamanhos de tela, desde dispositivos móveis até desktops. O atributo “width=device-width” faz com que a largura da página corresponda à largura do dispositivo, e “initial-scale=1.0” define o nível de zoom inicial ao carregar a página. Com essa tag, você proporciona uma experiência de navegação otimizada e consistente para todos os visitantes do seu site.

Sem título Text

As tags <html>, <head> e <body> são fundamentais. O <html> envolve todo o seu documento, enquanto o <head> contém metadados e o <body> abriga o conteúdo visível da sua página.

Formatando texto em HTML

Além de transmitir informações relevantes, a maneira como o texto é formatado e destacado em uma página web é de suma importância na arquitetura da informação e na experiência do usuário. A linguagem HTML fornece uma variedade de marcações que possibilitam a aplicação de estilos e formatos diversos ao texto, garantindo uma apresentação atraente e legível. Segue abaixo a Tabela 1 contendo várias tags de edição de texto.

Tabela 1: Elementos HTML para Formatação de Texto

Sem título Tabela Visual com Scroll

Marcação

Função

<b>

Colocar o texto em negrito.

<strong>

Visualmente faz o mesmo que a marcação b, basicamente é apenas uma recomendação mais nova.

<i>

Coloca o texto em itálico

<em>

Visualmente faz o mesmo que a marcação i, basicamente é apenas uma recomendação mais nova.

<mark>

Coloca marcado com uma cor de destaque.

<small>

Coloca o texto em destaque, diminuindo seu tamanho em relação ao tamanho padrão.

<del>

Coloca um traço sobre o texto para marcar que o referido trecho foi excluído do texto original.

<ins>

Coloca um traço sob o texto para marcar que o referido trecho foi incluído no texto original.

<sub>

Coloca o texto subescrito.

<sup>

Coloca o texto sobrescrito.

Sem título Text

Fonte: Autor

Sem título Emphasis Card

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: São tags de cabeçalho, com <h1> sendo o mais importante (e geralmente o maior) e <h6>, o menos importante.

Sem título Text

Caso você fique interessado em explorar ainda mais as possibilidades de formatação e marcação em HTML, o site w3schools.com é uma excelente fonte de referência. Ele oferece uma biblioteca completa com todas as tags do HTML, permitindo que você acesse informações detalhadas sobre cada uma delas. Através desse recurso, você pode aprender sobre novas tags, suas funcionalidades e como aplicá-las em seu código HTML.

Sem título Emphasis Card

A tag <blockquote> define uma citação de bloco, geralmente usada para longas citações. Já a tag <q> define uma citação curta e a tag <abbr> indica uma abreviação (acrônimo) de um termo.

Sem título Text

Hiperlinks em HTML

Os hipertextos, comumente chamados de hiperlinks ou simplesmente links, são componentes fundamentais do HTML que facilitam a conexão e a navegação entre diferentes páginas Web. Eles possibilitam que, ao clicar em um texto ou imagem, os usuários sejam redirecionados a outra página, um ponto específico na mesma página ou até a um recurso externo. No HTML, a criação de links é feita por meio da tag <a>, que é complementada pelo atributo "href". Esse atributo especifica o destino do link, representado pela URL da página de destino. A título de exemplo, podemos citar que o código <a href="https://www.example.com"> Clique aqui </a> gera um link com o texto "Clique aqui", que conduz o usuário ao endereço "https://www.example.com".

Figura 5: Captura de tela do portal do Campus Avançado Natal - Zona Leste do IFRN

Sem título Image Hotspots

Clique no link indicado abaixo para visitar o site

Sem título Text

O site do Campus Avançado Natal – Zona Leste do IFRN, localizado em https://www.ead.ifrn.edu.br, funciona como um canal de comunicação entre os estudantes, professores e a administração da instituição. Por meio da plataforma, é possível encontrar informações sobre os cursos oferecidos na modalidade EaD, incluindo currículos, duração, requisitos de inscrição e datas importantes.

Sem título Text

Fonte: Elaborada pelo autor

Os links, além de possuírem o atributo href para determinar o destino, podem incluir outros atributos, como o target, que estabelece onde o conteúdo vinculado será exibido (seja na janela atual, em uma nova aba ou em um frame). Outro atributo é o title, que oferece uma descrição breve ou dica quando o cursor é posicionado sobre o link. Esses links podem ser associados tanto a textos quanto a imagens em uma página web, otimizando a navegação dos usuários entre diferentes partes do site ou direcionando-os a recursos externos pertinentes. É crucial empregar os links de maneira objetiva e estratégica, promovendo uma experiência de usuário fluida e incentivando a exploração de conteúdos relevantes. Normalmente, durante a fase de projeto de um website, toda a estrutura do site (páginas) é organizada em um mapa, onde são definidos as ligações entre suas páginas e a melhor forma de exibir os links que realizam essas ligações, normalmente com a utilização de menus interativos, listas de links, botões animados, etc.

Sem título Emphasis Card

Ao criar hiperlinks em HTML, lembre-se de usar o atributo title junto à tag <a>. Ele oferece uma descrição breve ou dica quando o cursor é posicionado sobre o link, melhorando a acessibilidade e proporcionando uma experiência de navegação mais informativa para o usuário. Por exemplo: <a href="https://www.example.com" title="Visite nosso site principal">Clique aqui</a>.

Sem título Text

Além desses links que levam de uma página para a outra, temos também os links de âncora, ou anchor links, frequentemente referidos como "links internos" ou "links de navegação interna", como visto na Figura 5. Esses são elementos HTML que facilitam o acesso a seções específicas dentro de uma única página. São particularmente úteis em conteúdos extensos, como páginas com múltiplos tópicos ou artigos detalhados, pois permitem que os usuários se desloquem diretamente a uma seção de interesse, evitando a necessidade de percorrer toda a extensão do conteúdo.

Figura 6: Anchor links em uma página web

[Image: Âncoras]

Sem título Text

Fonte: Autor

Para criar um link de âncora, você precisa adicionar uma tag de âncora à seção de destino e referenciá-la no link. Primeiro, coloque uma tag com um atributo “name” ou "id" na seção para a qual deseja criar o link de âncora. Por exemplo:

Sem título Code Highlighter

<h2 id="secao1">Seção 1</h2>
<div id="secao2">Conteúdo da Seção 2</div>

Sem título Text

Em seguida, você pode criar um link que referencia essa âncora usando o atributo “href” com o valor “#” seguido pelo nome ou ID da âncora. Por exemplo:

Sem título Code Highlighter

<a href="#secao1">Ir para a Seção 1</a>

Sem título Text

Ao clicar no link de âncora, o navegador irá rolar automaticamente para a seção específica da página identificada pelo nome ou ID da âncora. Isso proporciona aos usuários uma maneira conveniente de navegar rapidamente para seções de interesse em páginas com muito conteúdo vertical. Os links de âncora são particularmente úteis em páginas longas, como tutoriais, documentos extensos ou páginas de perguntas frequentes, onde os usuários podem desejar pular diretamente para uma seção específica. Eles melhoram a usabilidade, facilitando a navegação interna e tornando mais fácil para os usuários encontrarem as informações desejadas em uma página extensa.

Sem título Text

Imagens e Vídeos em HTML

Autilização de imagens e vídeos no HTML não só enriquece o conteúdo, mas também eleva a estética e torna as páginas web mais envolventes e visualmente atraentes. As imagens, em particular, têm o poder de capturar rapidamente a atenção do usuário, transmitir mensagens complexas de forma intuitiva e complementar o texto, tornando a informação mais compreensível.

Para incorporar uma imagem em uma página HTML, utilizamos a tag <img>, como podemos ver na Figura 6. Esta tag é simples, mas crucial, e tem como principal atributo o "src" (abreviação de "source", ou "fonte" em português). O atributo "src" é obrigatório e determina o caminho ou a URL onde a imagem está localizada. Além do "src", existem outros atributos opcionais que podem ser usados para otimizar a exibição da imagem, como "alt", que fornece uma descrição textual da imagem (essencial para acessibilidade) e "width" e "height", que definem, respectivamente, a largura e a altura da imagem. Assim, ao projetar uma página web, é fundamental considerar cuidadosamente como e onde as imagens são inseridas, garantindo que elas aprimorem a experiência do usuário, ao invés de sobrecarregá-la ou distraí-la.

Por exemplo:

Sem título Code Highlighter

<img src="caminho/para/imagem.jpg" alt="Descrição da imagem">

Sem título Text

O atributo "alt" fornece uma descrição alternativa para a imagem, que é exibida caso a imagem não possa ser carregada ou para fins de acessibilidade.

Figura 7: Exemplo de uma imagem sendo carregada em uma página HTML

[Image: Imagem de um exemplo de uma página HTML sendo carregada]

Sem título Text

Fonte: Autor

Para inserir vídeos, você pode usar a tag . Essa tag permite a reprodução de vídeos diretamente na página. Você precisa definir o atributo "src" com o caminho ou URL do vídeo e pode especificar outros atributos, como "width" e "height", para definir as dimensões do vídeo na página. Por exemplo:

Sem título Code Highlighter

<video src="caminho/video.mp4" width="500" height="300" controls></video>

Sem título Text

O atributo "controls" exibe os controles de reprodução do vídeo, como play, pause e barra de progresso. Você também pode incorporar vídeos de plataformas de hospedagem como o YouTube ou o Vimeo. Basta copiar o código de incorporação fornecido pela plataforma e colá-lo em sua página HTML. O código de incorporação geralmente é fornecido na forma de um iframe. A inserção de imagens e vídeos no HTML é uma maneira eficaz de transmitir informações visualmente atraentes e envolventes aos usuários, tornando as páginas da Web mais interessantes e interativas.

Sem título Emphasis Card

Ao inserir imagens e vídeos, é importante otimizá-los para Web, garantindo que tenham um tamanho de arquivo adequado e sejam compatíveis com os navegadores. Além disso, é fundamental fornecer descrições alternativas (atributo "alt") para imagens, tanto para fins de acessibilidade quanto para melhorar a indexação em mecanismos de busca.

Sem título Text

Listas em HTML

Em HTML, a capacidade de criar listas ordenadas e não ordenadas é uma ferramenta valiosa para apresentar informações de maneira clara e organizada. Quando bem utilizadas, as listas facilitam a visualização de conjuntos de dados, tornando o conteúdo mais acessível e facilitando a assimilação por parte dos usuários. Elas são especialmente úteis para destacar pontos-chave, etapas de um processo ou categorias de informações.

Para criar uma lista não ordenada, aquela em que os itens não seguem uma sequência numérica ou alfabética específica, usa-se a tag <ul>, cuja sigla provém de "unordered list" (lista não ordenada, em português). Dentro dessa lista, cada item individual é representado pela tag <li>, que significa "list item" (item de lista). Por exemplo:

Sem título Code Highlighter

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>

Sem título Text

- Item 1
- Item 2
- Item 3

Esse código resultará em uma lista não ordenada com os itens "Item 1", "Item 2" e "Item 3", sendo exibidos com pontos ou marcadores como vemos na imagem acima.

Agora, para criar uma lista ordenada, você utiliza a tag <ol>, cuja sigla provém de "ordered list" (lista ordenada, em português). Da mesma forma, cada item da lista é marcado com a tag <li>, que significa "list item" (item de lista). Por exemplo:

Sem título Code Highlighter

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>

Sem título Text

1. Item 1
2. Item 2
3. Item 3

Esse código resultará em uma lista ordenada com os itens "Item 1", "Item 2" e "Item 3", sendo numerados sequencialmente, como podemos ver no exemplo acima. Você também pode criar listas aninhadas, onde uma lista está contida dentro de outra. Isso é feito simplesmente aninhando as tags <li> com <ul>. Por exemplo:

Sem título Code Highlighter

<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 3</li>

Sem título Text

- Item 1
- Item 2
  - Item 2.1
  - Item 2.2
- Item 3

Nesse exemplo, temos uma lista não ordenada com três itens, sendo que o segundo item contém uma lista não ordenada aninhada com os itens "Item 2.1" e "Item 2.2", como visto no exemplo acima. As listas em HTML são uma maneira eficiente de organizar informações e apresentá-las de forma clara e estruturada. Seja para criar listas simples ou complexas com aninhamento, as tags <ul>, <ol> e <li> são fundamentais para formatar listas no HTML. Mais à frente no curso iremos aprender como transformar essas listas em menus interativos para uma página.

Sem título Text

CSS: Cascading Style Sheets

CSS (Cascading Style Sheets) é uma linguagem de estilo utilizada em conjunto com o HTML para definir a aparência e o design de páginas web. Com o CSS, você pode controlar o layout, as cores, as fontes, as animações e outros aspectos visuais de um documento HTML, permitindo uma personalização completa da aparência do conteúdo.

O CSS funciona selecionando elementos HTML e aplicando regras de estilo a eles. As regras de estilo são definidas em blocos de declarações que consistem em um seletor e uma propriedade com o valor correspondente. O seletor indica qual elemento HTML será afetado e a propriedade define qual característica desse elemento será estilizada. Podemos observar a estrutura básica do CSS na Figura 8:

Figura 8: Estrutura básica de uma regra de estilo em CSS

[Image: Estrutura do código CSS]

Sem título Text

Fonte: Autor

Nesse exemplo, o seletor "p" seleciona todas as tags <p> do HTML, a propriedade "color" determina a cor da fonte e o valor "red" determina que a cor vai ser vermelha. Ou seja, a declaração dessa regra diz que todo o texto que estiver em uma tag <p> deverá ser por padrão vermelho.

Sem título Text

IDs e Classes em CSS

Em CSS, ID (identificador) e classes são seletores que permitem aplicar estilos a elementos específicos ou grupos de elementos de uma página web. Eles são utilizados para identificar e selecionar elementos HTML para aplicar estilos personalizados. No CSS, você pode selecionar um elemento pelo seu ID utilizando o seletor "#" seguido do nome do ID. O ID é um seletor único e exclusivo que identifica um elemento específico na página. Ele é definido no HTML usando o atributo "id". Por exemplo, se eu quiser aplicar uma regra a apenas uma tag específica do código HTML eu uso um identificador na tag (atributo "id") e aplico a regra utilizando o #nome do id no CSS. Vamos compreender como criar uma regra de ID:

Sem título Code Highlighter

<div id="minhaDiv">Este é um elemento com ID</div>

Sem título Code Highlighter

Sem título Emphasis Card

Nunca utilize mais de uma tag com o mesmo ID, pois o atributo ID é destinado a ser único e serve para identificar um único elemento na página. Nesse caso, é mais interessante utilizar uma classe para definir esta regra.

Sem título Text

Este CSS está modificando a cor da fonte do conteúdo da tag (propriedade "color") e o tamanho para 18px (propriedade "font-size"). Neste caso, a regra está sendo aplicada apenas a esta tag, e não a todas as outras. Já as classes são seletores reutilizáveis que permitem agrupar elementos semelhantes e aplicar estilos a eles. As classes são definidas no HTML usando o atributo "class". Ou seja, se eu quiser criar uma classe de elementos que compartilhem de uma mesma regra CSS, é só inserir nas tags o atributo classe="nome da classe" e criar a regra de classe no CSS. Vamos observar os códigos abaixo:

Sem título Code Highlighter

<p class="destaque">paragrafo 1</p>
<p class="destaque">paragrafo 2</p>

Sem título Code Highlighter

Sem título Text

Dessa forma, ambas as tags <p> serão afetadas pela mesma regra, pois pertencem à mesma classe CSS. Se qualquer outra tag (não necessariamente a <p>) estiver nessa classe, ela herdará a mesma regra. Ou seja, as regras de classe podem ser aplicadas a diferentes tags. Por exemplo:

Sem título Code Highlighter

<p class="destaque">paragrafo 1</p>
<div class="destaque">Div 1</div>

Sem título Code Highlighter

Sem título Text

As tags <p> e <div> herdarão a mesma regra de destaque, pois ambas pertencem a essa classe. Além delas, qualquer outra tag que seja da mesma classe vai herdar essa regra. Porém, quando a regra não puder ser aplicada à tag, a regra será ignorada pelo browser. Quando há um empilhamento de regras nas tags, o browser aplica a prioridade de regras, de forma que quanto mais específica for a regra, maior será a prioridade. Vejamos a lista de prioridade, da maior para a menor:

- Regra aplicada via atributo "style";
- Regra aplicada via ID;
- Regra aplicada via classe;
- Regra aplicada via tag.

Vamos fazer uma análise rápida para entendermos mais claramente como funcionam as regras de prioridade, se tivermos o seguinte código HTML com CSS:

Sem título Code Highlighter

<p class="greentx" id="bluetx" style="color: red;">Paragrafo</p>

Sem título Code Highlighter

Sem título Text

Ou seja, quanto mais específica é a regra, maior é a prioridade dela, e quanto mais genérica é a regra, menor a sua prioridade.

Sem título Text

Principais regras do CSS

Com o CSS, é possível aplicar uma ampla variedade de estilos a textos, fontes, cores e backgrounds em páginas web. Para estilizar textos, você pode usar propriedades como "font-family" para definir a fonte utilizada, "font-size" para o tamanho do texto e "font-weight" para controlar a espessura da fonte:

Sem título Code Highlighter

Sem título Text

Nesse exemplo, o parágrafo <p> terá o texto exibido em fonte Arial, tamanho de 16 pixels e em negrito. Além disso, você pode definir a cor do texto usando a propriedade "color". Por exemplo:

Sem título Code Highlighter

Sem título Text

Nesse caso, o texto do parágrafo <p> será exibido na cor vermelha, definida pelo código "color: red". Quanto ao background, você pode definir a cor de fundo de um elemento com a propriedade "background-color". Por exemplo:

Sem título Code Highlighter

Sem título Text

Nesse caso, o fundo da página inteira terá uma cor cinza claro, definida pelo código hexadecimal "#f2f2f2". Além da cor, você pode adicionar uma imagem de fundo usando a propriedade "background-image". Por exemplo:

Sem título Code Highlighter

Sem título Text

Nesse exemplo, a página terá uma imagem como fundo, onde "caminho/para/imagem.jpg" é o local e o nome da imagem. É importante notarmos que, no caso do CSS e do HTML, as definições de locais de arquivos são definidas utilizando o mesmo modelo do sistema Unix, muito comum em terminais de comando. Nesse modelo, a pasta atual é caracterizada por "./" e a pasta acima (anterior) é caracterizada por "../", então, se um arquivo de imagem estiver em uma pasta acima da pasta onde está salvo o arquivo html, você usa o caminho "../pasta/imagem.jpg".

Dica!

Ao desenvolver um site, lembre-se de usar unidades relativas, como “em” ou “rem”, em vez de unidades fixas, como “px”, para definir tamanhos de fonte, espaçamento e outros valores. Isso torna seu design mais adaptável e amigável a diferentes dispositivos e tamanhos de tela, garantindo uma experiência de usuário consistente e responsiva. Ao usar “rem”, por exemplo, o tamanho é baseado no tamanho da fonte raiz do documento, o que facilita a implementação de um design fluido e adaptável.

Sem título Text

Em suma, o CSS desempenha um papel fundamental na estilização e personalização de websites, permitindo que os desenvolvedores expressem sua criatividade e otimizem a experiência do usuário. Nas próximas aulas, mergulharemos mais profundamente nas diversas maneiras de integrar o CSS, seja diretamente na tag, no próprio arquivo HTML ou através de um arquivo .css externo. Além disso, exploraremos a criação de animações dinâmicas, a incorporação de Rich Media em um website, incluindo áudio e vídeo, e também a implementação e estilização de formulários em HTML.

Atividade 2 Capítulo 2

Q: Qual é a finalidade principal do CSS em desenvolvimento Web?
- Controlar a aparência e layout da página. (correct)
- Adicionar conteúdo ao Website.
- Estabelecer conexões de banco de dados.
- Criar interatividade na página.

Q: Qual propriedade CSS é usada para alterar a cor de fundo de um elemento?
- background-color (correct)
- color
- bgcolor
- font-color

Sem título Text

Conclusão

A invenção da World Wide Web por Sir Tim Berners-Lee em 1992 representou um marco significativo na história da comunicação e acesso à informação. Ao introduzir o conceito de hipertexto e hiperlinks, Berners-Lee não apenas atendeu à necessidade inicial de facilitar o compartilhamento científico, mas também estabeleceu as bases para uma rede global interconectada de informações. À medida que a Web evoluiu, o HTML desempenhou um papel central na estruturação das páginas, permitindo a criação de conteúdo estruturado e a introdução de elementos como links, imagens e listas. O surgimento do XHTML trouxe uma abordagem mais rigorosa, enquanto o HTML5, resultado da colaboração entre o W3C e o WHATWG, buscou unificar e modernizar a linguagem, atendendo às demandas crescentes.

Além disso, a incorporação de estilos por meio do CSS possibilitou uma personalização abrangente da aparência das páginas Web, proporcionando controle sobre layout, cores e fontes. A utilização de IDs e classes no CSS permitiu a aplicação seletiva de estilos, destacando a importância da especificidade das regras. Por fim, a combinação harmoniosa de HTML, CSS e a evolução contínua dessas tecnologias não apenas facilitou a disseminação eficiente de informações, mas também moldou a experiência do usuário, tornando a Web um meio dinâmico e visualmente atraente para a interação e a aprendizagem.

Sem título Text

Glossário

CERN: Laboratório Europeu de Física de Partículas, onde Sir Tim Berners-Lee concebeu a World Wide Web.

Classes: Conjunto de elementos agrupados por características semelhantes, permitindo a aplicação de estilos a múltiplos elementos.

CSS (Cascading Style Sheets): Linguagem de estilo usada em conjunto com o HTML para controlar o design e a aparência das páginas Web.

Especificidade de Regras CSS: Grau de detalhe e singularidade de uma regra, influenciando sua prioridade de aplicação.

Estrutura básica do HTML: Conjunto de tags fundamentais, como "<head>", "<body>", "<p>", entre outras, que compõem a estrutura de uma página HTML.

Hiperlinks: Elementos que, quando clicados, direcionam o usuário para outros documentos ou recursos relacionados.

Hipertexto: Forma de texto que contém links para outros textos, permitindo a navegação não linear e interconectada.

HTML (HyperText Markup Language): Linguagem de marcação utilizada para estruturar e formatar o conteúdo de páginas Web.

HTML5: Versão moderna e unificada do HTML, resultado da colaboração entre o W3C e o WHATWG.

ID (Identificador): Atributo único em HTML utilizado para identificar e estilizar um elemento específico.

Imagens e Vídeos: Elementos visuais incorporados em páginas Web para enriquecer o conteúdo e melhorar a experiência do usuário.

Links: Elementos em HTML que possibilitam a navegação entre diferentes partes de uma página ou direcionam para recursos externos.

Listas: Elementos que organizam informações de maneira ordenada ("<ol>") ou não ordenada ("<ul>"), facilitando a visualização e assimilação.

Mapa do site: Representação visual da estrutura de um site, indicando as ligações entre páginas e a organização do conteúdo.

Prioridade de Regras CSS: Hierarquia que determina qual regra de estilo é aplicada, considerando atributos como "style", ID, classes e tags.

W3C (World Wide Web Consortium): Consórcio internacional que desenvolve padrões para a Web, liderado por Tim Berners-Lee.

World Wide Web (WWW): Sistema global de informações na internet que permite o compartilhamento e acesso a documentos por meio de hiperlinks

XHTML: Reformulação do HTML baseada em XML, projetada para maior rigor e conformidade com normas.

Capítulo 3 - Tabelas, formulários e Rich Media

Sem título CustomCSS

Sem título ObjetivoCapDEAD

Ao longo deste estudo, buscaremos primeiramente aprender sobre tabelas em HTML, compreendendo suas estruturas fundamentais e como elas organizam dados na web. Em seguida, iremos aprofundar-nos em como o CSS pode melhorar a aparência e o layout das tabelas, transformando-as em elementos visuais mais agradáveis. Avançando, aprenderemos a montar formulários com HTML, desvendando como capturar informações dos usuários. Também exploraremos como o CSS pode incrementar o layout desses formulários, tornando-os mais intuitivos e atraentes. Por fim, para consolidar nossa base de conhecimento, entenderemos a diferença entre tags de bloco e de linha e o layout de blocos em HTML, culminando na utilização de tags para inserir Rich Media nas páginas web.

Sem título Text

Introdução

No âmbito do desenvolvimento web, dois elementos desempenham papéis importantes na organização de dados e interação com o usuário: tabelas e formulários em HTML. Tabelas, com sua capacidade de organizar dados em linhas e colunas, são essenciais para exibir informações complexas, como grades de horários, listas comparativas e conjuntos de dados estatísticos. Elas proporcionam uma estrutura visualmente apelativa e eficiente, facilitando a compreensão e interpretação dos dados apresentados pelos usuários. Por outro lado, os formulários desempenham um papel crucial na interação bidirecional entre o usuário e o site, como capturar informações de contato, realizar pesquisas ou processar transações online. Os formulários em HTML oferecem uma plataforma versátil para coletar e processar dados de maneira eficaz, utilizando campos de entrada, botões de envio e uma variedade de elementos interativos. Inclusive, os formulários capacitam os desenvolvedores a criar experiências personalizadas e adaptáveis às necessidades específicas de cada site. Além destes assuntos, também iremos compreender as diferenças entre tags de bloco e tags de linha, bem como a integração de elementos de Rich Media. As tags de bloco e de linha desempenham papéis distintos na estruturação do conteúdo, enquanto elementos de Rich Media, como áudio, vídeo e incorporação de conteúdo externo, enriquecem significativamente a experiência do usuário.

Sendo assim, neste capítulo, exploraremos a importância, a sintaxe e o uso de tabelas e formulários em HTML, destacando como esses elementos são essenciais na criação de páginas web dinâmicas e funcionais, como se comportam as tags de linha e de bloco, incluindo suas regras de posição e espaçamento, e como utilizar adequadamente conteúdo de Rich Media, entendendo o poder e a versatilidade destes elementos para que os desenvolvedores e designers aprimorem a experiência na web em geral.

Tabelas em HTML

As tabelas são elementos estruturais essenciais no HTML, permitindo a organização e exibição de dados em linhas e colunas de forma clara e sistemática. Sua utilização se tornou indispensável para apresentar informações de maneira organizada e de fácil leitura, constituindo-se como uma ferramenta valiosa em diversas situações. A Figura 1 mostra um exemplo de uma tabela construída em HTML5.

Uma das principais vantagens das tabelas é a capacidade de visualizar dados comparativos. Ao dispor informações lado a lado, torna-se mais fácil analisar e entender padrões, diferenças e tendências entre os dados apresentados. Essa funcionalidade é especialmente útil em relatórios, análises de desempenho e estudos estatísticos, permitindo tomadas de decisão mais embasadas.

Figura 1: Exemplo de tabela gerada por HTML

Sem título Text

Fonte: Autor

Outra aplicação prática das tabelas é a exibição de listas de informações. Quando temos dados categorizados, como listas de produtos, características ou eventos, as tabelas oferecem uma maneira ordenada e concisa de apresentá-los. Os usuários podem facilmente encontrar o que procuram e comparar as informações de interesse. Além disso, as tabelas são ideais para criar calendários. Ao organizar datas em colunas e dias da semana em linhas, os calendários se tornam mais legíveis e facilitam o planejamento e acompanhamento de eventos, prazos e compromissos.

Entretanto, é importante evitar o uso excessivo de tabelas para fins de layout. Antigamente, as tabelas eram usadas para estruturar toda a aparência de um site, mas esse método tornou-se obsoleto com o avanço das tecnologias e o surgimento de outras soluções mais adequadas, como o uso de CSS para o design. Assim, recomenda-se utilizar tabelas exclusivamente para exibir dados tabulares.

Dica

Ao criar tabelas, é fundamental que elas sejam legíveis e intuitivas. Para isso, é indicado utilizar títulos claros e, se necessário, destacar informações importantes através do uso de cores ou estilos, mas sem exageros que possam comprometer a compreensão dos dados apresentados.

Sem título Text

Estrutura da tabela em HTML

As tabelas são elementos fundamentais no desenvolvimento web, permitindo organizar e apresentar dados de forma estruturada e organizada. Para criar uma tabela HTML, é importante entender a sua estrutura básica e os elementos que a compõem. A tabela é iniciada com a tag <table>. Essa tag é essencial, pois indica o início da tabela e tudo o que estiver dentro dela fará parte da estrutura tabular. Uma tabela pode ser dividida em três partes principais: cabeçalho (<thead>), corpo (<tbody>) e rodapé (<tfoot>). Essa divisão é opcional, mas altamente recomendada, pois torna a tabela mais semântica e fácil de ser interpretada por leitores de tela e mecanismos de busca. Dentro de cada tabela, definimos as linhas através da tag <tr> (table row). Cada linha representa um conjunto de células dispostas horizontalmente.

As células são criadas dentro de cada linha usando as tags <td> (table data) e <th> (table header). O <td> é usado para criar células regulares, que contêm os dados da tabela. Por outro lado, o <th> é utilizado para criar cabeçalhos de coluna, ou seja, títulos para as informações exibidas nas células abaixo deles. Essa diferenciação entre <td> e <th> também é útil para estilizar a tabela de forma adequada, como aplicar estilos diferentes aos cabeçalhos. Para ilustrar a estrutura de uma tabela HTML, considere o seguinte exemplo:

Figura 2: Exemplo de criação de tabela HTML

Sem título Image Hotspots

<table>

Sem título Text

Esta tag é usada para iniciar uma tabela. Todo o conteúdo da tabela, incluindo linhas e células, deve ficar dentro desta tag.

<tr>

Sem título Text

Esta tag é usada para criar uma nova linha na tabela. Cada linha contém as células (dados ou cabeçalhos).

<th>

Sem título Text

Esta tag define uma célula de cabeçalho. Geralmente, o texto dentro desta tag é exibido em negrito e centralizado por padrão, servindo para nomear as colunas.

<td>

Sem título Text

Esta tag define uma célula de dados. É usada para preencher a tabela com o conteúdo real, ou seja, as informações que você quer exibir.

Sem título Text

Fonte: Autor

Uma característica importante das tabelas é a possibilidade de se mesclar células, o que pode ser feito utilizando os atributos colspan e rowspan. O atributo colspan permite mesclar horizontalmente células que se estendem por mais de uma coluna. Enquanto isso, o atributo rowspan possibilita a mesclagem vertical de células, abrangendo mais de uma linha. Essa funcionalidade é especialmente útil quando queremos destacar informações importantes ou simplificar a apresentação dos dados.

Lembre-se

Utilizar as tags <thead>, <tbody>, e <tfoot> para estruturar uma tabela de maneira semântica não apenas melhora a acessibilidade, mas também facilita a estilização e a manipulação do conteúdo por meio de CSS ou scripts.

Sem título Text

Tabelas e CSS

As tabelas HTML são muito eficientes para organizar e exibir dados tabulares, mas quando combinadas com CSS, seu potencial é ampliado, permitindo uma personalização completa da aparência e do layout. O CSS oferece diversas possibilidades de estilização para melhorar a apresentação das tabelas e torná-las mais atraentes e legíveis. Uma das funcionalidades mais comuns é a capacidade de mudar a cor de background das células ou colunas com a regra ‘background-color”. Com o CSS, é possível definir cores que se adequem à identidade visual do site ou que destaquem informações importantes, tornando mais fácil guiar o olhar do usuário e criar uma experiência visual agradável. Outro aspecto é a possibilidade de mudar o espaçamento das células, utilizando os atributos de tags de blocos como padding, margin, etc. Com o CSS, também é possível ajustar o espaçamento entre as células para melhorar a legibilidade da tabela e criar uma aparência mais equilibrada.

Definir as bordas das células, colunas ou da tabela é outra funcionalidade do CSS que permite uma personalização detalhada. Podemos escolher o estilo (sólido, tracejado, pontilhado, etc.), a espessura e a cor das bordas, o que possibilita criar tabelas com visual moderno ou mais tradicional, dependendo do contexto. A seguir veremos na Figura 3 os estilos de bordas em CSS.

Figura 3: Estilos possíveis de bordas no CSS

[Image: Estilos de bordas em CSS]

Sem título Text

Fonte: Autor

O CSS também oferece a oportunidade de definir estilos específicos para cabeçalhos e rodapés da tabela. Podemos realçar essas seções com cores diferentes, fontes maiores ou em negrito, proporcionando uma identificação visual clara e facilitando a compreensão da estrutura da tabela. Outra vantagem do uso do CSS em tabelas é a capacidade de destacar células com estilos personalizados. Por exemplo, podemos aplicar cores distintas a células que contenham valores acima de um determinado limiar ou que possuam dados relevantes para o usuário. Isso auxilia na focalização dos dados mais relevantes e enfatiza informações cruciais.

Além disso, o CSS pode ser usado para determinar conteúdo com rolagem horizontal (overflow). Quando uma tabela contém muitas colunas e o espaço horizontal é limitado, o CSS permite adicionar uma barra de rolagem para visualizar todo o conteúdo sem distorcer a aparência do layout.

Palavra Cruzada

Atividade 1 Capítulo 3

Q: Borda estilo 3D com uma moldura de quadro.
A: ridge
Q: Atributo que mescla colunas de uma tabela
A: colspan
Q: Tipo de borda pontilhada ou tracejada
A: dashed
Q: Onde você coloca os dados principais de uma tabela
A: tbody
Q: Elemento que inicia uma nova linha da tabela
A: TR
Q: Tag para células de cabeçalho em uma tabela
A: th
Q: Local ode são colocados os totais de uma tabela
A: tfoot
Q: Atributo que mescla linhas em uma tabela
A: rolspan
Q: Tag que representa uma célula em uma tabela
A: td
Q: Conteúdo que vai do cabeçalho de uma tabela
A: thead
Q: Tag usada para criar uma tabela HTML
A: table

Sem título Text

Formulários em HTML

Os formulários em HTML são elementos essenciais nas páginas da web, pois desempenham um papel fundamental na coleta de informações dos usuários. Eles possibilitam a criação de campos de entrada, botões de envio e outros elementos interativos que tornam a experiência do usuário mais dinâmica e participativa. Compostos por diversas tags, os formulários permitem a criação de campos de entrada de texto, como caixas de texto e áreas de texto, onde os visitantes do site podem inserir dados pessoais, comentários, sugestões e outras informações relevantes. Esses dados de entrada são valiosos para as empresas e desenvolvedores, pois permitem compreender melhor o perfil e as necessidades dos usuários, além de possibilitar a personalização do conteúdo e aprimorar a experiência do usuário.

Além dos campos de entrada de texto, os formulários também podem conter opções de escolha, como botões de rádio e caixas de seleção, que permitem aos usuários fazerem escolhas entre diversas opções pré-definidas. Essa funcionalidade é especialmente útil para pesquisas de opinião, enquetes e cadastros que requerem respostas específicas. A seguir podemos ver na Figura 4 de um código HTML que gera uma imagem:

Figura 4:  Código de um formulário renderizado por um browser

Sem título Image Hotspots

<fieldset>

Sem título Text

Este elemento agrupa vários controles de formulário (como campos de texto e botões) relacionados entre si. Ele é útil para organizar o conteúdo e melhorar a acessibilidade, pois permite que leitores de tela entendam que os campos pertencem a um mesmo conjunto.

<legend>

Sem título Text

Define um título ou uma legenda para o grupo de elementos dentro do <fieldset>. Neste caso, o título é "Formulário". Ele ajuda a dar contexto e a identificar a finalidade do grupo.

<label>

Sem título Text

Usado para descrever o que é cada campo do formulário. O atributo for conecta o rótulo ao id do campo correspondente, o que melhora a usabilidade. Clicar no rótulo, por exemplo, foca o cursor no campo de entrada associado.

<input type="text">

Sem título Text

Cria um campo de entrada de texto de linha única. O atributo required indica que o preenchimento desse campo é obrigatório antes de o formulário ser enviado.

<input type="email">

Sem título Text

Cria um campo de entrada especializado para endereços de e-mail. Ele automaticamente valida se o texto digitado tem o formato de e-mail correto e também é um campo obrigatório devido ao atributo required.

<textarea>

Sem título Text

Usado para criar um campo de texto de múltiplas linhas. Ideal para mensagens mais longas, como a "Mensagem" do formulário. O atributo rows="8" define a altura inicial do campo. Assim como os outros, ele é obrigatório.

<button type="submit">

Sem título Text

Define um botão que, quando clicado, envia os dados do formulário para o servidor. O texto "Enviar" é o que aparece no botão.

Sem título Text

Fonte: Autor.

Outro recurso importante são os botões de envio, que possibilitam aos usuários enviar os dados preenchidos no formulário para processamento ou armazenamento. Esses botões desempenham um papel crucial no funcionamento de sistemas de login, envio de mensagens, inscrições em newsletters e outras interações essenciais. Além disso, os formulários podem conter elementos interativos como campos de data, seletores de arquivos e até mesmo sliders que permitem aos usuários interagirem de forma mais efetiva e intuitiva com a página.

Tags de Formulários

Os formulários em HTML são fundamentais para interagir com os usuários e coletar informações relevantes. Eles são compostos por diversas tags que permitem a criação de campos de entrada, botões de envio e outros elementos interativos que tornam a experiência do usuário mais dinâmica e eficiente. O formulário inicia com a tag <form>. Essa tag é crucial, pois delimita todo o conteúdo que fará parte do formulário. Dentro dessa tag, encontramos o atributo action, que determina o local onde o script de processamento do formulário será executado, e o atributo method, que define o método de envio dos dados, podendo ser GET ou POST, dependendo das necessidades do projeto.

Existem diversas tags que podem ser utilizadas dentro da tag <form> para criar elementos de interação com o usuário:

- <input> é uma das mais versáteis e permite criar diversos campos de entrada. Através do atributo type, podemos criar campos de texto, senhas, checkboxes, botões de rádio, entre outros. Cada tipo de input oferece uma forma específica de coletar dados do usuário.
- <button> é utilizada para criar botões no formulário. Eles podem ser botões de envio do formulário, que disparam a ação de enviar os dados, ou botões com ações personalizadas que podem ser programadas usando JavaScript.
- <label> é utilizada para criar rótulos descritivos associados aos campos de entrada. Esses rótulos facilitam a identificação dos campos e melhoram a acessibilidade do formulário, pois ao clicar no rótulo, o campo correspondente é ativado.
- <select> e <option> são utilizadas para criar listas de seleção, também conhecidas como dropdowns. Com essas tags, é possível oferecer ao usuário uma lista de opções para escolha, onde ele pode selecionar uma única opção dentre as disponíveis.
- <textarea> é utilizada para criar um campo de texto multi-linhas, permitindo que o usuário insira informações mais extensas, como comentários ou mensagens.

Essas tags são apenas alguns exemplos das possibilidades de criação de formulários em HTML. Combinadas com CSS e JavaScript, elas oferecem uma experiência interativa e personalizada para os usuários, tornando a interação com a página mais intuitiva e eficiente. A utilização adequada dessas tags e atributos é essencial para criar formulários funcionais e amigáveis, garantindo a coleta precisa e segura de dados importantes para o desenvolvimento web.

Atividade 2 Capítulo 3

Arraste as palavras para os campos corretos

Q: < [...] type=" [...] "> <!-- campo de texto simples -->
< [...] type=" [...] " value="valor"><!-- caixa de seleção -->
< [...] action=”URL_destino” method=” [...] ”><!-- criação do formulário -->
< [...] type=” [...] ”> Enviar </ [...] > <!-- botão de envio -->
A: input; text; input; checkbox; form; post; button; submit; button

Sem título Text

Tags de bloco e CSS

As tags HTML desempenham um papel fundamental na construção e estruturação de páginas da web, permitindo a criação de elementos e a formatação do conteúdo exibido aos usuários. Essas tags podem ser classificadas em duas categorias principais: tags de linha e tags de bloco, cada uma com suas características específicas.

As tags de linha são elementos que ocupam apenas o espaço necessário para exibir seu conteúdo, sem forçar uma quebra de linha. Elas são ideais para elementos que precisam ser exibidos em uma mesma linha, lado a lado. Exemplos de tags de linha incluem <span>, <a>, <img> e <input>. Essas tags são úteis quando se deseja adicionar pequenos elementos interativos ou estilísticos, sem afetar o layout geral da página. Por outro lado, as tags de bloco por padrão ocupam todo o espaço horizontal disponível em seu contêiner e iniciam em uma nova linha. Elas são mais adequadas para elementos maiores, como parágrafos, títulos, listas e divisões de seções. Ao utilizar tags de bloco, os elementos são formatados em blocos separados, o que ajuda a organizar o conteúdo e criar uma hierarquia visual na página. Exemplos de tags de bloco incluem:

Sem título Image Hotspots

<div>

Sem título Text

Usada para agrupar e organizar elementos em blocos. É um contêiner genérico, sem significado semântico, muito usado para aplicar estilos (CSS) a um conjunto de elementos.

<p>

Sem título Text

Representa um parágrafo. É a tag padrão para textos longos, garantindo que o conteúdo seja exibido em um bloco separado, com quebras de linha e espaços.

<h1> a <h6>

Sem título Text

Tags de títulos de seção. <h1> é o mais importante (geralmente o título principal da página), e <h6> é o menos importante. Elas dão uma hierarquia para o conteúdo, o que é crucial para a estrutura do documento e para o SEO.

<ul>

Sem título Text

Cria uma lista não ordenada. Os itens dessa lista são marcados com marcadores (geralmente pontos). É ideal para listas onde a ordem dos itens não é importante, como em uma lista de compras.

<ol>

Sem título Text

Cria uma lista ordenada. Os itens dessa lista são numerados ou marcados em uma sequência específica. É perfeita para instruções passo a passo, rankings ou qualquer tipo de lista em que a ordem é fundamental.

<li>

Sem título Text

Define um item dentro de uma lista (<ul> ou <ol>). Cada item em uma lista deve estar dentro de uma tag <li>.

<table>

Sem título Text

Usada para criar tabelas, organizando dados em linhas e colunas. É a principal tag que contém todos os elementos de uma tabela.

<th>

Sem título Text

Define a célula de cabeçalho de uma tabela. O texto dentro desta tag é exibido em negrito por padrão e é usado para identificar as colunas ou linhas da tabela.

<td>

Sem título Text

Define a célula de dados de uma tabela. É onde o conteúdo da tabela realmente fica, como nome, idade, etc.

<section>

Sem título Text

Agrupa conteúdo relacionado em uma seção temática. É uma tag semântica, o que significa que ajuda a dar sentido e estrutura ao documento, dividindo o conteúdo em partes lógicas, como capítulos ou tópicos.

<form>

Sem título Text

Usada para criar um formulário HTML, que coleta dados do usuário. Ela é o contêiner principal para todos os campos de entrada, botões e outros elementos do formulário.

<nav>

Sem título Text

Define uma área com links de navegação. É uma tag semântica que indica que o conteúdo é um menu de navegação, como uma barra de navegação principal ou um índice.

Sem título Text

A escolha adequada entre tags de linha e tags de bloco é essencial para garantir o layout desejado e a semântica correta da página. Tags de linha são ideais para elementos que não afetam o fluxo do texto ou não precisam ser tratados como uma entidade separada, enquanto tags de bloco são recomendadas para segmentar e organizar o conteúdo em seções distintas.

Sem título Emphasis Card

Ao aplicar estilos ou manipular o layout da página, considere se um elemento deve ser de bloco ou de linha para atender aos requisitos de design e de funcionalidade desejados.

Sem título Text

Content, Padding, Border e Margin

As tags de bloco no HTML são normalmente utilizadas para a estruturação e organização de conteúdo em uma página web. Essas tags não apenas definem o conteúdo, mas também possuem uma estrutura espacial que é moldada e estilizada de acordo com as regras especificadas em CSS. Ao compreender as características fundamentais dessas tags, é possível criar layouts que visam atender os parâmetros projetados pelo designer web, ou seja, ele utiliza as tags de bloco para montar o website de acordo com o projeto, que são organizadas de acordo com seus espaçamentos e conteúdos. Sendo assim, a Figura 4 mostra como as tags de bloco no HTML são compostas por quatro principais áreas que contribuem para a formação da estrutura da página:

Figura 4: Estrutura espacial das tags de bloco no HTML

Sem título Text

Fonte: Autor.

Content (Conteúdo): Esse é o componente central da tag de bloco. Ele representa o conteúdo que está contido na tag, como texto, imagens, outros elementos ou até mesmo outras tags aninhadas. O conteúdo é a parte visível do elemento e é o que será apresentado na página.

Padding (Preenchimento): O preenchimento refere-se ao espaço entre o conteúdo da tag e sua borda. É como um "engordamento" do bloco, adicionando espaços em branco ao redor do conteúdo. O preenchimento é usado para criar espaçamento interno e destacar o conteúdo da tag de bloco em relação à sua borda.

Border (Borda): A borda é uma linha que margeia o bloco, formando um contorno em torno do conteúdo. Ela delimita visualmente o espaço ocupado pela tag de bloco e pode ser personalizada através do CSS para alterar seu estilo, espessura e cor.

Margin (Margem): A margem representa o espaço entre o bloco e outro bloco adjacente ou outros elementos na página. Ela cria uma separação visual entre os elementos, evitando que eles fiquem muito próximos uns dos outros. A margem é especialmente útil para criar espaçamento externo entre diferentes seções da página.

O CSS permite a manipulação desses componentes, possibilitando o ajuste do layout e da aparência dos elementos de bloco. Ao personalizar o preenchimento, a borda e a margem, os desenvolvedores podem criar designs visualmente atraentes, alinhando-se à identidade visual do site e proporcionando uma experiência mais agradável aos usuários.

Regras de estado em CSS

As regras de estado em CSS desempenham um papel fundamental na criação de interações visuais atraentes e intuitivas nas páginas da web. Com base no estado atual de um elemento, é possível aplicar estilos diferentes, permitindo que os desenvolvedores personalizem a aparência dos elementos conforme as ações do usuário. Alguns dos principais seletores de estado em CSS são:

:hover: Este seletor é usado para aplicar estilos quando o cursor do mouse está sobre o elemento. É especialmente útil para criar efeitos de destaque em botões, links e imagens, proporcionando feedback visual ao usuário à medida que ele interage com a página.

:active: O seletor :active é aplicado quando o elemento está ativo, ou seja, quando o usuário pressiona o botão do mouse sobre o elemento. É frequentemente utilizado em botões e links para simular uma resposta tátil, fornecendo uma sensação de clique imediato.

:focus: É aplicado quando o elemento está em foco, geralmente após o usuário interagir com o elemento usando a tecla TAB do teclado ou através de outros métodos de navegação. É comum aplicar esse estilo a campos de formulário, para destacar o campo que está recebendo entrada do usuário.

:visited: Esse seletor permite aplicar estilos a links que já foram visitados pelo usuário. Isso é útil para diferenciar links visitados de links não visitados, ajudando os usuários a navegarem pelo conteúdo de forma mais eficiente.

:first-child e :last-child: Esses dois seletores aplicam estilos ao primeiro e último elemento filho de um elemento pai, respectivamente. Eles permitem estilizar elementos específicos em um conjunto de elementos sem precisar adicionar classes ou identificadores extras.

A utilização desses seletores de estado em CSS agrega valor ao design e à interatividade das páginas da web. Ao criar interações visuais, os desenvolvedores podem fornecer feedback imediato ao usuário, tornando a experiência de navegação mais envolvente e agradável. Através dessas regras de estado, é possível adicionar personalidade e dinamismo ao design do site, garantindo uma apresentação única e profissional.

Rich Media: Áudio e Vídeo

Rich Media, como o próprio nome sugere, é a incorporação de conteúdo multimídia em uma página web. Com o uso de diversas tecnologias e elementos HTML, é possível adicionar vídeos, áudios, animações, gráficos, entre outros, para enriquecer o conteúdo e tornar a página mais atraente. Uma das formas mais comuns de utilizar Rich Media é através de vídeos. Com as tags <video> e <source>, os desenvolvedores podem incorporar vídeos em suas páginas web. Isso permite a exibição de conteúdos audiovisuais de forma nativa no navegador, oferecendo aos usuários uma experiência visual fluida e acessível.

Além dos vídeos, o áudio também pode ser facilmente adicionado às páginas web utilizando as tags <audio> e <source>, que possibilitam a incorporação de arquivos de áudio, como músicas ou podcasts, para sites que necessitem fornecer conteúdos desta natureza.
Outra tag de Rich Media é a <canvas>. Com ele, é possível criar animações, gráficos e até mesmo jogos diretamente na página, utilizando JavaScript para controlar as interações e o desenho do conteúdo no canvas. Para se adicionar conteúdo externo à página utilizamos os frames. Através da tag <iframe>, é possível incorporar conteúdos externos em um bloco separado na página, como mapas interativos, vídeos de plataformas externas ou até mesmo outras páginas web.

Porém, o conteúdo multimídia de uma página deve ser relevante e não deve jamais comprometer a velocidade de carregamento da página ou sua usabilidade. Iniciar uma página com músicas ou vídeos sem sentido algum pode prejudicar a usabilidade e a experiência do usuário. Além disso, é fundamental garantir que o conteúdo seja compatível com diferentes navegadores e dispositivos, para que todos os usuários possam aproveitar a experiência oferecida.

Sem título Emphasis Card

A utilização do Rich Media é uma maneira eficaz de tornar as páginas web mais interativas, atrativas e dinâmicas. No entanto, é importante usá-lo com moderação, considerando, além da experiência do usuário, a acessibilidade.

Ativadade 3 Capítulo 3

Q: Qual tag HTML é usada para incorporar vídeos em uma página HTML5?
- <video> (correct)
- <media>
- <movie>
- <multimedia>

Q: O que é <canvas> em HTML5?
- Um elemento para criar gráficos dinâmicos em tempo real. (correct)
- Uma tag para incorporar imagens em uma página web.
- Uma tag específica para áudio em HTML.
- Uma tag para inserir vídeos na página.

Sem título Text

Conclusão

As tabelas são elementos cruciais no HTML, fornecendo uma estrutura organizada para a apresentação eficiente de dados comparativos. Sua combinação com o CSS amplia as possibilidades de estilização, melhorando a legibilidade e oferecendo uma experiência visual agradável aos usuários. Os formulários desempenham um papel fundamental na interação com os usuários, permitindo a coleta de informações por meio de campos de entrada e opções de escolha. Tanto as tags de linha quanto as de bloco servem para construção e formatação de páginas web, oferecendo flexibilidade para elementos menores e estruturação eficiente para conteúdos mais extensos.

Por fim, a adição de Rich Media, como vídeos incorporados com as tags <video> e <source>, eleva a experiência do usuário, proporcionando conteúdo multimídia de maneira acessível e atraente. As regras de estado em CSS também desempenham um papel vital na criação de interações visuais intuitivas, tornando as páginas mais interativas e envolventes. Em resumo, a combinação eficaz de elementos HTML e CSS, aliada ao uso estratégico de formulários e Rich Media, contribui para o desenvolvimento de páginas web dinâmicas e visualmente atraentes.

Glossário

<table>: Tag HTML que inicia a estrutura de uma tabela.

<thead>: Tag HTML que define a seção de cabeçalho de uma tabela.

<tbody>: Tag HTML que delimita o corpo principal de uma tabela.

<tfoot>: Tag HTML que representa a seção de rodapé de uma tabela.

<tr>: Tag HTML que define uma linha em uma tabela.

CSS Float: Técnica de posicionamento de elementos que permite que eles flutuem à esquerda ou à direita em relação ao contêiner pai.

Tags de Linha: Elementos HTML, como <span>, <a>, <img>, e <input>, que ocupam apenas o espaço necessário e não forçam uma quebra de linha.

Tags de Bloco: Elementos HTML, como parágrafos, títulos, listas, e divisões de seções, que ocupam todo o espaço horizontal disponível e iniciam em uma nova linha.

Rich Media: Incorporação de conteúdo multimídia, como vídeos, áudios, animações, e gráficos, em uma página web.

<video>: Tag HTML para incorporar vídeos em uma página web.

<source>: Tag HTML usada em conjunto com <video> para especificar a origem do vídeo.

Regras de Estado em CSS: Mecanismo que permite a aplicação de estilos diferentes com base no estado atual de um elemento.

<form>: Tag HTML que delimita um formulário em uma página web.

Action (atributo): Atributo em <form> que determina o local onde o script de processamento do formulário será executado.

Method (atributo): Atributo em <form> que define o método de envio dos dados, podendo ser GET ou POST.

Padding: Atributo de CSS que define o espaçamento interno de um elemento.

Margin: Atributo de CSS que define o espaçamento externo de um elemento.

Capítulo 4 - Layout em HTML

Sem título CustomCSS

Sem título ObjetivoCapDEAD

Ao longo deste estudo, buscaremos primeiramente aprofundar-nos no universo do web layout, desvendando as técnicas que permitem a organização visual de páginas. Em seguida, iremos mergulhar no Flexbox, compreendendo sua capacidade de criar layouts flexíveis e alinhados em uma única dimensão. Avançando, exploraremos o Grid Layout, dominando a arte de estruturar o conteúdo em grades bidimensionais, um passo crucial para designs complexos. Por fim, para consolidar nossa base de conhecimento, aprenderemos a trabalhar com Design Responsivo, utilizando as Media Queries para que nossas páginas se adaptem a qualquer tamanho de tela, proporcionando uma experiência de usuário consistente e universal.

Sem título Text

Introdução

O layout de páginas HTML é uma arte dinâmica, onde a criatividade e a funcionalidade convergem. Ao compreender os elementos estruturais do HTML, dominar as propriedades do CSS (Cascading Style Sheets) e explorar as técnicas avançadas de layout, os desenvolvedores se tornam arquitetos digitais capazes de criar experiências visuais memoráveis. Em um contexto dinâmico, marcado pela evolução constante, a capacidade de criar layouts flexíveis e responsivos torna-se imprescindível para qualquer desenvolvedor web contemporâneo. Dessa forma, o HTML Grid e Flexbox, ao se firmarem como pilares modernos no design de layout, introduzem uma abordagem inovadora na organização e posicionamento de elementos em páginas web. As técnicas de layout como Flexbox e Grid, integradas ao CSS, capacitam os desenvolvedores a criar designs fluidos que se adaptam elegantemente a diferentes tamanhos de tela. Essas ferramentas não apenas simplificam a criação de layouts complexos, mas também garantem uma experiência consistente em dispositivos variados.

Sem título Text

Em um cenário digital onde a primeira impressão é determinante, o layout web emerge como um componente crítico no desenvolvimento de websites de sucesso. Além de uma estética atraente, o layout desempenha um papel vital na usabilidade, na navegação intuitiva e na eficiência global do site. O layout é a primeira interação visual que os visitantes têm com um site. Uma apresentação visualmente agradável cria uma impressão positiva, cativando a atenção do usuário desde o primeiro momento. Além disso, um layout bem projetado facilita uma experiência de usuário mais intuitiva, proporcionando uma navegação fluida e eficiente.

Com a diversidade de dispositivos utilizados para acessar a web, a responsividade do layout torna-se essencial. Um layout responsivo ajusta-se automaticamente a diferentes tamanhos de tela, proporcionando uma experiência consistente em desktops, tablets e smartphones. Isso não apenas melhora a satisfação do usuário, mas também é um fator significativo para otimização de mecanismos de busca (SEO). A eficiência do layout também afeta diretamente o desempenho do site. Tempos de carregamento rápidos e uma arquitetura de informações eficiente são fatores cruciais para retenção de usuários e conversões bem-sucedidas. Um layout bem otimizado contribui para uma experiência de usuário mais agradável e, consequentemente, para o sucesso do website.

Sem título Emphasis Card

A importância dos web layouts no desenvolvimento de um website de qualidade não pode ser subestimada. Ir além da estética e considerar a usabilidade, a responsividade e a comunicação efetiva de informações são passos essenciais para se criar uma presença online que não apenas atraia, mas também mantenha e envolva os usuários. Investir no design inteligente e funcional dos layouts é, sem dúvida, um investimento no sucesso duradouro de qualquer projeto web.

Sem título Text

Web Layout

Para desenvolver um website coeso e com uma boa consistência visual, é preciso pensarmos na ideia de layout. No contexto da criação de páginas da web, layout é a organização e disposição visual dos elementos em um site. Ou seja, é a forma como os diferentes elementos, como texto, imagens, gráficos, botões e outros componentes, são dispostos e estruturados para criar uma composição esteticamente agradável e funcional. O layout é a fase inicial do processo de criação, onde o designer determina como os elementos visuais serão distribuídos na página. Isso inclui a decisão sobre o tamanho e posicionamento dos elementos, a hierarquia visual, o espaçamento entre os elementos, o uso de cores e fontes, bem como a estrutura geral da composição. Basicamente, o layout e a forma como a página será organizada visualmente. Essa é uma etapa fundamental do processo de design, que influencia diretamente a aparência, usabilidade e eficácia da comunicação visual.

Em páginas da web, o layout é especialmente importante para garantir que o conteúdo seja apresentado de forma clara e organizada, e que a experiência do usuário seja agradável e intuitiva. O layout web também deve levar em consideração a responsividade, ou seja, a capacidade de se adaptar a diferentes tamanhos de tela, para que o site seja visualizado corretamente em dispositivos móveis e desktops. Para aplicar um bom layout a um site, é importante utilizar algum sistemas de layout, como CSS Flexbox ou Grid. A Figura 1 mostra a diferença visual entre esses dois estilos de layout. Estas regras podem ajudar a manter o alinhamento dos elementos em todas as páginas do site, principalmente por se tratar de tecnologias que fazem parte dos padrões de design web. Manter a consistência e o alinhamento dos elementos em todas as páginas é um princípio fundamental dos padrões de design web. Isso garante uma experiência coesa para o usuário, independentemente da página que ele esteja visitando ou navegador que esteja utilizando.

Figura 1: Diferença entre Flexbox e Grid layout.

[Image: exemplo de Flexbox e CSS Grids]

Sem título Text

Fonte: autor.

Os padrões de design web referem-se a princípios, diretrizes e práticas recomendadas que os designers web seguem para criar interfaces eficientes, atraentes e intuitivas. Esses padrões evoluíram ao longo do tempo com base na experiência do usuário, nas tendências de design e nas mudanças tecnológicas. Alguns dos padrões de design para web são:

Cauda longa: Em geral, pequenos sites compreendem a maior parte do conteúdo da internet e pequenos nichos constituem a massa de aplicações possíveis. Portanto, incentive o autosserviço do cliente e o gerenciamento algorítmico de dados para alcançar toda a web, até as bordas e não apenas o centro, até a cauda longa e não apenas a cabeça, ou seja, conecte suas páginas com links para que esta não possua apenas seu conteúdo local, mas sim uma vasta gama de conteúdo extenso.

Dados conferem padrão de qualidade: Os aplicativos são cada vez mais baseados em dados. Portanto, para ter vantagem competitiva, procure possuir uma única fonte de dados difícil de ser recriada.

Usuários agregam valor ao site: A chave para a vantagem competitiva em aplicativos de internet é até onde os usuários acrescentam seus próprios dados àqueles que você fornece. Portanto, facilite a interação com os usuários e não restrinja sua “arquitetura de participação” no projeto e desenvolvimento do site. Envolva seus usuários, tanto implícita como explicitamente, na adição de valor ao seu website.

Efeitos de rede como padrão: Apenas uma pequena porcentagem de usuários dar-se-ão ao trabalho de adicionar valor ao seu aplicativo. Portanto, crie padrões para agregar dados de usuário como efeito colateral do uso do aplicativo.

Alguns direitos reservados: A proteção à propriedade intelectual limita a reutilização e impede a experimentação. Portanto, quando há benefícios decorrentes da apropriação coletiva e não de restrições particulares, certifique-se de que as barreiras são baixas.

O beta perpétuo: Quando dispositivos e programas estão conectados à internet, os aplicativos não são mais artefatos de software, são serviços em andamento.  Portanto, não “empacote” novos recursos em lançamentos gigantescos, mas, ao invés disso, adicione-os regularmente como parte da experiência diária do usuário. Engaje os seus usuários como avaliadores em tempo real e equipe o serviço para que você saiba como as pessoas estão usando os novos recursos.

Sites para vários dispositivos: O PC não é mais o dispositivo de maior quantidade de acesso aos aplicativos de internet, por isso os aplicativos limitados a um único dispositivo têm menos valor do que os que são disponibilizados para vários deles. Portanto, projete seus sites desde o início para integrar serviços entre dispositivos portáteis, PCs e servidores de internet.

Sem título Text

Tags estruturais do HTML

O HTML5 introduziu uma série de tags estruturais de bloco que simplificaram e aprimoraram a semântica do código, proporcionando uma organização mais clara e significativa deste. Muitas dessas tags são importantes para facilitar o uso de leitores de tela, pois são para conteúdos específicos. Vamos explorar algumas das principais tags estruturais introduzidas no HTML5:

<header>: A tag <header> representa a introdução ou um bloco de cabeçalho de uma seção ou página. Normalmente contém elementos como títulos, logotipos e elementos de navegação.

<footer>: A tag <footer> representa o rodapé de uma seção ou página. Geralmente, é utilizada para incluir informações de copyright, links para políticas de privacidade, informações de contato ou qualquer conteúdo que deva aparecer no final da página.

<nav>: A tag <nav> é utilizada para representar uma seção de navegação. Geralmente, engloba menus, links de navegação e outros elementos relacionados à orientação do usuário dentro do site.

<main>: A tag <main> é usada para envolver o conteúdo principal da página, excluindo cabeçalhos, rodapés, barras laterais e outros conteúdos secundários. Essa tag auxilia na acessibilidade e na identificação clara do conteúdo central da página.

<section>: A tag <section> é empregada para definir seções temáticas dentro de um documento HTML. Pode ser utilizada para agrupar conteúdo relacionado e geralmente é acompanhada de um cabeçalho.

<article>: A tag <article> é utilizada para representar um conteúdo independente, que pode existir e ser distribuído separadamente do restante do documento. Artigos podem incluir notícias, postagens de blog, comentários ou qualquer tipo de conteúdo autônomo.

<aside>: A tag <aside> é usada para representar conteúdo tangencial ao conteúdo principal da página. Geralmente, é utilizada para barras laterais, informações adicionais ou elementos relacionados que não são parte essencial do conteúdo principal.

Essas tags estruturais do HTML5 oferecem uma semântica mais rica ao código, facilitando a compreensão do propósito de cada parte da página tanto para desenvolvedores quanto para máquinas, como motores de busca. Ao utilizar essas tags de maneira adequada, a marcação HTML torna-se mais clara, favorecendo a manutenção, a acessibilidade e a indexação nos mecanismos de busca.

Sem título Text

Posicionamento de blocos HTML com float

O HTML por padrão posiciona as tags de bloco como linhas empilhadas, assim como linhas de uma tabela. Porém, utilizando os atributos CSS como width e height, podemos definir a largura e altura, respectivamente, dos elementos de bloco. Para realizar a lateralização dos elementos de bloco, utilizamos o atributo float em CSS, que é frequentemente utilizado para controlar o posicionamento de elementos de bloco em uma página. Originalmente, o float era empregado para criar layouts com várias colunas, permitindo que elementos flutuassem à esquerda ou à direita dentro de um contêiner. No entanto, com o advento do design responsivo e a introdução de Flexbox e Grid em CSS, o uso excessivo de float para layouts foi em grande parte substituído. Isso porque o float possui algumas limitações, como a necessidade de limpeza (clearing) para evitar que elementos subsequentes se sobreponham aos flutuantes. Portanto, ao criar layouts mais complexos, outras técnicas, como Flexbox e Grid, geralmente são preferíveis devido à sua flexibilidade e prevenção automática de sobreposição.

Sem título Emphasis Card

É importante estabelecer um projeto de layout antes de iniciar a configuração do posicionamento das tags de bloco para que todo o desenvolvimento da página seja direcionado pelo projeto.

Sem título Text

Uso de flex box

O Flexbox, também conhecido como Flexbox Layout ou Flexible Box, é uma tecnologia de layout do CSS que foi introduzida pela primeira vez no CSS3. Ele foi projetado para facilitar a criação de layouts responsivos e flexíveis em páginas da web, permitindo que os elementos dentro de um contêiner se ajustem automaticamente ao espaço disponível na tela e sejam posicionados de maneira mais intuitiva e controlada. A principal ideia por trás do Flexbox é fornecer uma maneira eficiente de organizar elementos em um único eixo ou em ambos os eixos (horizontal e vertical). Isso torna mais fácil centralizar elementos, alinhar itens em diferentes direções, definir a ordem de apresentação dos elementos e ajustar automaticamente o tamanho dos itens para que eles se encaixem no espaço disponível.

O Flexbox trabalha com um modelo de contêiner e itens. O contêiner (elemento pai) é definido com a propriedade display: flex, o que permite que seus itens internos (elementos filhos) se comportem como flexíveis. Os itens podem ser organizados no contêiner usando propriedades como justify-content para controlar o alinhamento horizontal e align-items para controlar o alinhamento vertical. Para ativar o Flexbox em um site, devemos primeiramente inserir a regra CSS display: flex em um elemento pai que contenha outros elementos dentro dele. Dessa forma os elementos vão ser organizados de forma flexível dentro do espaço do elemento pai. Para organizar os elementos podemos utilizar as seguintes regras:

Sem título Text

row: os quadrados serão inseridos da esquerda para direita;

row-reverse: Os quadrados serão inseridos da direita para esquerda;

column: os quadrados serão inseridos de cima para baixo;

column-reverse: os quadrados serão inseridos de baixo pra cima;

Sem título Text

flex: Define a capacidade de crescimento, encolhimento e tamanho inicial de um item flexível utilizando Flexbox. Normalmente é atribuído ao elemento pai dos itens flexíveis;

flex-direction: Define a direção dos itens dentro do contêiner (row, row-reverse, column, column-reverse);

justify-content: Alinha os itens horizontalmente dentro do contêiner (flex-start, flex-end, center, space-between, space-around);

align-items: Alinha os itens verticalmente dentro do contêiner (flex-start, flex-end, center, baseline, stretch);

align-self: Permite controlar o alinhamento vertical de um item individual da mesma forma que align-itens, dentro do contêiner;

flex-wrap: Controla se os itens devem ser dispostos em uma única linha ou em várias linhas (nowrap, wrap, wrap-reverse).

Sem título Emphasis Card

Além destes comandos, você pode ainda definir regras de espaçamento com o space-between (valor de espaçamento entre os elementos), space around (valor de espaçamento considerando todos os lados do elemento) e space-evenly (espalha uniformemente todos os elementos em um container flex).

Sem título Text

Embora seja ideal para organizar elementos em um único eixo, ele pode ser combinado com outras técnicas de layout, como o Grid, para criar designs mais complexos e completos. Compatível com a maioria dos navegadores modernos, o Flexbox é amplamente utilizado na criação de interfaces de usuário, páginas da web e aplicativos que se adaptam a diferentes dispositivos e tamanhos de tela.

Atividade 1 Capítulo 4

Q: Como você define um container como um contêiner flexível em CSS?
- display: flex; (correct)
- Flexbox: container;
- flexible-container: true;

Q: Qual propriedade do Flexbox é usada para definir a direção principal do layout?
- flex-direction (correct)
- main-axis
- layout-direction

Q: Para alinhar itens no eixo transversal, qual propriedade Flexbox é utilizada?
- align-items (correct)
- justify-content
- flex-align

Sem título Text

Design Responsivo

Há algum tempo atrás, os sites eram criados normalmente com layouts fixos, projetados para se ajustarem apenas a um tamanho específico de tela, e na maioria das vezes voltados para desktops. Isso significava que, ao acessar o site em dispositivos menores, como smartphones, a experiência do usuário ficava comprometida, com elementos desalinhados, fontes muito pequenas e rolagens laterais incômodas. Com o surgimento dos dispositivos móveis e a diversificação dos tamanhos de tela, ficou claro que era necessário criar uma solução que permitisse que os sites se adaptassem de forma dinâmica e elegante a esses diferentes dispositivos. É aí que entra o design responsivo, vamos analisar a imagem abaixo para entender como funciona.

Sem título Text

O Design Responsivo é uma abordagem de design e desenvolvimento que tem como objetivo criar sites que se adaptem automaticamente a diferentes tamanhos de tela e dispositivos, proporcionando uma experiência de usuário otimizada em qualquer plataforma, seja em desktops, tablets ou smartphones. Para isso, utiliza-se técnicas de CSS e HTML para ajustar o layout e a aparência do site com base na largura da tela do dispositivo em que está sendo visualizado. Isso é feito através de Media Queries, que são regras CSS que definem estilos diferentes com base nas características do dispositivo. Por exemplo, com o design responsivo, um site pode ser criado com uma grade flexível e fontes escaláveis, de modo que, quando a largura da tela for reduzida, os elementos do site se reorganizem e se redimensionem automaticamente para caber na nova tela. Além disso, imagens e conteúdos podem ser adaptados para oferecer uma experiência de usuário mais fluida e eficiente em dispositivos móveis.

Para se criar um website responsivo, podemos utilizar várias abordagens, como Flexbox e o CSS Grid, o uso de unidades relativas, como porcentagens (%) e EM (unidade que toma por tamanho a largura da letra M na tela) em vez de unidades absolutas (como pixels) e, por fim, a utilização de Media Queries (@media()), isso ajuda a tornar os elementos do site escaláveis e proporcionais ao tamanho da tela.

As Media Queries são uma das principais ferramentas utilizadas no Design Responsivo em CSS. Elas permitem aplicar estilos diferentes com base em características do dispositivo, como largura da tela, altura, orientação, resolução e outras propriedades. Por exemplo, podemos usar uma Media Query para ajustar o tamanho da fonte ou a disposição dos elementos quando a largura da tela for menor que um determinado valor, tornando o site mais adequado para dispositivos móveis.

O @media() é uma regra do CSS que permite aplicar estilos diferentes com base nas características do dispositivo ou na largura da tela do usuário. Essa regra é fundamental para se criar layouts responsivos que se ajustam automaticamente a diferentes tamanhos de tela, tornando o site mais amigável para dispositivos móveis e outras plataformas.

A sintaxe básica do @media é a seguinte:

Sem título Code Highlighter

/* Regras CSS que serão aplicadas quando a condição for verdadeira */

Sem título Text

A condição dentro do @media é uma expressão que avalia se determinadas características do dispositivo são atendidas. Essas características podem ser, por exemplo, a largura da tela, a orientação do dispositivo, a densidade de pixels, a resolução de tela, entre outras. Vamos ver um exemplo de uma Media Query:

Sem título Code Highlighter

Sem título Text

Neste exemplo, o tamanho da largura da div com a classe principal é definida como 1200 pixels. Porém, quando a largura da tela for igual ou menor que 768 pixels, o @media é acionado e os estilos dentro dele são aplicados, reduzindo o tamanho da largura da div para 740 pixels. As condições dentro do @media podem ser combinadas com operadores lógicos (and, or, not) para criar expressões mais complexas, permitindo estilizar o conteúdo de acordo com várias características do dispositivo.

Para configurar as Media Queries para serem ativadas de acordo com a orientação do dispositivo, você pode usar a propriedade orientation dentro da expressão da Media Query: @media (orientation: valor) {...}. A propriedade orientation pode ter dois valores: portrait (retrato) ou landscape (paisagem), dependendo da orientação atual do dispositivo.

Para configurar as Media Queries para serem ativadas de acordo com a densidade de pixels da tela, você pode usar a propriedade resolution dentro da expressão da Media Query: @media (min-resolution: 192dpi) {...}. A propriedade resolution permite definir estilos diferentes com base na densidade de pixels (DPI - Dots Per Inch) do dispositivo. A seguir veremos um exemplo de código com Media Querie:

Sem título Code Highlighter

Sem título Text

Neste exemplo, o layout é inicialmente de duas colunas, mas quando a largura da tela é reduzida para 768 pixels ou menos, o layout muda para uma coluna única. Isso é alcançado usando a Media Query @media screen and (max-width: 768px).

Sem título Emphasis Card

Ao desenvolver um site responsivo, é crucial incluir a tag <meta name="viewport" content="width=device-width, initial-scale=1.0"> dentro do <head>. Essa tag garante que o layout da página se ajuste adequadamente a diferentes tamanhos de tela, desde dispositivos móveis até desktops. O atributo “width=device-width” faz com que a largura da página corresponda à largura do dispositivo, e “initial-scale=1.0” define o nível de zoom inicial ao carregar a página. Com essa tag, você proporciona uma experiência de navegação otimizada e consistente para todos os visitantes do seu site.

Sem título Text

Conclusão

Ao longo deste capítulo, imergimo-nos no universo dinâmico e desafiador do desenvolvimento de layouts em HTML, onde a fusão entre criatividade e funcionalidade se revela como o epicentro da construção de experiências visuais verdadeiramente memoráveis. Ao desbravar os intricados elementos estruturais do HTML e dominar as propriedades multifacetadas do CSS, os desenvolvedores ascendem à posição de arquitetos digitais, capazes não apenas de moldar a estética, mas de forjar a funcionalidade intrínseca de cada página web. Em um cenário digital em constante mutação, a habilidade de conceber layouts flexíveis e responsivos emerge como um mandamento imperativo para os desenvolvedores contemporâneos.

O HTML Grid e o Flexbox, consolidados como fundamentos modernos no design de layout, apresentam-se como ferramentas inovadoras, simplificando a complexidade na criação de layouts e garantindo, de maneira elegante, uma experiência consistente em uma diversidade de dispositivos. Para além da estética, o web layout se destaca como um componente crítico na construção da usabilidade, na facilitação de uma navegação intuitiva e na otimização da eficiência global de um site. Nesse contexto, onde a primeira impressão online é determinante, o investimento em design inteligente e funcional dos layouts não é apenas uma opção, mas uma estratégia essencial para o sucesso a longo prazo de qualquer empreendimento digital.

A jornada de estudo de Flexbox, Grid Layout, Design Responsivo e Media Queries culmina na capacidade refinada de conceber páginas web que transcendem o simples apelo visual. Este capítulo consolida não apenas a compreensão, mas a aplicação prática dessas ferramentas como os pilares indispensáveis para os desenvolvedores que almejam se destacar e inovar na complexa paisagem do desenvolvimento web.

Sem título Text

Glossário

Flexbox: Tecnologia de layout do CSS3 projetada para organizar elementos em um único ou ambos os eixos (horizontal e vertical), facilitando a criação de layouts responsivos e flexíveis.

Grid Layout: Sistema de layout do CSS utilizado para criar layouts bidimensionais, permitindo uma organização mais complexa de elementos em linhas e colunas.

Responsividade: Característica fundamental para garantir que um site se adapte automaticamente a diferentes tamanhos de tela, proporcionando uma experiência consistente em dispositivos diversos.

Media Queries: Recurso do CSS que permite aplicar estilos diferentes com base em características do dispositivo, como largura da tela, orientação e resolução.

Web Layout: Organização visual dos elementos em uma página web, fundamental para garantir uma boa estética, usabilidade e eficiência global do site.

Design Responsivo: Abordagem de design e desenvolvimento que busca criar sites adaptáveis automaticamente a diferentes tamanhos de tela, proporcionando uma experiência de usuário otimizada em dispositivos variados.

Arquitetos Digitais: Metáfora para os desenvolvedores web que, ao compreenderem profundamente as ferramentas de layout e design, conseguem construir estruturas digitais sólidas e memoráveis.

Estética e Funcionalidade: Equilíbrio entre a aparência visual atraente de um site e sua capacidade funcional de proporcionar uma experiência de usuário eficiente.

Ficha catalográfica

Sem título CustomCSS

Sem título Ficha Catalográfica

PRESIDENTE DA REPÚBLICA
Luiz Inácio Lula da Silva
MINISTRO DA EDUCAÇÃO
Camilo Sobreira de Santana
SECRETÁRIO DE EDUCAÇÃO PROFISSIONAL E TECNOLÓGICA
Marcelo Bregagnoli

REITOR
José Arnóbio de Araújo Filho

PRÓ-REITORA DE PESQUISA E INOVAÇÃO
Francinaide de Lima Silva Nascimento

CAMPUS AVANÇADO NATAL - ZONA LESTE
DIRETOR-GERAL
José Roberto Oliveira dos Santos

DIRETOR DE EDUCAÇÃO A DISTÂNCIA E TECNOLOGIA EDUCACIONAL
Wagner de Oliveira

COMITÊ EDITORIAL DA DIRETORIA DE EDUCAÇÃO A DISTÂNCIA E TECNOLOGIAS
EDUCACIONAIS - CAMPUS AVANÇADO NATAL - ZONA LESTE/IFRN

PRESIDENTE
Wagner de Oliveira

SUPLENTES
João Moreno Vilas Boas de Souza Silva
Allen Gardel Dantas de Luna
Josenildo Rufino da Costa
Leonardo dos Santos Feitoza

MEMBROS
José Roberto Oliveira dos Santos
Albérico Teixeira Canário de Souza
Glacio Gley Menezes de Souza
Wagner Ramos Campos

PUBLICAÇÃO | EQUIPE

AUTORIA
Erick Bergamini da Silva Lima

CAPA
Iasmin Soares
do Nascimento

PROGRAMAÇÃO
Cibele Regina Barros Diniz
Gabriel Costa Gomes
Gersuer Henrique Sousa de Oliveira
Luiz Gustavo Oliveira Rocha
Matheus Mathias Rocha Lúcio de Moraes
Ramon de Sousa Vieira

REVISÃO
Maria Valeska Rocha
da Silva

PRODUÇÃO
Williany Bezerra de Souza

DIAGRAMAÇÃO
Amanda da Costa Marques

IMAGENS
Amanda da Costa Marques
Kyvia Victoria de Brito Torres
Yasmin Vitoria Moreira Freire
Iasmin Soares do Nascimento

PROGRAMA DE FOMENTO
Universidade Aberta do Brasil (UAB)

colocar texto definitivo aqui. Ezequiel, o nome do livro é "Padrões Web"

Sistema Integrado de Bibliotecas
Elaborada pelo Bibliotecário
Ezequiel da Costa Soares Neto – CRB-15/613

Referências

Sem título CustomCSS

Sem título Text

Referências

BARBOSA, Simone; SILVA, Bruno. Interação humano-computador. Rio de Janeiro: Elsevier Brasil, 2010.

BEAIRD, Jason. Princípios do Web Design Maravilhoso. Rio de Janeiro: Alta Books, 2008.

GALVÃO, Ricardo Kléber M. Introdução à Análise Forense em Redes de Computadores: Conceitos, Técnicas e Ferramentas para" Grampos Digitais". São Paulo: Novatec, 2018.

HTML: Linguagem de Marcação de Hipertexto. MDN Web Docs, 2023. Disponível em: https://developer.mozilla.org/. Acesso em: 08 de janeiro de 2024.

KRUG, Steve. Não me faça pensar: atualizado. Uma Abordagem de Bom Senso à, 2014.

KRUG, Steve. Não me faça pensar!: uma abordagem do bom senso à navegabilidade da WEB. Market Books, 2001.

KUROSE, James F.; ROSS, Keith W. Redes de Computadores e a Internet. São Paulo: Pearson, 2006.

LUBBERS, Peter et al. Pro HTML5 programming. New York: Apress, 2011.

NIELSEN, Jakob. Usabilidade na web. Rio de Janeiro: Elsevier Brasil, 2007.

TANENBAUM, Andrew S. Redes de Computadores. 3. ed. Rio de Janeiro: Campus, 2003.

W3C. Making the Web Work. 2023. Disponível em: http://www.w3c.br/. Acesso em: 25 de out. 2023.

Mostrar 'Tabela de conteúdos'

Ocultar 'Tabela de conteúdos'

Próxima página

Página anterior

Aula concluída!

Aula incompleta

Retornar ao topo

Eu concluí o estudo desta aula

Tela Cheia

Sair da Tela Cheia

Enviar Relatório

Todas as interações

Interações não respondidas

@left de @max interações concluídas

Sem interações

Resumo & enviar

Você não interagiu com nenhuma página.

Você tem que interagir com pelo menos uma página antes de poder ver o resumo.

Suas respostas serão submetidas para revisão!

Progresso do livro

progresso das interações