Algunes coses d'html, css, seo i web semàntica
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
338
On Slideshare
338
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML CSS
  • 2. Separació en capes XML (HTML)‏ CSS JS Contingut Presentació Comportament
  • 3. Separació en capes
  • 4. Separació en capes
  • 5. Separació en capes
  • 6. HyperText Markup Language <html>
  • 7. HTML Regles d'escriptura
  • 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. 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. HTML <head>
  • 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. HTML <body>
  • 13. HTML – Alguns elements dins <body>
    • 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. p Paragraf.
    • 15. ol, ul, dl Llistes (ordenades, desordenades i de definicions).
    • 16. li Items de llista (list-item).
    • 17. dt, dd Terme de la definició i definició de la definició...
    • 18. img (atributs: src=‘ruta/de/la/imatge.jpg’ alt=‘text alternatiu’) Incloure una imatge.
    • 19. a (atribut: href=‘desti/del/vincle.html’) Enllaços
  • 20. El meu primer Exemple
  • 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. HTML – Pàgina d'exemple
  • 23. Web Semàntica <b> vs. <strong>
  • 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. 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. Web Semàntica Igual passa amb altres elements: Presentacional b i u strike font Semàntic strong em ins del cap (css)‏
  • 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. 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. 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. Web Semàntica - SEO Google (i la resta de buscadors) són tontos del cul. CSS JS
  • 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. css
  • 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. CSS - Sintaxi selector { regla: valor; regla: valor; ... } h1 { font-size: 48pt; color: red; } selector regla valor
  • 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. 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. 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. 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. 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