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 Próxima revisiónAmbos lados, revisión siguiente | ||
html [2023/01/11 19:13] – [Cuerpo] peron | html [2023/01/19 17:12] – [Listas] 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 tu fichero '' | ||
- | <code bash> | + | La mayoría de servicios de creación web actuales usualmente obligan a emplear variados sistemas de contenido y plantillas prearmadas. En este Tutorial aprenderás la elaboración de una web "a mano" a travñes de [[pubnix|nuestro shell Unix]]. Esto implica escribir el código HTML en tu [[editores de texto|editor de texto]] favorito. |
- | Si el fichero no existiese, se creará automáticamente para que puedas trabajar con él. Puedes consultar | + | >Es posible |
{{ : | {{ : | ||
- | ====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 '' |
+ | * Contenido de hipertexto ''< | ||
+ | * Encabezado ''< | ||
+ | * Cuerpo ''< | ||
- | El Documento HTML debe contar con una " | + | **Crea un fichero muleto '' |
- | * Identificador de tipo de Documento | + | <code bash> |
- | * HTML | + | |
- | * Encabezado | + | |
- | * Cuerpo | + | |
- | Como vemos, según esta convención, | + | ...y **pégale el siguiente código fuente |
- | + | ||
- | Comienza entonces por introducir en tu web '' | + | |
- | + | ||
- | <code html>< | + | |
- | + | ||
- | A continuación, | + | |
- | + | ||
- | <code html> | + | |
- | < | + | |
- | < | + | |
- | ... | + | |
- | </ | + | |
- | </ | + | |
- | + | ||
- | >En las etiquetas | + | |
- | + | ||
- | ¡Ya has definido el espacio | + | |
- | + | ||
- | Reemplaza ahora el '' | + | |
- | + | ||
- | Debe quedarte así: | + | |
<code html> | <code html> | ||
Línea 72: | Línea 41: | ||
< | < | ||
< | < | ||
+ | < | ||
+ | <meta http-equiv=" | ||
+ | <meta lang=" | ||
+ | <meta charset=" | ||
</ | </ | ||
| | ||
< | < | ||
+ | ... | ||
</ | </ | ||
</ | </ | ||
</ | </ | ||
- | En resumen, la estructura básica - - de un documento HTML ya está conformada. Es el "esqueleto" sobre el cual podrás crear cualquier documento. Puedes guardar los cambios (también puedes dejar este documento a mano, para no tener que volver a armar un esqueleto, ¡ya lo has realizado! | + | ¡Felicitaciones! Conserva este esqueleto |
- | A continuación aprenderás qué incorporar al encabezado y al cuerpo del contenido | + | ==== Contenido |
- | ====Encabezado==== | + | El archivo inicial de tu página web será '' |
- | Las etiquetas | + | |
- | <code html> | + | **Edita ahora tu fichero '' |
- | </ | + | |
- | < | + | |
- | </ | + | |
- | </ | + | |
- | >El texto involucrado entre entre el par de etiquetas de título será el que aparezca en la barra de título | + | **Incorpora contenido al cuerpo |
- | + | ||
- | Aún dentro del encabezado, también es importante indicar ciertas etiquetas | + | |
<code html> | <code 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. |
- | + | </body> | |
- | En efecto, el encabezado ''< | + | |
- | + | ||
- | <code html> | + | |
- | </ | + | |
- | < | + | |
- | <meta http-equiv=" | + | |
- | <meta lang=" | + | |
- | <meta charset=" | + | |
- | </head> | + | |
</ | </ | ||
- | ¡Ya tienes listo el encabezado! Guarda nuevamente los cambios y conserva el esqueleto para otras páginas webs. | ||
- | ====Cuerpo==== | + | Este código |
- | Esta es la sección del cuerpo es la más importante, ya que en ella irá el **contenido del documento que se presentará en el navegador | + | |
===Etiquetas de atributo=== | ===Etiquetas de atributo=== | ||
- | Estas permiten definir distintos atributos, que el navegador se encargará de presentar al texto. | ||
- | Las etiquetas se ven así: | + | Para indicar formato y atributos HTML, utilizaremos lo que llamamos //etiquetas// que marcan el texto. Estas etiquetas informan al navegador sobre la apariencia del texto contenido - definiendo títulos, enlaces, listas, párrafos, etc. Por medio de las mismas definirás distintos // |
- | <code html>< | + | 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, el atributo '' |
- | 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 '' | + | Algunas |
- | + | ||
- | 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 ''< | + | |
- | + | ||
- | Usa etiquetas de atributos para dar formato al texto del cuerpo. | + | |
- | + | ||
- | Estas son algunas | + | |
| ''< | | ''< | ||
- | | ''< | + | | ''< |
- | | ''< | + | | ''< |
| ''< | | ''< | ||
- | | ''< | + | | ''< |
- | | ''< | + | | ''< |
| ''< | | ''< | ||
| ''< | | ''< | ||
Línea 143: | Línea 92: | ||
| ''< | | ''< | ||
- | > | + | No todas las etiquetas |
+ | |||
+ | Con las consideraciones anteriores, **otorga formato al contenido que acabas | ||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | <p> | ||
+ | Este es el primer párrafo que deseo escribir, ya que estoy editando HTML a mano. | ||
+ | <hr> | ||
+ | <p>He aprendido que las etiquetas permiten definir formatos, por ejemplo < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ¡Con esto ya has aprendido cómo otorgarle formato simple HTML a tu contenido de texto! | ||
+ | |||
+ | Veamos ahora en forma detenida cómo se utilizan las funciones de los principales tipos de etiquetas. | ||
- | Algunas etiquetas también contienen información adicional que llamamos // | + | ====Etiquetas de bloque==== |
- | Agreguemos entonces algún contenido a nuestro | + | La etiqueta |
<code html> | <code html> | ||
- | < | ||
<p> | <p> | ||
- | ¡Esta | + | Este es un Párrafo |
</p> | </p> | ||
- | Estoy aprendiendo a escribir HTML a mano. | ||
- | <hr> | ||
</ | </ | ||
- | ===Listas=== | + | La etiqueta ''< |
- | Las listas son una excelente manera | + | |
- | * listas ordenadas '' | + | <code html><br></code> |
- | * 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 | + | |
+ | <code html>< | ||
+ | |||
+ | ====Contenedores semánticos==== | ||
+ | |||
+ | Al igual que las etiquetas | ||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | El '' | ||
+ | |||
+ | >Un ejemplo: podrías tener una página con críticas | ||
+ | |||
+ | ====Listas==== | ||
+ | Las listas pueden estar ordenadas usando números consecutivos (también letras), o no-ordenadas (¿desordenadas? | ||
+ | |||
+ | <code html>< | ||
+ | |||
+ | ==Listas ordenadas== | ||
+ | Las listas ordenadas usan la etiqueta ''< | ||
<code html> | <code html> | ||
<ol> | <ol> | ||
- | <li>Artículo uno</ | + | |
- | <li>Artículo dos</li> | + | <li>elemento 2</ |
+ | < | ||
</ol> | </ol> | ||
</ | </ | ||
+ | Muestran un listado ordenado numéricamente, | ||
- | ===Divisiones=== | + | - elemento 1 |
- | La última estructura (opcional) de la que hablaremos serán las etiquetas ''< | + | - elemento 2 |
+ | - elemento n | ||
- | Para crear una división específica, | + | ==Listas Desordenadas== |
- | <code html>< | + | Las listas desordenadas se engloban utilizando las etiquetas ''< |
+ | |||
+ | <code html> | ||
+ | <ul> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Muestran una viñeta o punto de enumeración en lugar de un número, de esta forma: | ||
+ | |||
+ | * elemento 1 | ||
+ | * elemento 2 | ||
+ | * elemento n | ||
+ | |||
+ | ====Etiquetas de formato==== | ||
+ | Son las que dicen cómo se mostrará el texto que encierran. | ||
+ | |||
+ | ===Títulos=== | ||
+ | |||
+ | La etiqueta ''< | ||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | ====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>< | ||
+ | |||
+ | La letra ' | ||
+ | |||
+ | Dos cosas importantes que no debes olvidar: el signo = y las comillas dobles. | ||
+ | |||
+ | Luego viene el texto que leerás en el navegador -La web de ~fulano- y finalmente la <code html></ | ||
+ | |||
+ | Si el archivo enlazado está en la misma carpeta solo hará falta poner el nombre del archivo, sin especificar toda la direcció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: | ||
+ | |||
+ | <code html>< | ||
+ | |||
+ | ===Enlace de correo electrónico=== | ||
+ | |||
+ | El enlace de correo electrónico es igual al enlace explicado recién, solo que cambia la referencia. | ||
+ | |||
+ | <code html>< | ||
+ | |||
+ | La diferencia está en la palabra mailto: seguida de la dirección de correo electrónico. | ||
+ | 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>< | ||
+ | +href=" | ||
+ | +ro_destino.com& | ||
+ | +20mensaje"> | ||
+ | |||
+ | 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 para el enlace | ||
+ | * Un identificador para el contenido enlazado | ||
+ | |||
+ | 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 título: | ||
+ | |||
+ | <code html>< | ||
+ | |||
+ | Con esto, estamos poniendo un marcador en el inicio del texto. | ||
+ | |||
+ | Luego, al final del artículo, ofreces al lector la posibilidad de volver arriba+usando el signo # y el nombre que le asignaste al marcador: | ||
+ | |||
+ | <code html>< | ||
+ | |||
+ | ===Enlace a una imagen=== | ||
+ | |||
+ | Este enlace es diferente. | ||
+ | |||
+ | <code html>< | ||
+ | |||
+ | La etiqueta abre con '' | ||
+ | |||
+ | La barra final, indica el cierre de la etiqueta. No es obligatorio, | ||
+ | |||
+ | Para completar la llamada podés agregarle un título y un texto alternativo. Por ejemplo: | ||
+ | |||
+ | <code html>< | ||
+ | |||
+ | El título es el texto que ves cuando pasas el mouse por encima de la imagen. | ||
+ | |||
+ | El texto alternativo se mostrará cuando el navegador no tenga soporte para imágenes, las imágenes estén deshabilitadas o uses un navegador no gráfico. | ||
+ | |||
+ | Los formatos soportados son JPG, GIF (y GIF animados), PNG, SVG, BMP e ICO. | ||
+ | GIF, PNG y SVG soportan transparencias. (Hablo de pixeles transparentes, | ||
+ | |||
+ | ¿Cómo usar una imagen en vez de un texto para el enlace? | ||
+ | |||
+ | Es fácil, solo tendrías que encerrar la etiqueta de la imagen dentro de las etiquetas de un enlace. | ||
+ | <code html>< | ||
+ | |||
+ | 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 '' | ||
+ | |||
+ | |||
+ | |||
+ | -------------- | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ====Listas==== | ||
+ | Las //listas// HTML son una excelente manera de organizar información puntual en un documento HTML. HTML admite dos tipos de listas: | ||
+ | |||
+ | | Tipo de lista | Etiqueta HTML | Resultado | | ||
+ | | Listas ordenadas | ''< | ||
+ | | Listas desordenadas | ''< | ||
+ | |||
+ | El contenedor de listas requiere dos conjuntos de etiquetas, ya sea '' | ||
+ | |||
+ | Por ejemplo, si deseas agregar información de contacto utilizando listas con viñetas, deberías utilizar una sintaxis similar a la siguiente: | ||
+ | |||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
- | Como ves, una vez abiertas, las etiquetas de divisiones pueden cerrarse de forma simple utilizando el ''>'' | ||
==== Enlaces ==== | ==== Enlaces ==== | ||
- | Los enlaces son la característica | + | Los enlaces son la característica |
Para crear un enlace utiliza el par de etiquetas ''< | Para crear un enlace utiliza el par de etiquetas ''< | ||
Línea 192: | Línea 322: | ||
===Vínculo interno en la página web=== | ===Vínculo interno en la página web=== | ||
- | Primero intenta enlazar a una sección de la página web actual. Para lograrlo, primero debes contar con un '' | + | Primero intenta enlazar a una sección de la página web actual. Para lograrlo, primero debes contar con un '' |
- | <code html>< | + | <code html> |
- | + | <div id="#contacto">Información | |
- | Ahora podrás vincular a cualquier '' | + | < |
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
- | <code html> | + | Ahora podrás vincular a esta sección '' |
- | Como ves, '' | + | <code html> |
- | <code html>< | + | Como ves, '' |
- | También podrás definir | + | También podrás definir |
Para hacerlo más específico en castellano, podrías usar algo como esto: | Para hacerlo más específico en castellano, podrías usar algo como esto: | ||
Línea 227: | Línea 363: | ||
<code html>< | <code html>< | ||
+ | |||
+ | ====Divisiones==== | ||
+ | El uso de de estas ''< | ||
+ | |||
+ | Crea una división específica con una etiqueta ''< | ||
+ | |||
+ | <code html>< | ||
+ | |||
+ | Existen más atributos que podrás utilizar. Detallemos algunos. | ||
+ | |||
====Imágenes==== | ====Imágenes==== |