SlideShare a Scribd company logo
1 of 33
Download to read offline
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</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” />
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.
HTML <head>
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, …
HTML <body>
HTML – Alguns elements dins <body> ,[object Object]
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
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/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>
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 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 .
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)‏
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 class=”titular”>Títol de la pàgina</p> css: .titular { font-size: 36pt; font-weight: bold; }
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; }
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)‏
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 la mostraran igual ara i en el futur  (que bonica és la teoria)‏ http://validator.w3.org
css
Cascading Style Sheets CSS: Cascading Style Sheets Permet canviar l'aspecte visual d'una pàgina. Exemple: CSS Zen Garden ( http://www.csszengarden.com/ )‏

More Related Content

Viewers also liked

Hvordan fungerer en søkemotor
Hvordan fungerer en søkemotorHvordan fungerer en søkemotor
Hvordan fungerer en søkemotorFINN.no
 
3 examen et corrige arabe 2014 1 am t1
3 examen et corrige arabe 2014 1 am t13 examen et corrige arabe 2014 1 am t1
3 examen et corrige arabe 2014 1 am t1Ahmed Mesellem
 
Know your city for saamavani
Know your city   for saamavaniKnow your city   for saamavani
Know your city for saamavaniSubhradip Bose
 
Использование библиотеки bem-bl
Использование библиотеки bem-blИспользование библиотеки bem-bl
Использование библиотеки bem-blVarya Stepanova
 
Bmj report alcohol-handrubs
Bmj report alcohol-handrubsBmj report alcohol-handrubs
Bmj report alcohol-handrubsmiraspa
 
Mobile User Interfaces for Efficient Verification of Holograms
Mobile User Interfaces for Efficient Verification of HologramsMobile User Interfaces for Efficient Verification of Holograms
Mobile User Interfaces for Efficient Verification of HologramsJens Grubert
 
Architecting world class azure resource manager templates
Architecting world class azure resource manager templatesArchitecting world class azure resource manager templates
Architecting world class azure resource manager templatesMarc Mercuri
 
Powerpoint rationale
Powerpoint rationalePowerpoint rationale
Powerpoint rationaleKeppsy
 
Integration
IntegrationIntegration
Integrationlyonka02
 
Software ipr-patents-th10-2012
Software ipr-patents-th10-2012Software ipr-patents-th10-2012
Software ipr-patents-th10-2012nghia le trung
 
Sample Work
Sample WorkSample Work
Sample Workbjm190
 

Viewers also liked (19)

Hvordan fungerer en søkemotor
Hvordan fungerer en søkemotorHvordan fungerer en søkemotor
Hvordan fungerer en søkemotor
 
3 examen et corrige arabe 2014 1 am t1
3 examen et corrige arabe 2014 1 am t13 examen et corrige arabe 2014 1 am t1
3 examen et corrige arabe 2014 1 am t1
 
11 compo
11 compo11 compo
11 compo
 
Know your city for saamavani
Know your city   for saamavaniKnow your city   for saamavani
Know your city for saamavani
 
Использование библиотеки bem-bl
Использование библиотеки bem-blИспользование библиотеки bem-bl
Использование библиотеки bem-bl
 
Unit plan sittie
Unit plan sittieUnit plan sittie
Unit plan sittie
 
Bmj report alcohol-handrubs
Bmj report alcohol-handrubsBmj report alcohol-handrubs
Bmj report alcohol-handrubs
 
trabajo 16/09/11
trabajo 16/09/11trabajo 16/09/11
trabajo 16/09/11
 
Mobile User Interfaces for Efficient Verification of Holograms
Mobile User Interfaces for Efficient Verification of HologramsMobile User Interfaces for Efficient Verification of Holograms
Mobile User Interfaces for Efficient Verification of Holograms
 
Canada
CanadaCanada
Canada
 
Scientific Method
Scientific MethodScientific Method
Scientific Method
 
Australia
AustraliaAustralia
Australia
 
Architecting world class azure resource manager templates
Architecting world class azure resource manager templatesArchitecting world class azure resource manager templates
Architecting world class azure resource manager templates
 
Powerpoint rationale
Powerpoint rationalePowerpoint rationale
Powerpoint rationale
 
Las
LasLas
Las
 
Integration
IntegrationIntegration
Integration
 
Software ipr-patents
Software ipr-patentsSoftware ipr-patents
Software ipr-patents
 
Software ipr-patents-th10-2012
Software ipr-patents-th10-2012Software ipr-patents-th10-2012
Software ipr-patents-th10-2012
 
Sample Work
Sample WorkSample Work
Sample Work
 

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

Llenguatges i Estàndards Web - PAC 1 correccció - Multimedia (UOC) - Paquita ...
Llenguatges i Estàndards Web - PAC 1 correccció - Multimedia (UOC) - Paquita ...Llenguatges i Estàndards Web - PAC 1 correccció - Multimedia (UOC) - Paquita ...
Llenguatges i Estàndards Web - PAC 1 correccció - Multimedia (UOC) - Paquita ...Paquita Ribas
 
M08 fulls d'estil
M08 fulls d'estilM08 fulls d'estil
M08 fulls d'estiljsanzvi
 
Lenguatges i Estàndarts web Pac02
Lenguatges i Estàndarts web Pac02Lenguatges i Estàndarts web Pac02
Lenguatges i Estàndarts web Pac02Marcos Baldovi
 

Similar to Algunes coses d'html, css, seo i web semàntica (9)

Css básico
Css básicoCss básico
Css básico
 
Llenguatges i Estàndards Web - PAC 1 correccció - Multimedia (UOC) - Paquita ...
Llenguatges i Estàndards Web - PAC 1 correccció - Multimedia (UOC) - Paquita ...Llenguatges i Estàndards Web - PAC 1 correccció - Multimedia (UOC) - Paquita ...
Llenguatges i Estàndards Web - PAC 1 correccció - Multimedia (UOC) - Paquita ...
 
XML
XMLXML
XML
 
Css v2
Css v2Css v2
Css v2
 
Html
HtmlHtml
Html
 
Accessibilitat als continguts digitals
Accessibilitat als continguts digitalsAccessibilitat als continguts digitals
Accessibilitat als continguts digitals
 
M08 fulls d'estil
M08 fulls d'estilM08 fulls d'estil
M08 fulls d'estil
 
Lenguatges i Estàndarts web Pac02
Lenguatges i Estàndarts web Pac02Lenguatges i Estàndarts web Pac02
Lenguatges i Estàndarts web Pac02
 
Url amigables
Url amigablesUrl amigables
Url amigables
 

More from Carlos Campderrós

More from Carlos Campderrós (7)

LVM (es)
LVM (es)LVM (es)
LVM (es)
 
Seguridad en PHP (es)
Seguridad en PHP (es)Seguridad en PHP (es)
Seguridad en PHP (es)
 
Introducció a Sessions en PHP (cat)
Introducció a Sessions en PHP (cat)Introducció a Sessions en PHP (cat)
Introducció a Sessions en PHP (cat)
 
Introducción a php (es)
Introducción a php (es)Introducción a php (es)
Introducción a php (es)
 
Formularis - Post/Redirect/Get (ca)
Formularis - Post/Redirect/Get (ca)Formularis - Post/Redirect/Get (ca)
Formularis - Post/Redirect/Get (ca)
 
Com estructurar un projecte web (ca)
Com estructurar un projecte web (ca)Com estructurar un projecte web (ca)
Com estructurar un projecte web (ca)
 
Codificaciones caracteres (es)
Codificaciones caracteres (es)Codificaciones caracteres (es)
Codificaciones caracteres (es)
 

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

  • 2. Separació en capes XML (HTML)‏ CSS JS Contingut Presentació Comportament
  • 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.
  • 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, …
  • 13.
  • 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