Tecnologia da Informação: HTML

Modulo HTML Iniciou 17/05/2011 ,Terminou 30/06/2011
Para ler Tutorial completo sobre HTML clique em Visualizar Postagem
( Esta postagem nada mais é do que uma introdução do modulo HTML as estruturas relalizadas em sala é aqui > Estruturas HTML )

Leia tambem: Estrututa HTML

HTML
HTML (acrônimo 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 do "casamento" dos 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 hiper-ligaçõ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.

Etiquetas
Todo documento HTML apresenta etiquetas[5], elementos entre parênteses angulares (chevron) (< e >); esses elementos são os comandos de formatação da linguagem. A maioria das etiquetas tem sua correspondente de fechamento:

<etiqueta>...</etiqueta>

Isso é necessário porque as etiquetas servem para definir a formatação de uma porção do documento, e assim marcamos onde começa e termina o texto com a formatação especificada por ela. Alguns elementos são chamados “vazios”, pois não marcam uma região de texto, apenas inserem algum elemento no documento:

<etiqueta>

Uma etiqueta é formada por comandos, atributos e valores. Os atributos modificam os resultados padrões dos comandos e os valores caracterizam essa mudança. Exemplo:

<HR color="red">

No qual:

*HR = comando que desenha uma barra horizontal
*color = atributo que especifica a cor da barra
*red = valor do atributo color, que é a cor da barra que será desenhada

Cada comando tem seus atributos possíveis e seus valores. Um exemplo, é o atributo size que pode ser usado com o comando FONT, com o HR mas que não pode ser usado com o comando BODY. Isso quer dizer que devemos saber exatamente quais os atributos e valores possíveis para cada comando.

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 e imagens.

Cabeçalho
Dentro do cabeçalho podemos encontrar os seguintes comandos:

*<title>: define o título da página, que é exibido na barra de título dos navegadores

*<style>: define formatação em CSS

*<script>: 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) 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 sistema Google, comandos meta como keywords por exemplo não são utilizadas para indexar páginas. Apenas <title> e a meta <description> são usadas para descrever a página indexada

Obs: as etiquetas <style> e <script> servem tanto para delimitar o espaço 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. (quanto menor for o número, maior sera o tamanho da letra)

*<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 de coluna são criados com a etiqueta <TH>)

*<div>: determina uma divisão na página a qual pode possuir variadas formatações

*<font>: altera a formatação (fonte, cor e tamanho) de um trecho do texto

*<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

*<acronym>: acrônimo (sigla)

*<cite>: citação

*<address>: endereço

Hiperligações
Uma propriedade importante dos documentos HTML é a possibilidade 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".

Editores HTML

Adobe Dreamweaver Leia tambem Estrututa HTML

Adobe GoLive

Arachnophilia

Amaya

Aptana

Bluefish

CoffeeCup HTML Editor

CoffeeCup VisualSite Designer

Crimson Editor

EditPlus

Emacs

Evrsoft First Page

Gedit

Google Chrome

Kate

Kompozer

Macromedia Dreamweaver

Microsoft Expression Web

Microsoft Frontpage

Internet Explorer 8

Microsoft Office SharePoint Designer

Microsoft Visual Studio

Mozilla Composer

Namo Web Editor

Notepad++

NVU

Netscape Editor

PHP Editor

PSPad

Quanta Plus

Scite

Trellian WebPage

Vim