HTML Avanzado

•

SIN SIGLA

Nathaly C. O. Gutiérrez

23/5/2024

¡Este material tiene más páginas!

Vista previa del material en texto

DOCUMENTO DE LECTURA
HTML AVANZADO

1
HTML avanzado
El presente documento tiene como finalidad dar a conocer contenidos avanzados sobre
el lenguaje HTML, iniciando con la organización de la información mediante listas
ordenadas y desordenadas, seguidamente se abordará la inserción de tablas y la
modificación a cada una de sus propiedades como lo es la combinación de filas y
columnas, para finalizar se introducirá en el diseño de elementos de formularios que
permitan recabar información de los usuarios, este último contenido es de suma
importancia para asignaturas venideras como programación web.
Listas en HTML
Las listas son de suma importancia para la organización de la información en las páginas
web, es por ello que en el desarrollo de esta unidad abordaremos 3 tipos de ellas listas
descriptivas, ordenadas y desordenadas.
Listas descriptivas
Las listas de tipos descriptivas permiten crear listas de términos con sus respectivas
descripciones, que es lo que habitualmente utilizamos en un glosario de términos o
diccionario, en el que tenemos una palabra y su respectivo significado. Para crear una
lista descriptiva debemos primeramente definir el elemento <dl> que agrupa los
términos de la lista actual, luego el elemento <dt> para cada termino y finalmente el
elemento <dd> para la definición de cada termino.
Para el siguiente ejemplo cree un directorio para un proyecto HTML, con la siguiente
estructura:

Seguidamente cree un archivo html en el programa Visual Studio Code, con el nombre
listas.html, y guárdelo en la carpeta principal (proyecto) del directorio creado en la
orientación anterior.

Inserte la estructura básica de html

Dentro de la etiqueta <article> inserte la etiqueta <dl>.

Seguidamente dentro de la etiqueta <dl> inserte la etiqueta <dt>, con el termino
HTML

Finalmente, siempre dentro de la etiqueta <dl> y seguido de la etiqueta <dt>, inserte
la etiqueta <dd> con la siguiente descripción “Hyper Text Markup Language (Lenguaje
de marcación de Hipertexto) “.

Resultado:

Observe que la etiqueta <dt> representa al término de la lista y la etiqueta <dd>
representa la descripción de dicho termino, colocada con una sangría a la derecha.
A continuación, vamos a insertar el termino CSS con la descripción “(Cascading Style
Sheets), en español «Hojas de estilo en cascada»”, como se muestra en la siguiente
imagen:

Observe la imagen e identifique que los elementos de las listas descriptivas
generalmente van de dos en dos, termino y descripción por cada elemento de la lista,

4
pero recuerda que un término puede tener muchas descripciones o bien, varios
términos tener una misma descripción.
Resultado:

Listas desordenadas
Las listas desordenadas de igual manera tienen la finalidad de organizar la información
de las páginas web, con varios estilos de viñetas que permite enlistar cualquier tipo de
elementos.
La etiqueta que agrupa los elementos de las listas desordenadas es <ul>, y cada uno
de los elementos de dicha lista se encierran en la etiqueta <li>.

En esta imagen se muestra la sintaxis de las listas desordenadas, donde se puede
observar que esta tiene 3 elementos.
Resultado:

Cabe mencionar que el estilo de las viñetas puede ser modificada con la propiedad type
en la etiqueta <ul>, por defecto se muestra de tipo “dics”, pero podemos utilizar
“square” y “circle”.

5
Sintaxis Resultado

Listas ordenadas
La principal característica de este tipo de lista es que sus elementos se muestran en
orden; para representar el orden tendremos elementos numéricos, es decir, cada uno
de los elementos irá precedido de un numero o letra que establezca su orden.
La etiqueta que agrupa los elementos de las listas ordenadas es <ol>, y de igual manera
que la listas desordenada los elementos se representan mediante la etiqueta <li>.
Siempre bajo el mismo ejemplo, observo la sintaxis de las listas ordenadas, donde es
evidente que la diferencia es la etiqueta que agrupa cada uno de los elementos de la
lista, <ul> para desordenadas y <ol> para ordenadas, la etiqueta <li> representa los
elementos de la lista para ambos casos.

6
Resultado:

Por defecto el orden de este tipo de listas se define de manera numérica.
El atributo type de la etiqueta <ol> permite definir el estilo de numeración de la lista
al colocar cualquiera de los caracteres (números enteros, romanos, letras mayúsculas y
minúsculas) que se muestran en la imagen.

Ejemplo:

Resultado:

El atributo start de la etiqueta <ol> permite definir el valor con el que iniciará la lista.

Resultado:

Para crear una lista en orden descendente se utiliza el atributo reversed en la etiqueta
<ol>.

Resultado:

Tablas HTML
Las tablas desde los principios de HTML han jugado un papel importante en el diseño
de páginas web, y aunque en la actualidad su implementación ha disminuido por los
cambios en la semántica de este lenguaje, su utilización sigue siendo importante para
la organización de la información.

8
Para comenzar el diseño de tablas en HTML primeramente conoceremos la estructura
de las mismas, luego aprenderemos a realizar combinaciones y divisiones de filas y
columnas en varias secciones, también conoceremos algunas propiedades CSS para el
tratamiento de la apariencia de las tablas.
La etiqueta principal para la construcción de tablas en HTML es <table>, esta encierra
cada una de las etiquetas necesarias para definición de las tablas.

Todas las tablas poseen una descripción o título relaciona al contenido que contienen,
en HTML la descripción de las tablas se define con la etiqueta <caption>, la que se
debe colocar a continuación de la etiqueta de apertura de la tabla.

Seguidamente de la descripción de la tabla debemos definir el encabezado de la misma
mediante la etiqueta <thead>, la que tiene la utilidad de agrupar la primera fila y sus
columnas.
La definición de filas y columnas es la principal acción a realizar en el tratamiento de
tablas en HTML, por ello es de suma importancia conocer su implementación; la
etiqueta <tr> permite crear una fila de la tabla, y dentro de esta con las etiquetas
<th> y <td> se crean las columnas de dicha fila, la primera permite definir las
columnas del encabezado y la segunda las columnas del cuerpo de la tabla
respectivamente.
A continuación, vamos a definir el encabezado de la tabla:

Observo la imagen e identifico los pasos para definir el encabezado de la tabla:
1. Inserto la etiqueta principal <html>
2. Seguidamente agrego la etiqueta <caption> para definir la descripción de la
tabla
3. Agrego el encabezado de la tabla mediante la etiqueta <thead>
4. Con la etiqueta <tr> defino la fila del encabezado
5. Y finalmente con la etiqueta <th> defino las columnas del encabezado.
Resultado:

Para observar mejor el resultado de la tabla vamos a agregarle bordes a la misma,
mediante la propiedad border en la etiqueta <table> con el valor “1”, el cual define el
grosor del borde.

10
Resultado:

A continuación, vamos a agregar el cuerpo de la tabla mediante la etiqueta <tbody>,
y dentro de esta las filas y columnas.
Importante:
1. <tr> </tr>: indica el comienzo y el final de una fila de la tabla.
2. <td> </td>: indica el inicio y el final de las columnas del cuerpo de la tabla.

Resultado:

Observe que la cantidad de columnas debe ser la misma en cada fila para evitar la
desproporción de la tabla.
Cabe mencionar que dentro de las columnas de la tabla se pueden agregar cualquier
tipo de elemento de HTML, entre ello imágenes. Audios, videos, textos, etc.

11
Las tablas al igual que la estructura de HTML tienen un pie, este se inserta con la etiqueta
<tfoot> seguidamente de la etiqueta <tr>, para lafila y <th> para las columnas.

Resultado:

Combinar filas y columnas
La etiqueta <td> tiene dos tipos de fusiones, estas permiten combinar filas y
columnas, las que se describen a continuación:
1. Con la propiedad colspan de la etiqueta <td> permite realizar fusiones
horizontalmente (columnas), el numero dentro de las comillas definen la
cantidad de columnas a combinar.

Al momento de combinar filas y columnas es muy importante tener en cuenta la
proporción de las misma, la cantidad de columnas o filas, por ejemplo, si te menos una
tabla 4X4,

Y deseamos combinar la columna “Dato 1” con “Datos 2” de la fila 2,

