Technical Documentation

1. Introdução ao HTML

HTML é a abreviação de HyperText Markup Language.

HTML é a linguagem padrão para criar páginas da web.

Ela é usada para estruturar o conteúdo na web.

HTML define a estrutura da página usando marcações.

Exemplo de uma marcação HTML básica:

      <html>
        <body>
          <p>Indrodução ao HTML</p>
        </body>
      </html>

Estrutura: A estrutura de um documento HTML refere-se à forma como os diferentes componentes da página são organizados. Ela é definida por uma hierarquia de elementos que representam o conteúdo e a apresentação da página. Essa estrutura é fundamental para garantir que os navegadores interpretem corretamente o conteúdo e o exibam de maneira adequada ao usuário.

Marcação: A marcação em HTML consiste nas tags que delimitam os diferentes elementos dentro do documento. Cada tag é responsável por indicar o início e o fim de um elemento, como <p> para parágrafos ou <h1> para cabeçalhos. A marcação é essencial para que o navegador saiba como renderizar cada parte da página e para que os desenvolvedores possam entender a estrutura do conteúdo.

  <html>
    <head>
      <title>Exemplo de Página</title>
    </head>
    <body>
      <h1>Bem-vindo ao Meu Site!</h1>
      <p>Esta é uma introdução ao HTML e seus elementos.</p>
    </body>
  </html>

Elementos: Os elementos em HTML são as unidades básicas que compõem uma página web. Eles representam diferentes tipos de conteúdo, como texto, imagens, links e listas. Cada elemento é definido por uma tag de abertura e uma tag de fechamento, e pode conter outros elementos, formando uma estrutura hierárquica que organiza o conteúdo de maneira lógica e acessível.

Atributos: Os atributos em HTML são informações adicionais que podem ser adicionadas aos elementos para especificar suas características e comportamento. Eles são escritos dentro da tag de abertura do elemento e geralmente aparecem na forma de pares chave-valor. Por exemplo, o atributo href em um link (<a>) define o destino do link, enquanto o atributo class permite a aplicação de estilos CSS específicos ao elemento.

  <a href="https://www.freecodecamp.org/">Visite nosso site!</a>

Validação: A validação em HTML refere-se à verificação se o código HTML está em conformidade com as especificações da linguagem. Um código HTML válido garante que os navegadores interpretem corretamente a página web e que ela seja renderizada corretamente para os usuários. Ferramentas de validação de HTML podem ajudar a identificar erros no código que podem afetar a exibição ou o funcionamento da página.

2. HTML Semântico e Estrutura

HTML semântico utiliza tags que têm significado.

Essas tags ajudam a melhorar a acessibilidade e SEO.

Exemplos de tags semânticas:

        <header>

        <footer>

        <article>

        <section>

        <nav>

header: Define o cabeçalho de uma seção ou do documento HTML, geralmente contendo elementos como logotipos, menus de navegação e informações introdutórias.

  <html>
    <head>
      <title>Exemplo de Header</title>
    </head>
    <body>
      <header>
        <h1>Meu Site Incrível</h1>
        <p>A melhor página para aprender HTML!</p>
      </header>
    </body>
  </html>

footer: É crucial para completar a estrutura básica de uma página web, garantindo que informações importantes, como créditos e links adicionais, sejam claramente apresentadas aos usuários.

  <html>
    <head>
      <title>Exemplo de Footer</title>
    </head>
    <body>
      <footer>
        <p>© 2024 Meu Site. Todos os direitos reservados.</p>
        <p>Contate-nos: contato@meusite.com</p>
      </footer>
    </body>
  </html>

article: Define um conteúdo independente e autocontido dentro de um documento HTML, como uma postagem de blog, notícia ou comentário.

  <html>
    <head>
      <title>Exemplo de Article</title>
    </head>
    <body>
      <article>
        <h2>Título do Artigo</h2>
        <p>Este é o conteúdo do artigo. Aqui você pode escrever sobre um tópico.</p>
        <p>Aqui o conteúdo pode ser bem rico e bem estruturado.</p>
      </article>
    </body>
  </html>

section: Define uma seção temática dentro de um documento HTML, agrupando conteúdos relacionados logicamente, como blocos de texto, imagens ou outros elementos.

  <html>
    <head>
      <title>Exemplo de Section</title>
    </head>
    <body>
      <section>
        <h2>Título da Seção</h2>
        <p>Esta seção contém informações relacionadas a um tema específico. </p>
        <p>As seções ajudam a melhorar a legibilidade e a estrutura do documento.</p>
      </section>
    </body>
  </html>

nav: Define uma seção de navegação contendo links para outras páginas ou seções do site, facilitando a acessibilidade e organização da navegação.

  <html>
    <head>
      <title>Exemplo de Nav</title>
    </head>
    <body>
      <nav>
        <ul>
          <li><a href="index.html">Início</a></li>
          <li><a href="sobre.html">Sobre</a></li>
          <li><a href="serviços.html">Serviços</a></li>
          <li><a href="contato.html">Contato</a></li>
        </ul>
      </nav>
    </body>
  </html>

3. CSS Flexível e Layouts Adaptáveis

CSS é usado para estilizar e dispor elementos na página.

Flexbox e Grid são duas técnicas para criar layouts flexíveis.

Flexbox ajuda a alinhar e distribuir o espaço entre itens em um contêiner.

Grid permite criar layouts complexos com linhas e colunas.

Flexbox:Flexbox é um modelo de layout bidimensional que ajuda a projetar layouts complexos de forma mais intuitiva e eficiente em termos de espaço. Ele permite alinhar, distribuir e organizar elementos dentro de um contêiner de maneira flexível, independentemente do tamanho do dispositivo ou da tela.

  <html>
    <head>
      <title>Exemplo de Flexbox</title>
      <style>
        .container {
          display: flex;
          justify-content: space-between;
          background-color: #f0f0f0;
          padding: 10px;
        }
        .item {
          background-color: #4CAF50;
          color: white;
          padding: 20px;
          margin: 5px;
          flex: 1;
        }
      </style>
    </head>
    <body>
      <div class="container">
        <div class="item">Item 1</div>
      </div>
    </body>
  </html>

Grid: CSS Grid Layout é um sistema bidimensional de layout que permite dividir uma página em linhas e colunas, facilitando o design de layouts complexos. Ele oferece um controle mais preciso sobre o posicionamento e o espaçamento dos elementos em relação uns aos outros, sendo especialmente útil para criar designs responsivos e adaptáveis.

  <html>
    <head>
      <title>Exemplo de Grid</title>
      <style>
        .grid-container {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 10px;
          background-color: #f0f0f0;
          padding: 10px;
        }
        .grid-item {
          background-color: #2196F3;
          color: white;
          padding: 20px;
          text-align: center;
        }
      </style>
    </head>
    <body>
      <div class="grid-container">
        <div class="grid-item">Item 1</div>
      </div>
    </body>
  </html>

Layout: Em termos gerais, layout se refere à organização visual e estrutural de elementos em uma página web ou em qualquer outro meio de comunicação visual. Tanto Flexbox quanto Grid são técnicas de layout utilizadas em CSS para ajudar na criação de interfaces responsivas e bem estruturadas.

  <html>
    <head>
      <title>Exemplo de Layout</title>
      <style>
        body {
          display: grid;
          grid-template-areas:
            "header header header"
            "sidebar content content"
            "footer footer footer";
          grid-template-rows: auto 1fr auto;
          height: 100vh;
        }
        header  {
          grid-area:  header;
          background-color:  #4CAF50;
          color:  white;
          padding:  10px;
          text-align:  center;
        }
        sidebar {
          grid-area: sidebar;
          background-color: #2196F3;
          color: white;
          padding: 10px;
        }
        content {
          grid-area: content;
          background-color: #f0f0f0;
          padding: 10px;
        }
        footer {
          grid-area: footer;
          background-color: #4CAF50;
          color: white;
          text-align: center;
          padding: 10px;
        }
      </style>
    </head>
    <body>
      <header>Cabeçalho</header>
      <sidebar>Barra Lateral</sidebar>
      <content>Conteúdo Principal</content>
      <footer>Rodapé</footer>
    </body>
  </html>

4. Imagens e Mídia Adaptáveis

As imagens devem se ajustar ao tamanho da tela.

O uso de consultas de mídia é essencial para o design responsivo.

Exemplo de consulta de mídia:

@media (max-width: 768px) {
  /* Estilos aplicados para telas com largura máxima de 768px */
}

img {
  max-width: 100%;
}

object-fit: cover;

Media Queries: São usadas em CSS para aplicar estilos diferentes com base nas características do dispositivo, como largura da tela ou orientação, permitindo layouts responsivos.

Responsive Images: Técnicas para garantir que imagens em websites se ajustem ao tamanho da tela do dispositivo do usuário, melhorando o desempenho e a experiência do usuário.

Object Fit: Uma propriedade CSS que controla como o conteúdo (como imagens ou vídeos) se ajusta e é redimensionado dentro de seu contêiner, permitindo opções como preenchimento, ajuste proporcional ou cobertura total.

5. Tipografia e Legibilidade Responsivas

A tipografia deve ser ajustada para diferentes tamanhos de tela.

Fontes legíveis e tamanhos adequados melhoram a leitura.

Utilize unidades relativas para ajustar o tamanho das fontes.

Exemplos de tipografia e Legibilidade Responsiva:

  <html>
    <head>
      <title>Exemplo de Estilos de Fonte</title>
      <style>
        body {
          font-family: "Arial, sans-serif"; /* Define a família da fonte */
          font-size: 16px; /* Tamanho da fonte */
          line-height: 1.5; /* Altura da linha */
          color: #333; /* Cor do texto */
        }
        h1 {
          font-weight: bold; /* Peso da fonte */
          font-size: 24px; /* Tamanho da fonte do cabeçalho */
        }
        p {
          font-weight: normal; /* Peso da fonte do parágrafo */
        }
      </style>
    </head>
    <body>
      <h1>Exemplo de Estilos de Fonte</h1>
      <p>Este é um parágrafo com estilos de fonte aplicados.</p>
      <p>Você pode ajustar esses estilos conforme necessário para melhorar a aparência do seu site.</p>
    </body>
  </html>

Font Size: Define o tamanho físico do texto, afetando a legibilidade e o destaque de diferentes elementos na página.

Line Height: Determina a altura da linha entre duas linhas de texto consecutivas, influenciando na legibilidade e na estética do texto.

Font Family: Conjunto de fontes ou estilos que definem o visual do texto em um site, como serif, sans-serif, monospace, entre outros.

Font Weight: Indica a espessura relativa da fonte, variando de leve a pesada, e afeta o contraste e a ênfase do texto na página.

6. Referências

Referências são importantes para fornecer mais informações.Aqui há referencias que foram usadas para fazer esse:

W3Schools - site educacional voltado ao aprendizado de tecnologias web.

MDN Web Docs
      - Uma plataforma de aprendizagem em evolução para tecnologias da Web e o software que alimenta a Web.