Education Ecosystem Blog

Tutorial para iniciantes no HTML (parte 1)

HTML (HyperText Markup Language) é a primeira linguagem que você precisará aprender se quiser criar aplicações web. Mesmo se você não estiver levando programação a sério ou apenas querendo conhecer um pouco de programação, o HTML é um bom lugar para começar.

Para iniciantes, aprender HTML pode ser fácil. No entanto, ele fica complicado quando você combina outras estruturas como CSS ou JavaScript. Para criar uma aplicação de qualidade, você precisa de um bom entendimento de HTML.

Ao longo dos últimos 23 anos, desde a versão inicial do HTML foi lançada, a linguagem evoluiu para o HTML5, a versão mais recente, e está constantemente a ser atualizada para novos padrões. Você pode ir para a nossa página sobre HTML para aprender mais e descobrir livros, conferências, gurus e muito mais.

Na primeira parte do tutorial, vamos aprender como começar.

Linguagem de marcação

Um equívoco comum, HTML5 não é uma linguagem de programação. É uma linguagem de marcação. As linguagens de marcação são usadas para processar informações e fornecer orientação sobre como essa informação é representada. Os símbolos de marcação são usados para exibir o conteúdo na World Wide Web. As tags HTML servem para tratar diferentes tipos de informações, como texto, vídeo, áudio, etc.

Para obter uma compreensão clara, você pode comparar linguagem de marcação HTML com um editor de texto em que você pode colocar negrito, itálico, grande, pequeno, etc.

A tag em HTML é onde toda a diversão começa. Vejamos um exemplo.

Killer Frost não é [italics]mal[/italics]. Como você pode ver, usamos uma tag de entrada e uma tag de saída para colocar o texto em itálico. As tags adicionam formatação ao texto sem adicionar qualquer funcionalidade a ele.

Se não é uma linguagem de programação, como colocar HTML no currículo?

Uma das perguntas que os novatos têm é onde pôr HTML no currículo se não é ima linguagem de programação. A melhor maneira é listar em tecnologias, juntamente com todas as outras tecnologias que você aprendeu. Por exemplo, você também pode listar Git sob tecnologias. Não sei sobre Git? Leia mais aqui.

Hipertexto

Agora, o que isso significa? Cunhado por Ted Nelson em 1965, o termo “Hipertexto” significa simplesmente texto contendo um link. O termo tornou-se popular durante os estágios iniciais da World Wide Web. Uma vez que cada página da web está conectada com outras usando hiperlink, é fácil entender de onde vem essa parte do HTML.

Outro termo-chave que você precisa saber é “HTTP”. HTTP significa HyperText Transfer Protocol, que manipula os dados transferidos entre o servidor e a página web.

Hello, World!

Certo, chega de teoria! Vamos mergulhar profundamente em alguns exemplos. Vamos abordar os conceitos importantes e explicá-los por meio de algum código como exemplo.

O que você vai precisar?

Tudo o que você precisa é de um editor de texto e de um navegador como o Google Chrome, o Mozilla Firefox ou o Edge.

Primeiro, crie um novo arquivo de texto e nomeie-o “index.html”.

O arquivo irá funcionar seja com uma extensão .html ou .htm, mas vamos ficar com .html.

Agora, copie e cole o código abaixo no arquivo index.html.

<!DOCTYPE html>

<html lang="en">

  <head>

      <meta charset="utf-8">

      <title>Hello World</title>

  </head>

  <body>

      <h1>Hello, World!</h1>

  </body>

</html>

Se você for novo no HTML, você pode estar confuso sobre todo esse código. Não se preocupe, vamos passar por cada linha para você entender. No entanto, antes de começar, precisamos entender o conceito de elementos HTML e tags.

Elementos e Tags HTML

Os elementos são os blocos de construção do HTML. Há muitos elementos em HTML como strong, anchor, img, etc.

Tags, por outro lado, ajudar a construir os elementos. Em HTML, a maioria dos elementos tem um par de tags – uma para iniciar outra para fechar. Vamos dar uma olhada no exemplo acima.

<h1>Hello World</h1>

O <h1> é a tag de abertura, enquanto que </h1> é a tag de fechamento. Essas tags, juntamente com o conteúdo entre elas, constituem um elemento. Neste caso, a marca <h1> está pré-definida e define o tamanho da fonte, o estilo, a cor, etc., para o texto que o segue, até atingir a marca final </h1>.

Além disso, a tag de abertura pode conter atributos que modificam o comportamento do elemento como um todo. Os atributos são uma maneira divertida de personalizar cada elemento. Por exemplo, a tag anchor assume o atributo “href” para vincular a outra página, no mesmo site ou em um site externo.

<a href=”https://livecoding.tv”> This anchor tag links to the Livecoding.tv </a>

Similarmente, as tags <img> requerem atributo src para mencionar a origem da imagem. Como você pode ver, alguns atributos são obrigatórios, enquanto outros não. Vamos ver um exemplo de um atributo que não é absolutamente obrigatório de usar.

<a href=”https://livecoding.tv” target=”_blank”> This anchor tag links to the Livecoding.tv </a>

Os atributos Target=”_blank” permitem que o link abra em uma nova guia em vez de abrir na mesma. Você pode encontrar toda a lista de anchor tags aqui.

Nota: Algumas tags são de fechamento automático e não requerem uma tag de fechamento. Por exemplo, <br/> que insere uma linha de interrupção.

Agora, que entendemos o conceito de elementos e tags, vamos revisitar o código Hello, World!

<!DOCTYPE html>

<html lang="en">

  <head>

      <meta charset="utf-8">

      <title>Hello World</title>

  </head>

  <body>

      <h1>Hello, World!</h1>

  </body>

</html>

<!DOCTYPE html> informa ao navegador que o código está em HTML 5.

Cada página HTML começa a partir da tag <html>. Todo o conteúdo dessa página deve estar dentro dessa tag. Assim, a última tag da página será </html>.

A tag <head> especifica as informações gerais sobre a página da Web. Ela contém as tags <meta> e <title>. Cada página HTML deve conter isso.

A tag <body> contém o conteúdo da página HTML. Cada página HTML deve conter esta etiqueta.

A tag <h1> simplesmente coloca o “Hello, World!” Na página web.

Isso nos leva ao final da parte 1. Fique atento para a parte 2.

Dr. Michael J. Garbade

I, Dr. Michael J. Garbade is the co-founder of the Education Ecosystem (aka LiveEdu), ex-Amazon, GE, Rebate Networks, Y-combinator. Python, Django, and DevOps Engineer. Serial Entrepreneur. Experienced in raising venture funding. I speak English and German as mother tongues. I have a Masters in Business Administration and Physics, and a Ph.D. in Venture Capital Financing. Currently, I am the Project Lead on the community project -Nationalcoronalvirus Hotline I write subject matter expert technical and business articles in leading blogs like Opensource.com, Dzone.com, Cybrary, Businessinsider, Entrepreneur.com, TechinAsia, Coindesk, and Cointelegraph. I am a frequent speaker and panelist at tech and blockchain conferences around the globe. I serve as a start-up mentor at Axel Springer Accelerator, NY Edtech Accelerator, Seedstars, and Learnlaunch Accelerator. I love hackathons and often serve as a technical judge on hackathon panels.