Html para iniciantes + Workflow - Configurando ambiente de desenvolvimento
Durante minha jornada como Desenvolvedor Web, tive oportunidade de experimentar, testar, gostar ou me frustrar com várias ferramentas disponíveis. Desde a edição das imagens até editores de código, existem as mais variadas ferramentas. Para iniciantes, recomendo o editor Notepad++. Existem inúmeros editores de código/webservers/editores de imagem. Gosto do Adobe Dreamweaver pela facilidade de trabalhar com tabelas (Calma, somente para e-mail marketing). Caso o acesso a esses editores, por algum motivo seja impedido, sugiro que abra seu editor de texto (Notepad mesmo, ou Wordpad se estiver com frescura) e mãos à obra!
Dica 1 - Seja organizado. Não necessariamente com sua mesa ou quarto (se der também seja) mas com seu código, com seus arquivos. Crie ciúme do seu computador, ame a estrutura de pastas criada por você. Procure lembrar os mínimos detalhes
Dica 2 - Estude Inglês exaustivamente. Se você não tem nenhuma facilidade ou conhecimento em ingles, a recomendação é esta. Caso haja facilidade, não se preocupe. A própria experiência já existente e sua iniciativa decidirão o seu futuro neste quesito. Inglês é um requisito básico no nosso mundo americano-centralizado.
Dica 3 - Instale o webserver Xampp. Creio ter versão dele para linux, embore eu use Windows na construção de 100% dos meus projetos. Não como webserver (este uso Linux), mas como sistema-padrão o qual eu domino e também tenho muito amor. Essa “Linuxmania” é muito mainstream. O tio Bill também sabe construir sistemas, O.S’s pagos também podem muito ser bons. Independente qual for escolhido por você, ame-o e se torne um especialista - Não que isso te impeça de conheçer novos sis. em uma outra oportunidade
Dica 4 - Instale e estude o Adobe Fireworks CS6.. Apesar de alguns desenvolvedores não gostarem muito dele, acreditando ser coisa do passado, tenho domínio nesta ferramenta e creio ser a de uso mais simples no mercado, em vista da simplicidade dos atalhos, leveza em comparação com o Photoshop e por aí vai. Ele também tem um sistema de clicar e selecionar a layer automaticamente (igual o PS), só que melhorado.
Dica 5 - Instale e estude o Adobe Photoshop CS6.. Querendo ou não, este programa de edição de imagens é o superior no que se diz respeito à tratamento de imagem. Pode não ser MUITO útil agora, pois continuo recomendando o Fireworks como programa principal para layouts, mas acredito que em atividade plena, eles se completam.
Como criar seu primeiro Hello World em HTML:
O conteúdo entre as marcações <!-- e --> estão “comentados” e significam que não são processados pelo navegador, apesar de aparecem no código fonte (mas isso é assunto pra outro capítulo)
- <!DOCTYPE html>
- <html>
- <head>
- <title>Título do meu Hello World</title> <!-- Titulo do documento Web -->
- </head>
- <body>
- <h1>Titulo h1<h1> <!-- Titulo 1 -->
- <h2>Titulo h2<h2> <!-- Titulo 2 -->
- <h3>Titulo h3<h3> <!-- Titulo 3-->
- </body>
- </html>
O navegador interpreta nosso documento html, que por sua vez é composto por tags. cada <tag> começa e termina </tag> desta forma. Onde a primeira indica o início e a outra, o fim do bloco. Nosso documento html também é composto por scripts PHP, que são processados no servidor, ao invés do navegador, como é o caso do HTML. O php, entre tantas outras linguagens disponíveis para back-end, é o responsável por processar os dados que são exibidos pelo nosso documento HTML. Aqui, falaremos about HTML. Only.
Algumas tags não possuem “tag de fechamento”, como por exemplo a de imagem que fica, da forma mais simples, assim: <img src=”caminho-da-imagem/imagem.jpg” />, mas mais uma vez, é assunto para outro capítulo da nossa novela. Então temos:
- A tag <!DOCTYPE html> indica o tipo do nosso documento, que é html
- A tag <html> indica o início do documento HTML
- A tag <head> indica literalmente a “cabeça” do seu documento HTML web
- A tag <title> dentro da tag <head> indica o título do documento, visto que o mesmo está
- inserido dentro da “cabeça” do nosso HTML.
- A tag <body> representa o início do corpo do site. Toda a estrutura do nosso documento se conterá nesta tag.
- As tags <h1>, <h2> e <h3> Indicam um título isolado dentro do corpo do nosso documento HTML, onde h1 é o “maior” título por padrão e o h3 é o “menor”. Existem disponíveis tags de h1 à h6, porém, recomenda-se o uso somente até o 3. Quando for um exímio desenvolvedor, atenção para estas tag, pois são importantes para o posicionamento no google.
Salve o arquivo como teste.html em sua área de trabalho e seu computador provavelmente sugerirá para ser aberto com um navegador (o que estiver setado como padrão no seu OS), pois produzimos um documento web (HTML). Abra-o e se estiver tudo certo, voilá temos nosso olá-mundo!
Nos próximos encontros, abordarei temas como:
- Includes de css para trabalhar os elementos visuais
- Manipulação de css
- Introdução ao HTML 5 e CSS 3
Obrigado!
