quinta-feira, 1 de janeiro de 2015

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 (Bb, 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 <strongTexto 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.

Um comentário:

Sua visita foi muito importante. Faça um comentário que terei prazaer em responde-lo!

Abração

Dag Vulpi

Sobre o Blog

Este é um blog de ideias e notícias. Mas também de literatura, música, humor, boas histórias, bons personagens, boa comida e alguma memória. Este e um canal democrático e apartidário. Não se fundamenta em viés políticos, sejam direcionados para a Esquerda, Centro ou Direita.

Os conteúdos dos textos aqui publicados são de responsabilidade de seus autores, e nem sempre traduzem com fidelidade a forma como o autor do blog interpreta aquele tema.

Dag Vulpi

Seguir No Facebook