Regras básicas que definem onde o elemento pode ou não estar. Existem dois tipos de elementos: De linha: marcam, na maioria das vezes, textos,

Tamanho: px

Começar a partir da página:

Download "Regras básicas que definem onde o elemento pode ou não estar. Existem dois tipos de elementos: De linha: marcam, na maioria das vezes, textos,"

Luiz Gustavo Pinho Barreiro
6 Há anos
Visualizações:

2 Regras básicas que definem onde o elemento pode ou não estar. Existem dois tipos de elementos: De linha: marcam, na maioria das vezes, textos, elementos de formulários, imagens. De blocos: são como caixas, que dividem o conteúdo em seções do layout.

3 Algumas premissas: Elementos de linha Os elementos de linha podem conter outros elementos de linha, dependendo da categoria em que eles se encontram. Por exemplo: o elemento A não pode conter o elemento label, mas o inverso é possível. Elementos de bloco Elementos de bloco sempre podem conter elementos de linha. Os elementos de linha nunca podem conter elementos de bloco. Elementos de bloco podem conter outros de bloco, dependendo da categoria em que ele se encontra. Por exemplo, um parágrafo não pode conter um DIV, mas o inverso é possível.

4 Podemos dividir esses modelos em categorias: Metadata content. Flow content. Sectioning content. Heading content. Phrasing content. Embedded content. Interactive content.

5 Metadata content: base command link meta noscript script style title

6 Flow content: a canvas fieldset ins noscript select var abbr cite figure kbd object small vídeo address code footer keygen ol span wbr area command form label output strong text article datalist h1 até h6 link p style aside del header map pre sub áudio details hgroup mark progress sup b dfn hr math q svg bdo div i menu ruby table blockquote dl iframe meta samp textarea br em img meter script time button embed input nav section ul

7 Sectioning content: header footer article aside nav section

8 Heading content: h1 até h6 hgroup header

9 Phrasing content: a datalist label ruby time abbr del link samp var área dfn map script vídeo áudio em mark select wbr b embed math small bdo i meta span br iframe meter strong button img noscript sub canvas input object sup cite ins output svg code kbd progress text command keygen q textarea

10 Embedded content: áudio canvas embed iframe img math object svg vídeo

11 Interactive content: a áudio dutton details embed iframe img input keygen label menu object select textarea vídeo

12 O HTML indica que tipo de informação a página está exibindo. Versões anteriores do HTML. O HTML5 possui elementos que nos ajudam a definir os setores principais no documento. Essas novas ferramentas simplificam o trabalho de sistemas como os dos buscadores.

13 DIV. Conteúdos de seções (sectioning content).

14 O elemento section define nova seção genérica no documento.

15 Exemplos do elemento section: <section> <h1>sessão 1</h1> </section> <section> <h1>sessão 2</h1> </section> <section> <h1>sessão 3</h1> </section>

16 NAV Elemento que representa uma seção da página que contém links para outras partes do website, os quais são considerados principais (ex.: menu principal).

17 <nav id= ifomep > <h1>humanas</h1> <ul> <li><a href= # >Direito Ambiental</a></li> <li><a href= # >Antropologia</a></li> </ul> </nav> <nav> <h1>exatas</h1> <ul> <li><a href= # >Matemática</a></li> <li><a href= # >Leitura e Interpretação de Desenho Mecânico</a> </li> </ul> </nav> <nav> <h1>informática</h1> <ul> <li><a href= # >HTML5</a></li> </ul> </nav>

18 Article É onde colocamos o texto ou a informação principal. A informação que vai dentro do article é a mesma que os leitores de feeds capturam do seu RSS/Atom. O que for mostrado no feed tem de ser marcado com a tag article.

19 Exemplo do elemento article: <article> <header> <h1>título</h1> </header> <p>texto de exemplo de article</p> </article>

20 Aside Representa um bloco de informação relativa ao conteúdo principal. Esse elemento referese também a qualquer conteúdo que tenha importância secundária e relativa ao principal da página.

21 <aside id= menulateral > <nav id= ifomep > <h1>humanas</h1> <ul> <li><a href= # >Direito Ambiental</a></li> <li><a href= # >Antropologia</a></li> </ul> </nav> <nav> <h1>exatas</h1> <ul> <li><a href= # >Matemática</a></li> <li><a href= # >Leitura e Interpretação de Desenho Mecânico</a> </li> </ul> </nav> <nav> <h1>informática</h1> <ul> <li><a href= # >HTML5</a></li> </ul> </nav> </aside>

22 Header Representa um grupo de introdução ou elementos de navegação. Ele pode ser utilizado para agrupar índices de conteúdos, campos de busca ou até mesmo logos.

23 Exemplo do elemento header: <header> <img src= logoifomep.png alt= Logo Ifomep /> <h1>site Exemplo Ifomep</h1> <p>texto Header.</p> </header>

24 Footer É o elemento que representa literalmente o rodapé da página. Ele contém informações como: links para documentos relacionados, copyright e assim por diante. Exemplos:

25 <footer> <nav> <h1>produtos</h1> <ul> <li><a href= # >Cursos</a></li> <li><a href= # >Livros</a></li> </ul> </nav> <nav> <h1>institucional</h1> <ul> <li><a href= # >Quem Somos</a></li> <li><a href= # >Metodologia</a></li> <li><a href= # >Certificação</a></li> </ul> </nav> </footer>

26 Time Representa tanto a hora em um relógio de 24 horas como uma data precisa no calendário gregoriano, opcionalmente com uma hora e um fuso horário. <time datetime= >23 de março de 2009</time> Especifica a data. O formato é de quatro dígitos para o ano, dois para o mês e dois para o dia, separados por traços.

27 Como adicionar tempo no elemento time: Letra T após a data O tempo no formato de 24 horas <time datetime= T19:35:26-04:00 > 23 de março de :35h A diferença da timezone </time>

28 Exemplos do elemento time: <time datetime= >Ontem</time> <time datetime= ></time> Atributo pubdate: diferencia a data de publicação de um artigo de uma data genérica. Ex.: <time datetime= pubdate>22/10/2009</time> <time datetime= pubdate= pubdate >22/10/2009</time>

29 Até a próxima aula.

Documentos relacionados

Introdução a Web Standards. Reinaldo Ferraz e Clécio Bachini

Introdução a Web Standards. Reinaldo Ferraz e Clécio Bachini Introdução a Web Standards Reinaldo Ferraz e Clécio Bachini Document Object Model (DOM) Modelo de Documentos em Objetos Objetos em um Documento Markup Linguagem de Marcação Semântica Objetos com Sentido