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:12] – [Listas] peron | html [2023/01/19 17:22] – peron | ||
|---|---|---|---|
| Línea 162: | Línea 162: | ||
| Muestran un listado ordenado numéricamente, | Muestran un listado ordenado numéricamente, | ||
| - | | + | |
| - | | + | |
| - | | + | |
| ==Listas Desordenadas== | ==Listas Desordenadas== | ||
| Línea 243: | 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 288: | 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===== | ||