Teoría y ejercicios

IES GUADALERZAS
Informática TIC II
2020-21
UD 6. PUBLICACIÓN DE CONTENIDOS WEB
Contenido
1
2
3
4
Toma de contacto. ............................................................................................................................................... 3
1.1
Página de Toledo.es ..................................................................................................................................... 3
1.2
Página de Google. ........................................................................................................................................ 3
1.3
Página de Papás ........................................................................................................................................... 3
HTML5 .................................................................................................................................................................. 4
2.1
LENGUAJES PARA LA CREACIÓN DE PÁGINAS WEB ..................................................................................... 4
2.2
CREAR DOCUMENTOS HTML ....................................................................................................................... 5
2.3
ESTRUCTURA DE UN DOCUMENTO HTML ................................................................................................... 5
ALGUNOS ELEMENTOS HTML5 ............................................................................................................................ 7
3.1
ETIQUETAS DE FORMATO DE TEXTO............................................................................................................ 7
3.2
ENCABEZADOS ............................................................................................................................................. 8
3.3
EL COLOR EN HTML. ..................................................................................................................................... 8
3.4
LISTAS ........................................................................................................................................................... 9
3.5
IMÁGENES .................................................................................................................................................. 10
3.6
SONIDOS..................................................................................................................................................... 11
3.7
VÍNCULOS, LINKS, ENLACES, HIPERVÍNCULOS…......................................................................................... 11
3.8
ETIQUETAS DIV Y SPAN .............................................................................................................................. 13
3.8.1
Etiqueta <div> .................................................................................................................................... 13
3.8.2
Etiqueta <span> ................................................................................................................................. 13
3.8.3
Estructura de una página ................................................................................................................... 13
3.8.4
Grid ..................................................................................................................................................... 14
CSS ...................................................................................................................................................................... 14
4.1
Selectores básicos ...................................................................................................................................... 14
4.1.1
Selectores por tipo ............................................................................................................................. 14
4.1.2
Selectores de clase ............................................................................................................................. 14
4.1.3
Selectores por id ................................................................................................................................ 14
4.1.4
Selector universal ............................................................................................................................... 15
4.1.5
Otros selectores ................................................................................................................................. 15
4.2.1
Estilo en línea ..................................................................................................................................... 15
4.2.2
Estilo incrustado ................................................................................................................................. 15
1
COLOCACIÓN DEL CÓDIGO CSS .................................................................................................................. 15
4.2.3
Estilo vinculado .................................................................................................................................. 15
Página
4.2
4.3
PROPIEDADES RELACIONADAS CON LOS COLORES ................................................................................... 15
Juan Pablo Aceña
IES GUADALERZAS
2020-21
4.4
UNIDADES DE MEDIDA ............................................................................................................................... 16
4.5
PROPIEDADES RELACIONADAS CON EL TEXTO .......................................................................................... 16
4.6
PROPIEDADES RELACIONADAS CON LOS BORDES ..................................................................................... 18
4.7
PROPIEDADES RELACIONADAS CON LOS MÁRGENES................................................................................ 18
4.8
PROPIEDADES RELACIONADAS CON EL COMPORTAMIENTO COMO BLOQUE .......................................... 20
4.8.1
5
Informática TIC II
FLOAT ................................................................................................................................................. 21
4.9
PROPIEDADES RELACIONADAS CON EL POSICIONAMIENTO ..................................................................... 22
4.10
PROPIEDADES RELACIONADAS CON IMÁGENES DE FONDO ..................................................................... 23
OTROS ELEMENTOS HTML ................................................................................................................................. 24
5.1
TABLAS ....................................................................................................................................................... 24
5.1.1
5.2
UNIFICACIÓN DE CELDAS ................................................................................................................... 26
FORMULARIOS ........................................................................................................................................... 28
5.2.1
Atributos del elemento <input> ......................................................................................................... 29
5.2.2
Atributos del elemento <select> ........................................................................................................ 29
5.3
INCRUSTAR ELEMENTOS. IFRAME.............................................................................................................. 30
5.3.1
Apertura de vínculos en iframes. ....................................................................................................... 30
5.4
MENÚS ....................................................................................................................................................... 31
5.5
SCRIPT ........................................................................................................................................................ 32
¿Qué es el DOM?................................................................................................................................ 32
Página
2
5.5.1
Juan Pablo Aceña
IES GUADALERZAS
Informática TIC II
2020-21
1 TOMA DE CONTACTO.
Vamos a hacer unas prácticas iniciales para tomar contacto con el html y ver
cómo funciona la estructura y etiquetas de la página.
1.1
Página de Toledo.es
a. El lenguaje HTML es un lenguaje basado en etiquetas. Estas son las que configuran
el aspecto y los contenidos de la página.
b. Ve a la dirección: http://www.toledo.es/.
c. Para revisar el código fuente hay varias opciones.
c.i.
Botón derecho sobre la página y “Ver código fuente” o también “Inspeccionar
elemento” (esto último sólo en algunos navegadores)
c.ii. Pulsa la tecla F12 (elegir la opción Inspeccionar) en mozilla.
c.iii. Todas las páginas web tienen dos partes <head> y <body> ¿cómo se indica el fin de una
etiqueta para el comienzo de otra?.
c.iv. Analiza la zona del head.
c.iv.1. Intenta modificar el título de la página. (el que aparece en la pestaña).
c.v. Prueba a modificar el código fuente para que cambien los rótulos de los menús.
c.vi. En la etiqueta <body>, uno de los atributos es el color de la página, prueba a modificarlo.
Ve a la parte derecha y en el apartado “Styles” modifica el
valor en el atributo “background-color” (seis valores,
aunque sólo aparecen tres, los valores de “00” a “ff”,
expresan el color en RGB por ejemplo 000000 sería negro
y ffffff blanco). Prueba a cambiar el color de otras zonas
de la página. (Qué es el color RGB)
d. Guarda la página (pero no como un solo archivo)
d.i. Copia el archivo que se llama “Ayuntamiento de
Toledo.html” y pégalo en otra carpeta. Ábrelo con un
navegador.
d.ii. Ahora copia la carpeta que se había descargado junto al archivo en la misma carpeta donde
has pegado el archivo anterior. Vacíala. Actualiza la página (F5). ¿Hay algún cambio?
d.iii. Copia y pega todas las imágenes (“.jpg” y “.png”) de la carpeta original dentro de la carpeta
vacía que has copiado en el punto anterior. ¿Hay algún cambio?.
d.iv. Copia y pega los archivos de java script “.js” ¿Hay algún cambio?.
d.v. Pega el resto de archivos, excepto los que son con la extensión “.css” ¿Hay algún cambio?
1.2 Página de Google.
a. Ingresa una contraseña en el campo de contraseña.
Juan Pablo Aceña
Página
1.3 Página de Papás
3
a. Con ayuda de “inspeccionar elemento”
configura una imagen como la siguiente y
captúrala. Crea un documento dentro de
tu Drive que se llame “Google Los
Yébenes” y pégala en él. (Lo de
tecnoguadalerzas.tk no ha de aparecer).
b. Pon un color de fondo diferente al
blanco. Es la propiedad background del estilo de <body>
IES GUADALERZAS
Informática TIC II
2020-21
b. Inspecciona el HTML del campo contraseña
c. Cambia el tipo de “password” a “text” ¿qué ha pasa?
2
HTML5
HTML5 (HyperText Markup Language, versión 5) es la quinta revisión del lenguaje HTML. Esta nueva versión
(aún en desarrollo), y en conjunto con CSS3, define los nuevos estándares de desarrollo web, rediseñando el
código para resolver problemas y actualizándolo así a nuevas necesidades. No se limita solo a crear nuevas
etiquetas o atributos, sino que incorpora muchas características nuevas y proporciona una plataforma de
desarrollo de complejas aplicaciones web (mediante los APIs). HTML es un estándar desarrollado por W3C (World
Wide Web Consortium). En http://www.w3.org/TR/html/ se puede consultar su especificación actual.
Cuando en un ejercicio necesites consultar alguna etiqueta o atributo puedes acudir a la dirección anterior o
a laguna de las dos siguientes.
REFERENCIA HTML 5
OTRO SITO CON REFERENCIA HTML5.
HTMLQUICK
2.1 LENGUAJES PARA LA CREACIÓN DE PÁGINAS WEB
Las páginas web se almacenan en “servidores web”. Los usuarios al introducir una dirección URL en el
navegador, se conectan a dichos servidores, que procesan la petición devolviendo el código de la página web
solicitada, la cual es interpretada por el “navegador del cliente”, de modo que el usuario pueda visualizarla
correctamente.
Los servidores web emplean una serie de lenguajes de programación y de consulta de datos que permiten
generar la estructura de la página web, codificada en lenguaje HTML. Según el lugar en el que se ejecutan, los
lenguajes más utilizados para la creación de páginas web son:

Página
4

En el lado del servidor:
o PHP, Java, .NET, Ruby, Python. Permiten programar el comportamiento del servidor web en
el momento de atender las peticiones de los usuarios y de generar el contenido HTML
correspondiente. Generan el HTML necesario en cada momento para mandarlo al cliente.
Por regla general se conectan a una base de datos para obtener los datos a mostrar.
o SQL. Utilizado para interaccionar con la base de datos y realizar tanto consultas como
modificaciones en ella. Por ejemplo en una tienda virtual gestiona los datos de usuarios,
productos, clientes, anuncios…
En el lado del cliente:
o HTML. Desde el punto de vista estricto, los lenguajes de marcas no son lenguajes de
programación, ya que no están dotados de los elementos básicos de estos, como son:
estructuras de control, asignación de variables, funciones, etc.
o CSS. Utilizado para definir el estilo con el que se presenta la estructura HTML de una página
web. La versión actual (CSS3) soporta, entre otras funciones, la inclusión de animaciones y la
gestión de diferentes resoluciones con el fin de adaptar la presentación de la página a los
diferentes dispositivos (teléfonos inteligentes, tabletas, ordenadores, etc).
o JavaScript. Lenguaje de programación interpretado por el navegador o cliente web.
JavaScript añade dinamismo a la página, ya que permite, entre otras cosas, modificar su
estructura y estilo, lo que evita tener que realizar peticiones al servidor web para muchos
cambios en tiempo de ejecución.
Juan Pablo Aceña
IES GUADALERZAS
Informática TIC II
2020-21
2.2 CREAR DOCUMENTOS HTML
Para crear documentos html hay diferentes herramientas que nos pueden
simplificar el trabajo.
 Mediante editor de texto: bloc de notas.


