HTML
(abreviacao para a
expressao inglesa
HyperText Markup Language
, que significa: "
Linguagem de Marcacao de Hipertexto"
) e uma
linguagem de marcacao
utilizada na construcao de
paginas na Web
. Documentos HTML podem ser interpretados por
navegadores
. A
tecnologia
e fruto da juncao entre os padroes
HyTime
e
SGML
.
HyTime
e um padrao para a representacao estruturada de hipermidia e conteudo baseado em tempo. Um documento e visto como um conjunto de eventos concorrentes dependentes de tempo (como audio, video, etc.), conectados por
hiperligacoes
(em ingles:
hyperlink
e
link
). O padrao e independente de outros padroes de processamento de texto em geral.
SGML
e um padrao de formatacao de textos. Nao foi desenvolvido para
hipertexto
, mas tornou-se conveniente para transformar documentos em hiper-objetos e para descrever as ligacoes.
Tim Berners-Lee
em 2008.
Tim Berners-Lee
(fisico britanico) criou o HTML original (e outros
protocolos
associados como o
HTTP
), numa estacao
NeXTcube
, usando o ambiente de desenvolvimento
NeXTSTEP
. Na epoca, a linguagem nao era uma especificacao, mas uma colecao de ferramentas para resolver um problema de Tim: a comunicacao e disseminacao das pesquisas entre ele e o seu grupo de colegas. A sua solucao, combinada com a entao emergente internet publica (que tornar-se-ia a
Internet
), ganhou atencao mundial.
As primeiras versoes do HTML foram definidas com regras sintaticas flexiveis, o que ajudou aqueles sem familiaridade com a publicacao na Web. Atraves do tempo, a utilizacao de ferramentas para autoria de HTML aumentou, assim como a tendencia em tornar a sintaxe cada vez mais rigida. Apesar disso, por questoes historicas (
retrocompatibilidade
), os
navegadores
ainda hoje conseguem interpretar paginas web que estao longe de ser um codigo HTML valido.
A linguagem foi definida em especificacoes formais na
decada de 1990
, inspiradas nas propostas originais de Tim Berners-Lee em criar uma linguagem baseada em
SGML
para a Internet. A primeira publicacao foi esbocada por Berners-Lee e
Dan Connolly
e publicada em
1993
na
IETF
, como uma aplicacao formal para o SGML (com uma
DTD
em SGML definindo a gramatica). A IETF criou um grupo de trabalho para o HTML no ano seguinte, e publicou o HTML 2.0 em
1995
. Desde
1996
, as especificacoes HTML vem sendo mantidas, com o auxilio de fabricantes de software, pelo
World Wide Web Consortium
(W3C).
[
1
]
Apesar disso, em
2000
a linguagem tornou-se tambem uma norma internacional (
ISO
/
IEC
15445:2000). A recomendacao HTML 4.01 foi publicada no final de
1999
pelo W3C. Uma errata ainda foi lancada em
2001
.
Desde a publicacao do HTML 3.5 no final de 1997, o grupo de trabalho da W3C tem cada vez mais ? e de 2002 a 2006, de forma exclusiva ? focado no desenvolvimento do
XHTML
, uma especificacao HTML baseada em
XML
que e considerada pela W3C como um sucessor do HTML.
[
2
]
[
3
]
[
4
]
O XHTML faz uso de uma sintaxe mais rigorosa e menos ambigua para tornar o HTML mais simples de ser processado e estendido.
Em janeiro de
2008
o W3C publicou a especificacao do
HTML5
como
Working Draft
. Apesar de sua sintaxe ser semelhante a de
SGML
, o HTML5 abandonou qualquer tentativa de ser uma aplicacao SGML e definiu explicitamente sua propria serializacao "html", alem de uma alternativa baseada em
XML
, o XHTML5.
[
5
]
Varias versoes HTML foram publicadas:
[
6
]
| Versao
|
Ano
|
| HTML
|
1991
|
| HTML 2.0
|
1995
|
| HTML 3.2
|
1997
|
| HTML 4.01
|
1999
|
| XHTML
|
2000
|
| HTML5
|
2014
|
| HTML5.1
|
2016 e 2017 (2ª ed.)
|
| HTML5.2
|
2017
|
HTML element content categories
Todo documento HTML possui marcadores (do ingles:
tags
), palavras entre parenteses angulares (
chevron
) (
<
e
>
); esses marcadores sao os comandos de formatacao da linguagem. Um elemento e formado por um nome de marcador (
tag
), atributos, valores e filhos (que podem ser outros elementos ou texto). Os atributos modificam os resultados padroes dos elementos e os valores caracterizam essa mudanca. Exemplo de um elemento simples (nao possui filhos):
Exemplo de um elemento composto (possui filhos):
<
a
href
=
"https://pt.wikipedia.org/"
>
Wikipedia
</
a
>
<a>
e o marcador de abertura
</a>
e o marcador de fechamento
href
e o atributo onde e definido a url, que sera acessada ao clicar no link.
Outro exemplo de elemento composto (possui filhos):
<
a
href
=
"https://pt.wikipedia.org"
target
=
"_self"
><
p
>
Wikipedia
</
p
></
a
>
p
= marcador que define um paragrafo.
a
= marcador que define uma hiperligacao.
href
= atributo que define a
URL
da hiperligacao.
target
= atributo que define a forma como a hiperligacao sera aberta.
_self
= valor do atributo Target que define que a hiperligacao sera aberta na mesma guia.
/
= define o fechamento do elemento
Isso e necessario porque os marcadores servem para definir a formatacao de uma porcao do documento, e assim marcamos onde comeca e termina o conteudo que recebera a formatacao ou marcacao necessaria, especifica. Alguns elementos sao chamados “vazios”, pois nao marcam uma regiao de texto, apenas inserem algum elemento no documento.
Cada elemento tem os seus atributos possiveis e os seus valores. Um exemplo, e o atributo
href
que pode ser usado com o elemento
a
, com o
link
mas que nao pode ser usado com o elemento
meta
. Isso quer dizer que devemos saber exatamente quais os atributos e valores possiveis para cada elemento.
De uma maneira geral o HTML e um poderoso recurso, sendo uma linguagem de marcacao muito simples e acessivel voltada para a producao e compartilhamento de documentos, imagens, videos e audio via streaming.
Na sua versao mais recente, o
HTML5
, e possivel criar marcadores personalizados com
JavaScript
,
linguagem de programacao
diretamente compativel com o HTML. Cada
tag
pode ter uma funcao especifica utilizando uma
API
(Interface de programacao de aplicacoes) diferente, assim como seus nomes e estilos.
Os documentos em HTML sao arquivos de
texto simples
que podem ser criados e editados em qualquer editor de textos comum, como o
Bloco de Notas
do
Windows
, ou o
TextEdit
, do
Macintosh
. Para facilitar a producao de documentos, no mercado existem editores HTML especificos, com recursos sofisticados, que facilitam a realizacao de tarefas repetitivas, insercao de objetos, elaboracao de tabelas e outros recursos
(Ver lista abaixo)
. Basicamente dividem-se em dois tipos:
- Editores de texto fonte: inserem automaticamente os marcadores, orientando a insercao de atributos e marcacoes
- Editores
WYSIWYG
: oferecem ambiente de edicao com um "esboco" resultado final das marcacoes
A estrutura basica de um documento HTML (Hyper Text Markup Language - Linguagem de Marcacao de Hypertexto), apresenta as seguintes marcacoes:
<!DOCTYPE html>
<
html
lang
=
"pt-BR"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
title
>
Titulo do Documento
</
title
>
</
head
>
<
body
>
<!-- Aqui fica a pagina que sera visivel para todos, onde pode-se inserir
textos, imagens, links para outras paginas, etc, geralmente usa-se: -->
<
div
>
Tag para criar um bloco, mais utilizado com CSS
</
div
>
<
span
>
Tag para modificacao de uma parte do texto da pagina
</
span
>
<
img
src
=
"imagem.jpg"
>
<
a
href
=
"https://www.wikipedia.org"
>
Wikipedia, a enciclopedia livre
</
a
>
</
body
>
</
html
>
Os marcadores HTML nao sao
sensiveis a caixa
, portanto tanto faz escrever
<HTML>
,
<Html>
,
<html>
ou
<HtMl>
.
Os marcadores basicos de HTML, cuja presenca e altamente recomendada nas paginas sao:
<html>
: define o inicio de um documento HTML e indica ao navegador que todo conteudo posterior deve ser tratado como uma serie de codigos HTML
<head>
: define o cabecalho de um documento HTML, que traz informacoes sobre o documento que esta sendo aberto
<body>
: define o conteudo principal, o corpo do documento. Esta e a parte do documento HTML que e exibida no navegador. No corpo podem-se definir atributos comuns a toda a pagina, como cor de fundo, margens, e outras formatacoes.
Dentro do cabecalho podemos encontrar os seguintes elementos:
<title></title>
: define o titulo da pagina, que e exibido na barra de titulo dos
navegadores
<style></style>
: define formatacao em
CSS
<script></script>
: define
scripts
JavaScript
ou importa de um arquivo externo
<link>
: define ligacoes da pagina com outros arquivos como
feeds
,
CSS
,
scripts
, etc
<meta>
: define propriedades da pagina, como
codificacao de caracteres
, descricao da pagina,
autor
, etc
Sao meta informacoes sobre documento. Tais campos sao muito usados por
mecanismos de busca
(como o
Google
,
Yahoo!
,
Bing
) para obterem mais informacoes sobre o documento, a fim de classifica-lo melhor. Por exemplo, pode-se adicionar o codigo
<
meta
name
=
"description"
content
=
"descricao da sua pagina"
>
no documento HTML para indicar ao motor de busca que texto de descricao apresentar junto com a ligacao para o documento. Para o motor de busca Google, por exemplo, elementos
meta
como
keywords
nao sao utilizadas para indexar paginas. Apenas
<title>
e a meta
description
sao usadas para descrever a pagina indexada.
[
7
]
Obs: Os marcadores
<style>
e
<script>
servem tanto para delimitar os espacos usados pelos codigos na pagina quanto para invocar codigos existentes em outros arquivos externos.
Trecho de codigo HTML.
Dentro do corpo podemos encontrar outros varios marcadores que irao moldar a pagina, como por exemplo:
<h1>
,
<h2>
, ...
<h6>
: Titulos que variam de tamanho dentro das
prioridades
(sua aparencia pode ser alterada com CSS - Cascade Style Sheet - Folhas de Estilo em Cascata).
<p>
: Paragrafo.
<br>
: quebra de linha.
<table>
: cria uma tabela (linhas sao criadas com
<tr>
e novas celulas com
<td>
, ja os cabecalhos das colunas sao criados com os marcadores
<thead>
<th>
e os rodapes com
<tfooter>
<tr>
<td>
).
<div>
: determina uma divisao na pagina a qual pode possuir variadas formatacoes.
<b>
,
<i>
,
<u>
e
<s>
: negrito, italico, sublinhado e riscado, respectivamente.
<img>
: imagem.
<a>
: hiper-ligacao para um outro local, seja uma pagina, um
e-mail
ou outro servico.
<textarea>
: caixa de texto (com mais de uma linha); estas caixas de texto sao muito usadas em
blogs
, elas podem ser auto selecionaveis e conter outros codigos a serem distribuidos.
<abbr>
: abreviacao (sigla simplesmente abreviada).
<cite>
: citacao.
<address>
:Endereco.
As cores podem ser atribuidas em CSS
inline
com o atributo
style
, ou o com nome de uma classe com o atributo
class
. Exemplo:
<
h1
class
=
"title"
>
Titulo
</
h1
>
<
p
style
=
"color: gray"
>
Paragrafo.
</
p
>
Onde a cor pode ser especificada na forma do nome em ingles, ou um numero
hexadecimal
, ou a notacao
RGB
,
RGBA
ou
HSL/HSLA
. Exemplos:
Tabela de cores
e
Lista de cores
.
Uma possibilidade importante dos documentos HTML e a de fazer hiperligacoes. Para isso usa-se o marcador
<a>
(do ingles,
anchor
). Esta tem os atributos:
href
que define o alvo da hiperligacao (que pode ser uma pagina de
Internet
, uma parte da mesma pagina ou um endereco de
email
) ou
name
que define um alvo nessa pagina (a onde se pode fazer uma hiperligacao usando o marcador
a
com o atributo
href
). Exemplos:
<
a
href
=
"https://pt.wikipedia.org/"
>
Clique aqui para aceder a pagina principal da Wikipedia em portugues.
</
a
>
<
a
name
=
"nome"
>
texto
</
a
>
Em que
nome
e
texto
podem ser substituidos por o que se desejar. Depois usa-se
<a href="#nome"> </a>
para hiperligar a este "anchor".
- Diferenca entre
target="_blank"
e
target="_new"
target="_blank"
e usado para abrir links em varias janelas e
target="_new"
ou
target="booger"
e usado para abrir varios links em uma janela.
[
8
]
Exemplos
<
a
href
=
"URL DO LINK"
target
=
"_blank"
>
Titulo
</
a
>
<
a
href
=
"URL DO LINK"
target
=
"_new"
>
Titulo
</
a
>
<
a
href
=
"URL DO LINK"
target
=
"booger"
>
Titulo
</
a
>
Pagina em branco e usado
about:blank
na
url
do
link
.
Exemplos:
<
a
href
=
"about:blank"
target
=
"_blank"
>
Pagina em branco
</
a
>
<
a
href
=
"about:blank"
target
=
"_new"
>
Pagina em branco
</
a
>
<
a
href
=
"about:blank"
target
=
"booger"
>
Pagina em branco
</
a
>
Os caracteres especiais definem-se usando comandos que comecam com
&
e terminam com um
;
. Alguns exemplos incluem
á
(a),
à
(a),
ã
(a),
â
(a),
ä
(a) e
ç
(c). Qualquer outra vogal pode ser substituida pelo a destes exemplos, incluindo maiusculas.
Referencias
Wikilivros
|
|---|
| Padroes IEC
| |
|---|
| Padroes ISO/IEC
| |
|---|
| Relacionado
| |
|---|