Atributo Data


 Identificação do usuário, para saber no html quem é o usuario e oque ele disse ou enviou. Serve para qualquer tag.
e possivel guardar nao apenas o nome mas qualquer informação.

exe: <div data-nome="Daniel" data-sobrenome="Oliveira"> Olá como vai?
</div>

Tags de Input

Novos tipos.

input de pesquisa
<input type="search" name="search" />

<input type="email" name ="email" require/>

require: não deixa ser nulo, e este campo é validado devido sua tag email

TIPO URL
<input type="url" name="url" />
valida o campo se é uma url

Tipo Tel
<input type = "tel" name ="telefone" />
mais utilizado para deixar teclado numero dos smartphones

TIPÒ Number
<input type="number" name="number" />
adapta o campo a numeros

TIPO Ranger (especificar minimo e maximo)
Barra
<input type="ranger" min="1" max = "100" required />


TIPO DATE
<input type="date" name="data" />
formata para o tipo de datas e tambem abre o calendario

month = apenas alterar a tag, formata em forma de meses

Tipo Time
<input type="time" name="time" />
formata o campo para hora

Tipo Datetime
<input type ="datetime" name="datahora" />

formata o campo para data e hora

TIPO COLOR
<input type="color" name="color" />
formata campo para paleta de cores

Compatibilidade com HTML5
É suportado pela maioria dos navegadores atuais, como chrome, firefox, opera, safari etc.
Entretanto, ha deficiencia no internet explorer 8.

É possivel criar tags no html5

exemplo: <daniel> esse é meu nome</daniel>

css

daniel{
background-color: green;
width: 200px;
height: 200px
}

estas tags que não são oficiais não funciona no internet explorer 8, nao sendo possível aplicar estilos(css)!

Tag section, Article, Aside e Time

Tag Section
<section>
Separa o conteudo tratado
Separa assuntos, nao misturando assuntos. Para motores de busca
</section>

Tag Article
<article>
O conteudo principal do site
conteudo principal da pagina. Procurado por motores de busca.
Melhora o SO
</article>

Tag Aside
<aside>
         Conteudo secundário da pagina.
segundo lugar.
</aside>

Tag Time

Serve para especificar para o buscador uma referencia de data.

O meu dia principal e o<time datetime="1998-03-25"> dia do meu aniversario</time>

Essas tags nao possuem nenhum efeito visual, porem seu significado semantico ajuda muito na colocação de motores de buscas

Importando arquivos no HTML

 

Importação de arquivos no HTML

acessar arquivos em diferentes pastas

mesma pasta

<img src="imagem1.jpg" width="300"/>

outra pasta

<img src="imagens/imagem1.jpg" width="300"/>

fora da pasta. Outras pastas em outros locais

<img src="../imagens/imagem1.jpg" />

cada" .."(ponto ponto) simboliza sair da pasta

volta 1/volta 2/entrar.

<img src ="../../imagens/imagem2.jpg" width="300" />

Tag Header, Footer e Nav

Não tem tanta funcao visual, e sim valor semantico

Questoes de SO - google

conteudos de introdução da pagina
<header>
Referente ao cabeçalho da pagina
<h1>Titulo da pagina<h1>
<p>Resumo do que vai ter na pagina<p>
</header>

diz para deficientes visuais e auditivos.
onde estao os menus principais e motores de busca.
<nav>
<a href ="">menu principal</a>
</nav>

Rodape do site
<footer>
Rodape do site
</footer>

consegue aplicar efeitos de css nas tags
exe

footer {
heigth: 50px;
backgroud-color: #cccccc;
}

criando primeiro documento.

Criar layout - largura padrao
width: 1920
height: 2000 - altura: a necessaria
Resulution: 72. para website /  caso queira imprimir, 300.

Alterar o tamanho do documento

Adobe photoshop

Modo sem risco: Imagem -> canvas size

canvas size: altera o tamanho da area de trabalho.

image size: altera todos os elementos da pagina.


Salvando imagens no photoshop

3 tipos de arquivos:
PSD : photoshop / editavel
 JPG : arquivo mais leves e mais usado
 PNG: Fundo transparente.