Como iniciar a programar em HTML e criar seu próprio site
HTML é a pedra fundamental da web que nós conhecemos. É a linguagem de programação por trás de praticamente todos os sites da internet: a sua rede social favorita, o seu portal de notícias, este blog… Claro que hoje em dia as tecnologias evoluíram e os sites não são mais programados apenas em HTML, mas ele é o começo de tudo, e entendê-lo é fundamental para quem trabalha com web.
O que é afinal?
HTML é a sigla para Hypertext Markup Language, ou “Linguagem de Marcação em Hipertexto”. Esta última palavra diz tudo: o hipertexto, os hyperlinks, são a alma da internet. Portanto, basicamente o HTML é a linguagem de programação para para documentos web (páginas).
É uma linguagem quase tão antiga quanto a própria World Wide Web (a rede mundial de computadores; a internet). O primeiro documento descrevendo o HTML foi publicado em 1991. A primeira versão oficial é de 1993. A linguagem foi criada pelo mesmo consórcio chefiado por Tim Berns-Lee que praticamente inventou a nossa web três anos antes, em 1989.
Hoje o HTML está na sua versão 5.2 (popularmente conhecida HTML5), bastante diferente do que era no início. Junto a ela, as linguagens CSS (Cascading Style Sheets) e JavaScript formam o tripé que sustenta a web e pelo qual todos os sites são criados, com seus diferentes e complexos recursos multimídia.
Como funciona?
Documentos “escritos” na linguagem HTML são enviados pela internet e lidos por programas, como os web browsers. Esses programas vão transformar o código em informações: textos, imagens, cores, links… Ou seja, em websites.
Por isso que na sigla do HTML, além de “hipertexto”, a outra palavra é “markup”, ou “marcação”. Para o HTML as “marcações” são as tags, que especificam como determinado tipo de informação vai aparecer na página. Por exemplo, a tag que sinaliza uma quebra de parágrafo é <p>; a que sinaliza que o texto estará em negrito é <b>, e assim por diante. Os documentos HTML são estruturados do começo ao fim com essas tags.
Então vamos começar!
Precisamos ter em mente três conceitos ao trabalhar com HTML: tags, elementos e atributos.
As tags são as palavras ou caracteres que delimitam os elementos. Todas as tags devem ser escritas entre < >. Todos os elementos, salvo algumas exceções, têm tags de abertura e tags de fechamento (estas caracterizadas com uma barra antes da palavra).
Os elementos são tudo aquilo que está distribuído na página: títulos, textos, textos em negrito, textos em itálico, tabelas, cor de fundo da página, imagens, tabelas, formulários, botões, blocos etc. A lista é grande. Eles são sinalizados pelas tags, e entre a tag de abertura e a tag de fechamento que são escritos os conteúdos.
Já os atributos conferem características a alguns elementos (não todos). No código, são seguidos de “=”. Exemplos de atributos são: fonte do link (href=), cor (color=), cor de fundo (bgcolor=) e assim por diante. Através dos atributos que muitas das conexões com o código CSS são feitas, o que garante mais opções de webdesign. Mas isso é outro assunto…
Agora sim, mão na massa
Dito isso, começar é simples. Basta abrir um arquivo do bloco de notas (sim, ele mesmo) e começar digitando:
<html>
</html>
Estas duas tags (de abertura e fechamento do elemento html) são as que mostram ao navegador que se trata de uma página HTML. Se escrever a primeira e esquecer da última, com a bara (/), não vai funcionar. Portanto, o mais fácil é colocar as duas logo de cara.
Dentro dessas duas é que vão entrar os demais elementos. Uma página básica de HTML, sem utilizar atributos, ficaria assim:
<html>
<head>
<title>This is a title</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
Depois da <html>, temos a tag <head>, que estabelece o cabeçalho da página. Notem que entre <head> e </head> há as tags para <title>. Essa é a frase que vai aparecer na aba do navegador, descrevendo o site. Depois do abre e fecha de <head> temos as tags <body>, que indicam, literalmente, o corpo da página. Dentro dela, em um parágrafo delimitado pelas tags <p> e </p>, a frase que aparecerá na janela do navegador.
Com isso escrito num bloco de notas, salve o arquivo, mas mude o final “.txt” para “.html” e confira o resultado. Se quiser colocar a página online é só contratar uma hospedagem de sites e mandar seu arquivo para lá.
Agora, um exemplo mais “sofisticado”. Perceba o atributo “href”, que sinaliza o link. O atributo “target” indica como o link será aberto (“blank”, no caso, significa que abrirá em uma nova aba). E também o elemento “b”, que garante o texto em negrito.
<html>
<head>
<title>This is a title</title>
</head>
<body>
<p><b>Hello world!</b></p>
<a href=”https://www.hostinger.com.br/tutoriais/” target=”blank”> Acesse o blog da Hostinger </a>
</body>
</html>
Enfim…
Como já escrevi anteriormente, o HTML hoje não funciona sozinho sem a companhia do CSS e do JavaScript. Portanto, mesmo que você domine todas as tags do código HTML, dificilmente irá muito longe no webdesign.
Faça outro teste: abra qualquer site, pode ser o blog da Hostinger, e digite o comando para exibir o código fonte (CTRL+U). No meio da bagunça de letras e números que aparecer, se você notar bem, vai enxergar o que já mostramos aqui: <html> <head> <body>.
Essas noções básicas são o suficiente para que você vá atrás de outras tags, outros elementos, outros atributos. As informações estão todas na internet. Explore as possibilidades de criar páginas mais complexas no bloco de notas (como faziam antigamente) e, quem sabe, comece mexer com editores avançados (como o Adobe Dreamweaver) e a pescar uma e outra coisa de CSS… De qualquer maneira, esses fundamentos são um ótimo começo independentemente de qual seja o seu objetivo: se profissionalizar como webdesigner ou apenas não ficar assustado quando se deparar com algum problema básico de HTML.
Este post é resultado de uma parceria entre o Arkade e o Hostinger
