Introdução ao HTML, a Linguagem da Internet

Com a onipresença da Internet, que, de modo imersivo, passa a ser o meio, por definição, é fundamental saber compor uma pequena página em HTML, a linguagem que age nos bastidores das páginas que fazem o que conhecemos por WEB ou Rede Mundial. Vou mostrar, através de pequenas “aulas”, como tu poderás aprender e se valer deste pequeno agrupado de propedêutica de Internet para conversar em informatiquês básico de formatação amigável das URL’s, durante o desenvolvimento da nossa conversa informal. Saber formatar com elegância (e sem decadência) páginas e “linques” de páginas em HTML amigável é vital, pois permite ao leitor uma abordagem mais profissional e estética, além de lhe dar indicação clara do que trata o Elo de Ligação ou Linque. Fica mais elegante, do ponto de vista do leitor, e também é um chamariz, pois, às vezes, o “linque” não é algo autoexplicativo nem muito menos “atraente” para o leitor. Mas vamos por partes, a la Jack. Antes de nada, a pergunta que não cala: O que é HTML? Amig@, o HTML é a linguagem por trás das páginas da Internet. HTML siginificaHyper Text Markup Language. Tudo que tu lês na Internet contém, essencialmente, HTML, junto com outras tecnologias. Mas o visual, seja um Negrito, um Itálico, uma URL apontando para um tópico (na mesma Aba; em outra Aba ou página, se o Navegador permitir, etc), uma tabela estática, é feito com HTML. O fato de ela ser “Markup Language“, Linguagem de Marcação, significa que precisamos de outras tecnologias, por exemplo, quando for preciso abrir um Banco de Dados. O HTML é essencialmente a parte visual da tua página. Ele invoca, quando necessário, outros motores para enriquecê-la. Outra pergunta: se HTML é uma linguagem e ela faz parte do texto, como eu indico ao próprio texto ou página que eu desejo formatar algo, por exemplo? Resposta: através de Tags, Etiquetas HTML. As Tags indicam onde começa e onde termina um código para conseguir fazer algo na página. Daí a ideia de “Linguagem de Marcação”. Nós, literalmente, marcamos, indicamos, com TAGS, onde começa e onde termina certo efeito na página. As Tags iniciam, sempre, com o Menor QUE (<); depois, tu escreves o efeito, que pode ser i, para itálico; b, para Negrito (b é inicial para BOLD, Forte), por exemplos; depois tu fechas a Tag com o Maior QUE (>). Pronto. Iniciei um efeito. Para fechá-lo, indicando ao texto HTML, o fim daquele recurso ou efeito, tu utilizas, de novo, o Menor QUE (<) seguido da Barra (/); insere o comando do efeito, mas, como tem a Barra, o Navegador “sabe” que é para finalizar o efeito ou comando; fecha a Tag, de novo, com Maior QUE (>). A partir deste ponto, o Navegador interpreta que aquele efeito solicitado foi encerrado. Toda Tag que eu abro, devo também fechá-la, senão o efeito não cessaria (<>,escreve texto com o efeito, </>).Vou dar um pequeno exemplo: Vamos tornar negritada a palavra TAGS na frase “Meu Navegador aceita Comandos HTML, em forma de TAGS”. É bem simples. Sugiro que tu copies este texto em um editor simples, como o NotePad, para quem está no Windows. No Linux, eu usaria o KWrite ou o Kate. Nada impede, também, que tu uses um software próprio para edição de HTML, como o Bluefish, o qual é um verdadeiro canivete suíço: serve para escrever código HTML, C, Python, etc., e é multiplataforma. Ao salvar, como por exemplo, para “teste1.html”, tu escreves, se se utiliza o NotePad ou Bloco de Notas, para tal, o nome entre aspas. O NotePad salvará sempre como .txt, salvo se se faz uso das aspas, para dizer ao editor de texto para salvar em outro formato. Isto é uma característica do aplicativo. Pois bem. Salve-o como “teste1.html” e abra-o no Navegador: Internet Explorer, Firefox, Chrome, Opera, não importa. Ele vai “ver” o texto com a formatação solicitada. Bem, como eu disse, para formatar em Negrito é simples: eu abro uma Tag, no início do texto a negritar, com Menor Que (<), depois coloco o código do negrito (B ou b) e fecho-a com o Maior QUE (>); para informar ao Navegador o final do efeito, eu abro com a TAG de fechamento (Menor QUE, Barra, Efeito, Maior QUE – </b>, por exemplo, para encerrar o Negrito). Observe que o código de marcação, no caso aqui, para negrito, pode ser escrito em minúsculo ou em maiúsculo. Por norma, eu escrevo em caixa baixa, mas pode ser um ou outro. A frase era “Meu Navegador aceita Comandos HTML, em forma de TAGS”. Deveríamos negritar a palavra tags(Morvan, não era TAGS? Sim. A mesma coisa. Só para entender que, em HTML, não importa a caixa de texto. Pode ser maiúscula ou minúscula). Fica assim: Meu Navegador aceita Comandos HTML, em forma de <b>TAGS</b>.O Navegador, por causa das TAGS, vai escrevê-la assim:

“Meu Navegador aceita Comandos HTML, em forma de TAGS“

Observe: abrimos o efeito negrito (B) entre TAGS. Fechamo-lo, com o mesmo parâmetro, mas com a Barra Indicadora de cessação do efeito. O que vier depois vem sem efeito. É texto puro, sem códigos de controle. A maioria das Tags fecha com a Barra. As exceções serão destacadas, quando possível. E se tu quisesses, ao invés do Negrito (B, b, Bold, em inglês) oitálico, para a mesma palavra? Seria bem simples. O comando para abrir e fechar o efeito seria o I ou i (lembre-se de que os efeitos são “insensitivos”, não importa a caixa do texto). Tu dizes: “Ah, tudo bem, mas eu quero formatar um trecho em sublinhado, ao invés do Negrito“. Seria bem simples, de novo. O comando para abrir e fechar o efeito seria o U ou u (U ou u, pois em inglês sublinhado é “Underlined“. Lembre-se, novamente, de que os efeitos são “insensitivos”, não importa se caixa alta ou baixa). Quando estivermos falando sobre NetQueta, ver-se-á que, via de regra, se escreve em caixa baixa e veremos também o porquê. Aqui é similar. Mesmo que o Navegador interprete Código HTML sem ligar para a caixa do texto, escreveremos habitualmente em caixa baixa.

Uma alternativa ao Bold (b ou B) é a Tag-FechaTag <strong> Texto a Encorpar </strong>

Fica assim, em HTML:

Meu Navegador aceita Comandos HTML, em forma de <u>TAGS</u>. Veja abaixo:

Meu Navegador aceita Comandos HTML, em forma de TAGS.

A mesma frase no Navegador, com o uso de estilos → (para ver como está codificado, via estilo, selecione a frase abaixo e acione, com o botão de atalho do rato, a opção “Exibir Código-Fonte da Seleção” ou similar):

Meu Navegador aceita Comandos HTML, em forma de TAGS

Observação: todos estes efeitos são acionados, com melhores resultados, com o uso de estilos, os quais estão além do escopo deste tutorial.

Trabalhando com Cabeçalhos em HTML

Agora, amig@, vamos trabalhar um pouco com Cabeçalhos. Cabeçalhos, em HTML, têm um sentido específico. Cabeçalhos são específicos a uma página e são um texto chamativo, grande, indo do Nível 1 ao 6 (do maior para o menor). Algumas pessoas utilizam a TAG <BIG>Texto a Destacar </BIG>; mas o grupo Cabeçalhos permite padronizar as Seções de sua página com muito mais controle.

Para colocar um título, por exemplo, com Nível 2 de Cabeçalho, basta instruir, na sua página:

<H2>Este é Um Cabeçalho Nível 2</H2>. Como qualquer Tag, informamos à página o fim marcação de cabeçalho com </H[1-6]>. Veja abaixo exemplos de Cabeçalhos em ordem decrescente de tamanho:

Este é Um Cabeçalho Nível 1

Este é Um Cabeçalho Nível 2

Este é Um Cabeçalho Nível 3

Este é Um Cabeçalho Nível 4

Este é Um Cabeçalho Nível 5

Este é Um Cabeçalho Nível 6

Inserindo Comentários em HTML

Às vezes, queremos comentar pequenos trechos da nossa página. Como em qualquer linguagem de computadores, ao se comentar um trecho qualquer, este só será visível em modo de edição, o que é útil para ajudar aos formatadores a entenderem aquele trecho, como está programado, o que faz aquele tópico, etc. No caso específico de HTML, os comentários ajudam o formatador da página, dando-lhe informações que ficam transparentes para o leitor da página. A TAG para iniciar um comentário, o qual pode se desenvolver em várias linhas de texto, é <!– (MenorQUE, Exclamação, hífen, hífen – tudo junto, sem espaço). A partir deste ponto, tudo é tratado como comentário, não sendo exibido pelo seu Navegador, até o HTML encontrar a Tag para finalizar o efeito. Para finalizá-lo, basta indicar o fechamento da TAG de comentários com –> (hífen, hífen, MaiorQUE. esta é uma das poucas TAGS que não fecham com a Barra, a exemplo também da TAG IMG).

Digamos que estou escrevendo um texto e quero sinalizar para o Moderador que determinado trecho não está concluso, ainda. Posso me valer dos comentários, vez que o Moderador analisará o código-fonte do que fora enviado, à cata de possíveis problemas.

Vejamos um exemplo:

“… Para calcular a corrente, precisamos saber, pelo menos, duas grandezas: a voltagem e a resistência…”.

<!– Atenção Moderador. Colocar Gráfico da URL Aqui!!! –>

O que será visto pelo leitor:

“… Para calcular a corrente, precisamos saber, pelo menos, duas grandezas: a voltagem e a resistência…”.

O Moderador / diagramador da página, pelo que se falou, vai ler o código-fonte e vai ver os comentários. Para o leitor, é transparente. Literalmente transparente, ou seja, não viu as informações que só tinham relevância para quem vai editar o conteúdo. Num artigo, em um comentário em um blogue, exemplos, tu podes colocar comentários para registrar data, URL do tópico, etc. Bastante útil.

Destacando Texto Com Tags HTML

Às vezes, estamos, por exemplo, compondo uma prova e queremos ao invés dos recursos de formatação convencional, como Negrito, Itálico e Sublinhado, destacar partes do texto, realçá-lo, como em utilizando uma caneta marca-texto. A Tag <MARK> Texto a Destacar </MARK>faz isto para nós. Queremos realçar, na frase “Atenção, Alunos. Provas I e II têm peso 5; as restantes têm peso 2″ a seleção Provas I e II têm peso 5. A frase completa, com o código HTML, ficaria assim:

“Atenção, Alunos. <mark>Provas I e II têm peso 5</mark>; as restantes têm peso 2.”.

A saída HTML seria assim:

“Atenção, Alunos. Provas I e II têm peso 5; as restantes têm peso 2“.

Observação: Consegue-se muito mais controle, bem como flexibilidade de cores, com o uso de Estilos, os quais, como frisado antes, estão além do escopo deste mini-tutorial. Nos linques por nós fornecidos, por exemplo, da W3Schools, é possível aprofundar bastante sobre o uso de Estilos. Importante, pois é uma tendência irrecorrível, ainda mais quando se sabe que todos os sítios estão migrando para C. M. (Gerenciadores de Conteúdo) e estes, sabe-se, truncam bastante os efeitos de HTML puro.

Transcrevendo Citações E Comentários, Com Destaque

Às vezes, em meio a um artigo, comentário, queremos transcrever o dito pelo autor, dando, porém, destaque a pontos mais relevantes do que fora dito. Entra em cena uma Tag importante. Ela nos permite transcrever só o trecho fundamental do autor, dando destaque gráfico e deslocando o texto, como numa verdadeira citação. É importante deixar este trecho selecionado italicizado, como é praxe nas citações, pois a Tag BlockQuote só nos dá o destaque gráfico, com o deslocamento e, dependendo do Estilo de Página, um sinal, à esquerda, mostrando que há um avanço do texto. Para formatar a Etiqueta (Tag) BlockQuote, segue-se o usual. Fechá-la, idem, utilizando a barra (/) como indicador de final de efeito. Vamos testar, com um pequeno exemplo: em uma discussão sobre codificação, Pedro falou:
— “… sabemos que o Protocolo HEVC vai imperar, é questão de tempo, pois se exigirá mais e mais densidade de informação multimídia e as Camadas MPeg anteriores já obsolesceram.“.

Agora, utilizado a Tag <blockquote>Texto a Destacar</blockquote></> iremos testar o mesmo excerto de texto do autor:

— “… sabemos que o Protocolo HEVC vai imperar, é questão de tempo, pois se exigirá mais e mais densidade de informação multimídia e as Camadas MPeg anteriores já obsolesceram.“.

Não precisa quebrar a linha, com Enter ou com código HTML. A Tag citada faz isso automaticamente. O travessão (—) é conseguido com um pequeno e útil truque: escreva, em vez do hífen ou do próprio travessão, ”

---

” (três hifens, sem espaço entre eles. O Gerenciador de Conteúdo de qualquer sítio / Blogue vai convertê-lo em travessão). Se quiser, alternativamente, pode digitar, para ser convertido também, de modo automático, “&mdash;” (âmper, “mdash” , ;& “;”). Este método de se escrever o carácter se chama “URL Encode“.

Pronto. Agora já sabes como citar o trecho daquele tópico | comentário. E boa discussão. ;)