Crie Sites Do Zero Com html5 PDF

Por onde eu começo?
Muitos desenvolvedores querem aprender desenvolver sites mas

não sabem por onde 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 2

HTML5
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?

HTML5
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:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Minha primeira página</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Depois salve o arquivo com o nome de index.html em
qualquer pasta, abra o arquivo com o Google Chrome para ver.

HTML5
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>
Para criarmos parágrafos de texto na página usamos as tags <p>

exemplo:
<p>Esse aqui é um exemplo de texto</p>

HTML5
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">Vai para a Google</a>
Exemplo de link relativo (endereço interno de uma página do

site que está dentro da pasta artigos):
<a href="artigos/minhapagina.html">Vai para Minha Página</a>
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">

Vai para a Google
</a>
Também pode ser usado o atributo target para abrir o link em

uma nova aba:
<a href="artigos/minhapagina.html" target="_blank">

Vai para Minha Página
</a>

HTML5
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>
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>

HTML5
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" />
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>
Esse código cria uma tabela com 3 linhas e duas colunas em cada
linha.

HTML5
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">
<label for="nome">Nome</label><br />

<input type="text" name="nome" id="nome"
placeholder="Digite seu nome" /><br />
<label for="email">Email</label><br />
<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>
</select><br />
<label for="mensagem">Mensagem: </label><br />

<textarea name="mensagem" id="mensagem" cols="20" rows="10" >
</textarea><br />
<input type="Submit" name="s1" value="Enviar" />
</form>

HTML5
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.
Para criar as marcações semânticas podemos usar tags como

<header>, <main>, <section>, <nav>, <footer> e outras.

HTML5
Dia 6: Semântica
Exemplo de página com marcação semântica:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Meu portfólio</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Sobre</a></li>
<li><a href="#">Trabalhos</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
<div>
<h1>Meu portfólio de webdesign & Desenvolvimento Web!</h1>
<p>Um site com meus últimos trabalhos.</p>
</div>
</header>
<main>
<section>
<h2>Bem vindo</h2>
<p>Fusce semper id ipsum sed scelerisque.
Etiam nec elementum massa.</p>
<ul>
<li><a href="#">Projeto #1</a></li>
</ul>
</section>
<article>
<h3>Post do blog</h3>
<a href="#">Leia mais...</a>
</article>
</main>
<footer>
<p>© 2018 Meu Portfólio</p>
<p>Siga-me no <a href="#">Twitter</a>,
<a href="#">Instagram</a> e
<a href="#">Facebook</a></p>
</footer>
</body>
</html>

HTML5
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 <!-– seu comentário aqui --> para criar

comentários.
Exemplo de comentário em cima de um título:


<h1>Blog de Tecnologia</h1>
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.

HTML5
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:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Shorcute Icon (Favicon)</title>
<link rel="shortcut icon" href="img/html5.png" />
</head>

HTML5
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>
Para um áudio em MP3 usamos a seguinte tag:
<audio controls>
<source src="audio/hey.mp3" type="audio/mpeg">
</audio>
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>
Exemplo de página externa:

<iframe src="https://estudarti.com.br"
width="1024" height="768" ></iframe>
Exemplo de vídeo do YouTube

<iframe width="560" height="315"
src="https://www.youtube.com/embed/G7Z1bZoEtzg"
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

HTML5
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">
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>
<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>
<p class="azul">Terceiro parágrafo com a mesma classe.</p>

HTML5
Dia 10: Trabalhando com CSS
Exemplo de folha de estilos CSS:
h1{
font-size: 48px;
color: #1283ec;
}
#slogan{
color: #d3dadd;
font-size: 32px;
}
#menu{
list-style: none;
margin: 0px;
padding: 0px;
}
.azul{
color: #1283ec;
}

HTML5
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:
•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

HTML5
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>
<title>Jquery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<h1 id="titulo">Hello World</h1>
<script type="text/javascript">
var titulo = document.getElementById('titulo');

titulo.style.display = 'none';
$('#titulo').hide();
</script>
</body>
</html>

HTML5
Dia 13: Trabalhando com PHP
O PHP (PHP: Hipertext Pre-processor) é uma linguagem server-
side 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:
<?php
echo "Hello World";
?>
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.

