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/19 17:06] – [Listas] peron | html [2023/01/19 17:26] – [Enlaces] peron | ||
---|---|---|---|
Línea 82: | Línea 82: | ||
| ''< | | ''< | ||
- | | ''< | + | | ''< |
- | | ''< | + | | ''< |
| ''< | | ''< | ||
- | | ''< | + | | ''< |
- | | ''< | + | | ''< |
| ''< | | ''< | ||
| ''< | | ''< | ||
Línea 145: | Línea 145: | ||
====Listas==== | ====Listas==== | ||
- | Las listas pueden estar ordenadas usando números consecutivos (también letras), o no-ordenadas (¿desordenadas? | + | Las listas pueden estar ordenadas usando números consecutivos (también letras), o no-ordenadas (¿desordenadas? |
<code html>< | <code html>< | ||
==Listas ordenadas== | ==Listas ordenadas== | ||
- | Las listas ordenadas usan la etiqueta ''< | + | Las listas ordenadas usan la etiqueta ''< |
<code html> | <code html> | ||
Línea 162: | Línea 162: | ||
Muestran un listado ordenado numéricamente, | Muestran un listado ordenado numéricamente, | ||
- | | + | |
- | | + | |
- | | + | |
==Listas Desordenadas== | ==Listas Desordenadas== | ||
+ | |||
Las listas desordenadas se engloban utilizando las etiquetas ''< | Las listas desordenadas se engloban utilizando las etiquetas ''< | ||
Línea 175: | Línea 176: | ||
< | < | ||
</ul> | </ul> | ||
+ | </ | ||
Muestran una viñeta o punto de enumeración en lugar de un número, de esta forma: | Muestran una viñeta o punto de enumeración en lugar de un número, de esta forma: | ||
Línea 197: | Línea 199: | ||
< | < | ||
</ | </ | ||
- | |||
- | ===Divisores=== | ||
- | < | ||
- | Salto de linea | ||
- | |||
- | < | ||
- | Linea horizontal. Una raya que abarca el ancho del documento- | ||
- | |||
====Enlaces==== | ====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: | 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: | ||
Línea 231: | Línea 225: | ||
El enlace de correo electrónico es igual al enlace explicado recién, solo que cambia la referencia. | El enlace de correo electrónico es igual al enlace explicado recién, solo que cambia la referencia. | ||
- | <code html>< | + | <code html>< |
- | La diferencia está en la palabra mailto: seguida de la dirección de correo electrónico. | + | 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 " | 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. | 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>< | + | <code html> |
- | +href=" | + | <a href=" |
- | +ro_destino.com& | + | </ |
- | +20mensaje"> | + | |
- | El símbolo ''&'' | + | 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. | 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. | ||
Línea 249: | Línea 242: | ||
===Enlace interno=== | ===Enlace interno=== | ||
Son los enlaces que apuntan a otra parte dentro del mismo documento. Para generar un enlace interno necesitarás dos etiquetas: | 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 | + | * una etiqueta para el enlace |
- | Lo que hacemos es ponerle un nombre | + | * Un identificador |
- | <code html>< | + | 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: |
- | Con esto, estamos poniendo un marcador en el inicio | + | <code html> |
+ | <h2 id=" | ||
+ | </ | ||
+ | |||
+ | Con esto, estamos poniendo un marcador en el inicio | ||
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: | 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>< | + | <code html>< |
===Enlace a una imagen=== | ===Enlace a una imagen=== | ||
Línea 294: | Línea 289: | ||
- | -------------- | ||
- | |||
- | |||
- | |||
- | |||
- | ====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: | ||
- | |||
- | < | ||
- | < | ||
- | < | ||
- | <ul> | ||
- | < | ||
- | < | ||
- | </ul> | ||
- | </ | ||
- | |||
- | ==== Enlaces ==== | ||
- | |||
- | Los enlaces son la característica fundamental del hipertexto. Podrás incluír tanto a secciones dentro del documento actual, a otras páginas que componen el sitio web, así como a otros sitios web completamente distintos que se encuentren en línea. | ||
- | |||
- | Para crear un enlace utiliza el par de etiquetas ''< | ||
- | |||
- | Modifica estas etiquetas con el atributo '' | ||
- | |||
- | ===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 ''< | ||
- | |||
- | <code html> | ||
- | <div id="# | ||
- | < | ||
- | < | ||
- | <ul> | ||
- | < | ||
- | < | ||
- | </ul> | ||
- | </ | ||
- | |||
- | Ahora podrás vincular a esta sección '' | ||
- | |||
- | <code html> | ||
- | |||
- | Como ves, ''#'' | ||
- | |||
- | También podrás definir otros vínculos útiles: incluso si no hubieses configurado ningún ''< | ||
- | |||
- | Para hacerlo más específico en castellano, podrías usar algo como esto: | ||
- | |||
- | <code html>< | ||
- | |||
- | === Vínculo a una web en el mismo directorio === | ||
- | Suele ser muy útil vincular otras páginas web situadas en tu mismo directorio '' | ||
- | |||
- | Para recurrir a esto, podrás usar la misma técnica que utilizaste al vincular un '' | ||
- | |||
- | De esta forma, en lugar de poner las fotos de tus gatos en un '' | ||
- | |||
- | <code html>< | ||
- | |||
- | === Vínculos web externos === | ||
- | Finalmente, podrás vincular a cualquier sitios web que esté en línea. Para lograrlo, incluye la dirección web completa (URL) en tu '' | ||
- | |||
- | <code html>< | ||
- | |||
- | Una cosa más: si deseas vincular a una sección específica de una página, podrás al '' | ||
- | |||
- | <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==== | ||
- | Puedes agregar imágenes a tu página web empleando la etiqueta simple ''< | ||
- | |||
- | ''< | ||
- | |||
- | Si quisieras incluir una foto de su gato Felix en tu página, coloca el archivo de imagen '' | ||
- | |||
- | <code html>< | ||
- | |||
- | >Existen todo tipo de cosas que puede hacer con la etiqueta ''< | ||
- | |||
- | ====Caracteres especiales==== | ||
- | |||
- | 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===== |