Tecnologia para a Internet I – Aula 03 Prof. Me. Ronnison Reges Vidal

Tecnologia para a Internet I – Aula 03 Prof. Me. Ronnison Reges Vidal
1

CONTEÚDO Unidade 1 – Html 5 Tag's estruturais do HTML5
Tag's Textuais do HTML5 2

Tag's estruturais do HTML5
Os elementos estruturais definem a forma como o documento HTML5 pode ser criado. Sua utilização não é obrigatória, no entanto, recomenda-se que sejam utilizados em determinadas circunstâncias dentro o documento. <HTML> O elemento <HTML> representa a TAG principal para a construção do documento HTML. É apresentado abaixo a estrutura de um documento HTML. 3

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The HTML Document</title> </head> <body> <p>The HTML content</p> </body> </html> 4

Onde: <head> - Representa uma coleção de metadados. Neste elemento são carregadas as informações referentes ao documento, como por exemplo comandos CSS e Javascript. <title> - Localizado dentro do <head>, representa o título do documento. <body> - Localizado no mesmo nível do <head>, este elemento representa o conteúdo principal da página. Aqui estão localizados todos os comandos necessários para a criação do documento HTML. 5

<SECTION> O elemento <section> representa uma seção genérica dentro de um documento. Este elemento pode conter um agrupamento de textos com vários capítulos, seções numeradas, etc. No exemplo abaixo é apresentado um artigo contendo um assunto principal e dentro deste assunto várias seções com assuntos distintos. 6

Exemplo de utilização: <article> <hgroup> <h1>Livro sobre HTML</h1> <h2>Como criar uma página </h2> </hgroup> <p>O curso de HTML é muito importante </p> <section> <h1>O HTML 5</h1> <p>Surgimento do HTML 5</p> </section> <h1>Tags</h1> <p>Comandos de criação de páginas.</p> </article> 7

<NAV> Este elemento é a seção onde ficam as informações de navegação de página. Geralmente nesta seção são colocados os ligações ( links internos) para a própria página ou ligações externas para outras páginas de sites externos. Exemplo de utilização: <header> <nav> <h1>Menu Principal</h1> <ul> <li><a href="articles.html">índice de artigos</a></li> <li><a href=" Site da Estácio</a></li> </ul> </nav> </header> 8

<ARTICLE> É um artigo independente dentro de um texto, este elemento pode estar ou não dentro de um elemento <section>. Imagine um jornal com as seções de esportes, fofocas, etc. Dentro de cada seção existem vários artigos sobre textos específicos, por exemplo, na seção de esportes pode ter um artigo falando sobre o time A, outro sobre time B e o outro sobre o time C. Um artigo pode conter um elemento <header> que é o título e um elemento <footer> que é o rodapé do elemento. 9

Exemplo de utilização: <article> <header> <h1>Nova Vitória !</h1> <p><time pubdate datetime=" T14:28-08:00"></time></p> </header> <p>O time A ganhou novamente, se continuar assim será líder do campeonato...</p> <p>...</p> <footer> <a href="?comments=1">Comentários</a> </footer> </article> 10

<ASIDE> Neste elemento estão contidas as informações que não estão relacionadas diretamente com o texto. Como por exemplo: comerciais pagos, links promocionais, etc. Exemplo de utilização: <aside> <h1>Tenha uma graduação !!! </h1> <p><a href=? Estude na estácio</a></p> </aside> 11

<H1>, <H2>, <H3>, <H4>, <H5>, e <H6> Elementos que representam o título de cada seção, sendo <h1> o maior título e <h6> o menor título. Exemplo de utilização: <body> <h1>Maior </h1> <h2>Menor 2 </h2> <h3>Menor 3 </h3> <h4>Menor 4 </h4> <h5>Menor 5 </h5> <h6>Menor 6 </h6> </body> 12

<HGROUP> Elemento usado em conjunto com as TAGs anteriores para delimitar o título da seção. Exemplo de utilização: <hgroup> <h1>Livro sobre HTML</h1> <h2>Como criar uma página </h2> </hgroup> 13

<HEADER> Também utilizado para delimitar o título da seção, trabalha em conjunto com os elementos anteriores, no entanto, não é obrigatório. 14

Exemplo de utilização: <article> <header> <hgroup> <h1>Livro sobre HTML</h1> <h2>Como criar uma página </h2> </hgroup> <p>O curso de HTML é muito importante </p> </header> <section> <h1>O HTML 5</h1> <p>Surgimento do HTML 5</p> </section> <section> <h1>Tags</h1> <p>Comandos de criação de páginas.</p> </article> 15

<FOOTER> Este elemento contém basicamente as informações sobre o conteúdo da seção, como por exemplo o autor, links relacionados, etc. 16

Exemplo de utilização: <article> <header> <hgroup> <h1>Livro sobre HTML</h1> <h2>Como criar uma página </h2> </hgroup> <p>O curso de HTML é muito importante </p> </header> <section> <h1>O HTML 5</h1> <p>Surgimento do HTML 5</p> </section> <section> <h1>Tags</h1> <p>Comandos de criação de páginas.</p> <footer> <nav> <p><a href="/credits.html">Créditos</a> ? <a href="/tos.html">Termos Legais</a> ? <a herf="/index.html">Mais Informações</a> </p> </nav> </footer> </article> 17

Tag's Textuais <P> Elemento que representa um parágrafo.
Exemplo de utilização: <p> Isto é um parágrafo </p> <HR> Elemento que representa uma quebra de parágrafo ou tema exibindo uma linha horizontal. <hr> <PRE> Este elemento apresenta um bloco de texto pré-formatado, preservando seu conteúdo. <pre> Line 1. Line 2 is to the right of line 1. Line 3 aligns with line 2. </pre> 18

Tag's Textuais <BLOCKQUOTE>
Tem como função exibir o texto indicando de qual referência foi retirado (citação). Exemplo de utilização: <blockquote cite=" <p>Elemento textual. </p> </blockquote> <FIGURE> Este elemento permite definir logicamente as informações de uma imagem. Trabalha com <figcaption> e <img>. <figure> <figcaption>Foto de Férias</figcaption> <img src="stata.jpg" alt="Foto das férias no Rio de Janeiro"> </figure> 19

Tag's Textuais Onde: <figcaption> - Elemento que permite dar um título a uma imagem. <img> - Elemento que exibe a imagem. Neste exemplo o atributo src indica o endereço e o tipo da imagem e o atributo alt é mostrado caso a imagem não possa ser exibida. <DIV> Elemento que representa um bloco de texto. As TAGs <body>, <header>, <footer>, etc, possuem regras de utilização bem definidas. Caso o desenvolvedor necessite da criação de um bloco de texto que não se encaixe em alguma regra defina de bloco, pode-se utilizar o recurso da <div>. A <div> é um bloco de texto que pode ser usado em qualquer lugar do documento. Geralmente a <div> é usada para diagramar o layout de um site. Exemplo de utilização: <div> teste </div> 20

Website Layout HTML5 oferece novos elementos semânticos que definem diferentes partes de uma página web : <Header > - Define um cabeçalho de um documento ou uma seção < Nav > - Define um recipiente para links de navegação <Section > - Define uma seção em um documento <Article> - Define um artigo autónomo independente < Aside> - Define o conteúdo de lado a partir do conteúdo (como uma barra lateral ) < Footer> - Define um rodapé de um documento ou de uma seção <Details > - Define detalhes adicionais <Summary> - Define um título para o < detalhes > elemento 21

Website Layout 22

Website Layout 23 <body> <div id="header">
<h1>City Gallery</h1> </div> <div id="nav"> London<br> Paris<br> Tokyo <div id="section"> <h1>London</h1> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> <div id="footer"> Copyright © W3Schools.com </body> 23

Website Layout 24 <body> <header>
<h1>City Gallery</h1> </header> <nav> London<br> Paris<br> Tokyo </nav> <section> <h1>London</h1> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> </section> <footer> Copyright © W3Schools.com </footer> </body> 24

Tecnologia para a Internet I – Aula 03 Prof. Me. Ronnison Reges Vidal

Apresentações semelhantes

Apresentação em tema: "Tecnologia para a Internet I – Aula 03 Prof. Me. Ronnison Reges Vidal"— Transcrição da apresentação:

Apresentações semelhantes

Sobre projeto

Feedback

Login

Autorizar-se através da rede social:

Tecnologia para a Internet I – Aula 03 Prof. Me. Ronnison Reges Vidal

Apresentações semelhantes

Apresentação em tema: "Tecnologia para a Internet I – Aula 03 Prof. Me. Ronnison Reges Vidal"— Transcrição da apresentação:

Apresentações semelhantes

Sobre projeto

Feedback