Categorieën: Alle - css - web - html

door Eric Sueiro 12 jaren geleden

304

BLOC 2: Creació de llocs web

El llenguatge CSS, conegut com Fulls d'Estil en Cascada, és una eina essencial per definir l'aparença d'elements XHTML, permetent un control més gran sobre l'aspecte del document i facilitant canvis globals.

BLOC 2: Creació de llocs web

BLOC 2: Creació de llocs web

Editors offline de tipus WYSIWYG (Dreamweaver)

Vista interna del codi HTML desde l'editor offline Dreamweaver:
Els editors de tipus WYSIWYG (What You See Is What You Get = El que veus és el que obtens) funcionen exactament com el codi HTML però a més a més permeten una gran funcionalitat: la possibilitat de treballar tant amb codi HTML com amb la funció de processador de textos. Així doncs, encara que treballem com si del Word Office es tractés, obtindrem el codi font per a la nostra pàgina web, el que facilita l'ús d'aquest sense el necessari conexiement del mateix. A classe hem treballat amb l'editor offline Dreamweaver i aquest ha estat el resultat final del nostre treball:

CMS

CMS per a blogs: Blogger i Wordpress. Ambdòs són bons CMS per a la creació de blogs. A favor de blogger trobem dissenys molt interactius i moderns que no obstant no permeten la vinculació a xarxes socials (Wordpress si que ho permet), i la consulta d'estadístiques del blog per veure el nombre de visitants, de quina part del món són... Per altra banda, Wordpress, permet veure el blog desde múltiples dispositius mòbils (posa a l'abast dels usuaris apps per a cada tipus de dispositiu) i també quan s'insereixen imatges a una entrada permet fer lleugers retocs o donar efectes a aquesta.
CMS per a webs: Weebly i Webnode. Ambdòs són fàcils d'utilitzar i mentre que Webnode està més especialitzat cap a l'àmbit empresarial, Weebly permet la creació de pàgines de tipus més personal (semblant a un blog) i en alguns aspectes permet, a diferència de Webnode, la optimització per els SEO, la vinculació de la nostra pàgina web a les xarxes socials o la configuració de la pàgina web per veure-la desdel mòbil.
Els gestors de continguts són sistemes per mantenir i actualitzar webs de manera fàcil. A classe hem vist i treballat amb 4 diferents: 2 per a la creació de pàgines web i 2 per la creació de blogs.

Codi font: HTML i CSS

CSS: El llenguatge CSS (Fulls d'Estil en Cascada) s'utilitza com a conjunt de regles que defineixen l'aparença dels elements XHTML. Permeten obtenir major control sobre l'aspecte del document, evitar haver d'indicar l'estil en cada etiqueta al codi així com també permeten fer canvis globals en tot el document/lloc web. Hem vist tres tipus d'estils:
Estil extern: És igual que l'estil intern excepte en que el document css que conté l'estil de la pàgina està en un document apart (extern) al que conté la informació de la web. Per tant, es fa referència desdel document principal al de CSS per tal de determinar l'estil de la web. Exemple:
Estil intern: S'especifica a la secció head del document HTML. Permet establir com volem que sigui cada parametre desdel principi per després només posar la referència durant el document. En cas de voler fer canvis, només amb fer-ho allà on ho hem possat de la secció head, els canvis s'aplicaran a tot el document. Exemple d'etiqueta:
Estil en línia: S'especifica línia per línia. Exemple d'etiqueta:

Mida de la font 3

Al llenguatge CSS: - La propietat i el valor van entre claus {} - Entre la propietat i el valor van : - Al final del valor va un ;
El llenguatge marcat d'hipertext és un llenguatge que s'utilitza com a format per a la construcció de textos i documents per a la web. A continuació explicarem totes les etiquetes d'HTML que s'han vist a classe:
Formulari

Enviar

Escollir una opció

Introduir dades

Enviar el formulari a l’email

Taules

Columna normal

Columna tipus títol (CMS/URL)

Fila

Gruix de la taula

Llistats

  • Per obrir cada línea del llistat
  • (Si es volen fer sub-apartats, utilitzar dins de
  • llistats numerats o no numerats, com a l’exemple)

  • (En cas de voler que sigui numerat utilitzar
      )

      Metaelements

      Indica als buscadors si s'ha d'indexar la pàgina

      Títol de la pàgina

      Referent html que ha de seguir la pàgina.

      Etiquetes d'enllaç o salt

      target=“_blank” La nova pàgina s’obre en una finestra nova target=“_self” La nova pàgina s’obre a la mateix finestra

      Enllaç a una altra pàgina situada a la mateix carpeta que la inicial

      Etiquetes sumari

      Enllaç a una URL

      Etiquetes d'inclussió d'objectes

      Posar un video desde Youtube.

      Incluir imatge desde un PC amb una dimensió de 600x400 i que quan posem el ratolí a sobre aparegui la frase del title.

      “Benvinguda”Incluir imatge via URL que en cas de que no funcioni la imatge aparegui la frase Benvinguda.

      Etiquetes de format de text

      Tot junt

      Tipus de font

      Color rosa

      Mida de la lletra

      Negreta

      Etiquetes format de document

      Cursiva

      Alineació a la dreta

      Títol nº2

      Títol nº1


      Línea 4 punts


      Línea horitzontal

      Salt de pàragraf


      Salt de línea

      Etiquetes per a l'estructura bàsica HTML

      Cos de la pàgina, el que el visitant veu d’aquesta

      Conjunt de dades que no apareixen visiblement al format extern de la pàgina (excepte el títol)

      Per obrir el arxiu html