Introdução ao HTML

11/07/2016/172 Comentários/em Programação /por Bianca Sonnewend

HTML é uma linguagem de programação muito importante para quem quer ter noção do que é desenvolvimento web. É a linguagem mais básica para iniciantes. Pode fazer muita diferença no seu site (devido ao SEO) e também ajuda na parte de marcação do texto (<h1>, <h2> etc). Continue lendo para entender melhor esse assunto.

Essa série, denominada “Introdução à Desenvolvimento Web“, será dividida em 5 partes, sendo essa a primeira sobre “Introdução ao HTML” e as outras:

HTML
CSS
PHP
MySQL
Javascript

Importância da programação

programação html

A programação está em tudo hoje em dia: seu celular, seu computador, Facebook, WhatsApp, entre tantos outros lugares. Então, por que todo mundo não sabe programar ainda? Aprender a programar pode parecer um inferno (~~eu que o diga!~~), mas é essencial para facilitar sua vida.

Imagine um mundo sem programação… Você não iria conseguir nem estar lendo esse texto agora caso esse site não tivesse sido programado, assim como não iria acessar site algum caso o seu sistema operacional (Android, iOs, Windows etc.) não tivesse sido programado. Então, programação é essencial pois é um jeito de automatizar processos e criar mecanismos de informação.

Programar é instruir um interpretador que gera uma saída final. De uma forma bem mais simples e menos correta, seria como dizer para o computador o que você deseja que seja feito em forma de código. Caso o código esteja correto, o mesmo será executado e o computador cumprirá a tarefa.

Introdução ao HTML: o que é?

html básico

HTML é, literalmente, HyperText Markup Language. É uma linguagem de marcação utilizada durante a construção de sites. Um arquivo do tipo .html é interpretado pelo navegador (Internet Explorer, Google Chrome, Mozilla Firefox etc.). Ele pode ser criado em qualquer editor de texto, como o Bloco de Notas do Windows, Notepad++ (gratuito) e Sublime (gratuito porém com funções pagas). Lembre-se sempre de salvar o arquivo em .html, pois, caso contrário, o mesmo não irá abrir no navegador.

Exemplos de Tags

Existem inúmeras tags html úteis, ainda mais agora com o HTML5. Confira abaixo uma lista útil que você utilizará no seu cotidiano de programação.

<html>

Antes de tudo, você deve criar a <html> para envolver todo o conteúdo que colocará dentro dela. Não esqueça de fechá-la. Você pode fazer isso sempre usando a tag que acabou de escrever com um / antes da palavra principal. Ou seja, para fechar a <html>, você utilizará a seguinte tag: </html>.

<head>

É o cabeçalho do seu documento. Nele podem ser colocados várias tags, como <title>, que é o título da sua página, <meta>, que são informações gerais sobre seu arquivo, e <link>, que utiliza fontes externas de estilo (isso será aprofundado no post de CSS). A tag <head> deve ser fechada: </head>.

<header>

É efetivamente a parte do cabeçalho visual do seu documento. Para não repetir, considere sempre que toda tag que foi aberta deve ser fechada. Então, para fechar <header>, usa </header>.

<body>

É o corpo do seu documento.

<p> e <br>

A primeira cria um parágrafo e a segunda cria uma quebra de linha. Caso queira mais detalhes, leia sobre a diferença entre os dois aqui.

<div> e <section>

Essas tags definem uma divisão e seção, respectivamente. Vale ressaltar que <div> não é a mesma coisa que <section>, por mais que ambas sejam “display: block;“, o que significa que o conteúdo seguinte virá abaixo da tag.

<article>

A tag <article> é geralmente colocada dentro das tags <section>, explicadas acima. Ela serve para dividir as seções em artigos. Essa tag também é “display: block;“.

<span>

A tag <span> é utilizada para textos e possui uma peculiaridade, que é “display: inline;“, o que significa que se ela for colocada dentro de uma tag <p> (parágrafo) que é “display: block;”, ela não quebrará a linha. Pode ser usada para destaques que não são tão relevantes. Exemplo: queremos destacar a palavra João. Isso é possível a partir do CSS, que será explicado mais adiante.

<img>

Essa tag serve para colocar uma imagem na sua página. Existem três propriedades importantes, sendo que apenas uma delas é obrigatória para fazer sua imagem de fato aparecer:

