Assim como toda linguagem, seja ela a Língua Portuguesa, a Língua Brasileira de Sinais, a linguagem de programação requer uma interpretação dos seus códigos e símbolos para transmitir da melhor forma possível uma mensagem para uma pessoa. Nos idiomas, a interpretação acontece por meio da leitura, já na linguagem de programação a interpretação ocorre por meio do navegador, seja ele Firefox, Chrome, entre outros.
Neste artigo, de forma sucinta, você aprenderá a executar alguns códigos HTML. Isso, ao término deste artigo te fará um aprendiz em programação.
O que é HTML?
HTML é uma linguagem de marcação
HTML é uma sigla em inglês que significa Hypertext Markup Language ( Linguagem de Marcação de Hipertexto). Ela foi criada por Tim Berners-Lee, que contribuiu para o desenvolvimento da Internet como um todo, além de outras inovações. Não é uma linguagem de programação, mas sim de marcação. Ela é quem organiza, por meio dos seus códigos, a interface dos sites que serão visualizados pelos usuários. Já estamos na quinta versão, por isso em todo documento HTML é preciso utilizar a seguinte tag: <!DOCTYPE html>.
Os códigos
Assim como a maioria das casas têm duas portas, geralmente uma que dá para a parte de trás do quintal e a outra para a parte da frente, no HTML temos uma tag que abre a ação do código <> e outra que fecha </>. Assim você informa para o navegador que houve uma abertura e um fechamento de um determinado bloco dentro do seu projeto.
Como há casas de apenas uma porta, da mesma forma existem códigos que não fecham, como no exemplo utilizado acima: <!DOCTYPE html>.
Conteúdo da página
Para ver isso tudo na prática, a seguir teremos um anúncio que transformaremos em código. Acompanhe.
Um anúncio
- Título do site: O melhor biscoito.
- Título do texto do anúncio: A melhor experiência da sua vida.
- Subtítulo: Não se trata de um biscoito, mas da evolução do seu paladar.
- Texto: Desde muito tempo a gastronomia deixou de ser apenas um recurso para uma alimentação saudável. Ela é agora a busca incansável da combinação perfeita entre aquilo que é essencial para a vida humana, que é uma boa alimentação, e uma experiência extremamente agradável na hora da alimentação.
A estrutura do código
Construindo o seu primeiro código
Primeiro se faz necessário informar ao navegador qual é a versão do HTML executada, para isso utilizaremos a tag <!DOCTYPE html>.
Tudo que for desenvolvido é preciso estar dentro dessas duas tags: <html> </html>.
Dentro da tag <html> ficarão as tags <head> e </head>, que é o cabeçalho do site, porém esta parte não é visualizada pelo usuário.
A cada explicação de tag será exposto em seguida a evolução do nosso código, como segue:
<!DOCTYPE html>
<html>
<head>
</head>
</html>Dentro da tag <head> ficarão as tags <title> </title>. O que for dentro destas tags é encontrado pelo site de buscas, como o Google.
<!DOCTYPE html>
<html>
<head>
<title>O melhor biscoito</title >
</head>
</html>
Lembrando que, tudo precisa estar dentro da tag <html>.
Após a tag </head> inserir as tags <body> </body>. Todo o conteúdo que será exibido ao usuário ficará dentro dessas duas tags:
<!DOCTYPE html>
<html>
<head>
<title>O melhor biscoito</title >
</head>
<body>
Título do texto do anúncio: A melhor experiência da sua vida.
Subtítulo: Não se trata de um biscoito, mas da evolução do seu paladar.
Texto: Desde muito tempo a gastronomia deixou de ser apenas um recurso para uma alimentação saudável. Ela é agora a busca incansável da combinação perfeita entre aquilo que é essencial para a vida humana, que é uma boa alimentação, e uma experiência extremamente agradável na hora da alimentação.
</body>
</html>
Agora precisamos organizar o conteúdo do site.
A tag <h1> determina o título do conteúdo que será exibido para o usuário, por isso ela tem a fonte de texto maior do que das outras (<h2>, <h3>, <h4>...). Todos também usam as tags de fechamento: </h1>:
<h1> A melhor experiência da sua vida.</h1>Podemos então usar <h2> como o nosso subtítulo por ser uma fonte de texto menor:
<h2> Não se trata de um biscoito, mas da evolução do seu paladar.</h2>Para que o texto do nosso anúncio seja bem organizado colocaremos parágrafos usando as tags <p> </p> e mudamos para outra linha quando necessário.
Então toda vez que formos começar um parágrafo é necessário usar a tag <p>.
Da mesma forma, quando fomos apenas mudar de linha, utilizaremos a tag <br>. Essa tag é um outro exemplo de tag que não precisa de outra para fechar.
Desta forma, todo o nosso conteúdo ficará assim:
<!DOCTYPE html>
<html>
<head>
<title>O melhor biscoito</title >
</head>
<body>
<h1>A melhor experiência da sua vida.</h1>
<h2>Não se trata de um biscoito, mas da evolução do seu paladar.</h2>
<p>Desde muito tempo a gastronomia deixou de ser apenas um recurso para uma alimentação saudável. Ela é agora a busca incansável da combinação perfeita entre aquilo que é essencial para a vida humana, que é uma boa alimentação, e uma experiência extremamente agradável na hora da alimentação.
<br>Então, não deixe para amanhã aquilo que você pode vivenciar hoje. Torne o agora a véspera da sua segunda maior experiência gastronômica, porque amanhã você vai pedir bis </p>
</body>
</html>
Observe que houve um acréscimo ao texto para usarmos a tag <br>.
Esses foram os códigos utilizados:
<!DOCTYPE html>
<html>
<head>
<title></title>
<head/>
<body>
<p>
<br>
</p>
<body>
<html>
Agora você já sabe, de maneira eficaz, a execução do seu primeiro código de programação, tudo de um modo totalmente intuitivo e dinâmico. De uma maneira simples, você transformou a sua curiosidade em um conhecimento que é amplamente requisitado pelo mercado de trabalho.
Seja no seu processo de transição de carreira ou na sua primeira qualificação profissional, a DevMedia é a sua melhor opção para ter a melhor experiência no seu desenvolvimento como programador.
Seja agora um dos profissionais mais requisitados do mercado de trabalho.
Seja família DEV.