Mediante editores de texto con funciones de programación:
Notepad++, Sublime Text
Mediante software de html wysiwyg (what you see is what you
get).
Cuando guardes un documento asegúrate que está en formato UTF-8 y
que la extensión del archivo sea “.html”
2.3 ESTRUCTURA DE UN DOCUMENTO HTML
En HTML se definen ciertas reglas de uso en forma de etiquetas
aplicadas a un texto o a un grupo de datos. Su sintaxis básica se forma por
elementos compuestos de una etiqueta de inicio, un contenido y una etiqueta final; teniendo en cuenta que esta
última no siempre es obligatoria. Una etiqueta es un texto incluido entre los símbolos «menor que, <» y «mayor
que, >».
Los elementos permiten ser caracterizados a través de los atributos. Un atributo consta de un nombre que
identifica la característica de la etiqueta y de un valor.
<!DOCTYPE html> en la primera
</html>
línea. Esta es la forma de indicar al navegador donde se visualice el documento que este está escrito en la versión
HTML5.
Juan Pablo Aceña
5
La estructura de un documento
completo en html es como la de la
siguiente imagen.
<!--Ejemplo del Tutorial de HTML-->
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<title>Ejemplo de 2
párrafos</title>
</head>
<body>
<!-- En el body hay 2 párrafos -->
<p>Esto es un párrafo.</p>
<p>Esto es otro párrafo.</p>
</body>
</html>
Página
Estos elementos tienen una
estructura jerárquica o anidada,
ubicándose unos dentro de otros, para dar
formato a la información en forma de
página web. Pueden existir etiquetas como
<meta>, <br> o <hr> que no tiene etiqueta
final. Muchos atributos tiene la estructura
de la propiedad a modificar igual a un
valor entre comillas, y en algunos casos
varios valores separados por “;” entre
comillas (atributo= ”valor”).
IES GUADALERZAS
Informática TIC II
2020-21
lang="es-ES" en la etiqueta de inicio <html>. Esto sirve para especificar, mediante el atributo lang, el
idioma del contenido del elemento "html". En este caso español (España). Otros posibles valores del atributo lang
son: "es-AR" para español (Argentina), "es-CO" para español (Colombia), "es-MX" para español (México), etc.
<meta charset="utf-8"> dentro del elemento "head".
Así, se indica la codificación de caracteres del documento, en
esta ocasión UTF-8 (8-bit Unicode Transformation Format,
Formato de Transformación Unicode de 8 bits). Obsérvese
que, el elemento "meta" está vacío (no tiene contenido) y, en
consecuencia, no necesita ser cerrado escribiendo </meta>.
Más información
<head> Puede contener diferente información,
referencia a archivos CSS, scripts, configuraciones, el título de
la página (<title>). Suele incluir etiquetas <meta> para indicar
el autor o el contenido o palabras clave que son útiles para los buscadores
<body> alberga todo el contenido (párrafos, imágenes, vídeos...) del documento, los cuales se mostrarán
en el navegador.
Tabulación, sangrado o Indentación. Colocar tabulaciones para jerarquizar visualmente el código es
necesario para facilitar su revisión. Véase el ejemplo.
EJERCICIO 1.
Página
6
Copia el documento anterior. Guárdalo como “ejercicio 1 + tu nombre.html”.
Realiza las siguientes pruebas. (antes de ver el resultado de cada una has de guardar para que el
navegador pueda cargar los nuevos valores)
a) Ábrelo con el navegador (puedes tener abiertas una copia de edición del documento, por
ejemplo, en el bloc de notas y otra en el navegador)
b) ¿Qué pasa con lo que hay entre las etiquetas "<!--" y "-->"
c) Agrega dentro del head una etiqueta como esta para indicar el autor del documento, cambia el
“content” para reflejar tu nombre. <meta name=”autor” content=”Administrador”/>
d) Elimina la etiqueta <meta charset…>. Visualiza el resultado (F5)
e) Deshaz el cambio anterior. Agrega un salto de línea (enter) después de “párrafo” y escribe tu
nombre y la fecha de hoy (F5). Visualiza ¿Se corresponde el documento con la distribución que
se muestra en el navegador?
f) Elimina el salto de línea y sustitúyelo por la etiqueta <br>. ¿qué pasa ahora? ¿qué hacen <p> y
<br>?.
g) Prueba a poner 10 espacios antes de la palabra “párrafo” del primer párrafo y dos tabuladores
después de la palabra “párrafo” del segundo párrafo. ¿qué pasa?
h) Elimina la etiqueta <br> y mete los párrafos entre dos etiqueta <pre> ….</pre>. ¿Qué pasa
ahora?
i) Agrega antes y después de cada <p> la etiqueta <hr> (no tiene cierre) ¿Qué hace? ¿Cómo
cambiarías su grosor?
j) Escribe al final del body un párrafo explicando las nuevas etiquetas que hemos visto en el
ejercicio.
Juan Pablo Aceña
IES GUADALERZAS
Informática TIC II
2020-21
EJERCICIO 2.
Haciendo uso de los
elementos "p", "pre", "br" y "hr" vistos en
el ejercicio anterior escribir el código de
un documento HTML que al visualizarlo
en un navegador web se muestre como
en la imagen sustituyendo los datos de
Ana por los tuyos. Guárdalo como
“Ejercicio 2 +tu nombre.html”
3
ALGUNOS ELEMENTOS HTML5
3.1 ETIQUETAS DE FORMATO DE TEXTO
<b> texto </b>:
Para poner negrita
<i> texto </i>:
Para poner cursiva (itálica)
<tt> texto </tt>:
Tipo de letra máquina de escribir
<sup> texto </sup>:
Para poner letra superíndice
<sub> texto </sub>:
Letra subíndice
<big> texto </big>:
Incrementa el tamaño del tipo de letra
<small> texto </small>:
Disminuye el tamaño del tipo de letra
<em> texto </em>:
Texto enfatizado
<strong> texto </strong>: Texto fuerte (más énfasis que el anterior)
<ins> texto </ins>:
Texto subrayado
<del> texto </del>:
Texto tachado
<mark>texto</mark>:
Texto resaltado
align=”left”
(atributo) Alinea texto a la izquierda. por ejemplo <h1
align=”center”>…</h1>.
align=”center”
(atributo) Alinea texto al centro. por ejemplo <p align=”center”>…</p>.
align=”right”
(atributo) Alinea texto a la derecha.
EJERCICIO 3.
Página
7
Crea un documento
HTML y escribe el siguiente texto,
mantenido los espacios en blanco y las
líneas.
Juan Pablo Aceña
IES GUADALERZAS
Informática TIC II
2020-21
EJERCICIO 4.
Crea un documento html
que genere una vista como la siguiente.
3.2 ENCABEZADOS
Para facilitar jerarquizar los títulos de un documento, existen seis tipos de encabezados.
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<title>Ejemplo con 6 cabeceras</title>
</head>
<body>
<h1>Esto es una cabecera h1</h1>
<h2>Esto es una cabecera h2</h2>
<h3>Esto es una cabecera h3</h3>
<h4>Esto es una cabecera h4</h4>
<h5>Esto es una cabecera h5</h5>
<h6>Esto es una cabecera h6</h6>
</body>
</html>
3.3 EL COLOR EN HTML.
Como la principal finalidad del html es mostrarse en pantallas, el color se indica en RGB que es una de las
formas de parametrizar los colores luz: En este enlace puedes profundizar un poco en el tema
Para incluir el color en html se utilizarán los estilos, que veremos más adelante. Para empezar
insertaremos el estilo como atributo dentro de las etiquetas html, ejemplo :
<body style="background-color: #FF0000;">
Para indicar el código del color en HTML se puede utilizar: (referencia)



Hexadecimal de la forma #(6 dígitos exadecimales). Ej: background-color = #ff0000
En hexadecimal ff equivale a 255 en decimal.
Con el nombre del color. Ej: background-color =red
Con el código rgb en decimal. Ej: background-color =rgb(255,0,0)
Página
8
Para obtener el código RGB de un color, hay muchas páginas como esta,
Juan Pablo Aceña
IES GUADALERZAS
Informática TIC II
2020-21
3.4 LISTAS
Juan Pablo Aceña
Página
1. Listas numeradas u ordenadas: toda la lista se engloba dentro de las etiquetas
<ol>.....</ol> y cada elemento de la lista estará delimitado por la etiqueta <li>
…<li>. Cuando el navegador interpreta una lista ordenada, numera y sangra cada
elemento en forma secuencial, aunque se introduzcan modificaciones.
2. Listas con viñetas o sin orden: Se engloban por las tags <ul>.....</ul> y cada
elemento de la lista, también estará encabezado por la tag <li>. El resultado es
que el navegador inserta viñetas (marcadores) delante de cada elemento.
3. Listas de glosario o descripción de términos: Estas listas se engloban dentro de las
etiquetas <dl>.....</dl>. Para el término se usa la
etiqueta <dt> y para la definición la tag <dd>.
Generalmente el navegador colocará término y
definición en dos líneas diferentes, pero esto se puede
evitar añadiendo a la etiqueta de apertura el atributo
compact: <dl compact>.
4. Listas anidadas: Consiste en poner una lista dentro de
<h1>Listas</h1>
otra, de manera que la lista secundaria sangre
<h3>Una lista ordenada</h3>
<ol>
respecto a la principal. Puede jugar con los diferentes
<li>Uno</li>
tipos de lista, pero recuerde estructurar bien las tags:
<li>Dos</li>
Las tags de la lista principal englobarán todo el
<li>Tres</li>
conjunto de las listas y las tags de las listas secundarías
</ol>
se cerraran antes de volver a la lista principal. Ahora
<br>
<h3>Una lista sin ordenar</h3>
quizá le empiece a convenir sangrar el propio código
<ul>
conforme lo va escribiendo en HTML.
<li>Mercurio</li>
EJERCICIO 5. Instala Sublime Text
<li>Venus</li>
<li>Tierra</li>
</ul>
<br>
 Crea un documento y guárdalo como “tu
