HTML5

HTML Básico – Atributos

Essa é a parte 4 de 16 na série HTML

Agora que já entendemos um pouco sobre os elementos HTML, chegou a hora de falar um pouco sobre os atributos.

A primeira coisa que você precisa saber é que os atributos servem para definir características ou propriedades ao elemento, como largura, altura ou a localização de uma imagem.

Lembra que falamos sobre as tags de abertura e falamos também sobre tags vazias?

Então, os atributos vão sempre nessas tags, ou seja, nunca vamos colocar atributos nas tags de fechamento.

Outro detalhe importante é que os atributos geralmente são definidos por um nome e um valor (nome="valor") que deve ser colocado entre aspas.

Enquanto há tags que não precisam de nenhum atributo para funcionar, outras exigem que sejam definidos alguns atributos.

Por exemplo, é o caso da tag de imagem <img> que deve conter pelo menos os atributos src e alt.

Aqui estão alguns elementos com seus atributos:

<img src="images/nomedaimagem.png" width="30" height="30" alt="Identificação Qualquer">
<a href="https://www.google.com/" title="Vá para o Google">Google</a>
<abbr title="Hyper Text Markup Language">HTML</abbr>
<input type="text" name="nome" value="João da Silva">

É interessante notar que as páginas web podem carregar elementos, as vezes usando o atributo src(source), e linkar usando o atributo hrefdentro da tag <a>.

Você pode usar aspas simples ou duplas para definir atributos, mas o padrão é usar duplas. Em casos onde o atributo possa ter aspas, use aspas simples – Por Exemplo: value=’João “Jr” da Silva’

Se você prestou atenção, eu disse que os atributos geralmente possuem nome e valor, mas há atributos que possuem apenas um nome, tendo um valor intrínseco.

Portanto, esses atributos são chamados de booleanos – Ou seja, se estão presentes passam um valor “true” (verdadeiro).

Os principais atributos booleanos são checked, disabled, readonly, required, etc – Vale notar que são termos em inglês bem associativos.

Então, aqui estão alguns exemplos desses tipos de atributos:

<input type="email" required>
<input type="submit" value="Enviar" disabled>
<input type="checkbox" checked>
<input type="text" value="Somente leitura" readonly>

Não se preocupe em memorizar todos e também falaremos mais sobre atributos nos próximos conteúdos.

Os valores dos atributos não distinguem maiúsculas e minúsculas mas, por padronização (W3C), recomenda-se usar minúsculas. Vale dizer que existem poucas exceções, como é o caso dos valores para o atributo `class`.

Atributos de uso geral

Existem certos atributos que são meio que universais, podem ser usados na maioria dos elementos HTML, como vou te mostrar agora.

O atributo id

O atributo id, de forma bem óbvia, é um identificador (geralmente exclusivo) para um elemento em um documento HTML.

Esse atributo é muito utilizado para seleção de elementos quando usamos CSS ou JavaScript.

Aqui estão uns exemplos:

<input type="text" id="nome">
<div id="conteudo">Algum conteúdo aqui</div>
<p id="info">Isso é um parágrafo.</p>

É importante dizer que o correto é esse id ser exclusivo, ou seja, não se deve ter mais de um elemento com o mesmo id.

O atributo class

Assim como vimos no atributo id, o class geralmente é usado para identificar um elemento, com a principal diferença de não precisar ser exclusivo.

Portanto, você pode definir um atributo de classe para selecionar ou “agrupar” vários elementos em um documento HTML, como a seguir:

<input type="text" class="highlight">
<div class="box highlight">Conteúdo em texto</div>
<p class="highlight">Um parágrafo de texto.</p>

Como o class não é um atributo exclusivo, podemos usá-lo, por exemplo, para aplicar um estilo a todos os elementos que possuem a mesma classe, como a cor do texto.

O atributo title

Como o próprio nome indica, ele é usado para fornecer um texto consultivo, ou seja, quando você passa o cursor em cima do elemento com title seu valor é mostrado.

Aqui estão alguns exemplos:

<abbr title="World Wide Web Consortium">W3C</abbr>
<a href="cursos/curso-html-5.html" title="Clique para acessar o curso">
    <img src="imagens/html-5.jpg" alt="HTML5">
</a>

O atributo style

Esse atributo é interessante porque permite que você defina estilos CSS diretamente no elemento HTML.

Aqui estão exemplos de uso:

<p style="color: blue;">Esse texto vai ficar azul!</p>
<img src="imagens/sky.jpg" style="width: 300px;" alt="Imagem de Núvens com 300px de largura">
<div style="border: 1px solid red;">Conteúdo com uma borda vermelha</div>

Vamos aprender bastante sobre atributos e sobre estilização de elementos HTML nas próximas aulas.

Então, acabamos de ver alguns atributos globais, se você quiser conhecer outros, verifique a Referência de Atributos Globais.

Para ver a lista completa das tags/elementos HTML, veja a Referência de Tags HTML5.

HTML5

HTML Referência – Tags/Elementos

Essa é a parte 16 de 16 na série HTML

Vou te dar a seguir um guia de referência para as tags utilizadas no HTML5 e também no XHTML1.1, em ordem alfabética:

MarcaçãoDescrição
<a>Define um hiperlink.
<abbr>Define uma forma abreviada de uma palavra ou frase mais longa.
<acronym>:obsoleto: Define uma sigla. Use em seu <abbr>lugar.
<address>Especifica as informações de contato do autor.
<applet>:obsoleto: Incorpora um miniaplicativo Java (mini aplicativos Java) na página. Use em seu <object>lugar.
<area>Define uma área específica dentro de um mapa de imagem.
<article> [newh5]Define um artigo.
<aside>  [newh5] Define algum conteúdo vagamente relacionado ao conteúdo da página.
<audio>  [newh5] Incorpora um som ou fluxo de áudio em um documento HTML.
<b>Exibe o texto em negrito.
<base>Define a URL base para todas as URLs relativas em um documento.
<basefont>:obsoleto: Especifica a fonte básica de uma página. Em vez disso, use CSS.
<bdi>  [newh5] Representa o texto isolado de seu entorno para fins de formatação de texto bidirecional.
<bdo>Substitui a direção do texto atual.
<big>:obsoleto: Exibe o texto em tamanho grande. Em vez disso, use CSS.
<blockquote>Representa uma seção citada de outra fonte.
<body>Define o corpo do documento.
<br>Produz uma única quebra de linha.
<button>Cria um botão clicável.
<canvas>  [newh5] Define uma região no documento, que pode ser usada para desenhar gráficos dinamicamente por meio de scripts (geralmente JavaScript).
<caption>Define a legenda ou título da tabela.
<center> :obsoleto: Alinhe o conteúdo no centro. Em vez disso, use CSS.
<cite>Indica uma citação ou referência a outra fonte.
<code>Especifica o texto como código de computador.
<col>Define valores de atributo para uma ou mais colunas em uma tabela.
<colgroup>Especifica atributos para várias colunas em uma tabela.
<data>  [newh5] Vincula uma parte do conteúdo a uma tradução legível por máquina.
<datalist>  [newh5] Representa um conjunto de opções predefinidas para um <input>elemento.
<dd>Especifica uma descrição ou valor para o termo ( <dt>) em uma lista de descrição ( <dl>).
<del>Representa o texto que foi excluído do documento.
<details>  [newh5] Representa um widget do qual o usuário pode obter informações adicionais ou controles sob demanda.
<dfn>Especifica uma definição.
<dialog> [newh5] Define uma caixa de diálogo ou subjanela.
<dir>:obsoleto: Define uma lista de diretórios. Use em seu <ul>lugar.
<div>Especifica uma divisão ou seção em um documento.
<dl>Define uma lista de descrição.
<dt>Define um termo (um item) em uma lista de descrição.
<em>Define o texto enfatizado.
<embed>  [newh5] Incorpora aplicativos externos, normalmente conteúdo multimídia, como áudio ou vídeo, em um documento HTML.
<fieldset>Especifica um conjunto de campos de formulário relacionados.
<figcaption>  [newh5] Define uma legenda ou legenda para uma figura.
<figure>  [newh5] Representa uma figura ilustrada como parte do documento.
<font>:obsoleto: Define a fonte, a cor e o tamanho do texto. Em vez disso, use CSS.
<footer>  [newh5] Representa o rodapé de um documento ou seção.
<form>Define um formulário HTML para entrada do usuário.
<frame>:obsoleto: Define um único quadro em um conjunto de quadros.
<frameset>:obsoleto: Define uma coleção de quadros ou outro conjunto de quadros.
<head>Define a parte principal do documento que contém informações sobre o documento, como título.
<header>  [newh5] Representa o cabeçalho de um documento ou seção.
<hgroup>  [newh5] Define um grupo de títulos.
<h1> to <h6>Define cabeçalhos HTML.
<hr>Produza uma linha horizontal.
<html>Define a raiz de um documento HTML.
<i>Exibe o texto em estilo itálico.
<iframe>Exibe um URL em um quadro embutido.
<img>Representa uma imagem.
<input>Define um controle de entrada.
<ins>Define um bloco de texto que foi inserido em um documento.
<kbd>Especifica o texto como entrada do teclado.
<keygen>  [newh5] Representa um controle para gerar um par de chaves pública-privada.
<label>Define um rótulo para um <input>controle.
<legend>Define uma legenda para um <fieldset>elemento.
<li>Define um item da lista.
<link>Define a relação entre o documento atual e um recurso externo.
<main>  [newh5] Representa o conteúdo principal ou dominante do documento.
<map>Define um mapa de imagem do lado do cliente.
<mark>  [newh5] Representa o texto destacado para fins de referência.
<menu>Representa uma lista de comandos.
<menuitem>  [newh5] Define uma lista (ou item de menu) de comandos que um usuário pode executar.
<meta>Fornece metadados estruturados sobre o conteúdo do documento.
<meter>  [newh5] Representa uma medição escalar dentro de um intervalo conhecido.
<nav>  [newh5] Define uma seção de links de navegação.
<noframes>:obsoleto: Define um conteúdo alternativo que é exibido em navegadores que não oferecem suporte a frames.
<noscript>Define conteúdo alternativo a ser exibido quando o navegador não oferece suporte a scripts.
<object>Define um objeto incorporado.
<ol>Define uma lista ordenada.
<optgroup>Define um grupo de opções relacionadas em uma lista de seleção.
<option>Define uma opção em uma lista de seleção.
<output>  [newh5] Representa o resultado de um cálculo.
<p>Define um parágrafo.
<param>Define um parâmetro para um objeto ou elemento de miniaplicativo.
<picture>  [newh5] Define um contêiner para várias fontes de imagem.
<pre>Define um bloco de texto pré-formatado.
<progress>  [newh5] Representa o andamento da conclusão de uma tarefa.
<q>Define uma cotação curta inline.
<rp>  [newh5] Fornece parênteses de fallback para navegadores que não suportam anotações Ruby.
<rt>  [newh5] Define a pronúncia do caractere apresentado nas anotações de rubi.
<ruby>  [newh5] Representa uma anotação de rubi.
<s>Representa conteúdos que não são mais precisos ou relevantes.
<samp>Especifica o texto como saída de amostra de um programa de computador.
<script>Coloca script no documento para processamento do lado do cliente.
<section>  [newh5] Define uma seção de um documento, como cabeçalho, rodapé etc.
<select>Define uma lista de seleção em um formulário.
<small>Exibe o texto em um tamanho menor.
<source>  [newh5] Define recursos de mídia alternativos para os elementos de mídia como <audio>ou <video>.
<span>Define uma seção sem estilo embutida em um documento.
<strike>:obsoleto: Exibe o texto em estilo tachado.
<strong>Indique texto fortemente enfatizado.
<style>Insere informações de estilo (comumente CSS) no cabeçalho de um documento.
<sub>Define o texto subscrito.
<summary>  [newh5] Define um resumo para o <details>elemento.
<sup>Define o texto sobrescrito.
<svg>  [newh5] Incorpore conteúdo SVG (Scalable Vector Graphics) em um documento HTML.
<table>Define uma tabela de dados.
<tbody>Agrupa um conjunto de linhas que definem o corpo principal dos dados da tabela.
<td>Define uma célula em uma tabela.
<template>  [newh5] Define os fragmentos de HTML que devem ser ocultados quando a página é carregada, mas podem ser clonados e inseridos no documento por JavaScript.
<textarea>Define um controle de entrada de texto de várias linhas (área de texto).
<tfoot>Agrupa um conjunto de linhas que resumem as colunas da tabela.
<th>Define uma célula de cabeçalho em uma tabela.
<thead>Agrupa um conjunto de linhas que descreve os rótulos das colunas de uma tabela.
<time>  [newh5] Representa uma hora e / ou data.
<title>Define um título para o documento.
<tr>Define uma linha de células em uma tabela.
<track>  [newh5] Define faixas de texto para os elementos de mídia como <audio>ou <video>.
<tt>:obsoleto: Exibe o texto em um estilo teletipo.
<u>Exibe o texto com um sublinhado.
<ul>Define uma lista não ordenada.
<var>Define uma variável.
<video>  [newh5] Incorpora conteúdo de vídeo em um documento HTML.
<wbr>  [newh5] Representa uma oportunidade de quebra de linha.
HTML5

