HTML do básico ao avançado parte 1

CursoCriando uma aplicação com área administrativa utilizando o Laravel

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 , <body>, <spam> entre muitas outras, todas as TAG devem ser iniciadas e fechar como por exemplo: , 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.

<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.

<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.

 - 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!