Introdução ao HTML Aprendendo desenvolvimento web MDN

Para construir websites, você deve conhecer sobre HTML — a tecnologia fundamental usada para definir a estrutura de uma página web. O código pode ser escrito através de qualquer editor de texto, como o próprio bloco de notas. Cada página consiste em uma série de tags (também chamados de elementos) que podem ser considerados os blocos de construção das páginas. Portanto, esses blocos são a maneira com a qual o HTML faz a marcação dos conteúdos, criando a hierarquia e a estrutura do mesmo, dividido entre seções, parágrafos, cabeçalhos, e outros. Este módulo irá introduzir os dois primeiros e apresentar conceitos fundamentais e a sintaxe que você precisa saber para entender o HTML. Ao visitar uma página simples na web, você pode perceber que existem diferentes distribuições e tamanhos para títulos, parágrafos, imagens, vídeos e qualquer outro elemento.

HTML

Por padrão, apenas links e elementos de formulário são “selecionáveis” por navegação usando a tecla Tab (e você não precisa definir tabindex nesses casos). Dentro de head, teremos tags que são essenciais para a criação de uma página web, como o título, os metadados, o CSS e o JavaScript internos ou externos. Em especial, coisas que não aparecem diretamente na página, mas apenas ajudam o navegador (ou bots como o bot de pesquisa do Google) a exibi-la corretamente. O código da Listagem 4 insere uma imagem a partir do arquivo avatar.png, localizado na mesma pasta do arquivo curso de cientista de dados, e uma tag img apontando para um arquivo inexistente.

Como surgiu o HTML

Dentro do body, teremos o conteúdo da página em si – as coisas visíveis. O HTML nasceu oficialmente em 1993 e, desde então, evoluiu até o ponto atual, partindo de simples documentos de texto até as poderosas aplicações para a web. A anatomia de um documento HTML pode ser interpretada como uma árvore. Além disso, elementos que compartilham do mesmo ramo de origem podem ser chamados de irmãos. Neste ponto você já compreende qual o papel do HTML dentro da programação web.

HTML

Um leitor de tela pode detectar uma lista e fornecer uma visão geral, permitindo que o usuário escolha entrar na lista ou não. A tag picture é recente, mas agora é suportada por todos os principais navegadores, exceto Opera Mini e IE (todas as versões). Você usa picture quando, em vez de apenas servir uma versão menor de um arquivo, deseja alterá-lo completamente ou veicular um formato de imagem diferente. A tag figure é frequentemente usada juntamente com a tag img. Ao carregar um iframe, o navegador envia informações importantes sobre quem o está carregando no cabeçalho Referer (atenção para o r único, um erro de digitação na língua inglesa com o qual devemos conviver). Isso funciona melhor em tabelas grandes e para definir corretamente cabeçalho e rodapé.

Como funciona o HTML

Através de um documento HTML, ou seja, um documento com a extensão .html ou .htm., o navegador faz a leitura do arquivo e renderiza o seu conteúdo para que o usuário final possa visualizá-lo. Os arquivos .html podem ser visualizados em qualquer navegador (como Google Chrome, Safari, ou Mozilla Firefox). As primeiras versões do HTML foram definidas com regras sintáticas flexíveis, o que ajudou aqueles sem familiaridade com a publicação na Web. Através do tempo, a utilização de ferramentas para autoria de HTML aumentou, assim como a tendência em tornar a sintaxe cada vez mais rígida. Apesar disso, por questões históricas (retrocompatibilidade), os navegadores ainda hoje conseguem interpretar páginas web que estão longe de ser um código HTML válido.

  • Essa tag é normalmente envolvida em uma tag pre porque o elemento code ignora espaços em branco e quebras de linha, assim como a tag p.
  • Nossa recomendação é sempre incluir as aspas nos valores dos atributos — isto evita inúmeros problemas, além de resultar em um código mais legível.
  • O erro de ortografia do “referrer” originou-se na proposta original do cientista da computação Phillip Hallam-Baker para incorporar o campo na especificação do HTTP.
  • Observe que cada item das primeiras listas é definido pela tag li.

Assim, você pode usar este manual para aprender HTML desde o básico. Eu escrevi esse manual para ajudar você a aprender HTML de maneira rápida e para se familiarizar com tópicos avançados de HTML. Imagine então que além do esqueleto, é necessário ter o corpo. Para isso, temos então as linguagens CSS e o JavaScript, que em conjunto com HTML, formam a base para todos os websites atuais. Veremos mais à frente o que significam essas linguagens. Formalmente, as especificações foram definidas somente na década de 1990.

Tag em

Enquanto b e i são uma dica direta ao navegador para deixar um trecho de texto em negrito ou em itálico, strong e em dão ao texto um significado especial, cabendo ao navegador dar o estilo. Esses estilos são exatamente os mesmos que os de b e i, por padrão. Este estilo evita a remoção do espaço em branco e o torna um elemento em bloco. Elementos de bloco, quando posicionados na página, não permitem outros elementos próximos a eles, para a esquerda ou para a direita. Assim como as tags head e https://www.7segundos.com.br/arapiraca/noticias/2023/12/28/243034-democratico-bootcamp-de-programacao-e-porta-de-entrada-para-o-mercado-de-ti, só podemos ter uma tag body em uma página. Essa tag é usada para definir um URL base para todos os URLs relativos contidos na página.

Atualmente experimental e suportado apenas por navegadores baseados em Chromium, este é o futuro do compartilhamento de recursos entre a janela pai e o iframe. Tecnicamente, um iframe cria um contexto de navegação aninhado. Isso significa que qualquer coisa no iframe não interfere na página mãe e vice-versa.

Anatomia de um elemento HTML

As tags div e span são duas das mais utilizadas no HTML, com objetivos distintos, porém com grande importância para a composição do layout das páginas e formatação do texto. Na Listagem 13 vemos exemplos de uso dessas tags, e seu resultado pode ser observado em seguida, na Figura 9. Este atributo é usado para adicionar uma string para descrever um elemento. ARIA é um acrônimo em inglês para Accessible Rich Internet Applications (Aplicações Avançadas de Internet Acessíveis) e define a semântica que pode ser aplicada aos elementos.

  • Considero, no entanto, uma boa prática adicioná-las, apenas para maior clareza.
  • Se você nunca ouviu falar de XHTML, aqui está uma pequena história.
  • A Listagem 5 mostra como adicionar um link para outra página, neste caso, indicada pelo arquivo pagina2.html.
  • Todas essas caixas de seleção estarão desmarcadas por padrão.
  • Você também pode usar aspas simples, mas usar aspas duplas em HTML é uma boa convenção.
  • A tag meta viewport é usada para informar ao navegador para definir a largura da página com base na largura do dispositivo.