Primeiros passos com HTML + WORKFLOW

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 – Instale o webserver Xampp. Utilizo Windows na construção de 100% dos meus projetos. Não como webserver, 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.

Dica 3 – 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 4 – 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 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)

Título H1

<h1>Titulo h1</h1>

Título H2

<h2>Titulo h2</h2>

E por fim o H3

<h3>Titulo h3</h3>
  • O navegador interpreta nosso documento html, que por sua vez é composto por tags. cada começa e termina desta forma. Onde a primeira indica o início e a outra, o fim do bloco. Algumas tags não possuem “tag de fechamento”, como por exemplo a de imagem que fica, da forma mais simples, assim , mas mais uma vez, é assunto para outro capítulo da nossa novela. Então temos: A tag indica o tipo do nosso documento, que é html
  • A tag indica o início do documento HTML
  • A tag indica literalmente a “cabeça” do seu documento HTML web
  • A tag dentro da tag indica o título do documento, visto que o mesmo está inserido dentro da “cabeça” do nosso HTML. A tag 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!