HTML
Contents
Introducció
Un document (pàgina) de Web pot incloure diferents tipus d'informació: text,imatges i enllaços hipertextuals.
Aquests enllaços poden activar la recuperació d'una altra pàgina o la recepció d'un fitxer: una imatge, un programa, una animació...
Per a la creació d'aquestes pàgines s'utilitza el llenguatge HTML, que permet definir els atributs del text, la posició de les imatges i els enllaços mitjançant unes marques que s'insereixen en el document.
Estructura d'un document HTML
Les marques que s'utilitzen en el llenguatge HTML són textos tancats entre els signes < >.
Generalment, funcionen per parelles, l'una en començar i l'altra al final. Normalment, la marca de tancar és la mateixa que la d'obrir amb el caràcter / al davant.
Per identificar un document cal inserir la marca <HTML> al començament i </HTML> al final.
Estructura d'un document HTML
Tot document HTML consta de dues parts:
La capçalera conté informació sobre el propi document. Entre les marques <HEAD> i </HEAD>.
Dins de la capçalera es posa el títol del document, entre les marques <TITLE> i </TITLE>. És el text que es pot llegir a la barra de títol del navegador. El cos conté el text i les imatges visibles del document. Entre les marques <BODY> i </BODY>.
Exemple
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>Etiquetes d'un document HTML
Encapçalaments
Títols HTML es defineixen amb les etiquetes <h1> a <h6>.Etiquetes d'un document HTML
Paràgrafs.
Paràgrafs HTML es defineixen amb l'etiqueta <p>.
<p>Benvinguts a M4</p>Els navegadors afegeixen automàticament una línia en blanc abans i després d'un paràgraf. El navegador traurà espais addicionals i línies addicionals quan es mostra la pàgina. Qualsevol nombre d'espais, i qualsevol nombre de línies noves, compten com un sol espai.Etiquetes d'un document HTML
Enllaços
Enllaços HTML es defineixen amb l'etiqueta <a>.
<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a> – L'atribut href especifica la destinació de l'enllaç. – L'atribut target especifica on obrir el document vinculat. – Aquest exemple s'obrirà el document vinculat a una nova finestra o en una nova pestanya.
- _blank Obre en una nova finestra o pestanya
- _self
- _parent
- _top
- (default) en la mateixa finestra o frame
En el frame pare. Obre al cos complert de la finestra http://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_target_top
Imatges
Les imatges HTML es defineixen amb l'etiqueta <img>. <img src="url" alt="some_text">
- src és el fitxer d'origen, alt és el text alternatiu.
- L'etiqueta <img> està buida, conté atributs només, i no té una etiqueta de tancament.
- L'atribut alt especifica un text alternatiu que s'utilitzarà, quan un element HTML no es pot visualitzar.
- El valor de l'atribut pot ser llegida pels lectors de pantalla "".
D'aquesta manera, algú "escoltar" a la pàgina web, és a dir, una persona cega, pot "sentir" l'element.
- Si un navegador no pot trobar una imatge, es mostrarà el text alternatiu:
- Es requereix que l'atribut alt. Una pàgina web que no valida correctament sense.Etiquetes d'un document HTML
Imatges.
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">- La mida width and height donen la grandaria.
- La mida de la imatge s'especifica en píxels: width = "104" significa 104 píxels de pantalla ampla.
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;border:0;">- Podeu utilitzar l'atribut style per especificar l'amplada i alçada d'una imatge.
- Els valors s'especifiquen en píxels (fes servir px després del valor).
- Afegir "border: 0;" per evitar que IE9 (i anteriors) mostri una vora al voltant de la imatge.Etiquetes d'un document HTML
Les imatges poden estar al nostre directori de feina, o en un directori diferent.
Si l'imatge es troba l'imatge en un subdirectori del nostre directori:
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">Si es troben en altre ordinador o servidor:
<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">Podeu inserir imatges animades, amb la mateixa estructura.
Taules
Les taules es defineixen amb l'etiqueta <table>. Les taules es divideixen en files de la taula amb l'etiqueta <tr>. Les files es divideixen en columnes que contenen les dades de la taula amb l'etiqueta <td>. Una fila de la taula també pot dividir-se en capçaleres de la taula amb el <th> etiqueta. Els <td> poden contenir tot tipus d'elements HTML com a text,imatges, llistes, altres taules, etc. Si no especifica una vora de la taula, es mostrarà sense vores. Una vora es pot afegir mitjançant l'atribut border, però és millor utilitzar un full d'estil.Etiquetes d'un document HTML
<table border="1">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>Per defecte, tots els navegadors visualitzen la fila <th> en negreta i centrada. Per afegir un títol a una taula, utilitzeu l'etiqueta <caption>.
Colapsar cel·les
Per a colapsar més d'una columna, utilitzeu l'atribut colspan.
<table>
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>Per a colapsar més d'una filera, utilitzeu l'atribut rowspan.
<table>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</tr>
</table>Llistes
Llistes no ordenades
Una llista desordenada comença amb l'etiqueta <ul>. Cada element de la llista comença amb l'etiqueta <li>. Els elements de la llista es marcaran amb bales (petits cercles negres).
Llistes ordenades
Una llista ordenada comença amb l'etiqueta <ol>. Cada element de la llista comença amb l'etiqueta <li>. Els elements de la llista seran marcats amb els números.
Llistes amb descripció
Una llista de descripció és una llista de termes, amb una descripció de cada terme. L'etiqueta <dl> defineix la llista de vista general, l'etiqueta <dt> defineix el terme (nom), i <dd> etiqueta descriu cada terme
Llistes no ordenades.
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>Llistes ordenades.
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>Llistes amb descripció.
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl >