Tutorial de HTML para Iniciantes

O ponto de partida para o início no mundo do Desenvolvimento.


Tutorial de HTML e HTML5 Tutorial Completo de HTML e HTML5

Apresentação Pra quem quer iniciar no mundo da Programação/Desenvolvimento, HTML é o início de tudo, pra aprender HTML basta saber ligar um computador, saber navegar na internet e usar um Bloco de Notas da vida, somente. HTML5 É a quinta versão da linguagem HTML. É muito simples e fácil, mas aprender do jeito certo é o alicerce pra entender muitas coisas nesse mundo do Desenvolvimento e da Internet. Documentos HTML escritos de maneira correta, aumentam significadamente a possibilidade de um buscador encontrar rapidamente seu site e colocá-lo nas primeiras ocorrências para pesquisa de um determinado assunto.
Pré-requisitos Ter conhecimentos básicos de informática, tais como navegar na internet, acessar seu e-mail e utilizar editores de texto (Exemplo: Bloco de Notas do Windows).
O que aprender Vamos criar um site da internet somente com HTML na sua última versão: HTML5.
Clique aqui para ver o Exemplo do site que iremos criar do zero.
Conceitos HTML é o formato padrão para criação de páginas online e aplicações de web. O nome HTML é uma abreviação para a expressão inglesa de HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto. HTML5 é quinta versão do HTML, essa versão reúne os recursos do HTML numa única linguagem simples de marcação que possa ser escrita em HTML e suas variantes. Traz um conceito global para ser utilizado em qualquer dispositivo: comutadores, notebooks, smartphones, tablets e televisões digitais, entre outros.
História Tim Berners-Lee (físico britânico) criou o HTML original. Na época a linguagem não era uma especificação, mas uma coleção de ferramentas para resolver um problema de Tim: a comunicação e disseminação das pesquisas entre ele e seu grupo de colegas. Sua solução, combinada com a então emergente internet pública (que tornar-se-ia a Internet) ganhou atenção mundial.
Curiosidade A tecnologia é fruto da junção entre os padrões HyTime e SGML, que não são mais utilizados.
Ferramentas mínimas Editor de Texto. Exemplo: Bloco de Notas do Windows. Mas preferencialmente instale um que colorize o código, exemplos: Vim, Gedit, Notepad++, ...
Grade Essa própria página já contém todos os tópicos abordados.
Estrutura Básica Estrutura HTML Estrutura HTML
Tudo que fica entre < e > são chamadas de tag
As tags são elementos HTML que identifica o tipo de elemento que serão lidos pelo o navegador da internet.
Geralmente as tags abrem assim: <NOME_DA_TAG> e fecham com uma barra antes do seu nome, assim: </NOME_DA_TAG>, com exceção de algumas tags que veremos mais à frente, que por sinal são poucas.
As tags que ficam entre o documento fica entre as tags: <html> e </html>, dentro dessas tags temos as tags: <head> e </head> que são o cabeçalho do documento e as tags <body> e </body> que é o corpo do documento, dentro delas, colocamos as demais tags. Algumas tags devem ficar entres as tags head, como a tag title, por exemplo. E outras obrigatoriamente tem de ficar entre as tags body, a h1, como exemplo.
Dentro dos nomes dentro das tags, podemos ainda inserir atributos: href, lang, class, target,... Ex.:<html lang="pt-BR",... HTML5 adiciona várias novas tags: video, audio, header, canvas, svg, section, article, header e nav.
Primeiro HTML
  1. Abra seu Editor de Texto;
  2. Escreva nele o conteúdo da estrutura mencionada
  3. Salve com o nome que deseja com extensão .html, ex.: meu-primeiro-html.html
  4. Abra o arquivo no navegador, dando dois clique nele, ou abrindo como ou até mesmo usando o Ctrl+o no seu navegador.
  5. Pronto, visualize sua primeira página HTML no formato HTML5 que foi definido no Cabeçalho do documento como vimos.
  6. Obs.: A cada alteração que você fizer no arquivo, para conseguir visualizar no navegador, você precisará apertar F5 que é uma única tecla do seu teclado (fica na primeira linha do teclado), Não aperte o F e depois o 5, F5 é uma única tecla.
<!DOCTYPE> Em HTML5 existe apenas usasse assim: <!DOCTYPE html>
Deve ser a primeira coisa no seu documento HTML, antes da tag <html>. NÃO é uma tag HTML; é uma instrução para o navegador da web sobre qual versão do HTML a página está escrita.
Outras declarações em versões anteriores ao HTML5:
  • HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • HTML 4.01 Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
  • XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • XHTML 1.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  • XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html> Define a raiz de um documento HTML.
Como vimos dentro dela ficam as tags head e body, consequentemente todo o documento HTML.
Em HTML5 você também pode definir a linguagem do documento (ISO), como vimos: <html lang="pt-BR".
<head> Define informações sobre o documento
Dentro dele devem ficar as tags: title (Esse é necessário para o documento HTML), style, base, link, meta, script e noscript.
<title> Define um título para o documento
<body> Define o corpo do documento
Dentro dele devem ficar as demais tags que não ficam em head: h1,h2,h3,h4,h5,p,br,hr,div,img,a,...
<h1>até<h6> Define os cabeçalhos dos textos dentro HTML.
<a> Define um hiperlink
Usando o atributo href="http://url" ao clicar sobre a tag, a página informada dentro de href será aberta, se usar em conjunto com o atributo target="_blank" a página será aberta em outra janela/aba/objeto do navegador.
Exemplo: <a href="http://www.terminalroot.com.br" target="_blank">Vai para o blog Terminal Root</a>
<img> Define uma imagem. O atributo src="imagem.jpeg" exibe a imagem informada, se a imagem não estiver dentro da mesma pasta onde está o arquivo HTML, será necessário informar o caminho completo. Essa tag também exige o uso do atributo alt="Descrição da Imagem" de acordo com as regras da W3C que regulamenta o uso dos documentos HTML, pois os softwares para deficientes visuais, lêem esse atributo e transforma em voz para quem está acessando a página.
Exemplos: <img src="nome_da_imagem.jpeg" alt="Imagem do Carro X"><img src="/pasta/nome_da_imagem.jpeg" alt="Imagem do Carro X">
<p> Define um parágrafo
<!--...--> Define um comentário
Se você quiser inserir um trecho no seu documento que não será exibido na leitura do navegador, coloque a frase/texto/comentário entre essa tag, exemplos:
<!-- Nessa linha eu tive que pôr cor vermelha.-->
<!--
Preciso mudar os hiperlinks desse trecho
-->
<meta> Define metadados sobre um documento HTML
Fica entre as tags head
Exemplo de formas de uso:
  • <meta charset="UTF-8"> Define o tipo de codificação binária.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> Torna a página responsiva, podendo apresentar conteúdo no formato do dispositivo que está sendo usado: computadores, smartphones, tablets e tv digital.
  • <meta name="keywords" content="HTML, HTML5, XHTML"> Define palavras-chave para os buscadores. Recomenda-se pôr no máximo 5 palavras-chave.
  • <meta name="description" content="Tutorial de HTML e HTML5"> Define a descrição da página.
  • <meta name="author" content="Terminal Root"> Define o autor da página.
  • <meta http-equiv="refresh" content="30"> Define em quanto tempo a página será recarregada, nesse caso 30 segundos.
  • <meta name="robots" content="index,follow"> Para os buscadores indexar a página e os links dela.
  • <meta name="robots" content="archive"> Permite que os buscadores armazenem a página em cache.
  • <meta name="reply-to" content="email@servidor.dominio"> Define o e-mail para contato.
  • <meta name="generator" content="Editor que Foi Criado - VERSAO"> Informa com qual Editor de Texto foi criado e a versão do mesmo.
  • <meta http-equiv="refresh" content=" 5 ;url=http://terminalroot.sh/"> Redireciona a página para o link no tempo informado, nesse caso após 5 segundos para terminalroot.sh, precisa informar sempre o protocolo também, nesse caso é http.
Vídeo https://youtube.com/TerminalRootTV
<abr> Define uma abreviação ou um acrônimo
<acronym> Não suportado em HTML5. Use <abbr> em seu lugar. Define um acrônimo
<address> Define informações de contato para o autor/proprietário de um documento
<applet> Não suportado em HTML5. Use <object> em seu lugar. Define um applet incorporado
<area> Define uma área dentro de um mapa de imagem
<article> Define um artigo
<aside> Define conteúdo além do conteúdo da página
<audio> Define o conteúdo de som
<b> Define o texto em negrito
<base> Especifica o URL/destino base para todos os URLs relativos em um documento
<basefont> Não suportado em HTML5. Use CSS no lugar. Especifica uma cor, um tamanho e uma fonte padrão para todo o texto em um documento
<bdi> Isola uma parte do texto que pode ser formatado em uma direção diferente de outro texto fora dele
<bdo> Substitui a direção do texto atual
<big> Não suportado em HTML5. Use CSS no lugar. Define texto grande
<blockquote> Define uma seção que é citada de outra fonte
<br> Define uma quebra de linha única
<button> Define um botão clicável
<canvas> Usado para desenhar gráficos, on the fly, via script (geralmente JavaScript)
<caption> Define uma legenda de tabela
<center> Não suportado em HTML5. Use CSS no lugar. Define o texto centralizado
<cite> Define o título de um trabalho
<code> Define um código de computador
<col> Especifica as propriedades da coluna para cada coluna em um<colgroup>elemento & nbsp;
<colgroup> Especifica um grupo de uma ou mais colunas em uma tabela para formatação
<data> Vincula o conteúdo fornecido a uma tradução legível por máquina
<datalist> Especifica uma lista de opções predefinidas para controles de entrada
<dd> Define uma descrição/valor de um termo em uma lista de descrição
<del> Define o texto que foi excluído de um documento
<details> Define detalhes adicionais que o usuário pode ver ou ocultar
<dfn> Representa a instância de definição de um termo
<dialog> Define uma caixa de diálogo ou janela
<dir> Não suportado em HTML5. Use<ul>em seu lugar. Define uma lista de diretórios
<div> Define uma seção em um documento
<dl> Define uma lista de descrições
<dt> Define um termo/nome em uma lista de descrições
<em> Define o texto enfatizado & nbsp;
<embed> Define um contêiner para um aplicativo externo (não HTML)
<fieldset> Agrupa elementos relacionados em um formulário
<figcaption> Define uma legenda para uma tag<figure>elemento
<figure> Especifica conteúdo independente
<font> Não suportado em HTML5. Use CSS no lugar. Define fonte, cor e tamanho do texto
<footer> Define um rodapé para um documento ou seção
<form> Define um formulário HTML para entrada do usuário
<frame> Não suportado em HTML5. Define uma janela (um quadro) em um conjunto de quadros
<frameset> Não suportado em HTML5. Define um conjunto de quadros
<header> Define um cabeçalho para um documento ou seção
<hr> Define uma alteração temática no conteúdo
<i> Define uma parte do texto em uma voz ou humor alternativo
<iframe> Define um quadro in-line
<input> Define um controle de entrada
<ins> Define um texto que foi inserido em um documento
<kbd> Define a entrada do teclado
<label> Define um rótulo & nbsp; para uma tag<input>elemento
<legend> Define uma legenda para um<fieldset>elemento
<li> Define um item de lista
<link> Define o relacionamento entre um documento e um recurso externo (a maioria usado para vincular a folhas de estilo)
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="icon" href="meu_icone.gif" type="image/gif"> Mostra o ícone na janela do navegador
<main> Especifica o conteúdo principal de um documento
<map> Define um mapa de imagem do lado do cliente
<mark> Define texto marcado/realçado
<menu> Define uma lista/menu de comandos
<menuitem> Define um item de comando/menu que o usuário pode invocar em um menu pop-up
<meter> Define uma medida escalar dentro de um intervalo conhecido (um medidor)
<nav> Define os links de navegação
<noframes> Não suportado em HTML5. Define um conteúdo alternativo para usuários que não suportam quadros
<noscript> Define um conteúdo alternativo para usuários que não suportam scripts do lado do cliente
<object> Define um objeto incorporado
<ol> Define uma lista ordenada
<optgroup> Define um grupo de opções relacionadas em uma lista suspensa
<option> Define uma opção em uma lista suspensa
<output> Define o resultado de um cálculo
<param> Define um parâmetro para um objeto
<picture> Define um contêiner para vários recursos de imagem
<pre> Define o texto pré-formatado
<progress> Representa o progresso de uma tarefa
<q> Define uma cotação curta
<rp> Define o que mostrar em navegadores que não suportam anotações de ruby ​​
<rt> Define uma explicação/pronúncia de caracteres (para o leste asiático tipografia)
<ruby> Define uma anotação rubi (para tipografia do leste asiático)
<s> Define o texto que não está mais correto
<samp> Define a saída de amostra de um programa de computador
<script> Define um script do lado do cliente
<section> Define uma seção em um documento
<selecione> Define uma lista suspensa
<small> Define texto menor
<source> Define vários recursos de mídia para elementos de mídia (& lt; video>e<audio>)
<span> Define uma seção em um documento
<strike> Não suportado em HTML5. Use<s>em seu lugar. Define o texto tachado
<strong> Define texto importante
<style> Define informações de estilo para um documento
<sub> Define o texto subscrito
<summary> Define um título visível para um<details>elemento
<sup> Define o texto sobrescrito
<svg> Define um contêiner para gráficos SVG
<table> Define uma tabela
<tbody> Agrupa o conteúdo do corpo em uma tabela
<td> Define uma célula em uma tabela
<template> Define um modelo
<textarea> Define um controle de entrada de múltiplas linhas (área de texto)
<tfoot> Agrupa o conteúdo do rodapé em uma tabela
<th> Define uma célula de cabeçalho em uma tabela
<thead> Agrupa o conteúdo do cabeçalho em uma tabela
<time> Define uma data/hora
<tr> Define uma linha em uma tabela
<track> Define faixas de texto para elementos de mídia (& lt; video>e<audio>)
<tt> Não suportado em HTML5. Use CSS no lugar. Define o texto do teletipo
<u> Define o texto que deve ser estilisticamente diferente do texto normal
<ul> Define uma lista não ordenada
<var> Define uma variável
<video> Define um vídeo ou filme
<wbr> Define uma possível quebra de linha
Bibliografia https://pt.wikipedia.org/wiki/HTML
https://pt.wikipedia.org/wiki/HTML5
https://www.w3.org/html/
http://www.terminalroot.com.br/html