BLOC 2: Creació de llocs web
Codi font: HTML i CSS
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:
Etiquetes per a l'estructura bàsica HTML
<html>Per obrir el arxiu html</html>
<head>Conjunt de dades que no apareixen visiblement al format extern de la pàgina (excepte el títol)</head>
<body>Cos de la pàgina, el que el visitant veu d’aquesta</body>
Etiquetes format de document
<br>Salt de línea</br>
<p>Salt de pàragraf</p>
<hr>Línea horitzontal</hr>
<hr size=“4”>Línea 4 punts</hr>
<h1>Títol nº1</h1>
<h2>Títol nº2</h2>
<p align=“right”>Alineació a la dreta</p>
<em>Cursiva</em>
Etiquetes de format de text
<strong>Negreta</strong>
<font size=“7”>Mida de la lletra</font>
<font color=“pink”>Color rosa</font>
<font face=“Verdana”>Tipus de font</font>
<font size= "7" color= "pink" face= "Verdana">Tot junt</font>
Etiquetes d'inclussió d'objectes
<img src=“http://.../” alt=“Benvinguda”>Incluir imatge via URL que en cas de que no funcioni la imatge aparegui la frase Benvinguda.
<img src=“plespanya.jpg width=“600” height=“400” title=“Plaça Espanya al 2006/>Incluir imatge desde un PC amb una dimensió de 600x400 i que quan posem el ratolí a sobre aparegui la frase del title.
<iframe ...></iframe>Posar un video desde Youtube.
Etiquetes d'enllaç o salt
<a href=“www.url.com”>Enllaç a una URL</a>
<a href=“#x”>Etiquetes sumari</a>
<a href=“aspectes.html”>Enllaç a una altra pàgina situada a la mateix carpeta que la inicial</a>
target=“_blank” La nova pàgina s’obre en una finestra nova
target=“_self” La nova pàgina s’obre a la mateix finestra
Metaelements
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> Referent html que ha de seguir la pàgina.
<title>Títol de la pàgina</title>
<meta name=“title” content=“Títol de la pàgina”>
<meta name=“robots" content="noindex"> Indica als buscadors si s'ha d'indexar la pàgina
<meta name=“DC.Title” content=“Títol de la pàgina”>
<meta name=“description” content=“Descripció de la pàgina”>
<meta name=“keywords” content=“tags de búsqueda”>
<meta name=“author” content=“Nom de l’autor de la pàgina.”>
Llistats
<ul>Llistat no numerat</ul> (En cas de voler que sigui numerat utilitzar <ol></ol>)
<li> Per obrir cada línea del llistat </li> (Si es volen fer sub-apartats, utilitzar dins de <li> llistats numerats o no numerats, com a l’exemple)
Taules
<table border=3>Gruix de la taula</table>
<tr> Fila </tr>
<th> Columna tipus títol (CMS/URL) </th>
<td> Columna normal </td>
Formulari
<Form action= mailto:eric.sueiro01@estudiant.upf.edu ...> Enviar el formulari a l’email
<INPUT type=“text” name=“x”> Introduir dades
<INPUT type=“radio” ...> Escollir una opció
<INPUT type=“submit”> Enviar
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:
Al llenguatge CSS:
- La propietat i el valor van entre claus {}
- Entre la propietat i el valor van :
- Al final del valor va un ;
Estil en línia: S'especifica línia per línia. Exemple d'etiqueta: <h3 style=“font size:3;”>Mida de la font 3</h3>
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 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:
<link rel="stylesheet" type="text/css" href="estil.css"/>
CMS
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.
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.
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.
Editors offline de tipus WYSIWYG (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:
Vista interna del codi HTML desde l'editor offline Dreamweaver: