Apostila 2 — Curso HTML Básico

internos conectam páginas pertencentes ao mesmo site, facilitando a navegação entre diferentes conteúdos, como "Página Inicial", "Sobre", "Produtos" e "Contato". Já os links externos direcionam o usuário para páginas de outros domínios, como sites de parceiros, instituições ou materiais complementares. Essa organização cria uma experiência de navegação mais completa e permite que o visitante encontre rapidamente as informações desejadas.

Ao criar links, também é importante pensar na experiência do usuário. O texto utilizado deve indicar claramente para onde o visitante será direcionado, evitando expressões genéricas como "clique aqui". Textos descritivos facilitam a compreensão da navegação e contribuem para a acessibilidade, além de favorecer a indexação por mecanismos de busca. Da mesma forma, todos os links devem ser testados antes da publicação da página para evitar endereços incorretos ou inexistentes.

Listas e links costumam trabalhar em conjunto. Um dos exemplos mais comuns é o menu de navegação de um site, normalmente construído com uma lista de itens em que cada elemento contém um link para uma página diferente. Essa combinação cria menus organizados, fáceis de manter e compatíveis com as boas práticas do HTML moderno. Compreender esses elementos desde o início permite desenvolver páginas mais intuitivas, acessíveis e preparadas para crescer conforme novos conteúdos forem sendo adicionados.

Referências bibliográficas

DEVMEDIA. HTML5: fundamentos para desenvolvimento web.

MDN WEB DOCS. HTML: Linguagem de Marcação de Hipertexto.

MDN WEB DOCS. Elemento HTML <ul>.

MDN WEB DOCS. Elemento HTML <ol>.

MDN WEB DOCS. Referência HTML.

W3C BRASIL. Curso de HTML5 – Escritório Brasileiro do W3C.

Aula 2 – Inserindo imagens

As imagens desempenham um papel fundamental na construção de páginas web. Elas tornam o conteúdo mais atrativo, ajudam a transmitir informações de forma rápida e despertam o interesse do visitante. Em praticamente todos os sites modernos é possível encontrar fotografias, ilustrações, logotipos, ícones e gráficos que complementam os textos e tornam a navegação mais agradável. No entanto, inserir imagens em uma página HTML vai muito além de simplesmente exibi-las: é necessário utilizar boas práticas para garantir qualidade, acessibilidade e bom desempenho.

No HTML, a inserção de imagens é feita por meio do elemento <img>, que é considerado um elemento vazio, ou seja, não possui uma tag de fechamento. Para que funcione

corretamente, ele precisa do atributo src, responsável por indicar o caminho onde a imagem está armazenada. Esse caminho pode apontar para um arquivo salvo na mesma pasta do projeto, em outro diretório do computador ou até mesmo para uma imagem hospedada na internet. O navegador utiliza essa informação para localizar e exibir o arquivo durante o carregamento da página.

Um dos atributos mais importantes do elemento <img> é o alt, utilizado para fornecer um texto alternativo que descreve a imagem. Essa descrição é exibida quando a imagem não pode ser carregada e também é utilizada por leitores de tela, permitindo que pessoas com deficiência visual compreendam o conteúdo apresentado. Por esse motivo, o texto alternativo deve ser claro, objetivo e representar a informação transmitida pela imagem, evitando descrições genéricas como "imagem" ou "foto". O uso adequado desse atributo é considerado uma das principais boas práticas de acessibilidade na web.

Também é possível controlar as dimensões das imagens utilizando os atributos width e height. Definir largura e altura ajuda o navegador a reservar corretamente o espaço da imagem durante o carregamento da página, reduzindo mudanças inesperadas no layout. Entretanto, é importante lembrar que esses atributos não substituem a otimização do arquivo. Uma imagem muito grande continuará ocupando espaço desnecessário e poderá tornar o site mais lento, mesmo que seja exibida em tamanho reduzido. Por isso, recomenda-se utilizar arquivos com dimensões adequadas antes da publicação da página.

Outro aspecto importante é a escolha do formato da imagem. Arquivos JPEG costumam ser indicados para fotografias devido à boa relação entre qualidade e tamanho. Já o formato PNG é bastante utilizado quando há necessidade de transparência ou maior nitidez em logotipos e ilustrações. O formato SVG é recomendado para gráficos vetoriais e ícones, pois mantém alta qualidade mesmo quando ampliado. Selecionar o formato adequado contribui para melhorar o desempenho do site sem comprometer a qualidade visual.

Além da escolha do formato, é fundamental organizar corretamente os arquivos do projeto. Uma prática comum consiste em armazenar todas as imagens em uma pasta específica, como "imagens" ou "assets". Essa organização facilita a manutenção do site, reduz erros ao indicar os caminhos dos arquivos e torna o projeto mais compreensível para outros desenvolvedores que venham a trabalhar nele futuramente.

Outro recurso bastante utilizado é

bastante utilizado é o conjunto formado pelos elementos <figure> e <figcaption>. O elemento <figure> agrupa uma imagem relacionada ao conteúdo, enquanto <figcaption> permite adicionar uma legenda explicativa. Esse recurso é especialmente útil em páginas educacionais, artigos científicos, notícias e tutoriais, onde a imagem complementa a informação apresentada no texto principal. Além de melhorar a organização, essa estrutura contribui para a semântica do documento HTML.

Ao inserir imagens em uma página, é importante realizar alguns testes antes da publicação. Verificar se o caminho do arquivo está correto, confirmar se a imagem é exibida em diferentes navegadores e conferir se o texto alternativo descreve adequadamente seu conteúdo são etapas simples que evitam problemas futuros. Pequenos cuidados como esses melhoram a experiência do usuário, tornam o site mais acessível e contribuem para um desenvolvimento web de maior qualidade.

Referências bibliográficas

DEVMEDIA. HTML5: fundamentos para desenvolvimento web.

MDN WEB DOCS. Imagens no HTML.

MDN WEB DOCS. Elemento HTML <img>.

W3C BRASIL. Curso de HTML5 – Escritório Brasileiro do W3C.

SILVA, Maurício Samy. HTML5: A Linguagem de Marcação que Revolucionou a Web. Novatec.

Aula 3 – Tabelas

As tabelas são recursos importantes do HTML quando o objetivo é organizar informações em linhas e colunas. Elas são utilizadas para apresentar dados de maneira clara, facilitando comparações e consultas. É comum encontrá-las em boletins escolares, tabelas de preços, cronogramas, relatórios, horários de transporte, resultados esportivos e diversos outros contextos em que os dados precisam ser exibidos de forma estruturada. Quando utilizadas corretamente, as tabelas tornam a leitura mais simples e ajudam o usuário a localizar rapidamente as informações desejadas.

No HTML, uma tabela é criada utilizando o elemento <table>, que representa toda a estrutura de dados. Dentro dela, as informações são organizadas em linhas (<tr>) e células. As células de dados são definidas pela tag <td>, enquanto os cabeçalhos são criados com a tag <th>. Essa diferenciação é importante porque permite que navegadores e tecnologias assistivas identifiquem corretamente quais informações funcionam como títulos das colunas ou das linhas, melhorando a compreensão da tabela.

Imagine uma tabela que apresenta as notas de uma turma. Na primeira linha podem aparecer os cabeçalhos "Aluno", "Matemática", "Português" e "Ciências". Nas linhas

seguintes são inseridos os dados correspondentes a cada estudante. Essa organização permite que qualquer pessoa visualize rapidamente as informações e compare os resultados de forma intuitiva. Essa é justamente a principal finalidade das tabelas: organizar dados que possuem relação entre si.

Um recurso bastante útil é o elemento <caption>, utilizado para adicionar um título ou uma legenda à tabela. Essa descrição informa ao usuário qual é o conteúdo apresentado antes mesmo da leitura dos dados. Além de tornar a página mais organizada, a legenda contribui para a acessibilidade, pois auxilia pessoas que utilizam leitores de tela a compreender rapidamente o objetivo da tabela.

À medida que as tabelas se tornam maiores, é importante manter uma organização adequada. O HTML5 oferece elementos como <thead>, <tbody> e <tfoot>, que permitem separar o cabeçalho, o corpo e o rodapé da tabela. Embora uma tabela simples possa funcionar sem esses elementos, utilizá-los facilita a manutenção do código, melhora a semântica do documento e contribui para a interpretação correta pelos navegadores e ferramentas de acessibilidade.

Outro aspecto importante diz respeito à acessibilidade. Sempre que possível, recomenda-se utilizar elementos de cabeçalho (<th>) em vez de apenas células comuns para identificar títulos de linhas e colunas. Em tabelas mais complexas, o uso adequado do atributo scope ajuda leitores de tela a relacionarem corretamente os dados com seus respectivos cabeçalhos. Essas práticas tornam a navegação mais eficiente para todos os usuários e fazem parte das recomendações atuais para desenvolvimento web.

Durante muitos anos, era comum utilizar tabelas para montar o layout completo de uma página, posicionando menus, imagens e textos em diferentes células. Atualmente essa prática não é mais recomendada. As tabelas devem ser utilizadas apenas para apresentar dados tabulares. A organização visual das páginas é responsabilidade do CSS, que oferece recursos muito mais flexíveis e acessíveis para construir layouts modernos. Utilizar tabelas apenas quando realmente necessário torna o código mais limpo, facilita futuras alterações e melhora a experiência do usuário.

Ao criar tabelas em HTML, também é importante evitar excesso de informações em uma única estrutura. Quando houver muitos dados, vale a pena dividir o conteúdo em tabelas menores ou organizar as informações em diferentes seções da página. Essa estratégia melhora a legibilidade e reduz a dificuldade de

tabelas em HTML, também é importante evitar excesso de informações em uma única estrutura. Quando houver muitos dados, vale a pena dividir o conteúdo em tabelas menores ou organizar as informações em diferentes seções da página. Essa estratégia melhora a legibilidade e reduz a dificuldade de interpretação, principalmente em dispositivos móveis.

Dominar o uso das tabelas é mais um passo importante para quem está iniciando no desenvolvimento web. Elas permitem apresentar informações de maneira organizada, profissional e acessível, sendo um recurso indispensável em diversos tipos de aplicações. Quando utilizadas de acordo com sua finalidade, tornam a navegação mais eficiente e contribuem para a criação de páginas bem estruturadas.

Referências bibliográficas

DEVMEDIA. HTML5: fundamentos para desenvolvimento web.

MDN WEB DOCS. Tabelas em HTML.

MDN WEB DOCS. Elemento HTML <table>.

MDN WEB DOCS. HTML: Boas práticas em acessibilidade.

W3C BRASIL. Curso de HTML5 – Escritório Brasileiro do W3C.

SILVA, Maurício Samy. HTML5: A Linguagem de Marcação que Revolucionou a Web. Novatec.

Estudo de Caso – Módulo 2

Organizando o site de uma pequena cafeteria

Fernanda sempre sonhou em divulgar sua cafeteria na internet. Depois de aprender os conceitos básicos de HTML, decidiu criar um site simples para apresentar o cardápio, mostrar fotos dos produtos e facilitar o contato com os clientes. Ela acreditava que seria um projeto rápido, mas logo percebeu que organizar as informações de maneira clara era tão importante quanto escrever o código.

Na página inicial, Fernanda criou um menu para direcionar os visitantes às seções "Início", "Cardápio", "Galeria" e "Contato". No entanto, em vez de utilizar listas HTML, digitou cada item separando-os apenas por espaços e quebras de linha. O menu até funcionava visualmente, mas seu código ficou desorganizado e pouco acessível. Após estudar melhor o assunto, ela refez a navegação utilizando listas e links, tornando a estrutura mais clara para os navegadores, mecanismos de busca e leitores de tela. O uso correto de listas melhora a semântica da página e facilita a navegação por tecnologias assistivas.

Em seguida, Fernanda adicionou fotografias dos cafés, bolos e salgados vendidos na cafeteria. Porém, esqueceu de incluir descrições alternativas nas imagens. Quando algumas fotos demoravam para carregar devido à conexão lenta, os visitantes não conseguiam identificar o conteúdo que deveria aparecer. Além disso, pessoas que

utilizavam leitores de tela também não recebiam nenhuma informação sobre aquelas imagens. Ao conhecer o atributo alt, ela passou a descrever cada fotografia de forma objetiva, melhorando significativamente a acessibilidade do site.

Outro problema apareceu quando Fernanda decidiu publicar a tabela de preços. Ela utilizou apenas células comuns para todas as informações, sem diferenciar os cabeçalhos das colunas. Embora a tabela parecesse correta visualmente, usuários de leitores de tela tinham dificuldade para identificar quais valores correspondiam a cada produto. Depois de revisar o projeto, ela substituiu os títulos por elementos apropriados de cabeçalho e adicionou uma legenda para identificar a tabela. Essa pequena alteração tornou a leitura muito mais clara para todos os usuários.

Também surgiram dificuldades com os links. Alguns direcionavam para páginas inexistentes porque os endereços haviam sido digitados incorretamente. Em outros casos, o texto do link era apenas "Clique aqui", sem indicar ao visitante qual seria o destino. Após realizar testes antes da publicação, Fernanda corrigiu todos os caminhos e passou a utilizar descrições mais informativas, como "Conheça nosso cardápio" e "Entre em contato com a cafeteria". Essa mudança tornou a navegação mais intuitiva e acessível.

Ao concluir o projeto, Fernanda percebeu que a organização do conteúdo fazia toda a diferença. As listas facilitaram a navegação, as imagens passaram a transmitir informações mesmo quando não eram exibidas, e a tabela permitiu que os clientes consultassem os preços rapidamente. O site ficou mais profissional, mais fácil de manter e preparado para crescer com a inclusão de novos produtos e serviços.

Erros comuns observados

• Criar menus utilizando apenas textos separados por espaços ou quebras de linha.
• Esquecer de adicionar o atributo alt nas imagens.
• Utilizar imagens muito grandes, aumentando o tempo de carregamento da página.
• Criar links com endereços incorretos ou textos genéricos como "Clique aqui".
• Construir tabelas sem utilizar cabeçalhos para identificar linhas e colunas.
• Utilizar tabelas para organizar o layout da página em vez de apresentar dados.

Como evitar esses erros

• Utilizar listas HTML para estruturar menus e conjuntos de informações relacionadas.
• Inserir descrições alternativas objetivas em todas as imagens relevantes.
• Redimensionar e otimizar os arquivos de imagem antes da publicação.

• Revisar todos os links para garantir que direcionem ao conteúdo correto e utilizar textos descritivos.
• Empregar elementos de cabeçalho e legendas nas tabelas para facilitar sua interpretação.
• Reservar o uso de tabelas exclusivamente para apresentação de dados, deixando a organização visual da página para o CSS.