HTML. Para estruturar informação

Tamanho: px

Começar a partir da página:

Download "HTML. Para estruturar informação"

Elza do Amaral Lacerda
8 Há anos
Visualizações:

1 HTML Para estruturar informação

2 Não é case sensitive A saber Começar com editores de texto básicos, como notepad Comentários  Elemento = {opening tag, [closing tag]} A closing tag não é utilizada em alguns elementos Muitos dos elementos que se seguem são OPCIONAIS, incluindo head e body

-- bla bla bla --> Elemento = {opening tag, [closing tag]} A closing

3 Head <head> </head> Ideal para meta informações <title> <meta name= name1 content= content1 > description keywords

4 Algumas meta <meta http-equiv= pragma" content="nocache"> <meta http-equiv= expires" content="-1"> <meta http-equiv= content-type content="text/html; charset=iso "> Em HTML5 a meta informação tende a poder ser mais sucinta: <meta charset= utf-8 >

content-type content="text/html; charset=iso-8859-1"> Em HTML5

5 Title: a + importante <title>clickfire - Viewpoints, Tools, and Content for Webmasters</title> Keywords (Separar com vírgulas; só o INKTOMI.COM é que ainda usa keywords ) <meta name="keywords" content="free, webmaster, resources, articles, tools, tutorials, reviews, graphics, scripts, download, CIW, freeware"> Description (usar menos de 200 palavras) <meta name="description" content="clickfire empowers webmasters by offering free resources like graphics, articles, news, reviews, freeware, tutorials, scripts, wallpaper, backgrounds, Metty meta tag maker, icons, CIW web design, and Christian testimony"> Author <meta name="author" content="emory Rowland"> <link rev="made" href="nospam@someaddress.com"> Copyright <meta name="copyright" content="2006 by Clickfire"> Metatags

de 200 palavras) <meta name="description" content="clickfire empowers webmasters by offering free resources like graphics, articles, news, reviews, freeware, tutorials, scripts, wallpaper,

6 Revisit: aplica-se a bots <meta name="revisit-after" content="2 weeks"> Metatags Refresh: ou redirecção, para certo url, em certo tempo <meta http-equiv="refresh" content="120; url= Expires: com efeito na gestão da cache dos browsers <meta http-equiv="expires" content="wed, 30 Jan :29:02 GMT"> Distribution: global ou local <meta name="distribution" content="global">

7 Robot: restrições a bots All T & i ; No Index T &!i ; No Follow i &!T ; None -!i &!T <meta name="robots" content="nofollow"> Rating: General; 14 Years; Mature; Restricted <meta name="rating" content="14 years"> Metatags Character set (+ comum ISO ) ISO Western Europe and Americas: Afrikaans, Basque, Catalan, Danish, Dutch, English, Faeroese, Finnish, French, Galician, German, Icelandic, Irish, Italian, Norwegian, Portuguese, Spanish and Swedish ISO Latin-written Slavic and Central European languages ISO Esperanto, Galician, Maltese, and Turkish ISO Scandinavia/Baltic ISO Cyrillic ISO Arabic ISO Modern Greek ISO Hebrew ISO Western Europe and Americas: Afrikaans, Basque, Catalan, Danish, Dutch, English, Faeroese, Finnish, French, Galician, German, Turkish, Irish, Italian, Norwegian, Portuguese, Spanish and Swedish <meta http-equiv="content-type" content="text/html;charset=iso ">

T <meta name="robots" content="nofollow"> Rating: General; 14 Years; Mature; Restricted <meta name="rating" content="14 years"> Metatags Character set (+ comum ISO-8859-1) ISO-8859-1 Western Europe

8 Language <meta http-equiv="content-language" content="en-us"> Page caching (pelo browser) <meta http-equiv="pragma" content="no-cache"> Generator: sw para fazer a página <meta name="generator" content= NotePad"> Metatags Window Target: para evitar framing <meta http-equiv="window-target" content="_top"> Description <meta name="abstract" content="viewpoints, Tools, and Content for Webmasters"> Comments (podem ser usados pelos motores de procura)

NotePad"> Metatags Window Target: para evitar framing <meta http-equiv="window-target" content="_top">

9 p strong sub sup del a Alguns elementos Qual a sua semântica? <a href= url >texto da âncora</a> url? Inclui protocolo (http, mailto )

10 Alguns elementos Qual a sua semântica? table, thead, tbody, tfoot hr ul, ol, li

11 h1 Headings Em versões anteriores do HTML alguns autores argumentavam que só deveria existir um h1 por página. Em HTML5, qualquer heading pode estar em qualquer secção e até se sugere que sejam sempre h1, sendo da competência do HTML outlining algorithm perceber a sua importância relativa. h2, h3, h4, h5, h6

Em HTML5, qualquer heading pode estar em qualquer secção e até se sugere que

12 Alguns elementos section Um documento poder ter muitas section article Uma section poder conter muitos article, mas cada article também pode conter muitas section aside Para efeitos tipográficos, zonas de publicidade, grupos de nav e outro conteúdo considerado separado do principal nav Para navegação

conter muitas section aside Para efeitos tipográficos, zonas de publicidade,

13 Alguns elementos header Sobre o conteúdo seguinte footer Sobre o conteúdo prévio Um conteúdo pode ter vários footers O velho elemento blockquote pode beneficiar de footer: <blockquote> bla bla bla <footer> <cite> </cite> </footer> </blockquote>

footers O velho elemento blockquote pode beneficiar de footer:

14 hgroup Mais elementos novos Para agrupar headings time Por exemplo uma heading + subheading poderia ser <hgroup><h1>título</h1><h2>sub-título</h2></h1> Para deixar explícito que o conteúdo é tempo <time datetime=" t15:00+00:00">segunda-feira , 15h em PT</time> <time datetime=" t15:00z">segunda-feira , 15h em PT</time> mark Para destacar conteúdo <mark>my words</mark>

<time datetime="2013-10-07t15:00+00:00">segunda-feira 2013-10-07, 15h em PT</time> <time

15 details Mais elementos novos Elemento interativo que, quando suportado*, abre/fecha o seu conteúdo a partir de uma zona de summary <details> <summary>saber+</summary> <p>bla bla bla</p> </details> Normalmente associado a um estilo summary {cursor:pointer; text-decoration: underline;}

<details> <summary>saber+</summary> <p>bla bla bla</p> </details>

16 Imagens <img src= url width= x height= y alt= xpto > Combinação com HTML a <a href= ><img ></a> Semântica em figure <figure>...<figcaption></figcaption></figure>

Documentos relacionados

MODULO 4 DESENVOLVIMENTO DE PÁGINAS WEB ESTÁTICAS. Redes de Comunicação

MODULO 4 DESENVOLVIMENTO DE PÁGINAS WEB ESTÁTICAS Redes de Comunicação Regras para um website eficaz Categorização dos conteúdos estrutura lógica dos conteúdos Condensação conteúdos simples e directos