E aí pessoal, nesta edição do PET Redação vamos abordar um tema muito importante para quem deseja se aprofundar melhor no desenvolvimento web, o HTML.
HTML: Conceito
Primeiramente, HTML não é uma linguagem de programação; é uma linguagem de marcação, usada para definir a estrutura do conteúdo de uma página web, essa linguagem consiste em um conjunto de elementos, que podem ser utilizados para delimitar e agrupar diferentes partes do conteúdo para que ele atue de uma certa maneira.
HTML: Funcionamento
O HTML está lado a lado com os navegadores de internet e conectado com as ferramentas de busca, quando uma página de HTML está pronta, os navegadores são capazes de interpretá-la e assim, renderizar o site.
HTML: Busca
Quando você busca por alguma palavra em algum mecanismo de busca, é possível visualizar diferentes resultados, apesar de diferentes hospedagens, seguem a mesma estrutura; um título e uma pequena descrição do conteúdo da página. Essas informações são fornecidas pelo HTML.
HTML: Tags, Atributos e Elementos
A linguagem é basicamente dividida entre estas três denominações (tags, atributos e elementos) para identificar os diferentes itens da estrutura HTML.
Tags: São representações de um elemento, é utilizada para rotular a função daquele conteúdo e deve sempre ser escrita entre os símbolos “<” e “>”, como por exemplo, a tag <h1> que adiciona um título à sua página. Existem tags que podem ser utilizadas sozinhas ou em conjunto com a tag de fechamento, em que há a dição do caractere “/”, por exemplo, a tag de fechamento de <h1> será </h1>.
Veja o exemplo abaixo:
<h1> Seu título aqui </h1>
Elementos: São itens presentes na página, como por exemplo, uma imagem, link, parágrafo e até mesmo um formulário. Os elementos podem ou não serem formados por conjunto de tags, essa condição depende da necessidade de delimitação que você deseja fazer ao conteúdo do elemento. Podemos dividir os elementos em duas categorias: elementos de bloco e elementos de linha.
Os elementos de bloco são isolados pela inserção de uma linha antes e depois da exibição do conteúdo e sempre ocupam toda a largura que há disponível. Por exemplo, tags como: <h1>, <form>, <table>, etc.
Os elementos de linha, pelo contrário, apenas ocupam o espaço daquilo que será inserido na tela. Por exemplo, as tags: <img>, <a>, <button>, <input>, etc.
Veja o exemplo de elementos abaixo:
div: elemento utilizado para organizar o conteúdo exibido na página, geralmente aplicado na definição do layout.
iframe: elemento utilizado para exibir conteúdo de outras páginas.
Atributos: Representam todas as características e funcionalidades que os elementos podem ter, o atributo de uma imagem (img), por exemplo, tem o atributo alt, que permite adicionar um texto alternativo caso o carregamento do arquivo venha a falhar.
HTML: Estrutura básica
Por fim, nós temos a estrutura básica de um documento HTML.
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
<meta charset=”utf-8″ />
</head>
<body>
<h1>Título</h1>
</body>
</html>
<!DOCTYPE html>, é uma declaração que informa qual a versão do HTML está sendo utilizada para que o navegador possa interpretar, neste caso, essa declaração representa o HTML5, versão mais recente.
<html>, essa tag informa para o navegador que esse documento é HTML, é importante manter todos os elementos dentro desta tag.
<head>, aqui contém todos os metadados da página, que são informações não visíveis para o usuário
<title>, nessa tag, é definido o título da página, que aparece na aba da página no navegador.
<meta charset>, usada para definir as informações dos metadados, neste caso, o charset define a codificação que será utilizada na página, geralmente é utilizada a codificação UTF-8, que tem suporte à acentos.
<body>, o corpo da página, onde todo o conteúdo da página é inserido, que é o que aparece para o usuário final.
<h1>, no código acima, essa tag está determinando o título do corpo da página.
