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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Html 01

Ähnlich wie Html 01 (20)

Mehr von Ricardo neves

Mehr von Ricardo neves (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Html 01