Advertisement

Aula 02 - Compreendendo o que é o HTML;


1- Introdução


Com uma sigla parecida com HTTP o HTML é muitas vezes confundido e muitas pessoas não sabem nem diferencia-los. Nesta aula iremos apresentar esta linguagem de marcação que permite dar corpo a uma página.

O hipertexto idealizado primitivamente era uma forma de transportar texto e conectá-los. Por consequência é criada uma rede de páginas que ao ser acessada pode representar e organizar conhecimento. O HTML é a linguagem de marcação de hipertexto, ou seja, ela não é uma linguagem de programação.


2- Evolução do HTML


Em 1980 Tim Berners-Lee propôs um projeto baseado no conceito de hipertexto denominado ENQUIRE. Este projeto foi inicialmente todo desenvolvido em linguagem Pascal. Em 1989 Tim Berners-Lee com a ajuda de um estudante do CERN chamado Robert Cailliau conseguiu implementar a primeira comunicação bem sucedida entre um cliente HTTP e um servidor através da internet. Surgia então a World Wide Web. Porém o protocolo HTTP só foi implementado em fevereiro de 1993.

A sigla HTML significa HyperText Markup Language em português, linguagem de marcação de hipertexto. A primeira versão do HTML foi baseada na linguagem SGML. O SGML era utilizado para a estruturação de documentos e foi dele que o HTML herdou diversas tags tais como: título <h1> ao <h6>, cabeçalho <head> e parágrafo <p>. A maior diferença entre essas duas linguagens de marcação é que o HTML implementava a tag <a> com o atributo href, permitindo assim a ligação (links) de uma página a outra. Esse conceito de interligação entre documentos é a base do funcionamento de toda Web.

O HTML surgiu em 1990 e até o seu quinto ano de vida sofreu várias revisões e alterações na sua especificação. Nesta época, quem controlava o padrão era o CERN e a IETF. Após 1995, o padrão passou a ser regularizado pela W3C, entidade que regula os padrões Web e que será detalhada com maior profundidade posteriormente.

Em 1993, Dave Raggett propôs uma evolução do padrão HTML, denominada HTML+. Entretanto tal proposta nunca foi implementada.

O verdadeiro sucessor do HTML foi o HTML 2.0, o qual foi apresentado na primeira conferência mundial sobre Web, a World Wide Web Conference. Essa versão do HTML pode ser vista apenas como uma correção da versão anterior, ou seja, apenas formalizava as características do HTML que já estavam em uso.

Depois, Dave Raggett escreveu o HTML 3.0 baseado em seu mais recente rascunho do HTML+. Entretanto, mais uma vez, a versão do HTML não foi implementada. Esta especificação foi superada pela versão 3.2, a qual novamente foi uma correção e providenciou total compatibilidade com a versão 2. O HTML 3.2 implementou características tais como tabelas, applets e texto flutuante ao redor de imagens. Posteriormente, Raggest foi co-author do HTML 4 e ajudou com o desenvolvimento das linguagens como XHTML, XForms, MathML e além de outras especificações mais modernas da W3C.


W3C – World Wide Web Consortium

Em agosto de 1994 foi fundada a W3C, um consórcio formado por instituições comerciais e educacionais, com o objetivo de definir padrões para as respectivas áreas relacionadas à Web. Em dezembro de 1997 a W3C publicou o HTML 4 e após dois meses publicou o XML 1. A W3C reformulou o grupo responsável pelo HTML para criar uma “suíte de tags XML”. O primeiro passo foi dado em dezembro de 1998 quando o grupo reescreveu o HTML em XML sem adicionar elementos ou atributos novos. Essa especificação foi chamada de XHTML 1.

O objetivo seguinte da W3C foi a reestruturação dos formulários Web. Em agosto de 1999 o mesmo grupo responsável pelo HTML publicou o primeiro rascunho da extensão dos formulários para XHTML. Alguns meses depois, essa “extensão dos formulários para XHTML” foi rebatizada de “XForms”. Foi criado um grupo específico, responsável pelo XForms. Esse grupo trabalhou em paralelo com o grupo de desenvolvimento do HTML com a finalidade de publicar a primeira versão do XForms em outubro de 2003.

Enquanto isso, com a transição do XML completa, os membros do grupo do HTML criaram “a nova geração do HTML”. Em maio de 2001 eles publicaram a primeira versão do XHTML 1.1.

Em julho de 2004 a W3C organizou um workshop chamado “Workshop on Web Applications and Compound Documents”. Nesse workshop estavam presentes membros da W3C e companhias desenvolvedoras de navegadores como a fundação Mozilla e a Opera. Neste workshop foi apresentado uma visão do futuro da web com uma evolução do padrão HTML 4 incluindo novas características para aplicações modernas.

No workshop a W3C deixou claro que não seriam desenvolvidas novas tecnologias de extensões do HTML e CSS que não fossem criadas pelo atual grupo de trabalho da W3C. Diante desse impasse, o grupo que desenvolvia o HTML e os formulários HTML tinha duas escolhas: ou se uniam à W3C, ou se separavam. Dessa forma, em julho de 2004 surgiu o WHATWG.

WHATWG – Web Hypertext Application Technology Working Group

O WHATWG é o grupo de trabalho tecnológico de aplicações de hipertexto para Web. Trata-se de um grupo livre, não oficial e de colaboração dos desenvolvedores de navegadores e de seus interessados. O WHATWG desenvolve especificações baseadas no HTML e em tecnologias relacionadas para facilitar o desenvolvimento e compatibilidade das aplicações web, com a intenção de submeter os resultados para um padrão organizacional. Essas submissões podem então fazer parte do padrão formal do HTML.

