Hack ‘n’ Cast – HTML & CSS

No episódio de hoje do Hack ‘n’ Cast 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).

Clique aqui para baixar o arquivo zipado

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. 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 a 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.

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 meta informaçõ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.

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).

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>

Citados no episódio

Artigo: Ragget on HTML
Artigo: John McCarthy
Artigo: Lista de Tags HTML
Artigo: Diversas ferramentas no site Web Social Dev
Artigo: Lista com os melhores Frameworks CSS (também do Web Social Dev)
Artigo: Mozilla Foundation – Introduction to HTML
Artigo: Uma em cada dez pessoas pensa que HTML é uma doença
Artigo: Por que o cursor do mouse é inclinado? Eis o motivo
Artigo: Tron Interface Design
Curso: CodeCademy – HTML & CSS
Curso: Apostila da Caelum – Desenvolvimento Web com HTML, CSS e JavaScript
Site: Akademia Kolaborativa – Webdev
Site: Maujor
Site: Tableless
Site: Cosmos – Uma Odisseia no Espaço-Tempo
Projeto: OpenRA
Projeto: Phonegap
Imagem: Estação de trabalho NeXT de Tim Berners Lee
Imagem: Neil deGrasse Tyson
Vídeo: Silicon Valley 1×01 – Steve Jobs was a poser

Livros

Na compra de qualquer livro na Novatec utilize o código MINDBENDING para conseguir 20% de desconto.

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.

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

Powered by: