Tecnología Eva IES Ramiro II

Fundamentos básicos de CSS - (Cascading Style Sheets o Hojas de Estilo en Cascada)

Crea una hoja de estilos CSS para aplicar formato al sitio web que comprende todas tus primeras prácticas. Estilos de borde de imágenes, color de fondo, estilos para los encabezados, etc.

- Crea un nuevo archivo con Visual Studio Code que llames style.css y comienza con los siguientes selectores:

Selector de tipo que afecta al body con color de fondo y tamaño de letra

Selectores de clase que afecta a las imágenes que llevan esa clase

En el documento html esa imagen deberá llevar el siguiente atributo:

Y en el encabezado "head" de todos los documentos html que queramos que les afecte esa hoja de estilos vamos a poner:

PRACTICA DISTINTOS TIPOS DE BORDES CON DIFERENTES PROPIEDADES PARA CADA UNA DE LAS IMÁGENES DE LA TABLA. CREA UN SELECTOR DE CLASE PARA CADA UNA DE LAS IMÁGENES Y PERSONALIZA EN LA HOJA DE ESTILOS.

Estilos de borde predefinidos

solid: Borde sólido y continuo.
dashed: Borde con líneas discontinuas.
dotted: Borde de puntos.
double: Borde de doble línea continua.
groove: Borde con un efecto de ranura 3D.
ridge: Borde con un efecto de cresta 3D.
inset: Borde con un efecto de hundimiento 3D.
outset: Borde con un efecto de relieve 3D.
none: Sin borde (valor por defecto).

Lenguaje HTML

El uso de gestores de contenido facilita la creación de páginas web para un usuario poco experto. Sin embargo, los diseñadores de páginas web se centran en la creación de páginas a partir del lenguaje en que están escritas: el lenguaje HTML (HyperText Markup Language).

Realiza las siguientes prácticas guardándolas individualmente con el número de la práctica, una palabra identificativa de la práctica y tu nombre en una carpeta que nombres HTML en tu drive.

:: Práctica 1: Empezar a programar en HTML con el bloc de notas - (P6 Donostiarra - p.111)

:: Práctica 2: Dar formato a un texto (descarga aquí el texto) - (P7-8 Donostiarra - p.113 usando otro texto -p.115 - p117)

- Cambia la extensión del archivo y guárdalo como P2_formato_nombre.html

(este archivo lo podrás abrir con el bloc de notas para seguir editando con la opción abrir con y se abrirá directamente con el navegador al pulsar doble clic; de esta forma podré hacer modificaciones y ver el resultado a tiempo real si guardamos y actualizamos la página en el navegador)

1. Coloca las etiqueta básicas de un archivo html (html, head, title y body) en su lugar correspondiente de tal forma que el texto quede todo dentro del "body"

2.Añade el título "Formato" entre las etiquetas <title> y </title> que están dentro de "head"

3.Comenzamos a dar formato. para ello introduce la siguiente etiqueta para el título del texto:

<h1><font color="red">Diseño y edición de páginas web</font></h1>

4.Ahora señalaremos los títulos de segundo orden. Para ello introduce las etiquetas <h2> y <font> con su atrbuto color en los títulos de segundo orden.

<h2><font color="blue">1. Diseño</font></h2> y lo mismo para 2. Edición

5. Para separar los párrafos añade las etiquetas <p> y </p> al inicio y final de cada párrafo.

- Guarda el archivo. Actualiza la página web en el navegador y observa el resultado.

6. Justifica los párrafos añadiendo el atributo align

<p align="justify">El diseño y edición [...] CSS y Java Script</p> y lo mismo con los otros

7. Señala como elementos de una lista los 4 puntos del apartado 2, utilizando las etiquetas <li> y </li> al inicio y final de cada elemento.

<li>Modificar y actualizar contenido</li> y lo mismo con los otros 3 puntos

8. Aplica a la etiqueta <font> con los atributos de tamaño (size) y tipo de letra (face) a los distintos párrafos.

Ejemplo: <font size="3" face="arial">El diseño y...Java Script</font>

9.Inserta la siguiente imagen centrada después del primer párrafo (descarga la imagen y guárdala en la misma carpeta que tienes tu archivo html)** y añade el siguiente código:

<div align="center">

<img src="imgdisenoweb.jpg" width="250" height="150" border="4"/>

</div>

10.Para finalizar esta práctica, vamos a añadir un enlace o vínculo a una página externa, a tu blog por ejemplo. Añade una frase al final que ponga Para más información pincha aquí y convierte la palabra aquí en un enlace a tu blog. Para ello utiliza la siguiente etiqueta:

Para más información pincha <a href="https://evatecnoleon.blogspot.com/p/inicio.html">aquí</a>

