Estrutura

O que é HTML, e porque aprender

Se tem um site ou blog, mas depende de ferramentas automáticas e nem sabe o básico de HTML, comece já.
Anúncios Google

O HTML é uma linguagem de marcação. Desenvolvida pelo físico inglês Tim Berners-Lee o HTML serviria a princípio para facilitar a vida de quem trabalhava com projetos colaborativos no CERN (Organização Europeia para a Pesquisa Nuclear).

Neste momento, enquanto lê essas palavras, você está usando HTML. É a “linguagem” que seu navegador, seja qual for, usa para criar marcação de hipertexto.

Como assim?

Hipertexto é aquele que se vincula a outros conteúdos — imagem, áudio, outros textos, etc — através de links. HTML é a sigla em inglês para “Linguagem de Marcação de HiperTexto”. Ele organiza o hipertexto, gerando, por exemplo cabeçalhos, rodapés: a estrutura.

Mesmo em páginas dinâmicas (que carregam informações não-estáticas) como PHP ou ASP, o resultado final, exibido no navegador, é sempre em HTML. Em conjunto com outras linguagens de marcação ou estilização, como CSS e XML, os dados se transformam numa página web completa.

Praticamente toda a estrutura do WordPress é em PHP, mas conhecer ao menos superficial de HTML ajuda muito. Se você, quando ouvm falar em “código”, “código-fonte” e afins, pensa em algo complexo e fantasioso, tipo os códigos do filme Matrix, esqueça. Além de HTML não ser bem um “código”, não tem nada de complicado.

É aquela história: é fácil de aprender, mas difícil de dominar.

Como funciona

O HTML se baseia em rótulos, ou como são mais conhecidas, tags. São palavras envoltas por símbolos

<

…para abrir, e

 >

…para fechar. Uma tag aberta precisa ser fechada, o que é feito com o símbolo

/

Um exemplo simples? Para criar uma palavra em negrito, como essa, a marcação em HTML fica:

...uma palavra em negrito, como <b>essa</b>, a marcação...

b é uma tag de HTML, de bold. Há outra tag similar, a strong, que daria visualmente o mesmo resultado.

Essas tags servem para que o navegador saiba o que fazer com o conteúdo do documento, como definir qual parte do texto é a mais importante, aplicar parágrafos, onde carregar imagens e mídias em geral… Enfim, tudo o que for exibido depende das tags, até o que não é exibido, como palavras-chave e partes da página que o leitor não vê.

Cabeça, corpo e membros

Um exemplo de tag HTML simples, e que toda página padrão tem, é a body (corpo). Como diz o nome, ela marca o início do conteúdo da página. A partir daquele ponto do documento, seu navegador saberá que deve interpretar as informações como parte do conteúdo da página, até o ponto em que a tag seja fechada. Ela é aberta com…

<body>

Para encerrar o conteúdo do corpo da página, fechamos a body:

</body>

Isto deve ser feito no código-fonte da página, que pode ser visto ao abrir um documento HTML em editores de texto como o Notepad, Bloco de Notas, Notepad++, Dreamweaver, etc.

Veja um exemplo básico de documento HTML (pois é, mandei um “esta parágrafo”…):

<html>
<header>
<title>Minha página de testes</title>
</header>
<body>
<h1>Página de exemplo</h1>
<p><b>Esta é um parágrafo com negrito</b></p>
<p>Este é um parágrafo de exemplo</p>
<p><i>E este é um parágrafo em itálico</i></p>
<p>E para encerrar, um parágrafo com texto usando um <a href="http://pt.wikipedia.org/wiki/Hiperliga%C3%A7%C3%A3o">hyperlink</a></p>
</body>
</html>

Se quiser testar, salve este código em um arquivo de texto com a extensão .html ou .htm, então abra-o com seu navegador. Você deve ser algo parecido com isto.

Página de teste

Note que o texto “Página de exemplo” ficou maior que o resto e em destaque. Isto porque usa a tag <h1> (cabeçalho 1). Ele diz ao navegador que o texto envolto por ela é o mais importante da página. Automaticamente, seguindo o padrão, ele mostra o texto com negrito e maior que o resto. As tags <b> e <i> colocam negrito e itálico, respectivamente.

Aplicações

Claro que o código de uma página mais complexa não é tão banal, às vezes ultrapassando milhares de linhas de código. Se quiser dar uma examinada no código-fonte de uma em seu site ou blog, basta abri-la normalmente, então clique com o botão direito sobre alguma área vazia dela e selecionar “Exibir código-fonte”, “Mostrar fonte”, “Exibir o código-fonte da página”, ou como estiver em seu navegador. Em alguns, também é exibido com a tecla F12.

Exibir código fonte da página

WordPress

Para editar o HTML “na unha” (direto no código) em seu WordPress, basta clicar na guia HTML no editor de texto.

Guia de HTML no WordPress

O WordPress converte automaticamente o que você escreve na guia Visual em HTML. Experimente escrever e formatar algo no modo Visual, então clique na guia HTML. Veja: um texto com a cor laranja no modo visual, recebeu uma tag <span> com estilos (style) CSS para alterar a cor.

Modos visual e de código do WordPress

Esse tipo de edição, em que o código é criado a partir de edições feitas no modo visual, é chamada WYSIWYG (sigla nada confortável de What You See Is What You Get, ou O Que Você Vê É O Que Você Obtêm, em tradução literal). Há muitos softwares que fazem isso, e o usuário não precisa aprender uma tag sequer do código para criar sites inteiros — exemplos são o ultrapassado FrontPage, o Dreamweaver, SeaMonkey, etc.

Então pra que aprender?

Pergunta inevitável e ao ler sobre os editores WYSIWYG. O problema é que eles não são a oitava maravilha do mundo. Os códigos gerados são um tanto caóticos, bagunçados, cheios de tags desnecessárias, pouco semânticos, e fazem o site final mais lento e complicado de editar caso preciso.

Mesmo no WordPress, pode ser complicado editar só no modo Visual. Certos elementos são estilizados automaticamente, e para corrigir, só indo ao código; já me irritei bastante com alterações automáticas, como transformação de símbolos em código ou inserção de spans inconvenientes.

Pense nos editores visuais como uma ferramenta de auxílio, para tornar seu trabalho mais fácil e rápido. Mas não fique 100% dependente deles, ou terá problemas cedo ou tarde. O ideal é aprender no mínimo os fundamentos de HTML, para ter controle sobre o código-fonte, posicionar divs, aplicar um estilo, etc. Não fique refém de softwares automatizados.

Senão, você termina como um motorista que não sabe nem trocar um pneu. A qualquer problema, tem que pagar alguém pra resolver, encarecendo seus projetos.

Como aprender HTML?

Na internet há uma INFINIDADE de tutoriais, artigos, apostilas e tudo que se possa imaginar sobre HTML. É um tema bastante popular e eu diria até manjado (apesar da recente chegada do HTML5 que vai obrigar todo mundo a voltar aos livros). Procure um pouco e você acha de tudo.

Caso prefira aprender com apostilas e um acompanhamento de instrutor, também há inúmeros cursos de  web design com excelentes módulos de HTML. Se preferir cursos online, mesma coisa.

Portanto, se você tem um site ou blog, mas não entende bulhufas de HTML, deixe a preguiça de lado e comece já. É fácil, e vai ajudar muito.

Links que podem ajudar:

Author

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

1 Comment

Write A Comment

Pin