mini curso html5 slides
TRANSCRIPT
![Page 1: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/1.jpg)
Aprendendo Web com HTML5
Carlos Rodrigo, Júnior Mendes
.
![Page 2: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/2.jpg)
1. INTRODUÇÃO
![Page 3: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/3.jpg)
HTML é uma linguagem de marcação da World Wide Web.
A especificação do HTML5 ainda está em construção,
mas a maioria dos browsers já suportam boa parte dos novos
elementos e APIs do HTML5
![Page 4: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/4.jpg)
ROTEIRO E MATERIAIS
1. 3 Camadas de Desenvolvimento Web;
2. Principais Tags de uma estrutura Web;
3. Praticando as Tags;
4. Porque o novo HTML5;
5. Principais características do HTML5;
6. Desafio das funcionalidades do HTML, criando um
minisite;
7. “CSS” sintaxe do css, propriedades;
8. Criando o seu primeiro site HTML com CSS.
![Page 5: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/5.jpg)
ROTEIRO E MATERIAIS
Ferramenta de Desenvolvimento
• Editor padrão do Sist. Operacional
Windows: Notepad
Linux: gedit
• Editor de texto que recomendo...
Brackets
![Page 6: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/6.jpg)
As três camadas de desenvolvimento
• Primeira Camada: Informação – HTML
• Segunda Camada: Formatação – CSS
• Terceira Camada : Comportamento – JavaScript
3 Camadas de Desenvolvimento
Web
![Page 7: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/7.jpg)
Primeira Camada: Informação
• O HTML marca a informação dando-lhe
significado;
• O conteúdo deve ser marcado entre tags.
EX.: <h1> Olá Pessoal! </h1>
![Page 8: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/8.jpg)
![Page 9: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/9.jpg)
Segunda Camada: Formatação
• CSS- Cascading Style Sheets
• O CSS formata o conteúdo em HTML cuidando
do design da página.
• Existem duas formas de usar o CSS. Embutido
no HTML entre as tags <style></style> ou em
um arquivo externo conectado ao HTML por um
link.
![Page 10: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/10.jpg)
Terceira Camada: Comportamento
• Com o JavaScript você pode dimensionar,
rotacionar e reformatar os elementos de sua
página.
• Controla os valores definidos pelo CSS e
manipula as propriedades.
![Page 11: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/11.jpg)
Exemplo para identificar cada
elemento em uma página...!
“www.uol.com.br”
![Page 12: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/12.jpg)
![Page 13: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/13.jpg)
![Page 14: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/14.jpg)
![Page 15: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/15.jpg)
Principais Tags de uma estrutura
Web
• A tag <!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd" > indicar ao
browser qual a versão do HTML em que o documento
está escrito.
• A tag <HTML> – usado em conjunto com sua tag de
fechamento < / HTML > e será colocado no início e no
final do documento.
![Page 16: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/16.jpg)
• A tag <HEAD> - que também terá seu tag de
fechamento </HEAD> servirá para delimitar uma área de
cabeçalho.
• A tag <meta http-equiv="content-type"
content="text/html; charset=UTF-8"> - serve para o
reconhecimento da biblioteca de alfabetos
• A tag <TITLE> - será usado dentro dos tags <HEAD> ,
e servirá apenas para colocar um título que aparecerá na
barra de título do seu browser ( não esqueça o </TITLE> ) .
• Dentro das tag’s <BODY> </BODY> serão colocados
todos os comandos , textos e imagens da sua página
![Page 17: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/17.jpg)
![Page 18: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/18.jpg)
![Page 19: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/19.jpg)
Porque o novo HTML5...
A versão anterior do HTML foi a (4.01) que foi lançada em
1999 e não evoluiu desde lá
A web, ao contrário, mudou bastante se fazendo necessário o
novo...
HTML5 o novo padrão para HTML!
![Page 20: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/20.jpg)
![Page 21: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/21.jpg)
![Page 22: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/22.jpg)
Principais características do
HTML5
Uma característica admirada por todos, foi a que o
HTML5 acarretou todas as funcionalidades do HTML
anterior. Excluíndo apenas as tags não usadas, ou as que
foram melhoradas em sua funcionalidade.
Exemplos de Tags tradicionais do HTML4.
![Page 23: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/23.jpg)
• A tag <h> Texto qualquer </h> cria uma espécie de
cabeçalho no documento.
Ex.:
<h1> Cabeçalho Grande </h1>
. .
. .
. .
<h6> Cabeçalho Pequeno </h6>
• A tag <p> Adiciona um parágrafo na sua página.</p>
• A tag <b>Negrito</b>
• A tag <i> Italico</i>
• A tag <u>Sublinhado</u>
• A tag <center> para centralizar o texto.
![Page 24: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/24.jpg)
• A tag <br/> ela é usada assim porque o valor é ela
mesma, a tag é o próprio atributo, “quebra de linha”.
• A tag <hr/> é do mesmo jeito. Ela cria uma linha
horizontal na tela.
• A tag <a href=“link”> O que vai aparecer na tela</a>
essa tag vai direcionar você ao link que desejar.
• A tag <img src=“diretorio da imagem.formatodaimg”
alt=“nomeParaRepresentarImagem”/> essa tag é de
puxar uma imagem selecionada.
![Page 25: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/25.jpg)
O que temos de novidade no HTML5?
• Novos elementos semânticos e atributos.
Novos elementos de marcação para conteúdo
<article>, <footer>, <header>, <nav>,
<section>
Novos controles de formulários
Calendário, datas, horas, email, telefones, url,
busca, etc.
• APIs nativas para assistir a criação de aplicações web.
• Armazemanento Local.
![Page 26: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/26.jpg)
![Page 27: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/27.jpg)
Desafio
• Criar um site de um artista favorito seu...
1. Onde terá uma imagem desse artista;
2. E uma lista com 5 músicas que você mais gosta
3. Com links direcionando para algum site onde
poderemos ver a letra da canção.
![Page 28: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/28.jpg)
![Page 29: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/29.jpg)
CSS
O que eu posso fazer com CSS?
CSS é uma linguagem para estilos que define o layout de
documentos HTML. Por exemplo, CSS controla fontes, cores,
margens, linhas, alturas, larguras, imagens de fundo,
posicionamentos e muito mais. Aguarde e você verá!
Qual é a diferença entre CSS e HTML?
HTML é usado para estruturar conteúdos. CSS é usado para
formatar conteúdos estruturados.
![Page 30: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/30.jpg)
Suponha que desejamos uma cor de fundo vermelha para
a página web:
Usando HTML podemos fazer assim:
<body bgcolor="#FF0000">
Com CSS o mesmo resultado será obtido assim:
body {background-color: #FF0000;}
Como você pode notar os códigos HTML e CSS são mais
ou menos parecidos. O exemplo acima serve também para
demonstrar o fundamento do modelo CSS:
A sintaxe básica das CSS
![Page 31: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/31.jpg)
Com CSS o mesmo resultado será obtido assim:
body {background-color: #FF0000;}
![Page 32: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/32.jpg)
Exemplos de propriedades do CSS
.h1 { color: black; }
.h1 {font-family: arial, verdana, sans-serif;}
.h2 {font-family: "Times New Roman", serif;}
.p {
font-family: arial;
color: blue;
}
.p { text-align: justify; } pode ser center para centralizar.
![Page 33: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/33.jpg)
Exemplos de propriedades do CSS
.a:link { color: blue; } “Links não visitados”
.a:visited { color: red; } “Links Visitados”
.a:active { background-color: red; } “Links Ativos”
.a:hover { color: orange; font-style: italic; } “Curso sobre
o link”
.a { text-decoration:none; } “Aqui tira o sublinhado do
link” Obs.: Você tem que colocar em todos os “a”
![Page 34: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/34.jpg)
Exemplos de propriedades do CSS
#img {
height: 200px;
width: 200px;
}
Obs.: na questão dos tamanhos pode usar px ou %,
que equivale à porcetagem da tela.
Você deve está se perguntando mas e esse “jogo da
velha” no lugar do ponto...!
![Page 35: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/35.jpg)
Identificando (Classes e Id’s )
. = Classe # = Id
Classe é usado para um grupo de elementos.
EX.
.p {
font-family: arial;
color: blue;
}
Já o Id é usado para um único elemento.
EX.
#img {
height: 200px;
width: 200px;
}
![Page 36: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/36.jpg)
Como usar as (Classes e Id’s ) no meu
HTML
<body>
<p class=“p”>O sabiá não sabia.</br>
Que o sábio sabia.</br>
Que o sabiá não sabia assobiar.</p>
</body>
![Page 37: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/37.jpg)
Como usar as (Classes e Id’s ) no meu
HTML
<body> <img id=“img” src ="imagens/anderson.jpg“>
</body>
![Page 38: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/38.jpg)
![Page 39: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/39.jpg)
Desafio
• Formate o site que você criou recetemente.
1. Mude o background;
2. Altere o tamanho da imagem para 200px de
altura e 200px de largura;
3. Estilize os links das músicas;
4. Formate a fonte da lista de músicas;
5. Crie um cabeçalho com a frase ”Expotec de
João Camara 2014” antes do nome do artista;
6. Crie um rodapé com a frase “Desenvolvido por
(coloque o seu nome)”.
![Page 40: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/40.jpg)
Desafio
• Para ajudar no desafio segue o link com a tabela de
cores:
http://www.cultura.ufpa.br/dicas/htm/htm-cor1.htm
![Page 41: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/41.jpg)
![Page 42: Mini curso html5 slides](https://reader034.vdocuments.site/reader034/viewer/2022051006/589dac9d1a28ab21728b58bf/html5/thumbnails/42.jpg)
AGRADECIMENTOS
Obrigado a todos que estão aqui presentes...