Aprendendo Web com HTML5
Carlos Rodrigo, Júnior Mendes
.
1. INTRODUÇÃO
HTML é uma linguagem de marcação da World Wide Web.
A especificação do HTML5 ainda está em construção,
mas a maioria dos b...
ROTEIRO E MATERIAIS
1. 3 Camadas de Desenvolvimento Web;
2. Principais Tags de uma estrutura Web;
3. Praticando as Tags;
4...
ROTEIRO E MATERIAIS
Ferramenta de Desenvolvimento
• Editor padrão do Sist. Operacional
Windows: Notepad
Linux: gedit
• Edi...
As três camadas de desenvolvimento
• Primeira Camada: Informação – HTML
• Segunda Camada: Formatação – CSS
• Terceira Cama...
Primeira Camada: Informação
• O HTML marca a informação dando-lhe
significado;
• O conteúdo deve ser marcado entre tags.
E...
Segunda Camada: Formatação
• CSS- Cascading Style Sheets
• O CSS formata o conteúdo em HTML cuidando
do design da página.
...
Terceira Camada: Comportamento
• Com o JavaScript você pode dimensionar,
rotacionar e reformatar os elementos de sua
págin...
Exemplo para identificar cada
elemento em uma página...!
“www.uol.com.br”
Principais Tags de uma estrutura
Web
• A tag <!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN"
"http://www.w3.org/TR/html4...
• A tag <HEAD> - que também terá seu tag de
fechamento </HEAD> servirá para delimitar uma área de
cabeçalho.
• A tag <meta...
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 con...
Principais características do
HTML5
Uma característica admirada por todos, foi a que o
HTML5 acarretou todas as funcionali...
• A tag <h> Texto qualquer </h> cria uma espécie de
cabeçalho no documento.
Ex.:
<h1> Cabeçalho Grande </h1>
. .
. .
. .
<...
• A tag <br/> ela é usada assim porque o valor é ela
mesma, a tag é o próprio atributo, “quebra de linha”.
• A tag <hr/> é...
O que temos de novidade no HTML5?
• Novos elementos semânticos e atributos.
Novos elementos de marcação para conteúdo
<art...
Desafio
• Criar um site de um artista favorito seu...
1. Onde terá uma imagem desse artista;
2. E uma lista com 5 músicas ...
CSS
O que eu posso fazer com CSS?
CSS é uma linguagem para estilos que define o layout de
documentos HTML. Por exemplo, CS...
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;}
Exemplos de propriedades do CSS
.h1 { color: black; }
.h1 {font-family: arial, verdana, sans-serif;}
.h2 {font-family: "Ti...
Exemplos de propriedades do CSS
.a:link { color: blue; } “Links não visitados”
.a:visited { color: red; } “Links Visitados...
Exemplos de propriedades do CSS
#img {
height: 200px;
width: 200px;
}
Obs.: na questão dos tamanhos pode usar px ou %,
que...
Identificando (Classes e Id’s )
. = Classe # = Id
Classe é usado para um grupo de elementos.
EX.
.p {
font-family: arial;
...
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á...
Como usar as (Classes e Id’s ) no meu
HTML
<body>
<img id=“img” src ="imagens/anderson.jpg“>
</body>
Desafio
• Formate o site que você criou recetemente.
1. Mude o background;
2. Altere o tamanho da imagem para 200px de
alt...
Desafio
• Para ajudar no desafio segue o link com a tabela de
cores:
http://www.cultura.ufpa.br/dicas/htm/htm-cor1.htm
AGRADECIMENTOS
Obrigado a todos que estão aqui presentes...
Mini curso html5   slides
Mini curso html5   slides
Mini curso html5   slides
Mini curso html5   slides
Mini curso html5   slides
Mini curso html5   slides
Mini curso html5   slides
Mini curso html5   slides
Mini curso html5   slides
Mini curso html5   slides
Mini curso html5   slides
Mini curso html5   slides
Próximos SlideShares
Carregando em…5
×

Mini curso html5 slides

293 visualizações

Publicada em

MInicurso no evento Expotec do IFRN-João Camara

Publicada em: Educação
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Mini curso html5 slides

  1. 1. Aprendendo Web com HTML5 Carlos Rodrigo, Júnior Mendes .
  2. 2. 1. INTRODUÇÃO
  3. 3. 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
  4. 4. 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.
  5. 5. ROTEIRO E MATERIAIS Ferramenta de Desenvolvimento • Editor padrão do Sist. Operacional Windows: Notepad Linux: gedit • Editor de texto que recomendo... Brackets
  6. 6. 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
  7. 7. 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>
  8. 8. 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.
  9. 9. 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.
  10. 10. Exemplo para identificar cada elemento em uma página...! “www.uol.com.br”
  11. 11. 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.
  12. 12. • 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
  13. 13. 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!
  14. 14. 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.
  15. 15. • 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.
  16. 16. • 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.
  17. 17. 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.
  18. 18. 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.
  19. 19. 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.
  20. 20. 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
  21. 21. Com CSS o mesmo resultado será obtido assim: body {background-color: #FF0000;}
  22. 22. 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.
  23. 23. 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”
  24. 24. 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...!
  25. 25. 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; }
  26. 26. 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>
  27. 27. Como usar as (Classes e Id’s ) no meu HTML <body> <img id=“img” src ="imagens/anderson.jpg“> </body>
  28. 28. 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)”.
  29. 29. Desafio • Para ajudar no desafio segue o link com a tabela de cores: http://www.cultura.ufpa.br/dicas/htm/htm-cor1.htm
  30. 30. AGRADECIMENTOS Obrigado a todos que estão aqui presentes...

×