HTML do básico ao avançado parte 1

Gunnar CorreaGunnar Correa26/02/2015 às 06:01:03 - 6.512 acessos

Conheça o HTML, suas funcionalidades e suas principais tags.


Toda a parte gráfica de um site é feita através da linguagem de marcação ou seja HTML, para a formatação usa-se o CSS.

Para começar a desenvolver em HTML, você precisa de um editor, o próprio editor do Windows (Notepad) pode lhe auxiliar, porém recomendo um editor de HTML, como o Atom ou Visual Studio Code, por exemplo.

 No HTML os comandos são chamados de TAG(Tégui) são elas <p>, <body>, <spam> entre muitas outras, todas as TAG devem ser iniciadas e fechar como por exemplo: <p></p>, com exceção das Tags órfãos, que se fecha nela mesma, como <img src=”..” />.

Para comentar uma linha dentro do HTML usamos <!-- -> Estes comentários não serão visíveis no site, apenas no seu código fonte.

Vamos fazer o corpo de um HTML.

<!doctype html>
<html lang="pt-br">
	<head>
		<meta charset="utf-8">
		<title>Exemplo de corpo em HTML</title>
     </head>
     <body>
	     <p>Este é um parágrafo em HTML</p>
	     <!—Este é um comentário e não será visível em nosso site ->
     </body>
</html>

Agora será detalhado cada parte destes códigos.

<!doctype html> - Doctype informa ao navegador que versão do HTML você está usando, que neste caso é o HTML 5, ele serve para que o navegador possa ler sua página considerando as Tags e semânticas da versão fornecida

<html lang=”pt-br”></html> - Esta Tag são responsável por informar que tudo que estiver dentro dela será Tags HTML, usamos lang=”pt-br” para informar que nossa página foi escrita em português-Brasil.

<head></head> - Dentro da TAG <head> colocamos o cabeçalho do site, tudo o que o site deve carregar antes de ir para a parte gráfica, que é o <body>, neste cabeçalho passamos Javascript, CSS,  meta TAGS dentre outros.

<title></title> - Informamos o título de nossa página, o título é o nome que aparecera na aba do seu navegador. Na imagem abaixo você pode ver um exemplo de um Título carregado na aba do navegador.

Inserindo título na página HTML

<meta charset=”utf-8”> - Quando você usa caracteres com centos e caracteres especiais você precisa informar o mapa de Caracteres, que você vai usar em sua página, para que o navegador saiba como interpretar, abaixo você verá um erro de acentuação que chamamos de erro de Charset.

Por padrão diversos sites usam o UTF-8, existem vários outros, como o ISSO, por exemplo, porém o UTF-8 é um padrão de escrita usado em todos os países, isto garante que um site escrito em alemão, poderá ser carregado sem erros em qualquer outro país.

No 1º exemplo o texto com o Charset e no 2º sem o Charset, veja o que realmente é um erro e acentuação por falta de um Charset.

Utilizando charset no HTML

<body></body> -  Este é o corpo do nosso documento, toda parte que o usuário vai acessar, ler... deve ficar aqui, se você colocar um texto dentro do HEAD ele irá aparecer  na página, porém você não irá passar na validação (Na próxima matéria você verá sobre validação e W3C) de sua página e ela não estará com a estrutura correta, além de poder ter sérios outros problemas de leitura e quebra de página.

É dentro do <body> que fica as imagens, tabelas, divs e outros elementos do site.

<p></p> - Este é um parágrafo, nele inserimos nosso texto, podemos colocar quantos parágrafos forem necessários em nossa página, não existe um limite de TAG para serem usadas na página, algumas devem ser usada uma única vez como o <title> e <head>, que são declaradas no cabeçalho da página.

Para salvar um documento no Notepadd++, clique em Arquivo->Salvar Como, no campo nome insira um nome qualquer e acrescente .html, se você não adicionar .html sua página não será interpretada como HTML e sim será um arquivo de texto.

Exemplo: index.html, default.html.

Ficamos por aqui, até a próxima!


html5 tag marcação escopo página site web tutorial doctype chartet head body

Compartilhe


Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web (FIPP), Especialista em Tecnologias na Educação (Unoeste) e Pós-graduando em Segurança da Informação (Universidade Cruzeiro do Sul). Começou seus estudos na área de programação quando era criança, e atualmente está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.



Site atualizado

Olá, nosso site recebeu uma nova atualização e por conta disso, alguns artigos ainda estão sendo atualizados. Dependendo do conteúdo que você procura, poderá encontrar imagens e trechos de códigos mal formatados.

Estamos trabalhando para normalizar todos os conteúdos, muito em breve, esse problema não mais existirá.


Comentários