HTML CSS
Separació en capes XML (HTML)‏ CSS JS Contingut Presentació Comportament
Separació en capes
Separació en capes
Separació en capes
HyperText Markup Language <html>
HTML Regles d'escriptura
HTML - Sintaxi <element atribut1=&quot;valor&quot; atribut2=&quot;valor&quot; atribut3='valor'> <subelement>jajejijoju</su...
HTML – Estructura d'una pàgina <!DOCTYPE ...> <html> <head>...</head> <body>...</body> </html> DOCTYPE Quin tipus de docum...
HTML <head>
HTML – Alguns elements dins <head> <head> <meta http-equiv=‘Content-Type’ content=‘text/html;charset=utf-8’ /> <title>curs...
HTML <body>
HTML – Alguns elements dins <body> <ul><li>h1, h2, h3, h4, h5, h6 Capçaleres i subcapçaleres. En principi hi hauria d'have...
p Paragraf.
ol, ul, dl Llistes (ordenades, desordenades i de definicions).
li Items de llista (list-item).
dt, dd Terme de la definició i definició de la definició...
img  (atributs: src=‘ruta/de/la/imatge.jpg’ alt=‘text alternatiu’)   Incloure una imatge.
a  (atribut: href=‘desti/del/vincle.html’) Enllaços </li></ul>
El meu primer Exemple
HTML – Pàgina d'exemple <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtm...
HTML – Pàgina d'exemple
Web Semàntica <b> vs. <strong>
Web Semàntica S'han d'usar elements pensant en el seu significat,  NO  en la seva presentació <p>Una cosa és <b>remarcar s...
Web Semàntica <b> és un element presentacional, significa negreta. No s'ha d'usar, perquè ja vam dir que la presentació es...
Web Semàntica Igual passa amb altres elements: Presentacional b i u strike font Semàntic strong em ins del cap  (css)‏
Web Semàntica Tampoc se li ha de donar una presentació a un element sense significat que vulgui semblar que la té. <p clas...
Web Semàntica Que tal si utilitzem un encapçalament de primer nivell? <h1>Títol de la pàgina</h1> css: h1 { font-size: 36p...
Web Semàntica - SEO Utilitzar elements semàntics ajuda a la teva pàgina a estar millor posicionada a google. No és el mate...
Web Semàntica - SEO Google (i la resta de buscadors) són tontos del cul. CSS JS
Validació Respecta les normes del tipus de document (DOCTYPE)? Si una pàgina és vàlida, significa que tots els navegadors ...
css
Cascading Style Sheets CSS: Cascading Style Sheets Permet canviar l'aspecte visual d'una pàgina. Exemple: CSS Zen Garden (...
Upcoming SlideShare
Loading in...5
×

Algunes coses d'html, css, seo i web semàntica

217

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
217
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Algunes coses d'html, css, seo i web semàntica

  1. 1. HTML CSS
  2. 2. Separació en capes XML (HTML)‏ CSS JS Contingut Presentació Comportament
  3. 3. Separació en capes
  4. 4. Separació en capes
  5. 5. Separació en capes
  6. 6. HyperText Markup Language <html>
  7. 7. HTML Regles d'escriptura
  8. 8. HTML - Sintaxi <element atribut1=&quot;valor&quot; atribut2=&quot;valor&quot; atribut3='valor'> <subelement>jajejijoju</subelement> <subelement2 atribut1=&quot;pepe&quot; /> </element> Els elements comencen allà on comencen, i ho veiem així: <nomElement possibleAtribut=”possibleValor”> Gairebé tots els elements poden contenir d'altres, i quan el seu contingut ha acabat, es tanquen, amb </nomElement>, és a dir, el mateix que hi havia a l'obertura, amb una barra inclinada (o un 7 majúscula) a l'inici i sense atributs. Hi ha però elements que no poden contindre d'altres, o que no tenen un final, perquè podríem dir que són auto-continguts. Per exemple, una imatge. Allá on comença acaba. Al igual que un salt de linia. En html aleshores només es posa l'apertura, i sense clausura. En xml, l'apertura acaba amb una altra barra: <elementAutoContingut possibleAtribut=”valor” />
  9. 9. HTML – Estructura d'una pàgina <!DOCTYPE ...> <html> <head>...</head> <body>...</body> </html> DOCTYPE Quin tipus de document és, i a quina gramàtica s'adapta (HTML, XHTML, MathML, SVG...)‏ <html> Tot el codi de la pàgina ha d'estar dins d'aquesta etiqueta (o tag o element). <head> Meta-informació de la pàgina, el títol de la mateixa i referències a fitxers css (presentació) i javascript (comportament). <body> El contingut de la pàgina en si, que es mostra en el navegador. És important que segueixi una estructura lògica i certa semàntica.
  10. 10. HTML <head>
  11. 11. HTML – Alguns elements dins <head> <head> <meta http-equiv=‘Content-Type’ content=‘text/html;charset=utf-8’ /> <title>curso molón</title> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;fitxer.css&quot; /> <script type=&quot;text/javascript&quot; src=&quot;fitxer.js&quot;></script> </head> title El text que es mostra a dalt en el navegador. La part més important d'una pàgina link Per enllaçar altres documents amb aquest: Fulles d’estil, favicon, prev, next, home, glossary script Per introduir scripts (ja sigui directament o enllaçant un fitxer)‏ meta Meta-informació de la pàgina: autor, keywords, charset, content-type, …
  12. 12. HTML <body>
  13. 13. HTML – Alguns elements dins <body> <ul><li>h1, h2, h3, h4, h5, h6 Capçaleres i subcapçaleres. En principi hi hauria d'haver un sol <h1> que seria el titol d'aquesta pàgina i després anar baixant de h2 fins al que sigui.
  14. 14. p Paragraf.
  15. 15. ol, ul, dl Llistes (ordenades, desordenades i de definicions).
  16. 16. li Items de llista (list-item).
  17. 17. dt, dd Terme de la definició i definició de la definició...
  18. 18. img (atributs: src=‘ruta/de/la/imatge.jpg’ alt=‘text alternatiu’) Incloure una imatge.
  19. 19. a (atribut: href=‘desti/del/vincle.html’) Enllaços </li></ul>
  20. 20. El meu primer Exemple
  21. 21. HTML – Pàgina d'exemple <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xml:lang=&quot;ca&quot; lang=&quot;ca&quot;> <head> <meta http-equiv=&quot;content-type&quot; content=&quot;text/html;charset=utf-8&quot; /> <title>Curs de PHP</title> </head> <body> <h1>El meu primer exemple</h1> <p>Hola bones, sóc un paràgraf i intentaré no ser molt pesat. Bé, m'he cansat d'existir... fins una altra.</p> <h2>Menú</h2> <ul> <li><a href=&quot;http://www.php.net/&quot;>PHP</a></li> <li><a href=&quot;http://www.mysql.com/&quot;>MySQL</a></li> </ul> <h2>altres</h2> <dl> <dt>pepe</dt> <dd>pepe es un diminutiu de josé</dd> <dt>paco</dt> <dd>paco és un diminutiu de francisco</dd> </dl> </body> </html>
  22. 22. HTML – Pàgina d'exemple
  23. 23. Web Semàntica <b> vs. <strong>
  24. 24. Web Semàntica S'han d'usar elements pensant en el seu significat, NO en la seva presentació <p>Una cosa és <b>remarcar segons la decoració del text</b>, i una altra molt diferent és <strong>afegir significància semàntica</strong>.</p> Una cosa és remarcar segons la decoració del text, i una altra molt diferent és afegir significància semàntica .
  25. 25. Web Semàntica <b> és un element presentacional, significa negreta. No s'ha d'usar, perquè ja vam dir que la presentació es fa a través de css En el seu cas s'ha d'usar < strong >, que posa énfasi en el que sigui (com es representi és una altra història… dóna la casualitat que tots els navegadors també ho representen amb negreta)‏
  26. 26. Web Semàntica Igual passa amb altres elements: Presentacional b i u strike font Semàntic strong em ins del cap (css)‏
  27. 27. Web Semàntica Tampoc se li ha de donar una presentació a un element sense significat que vulgui semblar que la té. <p class=”titular”>Títol de la pàgina</p> css: .titular { font-size: 36pt; font-weight: bold; }
  28. 28. Web Semàntica Que tal si utilitzem un encapçalament de primer nivell? <h1>Títol de la pàgina</h1> css: h1 { font-size: 36pt; font-weight: bold; }
  29. 29. Web Semàntica - SEO Utilitzar elements semàntics ajuda a la teva pàgina a estar millor posicionada a google. No és el mateix trobar-se un paràgraf que diu ‘Curs de PHP de PUE’ que un encapçalament de primer nivell que diu el mateix. Al h1 se li dóna molta més importància. SEO (Search Engine Optimization)‏
  30. 30. Web Semàntica - SEO Google (i la resta de buscadors) són tontos del cul. CSS JS
  31. 31. Validació Respecta les normes del tipus de document (DOCTYPE)? Si una pàgina és vàlida, significa que tots els navegadors la mostraran igual ara i en el futur (que bonica és la teoria)‏ http://validator.w3.org
  32. 32. css
  33. 33. Cascading Style Sheets CSS: Cascading Style Sheets Permet canviar l'aspecte visual d'una pàgina. Exemple: CSS Zen Garden ( http://www.csszengarden.com/ )‏
  34. 34. CSS - Sintaxi selector { regla: valor; regla: valor; ... } h1 { font-size: 48pt; color: red; } selector regla valor
  35. 35. CSS – Selectors d'element de classe de id de descendència p .item_de_menu #capsalera #capsalera img tots els <p> tots els que tinguin class=”item_de_menu” el que tingui id=”capsalera” totes les imagtes (img) que estiguin dins de #capsalera
  36. 36. CSS – Selectors Els Selectors es poden mesclar #pepe p.imatge img les imatges que estiguin dins d'un paràgraf amb classe “imatge” a dins d'un element amb id “pepe” .p1.p2.p3 elements que tinguin les classes p1, p2 i p3 (totes elles alhora!): <element class=”p1 p2 p3”> h1, h2, h3, h4 tots els h1, tots els h2, tots els h3 i tots els h4
  37. 37. CSS – Selectors Hi ha altres selectors: fill directe: p > a tots els enllaços (a) que siguin fills d'un paràgraf (p). <p>hola hola <a href=”pepe.html”>pepe</a> que tal <em>estàs <a href=”avui.html”>avui</a></em>?</p> El primer enllaç es veuria afectat, però el segon no, perquè el seu pare és <em>. atributs: p[lang] tots els paràgrafs (p) que tinguin (no importa el valor) l'atribut lang. p[lang=es] els p que el seu atribut lang sigui 'es'.
  38. 38. CSS - Selectors Pseudo-selectors: p:first-child El paragraf que sigui el primer fill del seu pare p:last-child Similar a l'anterior, però l'últim fill p:first-line La primera línia de l'element p p:first-letter La primera lletra de l'element p p:after Contingut a continuació del p p:before Contingut abans del p
  39. 39. CSS - el model de capsa (box model) 1 3 4 1.- Marge (margin) 2.- Borde (border) 3.- Marge interior (padding) 4.- Contingut (width, height) 2 Aquí va el contingut. L'espai entre el borde blau i el borde rallat és el padding. El borde blau és el border. L'espai entre el border i el borde 'morse' és el margin. Tant el padding com el margin com el border poden ser diferents als 4 cantons (top, bottom, left, right). Les declaracions d'amplada i altura (width i height) són pel contingut. La caixa final acaba mesurant: widthTotal = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×