HTML - HackMD

--- title: HTML tags: apuntes description: Apuntes HTML. --- # HTML HTML o HyperText Markup Language es el lenguaje que se utiliza para crear páginas web. ## Estructura La primera linea de código en un documento html, la cual informa al navegador del tipo y versión es la siguiente: ```htmlembedded= <!DOCTYPE html> ``` Todo documento HTML debe contener el elemento raíz, el cual contiene todos los datos de la página web. ```htmlembedded= <!DOCTYPE html> <html>  </html> ``` Dentro, estarán las etiquetas \<head\> y \<body\>. * La etiqueta \<head\> contiene datos que no serán visibles directamente por el usuario como el título, archivos externos a incluir en la página, palabras clave, etc... * La etiqueta \<body\> contiene los datos que formarán la página visible para el usuario en la pantalla. Por ahora quedaría algo así: ```htmlembedded= <!DOCTYPE html> <html> <head>  </head> <body>  </body> </html> ``` Ese código sería el mínimo para crear una página web vacía. ## Elementos Como hemos visto el documento html se compone por elementos, o etiquetas. Estos elementos pueden tener contenido o ser elementos vacios. Un elemento con contenido, por ejemplo es el párrafo: ```htmlembedded= <p> Contenido </p> ``` En cambio uno vacío seria un salto de linea: ```htmlembedded= <br> ``` ## Atributos Los atributos són datos que se meten dentro de las etiquetas con el siguente formato \<etiqueta *atributo*="valor/dato" \> aunque tambien hay atributos vacios los cuales no usan \<etiqueta *atributo*\> ## Elementos de \<head\> La etiqueta \<head\> tiene ciertos elementos. ### \<meta\> La etiqueta \<meta\> contiene los metadatos de la página, cosas como codificación, autor, título, fecha, palabras clave, descripción, etc... - Codificación: * charset -> indica el tipo de codificación. Por norma general se utiliza la codificación UTF-8 - Palabras clave: * name -> keywords * content -> las palabras clave - Descripción de la web: * name -> description * content -> descripción que quieras - Autor: * name -> author * content -> nombre del autor de la web ```htmlembedded= <meta charset="utf-8"> <meta name="keywords" content="comida,pizza,tortilla"> <meta name="description" content="Menú restaurante"> <meta name="author" content="Adrián García González"> ``` ### \<title\> La etiqueta \<title\> contiene el título de la página, el cual se mostrará en la pestaña del navegador. ```htmlembedded= <title>Título aquí</title> ``` ## Elementos de \<body\> La etiqueta \<body\> tiene muchos elementos, pero algunos són. ### \<p\> El párrafo, se comportan como elemento independiente y automáticamente se separara uno de otro. ```htmlembedded= <p> Párrafo </p> ``` ### \<h\> La etiqueta \<h\> represnta la cabecera y tiene 6 variaciones, del 1 al 6, siendo la 1 la más importante y la 6 la menos. ```htmlembedded= <h1>Cabezera++!!!</h1> <h2>Cabezera++!!</h2> <h3>Cabezera++!</h3> <h4>Cabezera++</h4> <h5>Cabezera+</h5> <h6>Cabezera</h6> ``` ### \ ``` ### \<br\> Hace un salto de linea. ```htmlembedded= <br> ``` ### \<b\> o \<strong\> Pone el contenido en negrita. ```htmlembedded= <b>Negrita</b> <strong>Negrita</strong> ``` ### \<i\> o \<em\> Pone el texto en cursiva. ```htmlembedded= <i>Cursiva</i> <em>Cursiva</em> ``` ### \<img\> Se utiliza para insertar una imagen. * src -> contiene la ruta a la imagen, puede ser una URL. * alt -> contiene un texto alternativo, en caso de que no pueda cargarse la imagen. ```htmlembedded= <img src="https://cdn.pccomponentes.com/img/logos/logo-pccomponentes.png" alt="Pc Componentes"> ``` :::info <img src="https://cdn.pccomponentes.com/img/logos/logo-pccomponentes.png" alt="Pc Componentes"> ::: ``` ### \<a\> Enlaces a otras páginas. * href -> link/url * target -> \_blank para una pestaña nueva ```htmlembedded= <a href="https://www.google.es/" target="_blank">Click para ir a google</a> ``` :::info <a href="https://www.google.es/" target="_blank">Click para ir a google</a> ::: También puedes hacer un enlace a una parte de la misma página, para eso usaremos el atributo ***id***. ```htmlembedded= <a href="#saludo" target="_blank">Click para ir al saludo</a>  <p id="saludo"> Hola! </p> ``` :::info <a href="#saludo" target="_blank">Click para ir al saludo</a>  <p id="saludo"> Hola! </p> ::: Al hacer click en "Click para ir al saludo", nos lleva al párrafo de abajo. Tambien se puede combinar y hacer un enlace a una parte de otra web, href="otraweb.hmtl#saludo". ### \<ul\> i \<ol\> Son listas, sin ordenar, y ordenadas. No te ordenan el contenido, sino que lo utilizaras un tipo u otro según tu contenido. ```htmlembedded=  <ul> <li>Gato</li> <li>Perro</li> <li>Pájaro</li> </ul>  <ol> <li>Ingredientes</li> <li>Precalentar el horno</li> <li>Dejar a 180ºC 20 minutos</li> <li>Dar la vuelta</li> <li>Dejar a 180ºC otros 10 minutos</li> </ol> ``` :::info  <ul> <li>Gato</li> <li>Perro</li> <li>Pájaro</li> </ul>  <ol> <li>Ingredientes</li> <li>Precalentar el horno</li> <li>Dejar a 180ºC 20 minutos</li> <li>Dar la vuelta</li> <li>Dejar a 180ºC otros 10 minutos</li> </ol> ::: ### \<dl\> Listas descriptibas, parejas de concepto y descripción. ```htmlembedded= <dl> <dt>Concepto 1</dt> <dd>Descripción 1</dd> <dt>Concepto 2</dt> <dd>Descripción 2</dd> </dl> ``` :::info <dl> <dt>Concepto 1</dt> <dd>Descripción 1</dd> <dt>Concepto 2</dt> <dd>Descripción 2</dd> </dl> ::: ### \<table\> Tablas, son compuestas por filas. * \<tr\> que contienen celdas * \<th\> cabezera de columna * \<td\> contenido ```htmlembedded= <table> <tr> <th>Nombre</th> <th>Apellidos</th> </tr> <tr> <td>Adrián</td> <td>García González</td> </tr> <tr> <td>Lidia</td> <td>Sanchez López</td> </tr> </table> ``` :::info <table> <tr> <th>Nombre</th> <th>Apellidos</th> </tr> <tr> <td>Adrián</td> <td>García González</td> </tr> <tr> <td>Lidia</td> <td>Sanchez López</td> </tr> </table> ::: Pudes usar los atributos rowspan y colspan para expandir una celda en cualquier eje. ```htmlembedded= <table> <tr> <th>1</th> <th>2</th> <th>3</th> </tr> <tr> <td rowspan="2">1</td>  <td colspan="2">2 y 3</td>  </tr> <tr>  <td>2</td> <td>3</td> </tr> </table> ``` :::info <table> <tr> <th>1</th> <th>2</th> <th>3</th> </tr> <tr> <td rowspan="2">1</td>  <td colspan="2">2 y 3</td>  </tr> <tr>  <td>2</td> <td>3</td> </tr> </table> ::: Puedes usar los th en filas, para hacer una tabla horizontal, de la siguiente manera. ```htmlembedded= <table> <tr> <th scope="row">Nombre</th> <td>Adrián</td> <td>Lidia</td> </tr> <tr> <th scope="row">Apellidos</th> <td>García González</td> <td>Sanchez López</td> </tr> </table> ``` :::info <table> <tr> <th scope="row">Nombre</th> <td>Adrián</td> <td>Lidia</td> </tr> <tr> <th scope="row">Apellidos</th> <td>García González</td> <td>Sanchez López</td> </tr> </table> ::: #### \<caption\> Puedes poner un \<caption\> para indicar de que trata la tabla. ```htmlembedded= <table> <caption>Lista de Personas</caption> <tr> <th scope="row">Nombre</th> <td>Adrián</td> <td>Lidia</td> </tr> <tr> <th scope="row">Apellidos</th> <td>García González</td> <td>Sanchez López</td> </tr> </table> ``` :::info <table> <caption>Lista de Personas</caption> <tr> <th scope="row">Nombre</th> <td>Adrián</td> <td>Lidia</td> </tr> <tr> <th scope="row">Apellidos</th> <td>García González</td> <td>Sanchez López</td> </tr> </table> ::: ### \<iframe\> Sirven para incrustar otras paginas web. El mejor ejemplo, es el que te ofrece youtube por defecto. ```htmlembedded= <iframe width="100%" height="400" src="https://www.youtube.com/embed/NYViektxN7Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ``` :::info <iframe width="100%" height="400" src="https://www.youtube.com/embed/NYViektxN7Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ::: Google maps también lo permite. ```htmlembedded= <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d890.8211545807549!2d2.030985975613396!3d41.32293107221672!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12a49c5e1a432905%3A0x666015efb963c68a!2sCan%20Calderon!5e0!3m2!1ses!2ses!4v1651514692978!5m2!1ses!2ses" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> ``` :::info <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d890.8211545807549!2d2.030985975613396!3d41.32293107221672!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12a49c5e1a432905%3A0x666015efb963c68a!2sCan%20Calderon!5e0!3m2!1ses!2ses!4v1651514692978!5m2!1ses!2ses" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> ::: ### \<form\> Sirve para hacer formularios, un formulario es utilizado para recopilar la entrada del usuario. La entrada del usuario normalmente se envía a un servidor para su procesamiento. La etiqueta \<form\> solo es la raiz, y aunque contiene atributos importantes, los elementos que iran dentro son los que nos permitiran coger información. Para recoger datos usaremos \<input\>. ```htmlembedded= <form> <label for="nombre">Nombre:</label><br> <input type="text" id="nombre" name="nombre"><br> <label for="apellidos">Apellidos:</label><br> <input type="text" id="apellidos" name="apellidos"> </form> ``` :::danger FALTA MÁS POR EXPLICAR ::: ### \<pre\> y \<code\> La etiqueta \<pre\> sirve para poder escribir con los espacios y saltos de lineas que quieras, respetandote el formato al 100%. ```htmlembedded= <pre> Linea 1 Linea 2 Separado Linea 4 </pre> ``` :::info <pre> Linea 1 Linea 2 Separado Linea 4 </pre> ::: Si quieres usar la etiqueta \<code\>, que sirve para representar código, necesitarás meterla dentro de una etiqueta \<pre\> ya que para que te respeta la indentación y formato, necesitas usarla en conjunto. ```htmlembedded= <pre> <code> public function saludo() { return "hola"; } </code> </pre> ``` :::info <pre> <code> public function saludo() { return "hola"; } </code> </pre> :::