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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Mini curso html5 slides

Ähnlich wie Mini curso html5 slides (20)

Mehr von Carlos Rodrigo de Araujo

Mehr von Carlos Rodrigo de Araujo (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Mini curso html5 slides