• slide2 escola
  • bg escola

Últimos Artigos

Recursividade: Que Geringonça é essa?

Matheus Rocha

  Se você trabalha com Desenvolvimento de Softwares ou até mesmo Websites, provavelment...

VER ARTIGO

Você sabe o que são Funções?

Matheus Rocha

Funções são rotinas especializadas em uma ou várias tarefas, e retornam uma saída, de acordo ...

VER ARTIGO

Fundamentos para Design de E-mail Marketing

Leonardo Volpiano

Existem alguns conceitos que são importante seguirmos para preservar a qualidade de quem está...

VER ARTIGO

Position relative, absolute ou fixed?

Matheus Rocha

  Olá, pessoal! Esse é o começo de uma série de artigos onde abordaremos de forma simpl...

VER ARTIGO

Começando com PHP - Formulário sem Refresh

Matheus Rocha

No mundo do Desenvolvimento Web, podemos notar uma divisão clara entre as a finalidade das li...

VER ARTIGO

O que é Flat Design?

Leonardo Volpiano

Flat Design é uma tendência recente, que defende interfaces simples e claros, entre outras ca...

VER ARTIGO

Web Série - Como construir um bom Layout [1]

Matheus Rocha

  Nesta série de artigos, abordaremos conceitos de design voltados para a web e ao fim...

VER ARTIGO

Você sabe o que é área-útil em um site?

Matheus Rocha

De maneira genérica, a área-útil de um site é a área apta à receber interação do usuário. Todo...

VER ARTIGO

Começando com UX - O que é UX?

Matheus Rocha

O que é UX? O termo User Experience foi criado por Donald Norman no início de 1990, quando e...

VER ARTIGO

Primeiros passos com HTML + CSS

Matheus Rocha

  Aqui, trataremos partindo do princípio de que você já conhece as noções básicas de ht...

VER ARTIGO

Html para iniciantes + Workflow - Configurand…

Matheus Rocha

Durante minha jornada como Desenvolvedor Web, tive oportunidade de experimentar, testar, gost...

VER ARTIGO

Html para iniciantes + Workflow - Configurando ambiente de desenvolvimento

Escrito por Matheus Rocha.

aprenda html na escola web

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)

 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Título do meu Hello World</title> <!-- Titulo do documento Web -->
  5. </head>
  6. <body>
  7. <h1>Titulo h1<h1> <!-- Titulo 1 -->
  8. <h2>Titulo h2<h2> <!-- Titulo 2 -->
  9. <h3>Titulo h3<h3> <!-- Titulo 3-->
  10. </body>
  11. </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:

 

  1. A tag <!DOCTYPE html> indica o tipo do nosso documento, que é html
  2. A tag <html> indica o início do documento HTML
  3. A tag <head> indica literalmente a “cabeça” do seu documento HTML web
  4. A tag <title> dentro da tag <head> indica o título do documento, visto que o mesmo está
  5. inserido dentro da “cabeça” do nosso HTML.
  6. A tag <body> representa o início do corpo do site. Toda a estrutura do nosso documento se conterá nesta tag.
  7. 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!