<h3>Una lista de glosario</h3>
nombre-Ejercicio 5.html”
<dl>
<dt>Término 1</dt>
 Prueba a escribir <html y dar tabulador.
<dd>Definición 1</dd>
 Ponte en el head y escribe <meta y da
<dt>Término 2</dt>
tabulador
<dd>Definición 2</dd>
 Ponte en el head y escribe <link y da
</dl>
<br>
tabulador
<h3>Listas anidadas</h3>
EJERCICIO 6. Crea un documento en html y
<ul>
copia en el <body> el contenido de la derecha.
<li>Uno
<ul>
Utiliza la función de autocompletar empezando la
<li>Uno</li>
etiqueta y haciendo clic en el tabulador. Revisa el
<li>Dos</li>
resultado para ver los distintos tipos de listas. Pon
<li>Tres</li>
el fondo de la página de un color verde.
</ul>
</li>
<li>Dos</li>
<li>Tres</li>
</ul>
9
Junto con encabezados y párrafos, son otro de los elementos HTML más comunes. Pueden darse cinco
tipos diferentes de listas, cada uno con tags distintas, aunque con alguna en común:
IES GUADALERZAS
Informática TIC II
2020-21
EJERCICIO 7.
Crea un documento HTML con el contenido de la receta
para churros de la derecha, utilizando encabezado para el título y listas
para el resto de elementos. (no poner saltos de línea). Pon el fondo de la
página de un color azul y el texto blanco.
3.5 IMÁGENES
Podemos empotrar imágenes dentro de una página web empleando la etiqueta:
<img> </img>, a la que hay que decirle el recurso de imagen que ha de
cargar para eso se utiliza el atributo src, (source en inglés que significa
origen o fuente).
<img src=”imagen.png” width="230" height="200"
alt="imagen cesta"></img>
La etiqueta img admite otros atributos (excepto alt todos obsoletos):
 width=”ancho”: Se utiliza para especificar el ancho de la imagen.
 height=”alto”: Especifica el alto de la imagen.
 alt=”comentario”, o title: Define un texto alternativo, que se verá si
el ratón pasa por la imagen o si el navegador no puede cargar la imagen.
 border=”tamaño”: Especifica el tamaño del borde de la imagen.
Juan Pablo Aceña
Página
Crea una carpeta que se llame ejercicio 8, y dentro de ella una que se llame
imagenes (sin tilde). Busca dos imágenes en internet y guarda una dentro de la carpeta “ejercicio
8” y otra dentro de la carpeta “imagenes”. Crea un documento HTML, cambia el color del fondo y
crea un documento como el siguiente. Utiliza títulos para los textos. Da el formato a la imagen que
indica su título. Para centrar las imágenes inclúyelas en un párrafo y utiliza align para centrar el
contenido del mismo (este método está en desuso eh HTML 5 se hace mediante CSS)
10
EJERCICIO 8.
IES GUADALERZAS
Informática TIC II
2020-21
Foto insertada desde la web que ocupa 300 px de ancho
Foto insertada desde el mismo nivel que este archivo que ocupa 500 px y centrada
Foto insertada desde la carpeta imágenes que ocupa el 30 % del ancho de la página y a la derecha
3.6 SONIDOS
La etiqueta <audio> sirve para inserta un reproductor de sonido
en html5, ahora es posible insertar una canción o cualquier música para
dar vida y alegría a nuestra página web. Entre la etiqueta de apertura y
cierre es recomendable colocar un aviso en texto, este texto se mostrará en caso el navegador del usuario no sea
compatible o no reconozca dicho elemento de audio.
<audio src="ejemplo.mp3" controls> este es un elemento de audio no soportado por tu navegador,
prueba con otro </audio>
(más información)
EJERCICIO 9.
En el ejercicio 8 crea otra carpeta que se llame “sonidos”, guarda en ella un mp3 y
enlázalo al principio de la página. Sigue guardándolo todo como ejercicio 8.
3.7 VÍNCULOS, LINKS, ENLACES, HIPERVÍNCULOS…
Una de las características más importante de HTML es el enlace o hipervínculo, que permite la conexión
desde un recurso web a otro. Se crean con la etiqueta <a>
El principal atributo es href que define el recurso enlazado a través
de una URI.
<a href="http://www.guadalerzas.es/">Web del
instituto</a>
El atributo href no tiene por qué ser, como en el ejemplo anterior,
una url de un dominio si no que puede ser también:

Una página web dentro del directorio donde se encuentran nuestras páginas:
<a href=”/carpeta1/carpeta2/….../actividad2.html”>Actividad 2</a>

Una dirección de correo electrónico:
O bien, otra zona dentro del mismo documento para ello hay que crear una marca (ancla) en el destino
que se hace con un enlace con atributo id y luego enlazarlo desde otra zona con un enlace en el que
en el atributo href incluimos el id de la marca precedido de #:
Enlazar al ancla (en la href indicar un id precedido del símbolo #):
Juan Pablo Aceña
Página

11
<a href=”mailto:micorreo@servidor.es”>Mi correo</a>
IES GUADALERZAS
Informática TIC II
2020-21
<a href=”#parrafo”>texto-enlace</a>
Crear el ancla (más abajo en la página):
<h1 id=”parrafo”>texto en destino</h1>
También se puede utilizar una imagen como un enlace, por ejemplo:
<a href=”ejemplo4.html”><img src=”dibujo.png”></img></a>.
Se utiliza el atributo target para definir donde queremos que se abra el documento al presionar sobre el
enlace. Target puede tomar los siguientes valores:


_blank carga el archivo vinculado en una ventana de navegador nueva.
_parent se utiliza cuando el enlace se encuentra en una página de marcos, carga el
archivo vinculado en el marco padre.
 _self carga el archivo vinculado en la misma ventana que el vínculo. Este destino es el
predeterminado, por lo que normalmente no es preciso especificarlo.
 _top *carga el archivo vinculado en la ventana completa del navegador, quita los marcos
que hubiera.
El siguiente ejemplo abre el enlace en una ventana nueva
<a href="http://www.guadalerzas.es/" target="_blank">Web del instituto</a>
EJERCICIO 10. Crear el archivo
Página
12
HTML del ejercicio. El documento
ha de quedar como sigue, la
primera parte (Enlaces favoritos)
accede en la misma página a la
sección correspondiente (crear
anclas) y la segunda enlaza con
los recursos. Utiliza <h1> para los
títulos. Los vínculos se han de
abrir en pestaña nueva. Fíjate en
que hay tres listas y en las línea
horizontales. En un principio
como todo está en la misma
página aunque pulses en
“Buscadores” y en “redes
sociales” no se moverá puesto
que ya está visible. Inserta dos
imágenes alegóricas desde la
web, una antes del título
“Buscadores” y otra antes del de
Redes sociales, hasta que te
aparezca el scroll a la derecha.
Crea un vínculo para volver al
menú inicial de enlaces al final de
cada sección.
Juan Pablo Aceña
IES GUADALERZAS
Informática TIC II
2020-21
3.8 ETIQUETAS DIV Y SPAN
La principal diferencia entre las etiquetas <div> y <span> es que en el primer caso se define como un
elemento en bloque y en la segunda como un elemento en línea (que no quiere decir una línea de texto).
3.8.1 Etiqueta <div>
En un documento HTML el elemento "div" permite crear divisiones o
contenedores, también llamadas secciones o zonas. Las divisiones se utilizan para
agrupar y posicionar elementos y aplicarles estilos. Un <div> puede contener a su ve
otros div en su interior.
En el ejemplo de la derecha se puede comprobar el comportamiento de un
elemento div. Cópialo en un documento y comprueba el resultado. ¿Cómo se coloca
el primer saludo? ¿y el segundo? El cambio de color ¿a quién afecta?
3.8.2
Etiqueta <span>
También funciona como un contenedor, pero en este caso será un contenedor en línea. Por ejemplo, para
destacar una palabra o expresión dentro de un párrafo utilizaremos la etiqueta <span> para encerrar esa palabra
o expresión y luego ponerle un estilo mediante un atributo como veremos más adelante.
EJERCICIO 11. Prueba a escribir en una página el ejemplo anterior y luego a repetirlo debajo
pero cambiando span por div. Analiza el resultado.
3.8.3 Estructura de una página
En HTML 4 / XHTML 1 la única etiqueta para definir agrupaciones de contenido era prácticamente la etiqueta
<div>. Por ello, cualquier página de tamaño medio acababa teniendo muchos elementos <div>, en algunos casos
para organizar el contenido de la página, pero también para aplicar estilos de carácter decorativo. El código
fuente resultaba así difícil de entender y mantener.
En HTML 5 se ha querido mejorar esa situación
introduciendo varias etiquetas para definir
diferentes tipos de secciones: <article>, <section>,
<nav>, <aside> y <main> y todas ellas, a su vez,
pueden tener elementos <header> y <footer>.
Página
(más información)
13
Una página de ejemplo podría quedar:
Juan Pablo Aceña
IES GUADALERZAS
Informática TIC II
2020-21
3.8.4 Grid
Una forma ayudar a distribuir elementos en una página y que responda a las diferentes tamaños de pantalla
son los Grid, los FlexBox y los media query en CSS. Simplemente los nombramos
puesto que escapan al
nivel tratado en este curso. Son muy utilizados, sobre todo en Web Apps
4
CSS
CSS es el lenguaje utilizado para definir el modo de presentar el código HTML de una página web. Entre
otras cosas, la utilización de CSS es muy práctica, ya que permite separar la estructura de un documento (HTML)
de su diseño o presentación (CSS). De esta manera, un solo archivo CSS puede modificar el aspecto de varios
documentos HTML, de modo que, en caso de realizar cambios de diseño general, solo sería necesario modificar
dicho archivo y no cada uno de los documentos HTML.
En este enlace puedes ver la misma página (mismo contenido) con distinto HTML
REFERENCIAS CSS EN W3SCHOOLLS
REFERENCIAS CSS EN MOZILLA DEVELOPER
4.1 Selectores básicos
El selector es la forma de configurar qué etiquetas se verán afectadas por las propiedades de un estilo
concreto. Los tipos de selectores básicos que se pueden establecer son los siguientes:
4.1.1
Selectores por tipo
Se aplican a un determinado elemento, por ejemplo, p, div, table, ul…. Y
afectarán a todos los elementos de este tipo que aparezcan en el documento.
4.1.2
Selectores de clase
Se indican comenzando con un punto “.” en la definición de estilos y luego
se aplican utilizando el atributo “class”
<p class=”clase1”> …</p>
En el ejemplo al párrafo se la agrega la clase1 por lo que le afectará todo el estilo asociado a dicha clase.
Página
Selectores por id
Se basa en crear en el estilo un identificador comenzando con el símbolo “ # ”
y luego emplearlo dentro del código con el atributo “id”. Sólo se puede aplicar a un
elemento dentro del código y no se puede repetir.
<p id=”id1”> …</p>
Si un elemento HTML se ve afectado por más de un tipo de selector, el de mayor prioridad será el que
afecte al identificador, seguido del de clase y, finalmente, del de tipo. En este caso, entre las propiedades que se
repitan en esos selectores, se aplicarán las del selector de mayor prioridad.
14
4.1.3
Juan Pablo Aceña
IES GUADALERZAS
Informática TIC II
2020-21
4.1.4
Selector universal
Si quiero aplicar un estilo a todos los elementos, por ejemplo, la fuente de
todo lo que aparece en la página o los márgenes utilizo el selector universal ”*”.
*{
color: red;
margin: 20px;
}
Otros selectores
Existen otros muchos selectores como los selectores descendientes, selectores hijo, selectores por
atributo, Pseudoclases…
4.1.5
MÁS INFORMACIÓN SOBRE SELECTORES
4.2 COLOCACIÓN DEL CÓDIGO CSS
Existen varias distintas de vincular código CSS a una estructura HTML:
4.2.1
Estilo en línea
Es colocar el atributo style en el HTML dentro de la etiqueta que se quiere modificar. La estructura del
atributo es:
style=”propiedad:valor; propiedad:valor;”
<div style="width: 100px; height: 100px; background-color: red;">….</div>
Esta manera de incluir el código CSS es desaconsejable, por varios motivos, si dos etiquetas han de llevar el
mismo estilo hay que poner la etiqueta dos veces (y si en el futuro hay que cambiarla habrá que hacerlo en los
dos sitios), dificultan leer el contenido de la página durante la edición.
4.2.2
Estilo incrustado
Se coloca dentro del head con la siguiente estructura
<head>
<style>
Selector {
Propiedad 1: valor 1;
Propiedad 2: valor 2;
Propiedad 3: valor 3;
….
}
</style>
</head>
4.2.3
<style>
p {color:red;}
</style>
Estilo vinculado
Se crea un documento de texto con extensión “.css” y en él se escriben los estilos uno debajo del otro como
se haría entre las etiquetas <style>
Y luego se incluye dentro del <head> del documento html la etiqueta <link…> que le indica al html donde
ha de buscar los estilos. Puede haber varias etiquetas <link…> para vincular varias hojas de estilo.
<link rel="stylesheet" type=”text/css” href="estilos/styles.css"/>
El atributo href es el que nos indica la ubicación del archivo, en el ejemplo el archivo css se encuentra en la
carpeta “estilos” y dentro de ella un archivo que se llama “styles.css”
Página
Para modificar el color del texto que incluye un elemento, se utiliza la propiedad color, mientras que, para
modificar el color de fondo del elemento en cuestión, la propiedad correspondiente es background-color.
15
4.3 PROPIEDADES RELACIONADAS CON LOS COLORES
Juan Pablo Aceña
IES GUADALERZAS
Informática TIC II
2020-21
Los valores de un color se pueden definir en diferentes formatos, la mayoría de los cuales indican las
proporciones de los tres colores básicos utilizados para representar toda la gama de colores en las pantallas: rojo,
verde y azul (RGB).
Algunos de los métodos que permiten establecer un valor
cromático son los siguientes:





Nombre del color: blue, red, orange, green ...
Proporción de cada valor RGB en decimales, de O a 255:
rgb(255, O, O).
Proporción de cada valor RGB en código hexadecimal
precedido de almohadilla: #FFOOOO (cada par valores
hexadecimales corresponden a un valor decimal de 0 a
255).
Proporción de cada valor RGB en porcentajes: rgb(100%,
0%, 0%).
Proporción de cada valor RGB, más un valor de O a 1 (alpha) que indica la transparencia de dicho color:
rgba(255, O, O, 0.5).
Herramienta para elegir colores de ADOBE
Nombres y códigos de colores html
4.4 UNIDADES DE MEDIDA
Para indicar el tamaño de los diferentes elementos se pueden utilizar diferentes tipos de medidas (se puede
encontrar más información aquí) pero las más habituales son:



px: pixel
em: relativo al tamaño de letra del elemento padre
%: un porcentaje relativo al tamaño que ocuparía el bloque
Al reflejar el tamaño en una propiedad es necesario indicar las unidades (px, em, %...)
El tamaño de un elemento viene definido por sus propiedades width (ancho) y height (alto), que pueden
tener un valor en píxeles (absoluto) o en porcentaje (relativo al tamaño del elemento que lo contiene).
En lugar de establecer un tamaño fijo para un elemento, también existe la posibilidad de asignar un tamaño
mínimo y máximo. El tamaño máximo se define mediante las propiedades max-width y max-height, y su efecto es
más visible cuando se aplica a un elemento de bloque, que tiende a ocupar todo el ancho disponible por defecto.
El tamaño mínimo de un elemento se puede establecer mediante
las propiedades min-width y min-height .
Con estas 3 propiedades de CSS conseguimos que a) El elemento se
centre en la página, b) tenga un ancho del 90% de la ventana y c) su
ancho nunca sea superior a 1200 pixeles.
.container {
margin: 0 auto;
width: 90%;
max-width: 1200px;
}
4.5 PROPIEDADES RELACIONADAS CON EL TEXTO

text-align: Define la alineación del texto dentro del elemento. Los valores más comunes son left, right,
center y justify (alineación justificada).
verical-align: especifica el alineado vertical de un elemento en línea o una celda de una tabla. Admite,
entre otros valores baseline, sub, super, text-top, text-bottom, middle, top, bottom…
Juan Pablo Aceña
Página

16
Además del color, los textos tienen muchas otras propiedades que pueden modificarse. Algunas de las
propiedades que modifican el aspecto de un texto tiene como prefijo font o text, por ejemplo:
IES GUADALERZAS







Informática TIC II
2020-21
text-decoration: Permite dibujar una línea subrayándola por encima o por debajo, o tachándola. Los
valores pueden ser underline (subrayado), none (quita la propiedad de subrayado si la tuviera, como, por
ejemplo, en enlaces), overline (línea encima del texto) y line-through (tachado).
text-transform: Transforma en mayúsculas o minúsculas el texto contenido. Los valores pueden ser
uppercase (mayúsculas), lowercase (minúsculas) y capitalize (la primera letra de cada palabra en
mayúscula).
font-size: Define el tamaño del texto contenido. Los valores son numéricos, para la unidad de medida
utilizada, que puede ser una de las siguientes: px (píxeles: 12px), pt (puntos: 12pt), % (porcentaje
respecto a cómo se mostraría siendo 100 % ningún cambio), em (similar al porcentaje, pero tomando 1
como base: 120 % = 1.2em). También se puede utilizar como valor un tamaño relativo, como x-small,
small, medium, large o x-large.
font-family: Establece el tipo de fuente. El valor es una lista con los nombres de las fuentes separados
con comas. Los nombres compuestos por más de una palabra se deben poner entre comillas. El
navegador busca, entre las fuentes de la lista, la primera que está instalada para aplicarla y, en caso de no
encontrar ninguna, aplica la fuente por defecto. Existen nombres de fuentes genéricos, como serif, sansserif o monospace que aplican la fuente por defecto del navegador con dicho estilo, por ejemplo: fontfamily: Helvetica, Verdana, "Times New Roman", serif;.
font-style: Permite aplicar cursiva al texto. El valor italic transforma el texto en cursiva, mientras que el
valor normal retira dicha propiedad.
font-weight: Establece el grosor del trazo del texto. Aunque existen múltiples valores, muy pocas fuentes
soportan diferentes grosores más allá de la negrita y del texto normal. El valor bold transforma el texto a
negrita y normal la elimina.
text-shadow: Dibuja una sombra alrededor del texto. Se especifican cuatro valores separados por
espacios. El primer valor corresponde al desplazamiento hacia la derecha de la sombra (hacia la izquierda
si el valor es negativo). El segundo valor indica el desplazamiento hacia abajo (hacia arriba si es negativo).
El tercer valor es opcional e indica el difuminado de la sombra (cuanto mayor sea el valor, más se
expandirá el sombreado). Finalmente, el último valor indica el color de la sombra. Un ejemplo textshadow: -4px 2px 5px grey; es sombreado desplazado 4 píxeles de la izquierda, 3 hacia abajo, difuminado
de 5 píxeles y de color gris.
EJERCICIO 12. Crea un documento HTML, utilizando listas y encabezados que muestre este
resultado, en un cuadro centrado (margin:auto)
a) Utiliza estilos de lista para que tengan los estilos
de la imagen. Revisa este enlace o este
b) Para la lista desordenada, fíjate que todos son con
letra cursiva, hazlo con un estilo. ¿lo pondrías
asociado a <li>? ¿qué pasa? ¿sería mejor con una
clase?
c) Cambia el fondo del texto de las entradas de la
lista ordenada.
Página
estilo diferentes para cada uno. Se deben utilizar todas las propiedades del texto estudiadas en el
epígrafe anterior de modo que se pueda observar el efecto que cada una de ellas tiene en función
de sus diferentes valores. El CSS ha de estar contenido en un archivo externo Prueba a utilizar
fuentes de Google
17
EJERCICIO 13. Crea un documento web con 4 párrafos y establece un color, un tamaño y un
Juan Pablo Aceña
IES GUADALERZAS
Informática TIC II
2020-21
4.6 PROPIEDADES RELACIONADAS CON LOS BORDES
En un elemento HTML, además de un color de fondo, se puede añadir un borde alrededor del mismo. Este
borde no tiene por qué ser uniforme, si no que puede tener propiedades diferentes en cada lado.





border-width: Añade grosor al borde de los cuatro lados. Se suele establecer en píxeles (px) y,
opcionalmente, de forma independiente a cada lado a través de las propiedades border-left-width,
border-right-width, border-top-width y border-bottom-width.
border-style: Tipo de trazo con el que se dibuja el borde. Los valores más comunes son solid (línea
continua), dashed (línea discontinua), dotted (con puntos) o double (línea continua doble). Como
en la anterior también se puede especificar el lado de manera individual.
border-color: Permite definir el color del borde. Como sucede con las anteriores propiedades, se
puede indicar individualmente qué lado se desea modificar.
border: Propiedad genérica que permite establecer las tres propiedades anteriores a la vez. Para
ello, se debe especificar una medida, un estilo y un color separados por un espacio, sin importar el
orden. Un ejemplo sería border: 2px solid red; (borde rojo continuo de dos píxeles de grosor).
También se puede establecer cada lado con las propiedades border-left, border-right, border-top y
border-bottom.
border-radius: Su valor se establece habitualmente en píxeles (px) y hace referencia al radio de
curvatura de las esquinas de un elemento. Para aplicar valores diferentes en cada esquina, es
necesario establecer cuatro medidas separadas de espacios (la primera se referirá a la esquina
superior izquierda y el resto continuarán en el sentido de las agujas del reloj), por ejemplo: borderradius: 5px 8px 5px 8px;.
En la imagen véase que el selector div afecta a ambos div y luego cada uno se ven afectados por las
propiedades de su id.
HTML
CSS
4.7 PROPIEDADES RELACIONADAS CON LOS MÁRGENES
Página
18
Al dibujar varios elementos seguidos con contenido y establecer un borde o color de fondo, resulta fácil
advertir que, en muchos casos, no existe ningún tipo de espaciado o margen entre dichos elementos ni entre el
borde de un elemento y su contenido. Para establecer un espacio de separación entre un elemento y los otros
elementos que lo rodean (o el borde del elemento que lo contiene), o entre el borde del elemento y su contenido,
CSS dispone de dos propiedades:
Juan Pablo Aceña
IES GUADALERZAS

Informática TIC II
2020-21
margin: Representa el espacio entre un elemento y los elementos que lo rodean. Se expresa en píxeles
(px) o porcentaje (con respecto al espacio total disponible en el elemento contenedor). Para modificar de
manera individual cada uno de los lados, se pueden utilizar los sufijos -left, -right, -top y -bottom, o bien
establecer las cuatro medidas separadas por espacios, las cuales se aplicarían
en el siguiente orden: arriba, derecha, abajo e izquierda (por ejemplo,
margin: 10px 15px 20px 6px;). Admite también el valor auto con lo que
intentaría distribuir los márgenes. Si utilizamos la palabra auto en alguna de
HTML
CSS

las posiciones nos permite que el margen se
ajuste de forma automática facilitando el
centrado de bloques.
padding: Representa el espacio o margen
interno entre el contenido y el borde de su
contenedor. Acepta los mismos valores que la
propiedad margin. También se pueden
modificar de forma individual.
Página
19
A la hora de calcular el tamaño de un elemento
el navegador cuenta, además del width o heigth, el
grosor del borde y los márgenes, esto es el Modelo
de Caja. En la imagen se ve lo que ocupará un
elemento sumando a su altura el resto de
elementos.
Juan Pablo Aceña
IES GUADALERZAS
Informática TIC II
2020-21
4.8 PROPIEDADES RELACIONADAS CON EL COMPORTAMIENTO COMO BLOQUE
Por defecto, los elementos de bloque ocupan todo el ancho del navegador, mientras que la anchura de los
elementos de línea varía en función del espacio que ocupe su contenido. En ambos casos, el tamaño vertical
siempre dependerá de lo que estos contienen.
La propiedad display permite convertir un elemento de línea en un elemento de bloque y viceversa,
también se puede utilizar para ocultar un elemento de la página, además de otros muchos valores. (Más
información)
Para modificar la forma en la que el navegador considera un elemento, se pueden establecer las siguientes
propiedades:



display: block. El elemento afectado se comporta como un elemento de bloque ocupando todo el ancho
del navegador y tomando las propiedades width y height que tenga asignado el elemento.
display: inline. El elemento se comporta como un elemento en línea, perdiendo las propiedades de
bloque.
display: inline-block. El elemento se establece como un bloque, pero se comporta como un elemento en
línea, al estilo de una imagen. Los cambios de tamaño tienen efecto en los elementos con esta propiedad.
EJERCICIO 14. Crea una galería de fotos del tema que quieras:



EJERCICIO 15. Crea el código HTML necesario para tener una disposición como la de la imagen.
Crea un archivo CSS vinculado. Utiliza los nombres de div del punto 3.8.3 para dar estructura a una
Juan Pablo Aceña
20



Las fotos se han de ver al mismo tamaño (aunque en origen tengan tamaños diferentes), pueden estar
alojadas o referenciadas donde queráis.
Juega con los colores (herramienta de Adobe) pon un borde a tu gusto
La página sólo contiene 2 <div>
Los divs han de ocupar el 70% de la página y estar centrados (utliza el valor auto en el margen que
corresponda.
El contenido está separado del borde superior e inferior y una imagen de otra
Para los títulos utiliza una fuente de google
Para centrar las imágenes, una forma es incluirlas en un <p> y centrar el contenido de este
Página

IES GUADALERZAS
Informática TIC II
2020-21
página. ¿Cómo harías para el contenido no estuviese pegado al borde de los contenedores? Los
colores pueden ser cualquiera, utiliza la herramienta de Adobe para que combinen.
<header>
<nav>
<main>
<aside>
<section>
<section>
EJERCICIO 16. Crea un documento web con dos elementos <div> y varios enlaces dentro de cada
uno. Utiliza un archivo css enlazado. En el primer <div>, los enlaces deberán tener un ancho de
150px y una altura de 50px. Además, el color de la fuente será blanco y cada texto presentará un
fondo de color distinto. Los textos se situarán uno junto a otro. En el segundo <div>, los enlaces
tendrán las mismas propiedades que en el primero, pero se situarán uno debajo del otro. El HTML
de ambos párrafos deberá ser idéntico, con la excepción de los atributos id y class.
4.8.1
FLOAT
Sirve para colocar algunos elementos uno al lado del otro (similar a inline-block pero lo trata el bloque
como bloque no como texto (no deja espacios entre ellos)
Página
21
La propiedad float de CSS es la que permite que los elementos floten sobre el lado que se indica, mientras
que el resto de los elementos que no tienen la propiedad
float definida se encuentran alrededor.
Juan Pablo Aceña
IES GUADALERZAS
Informática TIC II
2020-21
No todos los elementos son pasibles de incluir la propiedad float. Los elementos que soportan esta
propiedad son las divisiones (div), imágenes (img), párrafos (p) y las listas (ul y ol). Esta propiedad puede tomar los
valores right, left y none
EJERCICIO 17. Determinar las reglas
CSS necesarias para que el código html
adjunto tenga un resultado similar al
mostrado en la siguiente imagen: (aquí
puedes ver lo que es cada código en UTF8). Tienes que utilizar la etiqueta span. El
texto tiene un padding de 0.5em. Para
entender las entidades utilizadas leer
esta documentación
<div>
« Anterior   Siguiente »
</div>
4.9 PROPIEDADES RELACIONADAS CON EL POSICIONAMIENTO
El posicionamiento de los elementos de la página web se realiza según la estructura HTML establecida. Así, el
navegador los muestra en el orden determinado por el código: unos dentro de otros o unos debajo de otros si son
elementos de bloque adyacentes. Sin embargo, este comportamiento se puede modificar para obligar al
navegador a dibujar un elemento en un lugar distinto al original, lo que se consigue con la propiedad de CSS
position:

Página
22

position: static; Es el valor por defecto que, después de cada elemento de bloque, realiza un salto de
línea para, a continuación, añadir debajo el siguiente elemento, según el orden establecido en la
estructura HTML. Es posible modificar el tamaño ocupado por un elemento añadiéndole márgenes.
position: relative; De cara al resto de elementos de la página, un elemento con este valor en su
propiedad position ocupará el mismo espacio que si su valor fuera static. No obstante, se puede obligar al
navegador a desplazar la posición donde lo dibujará (sin que la posición del resto de elementos se vea
alterada) utilizando las propiedades top, bottom, left y right, (estas propiedades solo funcionan con la
posición relative, absolute y fixed) que desplazan el elemento una cantidad de píxeles a partir del lado
seleccionado. El desplazamiento es relativo a la posición que ocuparía si su posicionamiento fuese static.
Juan Pablo Aceña
IES GUADALERZAS


Informática TIC II
2020-21
position: absolute: Pierde el flujo que le correspondería en el orden HTML para situarse en la posición
que se le indique. Además, hay que tener en cuenta
que se «despega» del documento, es decir, que, para
el resto de elementos, la posición se interpreta como si
no estuviera ocupando espacio en el documento, de
forma similar a si se situara en una capa superior. Si se
dan valores de top y de left se coloca en relación al
último elemento padre que esté configurado como
relative, absolute o fixed.
position: fixed: Este valor es muy similar a absolute,
con la excepción de que utiliza la ventana, y no el
documento, como referencia para posicionarse. De esta forma, el elemento siempre estará visible
(incluso haciendo scroll sobre el documento), lo que resulta muy útil, por ejemplo, para crear barras de
navegación sean fácilmente accesibles al usuario.
4.10 PROPIEDADES RELACIONADAS CON IMÁGENES DE FONDO
Para establecer una imagen de fondo en un elemento, se utilizan estas propiedades:



background-image. Su valor será la ruta a la imagen desde el directorio donde se encuentra el archivo
CSS. Esta ruta debe incluirse entre comillas simples y paréntesis, precedida de la palabra url, así:
background-image: url(“ . ./img.png”);.
background-position. En el caso de que la imagen sea más pequeña que el elemento, esta propiedad
establece la alineación vertical y horizontal de la misma. Se establecen dos valores separados por espacio:
la alineación horizontal, que puede ser left, center o right , y la alineación vertical, que puede ser top,
center o bottom.
background-repeat. Si la imagen es más
pequeña que el elemento, se repetirá, por
defecto, horizontal y verticalmente hasta
ocupar todo el espacio disponible. Este
comportamiento se puede modificar con los
valores no-repeat (no se repite), repeat-x
(se repite horizontalmente) o repeat-y (se
repite verticalmente).
EJERCICIO 18. Crea tres bloques <div> de 200px de ancho y 200px de alto. Asigna a cada uno de
ellos una imagen de fondo de 5O x 5O px (background-size) y un borde distinto. Se deberán cumplir
los siguientes requisitos:
a) En el primer bloque, la imagen de fondo no se repetirá y estará centrada tanto vertical como
horizontalmente.
b) En el segundo bloque, la imagen se repetirá horizontalmente y estará situada en la parte inferior.
c) En el tercer bloque, la imagen se repetirá verticalmente y se situará a la derecha.
Página
imagen. Para ello crea el código CSS necesario. Hazlo con estilos incrustados. Entre otras, has de
utilizar las propiedades display, line-height, position, top. Es preciso tener en cuenta que el texto
aparece centrado y los elementos son de 150x60.
23
EJERCICIO 19. Partiendo del código HTML adjunto conseguir una distribución similar al de la
Juan Pablo Aceña
IES GUADALERZAS
Informática TIC II
2020-21
EJERCICIO 20. Crea un documento HTML con tres bloques de200
píxeles de ancho y alto. Dichos bloques deberán tener un color de fondo
semitransparente y superponerse utilizando la propiedad position, junto
con left, bottom y top, con el fin de observar cómo se mezclan los
colores. Utiliza la propiedad z-index para la superposición.
EJERCICIO 21. Crea los códigos HTML y CSS necesarios para visualizar
este resultado en pantalla. Crea los estilos en un
archivo aparte y enlázalos en el html. No puedes
utilizar etiquetas HTML para modificar el aspecto del
texto, sino, únicamente, la etiqueta <span> junto con
clases para los colores y el formato (negrita,
subrayado, etc.). Un elemento HTML puede tener más
de una clase si estas se separan por espacios, por
ejemplo: <span class="rojo negrita">.
Una vez que lo tengas, amplía el documento HTML y el archivo CSS creados aplicando los siguientes
cambios:
 Añade una imagen de fondo enlazada. De forma que la imagen se ajuste al ancho de la
pantalla. (background-size).
 Incluye toda la receta dentro de un div blanco centrado del 70 % de la hoja y algo
transparente. Y agrega una imagen a la derecha de la receta.
 Añade, después de los ingredientes, una serie de párrafos en los que expliques, por
ejemplo, la preparación de un bizcocho, de modo que eltamaño total del contenido obligue
al usuario a hacer scroll vertical.
 Añade un elemento <header> como encabezado de la página (dentro del div general). Ha
de ocupar el 80 % de la página y estar centrado. Deberá tener un fondo de color y estar
situado a modo de barra superior en la página, incluye en él el título de la receta. Se
mantendrá en esa posición fija (a 10px del borde superior) incluso cuando el usuario haga
scroll. Para que se situe sobre el fondo utiliza la propiedad z-index.
 El div del fondo deberás agregarle un margen superior para que se pueda leer la parte
inicial de la página.
EJERCICIO 22.
Entre las muchas novedades de la versión 3 de CSS están las animaciones. Esto
permite que, al cambiar alguna propiedad del elemento, como el tamaño, la posición o el color, se
realice en forma de animación en un tiempo determinado en lugar de pasar inmediatamente de un
estado a otro. Busca información sobre la propiedad transition de CSS y sobre cómo se consigue
que, al situar el cursor sobre el elemento, se inicie, por ejemplo, una animación que modifique el
tamaño o el color del mismo. Crea para ello un html en el que insertes una imagen, o un texto y se
produzca el efecto.
5.1 TABLAS
Las tablas organizan datos por filas y columnas de celdas. Una tabla se crea con la etiqueta <table>, para
generar las celdas se crean filas con la etiqueta <tr> y dentro de ella las celdas con la etiqueta <td>. Se pueden
Juan Pablo Aceña
24
OTROS ELEMENTOS HTML
Página
5
IES GUADALERZAS
Informática TIC II
2020-21
crear celdas de encabezado utilizando <th> en lugar de <td>. Las celdas pueden contener cualquier tipo de dato:
imágenes, enlaces, texto, formularios, listas etc.
EJERCICIO 23. Crea un documento HTML e incluye en él la siguiente tabla. Analiza cada uno de
los elementos de estilo y de los que conforman la tabla. Utiliza para los estilos padding y bordercollapse junto con border-spacing
EJERCICIO 24. Copia el código de la
Para facilitar el uso de estilos de tabla se pueden utilizar las etiquetas thead, tbody y tfoot
Juan Pablo Aceña
Página
a) Prueba a eliminar la propiedad bordercollapse. ¿Qué pasa?, Vuelve a ponerla
b) Pon un color de fondo a la página (pero
dentro de los estilos)
c) Cambia el tipo de letra a Courier New a
toda la página (utiliza el selector *)
d) Que aparezcan las líneas de división en el
encabezado
e) Todas las columnas tengan el mismo
ancho
f) Las filas tengan un alto de 100 px y el
texto aparezca centrado vertical y
horizontalmente.
g) La tabla ocupe todo el ancho de la ventana
del navegador.
h) El título aparezca en negrita y de color azul
i) El fondo de la cabecera (th) de la tabla esté en azul y el texto en blanco
25
derecha y modifícalo para:
IES GUADALERZAS
Informática TIC II
2020-21
5.1.1
UNIFICACIÓN DE CELDAS
En algunas ocasiones, puede ser necesario unificar dos o más
celdas en una sola que pasará a ocupar el lugar de aquellas afectadas.
Estas unificaciones pueden ser llevadas a cabo con los atributos
“rowspan” (para unificación vertical) y “colspan” (para unificación
horizontal).
EJERCICIO 25. Dada la estructura de archivos
Ejercicio25/queen.html
Ejercicio25/estilos.css
Ejercicio25/imagenes/queen.jpg
El ejercicio ha de quedar algo similar a la imagen
adjunta.
Indicaciones:







Todos los estilos están especificados en el archivo
"estilos.css".
En estas tablas se indican algunas características.
El tipo de letra utilizado en todo el documento es
Verdana, utilizar el selector (*)
La imagen de Queen es a tu elección
El tamaño de la imagen es 400 x 200 píxeles.
El borde de la tabla es de 1px y color negro.
El espacio entre en contenido de las celdas de la tabla y su borde es
10px.
El enlace al sitio web oficial de Queen debe abrirse en una pestaña
nueva.
Página
Convierte los títulos de las canciones en un enlace a un vídeo de la misma.
26

Juan Pablo Aceña
IES GUADALERZAS
Informática TIC II
2020-21
EJERCICIO 26. Crea una tabla como la siguiente. Utiliza estilo para dar formato a las celdas. Fíjate
la tabla pon una imagen (elígela tú). Recuerda que dicho recurso ha de estar guardado junto a la
tabla. Utiliza estilos. La tabla ha de ocupar todo el ancho de la vista.
Juan Pablo Aceña
Página
EJERCICIO 27. Aplicando los atributos de las tablas, crea una como la siguiente. Para el fondo de
27
que el contenido de algunas celdas está centrado. La tabla ha de ocupar el 70% de la hoja y estar
centrada.
IES GUADALERZAS
Informática TIC II
2020-21
EJERCICIO 28. Realiza una tabla como la siguiente, pon el grosor de borde que quieras. Guarda el
ejercicio como “Tablas y vínculos+nombre+.html”. La tabla puede ser con otra temática que se te
ocurra, por ejemplo, recursos sobre seguridad, o personajes históricos… pero ha de tener varias
celdas expandidas y una columna compuesta de hipervínculos.
Tema
HTML una página relacionada
BLUE GRIFFON
MICROSOFT EXPRESSION WEB (free)
Vínculo1
Página para aprender HTML
Descripción
Describe brevemente la página
Enlace a canal de youtube
Describe brevemente el canal
Enlace a la página
Enlace a la página
Describe brevemente la página
Describe brevemente la página
5.2 FORMULARIOS
Un formulario es un conjunto de controles (botones, cajas de texto, casillas de verificación, botones radio,
etc) que permiten al usuario introducir datos y enviarlos al servidor web para su procesamiento. La etiqueta
<form> es un elemento de bloque. En su interior puede haber cualquier elemento típico de una página web
(párrafos, imágenes, divisiones, listas, tablas, etc.), además de las etiquetas que crean los controles.
La etiqueta que delimita un formulario es la etiqueta <form> ...</form>. Los atributos más importantes
son:
Si el atributo method no está establecido, el formulario se comporta como si el valor fuera get.
El formulario permite agregar diferentes elementos, entre ellos <input> o <select>
Juan Pablo Aceña
28

action: contiene el nombre del agente que
procesará los datos remitidos al servidor (por
ejemplo, un script de PHP o jsp) o también
que sea enviado por correo
mailto:direcciondelcorreo@correo.com
method: define la manera de enviar los datos
al servidor. Los valores posibles son:
o get: los valores enviados se añaden a
la dirección indicada en el atributo
action.
o post: los valores se envían de forma separada.
Página

