Está en la página 1de 8

Práctica 2

Objetivos de esta práctica:


● Conocer la estructura básica de un documento html y utilizar ​etiquetas
semánticas​​.
● Crear enlaces ​externos e internos​​ (a una parte de nuestro documento).
● Aprender a usar las ​fuentes de Google​​.
● Aplicar diferentes ​estilos ​en textos, usar ​colores con transparencia​​ y bordes
redondeados.
● Utilizar diferentes ​selectores, pseudoclases ​(​:hover ​y ​:active​)​ y los
pseudoelementos​​ primera letra (​::first-letter)​ y primera línea (:​ :first-line​).

Entrega de la práctica:
Se entregarán 3 archivos:
1. El fichero html
2. El fichero .css con los estilos aplicados al documento .html
3. El documento pdf con las capturas de pantalla.

Instrucciones

Crea una ​carpeta​ con el nombre ​Apellido1Nombre​​.


El contenido de la carpeta será el siguiente:
1. Un ​archivo html​​.
2. Una ​carpeta​ ​css​​ ​donde guardarás la hoja de estilos.
3. Una ​carpeta​ con el nombre​ ​imagenes ​para las imágenes.
4. Un ​documento pdf​​ con las capturas de pantalla que se indiquen.

1. Crea un ​archivo html​​ con el contenido del ​documento txt adjunto​. Guarda el
documento con el nombre que desees, por ejemplo ​index.html​​. No olvides
identificarte como ​autor ​e incluir los ​elementos básicos​​ de un archivo html.
2. Añade:
2.1. Etiquetas de ​párrafos y headings ​para poder aplicar estilos posteriormente.
Toma los espacios del archivo de texto como separación entre párrafos.
2.2. Etiquetas para insertar las ​dos imágenes ​adjuntas.
2.3. Inserta el enlace siguiente y consigue que se abra en una nueva ventana.
https://www.nationalgeographic.com.es/naturaleza/grandes-reportajes/ahogados-mar-plas
tico_12712/17
2.4. Al inicio de la página crea un ​menú vertical​​, que enlace ​a diferentes partes
del documento​​. Los elementos del menú serán: Introducción, Actualidad y
Referencias.
2.5. Los ​elementos semánticos​​ que creas necesarios.

Página 1 de 8
Práctica 2

Haz una captura de pantalla de la visualización de la página en el navegador.

¡Ni se te ocurra incluir estilos en el archivo HTML o etiquetas obsoletas!

3. Aspecto a aplicar en el archivo CSS


3.1. Todo el documento utiliza la fuente de Google: Playfair Display.
3.2. En general, los párrafos están ​justificados​.
3.3. El ​primer​​ ​párrafo​​:
3.3.1. Texto alineado a ​ la derecha
3.3.2. Tamaño de fuente ​doble de lo aplicado en el resto de los párrafos.
con​ ​espaciado entre letras/palabras​ de 10 píxeles.
3.3.3. Primera letra​​ con aspecto diferente
Haz una captura de pantalla de la visualización de la página en el navegador.
3.4. Tercer ​párrafo ​que aparezca en cualquier punto de vuestro HTML:
3.4.1. Texto ​transformado​ en mayúsculas
3.4.2. Color de ​fuente​​ ​sólido
3.4.3. Color de ​fondo​​ ​con transparencia
Haz una captura de pantalla de la visualización de la página en el navegador.
3.5. Imágenes​:
3.5.1. Espacio 5 píxeles entre la imagen y su borde
3.5.2. borde doble
3.5.3. Esquinas superiores ​redondeadas.
3.5.4. El alto y ancho de la imagen “mar_plastico.jpg” deberá ser del 90%.
Utiliza un atributo class para aplicar el estilo.
3.6. El enlace del final del documento tiene que tener diferente formato cuando
se pasa sobre él y cuando se está pinchando.
3.7. La ​primera línea ​del ​segundo párrafo​​ debe aparecer en ​mayúsculas​​.
3.8. Aplica estilo al menú de navegación:
No debe aparecer símbolo en los elementos del menú, no aparecerán los
enlaces son subrayado y al pasar el ​ratón por el enlace​​ debe cambiar el
color de fondo.
Haz una captura de pantalla de la visualización de la página en el navegador.
Páginas web para consultar

Teoría/Recursos para la práctica

