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

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.

Linguagem precisa ser interpretada

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>.

Tem casa com 2 portas. As vezes 1 só

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.

Vem ser Família Dev

Seja agora um dos profissionais mais requisitados do mercado de trabalho.

Seja família DEV.