Nesse post vamos começar a compreender o que é famoso HTML e como ele se tornou uma linguagem de marcação muito famosa nos tempos de hoje. Com uma sigla parecida com HTTP o HTML é muitas vezes confundido e muitas pessoas não sabem nem diferencia-los. Nesta aula vamos apresentar a base do hipertexto, compreender seus principais elementos e construir páginas simples, porém funcionais para seus projetos.
O que é o HTML?
HTML significa HyperText Markup Language, essa é a linguagem de marcação padrão para documentos projetados para serem exibidos em um navegador da web. Os navegadores da Web (como o google chrome ou firefox) recebem documentos HTML de um servidor da Web (geralmente na nuvem) e transformam esses documentos em páginas da Web (textos, fotos, vídeos, etc).
O HTML tem a função de descrever a estrutura de uma página da web semanticamente, isso significa que os elementos possuem sentido para página. Os elementos HTML são os blocos de construção das páginas HTML que podem ser apresentados como formulários interativos, podem ser incorporados à página renderizada. HTML fornece um meio de criar documentos estruturados denotando semântica estrutural para texto, como títulos, parágrafos, listas, links, citações e outros itens.
Esse texto adaptado desse artigo
Evolução do HTML
O HTML é muito famoso hoje, mas foi criado em 1980 por Tim Berners-Lee que propôs um projeto baseado no conceito de hipertexto denominado ENQUIRE. O projeto de Lee foi desenvolvido em Pascal, mas só em 1989 que 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.
Com esse evento surgia algo que hoje é essencial para nossas vidas: World Wide Web. No entanto, o protocolo HTTP só foi implementado em fevereiro de 1993. A primeira versão do HTML foi baseada na linguagem SGML, que 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.
A primeira versão do HTML surgiu e era muito diferente do que conhecemos hoje. A versão inicial passou por várias evoluções como o HTML 2.0 ou 3.0 e muita discussão entre os desenvolvedores até chegarmos na versão atual que é o HTML 5.
W3C – World Wide Web Consortium
Em 1994 a W3C foi fundada, um consórcio formado por instituições comerciais e educacionais, com o objetivo de definir padrões para as respectivas áreas relacionadas à Web. Foi com supervisão da W3C que o HTML 4 foi publicado 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 XHTML foi considerado uma revolução na forma de conceber a web, dado que com esse tipo de documento podemos adicionar tags personalizadas, porém, mas muita gente ainda confunde esses conceitos acreditando ser uma versão diferente do HTML.
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.
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”.
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
Opção
<option> </option>
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 flexível. Veja um exemplo:
<!DOCTYPE html> <html> <head> <title>Primeira página</title> </head> <body> </body> </html>
Pingback: Qual a diferença entre HTML e XHTML » Computer Science Master