O WHATWG trabalhou por muito tempo somente por email e alcançaram seu maior feito com os formulários HTML 4 que passou a incorporar tecnologias dos autores do grupo, sem quebrar o padrão de compatibilidade com o conteúdo existente. O grupo foi criado para assegurar que o futuro desenvolvimento destas especificações fosse completamente livre, através de arquivos públicos e uma lista de discussão aberta.

Por muitos anos o W3C e o WHATWG ignoraram um ao outro. Enquanto o WHATWG focava nos formulários e nas novas características no HTML, o W3C estava ocupado com a versão 2.0 do XHTML. Mas em outubro de 2006, ficou claro que a WHATWG estava vivendo um momento mais sério, enquanto o XHTML 2.0 estava sendo lançado como rascunho e não estava sendo implementado pela maioria dos navegadores. Em outubro de 2006, Tim Berners-Lee, o fundador da W3C, anunciou que a W3C deveria trabalhar em conjunto com a WHATWG. O primeiro passo do trabalho em conjunto foi renomear o “Web Application 1.0” para “HTML5”.

3- Principais elementos html

Tags estruturais

<!– –>
Cria um comentário

<html> </html>
Envolve todo um documento html

<head> </head>
Envolve o cabeçalho de um documento html

<meta >
Fornece informações gerais sobre o documento

<style> </style>
Informações de estilo

<script> </script>
Linguagem script

<title> </title>
O título do documento

<body> </body>
Envolve o corpo (texto e tags) do documento html

<hn> </hn>
Cabeçalho nível n para n de 1 a 6

Parágrafos

<p> </p>
Um simples páragrafo

Links

<a> </a>
Cria um link e inclui atributos em comum

href – O URL do documento que será vinculado a este. Para e-mail: mailto e link externo: http
name – O nome da âncora

Listas

<ol> </ol>
Uma lista ordenada

<ul> </ul>
Uma lista não ordenada

<li> </li>
Um item da lista

<dl> </dl>
Uma lista de definições ou glossário

<dt> </dt>
Marca o texto especificado como um termo de definição de um glossário

<dd> </dd>
Especifica o texto referente a um termo criado pela tag <dt> dentro de uma lista de definição

Formatação de caracteres


<em> </em>
Maior ênfase em itálico

<strong> </strong>
Maior ênfase em negrito

<code> </code>
Amostra de código

<kbd> </kbd>
Texto a ser digitado

<var> </var>
Uma variável ou espaço reservado para um outro valor

<samp> </samp>
Texto de amostra

<dfn> </dfn>
Aplica um formatação no texto definido como termo de um glossário

<cite> </cite>
Uma citação

<b> </b>
Texto em negrito

<i> </i>
Texto em itálico

<u> </u>
Texto sublinhado

<tt> </tt>
Fonte monoespaçada (texto semelhante à maquina de escrever)

<pre> </pre>
Texto pré-formatado

<strike> </strike>
Texto riscado

<s> </s>
Texto tachado

<sub> </sub>
Texto subscrito

<sup> </sup>
Texto sobrescrito

<big> </big>
Texto em fonte maior do que o padrão

<small> </small>
Texto em fonte menor do que o padrão

<blink> </blink>
Texto piscando somente no Nestcape

<marquee> </marquee>
Texto animado no Internet Explorer

Outros elementos

<hr>
Uma régua horizontal

<center> </center>
Centralizar

<div> </div>
Conteúdo

<blockquote> </blockquote>
Texto com mais margem

<address> </address>
Assinaturas ou informações gerais sobre o autor de um documento

<font> </font>
Alterna tamanho , cor e tipo de fonte exibida

size – O tamanho da fonte varia de 1 a 7
Imagens

<img>
Insere uma imagem in-line no documento e inclui atributos comuns

Tabelas

<table> </table>

Cria uma tabela

<caption> </caption>
A legenda para a tabela

<tr> </tr>
Uma linha na tabela

<th> </th>
Um cabeçalho de célula da tabela

<td> </td>
Define uma célula de dados da tabela


Formulários

<form> </form>
Define um formulário

action – Responsável por determinar o exato local para onde as informações coletadas no formulário deverão ser enviadas
method – Método de empacotamento dos dados do formulário: get, post e enctype="multipart/form-data"
name – Nome do objeto

<input>
Caixa de texto

type – Tipo de dado: text, file, radio, checkbox, hidden, password, submit, reset, button, image
name – Identificação do campo
size – Largura
maxlength – Número máximo de caracteres permitidos
value – Texto que aparece dentro da caixa ou nome do botão
checked value – Valor assumido quando este campo for selecionado
<textarea> </textarea>
Permite criar elementos de entrada com características de texto

rows – Tamanho da linha da caixa de texto
cols – Tamanho da coluna da caixa de texto
name – Identificação do campo
wrap – Quebra de linha da caixa de texto: off, virtual, physical

<select> </select>
Seleção

name – Identificador
<option> </option>
Opção


4- Estrutura básica de uma página html


Em geral existe uma estrutura que é seguida para criação de uma página html básica. Essa estrutura possibilita expansão e é bastante flexivel. Veja um exemplo:


<!DOCTYPE html>
<html>
<head>
<title>Primeira página</title>
</head>
<body>

</body>
</html>

Nenhum comentário

Conta pra mim sua opinião!

Fale comigo