Mind Bending

O HTML é co-responsável pela grande revolução que foi a internet. Junte-se a trupe do Hack 'n' Cast e descubra se isso é uma tecnologia, doença ou solução. E saiba porquê você deve usar um guarda-chuva ao escrever CSS.

No episódio de hoje do Hack ‘n’ Cast voltamos com tudo e vamos falar sobre a linguagem de programação (sic!) dos verdadeiros hackers, o HTML! Assim como visto na TV

Também neste episódio, inauguramos a seção de notícias, dicas e Bug Reports deste podcast! Para não perder nenhum episódio siga-nos nas redes sociais (Twitter e Facebook) ou inscreva-se (Feed, Podflix, iTunes e Pocket Casts).

Introdução

Todos os dias você cruza com centenas de tipos diferentes de documentos impressos, cartazes, outdoors, folhetos distribuídos no semáforo, (agora nesta época) santinho de políticos, jornais, agenda de ónibus/metrô, revistas, livros e etc. Todos estes tipos de documentos compartilham um conceito, o uso de palavras, imagens, gráficos ou tabelas para apresentar informações, e compartilham também uma estrutura básica: título, descrição e texto. Esta é a forma de comunicação que o ser humano está acostumado a lidar, entretanto, a Internet (World Wide Web) não é composta apenas de humanos, mas de computadores/servidores. A Internet é como um mar de documentos que se interligam, e para permitir que tanto a máquina quanto o ser humano pudesse entender a semântica desses documentos foi necessário criar algo que integrasse a estrutura semântica compreendida pela máquina e pelo ser humano. Este algo é a linguagem HTML.

HTML

HTML é uma linguagem de marcação na qual você escreve utilizando elementos HTML, que consistem de tags circundadas por colchetes angulares (sinal de menor/maior). Geralmente as tags HTML possuem pares, sendo que a primeira a aparecer é a tag de abertura e segunda é a tag de fechamento. Para diferenciar uma tag de abertura de uma tag de fechamento, esta última possui uma barra logo após o sinal de menor.

XKCD 1367

Os elementos HTML são as peças que constroem sites, eles criam documentos estruturados denotando a semântica do texto, como headings, parágrafos, listas, citações e outros itens. O propósito de um navegador é ler o HTML, interpretar as tags e compor uma página legível para humanos.

Todo código HTML deve possuir pelo menos estes quatro "pedaços":

  • <!DOCTYPE>: O doctype não é uma tag em si, na verdade é uma instrução especial. Ela indica ao navegador qual a versão do HTML este arquivo está utilizando. Antigamente a doctype era complexa e recheada de informações, porém, com o HTML5, esta tag foi extremamente simplificada.
  • <html>: Esta tag é a tag raiz (ou tag pai) de todo o documento que iremos criar. Pense nela como o próprio documento HTML (por isso a tag se chama html).
  • <head>: A tag head (assim como sua tag irmã body) devem estar dentro da tag HTML. Nela são definidas as metainformações sobre nossa página ou informações que são importantes somente para o browser. Nenhuma informação da tag head serão exibidas na área de documento.
  • <body>: A tag body é o corpo do nosso documento, ela possui todos os dados textuais que serão exibidos na página.

Abaixo um exemplo de uma página HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Página de Exemplo</title>
    <meta charset=”utf-8”>
</head>
<body>
    <h1>Página de exemplo</h1>
    <p>Este é um parágrafo</p>
</body>
</html>

Uma tag HTML pode conter um conteúdo (<nome_de_tag>conteúdo da tag</nome_de_tag>) e vários atributos (<nome_de_tag atributo1=”valor”>conteúdo da tag</nome_de_tag>), no formato chave/valor. Alguns atributos são específicos de algumas tags, enquanto outros atributos valem para qualquer tag e possuem um significado específico:

CSS

É uma linguagem de folhas de estilo utilizada pra descrever a aparência e formatação de um documento escrito em uma linguagem de marcação. Apesar de ser amplamente utilizada para a linguagem HTML, ela também pode ser associada a outros documentos como XML, SVG e XUL.

CSS Blinds

Como eu me sinto corrigindo o CSS dos outros

O CSS foi criado primariamente para permitir a separação do conteúdo e da semântica de um documento de sua apresentação (cor, fonte, layout, posicionamento e etc).

A sintaxe do CSS é composta por seletores e regras, do tipo chave-valor. O seletor funciona como uma expressão que “seleciona” um grupo/tipo de elementos HTML, por tipo, classe ou id. As regras são aplicadas dentro de um seletor, e possuem uma estrutura de chave-valor, isto é, um atributo (font-family, color, font-size) e o valor a ser atribuído (sans-serif, #ff0000, 12px).

CSS Selector

A inclusão de um arquivo CSS deve ser feito da seguinte maneira:

<link href=”caminho/arquivo.css” rel=”stylesheet”>

Entretanto, é possível embutir o CSS dentro de uma página HTML usando a tag HTML style:

<style type=”text/css”>
// CSS aqui
</style>

Trilha Sonora

A trila deste episódio é uma homenagem ao Black Sabbath:

  • Symptom Of The Universe (Sabotage - 1975)
  • The Wizard (Black Sabbath - 1970)
  • Paranoid (Paranoid - 1970)
  • Iron Man (Paranoid - 1970)
  • Supernaut (Black Sabbath 4 - 1972)
  • Sabbath Bloody Sabbath (Sabbath Bloody Sabbath 1973)
  • Sabbra Cadabra (Sabbath Bloody Sabbath 1973)
  • War Pigs (Paranoid - 1970)
  • Turn Up The Night (Mob Rules - 1981)
  • Country Girl (Mob Rules - 1981)
  • Loner (13 - 2013)
  • Peace Of Mind (13 - 2013)

Agradecimentos

Agradecemos a todo o feedback recebido (por e-mail, comentário e twitter). Agradecemos especialmente ao Diego "R4bugento" Sorrilha pela colaboração com a pauta!

Você quer colaborar com o Hack ‘n’ Cast? Sugira um tema, nos ajude a produzir uma pauta ou participe conosco! Entre em contato por E-mail, Facebook ou Twitter.

Licença

O Hack ‘n’ Cast é distribuído sobre a licença Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0). Você é livre para compartilhar, copiar, redistribuir (em qualquer mídia ou formato), adaptar, remixar transformar ou ampliar esse material, contato que sejam mantidas as atribuições e os autores sejam devidamente citados e que esta mesma licença seja utilizada nos trabalhos derivados.

Magnun

Magnun

Engenheiro de telecomunicações por formação, mas trabalha com suporte à infraestrutura GNU/Linux, e nas horas vagas é Programador OpenSource (Python e C) desenhista e escritor do Mind Bending Blog.


Comments

comments powered by Disqus