quarta-feira, 13 de junho de 2012

Como se tornar um Hacker


    Por que esse documento?


 Bom pessoal como frequentemente recebo pedidos por email de entusiasmados iniciantes, perguntando (de fato) "como eu posso aprender a ser um grande hacker?". Estranhamente, parece que não existem FAQs ou documentos na Web que se refiram a essa importante questão, então aqui está o meu.

O que é um hacker?


 Hoje existe um monte de definições do termo "hacker", a maioria deles tendo a ver com aptidão técnica e um prazer em resolver problemas e superar limites. Se você quer saber como se tornar um hacker, entretanto, apenas duas são realmente relevantes.
Existe uma comunidade, uma cultura compartilhada, de programadores experts e gurus de rede cuja história remonta a decadas atrás, desde os primeiros minicomputadores de tempo compartilhado e os primeiros experimentos na ARPAnet. Os membros dessa cultura deram origem ao termo "hacker". Hackers construíram a Internet. Hackers fizeram do sistema operacional Unix o que ele é hoje. Hackers mantém a Usenet. Hackers fazem a World Wide Web funcionar. Se você é parte desta cultura, se você contribuiu a ela e outras pessoas o chamam de hacker, você é um hacker.
A mentalidade hacker não é confinada a esta cultura do hacker-de-software. Há pessoas que aplicam a atitude hacker em outras coisas, como eletrônica ou música -- na verdade, você pode encontrá-la nos níveis mais altos de qualquer ciência ou arte. Hackers de software reconhecem esses espíritos aparentados de outros lugares e podem chamá-los de "hackers" também -- e alguns alegam que a natureza hacker é realmente independente da mídia particular em que o hacker trabalha. Mas no restante deste documento, nos concentraremos nas habilidades e dos hackers de software, e nas tradições da cultura compartilhada que deu origem ao termo `hacker'.
Existe outro grupo de pessoas que se dizem hackers, mas não são. São pessoas (adolescentes do sexo masculino, na maioria) que se divertem invadindo computadores e fraudando o sistema telefônico. Hackers de verdade chamam essas pessoas de "crackers", e não tem nada a ver com eles. Hackers de verdade consideram os crackers preguiçosos, irresponsáveis, e não muito espertos, e alegam que ser capaz de quebrar sistemas de segurança torna alguém hacker tanto quanto fazer ligação direta em carros torna alguém um engenheiro automobilístico. Infelizmente, muitos jornalistas e escritores foram levados a usar, errôneamente, a palavra "hacker" para descrever crackers; isso é muito irritante para os hackers de verdade.
A diferença básica é esta: hackers constróem coisas, crackes as destróem.
Se você quer ser um hacker, continue lendo. Se você quer ser um cracker, vá ler o newsgroup alt.2600 e se prepare para se dar mal depois de descobrir que você não é tão esperto quanto pensa. E isso é tudo que eu digo sobre crackers.

A Atitude Hacker


Hackers resolvem problemas e constróem coisas, e acreditam na liberdade e na ajuda mútua voluntária. Para ser aceito como um hacker, você tem que se comportar de acordo com essa atitude. E para se comportar de acordo com essa atitude, você tem que realmente acreditar nessa atitude.
Mas se você acha que cultivar a atitude hacker é somente um meio para ganhar aceitação na cultura, está enganado. Tornar-se o tipo de pessoa que acredita nessas coisas é importante para você -- para ajudá-lo a aprender e manter-se motivado. Assim como em todas as artes criativas, o modo mais efetivo para se tornar um mestre é imitar a mentalidade dos mestres -- não só intelectualmente como emocionalmente também.
Então, se você quer ser um hacker, repita as seguinte coisas até que você acredite nelas:
1. O mundo está repleto de problemas fascinantes esperando para serem resolvidos.

Ser hacker é muito divertido, mas é um tipo de diversão que necessita de muito esforço. Para haver esforço é necessário motivação. Atletas de sucesso retiram sua motivação de uma espécie de prazer físico em trabalhar seus corpos, em tentar ultrapassar seus próprios limites físicos. Analogamente, para ser um hacker você precisa ter uma emoção básica em resolver problemas, afiar suas habilidades e exercitar sua inteligência. Se você não é o tipo de pessoa que se sente assim naturalmente, você precisará se tornar uma para ser um hacker. Senão, você verá sua energia para "hackear" sendo esvaída por distrações como sexo, dinheiro e aprovação social.
(Você também tem que desenvolver uma espécie de fé na sua própria capacidade de aprendizado -- crer que, mesmo que você não saiba tudo o que precisa para resolver um problema, se souber uma parte e aprender a partir disso, conseguirá aprender o suficiente para resolver a próxima parte -- e assim por diante, até que você termine.)
2. Não se deve resolver o mesmo problema duas vezes.

Mentes criativas são um recurso valioso e limitado. Não devem ser desperdiçadas reinventando a roda quando há tantos problemas novos e fascinantes por aí.
Para se comportar como um hacker, você tem que acreditar que o tempo de pensamento dos outros hackers é precioso -- tanto que é quase um dever moral compartilhar informação, resolver problemas e depois dar as soluções, para que outros hackers possam resolvernovos problemas ao invés de ter que se preocupar com os antigos indefinidamente. (Você não tem que acreditar que é obrigado a dartoda a sua produção criativa, ainda que hackers que o fazem sejam os mais respeitados pelos outros hackers. Não é inconsistente com os valores do hacker vender o suficiente da sua produção para mantê-lo alimentado e pagar o aluguel e computadores. Não é inconsistente usar suas habilidades de hacker para sustentar a família ou mesmo ficar rico, contanto que você não esqueça que é um hacker.)
3. Tédio e trabalho repetitivo são nocivos.

Hackers (e pessoas criativas em geral) não podem ficar entediadas ou ter que fazer trabalho repetitivo, porque quando isso acontece significa que eles não estão fazendo o que apenas eles podem fazer -- resolver novos problemas. Esse desperdício prejudica a todos. Portanto, tédio e trabalho repetitivo não são apenas desagradáveis, mas nocivos também.
Para se comportar como um hacker, você tem que acreditar nisso de modo a automatizar as partes chatas tanto quanto possível, não apenas para você como para as outras pessoas (principalmente outros hackers).
(Há uma exceção aparente a isso. Às vezes, hackers fazem coisas que podem parecer repetitivas ou tediosas para um observador, como um exercício de "limpeza mental", ou para adquirir uma habilidade ou ter uma espécie particular de experiência que não seria possível de outro modo. Mas isso é por opção -- ninguém que consiga pensar deve ser forçado ao tédio.
4. Liberdade é uma coisa boa.

Hacker são naturalmente anti-autoritários. Qualquer pessoa que lhe dê ordens pode impedi-lo de resolver qualquer que seja o problema pelo qual você está fascinado -- e, dado o modo em que a mente autoritária funciona, geralmente arranjará alguma desculpa espantosamente idiota isso. Então, a atitude autoritária deve ser combatida onde quer que você a encontre, para que não sufoque a você e a outros hackers.
(Isso não é a mesma coisa que combater toda e qualquer autoridade. Crianças precisam ser orientadas, e criminosos, detidos. Um hacker pode aceitar alguns tipos de autoridade a fim de obter algo que ele quer mais que o tempo que ele gasta seguindo ordens. Mas isso é uma barganha restrita e consciente; não é o tipo de sujeição pessoal que os autoritários querem.)
Pessoas autoritárias prosperam na censura e no segredo. E desconfiam de cooperação voluntária e compartilhamento de informação -- só gostam de "cooperação" que eles possam controlar. Então, para se comportar como um hacker, você tem que desenvolver uma hostilidade instintiva à censura, ao segredo, e ao uso da força ou mentira para compelir adultos responsáveis. E você tem que estar disposto a agir de acordo com esta crença.
5. Atitude não substitui competência.

Para ser um hacker, você tem que desenvolver algumas dessas atitudes. Mas apenas ter uma atitude não fará de você um hacker, assim como não o fará um atleta campeão ou uma estrela de rock. Para se tornar um hacker é necessário inteligência, prática, dedicação, e trabalho duro.
Portanto, você tem que aprender a desconfiar de atitude e respeitar todo tipo de competência. Hackers não deixam posers gastar seu tempo, mas eles idolatram competência -- especialmente competência em "hackear", mas competência em qualquer coisa é boa. A competência em habilidades que poucos conseguem dominar é especialmente boa, e competência em habilidades que involvem agudeza mental, perícia e concentração é a melhor.
Se você reverenciar competência, gostará de desenvolvê-la em si mesmo -- o trabalho duro e dedicação se tornará uma espécie de um intenso jogo, ao invés de trabalho repetitivo. E isso é vital para se tornar um hacker.

Habilidades básicas do hacker


A atitude hacker é vital, mas habilidades são ainda mais vitais. Atitude não substitui competência, e há uma certo conjunto de habilidades que você precisa ter antes que um hacker sonhe em lhe chamar de um.
Esse conjunto muda lentamente com o tempo, de acordo com a criação de novas habilidades. Por exemplo, costumava incluir programação em linguagem de máquina, e até recentemente não incluía HTML. Mas agora é certo que inclui o seguinte:
1. Aprenda a programar.

Essa é, claro, a habilidade básica do hacker. Em 1997, a linguagem que você absolutamente precisa aprender é C (apesar de não ser a que você deve aprender primeiro). Mas você não é um hacker e nem mesmo um programador se você souber apenas uma linguagem -- você tem que aprender a pensar sobre problemas de programação de um modo geral, independentemente de qualquer linguagem. Para ser um hacker de verdade, você precisa ter chegado ao ponto de conseguir aprender uma nova linguagem em questão de dias, relacionando o que está no manual ao que você já sabe. Isso significa que você deve aprender várias linguagens bem diferentes.
Além de C, você também deve aprender pelo menos LISP e Perl (e Java está tentando pegar um lugar nessa lista). Além de serem as linguagens mais importantes para hackear, cada uma delas representa abordagens à programaçaão bem diferentes, e todas o educarão em pontos importantes.
Eu nao posso lhe dar instruções completas sobre como aprender a programar aqui -- é uma habilidade complexa. Mas eu posso lhe dizer que livros e cursos também não servirão (muitos, talvez a maioria dos melhores hacker são auto-didatas). O que servirá é (a)ler código e (b) escrever código.
Aprender a programar é como aprender a escrever bem em linguagem natural. A melhor maneira é ler um pouco dos mestres da forma, escrever algumas coisas, ler mais um monte, escrever mais um monte, ler mais um monte, escrever... e repetir até que seu estilo comece a desenvolver o tipo de força e economia que você vê em seus modelos.
Achar bom código para ler costumava ser difícil, porque havia poucos programas grandes disponíveis em código-fonte para que hackers novatos pudessem ler e mexer. Essa situação mudou dramaticamente; open-source software (software com código-fonte aberto), ferramentas de programação, e sistemas operacionais (todos feitos por hackers) estão amplamente disponíveis atualmente.
2. Pegue um dos Unixes livres e aprenda a mexer.

Estou assumindo que você tem um computador pessoal ou tem acesso a um (essas crianças de hoje em dia tem tão facilmente :-)). O passo mais importante que um novato deve dar para adquirir habilidades de hacker é pegar uma cópia do Linux ou de um dos BSD-Unixes, o instalar em um PC, e rodá-lo.
Sim, há outros sistemas operacionais no mundo além do Unix. Porém, eles são distribuídos em forma binária -- você não consegue ler o código, e você não consegue modificá-lo. Tentar aprender a "hackear" em DOS, Windows ou MacOS é como tentar aprender a dançar com o corpo engessado.
Além disso, Unix é o sistema operacional da Internet. Embora você possa aprender a usar a Internet sem conhecer Unix, você não pode ser um hacker sem entendê-lo. Por isso, a cultura hacker, atualmente, é fortemente centralizada no Unix. (Não foi sempre assim, e alguns hackers da velha guarda não gostam da situação atual, mas a simbiose entre o Unix e a Internet se tornou tão forte que até mesmo o músculo da Microsoft não parece ser capaz de ameacá-la seriamente.)
Então, pegue um Unix -- eu gosto do Linux, mas existem outros caminhos. Aprenda. Rode. Mexa. Acesse a Internet através dele. Leia o código. Modifique o código. Você terá ferramentas de programação (incluindo C, Lisp e Perl) melhores do qualquer sistema operacional da Microsoft pode sonhar em ter, você se divertirá, e irá absorver mais conhecimento do que perceber, até que você olhará para trás como um mestre hacker.
3. Aprenda a usar a World Wide Web e escrever em HTML.

A maioria das coisas que a cultura hacker tem construído funciona "invisivelmente", ajudando no funcionamento de fábricas, escritórios e universidades sem nenhum óbvio na vida dos não-hackers. A Web é a grande exceção, o enorme e brilhante brinquedo dos hackers que até mesmo políticos admitem que está mudando o mundo. Por esse motivo (e vários outros também) você precisa a aprender como trabalhar na Web.
Isso não significa apenas aprender a mexer em um browser (qualquer um faz isso), mas aprender a programar em HTML, a linguagem de markup da Web. Se você não sabe programar, escrever em HTML lhe ensinará alguns hábitos mentais que o ajudarão. Então faça uma home page.
Mas apenas ter uma home page não chega nem perto de torná-lo um hacker. A Web está repleta de home pages. A maioria delas é inútil, porcaria sem conteúdo -- porcaria muito bem apresentada, note bem, mas porcaria mesmo assim (mais sobre esse assunto nesta pagina mais abaixo).
Para valer a pena, sua página deve ter conteúdo -- deve ser interessante e/ou útil para outros hackers. E isso nos leva ao próximo assunto...

Status na Cultura Hacker


Como a maioria das culturas sem economia monetária, a do hacker se baseia em reputação. Você está tentando resolver problemas interessantes, mas quão interessantes eles são, e se suas soluções são realmente boas, é algo que somente seus iguais ou superiores tecnicamente são normalmente capazes de julgar.
Conseqüentemente, quando você joga o jogo do hacker, você aprende a marcar pontos principalmente pelo que outros hackers pensam da sua habilidade (por isso você não é hacker até que outros hackers lhe chamem assim). Esse fato é obscurecido pela imagem solitária que se faz do trabalho do hacker; e também por um tabu hacker-cultural que é contra admitir que o ego ou a aprovação externa estão envolvidas na motivação de alguém.
Especificamente, a cultura hacker é o que os antropologistas chamam de cultura de doação. Você ganha status e reputação não por dominar outras pessoas, nem por ser bonito, nem por ter coisas que as pessoas querem, mas sim por doar coisas. Especificamente, por doar seu tempo, sua criatividade, e os resultados de sua habilidade.
Há basicamente cinco tipos de coisas que você pode fazer para ser respeitado por hackers:
1. Escrever open-source software.

O primeiro (o mais central e mais tradicional) é escrever programas que outros hackers achem divertidos ou úteis, e dar o código-fonte para que toda a cultura hacker use.
(Nós costumávamos chamar isto de "free software", mas isso confundia muitas pessoas que não sabiam ao certo o significado de "free". Agora, muitos de nós preferem o termo "open-source" software).
[nota do tradutor: "free" significa tanto "livre" como "gratuito", daí a confusão. O significado que se pretende é "livre".] Os "semi-deuses" mais venerados da cultura hacker são pessoas que escreveram programas grandes, competentes, que encontraram uma grande demanda e os distribuíram para que todos pudessem usar.
2. Ajude a testar e depurar open-source software

Também estão servindo os que depuram open-source software. Neste mundo imperfeito, inevitavelmente passamos a maior parte do tempo de desenvolvimento na fase de depuração. Por isso, qualquer autor de open-source software que pense lhe dirá que bons beta-testers (que saibam descrever sintomas claramente, localizar problemas, tolerar bugs em um lançamento apressado, e estejam dispostos a aplicar algumas rotinas de diagnóstico) valem seu peso em ouro. Até mesmo um desses beta-testers pode fazer a diferença entre uma fase de depuração virar um longo e cansativo pesadelo, ou ser apenas um aborrecimento saudável. Se você é um novato, tente achar um programa sob desenvolvimento em que você esteja interessado e seja um bom beta-tester. Há um progressão natural de ajudar a testar programas para ajudar a depurar e depois ajudar a modificá-los. Você aprenderá muito assim, e criará um bom karma com pessoas que lhe ajudarão depois.
3. Publique informação útil.

Outra boa coisa a se fazer é coletar e filtrar informações úteis e interessantes em páginas da Web ou documentos como FAQs ("Frequently Asked Questions lists", ou listas de perguntas freqüentes), e torne-os disponíveis ao público.
Mantenedores de grandes FAQs técnicos são quase tão respeitados quanto autores de open-source software.
4. Ajude a manter a infra-estrutura funcionando.

A cultura hacker (e o desenvolvimento da Internet, quanto a isso) é mantida por voluntários. Existe muito trabalho sem glamour que precisa ser feito para mantê-la viva -- administrar listas de email, moderar grupos de discussão, manter grandes sites que armazenam software, desenvolver RFCs e outros padrões técnicos.
Pessoas que fazem bem esse tipo de coisa são muito respeitadas, porque todo mundo sabe que esses serviços tomam muito tempo e não são tão divertidos como mexer em código. Fazê-los mostra dedicação.
5. Sirva a cultura hacker em si.

Finalmente, você pode servir e propagar a cultura em si (por exemplo, escrevendo um apurado manual sobre como se tornar um hacker :-)). Você só terá condição de fazer isso depois de ter estado por aí por um certo tempo, e ter se tornado conhecido por uma das primeiras quatro coisas.
A cultura hacker não têm líderes, mas têm seus heróis culturais, "chefes tribais", historiadores e porta-vozes. Depois de ter passado tempo suficiente nas trincheiras, você pode ser tornar um desses. Cuidado: hackers desconfiam de egos espalhafatosos em seus "chefes tribais", então procurar visivelmente por esse tipo de fama é perigoso. Ao invés de se esforçar pela fama, você tem que de certo modo se posicionar de modo que ela "caia" em você, e então ser modesto e cortês sobre seu status.

A Conexão Hacker/Nerd


Contrariamente ao mito popular, você não tem que ser um nerd para ser um hacker. Ajuda, entretanto, e muitos hackers são de fato nerds. Ser um proscrito social o ajuda a se manter concentrado nas coisas realmente importantes, como pensar e "hackear".
Por isso, muitos hackers adotaram o rótulo "nerd", e até mesmo usam o termo (mais duro) "geek" como um símbolo de orgulho -- é um modo de declarar sua independência de expectativas sociais normais.
Se você consegue se concentrar o suficiente em hackear para ser bom nisso, e ainda ter uma vida, está ótimo. Isso é bem mais fácil hoje do que quando era um novato nos anos 70; atualmente a cultura mainstream é muito mais receptiva a tecno-nerds. Há até mesmo um número crescente de pessoas que percebem que hackers são, frequentemente, amantes e cônjuges de alta qualidade. Girl's Guide to Geek Guys.
Se hackear o atrai porque você não vive, tudo bem -- pelo menos você não terá problemas para se concentrar. Talvez você consiga uma vida normal depois.
Pontos Sobre Estilo

Para ser um hacker, você tem que entrar na mentalidade hacker. Há algumas coisas que você pode fazer quando não estiver na frente de um computador e que podem ajudar. Não substituem o ato de hackear (nada substitui isso), mas muitos hackers as fazem, e sentem que elas estão ligadas de uma maneira básica com a essência do hacking.
Leia ficção científica. Freqüente convenções de ficção científica (uma boa maneira de encontrar hackers e proto-hackers).
Stude o Zen, e/ou faça artes marciais. (A disciplina mental parece similar em pontos importantes).
Desenvolva um ouvido analítico para música. Aprenda a apreciar tipos peculiares de música. Aprenda a tocar bem algum instrumento musical, ou a cantar.
Desenvolva sua apreciação de trocadilhos e jogo de palavras.
Aprenda a escrever bem em sua língua nativa. (Um número surpreendente de hackers, incluindo todos os melhores que eu conheço, são bons escritores.)
Quanto mais dessas coisas você já fizer, mais provável que você tenha naturalmente um material hacker. Por que essas coisas em particular não é completamente claro, mas elas são ligadas com uma mistura de habilidades dos lados esquerdo e direito do cérebro que parece ser muito importante (hackers precisam ser capazes de tanto raciocinar logicamente quanto pôr de lado, de uma hora para outra, a lógica aparente do problema).
Finalmente, algumas coisas a não serem feitas.
Não use um nome de usuário ou pseudônimo bobo e grandioso.
Não entre em flame wars ("guerrinhas") na Usenet (ou em qualquer outro lugar).
Não se auto-intitule um "cyberpunk", e não perca seu tempo com alguém que o faça.
Não poste ou escreve email cheio de erros de ortografia e gramática.
A única reputação que você conseguirá fazendo alguma dessas coisas é a de um twit [um chato, geralmente filtrado nos grupos de discussão]. Hackers tem boa memória -- pode levar anos antes que você se reabilite o suficiente para ser aceito.
Outros Recursos

 Bom para vocês pegar apostilas muito boa basta você fazer uma conexão ftp a este site : http://www.cirp.usp.br e puxar as aspotilas la tem varias apostilas, e se preparem para ler e aprender...
Perguntas Frequentes

Q: Você me ensina como "hackear"?

Desde que publiquei essa página, recebi vários pedidos por semana de pessoas querendo que eu "ensinasse tudo sobre hacking". Infelizmente, eu não tenho tempo nem energia para isso; meus próprios projetos hackers tomam 110% do meu tempo.
Mesmo se eu fizesse, hacking é uma atitude e uma habilidade na qual você tem que basicamente ser auto-didata. Você verá que, embora hackers de verdade queiram lhe ajudar, eles não o respeitarão se você pedir "mastigado" tudo que eles sabem.
Aprenda algumas coisas primeiro. Mostre que você está tentando, que você é capaz de aprender sozinho. Depois faça perguntas aos hackers que encontrar.
Q: Onde eu posso encontrar hackers de verdade para conversar?

Bem, não no IRC, com certeza -- lá só existem flamers e crackers. A melhor maneira é encontrar um grupo de usuários local de Unix ou Linux, e freqüentar as reuniões.
Q: Que linguagem devo aprender primeiro?

HTML, se você ainda não souber. Existe um monte de livros sobre HTML lustrosos, modistas e ruins por aí e, infelizmente, pouquíssimos bons, mas também tem o tutorial que eu postei aqui neste blog. O livro de que mais gosto é Biblioteca Universal de Informática uma edição limitada muito boa sobre varias coisas sobre pc's.
Quando você estiver pronto pra começar a programar, eu recomendaria começar com Perl ou Python. C é realmente importante, mas muito mais difícil. (Use o Google Chrome para traduzir as paginas).
Q: Mas o open-source software não deixará os programadores incapazes de ganhar a vida?

Parece improvável -- até agora, a indústria de open-source software parece estar criando empregos ao invés de tirá-los. Se ter escrito um programa é ganho econômico em relação a não tê-lo escrito, um programador será pago independentemente de o programa ser livre depois de feito. E, independentemente de quanto open-source software é feito, sempre parece haver mais demanda por aplicações novas e personalizadas.

HTML Básico

Este artigo trata de uma introdução ao HTML. O HTML é uma abreviação de HyperText Markup Language ou seja que em português significa, Linguagem de marcação de Hipertexto. Os arquivos HTML são interpretados pelos navegadores (browsers), portanto, caso você tenha algum arquivo HTML no computador, basta pedir que o seu navegador abra ele.
O HTML trabalha com o sistema de tags (etiquetas). Esse sistema funciona da seguinte maneira.
Ex:
1
<tag>Conteúdo da tag</tag>
Toda tag aberta, deve ser fechada, salvo raras exceções, nesses casos ela pode ser fechada da seguinte maneira:
1
<tag />
Uma tag HTML pode conter outra tag dentro dela, e quantas forem necessárias.
1
2
3
<tag>
  <outraTag>texto</outraTag>
</tag>
Algumas tag's possuem propriedades que podem possuir valores. Um exemplo claro é a tag de imagem que possui o caminho da imagem.
1
<img src="caminhoImg.jpg" />

É importante seguir alguns padrões ao criar seu arquivo HTML.

- Primeiramente tente sempre que possível usar as letras em caixa baixa, ou seja, todas em minúsculo.
- Nesse artigo irei abordar somente o HTML. Antigamente os desenvolvedores personalizavam a aparência da página no próprio HTML, porém atualmente estamos fazendo isso pelo arquivo CSS. Portanto, caso gostem desse artigo, posso escrever um sobre CSS básico para personalizar uma página HTML
- O comentário em HTML é feito da seguinte maneira <!–Comentário a seguir –>
- Tente manter seu documento indentado para facilitar a manutenção. Uma tabulação com 2-4 espaços é o suficiente para ajudar na endentação do documento.
Ex:
1
2
3
<tag>
  <outraTag />
</tag>
- Evitem de colocar elementos redundantes no código. Um uso comum é o de <br /> para pular linhas e definir uma altura para um elemento, enquanto o correto seria definir a altura através do Css.
- Uma página HTML tem a extensão .html, porém elas podem ser geradas dinamicamente com alguma linguagem com o PHP, ASP, PYTHON… Então em alguns casos essa extensão é alterada para a extensão da linguagem utilizada para gerar a página HTML.

Quais editores HTML usar.

Para escrever código HTML basta um simples editor de texto como o bloco de notas (notepad). Porém eu recomendo editores mais robustos para facilitar um pouco sua vida. Os principais são es seguintes:
Sublime Text 2: Considero o melhor editor atualmente. Experimente usar a extensão Zen Coding em conjunto com ele e experimente o máximo da performance ao criar seus arquivos HTML.
Notepad ++: Outro excelente editor. Possui uma interface simples mas é bem poderoso também.
Dreamweaver: Um excelente editor para iniciantes. Cuidado com o modo Design. Evite de editar seu HTML por ele pois ele não gera um código muito semântico.

Vou abordar agora as principais tags HTML e explicar um pouco de seu funcionamento.

HTML – <html> </html>
Essa tag é responsável por definir o início de um documento HTML e seu fim. Logo deve ser aberta no início do documento e fechado no seu final.
HEAD – <head></head>
Tag que define o início e o fim do cabeçalho do documento. Abordaremos mais abaixo o que deve ser inserido no cabeçalho.
BODY – <body></body>
Tag onde devem ser inseridos os conteúdos do site que deverão ficar visíveis ao usuários quando a página for renderizada no navegador.
Somente com essas três tags já podemos ter uma estrutura HTML básica. Segue um exemplo.
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
    <head>
        <!--conteudo do head-->
    </head>
    <body>
        <!--conteudo do body-->
    </body>
</html>
O <!DOCTYPE html> inserido antes da tag <html> no exemplo anterior é para especificar para o navegador o tipo de página HTML que ele vai renderizar. Existem diferentes tipos de HTML usados atualmente porém os mais usados são o HTML 5, cujo doctype especificado é o que eu utilizei no exemplo, o HTML 4.1 e o XHTML. Nos últimos dois exemplos o doctype é um pouco mais complexo, trazendo informações sobre o tipo de documento (Strict, transitional e frameset). Porém recomendo que sempre utilizem o doctype do HTML 5, pois ele é mais enxuto e mesmo que não utilize HTML 5 em sua página não vai prejudicar em nada a renderização da página pelo browser.

Cabeçalho <head>

No cabeçalho trazemos informações que serão usadas pelo navegador como:
TITLE – <title>Sou o título da página</title>
Título da página a ser exibido (texto que fica na aba de seu navegador quando uma página esta aberta)
LINK – <link href="" type="" media="" rel="" />
Geralmente usado para selecionar arquivo externo no HTML. Um uso comum dele é para selecionar arquivos CSS (responsáveis por definir a aparência da sua página para o usuário final).
Ex:
1
<link href="estilo.css" type="text/css" media="screen" rel="stylesheet" />


Nessa linha, definimos que arquivo a ser utilizado na página é do tipo CSS, para ser renderizado em telas (Monitores, TV's, smartphones…)
METATAGS – code><meta name="" content="" />
Metatags tem uma infinidade de funções que não irei citar aqui, porém nesse link existem mais informações sobre todas elas, http://www.w3.org/TR/html401/struct/global.html#h-7.4.4.
Atualmente só costumo utilizar duas. Uma para referenciar para os buscadores um breve resumo sobre a página, chamada DESCRIPTION. O seu uso é basicamente da seguinte forma:
<meta name="description" content="Aqui entra o resumo sobre a página. É recomendável que você não ultrapasse 160 caracteres nesse texto" />
E a metatag CHARSET. Com ela você define que tipo de codificação que o seu texto vai usar ao ser renderizado pelo navegador. Recomendo utilizar o utf-8 mesmo. Porém existem casos onde é preciso usar uma diferente. Existem duas formas de usar o charset. Uma para HTML 5 e uma para os demais. Seguem os exemplos:
HTML 5: <code><meta charset="utf-8" /></code>
Demais: <code><meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ /></code>
Novamente, recomendo utilizar a marcação do HTML 5 por ser mais enxuta.
Existe ainda a tag <script> que é chamada no cabeçalho por alguns desenvolvedores, porém, prefiro chama-la no final do <body> para não atrapalhar no carregamento dos demais componentes de suas página.
Segue uma exemplo de um cabeçalho:
1
2
3
4
5
6
7
<!doctype html>
<head>
    <title>Título da página</title>
    <meta charset="utf-8" />
    <meta name="description" content="Breve resumo sobre o conteúdo desta página" />
    <link href="estilo.css" rel="stylesheet" type="text/css" />
</head>

Corpo da página – <body>

Dentro da tag <body> é que vão entrar todos os elementos que ficarão visíveis aos usuários. As tags usadas dentro do body podem ser divididas em inline e block. Tags inline são tags que mantem o fluxo comum do conteúdo e tags block quebram o fluxo e geram o elemento abaixo do último block. Você pode usar uma tag inline dentro de uma block, mas não pode usar uma block dentro de uma inline por questões de semântica.
Vou agrupa as principais tags e explicar o seu funcionamento:
<h1></h1>– O H1 é utilizado para marcar um título. Você pode utilizar diversos níveis de relevância, para isso basta mudar o número na tag. As heading tags como são chamadas, vão de 1 á 6. Ou seja, você pode ter um<h1></h1> <h2></h2> … <h6></h6>. É recomendável por questões de otimização e semântica que você utilize apenas um <h1>, que seria o título da página como um todo, e que posicione ele o quanto antes no <body>. Porém as demais tags de título podem ser usadas conforme a necessidade.
Ex:
1
<h1>Sou um título relevante</h1>
<p></p>– O P é utilizado para definir um parágrafo.
Ex:
1
<p>Sou um elemento de parágrafo</p>
<span></span>– SPAN é uma tag inline usada para marcar um trecho de texto. Ele é frequentemente usado para personalizar um trecho de texto em um paragráfo via css, já que naturalmente não altera nada no HTML.
Ex:
1
<p>Sou um<span>pequeno parágrafo</span></p>
<Strong></Strong>– O STRONG é utilizado para deixar um texto em negrito. A tag <b></b> tem um comportamento semelhante porém a W3C recomenda utilizar o <Strong>.
Ex:
1
<p>O trecho a seguir está em<b>negrito</b></p>
<em></em>– A tag EM é utilizada para deixar um elemento em itálico. A tag <i> foi utilizada durante muito tempo para isso porém a W3C recomenda que utilize o <em> mesmo.
Ex:
1
<p>O trecho a seguir está em<em>itálico</em></p>
<u></u>– A tag U é usada para sublinhar um termo.
Ex:
1
<p>Pequeno texto com trecho<u>sublinhado</u></p>
<br />– A tag BR é utilizada para definir uma quebra de linha. Seu uso deve ser cauteloso. Evite usar muitos BR's em casos onde deveriam existir paragráfos.
Ex:
1
2
<p>Primeira linha<br />
  segunda linha</p>
<ul></ul> – <ol></ol> – <li></li>– Os elementos UL e OL são usados para iniciar uma lista, sendo o <ul> para uma sem ordenação numérica e o <ol> para uma com ordenação numérica. Os elementos dentro dessa lista devem ser marcados com a tag LI.
Ex:
1
2
3
4
<ul>
  <li>Sou um elemento de uma lista</li>
  <li>Sou outro elemento dentro da lista</li>
</ul>
<a></a>– O A é um elemento responsável por "linkar" páginas/arquivos na sua página. Através do atributo href você pode especificar aonde está a página/arquivo a ser linkado na página.
Ex:
1
2
<a href="clientes.html">Página de clientes</a>
<a href="currículo.pdf">Curriculo</a>
Link externo:
1
<a href=http://www.siteexterno.com>Site externo sendo linkado</a>


<img /> – A tag IMG é usada para renderizar uma imagem no site. É necessário que o campo src seja preenchido com o caminho para a imagem. Os campos width e height devem ser preenchidos com a largura e a altura da imagem em pixels, é muito importante que esse campo esteja sempre preenchido para evitar que o navegador tenha que calcular sozinho o tamanho da imagem. O campo alt, deve conter uma pequena descrição da imagem para o caso do navegador não conseguir reproduzir a imagem e por questões de acessibilidade para leitores de tela usados por cegos.
Ex:

1
<img src="imagem.jpg" width="50" height="50" alt="Descrição da imagem" />
<div></div>– O DIV é uma tag de bloco, usado para agrupar elementos semelhantes. Um uso comum dele é para categorizar o cabeçalho (Header) da página, o conteúdo (content) e o rodapé (footer). É muito utilizado para auxiliar na personalização do site através do Css.
Ex:
1
2
3
4
<div>
  <h2>Título relevante</h2>
  <p>Texto do bloco</p>
  <img src="alerta.jpg" width="10" height="7" alt="alerta" /></div>
<table></table> – <td></td> – <tr></tr> – A tag TABLE é usada para dermacar uma tabela. As linhas são marcadas com a tag TR enquanto as colunas ficam com a tag TD. É possível agrupar colunas com o atributo colspan e linhas com o atributo rowspan. Um <td colspan="2"></td> significa que aquela coluna vai ocupar o espaço de duas colunas.
Ex: Tabela 2×2
1
2
3
4
5
6
7
8
9
10
<table>
  <tr>
    <td>Primeira coluna da primeira linha</td>
    <td>Segunda coluna da primeira linha</td>
  </tr>
  <tr>
    <td>Primeira coluna da segunda linha</td>
    <td>Segunda coluna da segunda linha</td>
  </tr>
</table>
<form></form>– A tag FORM serve para demarcar a área de um formulário. No caso do form abordarei as tags utilizadas por ele em grupos diferentes pois são muitos. A tag form tem o atributo action, que determina qual ação vai ser executada quando ele for submetido.
Ex:
1
2
<form action="envioFormulario.php">
</form>
<input />– A tag INPUT pode adquirir características especificas de acordo com o atributo type que ele receber.
Ex:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<input type="text" value="Digite aqui" />
<!--Campo onde o usuário pode digitar um pequeno texto.
Caso queira deixar um valor por padrão,
basta adicionar um atributo value com o valor desejado.-->
<input type="submit" />
<!-- Cria um botão que vai submeter o formulário ao ser clicado.-->
<input type="file" />
<!-- Cria um campo para fazer uploads de arquivos.-->
<input type="radio" type="grupo" />
<!-- Cria um campo para seleção única.
As opções disponíveis são agrupadas pelo type, ou seja,
se houverem 3 inputs radio com o mesmo type,
o usuário só poderá escolher um deles.-->
<input type="checkbox" />
<!-- Bem semelhante ao radio, porém permite múltipla seleção.-->
<textarea></textarea>– A tag TEXTAREA tem um comportamento semelhante ao do input text, porém ele é destinado a textos maiores.
Ex:
1
<textarea></textarea>
<label></label>– A tag LABEL permite que você atribua uma legenda a um campo do seu formulário. Existem duas formas de usa-la:
Ex:
1-
1
2
3
<label>Sou uma legenda
  <input type="text" />
</label>


2 -
1
2
<label for="campo">Sou uma legenda</label>
<input type="text" id="campo" />

ALGUMAS TAGS HTML 5

Não irei muito a fundo nesse tópico pois boa parte das tags HTML 5 ainda não estão totalmente compatíveis com todos os navegadores. Principalmente quando falamos do Internet Explorer 8 ou inferior.
<header></header>– A tag HEADER serve para limitar o cabeçalho da sua página. Ele foi criado com a intenção de simplificar o famoso <div id="cabecalho"> / <div id="header">. Cuidado para não confundi-lo com a tag HEAD. O HEADER deve ser utilizado dentro do BODY como auxiliar semântico, enquanto o HEAD fica dentro da tag HTML e trás informações somente visíveis para o navegador.
<footer></footer>– O FOOTER assim como o HEADER serve para auxiliar na formatação da página e veio para substituir a famoso <div id="rodapé">/<div id="footer">.
<aside></aside>– A tag ASIDE é utilizada para demarcar as regiões laterais das páginas que geralmente carregam elementos de navegação, ou informações auxiliares ao conteúdo principal.
<section></section> -A tag SECTION tem um funcionamento muito semelhante ao da DIV porém ela serve para demarca que um bloco de conteúdo possui uma relação mais próxima. Enquanto o DIV não carrega valor semântico algum.
<article></article>– A tag ARTICLE serve para definir o conteúdo principal de uma página.
<nav></nav>– A tag NAV é usada para indicar uma navegação. Ela deve ser usada para agrupar links de navegação.
A principal diferença dessas tags novas das DIV's é que elas passam valor semântico enquanto a DIV só serve como auxiliar para formatação, sem passar valor algum.
Caso queiram utilizar as tags citadas acima em qualquer navegador, mesmo que ele não leia HTML 5, basta inserir o seguinte script no final de sua página:
1
2
3
<!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

ID's e CLASS

OsID'ssão atributos que podem ser atribuídos a qualquer tag presente no <body>. Com ele é possível identificar um elemento facilmente. Isso ajuda muito no desenvolvimento do Css e na programação do Javascript (falaremos adiante sobre isso). É importante ressaltar que o ID deve ser único, ou seja, só pode existir um por página.
Exemplos clássicos de ID's são para definir cabeçalhos, rodapés e blocos de conteúdo.
Ex:
1
2
3
<div id="cabeçalho"></div>
<img src="perfil.jpg" height="50" width="20" id="imagemPerfil" />
<span id="horario">12:30</span>
Já oCLASSdeve ser utilizado para agrupar elementos com atribuições semelhantes. Se você vai usar um botão com as mesmas características em vários locais do site, vale a pena colocar um CLASS nele e personalizar somente uma vez no css.
Ex:
1
<input type="submit" value="Enviar" class="botaoForm" />

CSS e JAVASCRIPT

OCssé um arquivo que visa personalizar o modo como seu HTML aparece para o usuário. Ele deve ser chamado dentro da tag <head> no topo do site.
Ex: <code><link href="estilo.css" type="text/css" media="screen" rel="stylesheet" /></code>
OJavascripté uma linguagem muito ponderosa que permite que o desenvolvedor altere elementos na página HTML. O ideal é que ele seja chamado no fim da página (antes do fechamento da tag body) para não atrasar o carregamento dos demais componentes do seu HTML. Caso tenha interesse em estudar, recomendo olhar também a biblioteca javascript jQuery.
Ex:
1
2
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">//Aqui vai o seu código javascript</script>
Vou me conter as esses comentários para não sair do foco do artigo. Em breve postarei sobre Css e Javascript também.

Exemplo de uma página HTML completa:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Título da página</title>
<meta name="description" content="Sou o description da página. Uma breve descreição" />
<link href="css/estilo.css" type=text/css rel=stylesheet>
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header> <a href="/"><img src="logo.jpg" alt="Logo site" width="200" height="50"></a>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="clientes.html">Clientes</a></li>
      <li><a href="empresa.html">Empresa</a></li>
      <li><a href="contato.html">Contato</a></li>
    </ul>
  </nav>
</header>
<section>
  <h1>Sou o título da página</h1>
  <h2>Sou um subtitulo</h2>
  <p>Sou um conteúdo comum.
  <em>Estou em italico</em>.
  <b>Estou em negrito</b>
  <u>Estou sublinhado</u></p>
</section>
<footer>Sou o rodapé</footer>
<script src="js/javascript.js" type="text/javascript"> </script>
</body>
</html>

ORGANIZANDO E HOSPEDANDO SEU SITE

De aqui em diante falarei de coisas que saem um pouco do escopo do HTML mas que são essenciais para o desenvolvimento de um site.
A principal dela é a organização. Seu site vai ter diversos arquivos HTML. Vamos supor que seja um site empresarial. De cara teríamos uma página para a Home, uma para Empresa, uma para Clientes e uma para Contatos. Então na pasta principal do site, teríamos um arquivo home.html (ou index.html), empresa.html, clientes.html e contato.html.
Porém o site teria diversos outros arquivos como por exemplo, arquivos Css, Imagens usadas no site, Javascripts, documentos anexados nas páginas… Então acaba sendo interessante, criar pastas para arquivos semelhantes. Geralmente trabalho com a seguinte estrutura:
- Site (aqui ficam os arquivos html)
– Css (aqui ficam os arquivos css)
– JS (aqui ficam os arquivos javascript)
– Img (aqui ficam as imagens do site)
– Docs (aqui ficam os demais documentos, pdfs, txt…)
Após isso é necessário providenciar duas coisas para que seu site entre de vez no ar. Uma hospedagem e um domínio.
O domínio .com.br pode ser adquirido no registro.br por apenas R$ 30,00 mensais.
Já a hospedagem deve ser paga a uma empresa terceirizada. Existem planos de R$ 10,00 mensais até planos bem mais caros, porém é importante pesquisar o que melhor se adequa ao seu caso. Existem hospedagens gratuitas, porém não recomendo nenhuma delas.
Após o registro do domínio e o plano de hospedagem, vai ser necessário que você envie seus arquivos para o servidor. Para isso é necessário uma programa de envio ftp. Eu recomendo o filezilla (http://filezilla-project.org/). Basta preencher no programa os dados de host, username e password que a hospedagem irá fornecer e subir o seu diretório com os arquivos do site para o servidor. É importante que na raiz do site tenha um arquivo chamado index.html que seria a página inicial do site. Geralmente a pasta raiz do site no servidor se chama public_html.

Musicas

Ouvir Música Dance On-Line? Acesse: www.giro95.com.br