Faça isso e crie o primeiro código de programação

Hoje você descobrirá e executará o caminho que TODOS os programadores trilharam. Ao terminar de ler este artigo você conseguirá executar um projeto de programação, sabe por quê?

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

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.

Artigos relacionados