Apunts HTML - HackMD

# Apunts HTML ## Què és HTML? - HTML són les sigles de "HyperText Markup Language", la qual cosa es pot traduir com a "Llenguatge d'etiquetatge d'hipertext". - Això vol dir que permet "marcar" el text mitjançant unes etiquetes especials que li afegeixen semàntica. ## Per a què serveix? El HTML ens serveix per determinar el contingut de la pàgina web: - què apareix: text, imatges, video i enllaços. - components: formularis, taules. ## Etiquetes - Una etiqueta té la forma <nom_etiqueta> - El nom de l’etiqueta, es posa sempre en minúscules - Les etiquetes, acostumen a ficar-se en parelles: obertura i tancament. - Obertura: <nom_etiqueta> - Tancament: </nom_etiqueta> - Hi ha excepcions a la regla anterior. Són de la forma: <nom_etiqueta/> per exemple <img/> o </br> ## Atributs - Les etiquetes d’d'obertura poden tenir atributs que serveixen per afegir informació addicional - <nom_etiqueta nom_atribut=”valor”> - Els atributs s’escriuen en minúscules - Cada atribut està format per un parell nom-valor - El valor va escrit entre dobles cometes “valor” o simples ‘valor’. - Cal consultar la documentació per conèixer els atributs que es poden fer servir a cada etiqueta ### Elements o nodes Un element o node HTML està format per: - L’etiqueta d’obertura - Contingut o text situat entre les etiquetes (també poden haver-hi altres etiquetes niades) - L’etiqueta de tancament ```htmlembedded= <p>M’agrada l’estiu</p> <p>M’agrada <b>molt</b> l’estiu</p> ``` #### Resultat: <p>M’agrada l’estiu</p> <p>M’agrada <b>molt</b> l’estiu</p> - Dins del contingut, el salt de línia o posar més d’un espai entre paraules es considera com un únic espai. ## Comentaris - Serveixen per fer aclariments pel desenvolupador o fer proves de codi. - No es veuen quan mirem la pàgina al navegador. ```htmlembedded=  ``` - Però sí, si mirem el codi font. ## Estructura ```htmlembedded=  <!DOCTYPE html> <html language="ca"> <head> <title>la meva app</title> <meta charset="UTF-8" /> </head> <body> <header></header> <nav></nav> <main></main> <footer></footer> </body> </html> ``` ## Cos del document ```htmlembedded= <body> ``` - Aquesta etiqueta marca el cos del document - Tot el que es posa entre <body> i </body> és el que es visualitza al navegador - Sempre s’ha de posar - Només pot haver-hi una etiqueta body i és filla d’html ## Etiquetes bàsiques d'estructura i cos ### Títols - Hi ha fins a 6 etiquetes en HTML per a definir títols o seccions. - Totes elles porten per defecte el text en negreta, i són: ```htmlembedded= <h1>, <h2>, <h3>, <h4>, <h5> i <h6>. ``` ```htmlembedded= <h1>Titulo de nivel 1: Etiqueta h1</h1> <h2>Titulo de nivel 2: Etiqueta h2</h2> <h3>Titulo de nivel 3: Etiqueta h3</h3> <h4>Titulo de nivel 4: Etiqueta h4</h4> <h5>Titulo de nivel 5: Etiqueta h5</h5> <h6>Titulo de nivel 6: Etiqueta h6</h6> ``` - Prova a posar-ho en el teu navegador ### Paràgraf - Per a crear un paràgraf es tanca el seu text entre les etiquetes ```htmlembedded= <p> ..... </p> ``` - Els paràgrafs creats amb HTML són elements de bloc, per la qual cosa sempre ocupen tota l'amplària de l'element que els conté (per defecte la finestra del navegador). ```htmlembedded= <p>Aquest és un paràgraf que està delimitat per l'etiqueta p de paràgraf, és un element de bloc igual que els anteriors, per això en acabar el text salta a la línia següent.</p> <p>Aquest és un altre paràgraf, també creat amb l'etiqueta p, però més curt.</p> ``` <p>Aquest és un paràgraf que està delimitat per l'etiqueta p de paràgraf, és un element de bloc igual que els anteriors, per això en acabar el text salta a la línia següent.</p> <p>Aquest és un altre paràgraf, també creat amb l'etiqueta p, però més curt.</p> ### Enllaç ```htmlembedded= <a> ``` - El més important dels documents HTML són els enllaços. - Per a poder indicar el destí d'un enllaç utilitzem l'atribut href. En valor de l'atribut href pot ser qualsevol URI que representi un recurs. És a dir, una pàgina, una part d'una pàgina, un URL genèric, un arxiu,… D'aquesta manera l'enllaç en HTML el crearem amb la sintaxi: ```htmlembedded= <a href="URI">Contenido del enlace</a> ``` - Exemples de diferents tipus d'enllaços: ```htmlembedded= <a href="documento.html">Enllaç a un document</a> <a href="documento.html#resumen">Enllaç a una part d'un document</a> <a href="http://www.manualweb.net">Enllaç a una web</a> <a href="http://www.manualweb.net/tutorial-html/">Enllaç a un directori</a> <a href="miimagen.png">Enllaç a una imatge</a> <a href="mimusica.mp3">Enllaç a un arxiu de so</a> ``` <a href="documento.html">Enllaç a un document</a> <a href="documento.html#resumen">Enllaç a una part d'un document</a> <a href="http://www.manualweb.net">Enllaç a una web</a> <a href="http://www.manualweb.net/tutorial-html/">Enllaç a un directori</a> <a href="miimagen.png">Enllaç a una imatge</a> <a href="mimusica.mp3">Enllaç a un arxiu de so</a> #### Marcar una part del document per a accedir després a ella mitjançant un enllaç - Per a poder enllaçar a una part concreta d'un document el que hem de fer és marcar aquesta part del document. Per a això comptem amb l'atribut name. Si creem un enllaç amb l'atribut name, aquest enllaç es definirà com a posició i no com a enllaç de navegació. - La sintaxi serà: ```htmlembedded= <a name="cap1">Capítol 1</a> ``` - També podem usar l'identificador aneu i posar-li un nom, es pot realitzar per exemple dins d'una etiqueta div ```htmlembedded= <div id="cap1">Capítol 1</a> ``` #### Enllaçant a una part del document - Una vegada que hem marcat enllaç en HTML en un document és hora d'accedir a aquesta part del document. Per a això només hem de posar el nom que li hàgim donat a l'atribut name precedit d'un coixinet. - La sintaxi serà: ```htmlembedded= <a href="#cap1">Enllaç al capítol 1</a> ``` - La part del document al qual accedim no té per què estar en el mateix document de l'enllaç, pot estar en un altre document o servidor. D'aquesta manera podem tenir enllaços a parts d'altres documents de la següent forma: ```htmlembedded= <a href="documento2.html#cap2">Enllaç al capítol 2 del document 2</a> <a href="http://servidor.com/#cap2">Enllaç al capítol 2 del servidor</a> ``` - Utilitzar el coixinet com a valor del href ens pot servir per a accedir a la part superior del document. És per això que el coixinet és fet servir com a enllaç en les parts inferiors dels documents HTML per a pujar a la part de dalt. ```htmlembedded= <a href="#">Anar A dalt</a> ``` #### Enllaços en amb imatges - El contingut d'un enllaç també pot ser una imatge ```htmlembedded= <a href="https://www.w3schools.com/html/"><img src="https://i.ibb.co/kyfjv2P/logo.jpg" alt="Foto de Maite"/></a> ``` <a href="https://www.w3schools.com/html/"><img src="https://i.ibb.co/kyfjv2P/logo.jpg" alt="Foto de Maite" width="100" height="100"/></a> - D'aquesta manera tota la imatge serà un enllaç que ens portarà, en el cas de punxar sobre ella, al destí indicat en l'atribut href. - Aquesta tècnica se sol utilitzar per a presentar una imatge de baixa resolució i grandària, que en prémer-la ens carregui una imatge amb major resolució i grandària. Un codi que podria ser de la següent forma: ```htmlembedded= <a href="foto.png"><img src="thumbnail_foto.png" alt="Mi foto"/></a> ``` ### Imatge - Per a inserir una imatge en HTML usem l'etiqueta img, la sintaxi bàsica és: ```htmlembedded= <img src="nombreimagen.jpg" /> ``` - Aquesta etiqueta no té element de tancament i acaba amb la barra invertida - L'atribut principal de l'element img és src ens indica la ruta de la imatge que volem carregar. Així, si la imatge es troba en la mateixa ruta que la nostra pàgina web posarem: ```htmlembedded= <img src="foto.jpg"/> ``` - En el cas que la imatge estigui en un altre directori, per exemple en “/multimedia/imagenes” posarem el següent: ```htmlembedded= <img src="/multimedia/imagenes/foto.jpg"/> ``` - Fins i tot la imatge pot residir en un altre servidor. En aquest cas l'URL que contingui la imatge haurà d'indicar el protocol i el servidor que alberga la imatge (com en el nostre cas). Per exemple podrem tenir el següent codi: ```htmlembedded= <img src="https://i.ibb.co/kyfjv2P/logo.jpg"/> ``` <img src="https://i.ibb.co/kyfjv2P/logo.jpg"/> #### Dimensions de la imatge: width i height - Podem canviar la grandària d'una imatge amb els atributs width per a l'ample de la imatge i height per a l'alt de la imatge. - D'aquesta manera, si volem que la nostra imatge es vegi en 100x100 píxels, podem inserir el següent codi: ```htmlembedded= <img src="https://i.ibb.co/kyfjv2P/logo.jpg" width="100" height="100"/> ``` <img src="https://i.ibb.co/kyfjv2P/logo.jpg" width="100" height="100"/> ### Secció de tex ### Èmfasi ```htmlembedded= <strong> <em> ``` - L'element strong és l'apropiat per a marcar en negreta les parts més importants d'un text, l'element em s'usa per a posar en cursiva paraules o parts d'un text. Per exemple: - ```htmlembedded= <p> <em>El dinero</em> es importante pero <strong>la salud</strong> lo es más. </p> ``` <p> <em>El dinero</em> es importante pero <strong>la salud</strong> lo es más. </p> ### Salt de línia ```htmlembedded= <br> ``` - L'element br produeix un salt de línia en el text (retorn de carro). És útil per a escriure un poema o una adreça, on la divisió de les línies és significant. ```htmlembedded= Hola<br> estic<br> saltant<br> de línia<br> ``` Hola<br> estic<br> saltant<br> de línia<br> ## L'element de capçalera header ```htmlembedded= <header> ``` - L'element header conté a l'encapçalat d'una secció o document. - Què podem trobar dins d'un header? - Els vincles de navegació - Els formularis de cerca - Els logos - Les taules de continguts - Les introduccions, etc. - En molts casos, els continguts de l'encapçalat d'un document són consistents al llarg de tot el lloc. Un exemple pot ser aquest: ```htmlembedded= <header> <h1>En la meva pàgina web posaré aquest Logo</h1> <img src="https://i.ibb.co/kyfjv2P/logo.jpg" width="100" height="100" /> </header> ``` Resultat: <header> <h1>En la meva pàgina web posaré aquest Logo</h1> <img src="https://i.ibb.co/kyfjv2P/logo.jpg" width="100" height="100" /> </header> ## Peu de pàgina footer ```htmlembedded= <footer> ``` - L'element footer representa al peu d'una secció o document. - Què podem trobar dins d'un footer? - Signatures, - Informació sobre l'autor - Informació de llicències - Documents relacionats, etc. - En molts casos, els continguts del peu d'un document són consistents al llarg de tot el lloc. Un exemple pot ser aquest: ```htmlembedded= <footer> <p>Copyright 2021</p> <p><a href=”#”>Llei de Cookie</a></p> <p>Aquesta és la nostra adreça de contacte</p> <p>Segueix-nos en <a href=”#”>Facebook</a></p> </footer> ``` Resultat: <div> <p>Copyright 2021</p> <p><a href=”#”>Llei de Cookie</a></p> <p>Aquesta és la nostra adreça de contacte</p> <p>Segueix-nos en <a href=”#”>Facebook</a></p> </div> ## Agrupador main ```htmlembedded= <main> ``` - L'element main és un contenidor o agrupador per als temes centrals d'un document o secció. - Aquest contingut central pot interpretar-se com tot el que queda després de llevar anuncis, encapçalats (header), peus (footer), seccions de navegació (nav), vincles relacionats i altres elements secundaris. - Exemple: ```htmlembedded= <body> <header> <p>Benvingut a Articles Bojos!</p> <nav> <a href="/">Inici</a> <a href="/articulos.html">Articles</a> <a href="/contacte.php">Contacta'ns</a> </nav> </header> <main> <h1>Programari lliure</h1> <p>El terme programari lliure refereix el conjunt de programari que per elecció manifesta del seu autor, pot ser copiat, estudiat, modificat, utilitzat lliurement amb qualsevol fi i redistribuït amb o sense canvis o millores.</p> <p>...</p> </main> <footer> <p>© Tots els drets reservats</p> </footer> </body> ``` ## Element div ```htmlembedded= div> ``` - L'element **div** és un contenidor genèric sense un significat semàntic en particular. - S'utilitza comunament en el desenvolupament de documents amb propòsits estilístics, en conjunt amb els atributs style i class. - També pot resultar útil per a proveir atributs comuns als elements continguts per el, com per exemple lang, title o **id** aquest últim **és molt útil per a accedir a parts d'una pàgina, una mica més endavant veurem un exemple**. ```htmlembedded= <div style="color: blue;"> <h2> Ejemplo de div</h2> <p> Esto es un párrafo dentro de un div, </p> </div> ``` Resultat: <div style="color: blue;"> <h2> Ejemplo de div</h2> <p> Esto es un párrafo dentro de un div, </p> </div> ### Ús de l'atribut id per a fer una referència a aquesta etiqueta - Si volem accedir a aquesta part de la pàgina web, el que podem fer és donar-li un valor a l'identificador aneu, d'aquesta manera podem accedir des d'una referència href: ```htmlembedded= <div id=nom_identificador> ``` - Per a poder accedir a aquesta part de la pàgina hem de crear un enllaç i posar aquesta ruta, de la següent manera ```htmlembedded= <a href="#nom_identificador"> ``` ## L'element de secció de navegació ```htmlembedded= <nav> ``` L'element HTML representa una secció d'una pàgina el propòsit de la qual és proporcionar enllaços de navegació, sigui dins del document actual o a altres documents. Exemples comuns de seccions de navegació són menús, taules de contingut i índexs. En aquest exemple, un bloc nav és usat per a contenir una llista no ordenada () d'enllaços. Amb el CSS apropiat, això pot ser presentat com una barra lateral, una barra de navegació o un menú desplegable. ```htmlembedded= <nav class="menu"> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Sobre nosotros</a></li> <li><a href="#">Contacto</a></li> </ul> </nav> ``` <nav class="menu"> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Sobre nosotros</a></li> <li><a href="#">Contacto</a></li> </ul> </nav> ## Llistes ### Llistes desordenades L'element ul crea una llista no ordenada. ```htmlembedded= <ul> <li>Això</li> <li>L'un altre</li> <li>Això de més enllà</li> </ul> ``` <ul> <li>Això</li> <li>L'un altre</li> <li>Això de més enllà</li> </ul> ### Llistes ordenades L'element ol permet definir llistes o vinyetes ordenades (“Ordered List”), bé amb numeració o alfabèticament. ```htmlembedded= <ol> <li>punto uno</li> <li>punto dos</li> <li>punto tres</li> </ol> ``` <ol> <li>punto uno</li> <li>punto dos</li> <li>punto tres</li> </ol> ## TAULES - Una taula és un mitjà d'organitzar dades en files i columnes. - L'etiqueta **table** és el contenidor principal: ```htmlembedded= <table> ``` - L'etiqueta **tr** representa a les files que contenen a les cel·les ```htmlembedded= <tr> ``` - L'etiqueta **tr** cepresenta a les cel·les ```htmlembedded= <td> ``` - Exemple: ```htmlembedded= <table class="default"> <tr> <td>Cel·la 1</td> <td>Cel·la 2</td> <td>Cel·la 3</td> </tr> <tr> <td>Cel·la 4</td> <td>Cel·la 5</td> <td>Cel·la 6</td> </tr> </table> ``` Resultat: <table class="default"> <tr> <td>Cel·la 1</td> <td>Cel·la 2</td> <td>Cel·la 3</td> </tr> <tr> <td>Cel·la 4</td> <td>Cel·la 5</td> <td>Cel·la 6</td> </tr> </table> - Per a posar-li un encapçalat usem l'etiqueta **th** ```htmlembedded= <table class="default"> <tr> <th>Avui</th> <th>Dissabte</th> <th>Diumenge</th> </tr> <tr> <td>Assolellat</td> <td>Majorment assolellat</td> <td>Parcialment ennuvolat</td> </tr> <tr> <td>19ºC</td> <td>17ºC</td> <td>12ºC</td> </tr> </table> ``` Resultat: <table class="default"> <tr> <th>Avui</th> <th>Dissabte</th> <th>Diumenge</th> </tr> <tr> <td>Assolellat</td> <td>Majorment assolellat</td> <td>Parcialment ennuvolat</td> </tr> <tr> <td>19ºC</td> <td>17ºC</td> <td>12ºC</td> </tr> </table> ## Formularis - Els formularis permeten als usuaris la introducció de dades ### Elements que componen un formulari ### **input** - Aquest element s'usa per a crear controls interactius per a acceptar dades de l'usuari ```htmlembedded= <input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10"> ``` - L'etiqueta input varia considerablement segons el valor del seu atribut **type**. - Tipus de dades type: - **Text**: s'expressa com **<input type=text>** i és per defecte l'entrada d'una sola línia. També pot tenir altres atributs: **<input maxlenght>** que limita els camps a introduir; **<input size>** per a indicar l'espai a disposar per a cada camp i finalment **<input value>** que indica el valor inicial de camp. ```htmlembedded= <p>Nombre: <input type="text" name="nombre" value="John"/></p> <p>Apellido: <input type="text" name="apellido"/></p> ``` ![](https://i.imgur.com/dA9zsum.png) - **Caixa de selecció**: s'expressa com **```htmlembedded=<input type=checkbox>```** i serveix per a representar opcions com «Si/No». ```htmlembedded= <p> Intereses:<br> <input type="checkbox" name="cb-autos" value="gusta"> Autos<br> <input type="checkbox" name="cb-deportes" value="gusta"> Deportes<br> <input type="checkbox" name="cb-videojuegos" value="gusta"> Videojuegos </p> ``` <p> Intereses:<br> <input type="checkbox" name="cb-autos" value="gusta"> Autos<br> <input type="checkbox" name="cb-deportes" value="gusta"> Deportes<br> <input type="checkbox" name="cb-videojuegos" value="gusta"> Videojuegos </p> ![Uploading file..._yrmpkl4aa]() - **Botó**: la seva etiqueta és **<input type=radio>**, representa un conjunt de diversos elements d'aquest tipus amb el mateix nom amb un camp de selecció múltiple. ```htmlembedded= <p> Empleo actual:<br> <input type="radio" name="empleoactual" value="tiempocompleto"> Tiempo completo<br> <input type="radio" name="empleoactual" value="mediodia"> Medio día<br> <input type="radio" name="empleoactual" value="sinempleo"> Sin empleo </p> ``` ![](https://i.imgur.com/MY7h9zM.png) - **Botó d'enviament**: s'expressa com **<input type=submit>** i representa l'opció del que ha de fer l'usuari. En aquest cas, enviar el formulari. ```htmlembedded= <p>Nombre: <input type=""text" name="nombrecompleto" value="Jhon Doe"></p> <p><label><input type="checkbox" name="myorde18"> Soy mayor de 18 años</label></p> <p> <input type="submit" value="Enviar"> <input type="reset" value="Restaurar"> <input type="button" value="Yo no hago nada"> </p> ``` ![](https://i.imgur.com/SH3pkpQ.png) - **Date**:L'element input, tenint el valor "date" en el seu atribut type, representa un camp per a l'entrada d'una data. ```htmlembedded= <p>Fecha esperada: <input type="date" name="fechaesperada"> <input type="submit" value="Enviar datos"></p> ``` - **Number**: L'element input, tenint el valor "number" en el seu atribut type, representa un camp per a l'entrada d'un número. ```htmlembedded= <p>Tu edad: <input type="number" name="edad"> <input type="submit" value="Enviar datos"></p> ``` - **file**: L'element input, tenint el valor "file" en el seu atribut type, representa un control per a seleccionar una llista d'un o més arxius per a ser pujats al servidor ```htmlembedded= <p> Sube un archivo: <input type="file" name="archivosubido"> <input type="submit" value="Enviar datos"> </p> ``` - **email**: L'element input, tenint el valor "email" en el seu atribut type, representa un camp per a una o més adreces de correu electrònic ```htmlembedded= <p>Dirección de correo electrónico: <input type="email" name="direccionemail" value="superusuario138@yahoo.com"></p> <p> ``` ### Select ```htmlembedded= <select> ``` - Representa un control que permet a l'usuari triar d'entre un nombre d'opcions.: - Multiple: indica que pot haver-hi més d'una opció. - Name: nom de camp. - Size: nombre d'ítems visibles. ```htmlembedded= <p> Deporte favorito: <select name=deporte> <option>Fútbol</option> <option>Críquet</option> <option>Básquetbol</option> <option>Hockey</option> <option>Tenis</option> </select> <input type="submit" value="Enviar"> </p> ``` ![](https://i.imgur.com/UWDPBvf.png) ### Text area ```htmlembedded= <textarea> ``` - Representa l'espai on pots col·locar tot el text que requereixis i pot tenir els següents atributs: - Cols: nombre de columnes visibles. - Name: nom del camp. - Rows. Nombre de línies visibles. ```htmlembedded= <p>Mensaje para el autor:</p> <p><textarea name="mensaje" placeholder="Comparte tu opinión con el autor!"></textarea></p> <p><input type="submit" value="Enviar mensaje"></p> ``` ![](https://i.imgur.com/YkZ7448.png) ### fieldset ```htmlembedded= <fieldset> ``` - L'element fieldset representa un conjunt de controls en un formulari (form), opcionalment agrupats sota un mateix nom. - El navegadors mostraran normalment un marc al voltant dels controls agrupats. ```htmlembedded= <fieldset> <legend>Información personal</legend> <p>Nombre completo: <input type="text" name="nombrecompleto"></p> <p>Dirección: <input type="text" name="direccion"></p> <p>Teléfono: <input type="tel" name="telefono"></p> </fieldset> ``` ![](https://i.imgur.com/bVfjBFx.png) ### **legend** ```htmlembedded= <legend> ``` - L'element legend representa un títol, nom o etiqueta per a un conjunt de controls, agrupats mitjançant l'element fieldset. - El seu contingut, sent el títol del fieldset al qual pertany, és habitualment representat damunt del marc que aquest proveeix. ```htmlembedded= <fieldset> <legend>Información de contacto</legend> <p>Nombre completo: <input type="text" name="nombrecompleto"></p> <p>Dirección: <input type="text" name="direccion"></p> <p>Teléfono: <input type="tel" name="telefono"></p> </fieldset> ``` ![](https://i.imgur.com/nHZ0m5W.png) ### **label** ```htmlembedded= <label> ``` - L'element label representa una etiqueta que pot ser associada a un control de formulari, i que se suposa proveeix una descripció curta per a aquest - Hi ha dues maneres d'enllaçar l'input amb el label - Aquí podràs veure com el teu navegador associa tots dos elements per interacció: ```htmlembedded= <p><label>Nombre de usuario: <input type="text" name="usuario"></label></p> <p><label>Contraseña: <input type="password" name="pass"></label></p> ``` - Ara, associarem etiquetes i controls amb el segon mètode: fent que els atributs aneu en el control i for en label, coincideixin. ```htmlembedded= <p><label for="pensamiento_id">¿Qué estás pensando?:</label></p> <p><input type="text" name="pensamiento" id="pensamiento_id"></p> ```