Documentos de Académico
Documentos de Profesional
Documentos de Cultura
14 - Guía HTML & Css
14 - Guía HTML & Css
PINTRODUCCIÓNP
El World Wide Web (WWW) es un sistema que contiene una cantidad de información casi infinita.
Pero esta información debe estar ordenada de alguna forma de manera que sea posible encontrar
lo que se busca. La unidad básica donde está almacenada esta información son las páginas Web.
Estas páginas se caracterizan por contener texto, imágenes, animaciones... e incluso sonido y
video.
Una de las características más importantes de las páginas Web es que son hipertexto. Esto quiere
decir que las páginas no son elementos aislados, sino que están unidas a otras mediante los links
o enlaces hipertexto. Gracias a estos enlaces el navegante de internet puede pulsar sobre un
texto de una página para navegar hasta otra página. Será cuestión del programador de la página
inicial decidir que palabras o frases serán activas y a donde nos conducirá pulsar sobre ellas.
¿QUÉ ES HTML?
Entendiendo que las páginas web son hipertexto, aquí es donde entra HTML. El Lenguaje de
Marcado de Hipertexto o Hyper Text Markup Language (HTML) es el lenguaje que se utiliza para
estructurar y desplegar una página web y sus contenidos respectivos. HTML es el lenguaje con el
que se escribe el contenido de las páginas web. Las páginas web pueden ser vistas por el usuario
mediante un tipo de aplicación llamada cliente web o más comúnmente "navegador". Podemos
decir por lo tanto que el HTML es el lenguaje usado para especificar el contenido que los
navegadores deben representar a la hora de mostrar una página web.
Este lenguaje nos permite aglutinar textos, imágenes, enlaces... y combinarlos a nuestro gusto. La
ventaja del HTML a la hora de representar el contenido en un navegador, con respecto a otros
formatos físicos como libros o revistas, es justamente la posibilidad de colocar referencias a otras
páginas, por medio de los enlaces hipertexto
1
Cuando nos referimos al contenido queremos indicar párrafos, imágenes, listas, tablas y todo
aquello que forma parte de "el qué". Nunca debemos usar HTML para definir cómo se debe de ver
un contenido, si el texto debe tener color rojo, con una fuente mayor, o si se debe alinear a la
derecha. Para especificar el aspecto que debe tener una web se usa un lenguaje complementario,
llamado CSS.
Existen etiquetas para crear negritas, párrafos, imágenes, tablas, listas, enlaces, etc. Así pues,
aprender HTML es básicamente aprenderse una serie de etiquetas, sus funciones, sus usos y
saber un poco sobre cómo debe de construirse un documento básico.
Es una tarea muy sencilla de afrontar, al alcance de cualquier persona, puesto que el lenguaje es
muy entendible para los seres humanos.
Si quieres especificar que se trata de un párrafo, podrías encerrar el texto con la etiqueta de
párrafo (<p>):
1. La etiqueta de apertura: consiste en el nombre de la etiqueta (en este caso, p), encerrado
por paréntesis angulares (< >) de apertura y cierre. Establece dónde comienza o empieza a
tener efecto la etiqueta, en este caso, dónde es el comienzo del párrafo.
2. La etiqueta de cierre: es igual que la etiqueta de apertura, excepto que incluye una barra
de cierre (/) antes del nombre de la etiqueta. Establece dónde termina la etiqueta, en este
caso dónde termina el párrafo.
2
ANIDAMIENTO DE ETIQUETAS
Puedes también colocar etiquetas dentro de otras etiquetas. Esto se llama anidamiento. Si, por
ejemplo, quieres resaltar una palabra del texto (en el ejemplo la palabra «muy»), podemos
encerrarla en una etiqueta <strong>, que significa que dicha palabra se debe enfatizar:
Debes asegurarte de que las etiquetas estén correctamente anidadas: en el ejemplo, creaste la
etiqueta de apertura del elemento <p> primero, luego la del elemento <strong>, por lo tanto, debes
cerrar esta etiqueta primero, y luego la de <p>.
Las etiquetas deben abrirse y cerrarse ordenadamente, de forma tal que se encuentren
claramente dentro o fuera el uno del otro. Si estos se encuentran solapados, el navegador web
tratará de adivinar lo que intentas decirle, pero puede que obtengas resultados inesperados.
Los elementos en bloque siempre empiezan en una nueva línea y ocupan todo el espacio
disponible hasta el final de la línea, mientras que los elementos en línea sólo ocupan el espacio
necesario para mostrar sus contenidos sin realizar saltos de línea.
Los documentos HTML van a ser archivos de texto con la extensión .html y tienen la siguiente
anatomía:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
3
Tienes:
• <body></body>: la etiqueta <body>. Encierra todo el contenido que deseas mostrar a los
usuarios web que visiten tu página, ya sea texto, imágenes, videos, juegos, pistas de audio
reproducibles, y demás. Estos, delimitados a su vez por otras etiquetas como las que
hemos visto.
En la actualidad, HTML define un total de 142 etiquetas. Sin embargo, una etiqueta por sí sola a
veces no contiene la suficiente información para estar completamente definida. Para ello
contamos con los atributos. Estos están compuestos de un par nombre-valor que se encuentran
separados por "=" y escritos en la etiqueta inicial de un elemento después del nombre del
elemento. El valor puede estar encerrado entre "comillas dobles" o 'simples'. Existen, también,
algunos atributos que afectan al elemento por su presencia en la etiqueta de inicio.
4
Donde:
Nota: las etiquetas <img> y <a> las veremos en mayor profundidad más adelante.
TIPOS DE ATRIBUTOS
Aunque cada una de las etiquetas HTML define sus propios atributos, encontramos algunos
comunes a muchas o casi todas las etiquetas, que se dividen en cuatro grupos según su
funcionalidad:
• Atributos básicos
• Atributos de internacionalización
• Atributos de eventos
• Atributos de foco
En esta guía solo vamos a ver los básicos. Ya que el resto de los atributos son para el uso de otro
lenguaje.
Atributos Básicos
Los atributos básicos se utilizan en la mayoría de las etiquetas HTML y XHTML, aunque adquieren
mayor sentido cuando se utilizan hojas de estilo en cascada (CSS):
Atributo Descripción
class="texto" Establece la clase CSS que se aplica a los estilos del elemento
Nota: los atributos de id, class y style los veremos en mayor profundidad en la parte de CSS.
5
PSINTAXIS HTMLP
En html existen ciertas reglas de sintaxis que aprenderemos a utilizar y diferenciar, para sacarle
mayor provecho al lenguaje y tener más herramientas como desarrolladores.
<br>
Nota: La etiqueta BR no tiene su correspondiente cierre. Es un detalle que quizás te haya llamado
la atención.
Formatear un texto pasa por tareas tan evidentes como definir los párrafos, justificarlos, introducir
viñetas, numeraciones o bien poner en negrita, itálica, etc.
Hemos visto que para definir los párrafos nos servimos de la etiqueta P que introduce un salto y
deja una línea en blanco antes de continuar con el resto del documento.
6
Podemos también usar la etiqueta <br>, de la cual no existe su cierre correspondiente, para
realizar un simple salto de línea con lo que no dejamos una línea en blanco, sino que solo
cambiamos de línea. Cabe destacar que la etiqueta <br>, no es la única etiqueta sin cierre.
Podes comprobar que cambiar de línea en nuestro documento HTML sin introducir alguna de
estas u otras etiquetas no implica en absoluto un cambio de línea en la página visualizada. En
realidad, el navegador introducirá el texto y no cambiará de línea a no ser que esta llegue a su fin
o bien lo especifiquemos con la etiqueta correspondiente.
Es importante tener muy en cuenta lo siguiente, que ya hemos comentado anteriormente. El HTML
se usa para definir el contenido. Por lo tanto, los atributos align que vamos a conocer a
continuación se estarían metiendo en una terreno que no le corresponde al HTML, porque están
definiendo la forma en la que un párrafo debe de representarse, su estilo, y no el contenido. Es
importante señalarlo para aprender que estas cosas se deben hacer mediante el lenguaje CSS,
que sirve para definir el estilo, la forma. Usamos este ejemplo también para reforzar el uso de los
atributos de una manera más práctica.
Como veis, en cada caso el atributo align toma determinados valores que son escritos entre
comillas. En algunas ocasiones necesitamos especificar algunos atributos para el correcto
funcionamiento de la etiqueta. En otros casos, el propio navegador toma un valor definido por
defecto. Para el caso de align, el valor por defecto es left.
PFORMATEO DE LETRAP
Además de todo lo relativo a la organización de los párrafos, uno de los aspectos primordiales del
formateo de un texto es el de la propia letra. Resulta muy común y práctico presentar texto
resaltado en negrita, itálica y otros. Todo esto y mucho más es posible por medio del HTML a
partir de multitud de etiquetas entre las cuales vamos a destacar algunas.
7
Pero antes de comenzar cabe hacer una reflexión sobre por qué son interesantes estas etiquetas
y se siguen usando, a pesar de que están entrando prácticamente en el terreno de CSS, ya que en
la práctica están directamente formateando el aspecto de las fuentes. Son importantes porque las
etiquetas en si no están para definir un estilo en concreto, sino una función de ciertas palabras
dentro de un contenido.
NEGRITA
Podemos escribir texto en negrita incluyéndolo dentro de las etiquetas strong y su cierre.
Recordemos que ya la habíamos visto previamente.
ITÁLICA
En este caso existen dos posibilidades, una corta: i y su cierre (italic) y otra un poco más larga: EM
y su cierre. En esta guía vamos a usar, y en la mayoría de las páginas que veréis por ahí, os
encontraréis con la primera forma sin duda más sencilla a escribir y a acordarse.
SUBRAYADO
El HTML nos propone también para el subrayado la etiqueta: U (underlined). Sin embargo, el uso
de subrayados ha de ser aplicado con mucha precaución dado que los enlaces hipertexto van, a
no ser que se indique lo contrario, subrayados con lo que podemos confundir al lector y apartarlo
del verdadero interés de nuestro texto.
Además, cabe decir que la etiqueta U se ha quedado obsoleta, debido a que es algo que
realmente se debe hacer del lado del CSS, al ser básicamente un estilo.
8
PENCABEZADOSP
Existen otras etiquetas para definir párrafos especiales, que funcionaran como títulos de nuestra
página. Son los encabezados o headings en inglés. Como decimos, son etiquetas que formatean
el texto como un título, pero el hecho de que cambien el formato no es lo que nos tiene que
preocupar, sino el significado en sí de la etiqueta. Es cierto que los navegadores asignan un
tamaño mayor de letra y colocan el texto en negrita, pero lo importante es que sirven para definir
la estructura del contenido de un documento HTML. Así los navegadores para ciegos podrán
informar a los invidentes que esta es una división nueva de contenido y que su título es este o
aquel. También los motores de búsqueda sabrán interpretar mejor el contenido de una página en
función de los títulos y subtítulos.
Hay varios tipos de encabezados, que se diferencian visualmente en el tamaño de la letra que
utilizan. La etiqueta en concreto es la H1, para los encabezados más grandes, H2 para los de
segundo nivel y así hasta H6 que es el encabezado más pequeño. Pero lo importante, insistimos
es la estructura que denotan. Una página tendrá generalmente un encabezado de nivel 1 y dentro
varios de nivel 2.
Luego, dentro de los H2 encontraremos si acaso H3, etc. Nunca debemos usar los encabezados
porque nos formateen el texto de una manera dada, sino porque nuestro documento lo requiera
según su estructura.
Los encabezados implican también una separación en párrafos, así que todo lo que escribamos
dentro de H1 y su cierre (o cualquier otro encabezado) se colocará en un párrafo independiente.
Los encabezados, como otras etiquetas de HTML, soportan el atributo align. Veremos un ejemplo
de encabezado de nivel 2 alineado al centro, aunque repetimos que esto debería hacerse en CSS.
9
Actividad: Presentación Personal – Parte1
Ya conocemos qué son las etiquetas y cómo se conforma un documento HTML. También
conocimos las etiquetas para realizar párrafos y encabezados. Pongamos esto en práctica con la
siguiente ejercitación:
1) Crear un archivo HTML. Para realizar esto, abriremos el editor Visual Studio Code (el IDE que
utilizaremos en este módulo) y localizaremos la barra de navegación que se haya en la parte
superior del programa. Iremos al apartado “File” y dentro de las opciones seleccionaremos
“New File”. Como se puede observar en la siguiente imagen:
Nota: Hay muchas formas de crear archivos HTML, esta es una. Lo importante para crear un
documento HTML en Visual Studio Code es nombrar el mismo con la extensión “.html” al final.
De esta manera, el editor reconoce que se trata de un documento html.
10
2) Crear estructura principal de un documento HTML. Utilizando un shortcut (atajo de teclado)
vamos a crear la estructura principal de nuestro documento. El shortcut es un signo de
exclamación “!” y seleccionaremos la primera opción como se puede ver en la siguiente
imagen.
3) Agregar etiquetas de texto. Ahora agrega al documento (dentro de la etiqueta <body>) los
siguientes elementos:
a) Guardar el documento. Puedes usar el shortcut ctrl + s o buscar la opción “Save” en las
opciones de “File” (primera opción de la barra de tareas).
11
Hasta el momento has aprendido
• Utilizar etiquetas.
PLISTAS EN HTMLP
Las posibilidades que nos ofrece el HTML en cuestión de tratamiento de texto son realmente
notables. No se limitan a lo visto hasta ahora, sino que van más lejos todavía. Varios ejemplos de
ello son las listas, que sirven para enumerar y definir elementos.
Las listas originalmente están pensadas para citar, enumerar y definir cosas a través de
características, o al menos así lo hacemos en la escritura de textos. Sin embargo, las listas
finalmente se utilizan para mucho más que enumerar una serie de puntos, en realidad son un
recurso muy interesante para poder maquetar elementos diversos, como barras de navegación,
pestañas etc.
Por ahora, trataremos las listas desde el punto de vista de su construcción y veremos los
diferentes tipos que existen, y que podemos utilizar para resolver nuestras distintas necesidades a
la hora de escribir textos en HTML.
• Listas desordenadas
• Listas ordenadas
LISTAS DESORDENADAS
Son delimitadas por las etiquetas UL y su cierre (unordered list). Cada uno de los elementos de la
lista es citado por medio de una etiqueta LI (list item).
<ul>
<li>Argentina</li>
<li>Perú</li>
<li>Chile</li>
</ul>
12
Esto renderizado (desplegado en la web) se vería así:
Tipos de viñetas
Podemos definir el tipo de viñeta empleada para cada elemento. Para ello debemos especificarlo
por medio del atributo type. Si queremos que el estilo sea válido para toda la lista lo incluiremos
dentro de la etiqueta de apertura UL, mientras que si queremos hacerlo específico a un solo
elemento lo incluiremos dentro de la etiqueta LI.
• circle
• disc
• square
<ul type="square">
<li>Elemento 1 </li>
<li>Elemento 2 </li>
<li>Elemento 3 </li>
</ul>
En este ejemplo nos encontramos con una lista desordenada donde uno de los elementos tiene
una viñeta cuadrada en lugar de un redondel como se específica para el resto de los elementos
en la etiqueta <ul>.
13
LISTAS ORDENADAS
Las listas ordenadas sirven también para presentar información en diversos elementos o items,
con la particularidad que éstos estarán precedidos de un número o una letra para enumerarlos
manteniendo un orden.
Para implementar listas ordenadas usaremos la etiqueta OL (ordered list) y su cierre. Cada
elemento será igualmente indicado por la etiqueta LI(list item), que ya vimos en las listas
desordenadas.
Tipo de numeración.
Del mismo modo que para las listas desordenadas, las listas ordenadas ofrecen la posibilidad de
modificar el estilo. En concreto nos es posible especificar el tipo de numeración empleado
eligiendo entre números (1, 2, 3, ...), letras (a, b, c, ...) y sus mayúsculas (A, B, C, ...) y números
romanos en sus versiones mayúsculas (I, II, III, ...) y minúsculas (i, ii, iii, ...).
Para realizar dicha selección hemos de utilizar, como para el caso precedente, el atributo type, el
cual será situado dentro de la etiqueta OL.
Puede que en algún caso deseemos comenzar nuestra enumeración por un número o letra que no
tiene por qué ser necesariamente el primero de todos. Para solventar esta situación, podemos
utilizar un segundo atributo, start, que tendrá como valor un número. Este número, que por
defecto es 1, corresponde al valor a partir del cual comenzamos a definir nuestra lista. Para el caso
de las letras o los números romanos, el navegador se encarga de hacer la traducción del número
a la letra correspondiente.
14
<p> Ordenamos por números </p>
<ol type="1">
<li> Elemento 1 </li>
<li> Elemento 2 </li>
</ol>
<p> Ordenamos por letras </p>
<ol type="a">
<li> Elemento a </li>
<li> Elemento b </li>
</ol>
<p>Ordenamos por números romanos empezando por el 10</p>
<ol type="i" start="10">
<li> Elemento x </li>
<li> Elemento xi </li>
</ol>
Esto en una página se vería así:
15
ANIDANDO LISTAS
Nada nos impide utilizar todas estas etiquetas de forma anidada como hemos visto en otros casos.
De esta forma, podemos conseguir listas mixtas.
<ul>
<li>Argentina </li>
<ol>
<li>Bariloche </li>
</ol>
<li>Uruguay </li>
<ol>
<li>Montevideo </li>
</ol>
</ul>
16
Actividad: Presentación Personal – Parte 2
2) Implementar listas desordenadas. Luego crea una lista y agrega tus principales aptitudes
(por ejemplo: asertividad, trabajo en equipo, escucha activa, entre otros).
4) Implementar listas ordenadas. Debajo del encabezado enumera las tecnologías que
conoces y has aprendido en este curso. (Java, MySQL, HTML entre otras).
PENLACES EN HTMLP
Hasta aquí, hemos podido ver que una página web es un archivo HTML en el que podemos incluir,
entre otras cosas, textos formateados a nuestro gusto e imágenes (las veremos con detalle
enseguida). Del mismo modo, un sitio web podrá ser considerado como el conjunto de archivos,
principalmente páginas HTML e imágenes, que constituyen el contenido al que el navegante tiene
acceso.
17
Un enlace puede ser fácilmente detectado por el usuario en una página. Basta con deslizar el
puntero del ratón sobre las imágenes o el texto y ver cómo cambia su forma original
transformándose por regla general en una mano con un dedo señalador.
Adicionalmente, estos enlaces suelen ir, en el caso de los textos, coloreados y subrayados para
que el usuario no tenga dificultad en reconocerlos.
SINTAXIS DE UN ENLACE
Para colocar un enlace, nos serviremos de las etiquetas <a> y su cierre. Dentro de la etiqueta de
apertura deberemos especificar asimismo el destino del enlace. Este destino será introducido bajo
forma de atributo, el cual lleva por nombre "href".
<a href="destino">contenido</a>
Siendo el "contenido" un texto o una imagen. Es la parte de la página que se colocará activa y
donde deberemos pulsar para acceder al enlace. Por su parte, "destino" será una página, un
correo electrónico o un archivo.
Ahora, si queremos que el contenido del enlace sea una imagen y no un texto, deberemos colocar
la correspondiente etiqueta <img> dentro de la etiqueta a.
18
TIPOS DE ENLACES
Para estudiar en profundidad los enlaces tenemos que clasificarlos por su tipo, ya que,
dependiendo del mismo, algunas características pueden cambiar.
En función del destino los enlaces son clásicamente agrupados del siguiente modo:
• Enlaces locales: los que se dirigen a otras páginas del mismo sitio web.
• Enlaces remotos: los dirigidos hacia páginas de otros sitios web. Estos son los que vimos
en el ejemplo anterior.
ENLACES LOCALES
Como hemos dicho, un sitio web está constituido de páginas interconectadas, que se relacionan
mediante enlaces de hipertexto. Para cumplir con esto es que vamos a utilizar los enlaces locales.
Los enlaces locales se tratan de un tipo de enlace mucho más común en el día a día del
desarrollo. De hecho, es el tipo de enlace que más se produce en general. Estos enlaces locales
nos permiten relacionar distintos documentos HTML que componen un sitio web. Gracias a los
enlaces locales podremos convertir varias páginas sueltas en un sitio web completo, compuesto
de varios documentos.
Para crear este tipo de enlaces, hemos de usar la misma etiqueta <a> que ya conocemos, de la
siguiente forma:
<a href="archivo.html">contenido</a>
Como rutas nos referimos al destino del enlace, o sea, lo que ponemos en el atributo "href" y es
importante que nos paremos aquí porque nos puede dar algunos problemas al desarrollar.
Principalmente para aquellas personas que tengan menos experiencia en el trabajo con el
ordenador.
Por regla general, para una mejor organización, los sitios suelen estar ordenados por directorios.
Estos directorios suelen contener diferentes secciones de la página como imágenes, scripts,
estilos, etc. Es por ello que en muchos casos no nos valdrá con especificar el nombre del archivo,
sino que tendremos que especificar además el directorio en el que nuestro archivo.html está
alojado.
Para aquellos que no saben cómo mostrar el camino de un archivo, aquí van una serie de
indicaciones que los ayudaran a comprender la forma de expresarlos.
1) Hay que situarse mentalmente en el directorio en el que se encuentra la página donde vamos
a crear el enlace.
2) Si la página destino está en el mismo directorio que el archivo desde donde vamos a enlazar
podemos colocar simplemente el nombre del archivo de destino, ya que no hay necesidad de
cambiar de directorio.
3) Si la página de destino está en una carpeta o subdirectorio interior al directorio donde está el
archivo de origen, hemos de marcar la ruta enumerando cada uno de los directorios por los
que pasamos hasta llegar al archivo de destino. Separándolos por el símbolo barra "/". Al final
obviamente, escribimos el nombre del archivo destino.
19
4) Si la página destino se encuentra en un directorio padre (superior al de la página del enlace),
hemos de escribir dos puntos y una barra "../" tantas veces como niveles subamos en la
arborescencia hasta dar con el directorio donde está emplazado el archivo destino.
Finalmente, también agregaremos el nombre del archivo destino
Nota: puede parecer complicado en la lectura. Pero te aseguramos que cuando empieces a
practicarlo vas a comprenderlo mejor. Recuerda que siempre que tengas alguna duda puedes
volver a este material y releer la información.
Imagina que tienes la siguiente estructura de carpetas y archivos. La que aparece en la siguiente
imagen.
20
Actividad: Presentación Personal - Enlaces
Seguimos con la actividad Presentación Personal. En este caso agregaremos 2 enlaces a nuestra
página.
1) Agregar un enlace externo sobre un texto. Agrega un enlace externo con dirección a tu
LinkedIn personal (si no tienes puede ser al home page de LinkedIn) bajo el texto
“LinkedIn Personal”.
PIMÁGENES EN HTMLP
Sin duda uno de los aspectos más vistosos y atractivos de las páginas web es el grafismo. La
incorporación de imágenes en nuestros textos puede ayudarnos a explicar más fácilmente los
objetivos y organizar la información al tiempo que se le da un aire más estético a nuestra web. No
obstante, su uso en exceso puede conducirnos a una sobrecarga que se traduce en una
distracción para el navegante, quien tendrá más dificultad en encontrar la información necesaria.
El uso de imágenes también tiene que ser realizado con cuidado porque aumentan el tiempo de
carga de la página, lo que puede ser un efecto nefasto si nuestro visitante no tiene una buena
conexión o si es un poco impaciente. Por ello es recomendable siempre optimizar las imágenes
para Internet, haciendo que su tamaño en bytes sea lo mínimo posible, para facilitar la descarga,
pero sin que ello comprometa mucho su calidad.
En esta guía no explicaremos como crear ni tratar las imágenes, únicamente diremos que para ello
se utilizan aplicaciones como Paint Shop Pro, Photoshop o Gimp. Tampoco explicaremos las
particularidades de cada tipo de archivo: GIF, JPG o PNG y la forma de optimizar nuestras
imágenes.
La etiqueta que utilizaremos para insertar una imagen es <img> (image). Esta etiqueta no posee su
cierre correspondiente y en ella hemos de especificar obligatoriamente el paradero de nuestro
archivo gráfico mediante el atributo src (source).
<img src="camino_hacia_el_archivo.jpg">
Para expresar el camino, lo haremos de la misma forma que vimos para los enlaces. Las reglas
siguen siendo las mismas, lo único que cambia es que, en lugar de una página siendo el destino,
el destino es un archivo gráfico. En el código anterior estamos enlazando un archivo con
extensión .jpg, pero podrá ser otro tipo de archivo como .gif o .png.
Aparte de este atributo, indispensable para la visualización de la imagen, la etiqueta IMG nos
propone otra serie de atributos de mayor o menor utilidad, que listamos a continuación:
21
ATRIBUTO ALT
Dentro de las comillas de este atributo colocaremos una breve descripción de la imagen. Esta
etiqueta no es indispensable, pero presenta varias utilidades. La sintaxis quedaría de esta manera:
Otra utilidad importante la encontramos en determinadas aplicaciones, usadas por personas con
discapacidad. Navegadores para gente con discapacidad visual, por ejemplo, no muestran las
imágenes y por tanto los alt ofrecen la posibilidad de leerlas. Nunca está de más pensar en crear
páginas accesibles.
Por último, durante el proceso de carga de la página y cuando la imagen no ha sido todavía
cargada, el navegador podría mostrar esta descripción, con lo que el navegante se puede hacer
una idea de lo que va en ese lugar. Si hubo problemas de conexión y no se pudo mostrar la
imagen, también podría usarse ese alt para mostrar al menos su descripción.
En general podemos considerar como aconsejable el uso de este atributo, salvo para imágenes
de poca importancia. Si la imagen es usada como cuerpo de un enlace todavía se hace más
indispensable.
El problema de hacer esto en ciertos navegadores es que se crea un borde en la imagen, del
mismo color que el color configurado para los enlaces, lo que suele ser un efecto poco deseado.
Sin embargo, en HTML podemos indicar que una imagen tenga borde. Mediante el atributo
"border" se define el tamaño en píxeles del cuadro que rodea la imagen. De esta forma podemos
recuadrar nuestra imagen si lo deseamos. No es algo que se use mucho, pero resulta
particularmente útil cuando deseamos eliminar el borde que aparece cuando la imagen sirve de
enlace. En dicho caso tendremos que especificar border="0".
Ahora que sabemos utilizar la etiqueta <img> y sus atributos básicos, lo incluyamos en nuestra
página.
1) Agregar una imagen. Debajo del encabezado con nuestro nombre, pondremos una
imagen nuestra que tengamos en nuestro ordenador.
2) Agregar un enlace externo sobre una imagen. Al final de la página agrega una imagen de
un personaje de películas o series que te guste con un enlace a un recurso que lo
represente puede ser: un video de YouTube, alguna web, algún recurso de Netflix ¡lo que
prefieras!
22
Revisemos lo aprendido hasta aquí
PTABLAS EN HTMLP
Una tabla es un conjunto de celdas organizadas dentro de las cuales podemos alojar distintos
contenidos. HTML dispone de una gran variedad de etiquetas para crear tablas, con sus atributos.
Como veremos a continuación, existen diversas etiquetas que se deben utilizar en una forma
determinada para la creación de tablas. Por ello, puede que en un principio nos resulte un poco
complicado trabajar con estas estructuras, pero con un poco de práctica podremos crear tablas
con absoluta soltura.
Si deseamos mostrar datos de una manera sencilla de leer, dispuestos en filas y columnas, tarde o
temprano observaremos que las tablas son la mejor solución y apreciaremos las posibilidades nos
ofrecen.
Dentro de estas dos etiquetas colocaremos todas las otras etiquetas de las tablas, hasta llegar a
las celdas. Dentro de las celdas ya es permitido colocar textos e imágenes que darán el contenido
a la tabla.
Las tablas son descritas por líneas de arriba a abajo (y luego por filas de izquierda a derecha).
Cada una de estas líneas, llamadas columnas, es definida por otra etiqueta y su cierre: <tr> (table
row: columna de tabla).
Asimismo, dentro de cada línea, habrá diferentes celdas. Cada una de estas celdas será definida
por otra etiqueta: <td> (table data). Dentro de ésta y su cierre será donde coloquemos nuestro
contenido, el contenido de cada celda.
23
<table>
<tr>
<td> Celda 1, línea 1 </td>
<td> Celda 2, línea 1 </td>
</tr>
<tr>
<td> Celda 1, línea 2 </td>
<td> Celda 2, línea 2 </td>
</tr>
</table>
Esto en una página se vería así:
También existe la etiqueta <th> (table header), que sirve para crear una celda cuyo contenido esté
formateado como un título o cabecera de la tabla. En la práctica, lo que hace es poner en negrita y
centrado el contenido de esa celda.
<table>
<tr>
<th>Titulo Celda 1</th>
<th> Titulo Celda 2</th>
</tr>
<tr>
<td>Celda 1, línea 1</td>
<td> Celda 2, línea 1</td>
</tr>
<tr>
<td> Celda 1, línea 2</td>
<td> Celda 2, línea 2</td>
</tr>
</table>
24
Esto en una página se vería así:
PFORMULARIOS HTMLP
Hasta ahora hemos visto la forma en la que el HTML gestiona y muestra la información,
esencialmente mediante texto, imágenes y enlaces. Nos queda por ver de qué forma podemos
intercambiar información con nuestro visitante. Desde luego, este nuevo aspecto resulta
primordial para gran cantidad de acciones que se pueden llevar a cabo mediante la Web: comprar
un artículo, rellenar una encuesta, enviar un comentario al autor, registrar un usuario, etc.
Los formularios son esas famosas cajas de texto y botones que podemos encontrar en muchas
páginas web. Son muy utilizados para realizar búsquedas o bien para introducir datos personales
por ejemplo en sitios de comercio electrónico. Los datos que el usuario introduce en estos
campos son enviados al correo electrónico del administrador del formulario o bien a un programa
que se encarga de procesarlo automáticamente. Nosotros en esta guía no vamos a mostrar como
enviar la información al mail, ya que nos interesa, más adelante poder manejar esa información.
Pero para todo lo que sea manejar esa información y guardarla, por ejemplo, en una base de
datos vamos a tener que utilizar Java. Como lo veremos más adelante en el curso.
Así pues, en resumen, con HTML podremos construir los formularios, con diversos tipos de
campos, como cajas de texto, botones de radio, cajas de selección, menús desplegables, etc. Sin
embargo, debe quedar claro que desde HTML no se puede manejar esta información para
guardarla o enviarla a algún correo, etc. Eso será trabajo de Java.
25
¿CÓMO HACER UN FORMULARIO EN HTML?
Los formularios son definidos por medio de las etiquetas <form> y su cierre. Entre estas dos
etiquetas colocaremos todos los campos y botones que componen el formulario. Dentro de esta
etiqueta <form> debemos especificar algunos atributos:
action: define el tipo de acción a llevar a cabo con el formulario. Como ya hemos dicho, existen
dos posibilidades:
• El formulario es enviado a una dirección de correo electrónico. Para esto hay que poner el
mail en el action.
method: Este atributo se encarga de especificar la forma en la que el formulario es enviado. Los
dos valores posibles que puede tomar este atributo son POST y GET. A efectos prácticos y, salvo
que se diga lo contrario, daremos siempre el valor POST.
enctype: Se utiliza para indicar la forma en la que viajará la información que se mande por el
formulario. En el caso más corriente, enviar el formulario por correo electrónico, el valor de este
atributo debe de ser "text/plain". Así conseguimos que se envíe el contenido del formulario como
texto plano dentro del email. Si fuéramos a enviar una imagen dentro del formulario, este atributo
debería ser “multipart/form-data”. También todos estos conceptos vamos a detallarlos más
adelante.
Nota: Este último atributo no es indispensable. Sin embargo, si quisiéramos guardar la información
de nuestro formulario en Java, requeriremos indispensablemente de los primeros dos atributos.
Estos conceptos los abordaremos y profundizaremos en otro módulo.
Entonces con todo lo anterior ya explicado, la etiqueta <form> con los atributos nos quedaría así:
</form>
Entre esta etiqueta y su cierre colocaremos el resto de las etiquetas que darán forma a nuestro
formulario.
26
PCAMPOS DE TEXTOP
El lenguaje HTML nos propone una gran diversidad de alternativas a la hora de crear nuestros
formularios, es decir, una gran variedad de elementos para diferentes propósitos. Estas van desde
la clásica caja de texto, hasta la lista de opciones en un menú desplegable, pasando por las cajas
de validación, etc.
Las etiquetas que tenemos que utilizar para crear campos de texto, pueden ser de dos tipos.
Veamos en qué consiste cada una de estas modalidades y cómo podemos implementarlas en
nuestro formulario.
ETIQUETA INPUT
Las cajas de texto son colocadas por medio de la etiqueta <input>. Dentro de esta etiqueta hemos
de especificar el valor de dos atributos: type y name.
De este modo expresamos nuestro deseo de crear una caja de texto cuyo contenido será llamado
"nombre" (por ejemplo, en el caso de la etiqueta anterior, pero podemos poner distintos nombres
a cada uno de los campos de texto que habrá en los formularios).
ATRIBUTO TYPE
Como hemos visto el atributo type nos sirve para especificar el tipo de dato que se va a ingresar
en nuestro input, en el ejemplo anterior lo habíamos puesto como tipo text, para que sea una caja
de texto y poder ingresar texto. Pero existen otros tipos de valores para el atributo type
NUMBER
Este tipo permite al usuario ingresar números. Los navegadores vienen con validaciones para
evitar que el usuario ingrese algo que no sea números. Además, en los navegadores modernos,
los campos numéricos suelen venir con controles que permiten a los usuarios cambiar su valor de
forma gráfica.
<input type="number">
Se vería así:
DATE
Este le permite al usuario ingresar una fecha, ya sea mediante una caja de texto o una interfaz
gráfica con selector de fecha.
<input type="date">
27
Se vería así:
Este tipo permite al usuario ingresar un mail. Los navegadores vienen con validaciones para
validar que se esté ingresando con el formato correcto de un mail. Este input se va a ver como un
input de texto común y corriente.
<input type="email">
TEXTO OCULTO
Hay determinados casos en los que podemos desear esconder el texto escrito en el campo input,
por medio de círculos negros, de manera que aporte una cierta confidencialidad. Para esto vamos
a usar el type password.
<input type="password">
Se vería así:
Más adelante veremos otros valores para el atributo type con otras utilidades.
ATRIBUTO NAME
Veamos de nuevo el ejemplo del principio:
En este ejemplo creamos una caja de texto cuyo contenido será llamado "nombre”, elegimos
nombre, pero podemos darle el valor que queramos.
El nombre del elemento del formulario es de gran importancia para poder identificarlo en nuestro
programa de procesamiento (Java).
28
ATRIBUTOS PRESCINDIBLES.
Además de estos dos atributos, esenciales para el correcto funcionamiento de nuestra etiqueta,
existen otra serie de atributos que pueden resultarnos de utilidad pero que no son
imprescindibles:
size: define el tamaño de la caja de texto, en número de caracteres visibles. Si al escribir el usuario
llega al final de la caja, el texto que escriba a continuación también cabrá dentro del campo, pero
irá corriéndose a medida que se escribe, haciendo desaparecer la parte de texto que queda a la
izquierda.
maxlength: indica el tamaño máximo del texto, en número de caracteres, que puede ser escrito en
el campo. En caso de que el campo de texto tenga definido el atributo maxlength, el navegador no
permitirá escribir más caracteres en ese campo que los que hayamos indicado.
value: en algunos casos puede resultarnos interesante asignar un valor predefinido al campo en
cuestión. Esto puede ayudar al usuario a rellenar más rápidamente el formulario o darle alguna
idea sobre la naturaleza de datos que se requieren. Este valor inicial del campo puede ser
expresado mediante el atributo value.
placeholder: este atributo especifica una pequeña pista que describe el valor esperado para el
campo (input).
Nota: recordemos que todos estos ejemplos de input deben ir entre las etiquetas de apertura y de
cierre form.
<form>
</form>
29
ETIQUETA TEXTAREA PARA TEXTO LARGO
Si deseamos poner a disposición del usuario un campo de texto donde pueda escribir
cómodamente sobre un espacio compuesto de varias líneas, hemos de invocar una nueva
etiqueta: <textarea> y su cierre correspondiente.
Este tipo de campos son prácticos cuando el contenido a enviar no es un nombre, teléfono, edad
o cualquier otro dato breve, sino más bien, un comentario, opinión, etc. En los que existe la
posibilidad de que el usuario desee rellenar varias líneas.
Dentro de la etiqueta textarea deberemos indicar, como para el caso visto anteriormente, el
atributo name para asociar el contenido a un nombre que será asemejado a una variable en un
lenguaje de programación. Además, podemos definir las dimensiones del campo a partir de los
atributos siguientes:
El resultado es el siguiente:
Asimismo, es posible predefinir el contenido del campo. Para ello, no usaremos el atributo value,
sino que escribiremos dentro de la etiqueta el contenido que deseamos atribuirle.
30
ETIQUETA LABEL
El elemento <label> y su etiqueta de cierre, provee una descripción corta que acompaña al campo
de texto. Su función es indicarle al usuario que información debería ingresar en el campo o input.
También podemos asociar una etiqueta label a un campo para que el usuario pueda acceder al
campo de texto con solo clickear el label.
También podríamos poner un salto de línea para que el label quede arriba del input, si lo
quisiéramos.
Atributo for
La etiqueta label solo consta del atributo for. Mediante la utilización del atributo for podemos
asociar el label con el input. Para lograr esto vamos a tener que utilizar también el atributo id, este
atributo lo explicamos previamente y lo vamos a ver más en detalle en la parte de CSS.
El label y el input se verán igual pero ahora cuando el usuario clickee el label, se va a activar el
campo de texto del input para poder ingresar el valor que el usuario necesite. Después vamos a
ver un ejemplo más útil con las cajas de opciones.
31
OTROS ELEMENTOS DE FORMULARIOS
Seguramente hayan notado que los inputs son una manera muy practica de hacernos llegar la
información del navegante. No obstante, en muchos casos, permitir al usuario que escriba
cualquier texto permite demasiada libertad y puede que la información que éste escriba no sea la
que nosotros estamos necesitando.
Por ejemplo, pensemos que queremos que el usuario indique su país de residencia. En ese caso
podríamos ofrecer una lista de países para que seleccione el que sea. Este mismo caso se puede
aplicar a gran variedad de informaciones, como el tipo de tarjeta de crédito para un pago, la
puntuación que da a un recurso, si quiere recibir o no un boletín de novedades, etc...
Este tipo de opciones predefinidas por nosotros pueden ser expresadas por medio de diferentes
campos de formulario. Veamos a continuación cuales son:
LISTAS DE OPCIONES
Las listas de opciones son ese tipo de menús desplegables que nos permiten elegir una (o varias)
de las múltiples opciones que nos proponen. Para construirlas emplearemos una etiqueta
SELECT, con su respectivo cierre.
Como para los casos ya vistos, dentro de esta etiqueta definiremos su nombre por medio del
atributo name. Cada opción será incluida en una línea precedida de la etiqueta OPTION.
Podemos ver, a partir de estas explicaciones, la forma más típica y sencilla de esta etiqueta:
<select name="estacion">
<option>Primavera</option>
<option>Verano</option>
<option>Otoño</option>
<option>Invierno</option>
</select>
32
Atributos para la etiqueta select
Esta estructura puede verse modificada principalmente a partir de otros dos atributos:
size: indica el número de valores mostrados a la vez en la lista. Lo típico es que no se incluya
ningún valor en el atributo size, en ese caso tendremos un campo de opciones desplegable, pero
si indicamos un valor para el atributo size aparecerá un campo donde veremos las opciones
definidas por size y el resto podrán ser vistos por medio de la barra lateral de desplazamiento.
multiple: permite la selección de más elementos de la lista. Este atributo se expresa sin valor
alguno, es decir, no se utiliza con el igual, simplemente se pone para conseguir el efecto, o no se
pone si queremos una lista desplegable común.
<option>Primavera</option>
<option>Verano</option>
<option>Otoño</option>
<option>Invierno</option>
</select>
Vemos que se pueden seleccionar múltiples opciones (en este caso, "Primavera" y "Verano") y que
además sólo son visibles 3 opciones.
La etiqueta <option> puede asimismo ser modificada por medio de otro atributo.
selected: del mismo modo que multiple, este atributo no toma ningún valor, sino que simplemente
indica que la opción que lo presenta esta elegida por defecto.
<option selected>Otoño</option>
33
BOTONES DE RADIO
Existe otra alternativa para plantear una elección, en este caso, obligamos al usuario a elegir
únicamente una de las opciones que se le proponen.
La etiqueta empleada en este caso es <input> en la cual usaremos el atributo type con el valor
radio. Este atributo colocara una casilla pinchable al lado del valor del input.
En este tipo de input para elegir una opción debemos tocar en la casilla clickeable, pero habíamos
explicado previamente en la etiqueta label, que podíamos hacer que la etiqueta label al clickearla
se active la caja de texto del input. Ahora, podemos usar eso para que cuando el usuario clickee la
palabra primavera se seleccione esa opción. Esto se vería así:
<label for="primavera">Primavera</label>
<br>
<label for="verano">Verano</label>
<br>
<label for="otonio">Otoño</label>
<br>
<label for="invierno">Invierno</label>
34
Esto en la página se verá igual que el anterior:
La única diferencia va a ser que el usuario va a poder clickear el nombre de la estación que quiere
para seleccionar esa opción, además de poder clickear la casilla.
CAJAS DE VALIDACIÓN
Este tipo de elementos pueden ser activados o desactivados por el visitante por un simple click
sobre la caja en cuestión. Para esto vamos a usar la etiqueta INPUT con el valor checkbox en el
atributo type.
35
PBOTONESP
Ha llegado el momento de explicar cómo podemos hacer un botón para provocar el envío del
formulario, entre otras cosas.
<button type="submit">Enviar</button>
Como puede verse, tan solo hemos de especificar que se trata de un botón de envío
(type="submit") y hemos de definir el mensaje que queremos que aparezca escrito en el botón.
<button type="reset">Borrar</button>
A diferencia del botón de envío, indispensable en cualquier formulario, el botón de borrado resulta
meramente optativo y no es utilizado frecuentemente. Hay que tener cuidado de no ponerlo muy
cerca del botón de envío y de distinguir claramente el uno del otro, para que ningún usuario borre
el contenido del formulario que acaba de rellenar por error.
BOTONES NORMALES
Dentro de los formularios también podemos colocar botones normales, pulsables como cualquier
otro botón. Estos botones por si solos no tienen mucha utilidad, pero podremos necesitarlos para
realizar acciones en el futuro. Su sintaxis es la siguiente:
<button type="button">Borrar</button>
36
He aquí un ejemplo:
Esta etiqueta, incluida dentro de nuestro formulario, enviara un dato adicional al programa
encargado de la gestión del formulario.
Ya hemos visto todo lo respectivo a formularios. Pasemos ahora a ejemplificar todo lo aprendido a
partir de la creación de un formulario.
Si tienes alguna duda, te recomendamos complementar el aprendizaje con los videos respectivos.
<select name="pais">
<option>Argentina</option>
<option>Brasil</option>
<option>Chile</option>
<option>Uruguay</option>
</select>
<br>
<button type="submit">Enviar</button>
<button type="reset">Borrar</button>
37
Este formulario se verá así:
PSECCIONES EN HTMLP
Las páginas web se trabajan con lo que se conoce como un esquema. El esquema (outline) de una
página web es un índice de los apartados de una página web que muestra la relación de jerarquía
entre los diferentes apartados y subapartados. El concepto de esquema se formalizó en HTML 5
con más precisión que en HTML 4 / XHTML 1 y explica algunas características y formas de
utilización de las etiquetas de secciones y bloques de contenido.
En relación con esto se pensó que las páginas de HTML se pueden dividir en secciones y en
HTML 5 se introdujo una serié de etiquetas que nos van a ayudar con la división de nuestra página
en secciones. Dentro de cada sección van a haber más etiquetas, esto es simplemente para que
podemos tener un índice de los apartados de la página web.
38
La página dividida en secciones con sus respectivas etiquetas se ve así:
<section>: se utiliza para representar una sección "general" dentro de un documento o aplicación,
como un capítulo de un libro. Puede contener subsecciones y si lo acompañamos de h1-h6
podemos estructurar mejor toda la página creando jerarquías del contenido, algo muy favorable
para el buen posicionamiento web.
<article>: representa un componente de una página que consiste en una composición autónoma
en un documento, página, aplicación, o sitio web con la intención de que pueda ser reutilizado y
repetido.
<aside>: representa una sección de la página que abarca un contenido relacionado con el
contenido que lo rodea, por lo que se le puede considerar un contenido independiente. Este
elemento puede utilizarse para efectos tipográficos, barras laterales, elementos publicitarios u otro
contenido que se considere separado del contenido principal de la página.
39
<header>: representa un grupo de artículos introductorios o de navegación. Está destinado a
contener por lo general la cabecera de la sección (un elemento h1-h6 o un elemento hgroup).
<nav>: representa una sección de una página que enlaza a otras páginas o a otras partes dentro
de la página. No todos los grupos de enlaces en una página necesita estar en un elemento nav,
sólo las secciones que constan de bloques de navegación principales son apropiadas para el
elemento de navegación.
<footer>: representa el pie de una sección, con información acerca de la página/sección que poco
tiene que ver con el contenido de la página, como el autor, el copyright o el año.
PETIQUETAS EXTRASP
En este apartado que va a ser el último de nuestra parte de HTML vamos a ver unas etiquetas que
no hemos visto todavía y que son importantes.
ETIQUETA DIV
La etiqueta div se conoce como etiqueta de división. Esta etiqueta se usa en HTML para hacer
divisiones de contenido en la página web como (texto, imágenes, encabezado, pie de página,
barra de navegación, etc.). La etiqueta div tiene etiquetas de apertura (<div>) y de cierre (</div>) y
es obligatorio cerrar la etiqueta. Div es la etiqueta más útil en el desarrollo web porque nos ayuda
a separar datos en la página web y podemos crear una sección particular para datos o funciones
particulares en las páginas web. Cabe aclarar que la etiqueta div genera un salto de línea.
• Se utiliza para agrupar varias etiquetas de HTML para que se puedan crear secciones y
aplicarles estilo en conjunto.
Supongamos que tenemos 3 párrafos que queremos alinear a la izquierda, esto recordemos lo
haríamos con el atributo align. Crearíamos algo así:
Una forma de simplificar nuestro código anterior y de evitar introducir continuamente el atributo
align sobre cada una de nuestras etiquetas es utilizando la etiqueta div. Por lo tanto, usaremos un
div para generar una sección de todos los párrafos y le agregaremos el atributo align a ese div.
40
Esto se vería así:
<div align="left">
<p>Párrafo 1</p>
<p>Párrafo 2</p>
<p>Párrafo 3</p>
</div>
Como hemos visto, la etiqueta DIV marca divisiones en las que definimos un bloque de contenido,
y a los que podríamos aplicar estilo de manera global, aunque lo correcto sería aplicar ese estilo
del lado del CSS.
ETIQUETA SPAN
El elemento span HTML es un contenedor en línea genérico para elementos y contenido en línea.
Se usa para agrupar elementos con fines de compartir un determinado estilo (mediante el uso de
los atributos de clase o id).
La mejor manera de usarlo es cuando no hay ningún otro elemento semántico disponible. Esta
etiqueta es muy similar a la etiqueta div, pero se diferencian en que div es una etiqueta a nivel de
bloque y span es una etiqueta en línea.
La etiqueta span es una etiqueta emparejada, lo que significa que tiene una etiqueta de apertura
(<) y de cierre (>), y es obligatorio cerrar la etiqueta.
La etiqueta span se utiliza para agrupar elementos en línea y no realiza ningún cambio visual por sí
misma.
En el siguiente caso vemos que tenemos un párrafo donde necesitamos agregar estilos para una
palabra. Por lo que agregaremos una etiqueta span para poder implementar ese estilo deseado.
La etiqueta span no crea un salto de línea, sino que permite al usuario elegir cuando separar un
elemento de otros dentro de la misma línea.
Nota: en el apartado de CSS vamos a ver mejor el atributo style y el atributo color. Ahora los
estamos usando sólo para ejemplificar.
41
PCSSP
En este apartado veremos qué es CSS, sus fundamentos y generalidades y cómo implementarlo
en nuestros documentos HTML.
¿QUÉ ES CSS?
CSS es el acrónimo de Cascading Style Sheets, o lo que sería en español Hojas de Estilo en
Cascada. Es un lenguaje que sirve para especificar el estilo o aspecto de las páginas web. CSS se
define en base a un estándar publicado por una organización llamada W3C, que también se
encarga de estandarizar el propio lenguaje HTML.
Otro motivo que ha hecho necesaria la creación de CSS ha sido la separación del contenido de la
presentación. Al inicio las páginas web tenían mezclado en su código HTML el contenido con las
etiquetas necesarias para darle forma. Esto tiene sus inconvenientes, ya que la lectura del código
HTML se hace pesada y difícil a la hora de buscar errores o depurar las páginas. Además, desde el
punto de vista de la riqueza de la información y la utilidad de las páginas a la hora de almacenar
su contenido, es un gran problema que los textos están mezclados con etiquetas incrustadas para
dar forma a éstos, pues se degrada su utilidad.
CSS se ideó para aplicar el formato en las páginas, de una manera mucho más detallada, con
nuevas posibilidades que no estaban al alcance de HTML. Al mismo tiempo, gracias a la
posibilidad de aplicar el estilo de manera externa al propio documento HTML, se consiguió que el
mantenimiento de las páginas fuese mucho más sencillo.
Podemos aplicar CSS a muchos niveles, desde un sitio web entero hasta una pequeña etiqueta.
Estos son los principales bloques de acción.
• Una web entera: de modo que se puede definir en un único lugar el estilo de toda una
web, de una sola vez.
• Una porción del documento: aplicando estilos visibles en un trozo de la página, como
podría ser la cabecera.
• Una etiqueta en concreto: llegando incluso a poder definir varios estilos diferentes para
una sola etiqueta. Esto es muy importante ya que ofrece potencia en nuestra programación.
42
La potencia de la tecnología salta a la vista. Pero no solo se queda ahí, ya que además esta
sintaxis CSS permite aplicar al documento formato de modo mucho más exacto. Si antes el HTML
se nos quedaba corto para maquetar las páginas y teníamos que utilizar trucos para conseguir
nuestros efectos, ahora tenemos muchas más herramientas que nos permiten definir esta forma:
• Podemos colocar elementos en la página con mayor precisión, y sin lugar a errores.
Otra ventaja importante de CSS es la capacidad de especificar las medidas con diversas unidades.
Si con HTML tan sólo podíamos definir atributos en las páginas con pixeles y porcentajes, ahora
podemos definir utilizando muchas más unidades como:
• Pulgadas (in).
• Puntos (pt).
• Centímetros (cm).
SINTAXIS HTML
La meta básica del lenguaje Cascading Stylesheet (CSS) es permitir al motor del navegador pintar
elementos de la página con características específicas, como colores, posición o decoración. La
sintaxis CSS refleja estas metas y estos son los bloques básicos de construcción.
• La propiedad que es un identificador, un nombre leíble por humanos, que define qué
característica es considerada.
• El valor que describe como las características deben ser manejadas por el motor. Cada
propiedad tiene un conjunto de valores válidos, definido por una gramática formal, así
como un significado semántico, implementados por el motor del navegador.
43
PDECLARACIONES DE CSSP
La función principal de CSS es configurar determinadas propiedades con valores específicos. Este
par (propiedad y valor) es llamado una declaración.
Ambos propiedades y valores son sensibles a mayúsculas y minúsculas en CSS. El par se separa
por dos puntos, “ : ”, y espacios en blanco antes, entre ellos y después.
Declaración CSS:
background-color : red
Hay más de 100 propiedades diferentes en CSS y cerca de un número infinito de diferentes
valores. No todos los pares de propiedades y valores son permitidos, cada propiedad define qué
valores son válidos. Cuando un valor no es válido para una propiedad específica, la declaración es
considerada inválida y es completamente ignorada por el motor del CSS.
Bloque css:
Esos bloques son naturalmente llamados bloques de declaraciones y las declaraciones dentro de
ellos están separadas por un punto y coma, “ ; ”. Un bloque de declaración puede estar vacío, que
es contener una declaración nula. Los espacios en blanco alrededor de las declaraciones son
ignorados. En cuanto a la última declaración de un bloque, esta no necesita terminar en un punto y
coma, aunque es usualmente considerado una buena práctica porque previene el olvidar
agregarlo cuando se extienda el bloque con otra declaración.
background-color : red;
background-style: none;
44
¿QUÉ PARTES CONFORMAN A UNA DECLARACIÓN CSS?
CSS define una serie de términos que permiten describir cada una de las partes que componen
los estilos CSS. El siguiente esquema muestra las partes que forman un estilo CSS muy básico:
Regla: cada uno de los estilos que componen una hoja de estilos CSS.
Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.
Declaración: especifica los estilos que se aplican a los elementos. Está compuesta por una o más
propiedades CSS.
<p> Yo estudié en <span style="color: yellow"> Egg Education </span> programación </p>
</p>
45
ESTILO DEFINIDO EN UNA PARTE DE LA PÁGINA
Con la etiqueta <div> podemos definir secciones de una página y aplicarle estilos con el
atributo style, es decir, podemos definir estilos de una vez a todo un bloque de la página.
<p>
</p>
</div>
Además, es común que los estilos declarados se quieran aplicar a distintas etiquetas dentro del
mismo documento. Gracias a la aplicación de estilos para toda la página, podemos escribir los
estilos una vez y usarlos para un número indefinido de etiquetas. Por ejemplo, podremos definir el
estilo a todos los párrafos una vez y que se aplique igualmente, sea cual sea el número de
párrafos del documento. Por último, también tendremos la ventaja que, si más adelante deseamos
cambiar los estilos de todas las etiquetas, lo haremos de una sola vez, ya que el estilo fue definido
una única vez de manera global.
A grandes rasgos, entre <style> y </style>, se coloca el nombre de la etiqueta (o selector) para la
que queremos definir los estilos y entre llaves -{ }- colocamos en sintaxis CSS las características de
estilos. El concepto de selectores lo veremos más adelante.
<html>
<head>
<style>
</style>
</head>
<body>
</body>
</html>
46
Como se puede apreciar en el código, hemos definido que la etiqueta <h1> se presentará
• Subrayado
• Centrada
También, por ejemplo, hemos definido que el cuerpo entero de la página (etiqueta <body>) se le
apliquen los estilos siguientes:
Cabe destacar que muchos de los estilos aplicados a la etiqueta <body> son heredados por el
resto de las etiquetas del documento, como el color del texto o su tamaño. Esto es así, siempre y
cuando no se vuelvan a definir esos estilos en las etiquetas hijas, en cuyo caso el estilo de la
etiqueta más concreta será el que mande. Puede verse este detalle en la etiqueta <p>, que tiene
definidos estilos que ya fueron definidos para <body>. Los estilos que se tienen en cuenta son los
de la etiqueta <p>, que es más concreta.
Esto se consigue creando un archivo de extensión .css donde tan sólo colocamos las
declaraciones de estilos de la página y enlazando todas las páginas del sitio con ese archivo. De
este modo, todas las páginas comparten una misma declaración de estilos, reutilizando el código
CSS de una manera mucho más potente.
Este es el modelo más ventajoso de aplicar estilos al documento HTML y por lo tanto el más
recomendable. De hecho, cualquier otro modo de definir estilos no es considerado una buena
práctica y lo tenemos que evitar siempre que se pueda.
Algunas de las ventajas de este modelo de definición de estilos son las siguientes:
• Se ahorra en líneas de código HTML, ya que no tenemos que escribir el CSS en la propia
página (lo que reduce el peso del documento y mejora la velocidad de descarga).
• Se evita la molestia de definir una y otra vez los estilos con el HTML y lo que es más
importante, si cambiamos la declaración de estilos, cambiarán automáticamente todas las
páginas del sitio web. Esto es una característica muy deseable, porque aumenta
considerablemente la facilidad de mantenimiento del sitio web.
47
¿CÓMO INCORPORAR ESTILOS DESDE UN ARCHIVO EXTERNO?
Veamos ahora cómo el proceso para incluir estilos con un fichero externo.
p{
font-size: 12cm;
font-weight: normal;
h1 {
font-size: 36cm;
text-decoration: underline;
text-align: center;
background-color: Teal;
body {
background-color: #006600;
font-family: arial;
color: White;
• rel: indica el tipo de relación que tiene el recurso enlazado y la página HTML. Para los
archivos CSS, siempre se utiliza el valor stylesheet.
• href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser
relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web.
48
Veamos una página web entera que enlaza con la declaración de estilos anterior:
<html>
<head>
</head>
<body>
</body>
</html>
PSELECTORES CCSP
Teniendo en cuenta que ya podemos asignarle estilos a todo un sitio web, mediante un archivo
css que usa selectores para elegir las etiquetas a las que asignarles los estilos, también tenemos
que entender que existen varios tipos de selectores
SELECTOR UNIVERSAL
Se utiliza para seleccionar todos los elementos de la página. El siguiente ejemplo elimina el
margen y el relleno de todos los elementos HTML (por ahora no es importante fijarse en la parte
de la declaración de la regla CSS):
SELECTOR DE ETIQUETA
Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del
selector. El siguiente ejemplo selecciona todos los párrafos de la página:
49
SELECTOR DESCENDENTE
Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es
descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro
elemento.
El selector del siguiente ejemplo selecciona todos los elementos <span> de la página que se
encuentren dentro de un elemento <p>.
SELECTOR DE CLASE
¿Como hago para aplicarle estilos solo al primer párrafo?
Una de las soluciones más sencillas para aplicar estilos a un solo elemento de la página consiste
en utilizar el atributo class de HTML sobre ese elemento para indicar directamente la regla CSS
que se le debe aplicar. Ejemplo:
HTML:
<body>
</body>
CSS:
.destacado {
font-size: 15px;
.error {
color: red;
En nuestro archivo CSS para especificar una clase, vamos a poner punto (‘.’) y el nombre de la
clase que queremos que coincida que con valor que pongamos en nuestro atributo class en el
html.
Entonces, en el ejemplo podemos ver como el primer párrafo tiene el valor destacado y el
segundo párrafo el valor error para el atributo class y en nuestro archivo CSS, hemos definido un
estilo para esas clases.
El beneficio del atributo class, además de dejarnos asignar estilos a un solo elemento, es que
después podemos reutilizar esa class para asignarle ese estilo a otros párrafos concretos o a otras
etiquetas, solo deberemos ponerle el valor de un estilo que ya existe en el atributo class.
50
SELECTOR DE ID
En un documento HTML, los selectores de ID de CSS buscan un elemento basado en el contenido
del atributo id. El atributo ID del elemento seleccionado debe coincidir exactamente con el valor
dado en el selector. Este tipo de selectores sólo seleccionan un elemento de la página porque el
valor del atributo id no se puede repetir en dos elementos diferentes de una misma página.
HTML:
CSS:
#identificador{
background-color: blue;
En nuestro archivo CSS para especificar un ID, vamos a poner el numeral (‘#’) y el nombre del ID
que queremos que coincida que con valor que pongamos en nuestro atributo ID en el html.
Como podemos ver el ID, es muy parecido al atributo class, pero la diferencia es que el ID se
puede usar para identificar un solo elemento, mientras que una clase se puede usar para agrupar
más de uno.
En esta actividad incorporaremos algunos estilos a la página que hemos creado, con el motivo de
practicar lo aprendido sobre CSS.
En el Anexo CSS (material disponible en el aula virtual) encontraras diferentes formas de utilizar las
propiedades que utilizaremos en la actividad para así, sacarle más provecho.
1) Abre tu IDE y crea un nuevo archivo (en la actividad 1 se explica cómo). Pero esta vez, con
la extensión “css” en lugar de “html”. Puedes nombrarlo cómo prefieras. Te
recomendamos algunos nombres: “estilos.css”, “style.css”.
2) Agrega una declaración CSS con selector universal (estas aplican a todo el documento).
Dentro de esta declaración especificaremos el valor de las siguientes propiedades:
3) Agregaremos una declaración CSS con selector de etiqueta, para todas las etiquetas H1 (o
el encabezado de mayor relevancia que posea tu documento HTML). En esta declaración
te pediremos que especifiques los valores para las siguientes propiedades:
51
PPRIORIDAD EN APLICACIÓN DE ESTILOP
Ahora que entendemos los selectores en CSS, tenemos que entender como priorizar los estilos en
CSS, para saber qué estilo hace efecto y cuál no sobre determinado elemento.
HERENCIA
Los hijos heredan los estilos de sus elementos padres, no es necesario declarar sus estilos si
estos se mantienen igual.
CASCADA
Todo estilo sobrescribe a uno anterior.
ESPECIFICIDAD
Cuando hay conflictos de estilos el navegador aplica sólo el de mayor especificidad.
52
P¿QUÉ ES EL MODELO DE CAJA?P
El modelo de cajas o "box model" es seguramente la característica más importante del lenguaje
de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web. El modelo de
cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se
representen mediante cajas rectangulares.
Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta HTML,
se crea una nueva caja rectangular que encierra los contenidos de ese elemento. La siguiente
imagen muestra las tres cajas rectangulares que crean las tres etiquetas HTML que incluye la
página:
Las cajas de las páginas no son visibles a simple vista porque inicialmente no muestran ningún
color de fondo ni ningún borde.
Los navegadores crean y colocan las cajas de forma automática, pero CSS permite modificar todas
sus características. Cada una de las cajas está formada por cuatro partes, tal y como muestra la
siguiente imagen:
• Contenido (content): se trata del contenido HTML del elemento (las palabras de un
párrafo, una imagen, el texto de una lista de elementos, etc.)
• Margen (margin): separación opcional existente entre la caja y el resto de las cajas
adyacentes.
53
Existen otras dos partes de una caja que son:
• Imagen de fondo (background image): imagen que se muestra por detrás del contenido y
el espacio de relleno.
• Color de fondo (background color): color que se muestra por detrás del contenido y el
espacio de relleno.
El relleno y el margen son transparentes, por lo que en el espacio ocupado por el relleno se
muestra el color o imagen de fondo (si están definidos) y en el espacio ocupado por el margen se
muestra el color o imagen de fondo de su elemento padre (si están definidos). Si ningún elemento
padre tiene definido un color o imagen de fondo, se muestra el color o imagen de fondo de la
propia página (si están definidos).
Si una caja define tanto un color como una imagen de fondo, la imagen tiene más prioridad y es la
que se visualiza. No obstante, si la imagen de fondo no cubre totalmente la caja del elemento o si
la imagen tiene zonas transparentes, también se visualiza el color de fondo. Combinando
imágenes transparentes y colores de fondo se pueden lograr efectos gráficos muy interesantes.
54
PPSEUDO-CLASESP
CSS también permite aplicar diferentes estilos a un mismo enlace en función de su estado.
De esta forma, es posible cambiar el aspecto de un enlace cuando por ejemplo el usuario pasa el
ratón por encima o cuando el usuario pincha sobre ese enlace.
Como con los atributos id o class no es posible aplicar diferentes estilos a un mismo elemento en
función de su estado, CSS introduce un nuevo concepto llamado pseudo-clases. En concreto,
CSS define las siguientes cuatro pseudo-clases:
• :link, aplica estilos a los enlaces que apuntan a páginas o recursos que aún no han sido
visitados por el usuario.
• :visited, aplica estilos a los enlaces que apuntan a recursos que han sido visitados
anteriormente por el usuario. El historial de enlaces visitados se borra automáticamente
cada cierto tiempo y el usuario también puede borrarlo manualmente.
• :hover, aplica estilos al enlace sobre el que el usuario ha posicionado el puntero del ratón.
/* link visitado*/
a:visited {
color: green;
}
/* link clickeado */
a:active {
color: blue;
}
55
PBOOTSTRAPP
Es un framework de interfaz de usuario, de código abierto, creado para un desarrollo web más
rápido y sencillo. Mark Otto y Jacob Thornton fueron los creadores iniciales. El framework
combina CSS y JavaScript para estilizar los elementos de una página HTML.
Contiene todo tipo de plantillas de diseño basadas en HTML y CSS para diversas funciones y
componentes, como navegación, sistema de cuadrícula, carruseles de imágenes y botones.
Si bien Bootstrap ahorra tiempo al desarrollador de tener que administrar las plantillas
repetidamente, su objetivo principal es crear sitios responsive. Permite que la interfaz de usuario
de un sitio web funcione de manera óptima en todos los tamaños de pantalla, ya sea en teléfonos
de pantalla pequeña o en dispositivos de escritorio de pantalla grande.
Por lo tanto, los desarrolladores no necesitan crear sitios específicos para dispositivos y limitar su
rango de audiencia.
BOOTSTRAP.CSS
Esta es la hoja de estilos de bootstrap, gracias a esta podremos implementar estilos ya definidos y
así estilizar nuestra página de una manera sencilla. Además, las plantillas que contiene bootstrap,
usan esta hoja de estilos.
BOOTSTRAP.JS
Este archivo es la parte principal de Bootstrap. Consiste en archivos JavaScript que son
responsables de la interactividad del sitio web.
https://getbootstrap.com/docs/4.5/getting-started/introduction/#css
https://getbootstrap.com/docs/4.5/getting-started/introduction/#js
Dentro de estas dos páginas vamos a encontrar una etiqueta link para el CSS de Bootstrap y unas
etiquetas script para el JavaScript de Bootstrap.
Para poder usar Bootstrap lo que haremos es pegar el link con la hoja de estilos de Bootstrap en
la etiqueta <head> de nuestro html y las etiquetas script antes de la etiqueta de cierre </body>.
56
Esto se vería así:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
</body>
</html>
Una vez que hemos hecho esto, ya podemos usar Bootstrap y sus plantillas.
PLANTILLAS
Dado que es uno de los framework más utilizados, podemos encontrar un amplio abanico de
marcos de trabajo pensados y diseñados a partir de los componentes y estilos que presenta
Bootstrap, de modo que existen variables y ejemplos listos para utilizar en proyectos específicos.
https://themes.getbootstrap.com/official-themes/
57
PEJERCICIOS DE APRENDIZAJEP
Para la realización de los ejercicios que se describen a continuación, es necesario tener instalado
Visual Studio Code o alguna aplicación parecida. El material para realizar la instalación se
encuentra en el aula virtual. En este apartado tendrás 13 ejercicios para realizar.
VIDEOS: Te sugerimos ver los videos relacionados con este tema, antes de empezar los
ejercicios, los podrás encontrar en tu aula virtual o en nuestro canal de YouTube.
2. Ahora vamos a tener que centrar nuestros encabezados y nuestros párrafos alinearlos a la
izquierda. A continuación, después del último párrafo vamos a tener que crear una lista
ordenada de lo que queramos. Tendremos que mostrar la lista donde la enumeración sean
letras del alfabeto. Sin usar CSS
3. Ahora crearemos otro archivo HTML en que crearemos una lista anidada de enlaces,
deberá verse así:
a. Cada buscador y red social que sale en la lista deben ser links a las respectivas
páginas.
b. Recordemos que no debemos utilizar CSS para lograr ninguna de estas tareas, la idea
es practicar HTML por su cuenta y después sumaremos CSS.
58
4. Crear un nuevo archivo HTML en el que explicaremos la receta para hacer papas fritas. La
página debería verse así:
5. Ahora vamos a crear una página web de nuestra banda favorita, vamos a mostrar un
ejemplo con los Beatles:
La tabla tendrá bordes que se lo debemos agregar sin css. Investigar atributo border.
59
6. Por último, vamos a crear un formulario para registrar un usuario que se vea de la
siguiente manera:
Es importante que en las casillas de sexo del usuario se puede clickear la/s palabra/s
hombre, mujer o prefiero no decir para seleccionar la opción. Recordemos que eso lo
podemos hacer con la etiqueta label.
7. Crear un archivo HTML y un archivo CSS, vamos a linkear el archivo CSS al archivo HTML y
vamos a hacer lo mismo que el primer ejercicio, pero ahora la página va a tener un color
de fondo a elección, el encabezado H1 tiene que tener una fuente a elección y estar
centrado, lo mismo para el encabezado H2, y por ultimo los párrafos deben tener una
fuente a elección, deben tener un color a elección y deben estar centrados a la izquierda.
8. Definir las reglas CSS que permiten mostrar los enlaces con los siguientes estilos:
• Cuando el usuario pasa su ratón sobre el enlace, se muestra con un color de fondo
rojo #CC0000 y la letra de color blanco #FFF.
60
9. A partir del siguiente código HTML proporcionado, añadir las reglas CSS necesarias para
que la página resultante tenga el mismo aspecto que el de la siguiente imagen:
10. Ahora vamos a utilizar Bootstrap. Deberemos crear una página que tenga un encabezado
H1 con un párrafo y un encabezado H2 con un párrafo. Tenemos que lograr que se vean
con los estilos de Bootstrap.
12. Una vez que tenemos esa tabla vamos a sumarle una columna más que se vea así:
Para esto investigar la clase button de Bootsrap para las etiquetas <a> e investigar los
colores de Bootstrap y como sumarlos.
61
13. Un formulario para que el usuario se pueda registrar en nuestra página usando Bootstrap.
62
PEJERCICIOS DE APRENDIZAJE EXTRASP
Estos van a ser ejercicios para reforzar los conocimientos previamente vistos. Estos pueden
realizarse cuando hayas terminado la guía y tengas una buena base sobre lo que venimos
trabajando. Además, si ya terminaste la guía y te queda tiempo libre en las mesas, podes continuar
con estos ejercicios extra, recordando siempre que no es necesario que los termines para
continuar con el tema siguiente. Por último, recuerda que la prioridad es ayudar a los compañeros
de la mesa y que cuando tengas que ayudar, lo más valioso es que puedas explicar el ejercicio
con la intención de que tu compañero lo comprenda, y no sólo mostrarlo. ¡Muchas gracias!
2. Determinar las reglas CSS necesarias para mostrar la siguiente tabla con el aspecto final
mostrado en la imagen (modificar el código HTML que se considere necesario añadiendo
los atributos class oportunos).
Tabla original:
Tabla final:
Pasos a realizar:
1. Alinear el texto de las celdas, cabeceras y título. Definir los bordes de la tabla, celdas y
cabeceras (color gris oscuro #333).
63
2. Formatear las cabeceras de fila y columna con la imagen de fondo correspondiente en
cada caso (fondo_gris.gif, euro.png, dolar.png, yen.png, libra.png). Modificar el tipo de
letra de la tabla y utilizar Arial. El color azul claro es #E6F3FF.
3. Mostrar un color alterno en las filas de datos (color amarillo claro #FFFFCC).
64
3. Siguiendo el ejercicio de Bootstrap, haremos una landing page que contenga un navbar.
Investigar el navbar en Bootstrap, con botones a todas las páginas previamente
mencionadas.
Pueden también hacer que ese navbar salga en el resto de las páginas.
4. Además, le sumaremos una imagen a la landing page usando las clases para la etiqueta
<img> que nos provee Bootstrap. Ejemplo:
5. Ahora deberemos hacer una página para el detalle del producto. Una página que muestre
el nombre, el precio del producto y un botón para comprar y otro para agregar al carrito. A
esta página se accederá con el botón en a la tabla de ver detalle.
65
6. Por último, sumarle a la landing cartas que muestren productos de esta manera:
66
PBIBLIOGRAFÍAP
Información sacada de las páginas:
HTML:
- https://desarrolloweb.com/manuales/manual-html.html
- https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/HTML_basics
- https://www.arkaitzgarro.com/xhtml/capitulo-2.html#que-es-html
- https://www.geeksforgeeks.org/span-tag-html/
- https://www.geeksforgeeks.org/div-tag-html/
CSS:
- https://desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html
- https://uniwebsidad.com/libros/css/capitulo-1
- https://lenguajecss.com/css/modelo-de-cajas/unidades-css/
- https://developer.mozilla.org/es/docs/Learn/CSS/First_steps
- https://web.dev/learn/css/
67