HTML - How To
Upcoming SlideShare
Loading in...5
×
 

HTML - How To

on

  • 4,689 views

Recap, best practices e forgotten tags.

Recap, best practices e forgotten tags.

Consolidação de conhecimentos de HTML, HTML vs. XHTML e mais algumas coisas que ainda não sabiam.

Statistics

Views

Total Views
4,689
Views on SlideShare
4,022
Embed Views
667

Actions

Likes
3
Downloads
143
Comments
0

6 Embeds 667

http://developers.blogs.sapo.pt 445
http://wiki.telecom.pt 209
http://127.0.0.1 10
http://www.seeksys.com.br 1
http://bypace.com 1
http://ubuntu 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML - How To HTML - How To Presentation Transcript

    • <html> <head> <title>HTML/XHTML</title> </head> <body> </body> </html> 2009.03.04 HTML/XHTML
    • <html> André Torgal – Lisboa, Portugal - 2009-03-04 <head> <title>HTML</title> <meta name=”author” Torgal”> content=”André <meta name=quot;geo.placenamequot; Portugalquot; /> content=quot;Lisboa, <meta name=quot;DC.Date.Createdquot; content=quot;2009-03-04quot;> ... </head> <body> ... 2009.03.04 HTML/XHTML
    • HOW-TO HTML XHTML FAIL COOL 2009.03.04 HTML/XHTML
    • HTML::State Of The Art Estrutura  Declarações Semântica  #referências Conteúdo  <estrutura> <semântica> Usabilidade  ... Contéudo Acessibilidade  ... SEO </semântica>  </estrutura> ...  2009.03.04 HTML/XHTML
    • HTML::Apenas HTML Estrutura  Declarações Semântica  #referências Conteúdo  <estrutura> <semântica> ... Contéudo ... </semântica> </estrutura> 2009.03.04 HTML/XHTML
    • HTML XHTML SGML XML 1986 1998 HTML XHTML 4.0.1 1.0 STRICT STRICT 1999 2000 2009.03.04 HTML/XHTML
    • COMPONENTES MARKUP  Declarações ELEMENT TYPE  #referências TAG  <estrutura> ATTRIBUTE / VALUE  <semântica> ELEMENT ...  Conteúdo CONTENT MODEL  ... </semântica> DOCUMENT STRUCTURE  </estrutura> DECLARATIONS  COMMENTS  2009.03.04 HTML/XHTML
    • MARKUP Processo de “marcar” o conteúdo com TAGS  Conjunto de TAGS de um documento.  “Ah e tal, é preciso meter aí um <BR /> “Ah e tal, é preciso mexer no markup” 2009.03.04 HTML/XHTML
    • ELEMENT TYPES / TAGS Cada ELEMENT TYPE tem o seu TAG  Cada elemento é definido por um par  OPENING TAG + CLOSING TAG <tag> ...conteúdo... </tag> 2009.03.04 HTML/XHTML
    • ELEMENT TYPES / TAGS HTML Alguns ELEMENT TYPE  podem dispensar CLOSING-TAG (mas não é aconselhável) <h1>Carpe Diem! <p>Lorem ipsum dolor sit amet. <p>Et pluribus unum. 2009.03.04 HTML/XHTML
    • ELEMENT TYPES / TAGS XHTML Todos os ELEMENT têm que abrir/fechar  seja qual fôr o seu ELEMENT TYPE (regra “well-formed” do XML) <h1>Carpe Diem!</h1> <p>Lorem ipsum dolor sit amet.</p> <p>Et pluribus unum.</p> 2009.03.04 HTML/XHTML
    • ELEMENT TYPES / TAGS HTML Alguns ELEMENT TYPE  não têm CLOSING-TAG porque nunca têm conteúdo <br> <hr> <img src= “/media/logo.png”> 2009.03.04 HTML/XHTML
    • ELEMENT TYPES / TAGS XHTML Nos elementos sem conteúdo omite-se o  CLOSING-TAG e dizem-se AUTO-CLOSING (só se “deve” aplicar a elementos que não têm conteúdo por natureza... porquê?) <link type=“text/css” href=“/style/x.css” /> <br />  <img src= “/media/logo.png” /> <div /> 2009.03.04 HTML/XHTML
    • ATTRIBUTES Cada ELEMENT TYPE tem um conjunto de  ATTRIBUTES possíveis Ex: id, class  <tag id=“foo” class=“bar”> ...conteúdo... </tag> 2009.03.04 HTML/XHTML
    • TAGS / ATTRIBUTES HTML Os TAGS ou ATTRIBUTES  não são case-sensitive (mas é aconselhável só usar minúsculas) <Tag ID=“foo” class=“bar”> ...conteúdo... </Tag> 2009.03.04 HTML/XHTML
    • TAGS / ATTRIBUTES XHTML Os TAGS e ATTRIBUTES são case-sensitive  (usar minúsculas sempre!) <tag id=“foo” class=“bar”> ...conteúdo... </tag> 2009.03.04 HTML/XHTML
    • TAGS / ATTRIBUTES HTML Alguns ATTRIBUTES de alguns TAGS  podem ser minimizados <option value=“pt” selected> Portugal </option> 2009.03.04 HTML/XHTML
    • TAGS / ATTRIBUTES XHTML Nenhum ATTRIBUTE pode ser minimizado  (usa-se o valor igual ao nome do atributo) <option value=“pt” selected=“selected”> Portugal </option> 2009.03.04 HTML/XHTML
    • CONTENT MODEL O elemento principal do conteúdo é o BODY  Dentro deste, cada ELEMENT TYPE é: BLOCK LEVEL   INLINE LEVEL <body> ...conteúdo... </body> 2009.03.04 HTML/XHTML
    • BLOCK LEVEL DIV <h1>welcome</h1> H1 .. H6 <p>foo</p> <div>bar</div> P BLOCKQUOTE UL, OL, DL welcome ADDRESS foo TABLE bar 2009.03.04 HTML/XHTML
    • INLINE LEVEL SPAN <p>Lorem Ipsum A     <span>alfa</span>     <em>beta</em>. STRONG, EM </p> IMG CITE, CODE Lorem Ipsum alfa beta. INPUT SELECT 2009.03.04 HTML/XHTML
    • CONTAINER / CONTENTS Cada ELEMENT pode conter + ELEMENTS...  <tag id=“foo” class=“bar”> <tag>     <tag>         ...conteúdo...     </tag> </tag> </tag> 2009.03.04 HTML/XHTML
    • CONTAINER / CONTENT MODEL ...mas apenas de terminados ELEMENT TYPE  - BODY só pode conter BLOCK LEVEL - INLINE LEVEL não pode conter BLOCK - ... e várias outras regras específicas ✗  ✗  <span> <p> <p>...</p> <p>....</p> </span> </p> 2009.03.04 HTML/XHTML
    • MARKUP (BÁSICO) Texto  H1.6 P, SPAN, EM, STRONG, BLOCKQUOTE, ABBR Listas/Items  UL, OL, LI, DL, DT, DD Links  A Secções  DIV 2009.03.04 HTML/XHTML
    • MARKUP - TEXTO <h1>Bolo de Nozes</h1> <h2>Preparação</h2> <p>Deite num recipiente 100g de margarina e 100g de açúcar e amasse muito bem até amolecer.</p> <p><img src= “/media/bolo1.jpg” /></p> <p>...</p> 2009.03.04 HTML/XHTML
    • MARKUP - LISTAS <h1>Bolo de Nozes</h1> ... <h2>Ingredientes</h2> <ul> <li>99 ovos</li> <li>31 nozes</li> ... </ul> 2009.03.04 HTML/XHTML
    • MARKUP - LINKS <h1>Bolo de Nozes</h1> ... <h2>Receitas Relacionadas</h2> <ul> <li><a href= “/receitas/foo”>foo</a></li> <li><a href= “/receitas/foo”>foo</a></li> ... </ul> 2009.03.04 HTML/XHTML
    • MARKUP (FORMS) Form  FORM, FIELDSET Controls  INPUT type=“hidden|text|radio|checkbox|file| password|submit|reset” TEXTAREA SELECT type=“multiple” 2009.03.04 HTML/XHTML
    • FORGOTTEN “TAGS” XHTML LABEL  <label for=“userpass”>Password</label> <input type= “password” id=“userpass” /> DL, DT, DD  <dl> <dt></dt> <dd></dd> </dl> 2009.03.04 HTML/XHTML
    • DOCUMENT STRUCTURE <!DOCTYPE ... > Declarações <html> <head> ... Cabeçalho </head> <body> Conteúdo ... </body> </html> 2009.03.04 HTML/XHTML
    • HEADER XHTML TITLE  <title>Password</title> META  <meta name=“keywords”      content=“foo, bar, baz, lorem, ipsum, nozes” /> <meta http­equiv=quot;Content­Typequot;      content=quot;text/html; charset=UTF­8quot; /> 2009.03.04 HTML/XHTML
    • HEADER XHTML SCRIPT  <script type=quot;text/javascriptquot; src=quot;/js/foo.jsquot; /> LINK  <link rel=quot;alternatequot; type=quot;application/rss+xmlquot;    title=quot;Feedquot; href=quot;http://example.com/rssquot; /> <link rel=quot;shortcut iconquot;     href=quot;http://example.com/fav.icoquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot;     href=quot;http://example.com/style/main.cssquot; /> 2009.03.04 HTML/XHTML
    • DECLARAÇÕES HTML !DOCTYPE - indica ao browser o tipo de  documento (qual o standard seguido) <!DOCTYPE HTML PUBLIC     quot;­//W3C//DTD HTML 4.01//ENquot;      quot;http://www.w3.org/TR/html4/strict.dtdquot;> 2009.03.04 HTML/XHTML
    • DECLARAÇÕES XHTML No caso de XHTML...  Declaração XML com indicação do encoding  Elemento HTML tem que conter atributo NAMESPACE  <!DOCTYPE html PUBLIC      quot;­//W3C//DTD XHTML 1.0 Strict//ENquot;     quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1­strict.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot;      lang=quot;ptquot; xml:lang=quot;ptquot;> 2009.03.04 HTML/XHTML
    • DECLARAÇÕES XHTML No caso de XHTML...  Declaração <?xml ?> opcional se encoding = UTF-8  Se usada a declaração IE6 entra em QUIRKS MODE!  Encoding não é = UTF-8 !?  <?xml version=quot;1.0quot; encoding=quot;UTF­8quot;?> QUIRKS MODE - WTF!? 2009.03.04 HTML/XHTML
    • FAIL QUIRKS MODE? Obrigar o browser a apresentar o  documento segundo as regras (?) quebradas pré-standards (IE 5.5) Usar a declaração <?xml ... ?>  IE6 entra em QUIRKS MODE! Não declarar <!DOCTYPE ... >  Praticamento todos os browsers passam a QUIRKS MODE 2009.03.04 HTML/XHTML
    • FAIL TRANSITIONAL Usar HTML deprecated (HTML 3.2, 1997)  FONT, CENTER, B, I, IFRAME, ...  bgcolor=“pink”  target=“_blank”  style=“...”  name=“...”  2009.03.04 HTML/XHTML
    • FAIL (DES)ESTRUTURADO <h3>Bolo de Nozes</h3> <h3>Ingredientes</h3> <p>....</p> <img ... /> <h2>Relacionados</h2> <p>....</p> <h1>Todos os Bolos do Mundo</h1> 2009.03.04 HTML/XHTML
    • FAIL DIVITIS <div class=“receitaWrapper”> <div class= “receita”> <div class= “receitaContent”> <div class=“title”> <h2>Bolo de Nozes</h2> </div> <div class=“subtitle”> <h3>Ingredientes</h3> <p class=“link”> <a href=“/more”> <span class= “more” ... 2009.03.04 HTML/XHTML
    • FAIL SEMÂNTICA (1) <div class=“receita”> <p class=“title”>Bolo de Nozes</p> <strong class=“texto”> Deite num recipiente 100g de margarina e 100g de açúcar e amasse <span class=“strong”>muito bem</span> até amolecer.<br /> Junte... </strong> <blockquote class=“danger”>...</blockquote> </div> 2009.03.04 HTML/XHTML
    • FAIL SEMÂNTICA (2) <div class=“roundedBox”> <h2 class=“shadow”>Bolo de Nozes</h2> <p class=“gray”> Deite num recipiente 100g de margarina e 100g de açúcar e amasse <strong class=“yellowItalic”>muito bem</strong> até amolecer. </p> <a class=“orangeBig” href=“...”>...</a> </div> 2009.03.04 HTML/XHTML
    • FAIL NÃO-CONTEÚDO <a href=“/about” class=“header”> <img src=“about.png” /> </a> <div class=“title”> <img src=“receitas.png” /> </div> <a href=“/about”>...</a> | <a ... 2009.03.04 HTML/XHTML
    • COOL COMENTÁRIOS STDOUT/STDERR  <!-- BEGIN receitas/list/default --> <!-- created: 2009-03-04 12:30 --> <!-- expires: 2009-03-04 14:00 --> <div class=“receitas”> ... </div> <!-- /END receitas/list/default --> 2009.03.04 HTML/XHTML
    • COOL STANDARDS Validador W3C  http://validator.w3.org/check DTD Recomendados  http://www.w3.org/QA/2002/04/valid-dtd-list.html Web-Standards Project  http://www.webstandards.org/ XTHML vs content-type  http://h3h.net/2005/12/xhtml-harmful-to-feelings/ http://www.456bereastreet.com/archive/200501/the_perils_of_using_xh 2009.03.04 HTML/XHTML
    • COOL EDITORES TEXTO Open  Syntax-highlight  Auto-complete  Auto-format  Save as “desktop/test.(x)html”  Abrir no(s) browser(s) ;-)  2009.03.04 HTML/XHTML
    • COOL EXTENSÕES FF FIREBUG (inspect/test html, css, js, headers, ...)  http://www.youtube.com/results?q=firebug TIDY (validate html - error/warn - line# + why?)  http://users.skynet.be/mgueury/mozilla/ WEB-DEVELOPER (enable/disable css, js, ...)  https://addons.mozilla.org/en-US/firefox/addon/60 2009.03.04 HTML/XHTML
    • COOL REFERÊNCIAS W3C (specs completos, linguagem muito técnica)  http://www.w3.org/html/ W3SCHOOLS (rápido, incompleto, impreciso...)  http://www.w3schools.com/xhtml/ WIKIPEDIA (ah pois...)  http://en.wikipedia.org/wiki/Html 2009.03.04 HTML/XHTML
    • COOL EXEMPLOS BONS/MAUS WWW (inspect/test html, css, js, headers, ...)  Dicas que estamos perante um bom exemplo: MARKUP válido (check tidy!)   MARKUP mínimo  MARKUP semântico  MARKUP comentado Exemplo máximo: bom MARKUP não precisa de  ser alterado quando muda o layout: a.k.a. link do costume: http://www.csszengarden.com/ 2009.03.04 HTML/XHTML
    • COOL MESTRES ALA (A List Apart)  http://www.alistapart.com/topics/code/htmlxhtml/ 456BEREASTREET (Roger Johansson)  http://www.456bereastreet.com/ Muitos mais...  http://perguntem.ao.andr3.net 2009.03.04 HTML/XHTML