Apuntes Web - HackMD

# Apuntess HTML ## ¿Qué es HTML? - HTML son las siglas de "HyperText Markup Language", lo que se puede traducir como Lenguaje de etiquetado de hipertexto". - Esto significa que permite "marcar" el texto mediante unas etiquetas especiales que le añaden semántica e información. ## ¿Para qué sirve? HTML nos sirve para determinar el contenido de la página web: - Puede aparecer: texto, imágenes, video y enlaces. - Componentes: formularios, tablas. ## Etiquetas - Una etiqueta tiene la forma <nombre_etiqueta> - El nombre de la etiqueta, se pone siempre en minúsculas - Las etiquetas, suelen meterse en parejas: apertura y cierre. - Apertura: <nombre_etiqueta> - Cierre: </nombre_etiqueta> - Existen excepciones en la regla anterior. Son de la forma: <nombre_etiqueta/> por ejemplo ```<img/>``` o ```</br>``` ## Atributos - Las etiquetas de apertura pueden tener atributos que sirven para añadir información adicional - <nombre_etiqueta nombre_atributo=”valor”> - Los atributos se escriben en minúsculas - Cada atributo está formado por un par nombre-valor - El valor va escrito entre dobles comillas “valor” o simples 'valor'. - Es necesario consultar la documentación para conocer los atributos que se pueden utilizar en cada etiqueta - Un ejemplo puede ser el de aplicar color a un texto como ```htmlembedded= <font color="red"><p>Hola</p></font> ``` #### Resultado: <font color="red"><p>Hola</p></font> ### Elementos o nodos Un elemento o nodo HTML está formado por: - La etiqueta de apertura - Contenido o texto situado entre las etiquetas (también puede haber otras etiquetas anidadas) - La etiqueta de cierre ```htmlembedded= <p>Me gusta el verano</p> <p>Me gusta <b>mucho</b> el verano</p> ``` #### Resultado: <p>Me gusta el verano</p> <p>Me gusta <b>mucho</b> el verano</p><br> - Dentro del contenido, el salto de línea o poner más de un espacio entre palabras se considera un único espacio. ## Comentarios - Sirven para realizar aclaraciones por el desarrollador o hacer pruebas de código. - No se ven cuando miramos la página en el navegador. ```htmlembedded=  ``` - Pero sí, si miramos el código fuente, es decir, lo que nosotros estamos programando ## Estructura ```htmlembedded=  <!DOCTYPE html> <html language="es"> <head> <title>mi app</title> <meta charset="UTF-8" /> </head> <body> <header></header> <nav></nav> <main></main> <footer></footer> </body> </html> ``` ## Cuerpo del documento ```htmlembedded= <body> ``` - Esta etiqueta marca el cuerpo del documento - Todo lo que se pone entre <body> y </body> es lo que se visualiza en el navegador - Siempre debe ponerse - Sólo puede haber una etiqueta body y es hija de html ## Etiquetas básicas de estructura y cuerpo ### Títulos - Existen hasta 6 etiquetas en HTML para definir títulos o secciones. - Todas ellas llevan por defecto el texto en negrita, y son: ```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> ``` - Prueba a ponerlo en tu editor y verás el resultado: ```htmlembedded= <!DOCTYPE html> <html language="es"> <head> <title>mi app</title> <meta charset="UTF-8" /> </head> <body> <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> </body> </html> ``` ### Párrafo - Para crear un párrafo se pone texto entre las etiquetas: ```htmlembedded= <p> ..... </p> ``` - Los párrafos creados con HTML son elementos de bloque, por lo que siempre ocupan toda la anchura del elemento que los contiene (por defecto la ventana del navegador). ```htmlembedded= <p>Este es un párrafo, que está delimitado por la etiqueta p de párrafo, es un elemento de bloque al igual que los anteriores, por eso al terminar el texto salta a la línea siguiente.</p> <p>Este es otro párrafo, también creado con la etiqueta p, pero más corto.</p> ``` ### Resultado: <p>Éste es un párrafo que está delimitado por la etiqueta p de párrafo, es un elemento de bloque al igual que los anteriores, por eso al terminar el texto salta en la siguiente línea.</p> <p>Este es otro párrafo, también creado con la etiqueta p, pero más corto.</p><br> ### Enlaces ```htmlembedded= <a> ``` - Lo importante de los documentos HTML son los enlaces. - Para poder indicar el destino de un enlace utilizamos el atributo **href**. En valor del atributo **href** puede ser cualquier URL que represente un recurso. Es decir, una página, una parte de una página, una URL genérica, un archivo,… De esta forma el enlace en HTML lo crearemos con la sintaxis: ```htmlembedded= <a href="URI">Contenido del enlace</a> ``` - Ejemplos de distintos tipos de enlaces: ```htmlembedded= <a href="documento.html">Enlace a un documento</a> <a href="documento.html#resumen">Enlace a una parte de un documento</a> <a href="http://www.manualweb.net">Enlace a una web</a> <a href="http://www.manualweb.net/tutorial-html/">Enlace a un directorio</a> <a href="miimagen.png">Enlace a una imagen</a> <a href="mimusica.mp3">Enlace a un archivo de sonido</a> ``` <a href="documento.html">Enlace a un documento</a> <a href="documento.html#resumen">Enlace a una parte de un documento</a> <a href="http://www.manualweb.net">Enlace a una web</a> <a href="http://www.manualweb.net/tutorial-html/">Enlace a un directorio</a> <a href="miimagen.png">Enlace a una imagen</a> <a href="mimusica.mp3">Enlace a un archivo de sonido</a> #### Marcar una parte del documento para acceder después a ella mediante un enlace - Para poder enlazar a una parte concreta de un documento lo que debemos hacer es marcar esta parte del documento. Para ello contamos con el atributo name. Si creamos un vínculo con el atributo name, este vínculo se definirá como posición y no como vínculo de navegación. - La sintaxis será: ```htmlembedded= <a name="cap1">Capítulo 1</a> ``` - También podemos usar el identificador **id** y ponerle un nombre, se puede realizar por ejemplo dentro de una etiqueta div ```htmlembedded= <div id="cap1">Capítulo 1</a> ``` #### Enlazando a una parte del documento - Una vez que hemos marcado enlace en HTML en un documento es hora de acceder a esa parte del documento. Para ello sólo debemos poner el nombre que le hayamos dado al atributo name precedido de una almohadilla. - La sintaxis será: ```htmlembedded= <a href="#cap1">Enlace al capítulo 1</a> ``` - La parte del documento al que accedemos no tiene por qué estar en el mismo documento del enlace, puede estar en otro documento o servidor. De esta forma podemos tener enlaces a partes de otros documentos de la siguiente forma: ```htmlembedded= <a href="documento2.html#cap2">Enlace al capítulo 2 del documento 2</a> <a href="http://servidor.com/#cap2">Enlace al capítulo 2 del servidor</a> ``` - Utilizar la almohadilla como valor del **href** nos puede servir para acceder a la parte superior del documento. Es por eso que la almohadilla es utilizada como enlace en las partes inferiores de los documentos HTML para subir a la parte de arriba. ```htmlembedded= <a href="#">Ir Arriba</a> ``` #### Enlaces en con imágenes - El contenido de un enlace también puede ser una imagen ```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> - De esta forma toda la imagen será un enlace que nos llevará, en el caso de pinchar sobre ella, al destino indicado en el atributo **href**. - Esta técnica se suele utilizar para presentar una imagen de baja resolución y tamaño, que al pulsarla nos cargue una imagen con mayor resolución y tamaño. Un código que podría ser de la siguiente forma: ```htmlembedded= <a href="foto.png"><img src="thumbnail_foto.png" alt="Mi foto"/></a> ``` ### Imagen - Para insertar una imagen en HTML usamos la etiqueta **img**, la sintaxis básica es: ```htmlembedded= <img src="nombreimagen.jpg" /> ``` - Esta etiqueta no tiene elemento de cierre y termina con la barra invertida - El atributo principal del elemento img es src indica la ruta de la imagen que queremos cargar. Así, si la imagen se encuentra en la misma ruta que nuestra página web pondremos: ```htmlembedded= <img src="foto.jpg"/> ``` - En caso de que la imagen esté en otro directorio, por ejemplo en “/multimedia/imagenes” pondremos lo siguiente: ```htmlembedded= <img src="/multimedia/imagenes/foto.jpg"/> ``` - Incluso la imagen puede residir en otro servidor. En este caso, la URL que contenga la imagen deberá indicar el protocolo y el servidor que alberga la imagen (como en nuestro caso). Por ejemplo podremos tener el siguiente código: ```htmlembedded= <img src="https://i.ibb.co/kyfjv2P/logo.jpg"/> ``` <img src="https://i.ibb.co/kyfjv2P/logo.jpg"/> #### Dimensiones de la imagen: width y height - Podemos cambiar el tamaño de una imagen con los atributos width para el ancho de la imagen y height para el alto de la imagen. - De esta forma, si queremos que nuestra imagen se vea en 100x100 píxeles, podemos insertar el siguiente código: ```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ón de texto ### Énfasis ```htmlembedded= <strong> <em> ``` - El elemento **strong** es el apropiado para marcar en negrita las partes más importantes de un texto, el elemento **em** se usa para poner en cursiva palabras o partes de un texto. Por ejemplo: - ```htmlembedded= <p> <em>El dinero</em> es importante pero <strong>la salud</strong> lo es más. </p> ``` ### Resultado <p> <em>El dinero</em> es importante pero <strong>la salud</strong> lo es más. </p> ### Salto de línea ```htmlembedded= <br> ``` - El elemento **br** produce un salto de línea en el texto (retorno de carro). Es útil para escribir un poema o una dirección, en donde la división de las líneas es significativa. ```htmlembedded= Hola<br> estoy<br> saltando<br> de línea<br> ``` ### Resultado Hola<br> estoy<br> saltando<br> de línea<br> ## El elemento de cabecera header ```htmlembedded= <header> ``` - El elemento **header** contiene en el encabezado de una sección o documento. - ¿Qué podemos encontrar dentro de un header? - Los vínculos de navegación - Los formularios de búsqueda - Los logos - Las tablas de contenidos - Las introducciones, etc. - En muchos casos, los contenidos del encabezado de un documento son consistentes a lo largo de todo el sitio. Un ejemplo puede ser éste: ```htmlembedded= <header> <h1>En mi página web pondré este Logo</h1> <img src="https://i.ibb.co/kyfjv2P/logo.jpg" width="100" height="100" /> </header> ``` Resultado: <header> <h1>En mi página web pondré este Logo</h1> <img src="https://i.ibb.co/kyfjv2P/logo.jpg" width="100" height="100" /> </header> ## Pie de página footer ```htmlembedded= <footer> ``` - El elemento footer representa al pie de una sección o documento. - ¿Qué podemos encontrar dentro de un footer? - Firmas, - Información sobre el autor - Información de licencias - Documentos relacionados, etc. - En muchos casos, los contenidos del pie de un documento son consistentes a lo largo de todo el sitio. Un ejemplo puede ser éste: ```htmlembedded= <footer> <p>Copyright 2021</p> <p><a href=”#”>Ley de Cookies</a></p> <p>Ésta es nuestra dirección de contacto</p> <p>Síguenos en<a href=”#”>Facebook</a></p> </footer> ``` Resultat: <div> <p>Copyright 2021</p> <p><a href=”#”>Ley de Cookie</a></p> <p>Esta es nuestra dirección de contacto</p> <p>Síguenos en <a href=”#”>Facebook</a></p> </div> ## Agrupador main ```htmlembedded= <main> ``` - El elemento main es un contenedor o agrupador para los temas centrales de un documento o sección. - Este contenido central puede interpretarse como todo lo que queda después de quitar anuncios, encabezados (header), pies (footer), secciones de navegación (nav), vínculos relacionados y otros elementos secundarios. - Ejemplo: ```htmlembedded= <body> <header> <p>¡Bienvenido a Artículos Locos!</p> <nav> <a href="/">Inicio</a> <a href="/articulos.html">Artículos</a> <a href="/contacte.php">Contáctanos</a> </nav> </header> <main> <h1>Software libre</h1> <p>El término software libre refiere el conjunto de software que por elección manifiesta de su autor, puede ser copiado, estudiado, modificado, utilizado libremente con cualquier fin y redistribuido con o sin cambios o mejoras.</p> <p>...</p> </main> <footer> <p>© Todos los derechos reservados</p> </footer> </body> ``` ## Elemento div ```htmlembedded= <div> ``` - El elemento **div** es un contenedor genérico sin un significado semántico en particular. - Se utiliza comúnmente en el desarrollo de documentos con propósitos estilísticos, en conjunto con los atributos style y class. - También puede resultar útil para proveer atributos comunes a los elementos contenidos por el, como por ejemplo lang, title o **id** este último **es muy útil para acceder a partes de una página, un poco más adelante veremos un ejemplo**. ```htmlembedded= <div style="color: blue;"> <h2> Ejemplo de div</h2> <p> Esto es un párrafo dentro de un div </p> </div> ``` ### Resultado: <div style="color: blue;"> <h2> Ejemplo de div</h2> <p> Esto es un párrafo dentro de un div </p> </div> ### ÚUso del atributo id para hacer una referencia a esta etiqueta - Si queremos acceder a esta parte de la página web, lo que podemos hacer es darle un valor al identificador vaya, de esta forma podemos acceder desde una referencia href: ```htmlembedded= <div id=nombre_identificador> ``` - Para poder acceder a esta parte de la página debemos crear un enlace y poner esta ruta, de la siguiente manera ```htmlembedded= <a href="#nombre_identificador"> ``` ## El elemento de sección de navegación ```htmlembedded= <nav> ``` El elemento HTML representa una sección de una página cuyo propósito es proporcionar enlaces de navegación, ya sea dentro del documento actual oa otros documentos. Ejemplos comunes de secciones de navegación son **menús, tablas de contenido e índices.** En este ejemplo, un bloque **nav** es usado para contener una **lista no ordenada** () de enlaces. Con el CSS apropiado, esto puede ser presentado como una barra lateral, una barra de navegación 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> ## Listas ### Listas no ordenadas El elemento **ul** crea una lista no ordenada. ```htmlembedded= <ul> <li>Esto</li> <li>Aquello</li> <li>Lo de más allá</li> </ul> ``` <ul> <li>Esto</li> <li>Aquello</li> <li>Lo de más allá</li> </ul> ### Listas ordenadas El elemento **ol** permite definir listas o viñetas ordenadas (“Ordered List”), bien con numeración o alfabéticamente. ```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> ## TABLAS - Una tabla es un medio de organizar datos en filas y columnas. - La etiqueta **table** es el contenedor principal: ```htmlembedded= <table> ``` - La etiqueta **tr** representa las filas que contienen en las celdas ```htmlembedded= <tr> ``` - La etiqueta **tr** cepresenta en las celdas ```htmlembedded= <td> ``` - Ejemplo: ```htmlembedded= <table class="default"> <tr> <td>Celda 1</td> <td>Celda 2</td> <td>Celda 3</td> </tr> <tr> <td>Celda 4</td> <td>Celda 5</td> <td>Celda 6</td> </tr> </table> ``` ### Resultado: <table class="default"> <tr> <td>Celda 1</td> <td>Celda 2</td> <td>Celda 3</td> </tr> <tr> <td>Celda 4</td> <td>Celda 5</td> <td>Celda 6</td> </tr> </table> - Para ponerle un encabezado usamos la etiqueta **th** ```htmlembedded= <table class="default"> <tr> <th>Hoy</th> <th>Sábado</th> <th>Domingo</th> </tr> <tr> <td>Soleado</td> <td>Mayormente soleado</td> <td>Parcialmente nublado</td> </tr> <tr> <td>19ºC</td> <td>17ºC</td> <td>12ºC</td> </tr> </table> ``` ### Resultado: <table class="default"> <tr> <th>Hoy</th> <th>Sábado</th> <th>Domingo</th> </tr> <tr> <td>Soleado</td> <td>Mayormente soleado</td> <td>Parcialmente nublado</td> </tr> <tr> <td>19ºC</td> <td>17ºC</td> <td>12ºC</td> </tr> </table> ## Formularios - Los formularios permiten a los usuarios la introducción de datos ### Elementos que componen un formulario ### **input** - Este elemento se usa para crear controles interactivos para aceptar datos del usuario ```htmlembedded= <input type="texto" id="name" name="name" required minlength="4" maxlength="8" size="10"> ``` - La etiqueta input varía considerablemente según el valor de su atributo **type**. - Tipo de datos type: - **Text**: se expresa como **<input type=text>** y es por defecto la entrada de una sola línea. También puede tener otros atributos: **<input maxlenght>** que limita los campos a introducir; **<input size>** para indicar el espacio a disponer para cada campo y finalmente **<input value>** que indica el valor inicial de campo. ```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) - **Caja de selección**: se expresa como **```htmlembedded=<input type=checkbox>```** y sirve para representar opciones como «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ón**: su etiqueta es **<input type=radio>**, representa un conjunto de varios elementos de este tipo con el mismo nombre con un campo de selección 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ón de envío**: se expresa como **<input type=submit>** y representa la opción de lo que debe hacer el usuario. En ese caso, enviar el formulario. ```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**:El elemento input, teniendo el valor "date" en su atributo type, representa un campo para la entrada de una fecha. ```htmlembedded= <p>Fecha esperada: <input type="date" name="fechaesperada"> <input type="submit" value="Enviar datos"></p> ``` - **Number**: El elemento input, teniendo el valor "number" en su atributo type, representa un campo para la entrada de un número. ```htmlembedded= <p>Tu edad: <input type="number" name="edad"> <input type="submit" value="Enviar datos"></p> ``` -**file**: El elemento input, teniendo el valor "file" en su atributo type, representa un control para seleccionar una lista de uno o más archivos para ser subidos al servidor ```htmlembedded= <p> Sube un archivo: <input type="file" name="archivosubido"> <input type="submit" value="Enviar datos"> </p> ``` - **email**: El elemento input, teniendo el valor "email" en su atributo type, representa un campo para una o más direcciones de correo electrónico ```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 permite al usuario elegir entre un número de opciones.: - Multiple: indica que puede haber más de una opción. - Name: nombre de campo. - Size: número de í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 el espacio donde puedes colocar todo el texto que requieras y puede tener los siguientes atributos: - Coles: número de columnas visibles. - Name: nombre del campo. - Rows. Número de líneas 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> ``` - El elemento fieldset representa un conjunto de controles en un formulario (form), opcionalmente agrupados bajo un mismo nombre. - Los navegadores mostrarán normalmente un marco en torno a los controles agrupados. ```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> ``` - El elemento legend representa un título, nombre o etiqueta para un conjunto de controles, agrupados mediante el elemento fieldset. - Su contenido, siendo el título del fieldset al que pertenece, es habitualmente representado sobre el marco que éste provee. ```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> ``` - El elemento label representa una etiqueta que puede ser asociada a un control de formulario, y que se supone provee una descripción corta para éste - Hay dos formas de enlazar el input con el label - Aquí podrás ver cómo tu navegador asocia ambos elementos por interacción: ```htmlembedded= <p><label>Nombre de usuario: <input type="text" name="usuario"></label></p> <p><label>Contraseña: <input type="password" name="pass"></label></p> ``` - Ahora, asociaremos etiquetas y controles con el segundo método: haciendo que los atributos vaya en el control y for en label, coincidan. ```htmlembedded= <p><label for="pensamiento_id">¿Qué estás pensando?:</label></p> <p><input type="text" name="pensamiento" id="pensamiento_id"></p> ```