Html 01

Vocenomundo.net Prof.
Ricardo

Conhecendo o HTML5
Aula 01

O que veremos hoje

1 O que é HTML5

2 Quais as vantagens

3 Alguns comandos

4 Salvando e enviando

Prof. Ricardo
Facebook:
Vocenomundo.net Ricardo.ware@gmail.com

O que é HTML5

Você depende dele, mas não o vê a olho nu. O código
HTML está presente nas páginas da web há mais de
dez anos e tem uma larga aceitação dos usuários por
todo o mundo.
Leia mais em: http://www.tecmundo.com.br/navegador/2254-o-que-e-html-5-
.htm#ixzz27f9AAH9O

Html:
HyperText Markup Language (Linguagem de
marcação de hipertexto)

Prof. Ricardo
Facebook:
Company Logo

O que é HTML5

Novos recursos

rápido
colorido

prático HTML5

bonito

Feito
Pra vc

Prof. Ricardo
Facebook:

O que é HTML5

O código fica oculto, e quem
o digita é vc caro(a)
aspirante a progamador!!

Prof. Ricardo
Facebook:

Faça um teste vc mesmo(a)
Abra seu navegador e
clique O código que você
Não vê!
Ctrl + U

O página que
vemos!

Prof. Ricardo
Facebook:

O que é HTML5
Nessa nova linguagem, algumas dessas
“etiquetas de marcação” mais objetivas.

De modo geral, com essas e as outras
novidades, será muito mais fácil navegar pela
Internet!

Prof. Ricardo
Facebook:

Canvas

Canvas

Especializadas em renderizar imagens em
bitmap, as tags canvas serão específicas
para a edição breve de imagens através de
APIs ou JavaScript.

Prof. Ricardo
Facebook:

Tags de vídeo

Tags de vídeo
Incluir vídeos em HTML como conhecemos
hoje, utilizando códigos para o “embed”, ou
seja, incorporar vídeos à página será muito
mais simples.

Prof. Ricardo
Facebook:

Geolocalização

Geolocalização
Saber onde você está não é uma informação
importante só para os seus pais, namorados ou
namoradas.

Geolocalização
O HTML 5 também possui maneiras de
descobrir a sua localização e informá-la aos
sites e serviços que você acessa!

Prof. Ricardo
Facebook:

Caching de aplicações

Caching de aplicações
Agora, com o HTML 5 os aplicativos web
poderão ser acessados offline via cache.

Leia mais
em: http://www.tecmundo.com.br/navegador/2
254-o-que-e-html-5-.htm#ixzz27fFcSbBL

Prof. Ricardo
Facebook:

E o que muda para o
usuário?
Se você possui um perfil um pouco mais
ligado às novidades tecnológicas,
sentirá boas diferenças ao navegar pela
Internet.
Isso porque o HTML 5 irá facilitar muito
a vida de todos nós – quer sejamos
desenvolvedores ou apenas usuários.
Para os desenvolvedores, fica mais
rápido produzir sites cada vez mais
fáceis e limpo.

Prof. Ricardo
Facebook:

Então vamos começar
Abra o bloco de notas:

Digite igual
ao próximo
slide:

Prof. Ricardo
Facebook:

Digitando

Prof. Ricardo
Facebook:
Company Logo

Agora vamos salvar:

Vamos ser organizados

1. Vamos criar uma pasta na área Lembre-se
de trabalho com o nome de salvar na
Projeto HTML5 pasta criada!

2. Agora vamos no Bloco de notas e
vamos em:
Arquivo / Salvar Como /

Index.html
Prof. Ricardo
Facebook:

Prof. Ricardo
Facebook:

Agora vamos visualizar:

Prof. Ricardo
Facebook:

<DOCTYPE html>

Pela nova nomenclatura as páginas que vão iniciar
com comandos em html5 devem começar desse
jeito.

Prof. Ricardo
Facebook:

<html> .... </html>

<html> Indica o início do site. Ele é fundamental
pois é com essa TAG que o navegador sabe o que
fazer.

Após o <html> vem o que o site deve apresentar...

</html> é sempre o último, não esqueça-o pois o seu
site pode não funcionar direito.

Prof. Ricardo
Facebook:

<head>.... <title></title>...</head>

<head></head>

Cabeçalho dentre outras coisas
serve para especificarmos sobre
o que é o site. E inserir scripts.
<title></title>

É o título que vai na aba do
navegador.
Prof. Ricardo
Facebook:

<body> É o corpo do site

<body></body>

