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/19 17:09] – [Contenido HTML] peron | html [2023/01/19 17:22] – peron | ||
---|---|---|---|
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 249: | Línea 243: | ||
===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 290: | ||
- | -------------- | ||
- | |||
- | |||
- | |||
- | |||
- | ====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===== |