Notaremos que la columna “Dato 4” de la fila 2, se sale de la tabla por ello es
importante tomar en cuenta la proporción de la tabla.

En resumen, la fila 2 tiene 4 columnas al especificarle a la columna 1 que ocupe 2
espacios, ahora la fila contiene 5 columnas, 2 de la primera + los 3 restantes, es por
ello que la columna “Dato 4” se sale de las medidas 4x4 de la tabla.
Resultado:

La solución es simple, se necesita distribuir los datos de las primera dos columnas y
eliminar la columna 5 “Dato 4”, como se observa en la siguiente imagen.

Resultado:

2. Al igual que la propiedad anterior, rowspan pertenece a la etiqueta <td>, y esta
permite realizar fusiones verticalmente (filas); el numero dentro de las comillas
definen la cantidad de filas a combinar.
Dándole seguimiento al mismo ejemplo, pero en esta ocasión en función de trabajar
con la combinación de filas.

En este caso combinaremos “Dato 4” de la fila 3 y 4 de la tabla,

Para ello es necesario ubicarse en la columna “Dato 4” de la fila 3 y establecer a la
etiqueta <td> la propiedad rowspan con un valor de “2”.

Resultado:

Observe en la que ocurre el mismo problema de distribución que al combinar columnas,
para ello lo solucionamos de la misma manera eliminando la fila excedente.

Resultado:

15
Cellpadding y Cellspacing
Son los atributos que se utilizan en el formato de tabla, en realidad establece los
espacios en blanco en las celdas de la tabla. Estas son las propiedades significativas de
un documento web. La principal diferencia entre el relleno de celda y el espacio entre
celdas es que el relleno de celda se usa para corregir el ancho entre el borde de la celda
y su contenido. A la inversa, el espacio entre celdas establece el espacio entre las celdas
individuales.
El ancho de estos atributos se puede medir utilizando píxeles o porcentaje. Para ajustar
el espacio entre el texto y la pared de la celda rodeada, las celdas y las celdas dentro de
una etiqueta de tabla, se utilizan atributos como el relleno de celdas y el espacio de
celdas.
Definición de Cellpadding
El atributo que establece el espacio en una celda entre el contenido y el límite del
periférico se denomina relleno de celda. En otras palabras, la distancia entre el
contenido que rodea una celda y el límite de la celda se administra mediante el atributo
de relleno de celda. La unidad de esta distancia se puede implicar en píxeles o porcentaje
en HTML. El valor del atributo cellpadding también puede ser de valor 0, según la
necesidad de los usuarios. Se utiliza para separar el texto entre sí, lo que mejora la
apariencia

Definición de Cellspacing
El cellspacing es diferente al cellpadding. Controla la distancia entre celdas individuales
en una tabla. Al usar este atributo, los diseñadores podrían alterar fácilmente el espacio
entre los bordes de las diferentes celdas adyacentes. Mejora la claridad de la mesa. El
aumento en la cantidad de espacio de celdas aparentemente aumenta el borde de la
celda.

17
Enlaces
Lo que caracteriza a la web como medio de comunicación es la navegación por medio
de hipervínculos (links o enlaces). Esta conexión entre archivos permite al usuario elegir
el sentido de la navegación.
En el HTML los enlaces se marcan con la etiqueta <a></a> y el atributo principal es
href="" donde se escribe la ubicación del archivo de destino que puede estar en la
misma carpeta que el archivo que lo está llamando, en otra carpeta del mismo sitio o
en otro sitio web.
Entre las etiquetas <a href=""></a> se puede colocar cualquier elemento html que
funcionará como botón, generalmente se coloca un texto o una imagen. Si es un texto,
el navegador por defecto lo muestra en color azul y subrayado. Si es una imagen,
algunos navegadores especialmente las versiones anteriores a las actuales, le pueden
agregar un borde azul.
Rutas de enlaces:
Se llama ruta al valor que se escribe dentro del atributo href="" y se pueden clasificar
en dos tipos:
Rutas absolutas:
Las rutas absolutas son las que definen la ubicación completa de un archivo en la web
y empiezan desde http://nombredelsitio.com.ar/archivo.html (el archivo de destino
puede ser de cualquier extensión). Por ejemplo, si queremos vincular nuestro sitio con
Facebook, usaríamos una ruta absoluta y el código sería:
<a href="https://www.facebook.com/pagina">Estamos en Facebook</a>