HTML Referência – Atributos Globais

Essa é a parte 15 de 16 na série HTML

Aprendemos que muitos elementos têm atributos específicos, mas aqui vai uma lista dos atributos chamados de globais que podem ser utilizados na maioria dos elementos HTML.

Vale dizer que em alguns lugares esses atributos são irrelevantes como nas tags que ficam na seção <head> do documento, por exemplo, <script>, <title>, etc.

AtributoValorDescrição
accesskeytecla de atalhoEspecifica um atalho de teclado para ativar ou focar o elemento.
classnome da classeAtribui um nome de classe ou lista separada por espaço de nomes de classe a um elemento.
contenteditabletrue
false
Indica se o conteúdo de um elemento pode ser editado pelo usuário ou não.
contextmenumenu-idEspecifica um menu de contexto para um elemento. Um menu de contexto é um menu que aparece quando o usuário clica com o botão direito do mouse no elemento.
data-*dadosEspecificado em qualquer elemento HTML, para armazenar dados personalizados específicos da página.
dirltr
rtl
Especifica a direção básica da direcionalidade do texto do elemento.
draggabletrue
false
Especifica se um elemento pode ser arrastado ou não.
dropzonecopy
move
link
Especifica se os dados arrastados são copiados, movidos ou vinculados, quando soltos.
hiddenhiddenIndica que o elemento ainda não é ou não é mais relevante.
idnomeEspecifica um identificador único (ID) para um elemento que deve ser único em todo o documento.
langcódigo de linguagemEspecifica o idioma principal para o conteúdo de texto do elemento.
spellchecktrue
false
Especifica se o elemento pode ser verificado em busca de erros ortográficos ou não.
styleestiloEspecifica informações de estilo embutido para um elemento.
tabindexnúmeroEspecifica a ordem de tabulação de um elemento.
titletextoFornece informações consultivas relacionadas ao elemento. Seria apropriado para uma dica de ferramenta.
translateyes
no
Especifica se o conteúdo do texto de um elemento deve ser traduzido ou não.
xml:langcódigo de linguagemEspecifica o idioma principal para o conteúdo de texto do elemento, em documentos XHTML.
Introdução ao HTML5

HTML Básico – Elementos

Essa é a parte 3 de 16 na série HTML

Continuando nosso estudo, agora que você sabe sobre a extensão, sobre o tipo de documento (Doctype) e sabe das tags de marcação dos elementos, vamos evoluir esse conhecimento.

Uma informação útil antes: Você já ouviu falar em sintaxe, certo?

No estudo da língua (idioma), é o estudo das regras que regem a construção de frases e é a parte da gramática que estuda a disposição das palavras na frase e das frases no discurso

Além disso, a sintaxe tem a ver com a relação lógica, entre as múltiplas combinações possíveis para transmitir um significado completo e compreensível.

Dito isso, nas linguagens de marcação e também de programação utilizamos esse termo “sintaxe” para determinar como a linguagem funciona, digamos assim.

Vou dar um exemplo pra você entender melhor, mas saiba também que um elemento HTML é um componente individual de um documento HTML.

Portanto, considerando a sintaxe, dizemos que esses elementos HTML representam a semântica ou significado.

Sintaxe do HTML

Por exemplo, vimos o elemento <title> que representa o título do documento.

Como já vimos também, a maior parte dos elementos HTML são dispostos com uma tag de início ou abertura, e outra de finalização ou fechamento.

Assim, entre essas tags temos um conteúdo que está diretamente associado ao contexto da tag.

É importante dizer também que essas tags podem conter o que chamamos de atributos que são usados para definir as propriedades do elemento.

Por exemplo, vimos que um parágrafo é definido pela tag <p> e poderíamos ter um atributo class que usamos para definir estilos, então ficaria assim:

Não se preocupe, no próximo post vamos falar um pouco mais sobre esses tais atributos.

Mas, como você pode ver na imagem, temos um elemento parágrafo que tem um atributo de classe (class), que possui o valor “texto-comum”.

Ou seja, dizemos que a classe desse parágrafo é “texto-comum”.

Obviamente, se eu disse que a maioria dos elementos HTML possui tag de abertura e fechamento, significa que alguns não precisam ser fechados.

Esses elementos que possuem somente uma tag são geralmente chamados de elementos vazios ou elementos de fechamento automático.

Tags HTML ou Elementos?

Talvez você tenha ficado confuso sobre essas nomenclaturas mas, tecnicamente, um elemento HTML é o conjunto composto pela tag de abertura, atributos, tag de fechamento entre outras coisas.

Contudo, você não comete nenhum pecado se chamar tudo de elemento HTML ou tag HTML, porque são termos intercambiáveis.

Já ouviu falar em Case-sensitive? Então vamos lá…

Diferenciação Maiúsculas e Minúsculas

Case-sensitive é um anglicismo que se refere a um tipo de análise tipográfica da informática.

Em língua portuguesa, significa algo como “sensível à caixa das letras” ou “sensível a maiúsculas e minúsculas”.

Calma, não quero abusar do seu português, só comparando termos…

O que eu quero dizer aqui é que os nomes das tags e seus atributos não diferenciam maiúsculas e minúsculas, mas os valores dos atributos sim.

Desse modo <p> ou <P> funcionam da mesma forma, mas class=”texto-comum” é diferente de class=”Texto-Comum”.

Para seguir um padrão, recomendo que você sempre use tags e atributos com letras minúsculas, até para padronizações de código.

Elementos HTML Vazios

Lembra que falamos deles? Então, vamos entender um pouquinho mais…

Esses elementos também chamados de tags de fechamento automático ou até nulos, não são tags de contêiner – isso significa que não têm conteúdo entre tags de abertura e fechamento.

Então, para ficar mais claro, vou te mostrar alguns elementos que não precisam de tags de fechamento.

Por exemplo, temos a tag <br> que é utilizada para quebrar linhas, mas há diversas outras como <img>, <input>, <link>, <meta>, <hr> e outras que você vai conhecer.

Um pequeno trecho HTML para fixar o conceito:

<p>Esse parágrafo contém <br> uma quebra de linha (line-break).</p>
<img src="/wp-content/uploads/2019/02/logo_am_300x87_gradiente-1.png" alt="Texto Representativo">
<br>
<input type="text" name="nome">
<hr>

Resultado:

Esse parágrafo contém
uma quebra de linha (line-break).

Texto Representativo

Perceba que temos 3 tags que não precisam de fechamento e que possuem os tais atributos que falamos – você vai perceber que são quase sempre em inglês.

Em teoria, você pode criar seus próprios atributos, mas esses atributos clássicos garantem que a tag HTML funcione e seja interpretada da forma correta – Sintaxe.

Aninhamento de Elementos HTML

A maioria dos elementos HTML podem ser aninhados, ou seja, podem estar dentro de outro – exceto, é claro, os elementos vazios.

Assim sendo, poderíamos representar essa aninhamento da seguinte forma:

<p>Aqui vai um parágrafo com um <b>Texto em Negrito</b> aninhado</p>
<p>Aqui vai um texto com <em>ênfase ou itálico</em> também aninhado.</p>
<p>Para fechar, aqui vai um <mark>texto destacado</mark> dentro da tag de parágrafo</p>

Resultado:

Aqui vai um parágrafo com um Texto em Negrito aninhado

Aqui vai um texto com ênfase ou itálico também aninhado.

Para fechar, aqui vai um texto destacado dentro da tag de parágrafo

Podemos chamar também esses elementos aninhados de elementos filhos.

Outra informação importante é que você precisa aninhar os elementos da forma correta, não invertendo a ordem os elementos.

Por exemplo, isso estaria correto:

<p><strong>Texto com outra tag que gera Negrito</strong></p>

Aqui vai um trecho com erro na ordem das tags:

<p><strong>Texto com outra tag que gera Negrito</p></strong>

Comentando partes do código HTML

Espero que você lembre que escrevemos um comentário no nosso código HTML usando no início do comentário o <!-- e terminando com -->.

Há diversas razões para você querer fazer comentários nos códigos, especialmente em termos de organização ou para deixar uma informação importante.

Assim, outro desenvolvedor, ou até você mesmo, no futuro poderá ler esses comentários e entender o que estava sendo feito ali.

Contudo, é importante dizer que esses comentário não são mostrados na sua página no navegador.

Aqui vai um trecho que demonstra como funcionam os comentários:

<!-- Isso é um comentário no HTML -->
<!-- Eles podem ter múltiplas linhas
       como você pode notar aqui -->
<p>Isso é um parágrafo normal.</p>

Outra coisa comum de fazermos é querer ocultar alguns elementos temporariamente, e podemos usar os comentário para fazer isso da seguinte forma:

<!-- Vamos ocultar uma imagem?
<img src="caminho/nomeimagem.jpg" alt="Legenda">
Precisamos agora fechar o comentário assim -->

Diferentes tipos de elementos

Os elementos HTML podem ser classificados em grupos e níveis, como níveis de bloco e os que chamamos de inline, que vamos falar mais adiante.

Os elementos de bloco mais utilizados são <div>, <p>, <h1> à <h6>, <form>, <ol>, <ul>, <li>, etc – geralmente esses contém diversos outros elementos aninados formando uma estrutura.

Entre os in-lines mais comuns temos o <img>, <a>, <span>, <strong>, <b>, <em>, <i>, <code>, <input>, <button>, entre outros.

Os elementos de bloco não devem ser colocados dentro de elementos in-line – Ex: Não deve colocar um <p> dentro de um <b>.

Introdução ao HTML5

HTML Básico – Primeiros Passos

Essa é a parte 2 de 16 na série HTML

No post anterior, fiz uma breve introdução ao HTML para que você conhecesse um pouco do conceito e da história dessa linguagem de marcação que é o padrão da web.

Nesse conteúdo, vamos já ir para os primeiros passos e ver como é uma estrutura básica de um documento HTML.

Eu poderia ser bem simplista aqui e dizer que o HTML seria um arquivo de texto, só que salvo com uma extensão .html ou .html.

Se você é muito iniciante, devo dizer que extensão é o sufixo no nome de um arquivo de computador que indica a codificação do seu conteúdo ou uso.

Basicamente, eles servem para identificar o tipo de arquivo, e alguns exemplos comuns incluem .png, .jpeg, .exe, .dmg, .txt, .rar, .iso e .doc.

Sobre a questão de criar arquivos HTML, devo dizer que comecei escrevendo os códigos em folha de caderno, em seguida, passava para um bloco de notas e, por fim, abria-o em um navegador.

Na época que eu comecei era realmente bem simples e usava os navegadores Internet Explorer ou um que se chamava Netscape.

Hoje em dia, você tem editores de código, dos mais simples aos mais complexos, que dão suporte ao desenvolvedor facilitando a codificação.

Você pode usar o próprio blocos de notas do seu sistema operacional, bastando salvar o arquivo como .html ou .htm, em seguida, poderá abrí-lo também no seu navegador favorito.

Se quiser um pouco mais de recursos, pode usar o editor Notepad++ ou o Visual Studio Code.

Muito bem, vamos começar?

Iniciando com o HTML

Nesse segundo post do Curso de HTML, vamos já aprender a criar um documento HTML ou também podemos chamar de página web, se preferir.

Espero que você já tenha se decidido sobre onde vai editar os códigos e já tenha atualizado seu navegador, preferencialmente.

Então, vamos começar abrindo um editor de texto ou de código para criar um novo arquivo em nosso computador.

Ah! Sobre editor de texto, se não quiser instalar nada, use o bloco de notas do Windows ou o TextEdit do Mac, mas não use Word ou Wordpad.

Você vai acompanhar os próximos passos fazendo junto e, no final, terá criado um arquivo HTML que vai exibir a clássica frase da programação “Olá mundo!”.

Chega de papo, vamos codificar…

Abra um documento novo e digite o seguinte código:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <title>Um Simples Documento HTML</title>
</head>
<body>
    <p>Olá mundo!<p>
</body>
</html>

Agora você vai salvar esse arquivo em uma pasta qualquer – recomendo que crie uma pasta para o curso – nomeando esse arquivo de “minha-pagina-01.html”.

Vale dizer que, se você estiver usando o bloco de notas, verifique se em tipo está selecionado “Todos os arquivos”, pois precisamos salvar esse arquivo com a extensão “.html”.

O padrão do bloco de notas é salvar como “.txt”, então, se acontecer, caso não tenha marcado o tipo “todos os arquivos”, poderá salvar novamente (Salvar como) ou, simplesmente renomear o arquivo com a extensão.

Outro detalhe, se você não estiver vendo as extensões dos arquivos na sua pasta, precisará fazer essa pequena configuração:

Windows Explorer > Seu Diretório do Curso > Arquivo > Opções.

E desmarcar a opção que oculta as extensões aqui:

Agora que você salvou seu primeiro arquivo simples HTML, pode abri-lo em um navegador dando duplo clique ou, no navegador usando o atalho “Ctrl+O” (Open) e selecionado-o.

Agora vamos ver alguns detalhes.

Explicando o Código HTML

Mesmo sendo bem simples, se você é um completo iniciante, talvez não tenha entendido nada ou talvez traduzido algumas tags já que estão em inglês.

  1. A primeira linha tem o <!DOCTYPE html> que é a declaração do tipo de documento (vamos falar mais sobre isso depois). Basicamente, essa linha informa ao navegador que se trata de um documento HTML;
  2. Na próxima temos a abertura da tag html com a indicação do idioma <html lang="pt-br">;
  3. Em seguida temos o <head> que é a cabeça, ou que chamamos de “container” onde fornecemos informações sobre o documento, como o título através da tag <title>;
  4. Na sequência temos o corpo representado pela tag <body> do documento que é o conteúdo a ser mostrado na tela. É nele que vamos incluir todo conteúdo e que será renderizado pelo navegador.

Não se preocupe, vamos conhecer diferentes elementos e tags HTML, esse foi apenas um documento com uma estrutura básica.

Um detalhe importante é que, mesmo não aparecendo no corpo da página o conteúdo da tag de título <title></title>, esse título vai aparecer lá em cima na janela do navegador.

Observação: uma declaração DOCTYPE aparece na parte superior de uma página da web antes de todos os outros elementos; entretanto, a declaração doctype em si não é uma tag HTML. Cada documento HTML requer uma declaração de tipo de documento para garantir que suas páginas sejam exibidas corretamente.

Tags e elementos HTML

Você está começando a conhecer os elementos que consistem em tags de marcação.

Essas tags são fundamentais no HTML para que sejam definidos os tipos de conteúdo que o navegador deve renderizar.

Como vimos, essas tags são cercadas por sinais de menor e maior, tais como <html>, <head>, <title>, <body>, entre outras.

Além disso, é importante dizer que as tags HTML normalmente vêm em pares <body> e </body>, sendo a primeira o que chamamos de tag de abertura e a outra seria a tag de fechamento.

Basicamente o que distingue uma da outra é a barra “/” após o sinal de menor que é colocado nas tags de fechamento, justamente para informar que aquele elemento foi concluído.

Por exemplo, poderíamos incluir um parágrafo, representado por um tag com a letra “p” em nosso documento, dessa forma:

<p>Isso é um parágrafo.</p>
<!-- Isso é um comentário que podemos fazer no HTML
       para passar algumas informações -->
<p>
    Isso é <b>outro</b> parágrafo.
</p>

A tag <b> representa Bold (negrito)!

O que tá achando até aqui?

Deixe um comentário ou dúvida abaixo e, no próximo post, vamos conhecer mais elementos HTML.

Introdução ao HTML5

HTML Básico – Introdução

Essa é a parte 1 de 16 na série HTML

HTML é a abreviação para o termo em inglês HyperText Markup Language, que quer dizer “Linguagem de Marcação de Hipertexto”.

