Tecnología Eva IES Ramiro II: 1. Diseño y edición de páginas web (TICII)

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.

P1_inicio_eva

:: 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...)

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

Ejemplo: El diseño y...Java Script

>> 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>

>> 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!!!

:: 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 ,,,<s>,, 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

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:

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

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

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

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

<align=center, right, left...>

<valign=top, bottom, middle...>

<colspan>, <rawspan>, para combinar celdas

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

etc...

Aplica estos atributos para conseguir este resultado

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: