Diapositiva 1

HTMLCSS

Separaci en capes

XML (HTML)CSSJSContingutPresentaciComportament

Separaci en capes

Separaci en capes

Separaci en capes

HyperText Markup Language

Regles d'escripturaHTML

jajejijoju

Els elements comencen all on comencen, i ho veiem aix:

Gaireb tots els elements poden contenir d'altres, i quan el seu contingut ha acabat, es tanquen, amb , s a dir, el mateix que hi havia a l'obertura, amb una barra inclinada (o un 7 majscula) a l'inici i sense atributs.

Hi ha per elements que no poden contindre d'altres, o que no tenen un final, perqu podrem dir que sn auto-continguts. Per exemple, una imatge. All on comena acaba. Al igual que un salt de linia. En html aleshores noms es posa l'apertura, i sense clausura. En xml, l'apertura acaba amb una altra barra:

HTML - Sintaxi

......

DOCTYPEQuin tipus de document s, i a quina gramtica s'adapta (HTML, XHTML, MathML, SVG...)

Tot el codi de la pgina ha d'estar dins d'aquesta etiqueta (o tag o element).

Meta-informaci de la pgina, el ttol de la mateixa i referncies a fitxers css (presentaci) i javascript (comportament).

El contingut de la pgina en si, que es mostra en el navegador. s important que segueixi una estructura lgica i certa semntica.HTML Estructura d'una pgina

HTML

curso moln

titleEl text que es mostra a dalt en el navegador. La part ms important d'una pgina

link
Per enllaar altres documents amb aquest: Fulles destil, favicon, prev, next, home,
glossary

script
Per introduir scripts (ja sigui directament o enllaant un fitxer)

meta
Meta-informaci de la pgina: autor, keywords, charset, content-type, HTML Alguns elements dins

HTML

h1, h2, h3, h4, h5, h6
Capaleres i subcapaleres. En principi hi hauria d'haver un sol que seria el titol d'aquesta pgina i desprs anar baixant de h2 fins al que sigui.

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)
Enllaos

HTML Alguns elements dins

El meu primer Exemple

Curs de PHPEl meu primer exempleHola bones, sc un pargraf i intentar no ser molt pesat. B, m'he cansat d'existir... fins una altra.Men

PHP

MySQL

altrespepepepe es un diminutiu de jospacopaco s un diminutiu de francisco

HTML Pgina d'exemple

HTML Pgina d'exemple

Web Semntica

vs. S'han d'usar elements pensant en el seu significat, NO en la seva presentaciUna cosa s remarcar segons la decoraci del text, i una altra molt diferent s afegir significncia semntica.Una cosa s remarcar segons la decoraci del text, i una altra molt diferent s afegir significncia semntica.Web Semntica s un element presentacional, significa negreta. No s'ha d'usar, perqu ja vam dir que la presentaci es fa a travs de cssEn el seu cas s'ha d'usar , que posa nfasi en el que sigui (com es representi s una altra histria dna la casualitat que tots els navegadors tamb ho representen amb negreta)Web SemnticaIgual passa amb altres elements:PresentacionalbiustrikefontSemnticstrongeminsdelcap (css)Web SemnticaTampoc se li ha de donar una presentaci a un element sense significat que vulgui semblar que la t.Ttol de la pginacss:.titular {font-size: 36pt;font-weight: bold;}Web SemnticaWeb SemnticaQue tal si utilitzem un encapalament de primer nivell?Ttol de la pginacss:h1 {font-size: 36pt;font-weight: bold;}Utilitzar elements semntics ajuda a la teva pgina a estar millor posicionada a google. No s el mateix trobar-se un pargraf que diu Curs de PHP de PUE que un encapalament de primer nivell que diu el mateix. Al h1 se li dna molta ms importncia.SEO (Search Engine Optimization)Web Semntica - SEOGoogle (i la resta de buscadors) sn tontos del cul.CSSJSWeb Semntica - SEORespecta les normes del tipus de document (DOCTYPE)?Si una pgina s vlida, significa que tots els navegadors la mostraran igual ara i en el futur
(que bonica s la teoria)http://validator.w3.orgValidacicssCSS: Cascading Style SheetsPermet canviar l'aspecte visual d'una pgina.Exemple: CSS Zen Garden (http://www.csszengarden.com/)Cascading Style Sheetsselector{regla: valor;regla: valor;...}h1{font-size:48pt;color:red;}selectorreglavalorCSS - SintaxiCSS Selectorsd'elementde classede idde descendnciap.item_de_menu#capsalera#capsalera imgtots els tots els que tinguin
class=item_de_menuel que tingui
id=capsaleratotes les imagtes (img) que estiguin dins de #capsaleraCSS SelectorsEls Selectors es poden mesclar#pepe p.imatge imgles imatges que estiguin dins d'un pargraf amb classe imatge a dins d'un element amb id pepe.p1.p2.p3elements que tinguin les classes p1, p2 i p3 (totes elles alhora!):h1, h2, h3, h4tots els h1, tots els h2, tots els h3 i tots els h4CSS SelectorsHi ha altres selectors:fill directe:p > atots els enllaos (a) que siguin fills d'un pargraf (p).hola hola pepe que tal ests avui?El primer enlla es veuria afectat, per el segon no, perqu el seu pare s .atributs:p[lang]tots els pargrafs (p) que tinguin (no importa el valor) l'atribut lang.p[lang=es]els p que el seu atribut lang sigui 'es'.CSS - SelectorsPseudo-selectors:p:first-childEl paragraf que sigui el primer fill del seu parep:last-childSimilar a l'anterior, per l'ltim fillp:first-lineLa primera lnia de l'element pp:first-letterLa primera lletra de l'element pp:afterContingut a continuaci del pp:beforeContingut abans del pCSS - el model de capsa (box model)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 serdiferents als 4 cantons (top, bottom, left, right).Les declaracions d'amplada i altura (width i height) snpel contingut. La caixa final acaba mesurant:widthTotal = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right1341.- Marge (margin)2.- Borde (border)3.- Marge interior (padding)4.- Contingut (width, height)2Muokkaa otsikon tekstimuotoa napsauttamallaMuokkaa jsennyksen tekstimuotoa napsauttamallaToinen jsennystasoKolmas jsennystasoNeljs jsennystasoViides jsennystasoKuudes jsennystasoSeitsems jsennystasoKahdeksas jsennystasoYhdekss jsennystaso