LENDO E APRENDENDO.

Bem vindo



UM POUCO SOBRE HTML

    O que é HTML?
   Criada pelo britânico Tim Berners-Lee, o acrônimo HTML significa HiperText Markup Language, traduzindo ao português: Linguagem de Marcação de Hipertexto. O HTML é o componente básico da web, ele permite inserir o conteúdo e estabelecer a estrutura básica de um website. Portanto, ele serve para dar significado e organizar as informações de uma página na web. Sem isso, o navegador não saberia exibir textos como elementos ou carregar imagens e outros conteúdos.
   Os hipertextos são conjuntos de elementos conectados. Esses podem ser palavras, imagens, vídeos, documento, etc. Quando conectados, formam uma rede de informações que permite a comunicação de dados, organizando conhecimentos e guardando informações.
   Ao visitar uma página simples na web, você pode perceber que existem diferentes distribuições e tamanhos para títulos, parágrafos, imagens, vídeos e qualquer outro elemento. Essa estrutura é estabelecida através do HTML. No inicio da web, era comum encontrar sites apenas contendo textos e imagens simples, com estrutura básica e sem estilizações. Porém, nos dias atuais, muito dificilmente você encontrará sites que possuam apenas elementos HTML. Portanto, podemos considerar o HTML o “esqueleto” da sua página.
   Imagine então que além do esqueleto, é necessário ter o corpo. Para isso, temos então as linguagens CSS e o JavaScript, que em conjunto com HTML, formam a base para todos os websites atuais. Veremos mais à frente o que significam essas linguagens.

    Como funciona o HTML
   Através de um documento HTML, ou seja, um documento com a extensão .html ou .htm., o navegador faz a leitura do arquivo e renderiza o seu conteúdo para que o usuário final possa visualizá-lo. Os arquivos .html podem ser visualizados em qualquer navegador (como Google Chrome, Safari, ou Mozilla Firefox).
   Geralmente um site é composto por diversas páginas HTML, como por exemplo: um website que contenha três páginas (uma homepage, uma página de contato e uma página de produtos) receberá ao menos três documentos .html distintos, sendo uma para cada página do website.
   O código pode ser escrito através de qualquer editor de texto, como o próprio bloco de notas. Cada página consiste em uma série de tags (também chamados de elementos) que podem ser considerados os blocos de construção das páginas. Portanto, esses blocos são a maneira com a qual o HTML faz a marcação dos conteúdos, criando a hierarquia e a estrutura do mesmo, dividido entre seções, parágrafos, cabeçalhos, e outros.

    O que são tags
   Através de qualquer editor de texto, como o Sublime Text, o NotePad++ ou até mesmo o bloco de notas, é possível criar um documento com a extensão .html que será renderizado pelos navegadores.
   Conforme explicado anteriormente, este documento consiste em uma série de tags. As tags são códigos que definem toda a estrutura da página, tais como o seu tamanho, a fonte da letra, as cores, as quebras de linha e etc. A maioria dos elementos do documento HTML são compostos por uma estrutura de abertura e uma de fachamento, como e . Há também tags de estrutura única, como a tag
que realiza uma quebra de linha.
   Digamos que você queria escrever um paragrafo, chamamos então a tag

, escrevemos o paragrafo e finalmente fechamos a tag com

:

Meu primeiro paragrafo.

Dessa forma, ao salvar o arquivo com a extensão .html e abri-lo em um navegador, você verá o parágrafo escrito na tela do navegador.

    Principais tags do HTML    Atualmente existem mais de 140 tags, mas algumas delas quase não são utilizadas. Dentre as mais utilizadas temos:
– local para declarar todas informações, como título e metadados da sua página; – define o título; <body> – local para declarar todos os elementos que irão compor o corpo da página; <h1>,<h2>,<h3>,<h4>,<h5 >e <h6> – Tags para definir um título e subtítulos, variando de 1 a 6, sendo h1 o título mais importante e h6 o de menor importância; <p> – Tag para definir um parágrafo.+; <a> – Tag de link, junto ao atributo href=”” é responsável pela principal característica da web; <header> – define um cabeçalho; <section> – define uma seção; <article> – define um artigo; <div> – define uma divisão; <footer> – define um rodapé; <nav> – define uma área de navegação (como menus); <table> – define uma tabela; <ol> – define uma lista ordenada; <ul> – define uma lista não ordenada; <li> – define o item de uma lista; <form> – define um formulário; <input> – define os campos do formulário; <textarea> – define uma área para o usuário digitar um texto; <button> – define um botão; <img> – permite inserir uma imagem no seu documento. <br/><br/></p> <!--------------------------------------------------------------> <p>       A estrutura básica de um documento HTML    Agora que já sabemos como funciona e quais as suas principais tags, vamos entender como é formado a estrutura básica de um documento HTML. <br/>    O documento deve conter uma declaração informando o doctype, que no caso do HTML5, basta declarar com o elemento <!DOCTYPE html>. Após isso iniciamos nosso documento com a tag <html> que deverá ser fechada ao final do documento com </html>. Posteriormente, nosso documento deverá ter um elemento <head> que receberá todas as informações básicas da sua página, como o título, links de elementos externos, metadados, etc.    Declaramos então um título para página através da tag <title>. Finalmente abrimos então a tag <body> que consiste no corpo do nosso documento, onde ficarão todos os elementos que serão renderizados na tela do navegador. Dessa forma, temos a estrutura básica do nosso documento html: <br/> <!DOCTYPE html> <html> <head> <title>
   Para que não ocorram erros de renderização ou incompatibilidade de caracteres, devemos também declarar o padrão de teclado. No Brasil e em boa parte da América Latina, utilizamos o padrão UTF-8. Dessa forma, através da tag de metadados , vamos declarar dentro de um atributo charset que nosso padrão é o UTF-8. Temos assim a estrutura básica de nosso documento HTML:

   Vamos agora aprender um pouco a história do HTML e como evoluiu para se tornar o que é hoje.

       Como surgiu o HTML    Em 1980, o Físico Britânico Tim Berners-Lee, iniciou um projeto baseado na Marcação de HiperTexto, denominado ENQUIRE. Este projeto foi realizado inicialmente através da linguagem de programação Pascal. Anos mais tarde, em 1889, Tim Berners-Lee e o estudante Robert Cailliau conseguiram implementar a primeira comunicação entre o usuário e servidor através do protocolo HTTP. Com isso, surgia então a World Wide Web (www), a web que conhecemos hoje.
   Com o objetivo de facilitar comunicação e disseminação de documentos entre pesquisadores, ele criou então a linguagem de marcação de hipertexto, o HTML. A sua primeira versão foi publicada em 1991 e foi baseada na SGML, uma linguagem de marcação utilizada para a estruturação de documentos. O SGML já possuía diversas tags que foram herdadas pelo HTML. Contudo, a maior diferença entre essas duas linguagens, é que o HTML implementava a tag , permitindo a ligação de uma página a outra, conhecido como link. A interligação entre documentos é a base do funcionamento de toda Web.
   A linguagem de marcação de hipertexto ficou bastante conhecida quando começou a ser utilizada para formar a rede pública daquela época. Alguns anos mais tarde, se tornaria a linguagem padrão da internet que conhecemos hoje.

       A evolução do HTML    Conforme visto anteriormente, a primeira versão do HTML surgiu no início da década de 90. Entre 1990 e 1995 passou por várias atualizações e modificações em sua estrutura. Até então, quem supervisionava e controlava o padrão da linguagem era o CERN. Desse ano em diante, a entidade que regula os padrões da web, W3C (The World Wide Web Consortium), passou a supervisionar e controlar a linguagem de marcação de hipertextos, tornando-a uma linguagem padrão da web.
   Em 1993, Dave Raggett propôs uma evolução do padrão, denominada HTML+. Entretanto, tal proposta nunca foi implementada e a primeira versão sucessora só viria a surgir em 1995:
1995 – Versão 2.0 Apesar de diversas atualizações e modificações, a primeira versão após a criação do HTML puro só foi surgir em 1995, a versão 2.0. Seu surgimento ocorreu no primeiro evento mundial sobre a Web, o World Wide Web Conference. O seu objetivo era formalizar todas as características do HTML que já eram utilizadas.
   1997 – Versão 3.2    A versão 3.2, lançada em 1997, além de trazer novas funcionalidades à linguagem, corrigiu diversos problemas de compatibilidade da versão 2.0. Foi lançada pelo grupo de trabalho do W3C, fazendo com que ela fosse tratada como prática comum. O HTML 3.2 implementou características como tabelas, applets e texto flutuante ao redor de imagens.
   1999 – Versão 4.0.1    Em 1999, a versão 4.0.1 foi lançada trazendo a compatibilidade com as suas versões anteriores através de três implementações:
   Scrict – implementação na qual fica proibida a utilização de elementos obsoletos da linguagem; Transitional – implementação na qual os elementos obsoletos são permitidos; Frameset – implementação direcionada para site que usam frames.    Acrescentou novas funcionalidades com suporte para opções de multimídias e folhas de estilos. Também foi construído pensando em melhorar as práticas de programação. O HTML4 ocupou lugar de destaque no mundo web por muitos anos e até hoje ainda é utilizado por alguns desenvolvedores da web.
   2000 – XHTML 1.0    No ano 2000, pouco tempo após incrementar a versão 4.0.1, foi lançada a primeira versão do XHTML, que combinava as vantagens do HTML com as do XML. O XHTML trazia uma sintaxe mais rigorosa e menos ambígua para tornar o HTML mais simples de ser processado.
   2004 – a fundação da WHATWG    Em 2004, foi fundado o WHATWG (Web Hypertext Application Technology Working Group) por desenvolvedores de grandes empresas como Mozilla, Apple e Opera. A partir desse momento, teve início o trabalho de criação da nova versão do HTML.
   2014 – A grande mudança: a versão 5 do HTML    A versão 5 do HTML foi desenvolvida para aperfeiçoar a experiência da World Wide Web para os desenvolvedores e usuários finais. Ela trouxe grandes avanços para a linguagem. O HTML 5 fornece o suporte de áudio e vídeo em alto nível que, até então, não existia nas versões anteriores sem o uso de plug-ins. Essa nova versão também nasceu com uma proposta marcante: ela não é uma versão final, ou seja, seguirá recebendo mudanças ao longo do tempo.
   Anteriormente, as versões não eram padronizadas para criação de seções comuns e específicas como rodapés, cabeçalhos, menus, artigos, etc. Com a introdução de tags como

,