Diferencias
Muestra las diferencias entre dos versiones de la página.
Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previaÚltima revisiónAmbos lados, revisión siguiente | ||
html [2023/01/11 18:23] – [El documento HTML] peron | html [2023/01/19 17:26] – [Enlaces] peron | ||
---|---|---|---|
Línea 1: | Línea 1: | ||
====== Lenguaje de Marcado de Hipertexto ====== | ====== Lenguaje de Marcado de Hipertexto ====== | ||
- | '' | + | '' |
- | + | ||
- | Puedes consultar su su especificación completa en [[https:// | + | |
====== Tutorial de HTML ====== | ====== Tutorial de HTML ====== | ||
====Introducción==== | ====Introducción==== | ||
- | Abarcaré aquí [[uso de html|el diseño web "a mano" | + | En principio, un sitio web no es mas que una colección de ficheros de texto plano con enlaces. Estos ficheros de texto suelen escribirse según el formato que permite el lenguaje HTML, por lo cual cuentan con la extensión '' |
+ | |||
+ | Sin ser el visualmente más elegante, el [[uso de HTML]] permite una manera simple y llana de expresión de texto en la Web, de una forma [[filosofia unix# | ||
- | Sin ser el visualmente más elegante, nos permite una manera simple y llana de expresarnos en la Web, de una forma [[filosofia unix# | ||
==== Primeros pasos ==== | ==== Primeros pasos ==== | ||
- | Un sitio web no es mas que una colección de ficheros de texto plano concebidos para que el [[navegador web]] los vincule entre sí, los interprete y los presente en pantalla. Estos ficheros de texto suelen escribirse según el formato del lenguaje HTML, por lo que por convención tienen la extensión '' | ||
- | |||
- | De un tiempo a esta parte la mayoría de servicios de creación web desean que en lugar de escribir código HTML, hagas uso de sus sistemas de contenido y plantillas prehechas. Esto es contrario a lo que estamos buscando, que es crear una web a mano desde [[pubnix|nuestro shell Unix]]. | ||
- | |||
- | En este caso aprenderás a crear tu página web a mano, escribiendo el código HTML en tu [[editores de texto|editor de texto]] favorito. Es posible que [[Micro]] sea más del agrado del principiante: | ||
- | En este caso, para editar | + | La mayoría de servicios de creación web actuales usualmente obligan a emplear variados sistemas de contenido y plantillas prearmadas. |
- | <code bash>micro ~/ | + | >Es posible |
- | + | ||
- | Si el fichero no existiese, se creará automáticamente para que puedas trabajar con él. Puedes consultar | + | |
{{ : | {{ : | ||
- | ====El documento HTML==== | ||
- | Los documentos HTML que crearás serán ficheros de texto sin formato, que incluyen // | + | ¡Comencemos! |
- | Por convención, | + | ====Estructura de los documentos HTML ==== |
- | Normalmente // | + | Tu fichero |
- | ====Estructura==== | + | * Identificador de tipo de Documento '' |
- | En primer lugar es recomendable utilizar una primer //etiqueta simple// | + | * Contenido de hipertexto |
+ | * Encabezado ''< | ||
+ | * Cuerpo ''< | ||
- | < | + | **Crea un fichero muleto '' |
- | Ccada página debería comenzar con esta etiqueta, que le permitirá al navegador conocer que se trata de una página web. | + | <code bash> |
- | A continuación, | + | ...y **pégale el siguiente código fuente HTML**, para darle una estructura para fichero en castellano: |
<code html> | <code html> | ||
< | < | ||
< | < | ||
- | ... | + | < |
+ | < | ||
+ | <meta http-equiv=" | ||
+ | <meta lang=" | ||
+ | <meta charset=" | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | | ||
+ | </ | ||
</ | </ | ||
</ | </ | ||
- | Todo lo que está contenido entre las etiquetas abiertas y cerradas (en este caso el '' | + | ¡Felicitaciones! Conserva |
- | Comencemos. Reemplacemos el '' | + | ==== Contenido |
- | En resumen, | + | El archivo inicial de tu página web será '' |
+ | |||
+ | **Edita ahora tu fichero '' | ||
+ | |||
+ | **Incorpora contenido al cuerpo del sitio web**. Como vimos, este comprende el espacio entre la etiqueta de apertura ''< | ||
<code html> | <code html> | ||
- | <!DOCTYPE html> | + | <body> |
- | < | + | ¡Hola Tercer Mundo! |
- | < | + | Este es el primer párrafo que deseo escribir, ya que estoy editando HTML a mano. |
- | </ | + | He aprendido que las etiquetas permiten definir formatos, por ejemplo este texto está en negrita y este texto está en cursiva. También puedes usar subrayado. |
- | + | </ | |
- | < | + | </ |
- | | + | |
- | </html> | + | |
- | </ | + | |
- | Ahora veamos cómo operan | + | Este código presentará el texto en el navegador de forma simple (sin formato y sin divisiones de párrafo alguno). |
- | ====Encabezado==== | + | ===Etiquetas de atributo=== |
- | El encabezado se utiliza para definir información opcional | + | |
+ | Para indicar formato y atributos HTML, utilizaremos lo que llamamos // | ||
+ | |||
+ | A menudo estas etiquetas se utilizan en pares, con //apertura de etiqueta// y un //cierre de etiqueta//. El texto delimitado entre la apertura y el cierre se verá afectado por los atributos solicitados. Por ejemplo, | ||
+ | |||
+ | Algunas de las etiquetas de formato que podrás utilizar: | ||
+ | |||
+ | | ''< | ||
+ | | ''< | ||
+ | | ''< | ||
+ | | ''< | ||
+ | | ''< | ||
+ | | ''< | ||
+ | | ''< | ||
+ | | ''< | ||
+ | | ''< | ||
+ | | ''< | ||
+ | |||
+ | No todas las etiquetas deben ir seguidas de un //cierre de etiqueta//. Las //etiquetas simples// no operan sobre texto delimitado alguno; simplemente se agregan donde lo deseas (por ejemplo podrás usar ''< | ||
+ | |||
+ | Con las consideraciones anteriores, **otorga formato al contenido que acabas de crear**. Este podría quedar de la siguiente manera: | ||
<code html> | <code html> | ||
- | | + | < |
- | <title>Titulo de tu página web</title> | + | < |
- | </head> | + | <p> |
+ | Este es el primer párrafo que deseo escribir, ya que estoy editando HTML a mano. | ||
+ | < | ||
+ | <p>He aprendido que las etiquetas permiten definir formatos, por ejemplo < | ||
+ | </p> | ||
+ | </body> | ||
</ | </ | ||
- | El texto involucrado entre entre el par de etiquetas de título será el que aparezca en la barra de título del navegador, en forma de titular, cuando este reciba la copia de la página del [[servidor]]. | + | ¡Con esto ya has aprendido cómo otorgarle formato simple HTML a tu contenido de texto! |
- | Aún dentro del encabezado, también es importante indicar ciertas | + | Veamos ahora en forma detenida cómo se utilizan las funciones de los principales tipos de etiquetas. |
+ | |||
+ | ====Etiquetas de bloque==== | ||
+ | |||
+ | La etiqueta | ||
<code html> | <code html> | ||
- | | + | <p> |
- | < | + | Este es un Párrafo |
- | <meta charset=" | + | </p> |
</ | </ | ||
- | En efecto, el encabezado | + | La etiqueta |
+ | |||
+ | <code html>< | ||
+ | |||
+ | La etiqueta | ||
+ | |||
+ | <code html>< | ||
+ | |||
+ | ====Contenedores semánticos==== | ||
+ | |||
+ | Al igual que las etiquetas anteriores, opcionalmente puedes utilizar // | ||
<code html> | <code html> | ||
- | | + | <header>Texto de tu encabezado</header> |
- | < | + | <section> |
- | <meta http-equiv=" | + | <article>Texto de tu artículo</article> |
- | <meta lang=" | + | < |
- | | + | |
- | </head> | + | |
</ | </ | ||
- | ¡Ya tenemos el encabezado listo! | ||
- | ====Cuerpo==== | ||
- | La sección del cuerpo es la más importante, ya que contiene el contenido del documento que se presentará en el navegador web de quien solicite una copia del documento para su lectura. | ||
- | ===Divisiones=== | + | El '' |
- | La parte final de la estructura de la que hablaremos son las etiquetas | + | |
- | Para ello, debemos modificar etiqueta | + | >Un ejemplo: podrías tener una página con críticas |
- | <code html>< | + | ====Listas==== |
+ | Las listas pueden estar ordenadas usando números consecutivos (también letras), o no-ordenadas (¿desordenadas? | ||
- | Como vemos, una vez abiertas, las etiquetas de divisiones se pueden cerrar de forma simple con el '' | + | <code html>< |
- | ===Etiquetas de atributo=== | + | |
- | Estas permiten definir distintos atributos, que el navegador se encargará de presentar al texto. | + | |
- | Las etiquetas se ven así: | + | ==Listas ordenadas== |
+ | Las listas ordenadas usan la etiqueta ''< | ||
- | <code html>< | + | <code html> |
+ | <ol> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ol> | ||
+ | </ | ||
- | Como ya vimos, a menudo estas etiquetas se utilizan en pares, con //apertura de etiqueta// y un //cierre de etiqueta//. El texto delimitado entre la apertura y el cierre se verá afectado por los atributos solicitados. En este caso, la de atributo '' | + | Muestran |
- | No todas las etiquetas deben ir seguidas de un //cierre de etiqueta//. Las //etiquetas simples// no operan sobre texto delimitado alguno, simplemente se agregan donde lo deseas (por ejemplo podrás usar ''< | + | - elemento 1 |
+ | - elemento 2 | ||
+ | - elemento n | ||
- | Usa etiquetas de atributos para dar formato al texto del cuerpo. | + | ==Listas Desordenadas== |
- | Estas son algunas de las etiquetas | + | Las listas desordenadas se engloban utilizando |
- | | '' | + | <code html> |
- | | '' | + | <ul> |
- | | '' | + | <li>elemento 1</li> |
- | | '' | + | <li>elemento 2</li> |
- | | '' | + | <li>elemento n</li> |
- | | ''< | + | </ul> |
- | | ''< | + | </code> |
- | | ''< | + | |
- | | ''< | + | |
- | | ''< | + | |
- | > | + | Muestran una viñeta o punto de enumeración |
- | Algunas etiquetas también contienen información adicional que llamamos // | + | * elemento 1 |
+ | * elemento 2 | ||
+ | * elemento n | ||
- | ===Listas=== | + | ====Etiquetas de formato==== |
- | Las listas son una excelente manera de organizar la información en un documento HTML. HTML admite dos tipos de listas: | + | Son las que dicen cómo se mostrará el texto que encierran. |
- | * listas ordenadas ''< | + | ===Títulos=== |
- | * listas desordenadas ''< | + | |
- | Las listas son un poco más complejas, ya que requieren dos conjuntos de etiquetas, | + | La etiqueta |
- | Cualquier cosa que desee puede ir en un elemento de la lista, incluso en otra lista. Esta es una gran manera de hacer contornos. Una lista simple sería algo como esto: | + | |
<code html> | <code html> | ||
- | <ol> | + | <h1> |
- | <li>Artículo uno</li> | + | <h2>Títular h2</h2> |
- | <li>Artículo dos</li> | + | <h3>Títular h3</h3> |
- | </ol> | + | < |
+ | < | ||
+ | < | ||
</ | </ | ||
+ | ====Enlaces==== | ||
+ | Una de las características principales de una página web es que se pueden enlazar distintos documentos. La esencia de la WWW es el hiper-texto: | ||
+ | Para poner un enlace necesitarás un ancla (anchor, en inglés). | ||
+ | La etiqueta que genera el enlace se ve así: | ||
+ | <code html>< | ||
- | ==== Enlaces ==== | + | La letra ' |
- | Los enlaces son la característica definitoria de HTML. Podrás vincular tanto a secciones dentro del documento actual, a otras páginas | + | Dos cosas importantes |
- | Para crear un enlace utiliza | + | Luego viene el texto que leerás en el navegador -La web de ~fulano- y finalmente la <code html></ |
- | Modifica estas etiquetas con el atributo '' | + | Si el archivo enlazado está en la misma carpeta solo hará falta poner el nombre del archivo, sin especificar toda la dirección: |
- | ===Vínculo interno en la página | + | <code html>< |
- | Primero intenta enlazar a una sección | + | |
- | <code html>< | + | en cambio, si está en otro servidor porque es la página web de tu amigo, deberás poner la URL completa: |
- | Ahora podrás vincular | + | <code html>< |
- | <code html> | + | ===Enlace de correo electrónico=== |
- | Como ves, ''#'' | + | El enlace de correo electrónico es igual al enlace explicado recién, solo que cambia |
- | <code html>< | + | <code html>< |
- | También podrás definir algunas cosas adicionales muy útiles. Incluso si no ha configurado ningún | + | La diferencia está en la palabra |
+ | Mailto indica al navegador que debe abrir un mensaje nuevo en la aplicación predeterminada de correo y cargar el campo " | ||
+ | |||
+ | Podés hacer que el mensaje tenga los campos previamente completados si agregás la información en el enlace. De esa manera el visitante de tu página no tiene más que cliquear el enlace y luego en el botón de enviar, ya que todo estará completo. | ||
+ | |||
+ | <code html> | ||
+ | <a href="mailto: | ||
+ | </ | ||
+ | |||
+ | El símbolo | ||
+ | |||
+ | Se ve complicado a primera vista, pero una vez que pasa la primera impresión podrás ver que es más sencillo de lo que parece. | ||
+ | |||
+ | ===Enlace interno=== | ||
+ | Son los enlaces que apuntan a otra parte dentro del mismo documento. Para generar un enlace interno necesitarás dos etiquetas: | ||
+ | |||
+ | * una etiqueta para el enlace | ||
+ | * Un identificador '' | ||
+ | |||
+ | Por ejemplo, tenemos un texto largo y queremos que cuando el lector llegue hasta abajo pueda volver al título del artículo, lo que hacemos es ponerle un nombre identificador (id) al titular: | ||
+ | |||
+ | <code html> | ||
+ | <h2 id=" | ||
+ | </ | ||
- | Para hacerlo más específico en castellano, podrías usar algo como esto: | + | Con esto, estamos poniendo un marcador en el inicio de un titular clicbaitero. |
- | <code html>< | + | Luego, al final del artículo, ofreces al lector la posibilidad de volver arriba+usando el signo # y el nombre que le asignaste |
- | === Vínculo | + | <code html>< |
- | Suele ser muy útil vincular otras páginas web situadas en tu mismo directorio '' | + | |
- | Para recurrir | + | ===Enlace |
- | De esta forma, en lugar de poner las fotos de tus gatos en un '' | + | Este enlace es diferente. |
- | <code html>< | + | <code html>< |
- | === Vínculos web externos === | + | La etiqueta abre con '' |
- | Finalmente, podrás vincular a cualquier sitios web que esté en línea. Para lograrlo, incluye | + | |
- | <code html>< | + | La barra final, indica |
- | Una cosa más: si deseas vincular a una sección específica de una página, podrás al '' | + | Para completar la llamada podés agregarle |
- | <code html>< | + | <code html>< |
- | ====Imágenes==== | + | El título es el texto que ves cuando pasas el mouse por encima |
- | Puedes agregar imágenes a tu página web empleando la etiqueta simple ''< | + | |
- | ''< | + | El texto alternativo se mostrará cuando el navegador |
- | Si quisieras incluir una foto de su gato Felix en tu página, coloca el archivo | + | Los formatos soportados son JPG, GIF (y GIF animados), PNG, SVG, BMP e ICO. |
+ | GIF, PNG y SVG soportan transparencias. (Hablo | ||
- | <code html>< | + | ¿Cómo usar una imagen en vez de un texto para el enlace? |
- | >Existen todo tipo de cosas que puede hacer con la etiqueta | + | Es fácil, solo tendrías |
+ | <code html><a href=" | ||
- | ====Caracteres especiales==== | + | De esta manera tendrías una imagen que enlaza con una URL que puede ser cualquiera de las que describimos antes. Incluso puede ser la misma URL de la imagen. Un claro ejemplo podría ser la imagen de una carta postal en un enlace |
+ | +de tipo '' | ||
- | Vaya a saber porqué, HTML no siempre muestra caracteres especiales como nos gustaría. | ||
- | Si tiene un carácter que no puede mostrar correctamente, | ||
- | La realidad es que hay demasiadas suplantadores como para enumerarlas todas aquí, pero hay un montón de páginas que tienen todos los códigos que podrías desear. | ||
- | >Para entender cómo encajan todas estas partes, lo es mejor es estudiar el código HTML de muchas de páginas web. En la mayoría de los navegadores podrás hacerlo con **Ctrl+u** (En MacOS usa **Comando+Opción+u**). Si la página cuenta con muchos scripts o CSS, probablemente no sea tan útil mirar su código fuente, pero una página simple como https:// | ||
=====Conclusión===== | =====Conclusión===== |