y por último averigua cómo puedes hacer para que se abra en una pestaña nueva!!!

EL RESULTADO DEBERÁ SER EL SIGUIENTE: Práctica estoy dando formato

Cuando termines esta práctica, sube el archivo P2_formato_nombre.html a tu blog y explica todas las nuevas etiquetas y atributos aprendidos completando el siguiente texto:

En esta segunda práctica hemos utlizado las etiquetas ........ para los distintos títulos siendo .... la de mayor tamaño. También podemos especificar el tamaño de la letra con la etiqueta ..... y el atributo ......, y para el color de la letra utilizado el atributo .... Los párrafos los separamos utilizando la etiqueta ..... y podemos justificar, centrar o alinear a la derecha e izquierda utilizando el atributo ...... También podemos realizar saltos de línea utilizando la etiqueta ... Esta etiqueta no tiene cierre.

Para insertar una imagen utilizamos la etiqueta ..... teniendo en cuenta la ruta en la que se encuentra la imagen y con cuidado de que el nombre y formato de la imagen coincidan. Con los atributo ..... y ...... especificamos el tamaño de la imagen y podemos también añadir el atributo ..... para el borde.

Por último, para insertar un enlace utilizamos la etiqueta .....

:: Práctica 3: Listas y líneas

Actividad 5 de la siguiente web de Miguel Tecnología

Listas no ordenadas <ul>...</ul>

Listas ordenadas <ol>...</ol>

Elementos de una lista <li>...</li>

Líneas <hr> sin cierre (atributos size, color)

:: Práctica 4: Enlaces y formatos de caracteres (fotocopia para reproducir P4)

En esta práctica primero repasaras las etiquetas <b>,<i>,<u>,<s>,<sub>,<sup> para poner palabras en negrita, cursiva, subrayado, tachado, subíndice y superíndice respectivamente.

También utilizarás la etiqueta <dd> para hacer una sangría de un párrafo.

Y después aprenderás que hay 3 tipos de enlaces que se configurarán respectivamente con la siguiente estructura:

ABSOLUTOS <a href="https://evatecnoleon.blogspot.com/" target=_blank>Enlace a mi blog</a>

RELATIVOS <a href="P2_formato_profesora.html" target=_blank>Enlace a la práctica 1</a>

INTERNOS <a href="#inicio">Ir al inicio de la página</a>

- poner la referencia donde se quiere ir con <a name="..">

**Prueba a poner algunos títulos y negritas en colores (recuerda la etiqueta

<font color="...">aplicando el código hexadecimal. Visita la web https://htmlcolorcodes.com/ **

:: Práctica 5: Tablas

Dentro del lenguaje de diseño web, las tablas HTML se crean usando las etiquetas <table> y </table>. En ella se incluyen dos etiquetas importantes: <tr>, que es para crear filas de tablas (table raw) y <td>, para crear celdas de datos (table data). Todo lo que esté dentro de ambas etiquetas es el contenido de la celda de la tabla.

Otras etiquetas utilizadas al momento de trabajar con tablas HTML son: <th>, para agregar encabezados (table header), <caption>, para insertar el título de la tabla.

Algunos atributos que puedes aplicar a la tabla y a las celdas son:

<table border="...">, para indicar el grosor del borde

<table width="...">, para el ancho total de la tabla

<table cellpadding="...">, para indicar la distancia entre el texto y la celda

<table cellspacing="...">, para indicar la distancia entre los bordes de la celda

Otros atributos interesantes para alinear y combinar celdas son:

<td align=center, right, left...>, alineación horizontal de la celda

<td valign=top, bottom, middle...>, alineación vertical de la celda

<td colspan>, <td rawspan>, para combinar celdas

<td font color>, <td bgcolor>, para cambiar el color del texto y del fondo

etc...

Aplica estos atributos para conseguir este resultado

Código para esta tabla:

Vídeo: Cómo hacer tablas en HTML

Después de practicar con las etiquetas básicas para realizar una tabla con el ejemplo (guárdalo como P5_tablas_nombre, realiza una tabla con tu horario y guárdalo como P5_horario_nombre.

:: Práctica 6: Multimedia (imágenes, audios y vídeos) - (fotocopia para reproducir P6)

En esta práctica, además de repasar algunos de los elementos vistos en las prácticas anteriores (imágenes, encabezados, tablas, saltos de línea, etc) vamos a aprender a insertar audios y vídeos en nuestra página web.

Recuerda que para insertar imágenes utilizábamos la etiqueta <img src="..."> incluyendo en los puntos la ruta del archivo de imagen (jpg generalmente). Pues en los audios y vídeos es muy parecido, pero cambiando img por audio y video.. Además, para que salgan los iconos de reproducción, deberemos añadir el atributo controls.

Ejemplos: