HyperText Markup Language HTML HyperText Markup Language
Protocol HTTP
Què és HTML ? HTML és el llenguatge bàsic de les pàgines web Utilitzant un conjunt d’etiquetes (tags), permet definir el format de la pàgina web Aleshores, no es tracta d’un llenguatge de programació, ja que no permet estructures condicionals, bucles, variables, ..., sinó només un formatejador de documents; és el que se’n diu un llenguatge de descripció de documents Un bon manual en castellà, WebMaestro: http://www.wmaestro.com/webmaestro
Estructura de la pàgina <HTML> <HEAD> <TITLE>Títol</TITLE> </HEAD> <BODY> Text de la pàgina </BODY> </HTML>
Colors i encapçalaments Colors de la pàgina <body bgcolor="#CCCCCC" text="#003366" link="#FF0033" vlink="#FFCC99" alink="#FFFF33"> Encapçalaments <h1>Tema 1</h1> <h2>Capítol 1.1</h2> <h3>Apartat 1.1.1.</h3> Això és el text de l’apartat 1.1.1
Paràgrafs i bots de línia <p> ... </p> indica un paràgraf (separat per línies en blanc). Es pot utilitzar només <p> per deixar una línia en blanc. <br> indica un bot a la següent línia <hr> fa una línia horitzontal
Estil dels caràcters i justificats <B>Negreta</B> <I>Itàlica (cursiva)</I> <U>Subratllat</U> (no s’acostuma a utilitzar ja que es confon amb un enllaç) Justificats: <center>Centrat</center> <left>Esquerra</left> <right>Dreta</right> També <p align=“center|left|right|justify”>
Imatges Es poden inserir imatges en format: amb l’etiqueta: JPEG GIF amb l’etiqueta: <img src=“imatge.jpg”> que pot portar alguns d’aquests atributs: <img src=“imatge.jpg” name=“imatge” alt=“imatge” width=“200” height=“200” border=“0” hspace=“0” vspace=“0” align=“TOP|MIDDLE|BOTTOM|LEFT|RIGHT”>
Enllaços Podem definir enllaços (links): <a href=“http://www.upf.es”>UPF</a> Així, en clicar sobre UPF (que apareixerà subratllat) anirem a la pàgina de la Universitat. De la mateixa manera podem definir un enllaç sobre una imatge: <a href=“http://www.upf.es”><img src=“imatge.jpg”></a>
Taules <table> ... </table> indiquen el començament i final de la taula. Pot tenir alguns atributs, per exemple <table border="1" width="100%"> Una taula conté files: <tr> ... </tr> indiquen començament i final de fila. I una fila conté columnes: <td> ... </td> indiquen començament i final de columna (dins d’una fila, és a dir una casella). Una casella conté text, imatges, ...
Comparació amb editor de texts Fins ara només hem donat format a un text, de la mateixa manera que fem amb un editor de text com el MS Word. De fet, el propi Word permet exportar un document a HTML (tot i que l’HTML que genera és bastant “brut”). Hi ha molts altres editors (gratuïts molts d’ells) per a HTML
Marcs (frames) Podem dividir la pantalla en diferents zones (cada una a una posició concreta). Cada una d’aquestes zones és un frame o marc. Freqüentment es fa servir per a menús, i així evitem recarregar-lo cada cop Per dividir la pàgina en frames usem el tag: <frameset cols=“25%,*> ... </frameset> o <frameset rows=“120,*> ... </frameset> A un enllaç podem dir-li que carregui la pàgina a un determinat marc, amb l’atribut target (que també pot prendre els valors “_blank”, “_top” i “_parent”)
Formularis Serveixen per a que l’usuari pugui introduir certa informació Pot tenir camps de text, de selecció, radio butons, checkboxes, ... Pot contenir botons que al ser clickats cridin un script de JavaScript (ja ho veurem al tema següent) Típicament té un botó de submit que quan es clicka s’executa l’acció que s’ha especificat (normalment crida a una CGI)
Integració d’elements multimedia A una pàgina web podem incloure altres elements multimèdia com a vídeos, sons, imatges panoràmiques 360º, móns virtuals, ... Quan el navegador detecta un format que no ho soporta directament (per exemple un vídeo) llença un plugin (extensió o connector) que s’encarrega de la seva visualització, sempre que abans haguem instal·lat el corresponent plugin
HTML Dinàmic Problemes de compatibilitat entre Microsoft i Netscape Novetats: Capes (layers), a l’estil de Photoshop Fulls d’estic (CSS), per independitzar les dades de la presentació