Introdução
HTML é um acrônimo para Hiper Text Markup Language, que significa Linguagem de Marcação de Hipertexto e é a linguagem padrão para o desenvolvimento de páginas web.
A linguagem HTML foi criada em 1991 por Tim Berners-Lee e é mantida pela W3C (World Wide Web Consortium) que é um consórcio internacional que agrega empresas, órgãos governamentais e organizações independentes que juntos discutem e definem os padrões e tecnologias a serem utilizados na web.
Objetivos da aula
● Descrever a semântica do HTML 5.
● Reconhecer a estrutura de um código HTML.
● Identificar os elementos e atributos.
● Identificar Títulos, links, texto.
Resumo
A linguagem HTML desempenha um papel fundamental ao esboçar a estrutura de um site, constituindo-se de uma série de elementos que instruem o navegador quanto à exibição do conteúdo. Cada um desses elementos tem a função de delinear distintas porções do conteúdo, como “este é um título”, “este é um parágrafo”, “este é um link” e assim por diante.
Estrutura básica de um código HTML
O HTML, atualmente, está na versão 5.2, que foi lançada em 2017. Seus elementos são chamados de tags e sua estrutura básica é a seguinte: uma página HTML se inicia, primeiramente, com a declaração <!DOCTYPE html>. Esta declaração é responsável por comunicar ao navegador que esta é uma página em HTML5. Antes do HTML5, esta declaração era feita de outra forma.
Para dar início ao conteúdo da página HTML, abrimos a tag <html lang=“pt-BR”> e todo o conteúdo da página deve estar entre sua abertura e seu fechamento </html>. Note que a tag possui o atributo lang que deve conter o idioma do conteúdo da página, (importante para ajudar os motores de busca e navegadores a interpretar a página) neste caso, português do Brasil, cuja abreviação é pt-BR.
Após abrir a tag html, abrimos a tag <head>. Este elemento é uma seção que deve conter dados sobre o documento HTML como título do documento, codificação dos caracteres, estilos, scripts e outras informações. O conteúdo que fica dentro desta tag não é exibido pelo navegador.
Analogamente, podemos comparar o elemento <head> do HTML ao cérebro de um site. Assim como o corpo contém a parte física de um ser, o <head> abriga as informações vitais e essenciais do site, apesar de não serem visíveis no navegador. Este elemento desempenha um papel crucial ao fornecer detalhes cruciais para a renderização adequada da página, como metadados, títulos e referências a arquivos externos, contribuindo para a experiência completa do usuário.
Dentro do <head> vamos abrir a tag <title> para inserir o título do documento e, em seguida, vamos fechá-la </title> e fechar também a tag </head>. Obs: Alguns metadados não são obrigatórios, mas são importantes de serem definidos dentro da <head>, **como:
● <meta charset=“UTF-8”>. O atributo charset especifica a codificação de caracteres para o documento HTML. A especificação HTML5 incentiva a utilização do conjunto de caracteres UTF-8, que abrange quase todos os caracteres e símbolos do mundo.
● <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>. Esta meta tag viewport fornece ao navegador instruções sobre como controlar o dimensionamento da página quando acessada de diferentes tamanhos de dispositivos. O valor width=device-width do atributo content define que a largura da página deve seguir a largura do tamanho da tela do dispositivo. O valor initial-scale=1.0 define o nível de zoom inicial quando a página é carregada pela primeira vez pelo navegador, neste caso, 1.
Continuando a analogia: o elemento <body> no HTML pode ser comparado ao corpo do site. Assim como o corpo físico é a parte que os olhos veem em um ser humano, o <body> é a seção onde o conteúdo visível do site é colocado. Ele abriga todos os elementos que os usuários podem interagir e visualizar, como texto, imagens, vídeos, links e outros elementos de design. Portanto, a tag <body> é responsável por trazer à vida a parte visível e interativa do site, enquanto o <head> fornece os detalhes e as instruções necessárias para sua apresentação adequada.
Após o conteúdo do site, fecha-se a tag </body> e em seguida a fecha-se a tag </html>.