IES GUADALERZAS
5.2.1
Informática TIC II
2020-21
Atributos del elemento <input>
Permite crear diferentes controles de formulario. Sus principales atributos son



name: identifica al control y es obligatorio.
value: es el valor por defecto al enviar el formulario a no ser que, como en los campos de texto se
pueda introducir otro valor. En el caso de los select es el valor asociado a cada selección.
type: indica el tipo de control del que se trata.
 text. Caja de texto donde el usuario introduce el dato. Si el texto es de más de una línea se
utiliza el elemento textarea
 password. Caja de texto para la introducción de claves (aparecen asteriscos "*" en lugar del
valor).
 checkbox. Casilla de verificación que toma el valor de activo o desactivo.
 radio. Casillas de selección entre varias opciones.
 file. Crea un control de selección de ficheros.
 reset. Borra todos los valores de los controles del formulario.
 submit. Crea un botón configurado en el atributo action del elemento form que envía
todos los datos del formulario al servidor.
5.2.2 Atributos del elemento <select>
El elemento <select> crea un menú desplegable, en el que cada opción es representada por el elemento option.
Los atributos de <select> son:
 name. Sirve de referencia de control para el formulario.
 size. Permite establecer el número de opciones visibles antes de pinchar sobre la barra de
desplazamiento del elemento <select>.
 multiple. Si está activado por defecto, este atributo permite elegir más de una opción.
Los atributos de <option> son:
 selected. Determina qué valor está preelegido.
 value. Determina el valor de la opción, para el momento de enviar el formulario.
(MÁS INFORMACIÓN SOBRE LOS ELEMENTOS DE UN FORMULARIO)
EJERCICIO 29. . Copia el ejemplo de
formulario anterior y añádele los elementos
necesarios para que el documento tenga el
siguiente aspecto:
Necesitarás, aparte de lo ya incluido,
checkbox, y file. Haz que action lo dirija a un
archivo llamado validacion.js
Pon el método de envío del formulario en
get y haz una prueba de envío, mira la barra
de direcciones, cambia el envío por post y
vuelve a hacer la prueba ¿qué diferencia
observas?
Juan Pablo Aceña
Página
simule un pedido de comida por internet,
utilizando todos los elementos vistos y los
que te parezcan oportunos, en el formulario se puede poner los datos del que pide el pedido y la
dirección de entrega, la bebida, la comida, las cantidades (estas pueden ir puestas al lado del
producto), se puede crear una tabla para una mejor distribución y la forma de pago para cuando la
entrega.
29
EJERCICIO 30. Crea un formulario que
IES GUADALERZAS
Informática TIC II
2020-21
5.3 INCRUSTAR ELEMENTOS. IFRAME
Se trata de una manera elegante de insertar contenido adicional en los documentos HTML. En el mejor de los
casos, el usuario de la página ni siquiera se da cuenta de que el contenido procede de otra fuente. Te contamos
cómo integrar el iframe en HTML.
El inline frame (<iframe>) crea un espacio dentro de la página, comportándose como “inline-block”, donde
los elementos añadidos operan de manera autónoma. De esta manera, por ejemplo, dependiendo del tamaño del
contenido incrustado, el iframe permite que el elemento cuente con su propia barra de desplazamiento.
Atributos de los iframe: (Más información)



src: el origen del contenido del marco.
id: para asociarle un identificador.
width y height: se pueden indicar como atributos o dentro del estilo.
5.3.1
Apertura de vínculos en iframes.
Si agregamos un tributo name al iframe indicando un enlace podría tener como target de destino dicho
iframe. Más información
Los <iframe> son para incrustar otras páginas web, pero existen otras formas de incrustar objetos como
<embed> y <object> que nos permiten incrustar documentos, imágenes svg…
EJERCICIO 31. Crea una tabla como esta en la que insertes lo que se indica. Distribuye los
tamaños para que ajusten al 100% (aprox) de la página, la primera columna el 15%. El tema es la
inteligencia artificial en el sector al que te quieres dedicar. Para los textos utiliza alguna fuente de
Google que te parezca apropiada. En todos los casos quédate sólo con la etiqueta iframe y elimina
todos los posibles divs que el sitio pueda agregar al código.
LA INTELIGENCIA ARTIFICIAL EN….
VIDEO 2 incrustado
Tamaño 540x600
Tamaño 540x600
DOCUMENTO EN MINIATURA 1


http://www.yumpu.com/es
http://issuu.com/
DOCUMENTO EN MINIATURA 2


http://es.calameo.com/
https://es.scribd.com/
Enlaces
Página que habla del tema 1
Página que habla del tema 2
Empresas
Enlace a Empresa 1
(Mapa incrustado)
Enlace a Empresa 2
(Mapa incrustado)
Podcast
Podcast 1
Podcast 2
Juan Pablo Aceña
30
Documentos
Video 1 incrustado
Página
Videos
IES GUADALERZAS
Informática TIC II
2020-21
EJERCICIO 32. Crea un archivo html y nómbralo como index.html. La distribución ha de ser como
en la imagen. Los requisitos:










El listado de ejercicios ha de contener los que hemos hecho solamente, NO TE FIJES EN
LOS NÚMEROS, REVISA LOS QUE HEMOS HECHO.
Utiliza la aplicación adobe color para tener una armonía visual.
Utilizar una fuente de Google.
El encabezado el 90 % de la página y centrado.
Para centrar bloques recuerda margin:auto;
Al hacer clic en cualquier actividad esta ha de cargarse en el marco central.
Tablas de actividades:
 introducción html 1-5
 imágenes-listas y vínculos 6-10
 CSS 11-21
 Tablas formularios e iframes 22-30
En las tablas agrega las filas necesarias para una correcta distribución.
Crea un marco en la parte inferior para que se vayan cargando en él los ejercicios.
 Para que lo puedas centrar fácilmente ponle la propiedad display:block;
 El ancho ha de ser el 95% y el alto de 800px.
Sube toda la estructura a tu alojamiento web.
5.4 MENÚS
Página
31
https://sites.google.com/site/html2bachillerato/capitulo-xix-menus
Juan Pablo Aceña
IES GUADALERZAS
Informática TIC II
2020-21
5.5 SCRIPT
A medida que aprendemos HTML vemos que se
trata de un lenguaje de marcas estupendo y muy
potente, pero también nos vamos dando cuenta que
ciertos detalles no se pueden cubrir sólo con HTML y CSS.
Para ello tenemos que hacer uso de un lenguaje de
programación, principalmente, Javascript. Javascript
tiene una estructura similar a otros lenguajes de
programación, pero viene integrado en los navegadores
de forma que puede interactuar directamente con los
documentos que se muestran.
Para incluir un script se utiliza:
(si no se pone el atributo type por defecto el contenido es “text/javascript”).
El código en javascript se incluye entre las etiquetas de apertura y cierre. También se puede incluir, y es lo
normal, el código en un archivo aparte con el atributo src como en otras etiquetas.
5.5.1
¿Qué es el DOM?
El modelo de objeto de documento (DOM) es una
interfaz de programación para los documentos HTML y
XML. Facilita una representación estructurada del
documento y define de qué manera los programas
pueden acceder, al fin de modificar, tanto su estructura,
estilo y contenido. El DOM da una representación del
documento como un grupo de nodos y objetos
estructurados que tienen propiedades y métodos.
Esencialmente, conecta las páginas web a scripts o
lenguajes de programación.
Una página web es un documento. Este documento
puede exhibirse en la ventana de un navegador o también
como código fuente HTML. Pero, en los dos casos, es el
mismo documento. El modelo de objeto de documento
(DOM) proporciona otras formas de presentar, guardar y
manipular este mismo documento. El DOM es una
representación completamente orientada al objeto de la página web y puede ser modificado con un lenguaje de
script como JavaScript.
(Más información DOM y JavaScript) (Referencia API WEB)
EJERCICIO 33. Ve la consola de Chrome (botón derecho inspeccionar) con el ejercicio 31 abierto
document.title y pulsa 
document.body
document.head
document.getElementsByTagName("h1") y revisa en el resultado la propiedad “outerText”
Juan Pablo Aceña
Página
a)
b)
c)
d)
32
y escribe:
IES GUADALERZAS
Informática TIC II
2020-21
e) document.getElementsByTagName("table") ¿Cuántos salen?. Para seleccionar uno sólo
document.getElementsByTagName("table")[nº] donde 0<n<número de tablas - 1 que haya
f) Prueba las funciones anteriores con “a” y otras etiquetas de las que aparecen.
g) Document.getElementById(“ “) pon entre las comillas un id de los que hayas utilizado o agrega uno al
ejercicio para que lo pueda seleccionar.
h) document.getElementsByTagName('a')[1].style.color="red"
i) document.title="prueba js" ¿qué ha pasado con el título?
j) document.getElementsByTagName("h1")[0].innerHTML="Título cambiado"
EJERCICIO 34. Ahora vamos a utilizar estos comandos
dentro de un script. Para ello guarda el ejercicio 32 como
ejercicio 34 y crea el siguiente script dentro del body.
Prueba alguno de los anteriores (a-g) y revisa el resultado
en la consola. Para los casos “h” e “i” :
Como ves se puede modificar el html con javascritp, igual se puede modificar estilos,
comportamientos…
EJERCICIO 35. Elige una frase de aquí. Vamos a practicar el evento “onclick()”. Dentro de un
documento HTML transcribe este código y pruébalo.
EJERCICIO 36. Recupera el ejercicio del pedido a domicilio. Elige alguno de los apartados que
dependiendo de la selección pueda o no mostrar otras opciones, p.e. un checkbox para envío a
domicilio de forma que, al marcarlo, oculte o muestre los campos de la dirección, o si quieres salsas
oculte o muestre la lista de salsas. Puede que tengas que incluir todo lo que quieres
ocultar/mostrar dentro de un div para que sea más fácil. El script inclúyelo en un archivo que se
llame como el ejercicio pero con extensión.js. Básate en lo siguiente para elaborar tu código:
CSS
SCRIPT
Abre el ejercicio y agrega una nueva tabla con los ejercicios de Javascript. Rescata dicho ejercicio
Juan Pablo Aceña
Página
EJERCICIO 37. Ahora vamos a agregar una nueva funcionalidad al ejercicio 32 (no el anterior).
33
https://norfipc.com/inf/javascript-como-ocultar-mostrar-elementos-paginas-web.html
https://desarrolloweb.com/articulos/1006.php se puede poner que envío a domicilio o recoger en
tienda (en el primero campos de dirección y en el segundo en este último caso un campo para la
hora de recogida y los datos de quién lo recoge)
IES GUADALERZAS
Informática TIC II
2020-21
(no ha de tener ningún script). Vamos a intentar que al mostrar una actividad aparezca sobre ella el
título del ejercicio:
a) Para ello, hay que insertar un título después de la
última tabla y ponerle un id.
b) Crear el siguiente script, que contiene la función que se ejecutará al hacer clic en el enlace, al
principio o al final del body. (uliza innerText en lugar innerHTML)
c) Y en cada vínculo agregar el evento onclick que llama a la función que se ha definido en el
script y se le da como argumento el texto que queremos que muestre en cada caso.
Página
34
d) Vamos a agregar la fecha en la parte superior de la página, para ello:
a. Crea un título en la parte superior de la página con estilo h2. Ponle de nombre fecha
b. Agrega un nuevo script y pega en él siguiente código:
Juan Pablo Aceña
Informática TIC II
2020-21
Página
35
IES GUADALERZAS
Juan Pablo Aceña
IES GUADALERZAS
Informática TIC II
2020-21
f)
Para maquetar la web
https://www.mockflow.com/
https://balsamiq.com/wireframes/
Cabecera con https://edit.org/
Vídeo de ayuda para hacer el fondo
CONCIENCIACIÓN SOBRE EL RECICLAJE (tamaño h1)
IMÁGENES (tamaño h3)
Poner 2 o más imágenes