HTML5
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:
<section id="home-posts">
<?php if( have_posts() ) : while( have_posts() ) : the_post(); ?>
<article class="post">
<header>
<h3 class="titulo">
<a href="<?php the_permalink() ;?>">
<?php the_title(); ?>
</a>
</h3>
</header>
<figure>
<a href="<?php the_permalink() ;?>">
<?php the_post_thumbnail(); ?>
</a>
<figcaption>Novo Drone em voo aberto.</figcaption>
</figure>
<?php the_content(); ?>
<a href="<?php the_permalink() ;?>">Leia mais...</a>
<footer>
<p>Publicado em: 18/04/2018</p>
</footer>
</article>
<?php endwhile; endif; ?>

</section>

HTML5
Agora você tem 2 opções:
1. Tentar aplicar o método sozinho, o que

pode levar mais tempo e você pode
continuar quebrando a cabeça.
2. Deixar que eu te ajude com toda bagagem

de conteúdo que você precisa através do
curso HTML5 START.
CLIQUE AQUI PARA

CONTINUAR

HTML5

Crie Sites Do Zero Com html5 PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Crie Sites Do Zero Com html5 PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

Por onde eu começo?

Muitos desenvolvedores querem aprender desenvolver sites mas

Não conseguem avançar nem sair do lugar. Perdem horas e

Mesmo tentando de todas as maneiras ficam completamente

E com isso ficam quebrando a cabeça para fazer algo que

A base para o desenvolvimento de qualquer site

Toda obra de construção, seja de casa ou de prédio, tem sua

Assim também é o desenvolvimento de um site, existem

Aprenda a criar sites do zero com 2

Dominando a marcação desses elementos você será capaz de

Pensando nisso criamos esse roteiro de estudos para você

Esse roteiro foi dividido em 2 semanas, sendo 1 hora por dia de

Quando dominar os temas desse roteiro você vai estar pronto

Aprenda a criar sites do zero com 3

Para trabalhar com HTML5 vamos usar um software que

Nós recomendamos 3 softwares, use o de sua preferência:

Com tudo isso instalado você já pode começar a criar seus

Aprenda a criar sites do zero com 4

Para marcar os títulos principais usamos a tag <h1> e cada

<h1>Seu título aqui</h1>

Para subtítulos usamos desde h2 até h6, e podem ser usamos

Para criarmos parágrafos de texto na página usamos as tags <p>

<p>Esse aqui é um exemplo de texto</p>

Aprenda a criar sites do zero com 5

Os links servem para direcionar o usuário para outra página ao

Exemplo de link absoluto (endereço completo na internet):

<a href="http://www.google.com">Vai para a Google</a>

Exemplo de link relativo (endereço interno de uma página do

<a href="artigos/minhapagina.html">Vai para Minha Página</a>

Pode ser usado o atributo title para se especificar o título do link

<a href="http://www.google.com" title="Site do Google">

Também pode ser usado o atributo target para abrir o link em

<a href="artigos/minhapagina.html" target="_blank">

Aprenda a criar sites do zero com 6

Para criar listagens de tarefas, características, pontos e etc

As listas também pode ser ordenas por números, usando a tag

Aprenda a criar sites do zero com 7

<img src="img/drone.jpg" width="480" height="320"

Aprenda a criar sites do zero com 8

Os formulários servem para entrada de dados pelo usuário.

<form name="form-contato" action="#" method="post">

<label for="nome">Nome</label><br />

<label for="assunto">Assunto: </label>

<label for="mensagem">Mensagem: </label><br />

<input type="Submit" name="s1" value="Enviar" />

Aprenda a criar sites do zero com 9

A marcação semântica serve para dar significado a cada parte do

Para criar as marcações semânticas podemos usar tags como

Aprenda a criar sites do zero com 10

Exemplo de página com marcação semântica:

Aprenda a criar sites do zero com 11

Os comentários servem para deixar mensagens que são exibidas

Usamos as tags <!-– seu comentário aqui --> para criar

Exemplo de comentário em cima de um título:

Os comentários também podem ser usados para desativar

A imagem e o título criados não serão exibidos na página, porém

Aprenda a criar sites do zero com 12

O shorcut icon deve ser inserido dentro do head da página e

Aprenda a criar sites do zero com 13

No código a seguir vamos inserir um vídeo em formato MP4:

<video width="640" height="480" controls>

Para um áudio em MP3 usamos a seguinte tag: