26
SEMÂNTICA HTML5 WILSON MONTELO DEV FRONT-END

Semântica HTML5

Embed Size (px)

Citation preview

Page 1: Semântica HTML5

SEMÂNTICA HTML5

WILSON MONTELODEV FRONT-END

Page 2: Semântica HTML5

MUITO ANTES DE INICIAR

PROJETO

Page 3: Semântica HTML5

HOME PAGE

Page 4: Semântica HTML5

DESING RESPONSIVO

Page 5: Semântica HTML5

SISTEMAS DE GERENCIAMENTO DE CONTEÚDO

Page 6: Semântica HTML5

- CONTROLE DE VERSÃO

- PRÉ PROCESSADORES

- SEO

- PERFORMACE

Page 7: Semântica HTML5
Page 8: Semântica HTML5

SERVE PARA QUE A

WEB?

Page 9: Semântica HTML5

INFORMAÇÃO Informação varia conforme o indivíduo, as necessidades

e o contexto em que é produzida e compartilhada.

Page 10: Semântica HTML5

EXISTE ALGUMA

LÓGICA?

Page 11: Semântica HTML5

COMO ORGANIZAR?

Page 12: Semântica HTML5

LINEARRelativo ou que apresenta a disposição de linha

Page 13: Semântica HTML5

NÃO LINEARNão linear refere-se a todas as estruturas que não

apresentam um único sentido.

Page 14: Semântica HTML5

ONDE TUDO COMEÇA?

Page 15: Semântica HTML5

HTMLMAISZOQUÉ ?

Page 16: Semântica HTML5
Page 17: Semântica HTML5

LINGUAGEM DE MARCAÇÃO

DE HIPERTEXTO

Page 18: Semântica HTML5

O QUE É HIPERTEXTO?1.Apresentação de informações escritas, organizada de

tal maneira que o leitor tem liberdade de escolher

vários caminhos.

2.Elemento (palavra, expressão ou imagem) é destacado e,

quando acionado (ger. mediante um clique de mouse ),

provoca a exibição de um novo hipertexto com informações

relativas ao referido elemento; hipermídia.

Page 19: Semântica HTML5

LINKS A palavra link pode significar hiperligação, ou seja, uma

palavra, texto ou imagem que quando é clicada pelo

usuário, o encaminha para outra página na internet

Page 20: Semântica HTML5

SEMÂNTICA

Page 21: Semântica HTML5

O QUE SIGNIFICA UMA

DIV?

Page 22: Semântica HTML5

<div id=’’header’’>

<div id=’’nav’’>

</div>

</div>

<!-- fim header -->

<div id=’’main’’>

<div id=’’noticias’’>

</div>

</div>

<!-- fim main -->

<div id=’’sidebar’’>

</div>

<!-- fim sidebar -->

<div id=’’footer’’>

</div>

Page 23: Semântica HTML5

AS NOVAS TAGS

Page 24: Semântica HTML5

header

nav

article

section

aside

footer

main

address

Page 25: Semântica HTML5

<header>

<nav>

</nav>

</header>

<!-- fim header -->

<main>

<article>

</article>

</main>

<!-- fim main -->

<aside>

</aside>

<!-- fim aside -->

<footer>

<address>

</address>

</footer>

Page 26: Semântica HTML5

HTML FEITO PARA SER

PORTÁTIL