Introdução ao HTML e estrutura básica

HTML (HyperText Markup Language, em português, Linguagem de Marcação de Hipertexto), é uma linguagem de programação utilizada na construção de web sites, blogs entre outros.
Arquivos HTML são interpretados por navegadores Web, tais como, Mozilla Firefox, Google Chrome, Internet Explorer, Opera entre outros.
Sem dúvida alguma, o HTML é a linguagem de programação mais fácil de aprender.

Estrutura básica de uma página HTML:

Bom, para entender como funciona uma página Web feita em HTML iremos criar um exemplo bem simples.
Primeiramente você deve escolher um editor de texto de sua preferência (não pode ser editores de texto que possuem corretor ortográfico, ex.: Microsoft Office.) eu recomendo o Notepad++ que possui destaque a diversas linguagens de programação e pode ser baixado gratuitamente no site: http://notepad-plus-plus.org/, mas quem preferir pode usar o próprio bloco de notas do Windows.
Abra o seu editor de texto, e para começar, digite o código abaixo que indica ao navegador que este é um documento do tipo HTML.
<!DOCTYPE html>
Agora iremos prosseguir digitando as tags básicas para a construção de uma página HTML:
<html>
           <head>
           </head>
           <body>
           </body>
</html>
Você deve observar duas coisas. A primeira é que todas as tags começam com um sinal de <(menor) e terminam com um sinal de >(maior), e as mesmas devem ser abertas e fechadas. Por exemplo, para abrir a tag HTML digitamos <html>, depois colocamos dentro todo o conteúdo que deve ficar na tag, logo após a fechamos digitando a mesma tag, só que agora com uma barra(/) logo após o sinal de menor(<), ficando assim: </html>.
A segunda é que a linguagem deve ser digitada em forma tabulada, ou seja, de forma organizada para um melhor entendimento. Imagine uma página com mais ou menos três mil linhas de código, se o código fosse digitado de forma desorganizada ninguém o entenderia no caso de uma futura alteração.
Prosseguindo com o nosso código, agora iremos digitar uma outra tag entre <head> e </head> que adiciona um titulo a página, aquele que aparece na aba do navegador.
<title>Digite seu título aqui!</title>
A nossa página está quase pronta, agora só falta colocar o texto que irá aparecer no conteúdo principal do seu navegador, ou seja, no body(corpo).
Então digite qualquer frase ou texto entre as tags <body> e </body> de sua página. Lembrando que o texto ficara só em uma linha e em uma letra padrão, pois não estaremos formatando-o agora, isto será assunto para futuras postagens.
O nosso código já está pronto, veja como ficou:
<!DOCTYPE html>
<html>
           <head>
                     <title>Digite seu título aqui!</title>
           </head>
           <body>
                     Esta é minha primeira página HTML!
           </body>
</html>
Com o código pronto chegou a hora de salvar a nossa página. Então clique no menu arquivo e em salvar como. Agora adicione o nome ao nosso arquivo, por padrão usa-se o nome index para a página inicial de um site. O nome tem que terminar com .html ou .htm. Salve com o nome index.html.
Agora vá até a pasta que você salvou o arquivo e de um duplo clique nele.
Pronto! A sua página foi aberta no seu navegador Web padrão.

Postagens relacionadas:

3 comentários:

Emerson disse...

Como se faz isso que você fez pra download.
Muito Obrigado

Maik Basso disse...

Isso foi feito com HTML e CSS.
Se quiser saber como se faz continue acompanhando o meu site, porque estou preparando vários artigos que explicarão detalhadamente a utilização destas linguagens.

Anônimo disse...

Site muito bom tenho que admitir.

Postar um comentário

Deixe um comentário referente ao assunto do post, compartilhe seu conhecimento, sua dúvida ou deixe uma sugestão.