18
Rutas relativas:
Las rutas relativas en cambio, definen la ubicación del archivo de destino en relación a
la ubicación del archivo que lo está llamando. Ejemplo: si el archivo index.html vincula
con quien-soy.html y están en la misma carpeta, el código sería asi:
<a href="quien-soy.html">Quién soy</a>.
Tipos de enlaces
Existen diferentes tipos de enlaces que detallo a continuación:
Enlaces internos entre archivos .html
Son los enlaces principales de un sitio. Si en el archivo index.html, queremos agregar
un vínculo a contacto.html el código sería así: <a
href="contacto.html">Contáctenos</a>. El texto que queda encerrado entre las
etiquetas <a> es lo que ve el usuario en color azul y subrayado.
Enlaces externos
Son los enlaces entre diferentes sitios web. Si queremos vincular un sitio web con
otro, tenemos que indicar la ruta absoluta del sitio escribiendo la url completa que
conviene copiarla del navegador. En este caso, es común usar el atributo target="" que
nos permite abrir el enlace en una pestaña nueva. Por ejemplo, si quisiera poner un
vínculo a Google y que éste abra en pestaña nueva, sería así:
<a href="http://google.com" target="_blank">Ir a Google</a>
Enlaces internos: anclas
Las anclas son enlaces hacia un punto determinado dentro de un html. Se usa en varios
casos, por ejemplo, en una página de preguntas frecuentes donde las respuestas están
desarrolladas debajo de las preguntas, o en Wikipedia, cuando el texto es extenso el

19
menú tiene vínculos con anclas. También en los textos largos, al finalizar muchas veces
se coloca un botón para subir. En los sitios de una sola página donde los botones en
realidad hacen scroll, esas son anclas.
El punto de destino tiene que estar marcado con el atributo id1="algo" y en el enlace
se coloca un # (numeral) seguido del nombre. Por ejemplo:
<a href="#respuesta4">Pregunta 4</a> "salta" a este párrafo: <p
id="respuesta4">acá está escrita la respuesta</p>
Abrir hipervínculo con una nueva ventana
¿Cómo puedo crear un enlace que abra una página en una nueva ventana del
navegador? Cuando los visitantes hacen clic en enlaces externos, tal vez no desee que
abandonen su sitio tan fácilmente.
Los desarrolladores Web utilizan un truco común que abre páginas externas en ventanas
de navegador separadas (o en una nueva pestaña, dependiendo de la configuración).
De esta forma, su sitio permanecerá abierto en la ventana original, asegurando que el
visitante no se olvidará de Usted. Para que esto funcione debe establecer otro atributo
en el elemento ancla: target (destino).
Veamos cómo:
<a href="paginadestino.html" target="_blank">Clic aquí</a>
El atributo target nombra el marco en el que un navegador debería mostrar la página
de destino. El valor de_blank indica que el enlace debe abrirse en una ventana nueva
del navegador.

1 Define un identificador único (ID) el cual no debe repetirse en todo el documento. Su propósito es
identificar el elemento al vincularlo (usando un identificador de fragmento).

20
A algunos les encanta esta función de nueva pestaña, mientras que otros piensan que
es un acto de intervención tremendamente molesta y que interrumpe. Si lo utiliza,
aplíquelo con moderación en algún enlace ocasional.

21
Bibliografía
Chuburu, L. ( 2018 ). Tipos de enlaces en HTML. Obtenido de
https://www.laurachuburu.com.ar/tutoriales/enlaces-html.php
Delgado, H. (2015). Enlaces HTML - Hipervínculos, links Etiqueta TAG a href. Obtenido de
https://disenowebakus.net/enlaces-hipervinculos-tag-ancla-html.php#creando-
enlaces-el-concepto-ancla

Listas en HTML
Listas descriptivas
Listas desordenadas
Listas ordenadas
Tablas HTML
Cellpadding y Cellspacing
Definición de Cellpadding
Definición de Cellspacing
Enlaces
Rutas de enlaces:
Rutas absolutas:
Rutas relativas:
Tipos de enlaces
Enlaces internos entre archivos .html
Enlaces externos
Enlaces internos: anclas
Bibliografía