src: é o caminho da imagem que você quer exibir. Essa é a propriedade obrigatória, pois a partir dela o navegador entenderá qual imagem será exibida.
alt: serve para ajudar os robôs dos mecanismos de busca à “ler” sua imagem.
title: é o título da imagem e pode ajudar no SEO também.

<footer>

O <footer> é o rodapé do seu documento, que geralmente contêm informações como copyright ou contato.

Essas tags são apenas as mais básicas possíveis para ajudar na introdução ao HTML. Existem várias outras que auxiliam nesse processo. Caso queira descobrir mais algumas, confira aqui.

HTML e Marketing

o que é programação

Essa linguagem é muito utilizada na internet quando o foco é marketing na web, mas, devido ao foco desse post ser uma introdução ao HTML, vamos nos limitar à usos mais gerais. Confira algumas utilizações:

Produção de email marketing

Os principais serviços de email possuem um bloqueio de segurança para exibição de imagens em emails. Logo, o HTML facilita o processo de leitura e abertura de emails promocionais. Logo, o email em HTML é aquele tipo de email que apresenta elementos da linguagem de hipertexto, como links e imagens que não estão anexas à mensagem e sim são exibidas no corpo do email.

SEO

SEO é Search Engine Optimization. O foco do SEO é melhorar seu ranking nas páginas do Google, de forma que, quando a pessoa pesquisar alguma palavra-chave relacionada à sua empresa, ela consiga achar de fato seu site caso apareça nas páginas principais. Esse post que você está lendo agora faz uso de práticas de SEO. Confira algumas delas:

Uso de Heading Tags

Heading Tags são recursos do HTML para SEO. Para utilizar corretamente essas Tags, você deve ter em mente que a tag <h1> é usada com a ideia principal da página, <h2> é usada para os elementos da ideia principal da página, <h3> é usada para dividir os elementos ainda mais (geralmente utilizada em listas), e assim por diante (você pode usar <h1> até <h6>) . É uma ótima prática utilizar essas heading tags pois o mecanismo de busca conseguirá ler com mais precisão os assuntos que você aborda em seus posts e, assim, rankear corretamente sua página. Está vendo acima onde está escrito “SEO“? Utilizamos a tag <h3>. Já onde está escrito “Uso de Heading Tags“, utilizamos a tag <h4>.

Hyperlinks

Hyperlinks são utilizados com a tag <a href=”url“>texto</a>. Exemplo visual: home da Arquitetos da Criatividade (o código é <a href=”www.arquitetosdacriatividade.com.br”>home da Arquitetos da Criatividade</a>). Hyperlinks ajudam sua página a dar crédito para outras pessoas que contribuiram no seu texto, linkar para outras fontes confiáveis ou enviar o leitor para sites parceiros. Outro meio de utilizar esses links é a partir do link building, que é uma técnica para fazer outras pessoas direcionarem usuários para seu site à partir de hyperlinks. Seja qual for a técnica utilizada, todas são válidas para ajudar no ranking do Google e outros mecanismos de busca.

Imagens

Mecanismos de buscas não conseguem ver imagens e, por isso, você deve dizer o que sua imagem representa para ele. Para isso, você precisa utilizar um texto alternativo (alt text) com sua palavra chave. Exemplo: <img scr=”url” alt=”palavra-chave“>.

Exercício Prático de HTML: mãos na massa!

introdução à desenvolvimento web

Vamos fazer um exercício para você pôr em prática todo o conteúdo aprendido durante essa primeira parte da introdução ao HTML.

Abra o Bloco de Notas no Windows ou o TextEdit (Editor de Texto) no Mac. Caso quiser, pode baixar o Notepad++ e fazer o processo abaixo no programa.
Salve o documento com o nome index.html na pasta de sua preferência.
Dentro do mesmo, copie manualmente ou cole o código abaixo:
<!DOCTYPE HTML>
<html>
<head>
<title>Título</title>
</head>
<body>
<h1>Agora eu sei programar em HTML!</h1>
<h2>E esse foi meu primeiro site!</h2>
</body>
</html>
Abra a pasta em que seu arquivo está salvo e selecione o arquivo com o botão direito do mouse para “Abrir com…” o navegador de sua preferência (Internet Explorer, Google Chrome, Mozilla Firefox etc.).