VÍDEOS (tamaño h3)
Desde la web (copiando su URL).
Desde imágenes guardadas junto a mi página web.
Puedes insertar (si quieres otra tabla y distribuir las imágenes en ella
Inserta 2 o más vídeos (del repositorio que quieras)
Puedes insertar (si quieres otra tabla y distribuir los videos en ella
DOCUMENTOS (tamaño h3)
Inserta 2 o más documentos de un repositorio de documentos como
Puedes insertar (si quieres otra tabla y distribuir los videos en ella
http://www.yumpu.com/es
http://issuu.com/
http://es.calameo.com/
2. Ahora vamos a realizar nuestra primera página.

Descárgate el software BlueGriffon (lo
tienes en PAPAS).
Juan Pablo Aceña
Página
Imagina que eres el Community Manager de un personaje de
ficción, existente o que te hayas inventado. Vas a elaborarle
un perfil en el que vas a incluir los siguientes aspectos (y
otros que se te puedan ocurrir): foto, datos personales,
habilidades, aficiones, enlaces (sitios relacionados con él, o
páginas de amigos o …), consejos (para ser más felices o para
protegerse frente a algo o para no tener miedo, o para
asustar si es un monstruo…) o frases que han inspiran su
vida, merchandising…
36
Tema: Si tienes alguna idea para realizar un sitio web
diferente coméntalo, por ejemplo alguna afición tuya, o un
tema que te guste, o a lo mejor lo puedes emplear para
presentar el trabajo de alguna asignatura, o una página sobre
música, turismo del pueblo, Salvar la Antártdia, El reciclaje,
Leonardo Da Vinci, La tecnología Alienígena, Privacidad y
redes sociales.
IES GUADALERZAS
Informática TIC II
2020-21
Diseño: La maquetación de nuestro sitio, es la configuración de contenidos, menús y resto de funcionalidades de
la página.




Revisa sitios con de temática similar a la tuya para ver su distribución.
Una configuración básica es la de la imagen.
Lee más abajo los requisitos de la página para que veas lo que ha de contener.
Instálate la aplicación Cacoo en tu Google drive.
o Haz un documento en blanco.
o Mediante las herramientas “Web” maqueta tu página principal.
o Repite los pasos anteriores para maquetar tus dos páginas.
Aunque no es la intención del presente curso aprenderá a usar estilos, lo vamos a configurar para
desahogar el código html de nuestra página. Con los estilos, fundamentalmente, lo que se consigue es
separar la parte de contenidos de la parte de diseño de nuestro sitio.
Inicio




Abre BlueGriffon y crea dos documentos html en blaco.
Guarda ambos documentos, con el título que quieras, pero el nombre (del archivo que no el
título) ponle “index.html”.
Abre el panel de Estilos, y enlaza (mira en el documento de maquetación con BlueGriffon) una
hoja de estilos que llames estilos.css (creala en el momento de enlazarla “Nueva hoja de estilos”.
Enlaza para tu segundo documento también la misma hoja de estilos.






El sitio ha de constar de al menos
2 páginas diferentes, y será
posible navegar entre ellas. La
segunda han de tener un enlace
para volver a la primera.
Revisa sitios similares para ver
qué contenidos se pueden incluir.
Crea una carpeta con el nombre
de “Tu nombre-Web”, dentro de
ella crea otra que se llame
“imagenes” (fíjate en que no he
puesto tilde, esta pueden resultar
un problema a la hora de nombrar recursos). Todo lo que hagas ha de ser guardado en estas carpetas
antes de ser enlazado a la página web.
Tu página principal ha de tener un formato general como el de la imagen o con el menú en la parte
superior (sobre contenidos).
La parte de “Menú” y la de “Contenidos” pueden a su vez estar también divididas en otras zonas,
mediante tablas.
En todo sitio web, la primera página se ha de llamar index.html (es la que nos da por defecto el
servidor que aloja nuestra página nos mostrará al poner nuestra dirección), por tanto crea una página
con kompozer y guárdala dentro de la carpeta anterior con el nombre de index.html
Tu sitio web ha de estar compuesto al menos de dos páginas, una ya la has creado index.html, y otra
que has de crear ahora. Guárdala con el nombre que quieras, eso sí, siempre ha de aparecer la
extensión “.html”.
Juan Pablo Aceña
Página

37
Contenidos:
IES GUADALERZAS
Informática TIC II
2020-21

En cada una de las zonas has de incluir tablas para organizar los contenidos. Para estructurar ambas
páginas utiliza tablas, puedes anidar tablas, es decir, crear una tabla de pocas celdas y sin borde
pero grande que me de la estructura general, y luego anidar tablas menores para menús, y otros…
 Para el banner o cabecera de tu página puedes utilizar
1. http://creatubanner.com (sólo funciona en Internet Explorer)
 Para vincular a los contenidos, aparte del típico texto para enlazar con un recurso, podemos utilizar
iconos a modo de botón, para ello haz lo que se indica debajo.
i. Para los menús utiliza botones generados con las utilidades que se te ofrecen en los
siguientes enlaces.
ii. Una vez creados los mismos, los descargas y los guardas en la carpeta que creaste para tu
sitio web.
iii. Los insertas como imágenes y los enlazas a su contenido:
 http://www.pngfactory.net/
 http://www.iconfinder.com/free_icons
 http://www.iconarchive.com/
 http://www.iconostock.com/
 http://www.iconspedia.com
 http://logoease.com (generas el logo y le das a “guardar imagen como”
con el botón derecho)
 http://jirox.net/AsButtonGen
 http://bgpatterns.com
 Da formato a los textos, colores…, UTILIZA PREFERÍBLEMENTE ESTILOS, como se indica en el
documento adjunto.
 El sitio web ha de contener al menos los siguientes elementos en los apartados de tu elección:
i. 4 imágenes.
ii. Un enlace a la otra página creada por ti.
iii. Enlace para volver de la segunda página a la 1ª.
iv. 5 enlaces a otras páginas relacionadas.
v. Color/imagen de fondo.
vi. Textos.
vii. Títulos.
viii. Tablas.
ix. Dos videos de youtube, vimeo o metacafé. Compartir (share)Insertar, copiar el código
html que se genera y pegarlo como HTML donde se desee.
x. Un documento relacionado con el tema de vuestra página, de algún repositorio de
documentos (por ejemplo calameo, slideshare….)de los que ya conocéis. Insertar el
código html para compartir.
xi. Otros contenidos que consideres oportunos. (álbum de fotos, calendario…). Todo se
inserta copiando y pegando el código HTML correspondiente.
 Comprime la carpeta en la que has hecho tu sitio web con el nombre “nombre+web”.
 Súbela al apartado correspondiente dentro del Aula virtual.
1. https://www.mclibre.org/consultar/amaya/index.html
Juan Pablo Aceña
Página
https://dev.to/lupitacode/que-es-el-box-sizing-en-css-2pi9
38
Incrustar un calendario de google calendario, en la pestaña configurar del calendario viene el código.
IES GUADALERZAS
Informática TIC II
2020-21
https://www.abrirllave.com/html/que-es-html.php
https://www.codeavengers.com/
https://informaticaieslapandera.wordpress.com/tic-2obachillerato/
http://www.suarezdefigueroa.es/manuel/LMSGI/css/ejercss.html
HACER JUEGO EN HTML 5: https://www.youtube.com/watch?v=frsOtKBrDjA
https://uniwebsidad.com/libros/css/capitulo-15/ejercicio-4
Práctica 3. Creación de un sitio web sencillo: Enunciado
http://www.tutorialesprogramacionya.com/htmlya/
https://www.tutorialesprogramacionya.com/cssya/
https://edu.gcfglobal.org/es/search/?q=html#gsc.tab=0&gsc.ref=spanish&gsc.q=html&gsc.page=1
Ejercicios hoover
https://www.aprendoencasa.com/ejercicios-programacion-javascript/
https://es.khanacademy.org/computing/computer-programming/html-css#intro-to-css
 https://es.khanacademy.org/computing/computerprogramming/html-css


Práctica 5. Creación de un formulario: Enunciado (Página 78 del manual de html)
Archivos para recibir el formulario: Descargar
Página
39
https://lenguajecss.com/css/
Juan Pablo Aceña