É uma linguagem de marcação utilizada na construção de páginas na Web e documentos HTML que podem ser interpretados por navegadores.

A tecnologia é fruto da junção entre os antigos padrões HyTime e SGML. 

Veja em:

Portanto, podemos dizer que hoje, o HTML é a principal linguagem de marcação para criar estruturas para nossas páginas web.

Só porque muita gente confunde o HTML dizendo ser uma linguagem de programação, aqui vai uma distinção mais clara do que seria uma linguagem de marcação:

Linguagem de marcação – ou markup (language) – é um conjunto de sinais e códigos aplicados a um texto ou a dados para definir sua configuração.

Linguagem de programação é um método padronizado de implementação de um código fonte que informará instruções de processamento ao computador.

Bem, vou colocar bastante links caso você queira aprofundar sobre assuntos, ok?

Voltando ao contexto, podemos também dizer que o HTML é o bloco de construção básico da World Wide Web (WWW).

A gente dá o nome de Hipertexto porque pode ir além de um texto simples, podendo conter tabelas, listas, formulários, imagens, entre outros elementos.

Em outras palavras, podemos usar esse hipertexto para, de forma fácil e flexível, compartilhar informações através de páginas na internet.

Além disso, é importante dizer que as linguagens de marcação usam o que chamamos de “Tags” que vão servir para definir o tipo de elemento que queremos exibir.

Essas tags serão interpretadas pelo navegador web, mostrando o documento de acordo com sua marcação.

Você pode acessar os links acima, mas como foi um marco histórico, vou deixar registrado que o HTML foi originalmente desenvolvido por Tim Berners-Lee em 1990.

Eu, particularmente, só comecei a usá-lo de fato 10 anos depois disso, no ano de 2000, 2 anos depois de Larry Page e Sergey Brin fundarem o Google.

Outra informação importante é que em 1996 o World Wide Web Consortium (W3C) tornou-se a autoridade para manter as especificações HTML.

HTML também se tornou um padrão internacional ( ISO ) em 2000.

HTML5 é a versão mais recente do HTML, e fornece uma abordagem mais rápida e robusta para o desenvolvimento da web.

Agora que já falamos um pouco dos conceitos e da história do HTML, vamos ver o que você vai poder fazer com ele.

O que pode ser feito com HTML

Se você entendeu que HTML é o principal padrão e que é a linguagem de marcação “oficial” da web, deve sacar que dá para fazer muitas coisas, como:

  • Criar documentos online contendo texto, imagens, vídeos, listas, tabelas, etc
  • Pode acessar e vincular outros recursos como imagens, vídeos, outras páginas/documentos HTML através do que chamamos de hyperlinks
  • Criar formulários para coletar informações do usuário
  • Criar um site inteiro até sem precisar hospedá-lo na internet, ou seja, criar uma versão off-line para funcionar no seu computador ou dispositivo, mesmo sem internet
  • Armazenar dados no navegador do usuário para acessá-los posteriormente
  • Até encontrar a localização do visitante do seu site

Claro que a lista não termina aqui e você vai perceber o poder do HTML a medida que avança nos conteúdos que vou compartilhar com você aqui.

Falando nisso…

O que vai aprender aqui?

Você pode encarar como um Curso, assim como estou denominando, mas pode encarar também como uma série de tutoriais para evoluir seu conhecimento sobre HTML.

Portanto, pretendo cobrir desde os fundamentos, elementos, atributos, formatação, uso das tags, estilos e até a inclusão de outros documentos HTML no documento que estiver criando.

Assim, quando você estiver familiarizado com a linguagem HTML em um nível básico, passaremos para um próximo nível, onde veremos conceitos relacionados.

Entre esses conceitos, veremos sobre Doctype, criação de layouts e como e por que adicionar informações às nossas páginas durante a criação.

Além disso, vamos também ver como adicionar Scripts – você vai saber mais a respeito – e técnicas mais avançadas e até a anatomia de um Uniform Resource Locator (URL).

Desse modo, exploraremos recursos avançados introduzidos no HTML5, que nem vou mencionar agora para não dar “spoiler” e nem bagunçar sua cabeça.

Então, esse é o primeiro post da série e espero que você já deixe seus comentários e dúvidas abaixo, participe, acompanhe e aprenda.

Bom estudo.