📰 post - Adding the "Estruturando seu HTML + Formatações" certificate

_collections/_certificates_br/2024-11-19T00-17.md

@@ -0,0 +1,41 @@
+---
+layout: certificate
+type: course
+code: "mCqjhCWFUkmhbQolQkU4Bg"
+authority: dio
+certificate:
+    name: "Estruturando seu HTML + Formatações"
+    workload: "0000-00-00T02:00:00"
+competencies: [
+    html5,
+    visual-studio-code,
+    live-server
+]
+date: "2024-11-19T00:17:00"
+---
+
+Durante o curso **Estruturando seu HTML + Formatações**, adquiri uma melhor compreensão sobre a criação e organização de documentos HTML, com foco em **acessibilidade**, **semântica** e **estruturação lógica**. A experiência foi enriquecida por práticas que abordaram desde a formatação de textos até o uso de cores e a implementação de *tags* modernas para layout e incorporação de mídia. Além disso, foi destacada a importância da preparação de documentos HTML para estilização futura com CSS, promovendo um desenvolvimento mais eficiente e sustentável.
+
+## Formatando Textos em HTML
+
+A formatação de textos foi um dos principais tópicos abordados no curso, destacando a diferença entre formatações visuais e semânticas. Por exemplo, as *tags* **`<b>`** e **`<i>`** foram apresentadas como opções para aplicar negrito e itálico, mas sem transmitir significado semântico. Por outro lado, as *tags* **`<strong>`** e **`<em>`**, além de oferecerem a mesma formatação visual, melhoram a **acessibilidade** ao indicar ênfase ou importância para leitores de tela. A prática incluiu também o uso da *tag* **`<mark>`**, que destaca texto como se fosse um marca-texto, assim como **`<sup>`** e **`<sub>`**, utilizadas para sobrescrito e subscrito, respectivamente. Esses recursos reforçaram a relevância de escolher corretamente as *tags* para melhorar a interação do conteúdo com ferramentas assistivas, garantindo uma experiência inclusiva e funcional para todos os usuários.
+
+## A Tag `<font>` e Estilização de Texto
+
+Embora a *tag* **`<font>`** permita estilizar diretamente textos no HTML, o curso enfatizou a importância de separar estrutura e estilo, recomendando o uso de CSS para esse propósito. Foi demonstrado como atributos como **`color`**, para definir cores, e **`face`**, para escolher a família de fontes, eram amplamente utilizados em versões anteriores do HTML. No entanto, o curso destacou que boas práticas modernas sugerem oferecer múltiplas opções de fontes para garantir compatibilidade em diferentes dispositivos. Essa abordagem promove um desenvolvimento mais sustentável e organizado, centralizando a estilização em arquivos CSS e reduzindo a complexidade do código HTML.
+
+## Estruturando o HTML
+
+A correta estruturação do HTML foi outro ponto central do curso, abordando o uso de *tags* genéricas e semânticas para organizar o layout de um site. Por exemplo, a *tag* **`<div>`** foi apresentada como uma ferramenta poderosa para agrupar blocos de conteúdo, enquanto **`<span>`** permite estilizar partes específicas de texto sem alterar a disposição das linhas. No contexto de formulários, foram exploradas as *tags* **`<fieldset>`** e **`<legend>`**, que ajudam a organizar e fornecer maior clareza às informações inseridas pelos usuários. O uso adequado dessas *tags* facilita a criação de layouts bem definidos, tornando o código mais legível e preparado para futuras estilizações.
+
+## Tags Descontinuadas e Alternativas Modernas
+
+O curso abordou também a evolução de *tags* HTML, como **`<embed>`**, anteriormente utilizada para incorporar mídia, mas que foi substituída por alternativas mais modernas e semânticas, como **`<video>`** e **`<audio>`**. Outra *tag* explorada foi a **`<iframe>`**, amplamente usada para incorporar páginas ou elementos externos, como vídeos do YouTube ou mapas do Google Maps. O uso de alternativas modernas não apenas garante maior compatibilidade entre navegadores, mas também promove práticas mais seguras e acessíveis, alinhadas aos padrões atuais do desenvolvimento web.
+
+## Trabalhando com Cores no HTML
+
+A definição de cores no HTML foi abordada de forma prática, explorando diversos métodos. Foram apresentados os **nomes de cores** (ex.: `red`, `blue`), os códigos **RGB**, **HSL** e **hexadecimais**, além de técnicas avançadas como **HSLA** e **RGBA**, que permitem adicionar transparência às cores. Por exemplo, foi demonstrado como criar um vermelho translúcido utilizando `rgba(255, 0, 0, 0.5)`. Essa prática ampliou a compreensão sobre a definição de cores em páginas web, melhorando a consistência visual e a experiência dos usuários em diferentes navegadores.
+
+## Reflexão Final
+
+O curso **Estruturando seu HTML + Formatações** reforçou a importância de desenvolver documentos HTML bem estruturados, focados não apenas no visual, mas também na **acessibilidade** e na interação com ferramentas assistivas. Aprender a usar *tags* semânticas, organizar layouts e trabalhar com formatações e cores foi importante para consolidar práticas modernas e eficientes no desenvolvimento web. A experiência não apenas aprimorou minha habilidade técnica, mas também ampliou minha perspectiva sobre como criar interfaces inclusivas, funcionais e sustentáveis. Esse aprendizado será uma base sólida para projetos mais complexos e desafiadores, permitindo explorar o potencial do HTML em colaboração com outras tecnologias, como CSS e JavaScript.

_collections/_certificates_us/2024-11-19T00-17.md

@@ -0,0 +1,15 @@
+---
+layout: certificate
+type: course
+code: "mCqjhCWFUkmhbQolQkU4Bg"
+authority: dio
+certificate:
+    name: "Structuring your HTML and Formatting"
+    workload: "0000-00-00T02:00:00"
+competencies: [
+    html5,
+    visual-studio-code,
+    live-server
+]
+date: "2024-11-19T00:17:00"
+---