O que se coloca entre um <body> e outro </body>
é o que será visto no site. Ou seja toda a parte
visual do site textos, imagens, filmes e qualquer
coisa.

Prof. Ricardo
Facebook:

H1 ao h7

<h1> serve para especificar o tamanho da
fonte.

• <h1> É a maior
<h1> </h1>

<h4> • <h4> é um tamanho médio</h4>

<h7>
• <h7> Lembrando que as fontes vão de h1 até
h7, que é o menor tamanho. Veremos outras
opções pra se trabalhar com fontes.</h7>
Prof. Ricardo
Facebook:

Antes de começar a explicação
vamos colocar uma imagem

Pegue uma imagem no google
De tamanho médio Obs.:
O nome da extensão
Renomeia a imagem para= do arquivo não pode
imagem1 ser mudado somente
o nome, exemplo:
Ricardo_lindo.png
Copie e cole pra sua pasta na
Área de trabalho imagem1.png

Prof. Ricardo
Facebook:

Inserindo a imagem

<img src="imagem1.jpeg">
Coloque do jeito que está acima!
Prof. Ricardo
Facebook:

Vai ficar desse jeito

Prof. Ricardo
Facebook:
www.thmemgallery

Fique atento

Se você pegar uma imagem com
estenção (.jpg),(.jpeg), (png) e/ou
(.gif). Lembre-se que é o:

nome-da-imagem.estenção

Carro.jpeg
Cidade.jpg
Foto_grande.png
Anime.gif
Prof. Ricardo
Facebook:
www.thmemgallery

Resumo dos fatos até agora:

Abrimos
O bloco Imagem Hospeda
De notas gem

Digitamos o
código na Pegamos uma
listagem acima… imagem na Agora vamos
internet e aprender a
E salvamos colocamos na colocar esse
como mesma pasta e seu site on line
Index.html inserimos o :)
Dentro da pasta código img src=
Projeto HTML

Prof. Ricardo
Facebook:

Orgfree.com
Acesse:
http://www.orgfree.com/

Clique
aqui

Prof. Ricardo
Facebook:

Free web hosting area.

Prof. Ricardo
Facebook:

Entenda como se usa.

nomedoseusite

Escolha o nome
pro seu site
Depois
Escolha um
Observações
subdomínio

Eu coloquei o nome de
music9035 vc pode
escolher outro que for
melhor para o seu Prof. Ricardo
projeto! Facebook:

cadastrando

Coloque o endereço do seu email,
pode ser um endereço falso.

Crie uma senha e se possível
anote, pois você vai precisar dela!

Lembre-se de marcar
esta opção

Redigite os Captcha e mostre que
vc é uma pessoa de verdade! : )

Prof. Ricardo
Facebook:

Preenchimento fácil e rápido.

Por favor fique
atento, caso não vá
para a próxima tela
veja qual o erro está
em vermelho e tente
corrigir!

Prof. Ricardo
Facebook:

Copie em sua
apostila a
parte
Segredo! selecionada

Prof. Ricardo
Facebook:
Company Logo
www.thmemgallery

Pronto, agora vamos
hospedar o nosso site...
Clique em Iniciar do Windows >
Computador e digite na barra de
endereços:

Prof. Ricardo
Facebook:

ftp://ftp.6te.net

Prof. Ricardo
Facebook:

Agora pra terminar:

Lembra do Login e
da senha que eu
pedi pra vc copiar!

Prof. Ricardo
Facebook:

Após o
preenchimento
Clique em Logon

Prof. Ricardo
Facebook:
Company Logo

Deletando os arquivos
desnecessários

1
Selecione todos os arquivos
que aparecerem como ao
lado.

Delete-os, exceto os que

2 tem um ponto na frente são
chamados arquivos ocultos.

Agora vá em sua pasta

3 Área de trabalho /
Projeto HTML.

Prof. Ricardo
Facebook:

Pasta vazia....

Prof. Ricardo
Facebook:

Copie e cole

Prof. Ricardo
Facebook:
Company Logo

Ao terminar de copiar

1 Clique em F5 para
atualizar.

Abra o seu navegador e

2 digite o endereço do seu
site, no meu caso é
music9035.6te.net

Prof. Ricardo
Facebook:

Prof. Ricardo
Facebook:
Company Logo

Vocenomundo.net Prof.
Ricardo

Obrigado a todos(as).

Vocenomundo.net

Html 01

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à Html 01

Similaire à Html 01 (20)

Plus de Ricardo neves

Plus de Ricardo neves (20)

Dernier

Dernier (20)

Html 01