Вы находитесь на странице: 1из 4

Tim Berners-Lee (f�sico brit�nico) criou o HTML original (e outros protocolos

associados como o HTTP) em uma esta��o NeXTcube usando o ambiente de


desenvolvimento NeXTSTEP. 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.

As primeiras vers�es do HTML foram definidas com regras sint�ticas flex�veis, o que
ajudou aqueles sem familiaridade com a publica��o na Web. Atrav�s do tempo, a
utiliza��o de ferramentas para autoria de HTML aumentou, assim como a tend�ncia em
tornar a sintaxe cada vez mais r�gida. Apesar disso, por quest�es hist�ricas
(retrocompatibilidade), os navegadores ainda hoje conseguem interpretar p�ginas web
que est�o longe de ser um c�digo HTML v�lido.

A linguagem foi definida em especifica��es formais na d�cada de 1990, inspiradas


nas propostas originais de Tim Berners-Lee em criar uma linguagem baseada em SGML
para a Internet. A primeira publica��o foi esbo�ada por Berners-Lee e Dan Connolly,
e publicada em 1993 na IETF como uma aplica��o formal para o SGML (com uma DTD em
SGML definindo a gram�tica). A IETF criou um grupo de trabalho para o HTML no ano
seguinte, e publicou o HTML 2.0 em 1995. Desde 1996, as especifica��es HTML v�m
sendo mantidas, com o aux�lio de fabricantes de software, pelo World Wide Web
Consortium (W3C).[1] Apesar disso, em 2000 a linguagem tornou-se tamb�m uma norma
internacional (ISO/IEC 15445:2000). A recomenda��o HTML 4.01 foi publicada no final
de 1999 pelo W3C. Uma errata ainda foi lan�ada em 2001.

Desde a publica��o 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 especifica��o HTML baseada em XML que � considerada pela W3C como um
sucessor do HTML.[2][3][4] O XHTML faz uso de uma sintaxe mais rigorosa e menos
amb�gua para tornar o HTML mais simples de ser processado e estendido.

Em janeiro de 2008 o W3C publicou a especifica��o do HTML5 como Working Draft.


Apesar de sua sintaxe ser semelhante a de SGML, o HTML5 abandonou qualquer
tentativa de ser uma aplica��o SGML e, definiu explicitamente sua pr�pria
serializa��o "html", al�m de uma alternativa baseada em XML, o XHTML5.[5]

V�rias vers�es HTML foram publicadas:[6]

Vers�o 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
Marcas (tags)
Ver artigo principal: Tabela de cores
Todo documento HTML possui marcadores (do ingl�s: tags), palavras entre par�nteses
angulares (chevron) (< e >); esses marcadores s�o os comandos de formata��o da
linguagem. Um elemento � formado por um nome de marcador (tag), atributos, valores
e filhos (que podem ser outros elementos ou texto). Os atributos modificam os
resultados padr�es dos elementos e os valores caracterizam essa mudan�a. Exemplo de
um elemento simples (n�o possui filhos):

<hr />
Exemplo de um elemento composto (possui filhos):
<a href="http://pt.wikipedia.org/">Wikip�dia</a>
<a> � o marcador de abertura
</a> � o marcador de fechamento
href � o atributo onde � definido a url, que ser� acessada ao clicar no link.
Outro exemplo de elemento composto (possui filhos):

<a href="http://pt.wikipedia.org" target="_self"><p>Wikip�dia</p></a>


p = marcador que define um par�grafo.
a = marcador que define uma hiperliga��o.
href = atributo que define a url da hiperliga��o.
target = atributo que define a forma como a hiperliga��o ser� aberta.
_self = valor do atributo Target que define que a hiperliga��o ser� aberta na mesma
guia.
/ = define o fechamento do elemento
Isso � necess�rio porque os marcadores servem para definir a formata��o de uma
por��o do documento, e assim marcamos onde come�a e termina o conte�do que receber�
a formata��o ou marca��o necess�ria, espec�fica. Alguns elementos s�o chamados
�vazios�, pois n�o marcam uma regi�o de texto, apenas inserem algum elemento no
documento.

