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:[email protected]”>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> &laquo; Anterior &nbsp; Siguiente &raquo; </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:[email protected] 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
