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 03:14] – [Contenido HTML] peron | html [2023/01/19 17:22] – peron | ||
---|---|---|---|
Línea 82: | Línea 82: | ||
| ''< | | ''< | ||
- | | ''< | + | | ''< |
- | | ''< | + | | ''< |
| ''< | | ''< | ||
- | | ''< | + | | ''< |
- | | ''< | + | | ''< |
| ''< | | ''< | ||
| ''< | | ''< | ||
Línea 107: | Línea 107: | ||
</ | </ | ||
- | ===Divisiones=== | + | ¡Con esto ya has aprendido cómo otorgarle formato simple HTML a tu contenido |
- | El uso de de estas ''< | + | |
- | Crea una división específica con una etiqueta ''< | + | Veamos ahora en forma detenida cómo se utilizan las funciones de los principales tipos de etiquetas. |
- | <code html>< | + | ====Etiquetas de bloque==== |
- | Existen más atributos que podrás utilizar. Detallemos algunos. | + | La etiqueta ''< |
- | ===Listas=== | + | <code html> |
- | Las listas son una excelente manera de organizar la información en un documento HTML. HTML admite dos tipos de listas: | + | <p> |
+ | Este es un Párrafo | ||
+ | </ | ||
+ | </ | ||
- | * listas ordenadas | + | La etiqueta |
- | * listas desordenadas ''< | + | |
- | Las listas son un poco más complejas, ya que requieren dos conjuntos de etiquetas, '' | + | <code html>< |
- | Por ejemplo, podrás agregar esta información | + | La etiqueta ''< |
- | < | + | < |
- | | + | |
- | < | + | ====Contenedores semánticos==== |
- | <ul> | + | |
- | <li><u>Correo Electrónico</u>: fulana@texto-plano.xyz</li> | + | Al igual que las etiquetas anteriores, opcionalmente puedes utilizar // |
- | <li>< | + | |
- | | + | <code html> |
+ | <header>Texto de tu encabezado</header> | ||
+ | <section>Texto contenido en una sección</section> | ||
+ | <article>Texto de tu artículo</article> | ||
+ | <footer>Pie de página</footer> | ||
</ | </ | ||
+ | El '' | ||
- | ==== Enlaces ==== | + | >Un ejemplo: podrías tener una página con críticas de cine. Usar secciones para separar los distintos géneros (drama, policial, terror (mi preferido), musical) y luego usar los artículos para contener cada una de las críticas. |
- | Los enlaces son la característica definitoria del hipertexto. Podrás incular 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. | + | ====Listas==== |
+ | Las listas pueden estar ordenadas usando números consecutivos (también letras), o no-ordenadas (¿desordenadas? | ||
- | Para crear un enlace utiliza el par de etiquetas '' | + | <code html>< |
- | Modifica estas etiquetas con el atributo | + | ==Listas ordenadas== |
+ | Las listas ordenadas usan la etiqueta | ||
- | ===Vínculo interno en la página web=== | + | <code html> |
- | Primero intenta enlazar a una sección de la página web actual. Para lograrlo, primero debes contar con un ''< | + | < |
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Muestran un listado ordenado numéricamente, | ||
+ | |||
+ | - elemento 1 | ||
+ | - elemento 2 | ||
+ | - elemento n | ||
+ | |||
+ | ==Listas Desordenadas== | ||
+ | |||
+ | Las listas desordenadas se engloban utilizando las etiquetas | ||
<code html> | <code html> | ||
- | <div id="# | + | <ul> |
- | <h2>Contacto</h2> | + | <li>elemento 1</li> |
- | | + | <li>elemento 2</ |
- | < | + | <li>elemento n</ |
- | | + | </ul> |
- | <li>< | + | |
- | </ul> | + | |
</ | </ | ||
- | Ahora podrás vincular a esta sección '' | + | Muestran una viñeta o punto de enumeración en lugar de un número, de esta forma: |
- | <code html> | + | * elemento 1 |
+ | * elemento 2 | ||
+ | * elemento n | ||
- | Como ves, ''#'' | + | ====Etiquetas de formato==== |
+ | Son las que dicen cómo se mostrará el texto que encierran. | ||
- | También podrás definir otros vínculos útiles: incluso si no hubieses configurado ningún | + | ===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 'a' | ||
+ | |||
+ | 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 | ||
+ | |||
+ | <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 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===== |