Cada elemento tem os seus atributos poss�veis e os seus valores. Um exemplo, � o


atributo href que pode ser usado com o elemento a, com o link mas que n�o pode ser
usado com o elemento meta. Isso quer dizer que devemos saber exatamente quais os
atributos e valores poss�veis para cada elemento.

De uma maneira geral o HTML � um poderoso recurso, sendo uma linguagem de marca��o
muito simples e acess�vel voltada para a produ��o e compartilhamento de documentos,
imagens, v�deos e �udio via streaming.

Na sua vers�o mais recente, o HTML5, � poss�vel criar marcadores personalizados com
JavaScript, linguagem de programa��o diretamente compat�vel com o HTML. Cada tag
pode ter uma fun��o espec�fica utilizando uma API (Interface de programa��o de
aplica��es) diferente, assim como seus nomes e estilos.

Edi��o de documentos HTML


Os documentos em HTML s�o 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 produ��o de documentos, no mercado existem
editores HTML espec�ficos, com recursos sofisticados, que facilitam a realiza��o de
tarefas repetitivas, inser��o de objetos, elabora��o de tabelas e outros recursos
(Ver lista abaixo). Basicamente dividem-se em dois tipos:

Editores de texto fonte: inserem automaticamente os marcadores, orientando a


inser��o de atributos e marca��es
Editores WYSIWYG: oferecem ambiente de edi��o com um "esbo�o" resultado final das
marca��es
Estrutura b�sica de um documento
A estrutura b�sica de um documento HTML (Hyper Text Markup Language - Linguagem de
Marca��o de Hypertexto), apresenta as seguintes marca��es:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="description" content="a descri��o do seu site em no m�ximo 90
caracteres">
<meta name="keywords" content="escreva palavras-chaves curtas, m�ximo 150
caracteres">
<title>T�tulo do Documento</title>
</head>
<body>
<!-- Aqui fica a p�gina que ser� vis�vel para todos, onde pode-se inserir
textos, imagens, links para outras p�ginas, etc, geralmente usa-se: -->

<div>Tag para criar-se uma 'caixa', um bloco, mais utilizada com "Cascading
Style Sheets
(Folhas de Estilo em Cascata)</div>

<span>Tag para modifica��o de uma parte do texto da p�gina</span>

<img src="endere�o_de_uma_imagem.jpg" />

<a href="http://www.wikipedia.org">Wikipedia, A Enciclop�dia Livre</a>


</body>
</html>
Os marcadores HTML n�o s�o sens�veis � caixa, portanto tanto faz escrever <HTML>,
<Html>, <html> ou <HtMl>.

Os marcadores b�sicos de HTML, cuja presen�a � altamente recomendada nas p�ginas


s�o:

<html>: define o in�cio de um documento HTML e indica ao navegador que todo


conte�do posterior deve ser tratado como uma s�rie de c�digos HTML
<head>: define o cabe�alho de um documento HTML, que traz informa��es sobre o
documento que est� sendo aberto
<body>: define o conte�do principal, o corpo do documento. Esta � a parte do
documento HTML que � exibida no navegador. No corpo podem-se definir atributos
comuns a toda a p�gina, como cor de fundo, margens, e outras formata��es.
Cabe�alho
Dentro do cabe�alho podemos encontrar os seguintes elementos:

<title>: define o t�tulo da p�gina, que � exibido na barra de t�tulo dos


navegadores
<style type="text/css">: define formata��o em CSS
<script type="text/javascript">: define programa��o de certas fun��es em p�gina com
scripts, podendo adicionar fun��es de JavaScript
<link>: define liga��es da p�gina com outros arquivos como feeds, CSS, scripts, etc
<meta>: define propriedades da p�gina, como codifica��o de caracteres, descri��o da
p�gina, autor, etc
S�o meta informa��es sobre documento. Tais campos s�o muito usados por mecanismos
de busca (como o Google, Yahoo!, Bing) para obterem mais informa��es sobre o
documento, a fim de classific�-lo melhor. Por exemplo, pode-se adicionar o c�digo
<meta name="description" content="descri��o da sua p�gina" /> no documento HTML
para indicar ao motor de busca que texto de descri��o apresentar junto com a
liga��o para o documento. Para o motor de busca Google, por exemplo, elementos meta
como keywords n�o s�o utilizadas para indexar p�ginas. Apenas <title> e a meta
<description> s�o usadas para descrever a p�gina indexada.[7]

Obs: Os marcadores <style> e <script> servem tanto para delimitar os espa�os usados
pelos c�digos na p�gina quanto para invocar c�digos existentes em outros arquivos
externos.

Corpo

Trecho de c�digo HTML.


Dentro do corpo podemos encontrar outros v�rios marcadores que ir�o moldar a
p�gina, como por exemplo:
<h1>, <h2>, ... <h6>: T�tulos que variam de tamanho dentro das prioridades (sua
apar�ncia pode ser alterada com CSS - Cascade Style Sheet - Folhas de Estilo em
Cascata).
<p>: Par�grafo.
<br />: quebra de linha.
<table>: cria uma tabela (linhas s�o criadas com <TR> e novas c�lulas com <TD>, j�
os cabe�alhos das colunas s�o criados com os marcadores <THead><TH> e os rodap�s
com <TFooter><TR><TD>).
<div>: determina uma divis�o na p�gina a qual pode possuir variadas formata��es.
<b>, <i>, <u> e <s>: negrito, it�lico, sublinhado e riscado, respectivamente.
<img />: imagem.
<a>: hiper-liga��o para um outro local, seja uma p�gina, um e-mail ou outro
servi�o.
<textarea>: caixa de texto (com mais de uma linha); estas caixas de texto s�o muito
usadas em blogs, elas podem ser auto selecion�veis e conter outros c�digos a serem
distribu�dos.
<abbr>: abrevia��o (sigla simplesmente abreviada).
<cite>: cita��o.
<address>:Endere�o.
Cores
As cores devem ser declaradas em CSS, com o atributo style, que funciona em
diversos elementos, como por exemplo:

<span style="color:COR">Texto</span>
Onde COR pode ser o nome da cor em ingl�s, em decimal, hexadecimal, RGB, RGBA ou
HSLA. Exemplos: Tabela de cores e Lista de cores.

Hiperliga��es
Uma possibilidade importante dos documentos HTML � a de fazer hiperliga��es. Para
isso usa-se o marcador <a> (do ingl�s, anchor). Esta tem os atributos: href que
define o alvo da hiperliga��o (que pode ser uma p�gina de Internet, uma parte da
mesma p�gina ou um endere�o de email) ou name que define um alvo nessa p�gina (a
onde se pode fazer uma hiperliga��o usando o marcador a com o atributo href).
Exemplos:

<a href="ht�tp://pt.wikipedia.org/">Clique aqui para aceder � p�gina principal da


Wikip�dia em portugu�s.</a>
<a name="nome">texto</a>
Em que nome e texto podem ser substitu�dos por o que se desejar. Depois usa-se <a
href="#nome"> </a> para hiperligar a este "anchor".

Diferen�a entre target="_blank" e target="_new"


target="_blank" � usado para abrir links em v�rias janelas e target="_new" ou
target="booger" � usado para abrir v�rios links em uma janela.[8]

Exemplos

<a href="URL DO LINK" target="_blank">T�tulo</a>


<a href="URL DO LINK" target="_new">T�tulo</a>
<a href="URL DO LINK" target="booger">T�tulo</a>
P�gina em branco � usado about:blank na url do link.

Exemplos:

<a href="about:blank" target="_blank">P�gina em branco</a>


<a href="about:blank" target="_new">P�gina em branco</a>
<a href="about:blank" target="booger">P�gina em branco</a>

Вам также может понравиться