O que é HTML quais as principais tags e como usar-las
O HTML é a única linguagem que os navegadores conseguem interpretar, ou seja o HTML está presente na maioria dos sites.
Abra seu editor de textos escreva qualquer coisa nele e salve com o nome: index.html (lembre-se do formato do HTML) agora abra esse arquivo no seu navegador.
Vai ta o texto normal com um fundo branco.
Até agora não existe HTML nesse arquivo.
Copie e cole no arquivo index.html o codigo abaixo:
<!DOCTYPE HTML>
<!-- Diz ao navegador que o Documento é HTML -->
<html>
<!-- entre a tag <HTML> e </HTML> aqui é onde fica todo o HTML do Site -->
<head>
<!-- o Head é o cabeçalho do site aqui fica as metas que define o comportamento do site -->
<meta charset="utf-8"/>
<!-- Formata o texto acentuado todo texto de forma correta-->
<title>Hello World<!--Título do Site essa é uma das Tags mais importantes--></title>
</head>
<body>
<!-- Body é o corpo do site. aqui vai tudo aquilo que você ver-->
<h1>Hello World.</h1>
<!-- Texto grande -->
<h2>Olá Mundo é uma superstição muito conhecida, que diz que aquele que não começar com olá Mundo.</h2>
<!--lista -->
<ul>
<li>Nunca vai aprender HTML.</li>
<li>Vai perder o interesse no assunto.</li> <li>Já aconteceu com Muitos.</li> <li>Será o próximo?</li> </ul>
</body>
</html>
Veja que esse texto está diferente do anterior. Agora cole esse código entre <head> e </head> :
<meta name="viewport" content="width=device-width, initial-scale=1" />
Percebeu a diferença? Ele deixa seu site compatível com navegadores móveis e com o navegador do PC.
As Tags HTML, Head e Body tem uma Hierárquica deve começar com <html> seguido de <head> </head>e <body> <body> e por fim </html>
A tag <html> é a tag Pai que começa e fechar os códigos.
Já o <head> contém informações sobre nosso documento que são de interesse somente do navegador, e não dos visitantes do nosso site. São informações que não serão exibidas na área do documento no navegador.
<title> e o que dá nome ao arquivo HTML tag obrigatória e essencial.
A tag <body> contém o corpo do nosso documento, que é exibido pelo navegador em sua janela. É necessário que o <body> tenha ao menos um elemento “filho”, ou seja, uma ou mais tags HTML dentro dele.
O DOCTYPE não é uma tag HTML, mas uma instrução especial. Ela indica para o navegador qual versão do HTML deve ser utilizada para renderizar a página. Utilizaremos <!DOCTYPE html>, que indica para o navegador a utilização da versão mais recente do HTML - a versão 5, atualmente.
O Por que de salvar tudo em um arquivo com nome index.html é que quando desejamos que uma determinada pasta seja servida como um site e dentro dessa pasta existe um arquivo chamado index.html, esse arquivo será a página inicial a menos que alguma configuração determine outra página para esse fim.
Ou seja, no seu servidor seu arquivo index.html será executado ao entrar no seu link(http://site.com). Ou http://site.com/index.html
Veja o código completo com algumas Tags indispensáveis, que tem em todo site.
<!DOCTYPE HTML>
<!-- Diz ao navegador que o Documento é HTML5 -->
<html>
<!-- entre a tag <HTML> e </HTML> aqui é onde fica todo o HTML do Site -->
<head>
<!-- o Head é o cabeçalho do site aqui fica as metas que define o comportamento do site -->
<meta charset="utf-8"/>
<!-- Formata o texto acentuado todo texto de forma correta-->
<title>Hello World<!--Título do Site essa é uma das Tags mais importantes--></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<!-- Body é o corpo do site. aqui vai tudo aquilo que você ver-->
<h1>Hello World.</h1>
<!-- Título e Subtítulo -->
<h2>Olá Mundo é uma superstição muito conhecida, que diz que aquele que não começar com olá Mundo.</h2>
<!--lista -->
<ul>
<li>Nunca vai aprender HTML.</li>
<li>Vai perder o interesse no assunto.</li> <li>Já aconteceu com Muitos.</li> <li>Será o próximo?</li> </ul>
O HTML é simplesmente a base!
<!--Imagem-->
<img alt="Discrição da imagem" width="250" src="http://www.claroideas.com/static/masvisto/img/emojismasusados.jpg"/>
<!-- Quebra de Linha e Parágrafos-->
<br/>
<!--Link-->
<a href="#link">Você terá uma longa caminhada.</a>
<p>Parágrafo 1</p> Parágrafo 2 <p/>
Fim do parágrafo.
<hr/>
<footer> <a name="link"></a><center>© 2017 Hello World<br/>Todos os direitos reservados.</center></footer>
</body>
</html>
Bom é isso aí. Espero que tenham gostado!
Comentários
Postar um comentário