Mini curso html5 slides

Aprendendo Web com HTML5
Carlos Rodrigo, Júnior Mendes
.

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

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.

ROTEIRO E MATERIAIS
Ferramenta de Desenvolvimento
• Editor padrão do Sist. Operacional
Windows: Notepad
Linux: gedit
• Editor de texto que recomendo...
Brackets

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

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>

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.

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.

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/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.

• 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

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!

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.

• 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.

• 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.

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.

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.

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.

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

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: "Times New Roman", serif;}
.p {
font-family: arial;
color: blue;
}
.p { text-align: justify; } pode ser center para centralizar.

.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”

#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...!

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;
}

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>

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
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)”.

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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Mini curso html5 slides

Semelhante a Mini curso html5 slides (20)

Mais de Carlos Rodrigo de Araujo

Mais de Carlos Rodrigo de Araujo (20)

Último

Último (20)

Mini curso html5 slides