HTML (abreviação para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores. A tecnologia é fruto da junção entre os padrões HyTime e SGML.
HyTime é um padrão para a representação estruturada de hipermídia e conteúdo baseado em tempo. Um documento é visto como um conjunto de eventos concorrentes dependentes de tempo (como áudio, vídeo, etc.), conectados por hiperligações. O padrão é independente de outros padrões de processamento de texto em geral.
SGML é um padrão de formatação de textos. Não foi desenvolvido para hipertexto, mas tornou-se conveniente para transformar documentos em hiper-objetos e para descrever as ligações.
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 as etiquetas, 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[editar | editar código-fonte] 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>Troianos Hackings / Seu Titulo</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> As etiquetas HTML não são sensíveis à caixa, portanto tanto faz escrever <HTML>, <Html>, <html> ou <HtMl>.
As etiquetas básicas 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[editar | editar código-fonte] 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 muitos 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.6
Obs: as etiquetas <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 Dentro do corpo podemos encontrar outras várias etiquetas que irão moldar a página, como por exemplo:
<h1>, <h2>, ... <h6>: cabeçalhos e títulos no documento em diversos tamanhos. <p>: novo 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 as etiquetas <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: Anexo:Tabela de cores e Anexo:Lista de cores.
Hiperligações Uma possibilidade importante dos documentos HTML é a de fazer hiperligações. Para isso usa-se a etiqueta <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 a etiqueta a com o atributo href). Exemplos:
<a href="http://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" é usado para abrir vários links em uma janela.7
Exemplos
<a href="URL DO LINK" target="_blank">Título</a> <a href="URL DO LINK" target="_new">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> Caracteres especiais e símbolos[editar | editar código-fonte] Os caracteres especiais definem-se usando comandos que começam com & e terminam com um ;. Alguns exemplos incluem á (á), à (à), ã (ã), â (â), ä (ä) e ç (ç). Qualquer outra vogal pode ser substituída pelo a destes exemplos, incluindo maiúsculas.
HyTime é um padrão para a representação estruturada de hipermídia e conteúdo baseado em tempo. Um documento é visto como um conjunto de eventos concorrentes dependentes de tempo (como áudio, vídeo, etc.), conectados por hiperligações. O padrão é independente de outros padrões de processamento de texto em geral.
SGML é um padrão de formatação de textos. Não foi desenvolvido para hipertexto, mas tornou-se conveniente para transformar documentos em hiper-objetos e para descrever as ligações.
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 as etiquetas, 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[editar | editar código-fonte] 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>Troianos Hackings / Seu Titulo</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> As etiquetas HTML não são sensíveis à caixa, portanto tanto faz escrever <HTML>, <Html>, <html> ou <HtMl>.
As etiquetas básicas 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[editar | editar código-fonte] 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 muitos 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.6
Obs: as etiquetas <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 Dentro do corpo podemos encontrar outras várias etiquetas que irão moldar a página, como por exemplo:
<h1>, <h2>, ... <h6>: cabeçalhos e títulos no documento em diversos tamanhos. <p>: novo 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 as etiquetas <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: Anexo:Tabela de cores e Anexo:Lista de cores.
Hiperligações Uma possibilidade importante dos documentos HTML é a de fazer hiperligações. Para isso usa-se a etiqueta <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 a etiqueta a com o atributo href). Exemplos:
<a href="http://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" é usado para abrir vários links em uma janela.7
Exemplos
<a href="URL DO LINK" target="_blank">Título</a> <a href="URL DO LINK" target="_new">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> Caracteres especiais e símbolos[editar | editar código-fonte] Os caracteres especiais definem-se usando comandos que começam com & e terminam com um ;. Alguns exemplos incluem á (á), à (à), ã (ã), â (â), ä (ä) e ç (ç). Qualquer outra vogal pode ser substituída pelo a destes exemplos, incluindo maiúsculas.