Fuentes de Google
Tradicionalmente las tipografías usadas el diseño web se han limitado a las llamadas
fuentes ​seguras​, aquellas que vienen instaladas por defecto en casi todos los PCs:
nombres míticos como ​Verdana, Arial, Times New Roman…

Página 2 de 8
Práctica 2

Fuentes existen miles, pero usar algunas de ellas en una web siempre ha sido complicado
porque si el usuario ​no​​ tiene la fuente instalada en su PC, el navegador la sustituye por
otra y la web termina teniendo un aspecto totalmente diferente al diseño inicial.

GOOGLE FONTS
Es un recopilatorio de fuentes creado por Google se llama ​Google Fonts​.
Cuenta con cerca de ​900 fuentes ​distintas que pueden utilizarse libremente en todo tipo
de webs. Los ficheros que contienen las fuentes permanecen en la red de servidores de
Google, lo que favorece su descarga rápida.

¿Cómo utilizar fuentes de Google en mi página?

Ejemplo: ​Quiero usar 2 fuentes de Google en mi documento html, una la quiero usar para
los ​párrafos​​ y otra diferente para los ​encabezados​​.

1. Elijo las fuentes de Google que usaré, por ejemplo: ​Roboto y PlayFair Display​​.
2. Busco cada fuente en la página ​Google Fonts​ y pincho en el botón ​+.
3. Me aparecerá una ventana con las fuentes seleccionadas. En ella me indican la
etiqueta ​link ​que deberé poner en la cabecera de mi página web, es decir dentro
de las etiquetas <head> </head>. También me indican el código ​CSS ​que debo
usar en mi página de estilos. Lo pondré dentro de los selectores en donde me
interese utilizar esas fuentes:

Página 3 de 8
Práctica 2

Por ejemplo, quiero que ​todo el documento ​use la fuente Playfair Display y que los
encabezados h1, h2 y h3​ utilicen la fuente Roboto.
Ejemplo del código CSS que pondría en mi hoja de estilos:

Aplicando estilos: Páginas web de consulta

Propiedades de textos:
https://lenguajecss.com/p/css/propiedades/textos-y-alineaciones
Colores:
https://www.w3schools.com/cssref/css_colors_legal.asp
https://lenguajecss.com/p/css/propiedades/colores-css
Hay varias formas de codificar los colores, por ejemplo:
1. Con un valor ​hexadecimal​​: ​#ff0000
2. Con un valor de ​color ​RGB​​, son las siglas de ​Red​​ ​Green ​Blue

Página 4 de 8
Práctica 2

3. Con un valor de ​color HSL​​, son las siglas de ​Hue​​ (Tono) ​Saturation​​ ​(Saturación) y
Ligthness​​ (Luminosidad):

CSS 3 ​introduce una propiedad para indicar la ​transparencia​​. Se denomina ​opacity ​y su


valor está entre 0.0 y 1.0
0: máxima transparencia, el elemento es invisible.
Para ver los efectos, prueba con los siguientes valores de la propiedad opacity:

Ahora establecemos el valor de la propiedad opacity a 0.5

El valor de opacity lo establecemos a 1, es decir no hay transparencia:

Colores con transparencia:

Los valores de color ​RGBA ​son una extensión de los valores de color RGB con un ​canal
alfa​​, que especifica la ​opacidad del objeto​​.
Si quiero un ​color con transparencia​​,​ ​usaré RGBA o HLSA:

El último valor es el canal alfa que indica la opacidad (será un valor entre 0.0 y 1.0
siendo 0.0 la transparencia total):

Para buscar colores puedes utilizar la página


https://html-color-codes.info/codigos-de-colores-hexadecimales/
Ejemplo:

Página 5 de 8
Práctica 2

Interpretación de la regla CSS:

​ ​). E
Hemos definido un ​selector por identificador ​(​comienza por # ​ so implica que en mi
página html haya un elemento (​podría ser una sección, un párrafo,un enlace, un elemento
de una lista, un encabezado…). ​Lo importante es que ese elemento tiene ​ un atributo ​id
con valor ​p1​​:

En la página html ​no ​hay otro elemento que tenga un atributo id con ese mismo valor. Por
lo tanto, la regla CSS solo se aplica a ese elemento.
Bordes:
https://lenguajecss.com/p/css/propiedades/bordes

Aspecto de una posible solución


Menú:

Página 6 de 8
Práctica 2

Página 7 de 8
Práctica 2

Página 8 de 8