Postagens

Mostrando postagens de maio, 2026

Aula 12 - Inserção e Otimização Teórica de Imagens para Web

Imagem
A comunicação visual é um componente crítico no desenvolvimento de interfaces web. A tag <img> é a responsável por inserir elementos gráficos no HTML, funcionando de forma diferente da maioria das tags: ela é um elemento vazio, que não possui tag de fechamento, e depende do atributo src (source) para localizar o arquivo de imagem. Além da exibição, o desenvolvedor deve se preocupar com a semântica, utilizando obrigatoriamente o atributo alt (alternative text), que fornece uma descrição textual da imagem para deficientes visuais e robôs de busca, sendo um pilar da acessibilidade digital. No ambiente web profissional, a escolha do formato de arquivo é uma decisão técnica de performance. Os formatos mais comuns incluem o JPEG (ideal para fotografias devido à compressão com perda), o PNG (perfeito para gráficos que exigem transparência e alta fidelidade) e o SVG (imagens vetoriais que mantêm a qualidade em qualquer nível de zoom, ideais para logotipos e ícones). Mais recentemente, o...

Aula 11 - Trabalhando com Hiperlinks e Âncoras de Navegação

Imagem
Os hiperlinks são a essência da World Wide Web. Sem eles, a internet seria apenas um conjunto de documentos isolados, sem a conectividade que a define como uma "teia". Na linguagem HTML, os links são criados através da tag de âncora <a>, que permite conectar um documento a outro, ou até mesmo a diferentes partes de uma mesma página. A funcionalidade básica de um link reside no atributo href (hypertext reference), que indica o destino para onde o usuário será levado ao clicar no elemento. Existem dois tipos principais de referências de URL: as absolutas e as relativas. As URLs absolutas apontam para um endereço completo na web, incluindo o protocolo (como https://), o domínio e o caminho do arquivo. Já as URLs relativas são usadas para apontar caminhos dentro do próprio servidor onde o site está hospedado, facilitando a portabilidade do projeto durante o desenvolvimento. Dominar a diferença entre elas é vital para evitar os temidos "links quebrados", que prejud...

Aula 10 - Formatação de Textos e Tipografia Básica no HTML

Imagem
Após estruturar a página e definir sua semântica, o desenvolvedor precisa lidar com a exibição da informação textual. O HTML oferece um conjunto robusto de tags específicas para a formatação de textos, permitindo criar hierarquias visuais e destacar partes importantes do conteúdo. A tipografia na web começa com a definição correta dos títulos, que variam de <h1> (o mais importante e único por página) até <h6> (o de menor nível hierárquico). Para parágrafos comuns, utilizamos a tag <p>. Dentro desses blocos de texto, podemos aplicar ênfases semânticas: a tag <strong> é usada para dar importância a um termo (geralmente exibido em negrito), enquanto a tag <em> (emphasis) indica uma ênfase tonal (geralmente exibida em itálico). É fundamental entender que essas tags não servem apenas para mudar o visual, mas para informar ao navegador e a leitores de tela que aquele trecho de texto possui um peso diferente no discurso. A organização de informações em listas é o...

Aula 9 - Semântica em HTML: Organizando o Conteúdo de forma Lógica

Imagem
O desenvolvimento web moderno abandonou a prática de usar apenas divisões genéricas (<div>) para estruturar páginas. Com a chegada do HTML5, o conceito de semântica tornou-se o centro da organização de conteúdo. Escrever código semântico significa utilizar tags que possuem um significado intrínseco sobre o que elas contêm. Em vez de simplesmente "criar uma caixa", o desenvolvedor informa ao navegador e aos motores de busca: "esta caixa é um cabeçalho", "esta é a navegação principal" ou "este é o rodapé". As tags semânticas principais incluem <header> (para o topo da página ou de seções), <nav> (para menus de navegação), <main> (para o conteúdo principal e único daquela página), <article> (para conteúdos independentes, como posts de blog) e <footer> (para o rodapé). Essa organização lógica permite que o navegador crie uma árvore estrutural clara do documento, facilitando a renderização e o processamento da infor...

Aula 7 - Estrutura Básica de um Documento HTML 5

Imagem
O HTML (HyperText Markup Language) é a linguagem de marcação fundamental utilizada para estruturar o conteúdo das páginas na Web. Na sua versão atual, o HTML5, a linguagem evoluiu para suportar recursos modernos de forma nativa, eliminando a dependência de plugins externos pesados. Todo documento HTML5 começa com uma declaração essencial: o <!DOCTYPE html>, que informa ao navegador que ele deve interpretar o arquivo utilizando os padrões mais recentes da linguagem. A estrutura de um documento HTML é organizada de forma hierárquica através de "tags". A tag raiz é a <html>, que envolve todo o conteúdo da página. Dentro dela, o documento divide-se em duas grandes seções: o <head> (cabeçalho) e o <body> (corpo). O <head> contém informações que não são visíveis diretamente na página para o usuário, como o título que aparece na aba do navegador, links para folhas de estilo CSS e metadados vitais para o funcionamento do site. O <body>, por outro l...