Mini curso html5 slides

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

Education

Mini curso html5 slides