6. Editor HTML mais usado

          Adobe Dreamweaver

          Dreamweaver MX - a Macromedia incorporou ferramentas de criação de conteúdo dinâmico ao Dreamweaver. No espírito das ferramentas HTML WYSIWYG, permite que usuários se conectem a bancos de dados (tais como MySQL e Microsoft Access) para filtrar e mostrar conteúdo usando tecnologias de script tais como PHP, ColdFusion, ASP e ASP.NET, sem qualquer experiência prévia em programação. Essa também foi a ultima versão do Dreamweaver com tradução para o Português.

          Dreamweaver 8 - Ultima versão do Dreamweaver sob gestão da Macromedia, trouxe implementações de melhorias nas funções já utilizadas na versão MX e correções de bugs em comportamentos de servidores. Sua principal novidade foi o surgimento da extensão Ajax ToolBox desenvolvida pela InterAKT trazendo a ferramenta suporte a alguns conceitos básicos de Ajax.

          Dreamweaver CS3 - Uma das maiores novidades da versão CS3 é a capacidade de gerar páginas em Ajax. Para isso é utilizado o Spry, framework para desenvolvimento de Ajax criado e mantido pela própria Adobe. Utilizando o Spry, e possível criar menus de navegação dinâmicos, componentes para validação de formulário como mudar cor dos campos, mostrar quantos caracters foram digitados ou faltam para o limite (ao chegar no limite ele auto-deleta os caracteres a mais,entre outras qualidades. O framework Spry permite ainda aplicar efeitos como fade e reduzir ou ampliar imagens (entre outros). Tudo é feito visualmente, sem a necessidade de lidar diretamente com código.Passando assim a ser preferência desde simples usuarios da internet que desejam ter sua Home Page ate a experientes programdores de web sites.

          Outras novidade da nova versão são avanços nas áreas de CSS e checagem de browser. A ferramenta de verificação de browsers ficou mais poderosa e indica com precisão possíveis problemas de compatibilidade entre navegadores. Na área de CSS, o programa traz uma boa quantidade de modelos para layout baseados em estilo alem de que se por acaso o desenvolvedor erre o codigo do css , ele exibe um 'alerta' com um link para o site da adobe mostrando o erro ou a inexistendia do código inserido e a possivel solução para o browser checado.

          Dreamweaver CS4 - Vêm com grandes transformações em seu ambiente de software, adequando-se as aparências mais recentes de seus sistemas operacionais e organizando melhor seu layout para que diferentes tipos de profissionais possam ter facilidade em trabalhar com suas ferramentas. Dentre as novidades por default, da versão se destacam:

- Dicas de código para estruturas Ajax e JavaScript

- Integração do Subversion®

- Conjuntos de dados HTML

- Práticas recomendadas para CSS

- Todo o tipo de formatação e posicionamento agora é feito por CSS usando id de tags por default

          No entanto as principais novidades dessa versão não vieram no seu pacote default e sim nas extensões dela, que agora com novas metologias permitiram que fosse desenvolvidas extensões para integração com frameworks consagrados. Destacando-se:

- Integração com JQuery frameworks

- Integração com YUI frameworks

- Integração com Google Web ToolKit

          Desde o final dos anos 90, o Dreamweaver vem tendo um sucesso crescente e hoje domina cerca de 80% do mercado de editores HTML. Existem versões tanto para Mac OS quanto para Windows, mas também é possível executá-lo em plataformas Unix e sabores através do uso de softwares de emulação como o Wine.

Um programa open source semelhante ao Dreameweaver é o Nvu, disponível para Linux, Mac OS e MS Windows.

5. Caracteres especiais e símbolos e lista de editores (HTML)

           Caracteres especiais e símbolos            Os caracteres especiais definem-se usando comandos que começam com & e terminam com um ;. Alguns exemplos incluem:

• á (á);
• à (à);
• ã (ã);
• â (â);
• ä (ä);
• ç (ç).

          Qualquer outra vogal pode ser substituída pelo a destes exemplos, incluindo maiúsculas.

Editores HTML

• Adobe Home Site
• Adobe Dreamweaver
• Adobe GoLive
• Arachnophilia
• Amaya
• Aptana
• Bluefish
• CoffeeCup HTML Editor
• CoffeeCup VisualSite Designer
• Crimson Editor
• EditPlus
• Emacs
• Evrsoft First Page
• Kate
• Kompozer
• Macromedia Dreamweaver
• Microsoft Expression Web
• Microsoft Frontpage
• 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

 

4. Estrutura básica de um documento

          A estrutura de um documento HTML apresenta os seguintes componentes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="pt">
   <head>
      <title>Título do Documento</title>
   </head>
   <body>
      texto,
      imagem,
      links,
      ...
   </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 propriedades comuns a toda a página, como cor de fundo, margens, e outras formatações.

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="ht­tp://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".

3. Etiquetas (HTML)

          Todo documento HTML apresenta etiquetas, 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.

2. Historia do html

          Tim Berners-Lee criou o HTML original (e outros protocolos associados como o HTTP) em uma estação NeXTcube usando o ambiente de desenvolvimento NeXTSTEP. Na época a linguagem não era uma especificação, mas uma coleção de ferramentas para resolver um problema de Tim: a comunicação e disseminação das pesquisas entre ele e seu grupo de colegas. Sua solução, combinada com a então emergente internet pública (que tornaria-se a Internet) ganhou atenção mundial.
          As primeiras versões do HTML foram definidas com regras sintáticas flexíveis, o que ajudou aqueles sem familiaridade com a publicação na Web. Atualmente a sintaxe do HTML é muito mais rígida, permitindo um código mais preciso. Através do tempo, a utilização de ferramentas para autoria de HTML aumentou, assim como a tendência em tornar a sintaxe cada vez mais rígida. Apesar disso, por questões históricas (retrocompatibilidade), os navegadores ainda hoje conseguem interpretar páginas web que estão longe de ser um código HTML válido.
          A linguagem foi definida em especificações formais na década de 1990, inspiradas nas propostas originais de Tim Berners-Lee em criar uma linguagem baseada em SGML para a Internet. A primeira publicação foi esboçada por Berners-Lee e Dan Connolly, e publicada em 1993 na IETF como uma aplicação formal para o SGML (com uma DTD em SGML definindo a gramática). A IETF criou um grupo de trabalho para o HTML no ano seguinte, e publicou o HTML 2.0 em 1995. Desde 1996, as especificações HTML vêm sendo mantidas, com o auxílio de fabricantes de software, pela World Wide Web Consortium (W3C). Apesar disso, em 2000 a linguagem tornou-se também uma norma internacional (ISO/IEC 15445:2000). A última especificação HTML lançada pela W3C foi a recomendação HTML 4.01, publicada no final de 1999. Uma errata ainda foi lançada em 2001.
          Desde a publicação do HTML 3.5 no final de 1997, o grupo de trabalho da W3C tem cada vez mais — e de 2002 a 2006, de forma exclusiva — focado no desenvolvimento do XHTML, uma especificação HTML baseada em XML que é considerada pela W3C como um sucessor do HTML. O XHTML faz uso de uma sintaxe mais rigorosa e menos ambígua para tornar o HTML mais simples de ser processado e estendido.

1. Introdução (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.