Por onde eu começo? Muitos desenvolvedores querem aprender desenvolver sites mas não sabem por onde começar... começar... Não conseguem avançar nem sair do lugar. Perdem horas e horas caçando tutorias em diversos sites, mas não tem muito avanço. E quando conseguem criar algo, não fica do jeito que precisava ser ou que o cliente pediu. Mesmo tentando de todas as maneiras ficam completamente perdidos. Essas pessoas até querem criar sites com PHP ou WordPress, porém não tem uma base sólida de HTML. E com isso ficam quebrando a cabeça para fazer algo que deveria ser simples. Erros na página, conteúdo fora de posição e alinhamento, são o pesadelo desses desenvolvedores.
A base para o desenvolvimento de qualquer site Toda obra de construção, seja de casa ou de prédio, tem sua estrutura, seus fundamentos, que são responsáveis por dar sustentação para que todo restante da obra possa ser construído. Assim também é o desenvolvimento de um site, existem fundamentos que precisam ser dominados. A base para o desenvolvimento de qualquer site na internet é o HTML5.
Aprenda a criar sites do zero com HTML5
2
O HTML5 é responsável pela camada de conteúdo de um site. Inserir textos, imagens, vídeos, e áudio na página. Isso é o que chamamos de marcação. Dominando a marcação desses elementos você será capaz de construir qualquer conteúdo na web, e a estrutura de um site, blog, ou post irá ficar muito mais fácil de entender para você. Pensando nisso criamos esse roteiro de estudos para você aprender aquilo que REALMENTE importa de HTML5, os principais comandos e tags para criar sites incríveis. Esse roteiro foi dividido em 2 semanas, sendo 1 hora por dia de estudo (aprendizado e prática). É possível terminar em menos de 2 semanas se você se dedicar mais. Assim você vai pode criar qualquer tipo de site, mesmo que NUNCA tenha criado um site na vida. Quando dominar os temas desse roteiro você vai estar pronto para ir para o próximo nível com CSS, PHP e WordPress, e criar sites, sistemas, temas e plugins incríveis. Bora programar?
Aprenda a criar sites do zero com HTML5
3
Semana 1 Dia 1: Configurações Iniciais e Hello World Para trabalhar com HTML5 vamos usar um software que chamamos de IDE. A IDE vai ser o seu editor de código, o software que você vai usar para programar. Nós recomendamos 3 softwares, use o de sua preferência: Notepad++ Sublime Text PHP Storm •
•
•
Com tudo isso instalado você já pode começar a criar seus arquivos .html Abra uma nova página em branco no seu IDE, por exemplo, Notepad++ e digite o seguinte código exatamente igual: < meta charset="utf-8"> Minha primeira página</ title> </head > <body> <h1>Hello World</h1> </ body> </html><br />
<br />
Depois salve o arquivo com o nome de index.html em qualquer pasta, abra o arquivo com o Google Chrome para ver. Aprenda a criar sites do zero com HTML5<br />
<br />
4<br />
<br />
Dia 2: Títulos e parágrafos Os títulos são usados para destacar frases na página. Toda página deve ter um título principal, e pode ter títulos secundários. Para marcar os títulos principais usamos a tag <h1> e cada página deve ter somente um título principal, exemplo: <h1>Seu título aqui</h1> Para subtítulos usamos desde h2 até h6, e podem ser usamos quantos subtítulos forem necessários: <h2>Sub-título</ h2> <h3>Subtítulo</ h3> <h4>Subtítulo</ h4> <h5>Subtítulo</ h5> <h6>Subtítulo</ h6><br />
<br />
Para criarmos parágrafos de texto na página usamos as tags <p> exemplo:<br />
<br />
< p>Esse aqui é um exemplo de texto</ p><br />
<br />
Aprenda a criar sites do zero com HTML5<br />
<br />
5<br />
<br />
Dia 3: Links e Listas Os links servem para direcionar o usuário para outra página ao clicar no trecho marcado. Exemplo de link absoluto (endereço completo na internet): <a href="http://www.google.com" rel="nofollow">Vai para a Google</ a><br />
<br />
Exemplo de link relativo (endereço interno de uma página do site que está dentro da pasta artigos): <a href="artigos/minhapagina.html" rel="nofollow">Vai para Minha Página</a><br />
<br />
Pode ser usado o atributo title para se especificar o título do link ao passar o mouse em cima: <a href="http://www.google.com" title="Site do Google" rel="nofollow"> Vai para a Google </a><br />
<br />
Também pode ser usado o atributo target para abrir o link em uma nova aba: <a href="artigos/minhapagina.html" target="_blank" rel="nofollow"> Vai para Minha Página </a><br />
<br />
Aprenda a criar sites do zero com HTML5<br />
<br />
6<br />
<br />
Dia 3: Links e Listas Para criar listagens de tarefas, características, pontos e etc podemos usar as tags <ul> e <li>, veja o exemplo: <ul> <li>Banana</li> <li>Laranja</ li> <li>Melão</li> <li>Morango</ li> </ul><br />
<br />
As listas também pode ser ordenas por números, usando a tag <ol>, por exemplo: <ol> <li>Banana</li> <li>Laranja</ li> <li>Melão</li> <li>Morango</ li> </ol><br />
<br />
Aprenda a criar sites do zero com HTML5<br />
<br />
7<br />
<br />
Dia 4: Imagens e Tabelas Para inserir fotos, desenhos e imagens no site vamos usar a tag <img>, exemplo: <img src="img/drone.jpg" width="480" height="320" alt="Drone portátil" title="Drone portátil" /><br />
<br />
Repare que a tag <img> não é um container, ela não tem uma tag de fechamento </img>. Para trabalhar com tabelas vamos usar as tags <table>, <tr> para linhas, e <td> para colunas. Por exemplo: <table> <tr> <td align="center" valign="middle" >Fifa</ td > <td >Sony < > br>< br>< br></td </tr> <tr> <td >Pro Evolution</ td > <td >Xbox</td > </tr> <tr> <td >Forza</td > <td >Nintendo</ td > </tr> </table><br />
<br />
Esse código cria uma tabela com 3 linhas e duas colunas em cada linha.<br />
<br />
Aprenda a criar sites do zero com HTML5<br />
<br />
8<br />
<br />
Dia 5: Formulários Os formulários servem para entrada de dados pelo usuário. Como por exemplo um formulário de contato do site. O papel do HTML5 é criar a estrutura de um formulário, mas sozinho ele não vai fazer o envio dos dados para um email ou banco de dados. Para isso é necessário utilizar em conjunto uma linguagem como PHP ou .NET Exemplo de formulário: <form name="form-contato" action="#" method="post"><br />
<br />
br /> <label for="nome">Nome</label>< <input type="text" name="nome" id="nome" placeholder="Digite seu nome" />< br /> br /> <label for="email">Email</label>< <input type="email" name="email" id="email" placeholder="Digite seu email" />< br /> <label for="assunto">Assunto: </label> <select name="assunto" id="assunto"> <option >Dúvida</option> <option >Anunciar</option> <option >Parceria</option> br /> </select><<br />
<br />
br /> <label for="mensagem">Mensagem: </label>< <textarea name="mensagem" id="mensagem" cols="20" rows="10" > br /> </textarea ><<br />
<br />
<input type="Submit" name="s1" value="Enviar" /> </form ><br />
<br />
Aprenda a criar sites do zero com HTML5<br />
<br />
9<br />
<br />
Dia 6: Semântica A marcação semântica serve para dar significado a cada parte do site. Dessa forma quando o Google passar pelo seu site ele vai saber exatamente onde está o cabeçalho, rodapé, barra lateral, artigos, figuras e etc.<br />
<br />
Para criar as marcações semânticas podemos usar tags como <header>, <main>, <section>, <nav>, <footer> e outras.<br />
<br />
Aprenda a criar sites do zero com HTML5<br />
<br />
10<br />
<br />
Dia 6: Semântica Exemplo de página com marcação semântica: <!DOCTYPE html> <html lang="pt-br"> <head > < meta charset="utf-8"> <title>Meu portfólio
Meu portfólio de webdesign & Desenvolvimento Web!
p>
Um site com meus últimos trabalhos.
Bem vindo
Fusce semper id ipsum sed scelerisque. Etiam nec elementum massa.
Dia 7: Comentários HTML Os comentários servem para deixar mensagens que são exibidas apenas para quem visualiza o código fonte do site. Isso ajuda a explicar trechos de código, para que não exista confusão. Usamos as tags para criar comentários. Exemplo de comentário em cima de um título:
Blog de Tecnologia
Os comentários também podem ser usados para desativar trechos de código sem precisar apagá-los da página. Veja o exemplo:
A imagem e o título criados não serão exibidos na página, porém continuam dentro do código fonte da página.
Aprenda a criar sites do zero com HTML5
12
Semana 2 Dia 8: Shortcut Icon O shortcut icon é aquele ícone em miniatura que é exibido no topo esquerdo do navegador. Veja a imagem:
O shorcut icon deve ser inserido dentro do head da página e deve apontar para uma imagem de tamanho recomendado 32x32 pixels em formato PNG ou ICO, veja o exemplo: <meta charset="utf-8"> Shorcute Icon (Favicon)</ title> <link rel="shortcut icon" href="img/html5.png" /> </head ><br />
<br />
Aprenda a criar sites do zero com HTML5<br />
<br />
13<br />
<br />
Dia 9: Vídeo, Áudio e Iframes Você pode inserir vídeo e áudio diretamente no seu site, ou usar serviços como o Youtube. No código a seguir vamos inserir um vídeo em formato MP4: <video width="640" height="480" controls> <source src="video/new-york.mp4" type="video/mp4"> Seu navegador não suporta esse tipo de vídeo. </video><br />
<br />
Para um áudio em MP3 usamos a seguinte tag: <audio controls rel="nofollow"> <source src="audio/hey.mp3" type="audio/mpeg"> </audio><br />
<br />
Os Iframes servem para adicionarmos outros sites dentro do nosso próprio site em janelas menores. Exemplo de página interna: <iframe src="imagens.html" width="1024" height="768" > </iframe><br />
<br />
Exemplo de página externa: <iframe src="https://estudarti.com.br" width="1024" height="768" ></iframe><br />
<br />
Exemplo de vídeo do YouTube <iframe width="560" height="315"<br />
<br />
src="https://www.youtube.com/embed/G7Z1bZoEtzg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><br />
<br />
Aprenda a criar sites do zero com HTML5<br />
<br />
14<br />
<br />
Dia 10: Trabalhando com CSS O CSS (Cascading Style Sheet) serve para estilizar, formatar o conteúdo do site. Ele é responsável pela aparência visual do seu site. É uma linguagem específica para estilização das tags do HTML, e vai controlar opções como tamanho, cores, fonte, largura, altura e espaçamento. Nosso objetivo nesse ebook não é ensinar CSS mas mostrar como se integra com o HTML5. Para trabalhar com CSS você deve inserir uma folha de estilos no head do seu site. Essa folha de estilos é um arquivo .css que vai conter suas regras de estilização. Veja o exemplo: <link rel="stylesheet" type="text/css" href="style.css"><br />
<br />
Para criarmos as regras de estilização da página, devemos marcar nossos elementos HTML com identificadores, quem podem ser ID(identificador único) Class(para múltiplos elementos). Exemplo: <h1 id="titulo">Blog de Tecnologia</h1><br />
<br />
p class="azul">Esse blog tem as últimas notícias de tecnologia.</ p> < < p class="azul">Esse é um outro parágrafo com a mesma classe.</ p><br />
<br />
p class="azul">Terceiro parágrafo com a mesma classe.</ p> <<br />
<br />
Aprenda a criar sites do zero com HTML5<br />
<br />
15<br />
<br />
Dia 10: Trabalhando com CSS Exemplo de folha de estilos CSS:<br />
<br />
h1{ font-size: 48 px; color: #1283ec; }<br />
<br />
#slogan{ color: #d3dadd ; font-size: 32 px; }<br />
<br />
#menu{ list-style: none; margin: 0 px; padding: 0 px; } .azul{<br />
<br />
color: #1283ec; }<br />
<br />
Aprenda a criar sites do zero com HTML5<br />
<br />
16<br />
<br />
Dia 11: SEO O SEO (Search Engine Optimization) é a otimização de sites para motores de busca. O Google, que é o principal motor de busca, tem centenas de diretrizes que são usadas para ranquear os sites nos resultados de busca. Os sites ficam nas primeiras posições no Google são os que recebem mais visitas orgânicas. Podemos otimizar nosso site HTML5 para que ele tenha uma boa estrutura e respeite as normas e diretrizes do Google. Assim quando o robô do Google indexar nosso site ele vai ter maior chance de subir posições. O trabalho de SEO é bem complexo e a otimização do código fonte do site é apenas uma pequena parte do trabalho. Alguns dos pontos que devem ser trabalhados no site: •<br />
<br />
•<br />
<br />
•<br />
<br />
•<br />
<br />
•<br />
<br />
•<br />
<br />
•<br />
<br />
•<br />
<br />
•<br />
<br />
Compactação e cache de imagens Otimização do <title> e <h1> da página com palavras-chave Meta tag Description Uso de URLs amigáveis Criação de sitemap Páginas de erro 404 Velocidade de carregamento Minificação do código fonte Criação de links breadcrumb<br />
<br />
Aprenda a criar sites do zero com HTML5<br />
<br />
17<br />
<br />
Dia 12: Trabalhando com JQuery O Jquery é uma framework JavaScript, ou seja, uma biblioteca de funções que vieram originalmente da linguagem JavaScript. Ele facilita o uso do JavaScript, e te ajuda a fazer mais escrevendo menos código. O JavaScript controla a camada de comportamento de um site. Como por exemplo, efeitos de transição, exibir ou ocultar elementos da página, abrir um pop-up. Exemplo de código Jquery onde é escondido um elemento h1 com o ID titulo da página: <!DOCTYPE html> <html lang="pt-br"> <head > < meta charset="utf-8"> <title>Jquery <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" >
Hello World
<script type="text/javascript">
var
= document.getElementById('titulo'); .style.display = 'none'; titulo $('#titulo').hide(); titulo
Aprenda a criar sites do zero com HTML5
18
Dia 13: Trabalhando com PHP O PHP (PHP: Hipertext Pre-processor) é uma linguagem serverside que é interpretada por um servidor. Para trabalhar com o PHP você precisa de um servidor Apache. Nessa vídeo aula nós ensinamos como instalar o Apache em ambiente local para testes usando o XAMPP. Com o PHP é possível fazer consultas, e inserções em um banco de dados. Escrever laços de repetições e condicionais. O PHP adiciona lógica ao seu site, ou sistema web. Isso aumenta, e muito, suas possibilidades. Exemplo de Hello World com PHP:
Digite esse trecho de código e salve num arquivo como teste.php na pasta c:/xampp/htdocs (mudar se instalou em outro diretório) do seu XAMPP que já deve estar iniciado e depois acesse o endereço http://localhost/teste.php no seu navegador para testar.
Aprenda a criar sites do zero com HTML5
19
Dia 14: Trabalhando com o WordPress O WordPress é uma ferramenta que permite o desenvolvimento de sites, lojas virtuais e sistemas de forma muito mais rápida. É um framework desenvolvido em PHP, que funciona através de templates e plugins. Os templates são utilizados para a parte visual do site, e os plugins para as funcionalidades. Como o WordPress é feito em PHP, também é necessário ter um servidor Apache para executá-lo. Temos uma vídeo aula ensinando a instalar o WordPress em ambiente local para testes. Exemplo de código WordPress para carregar os artigos do blog:
