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).
Práctica 2: Dar formato a un texto (descarga aquí el texto) (Seguir instrucciones de la práctica 7 del libro)
>> 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>
>> 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://soniatecnoinfo.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: Crear una página web con texto, imagen y vínculos:
- 1. Mejora el aspecto ( de este texto) con nuevos atributos.
- 2. Inserta una imagen.
- 3: Vínculos absolutos, relativos e internos. Añade este (Enlace Machado) al final de la P3.
Práctica 4: Tipos de listas y líneas (descarga aquí los pasos)
Práctica 5: Enlaces y formatos de caracteres (fotocopia para reproducir)
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://soniatecnoinfo.blogspot.com/" target=_blank>Enlace a mi blog</a>
RELATIVOS <a href="P2_formato_alumno.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 6: 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
<font color>, <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 P6_tablas_nombre, realiza una tabla con tu horario y guárdalo como P6_horario_nombre.
Inserta también el logo del centro en alguna de las celdas (con la etiqueta <img src="...">, y crea un enlace que al hacer clic sobre esta imagen nos lleve a la página web del centro.
<a href="URL-de-la-página-web">
<img src="URL-de-la-imagen" alt="Texto alternativo de la imagen">
</a>
:: Práctica7:_E1 Multimedia (imágenes, audios y vídeos) - (fotocopia para reproducir P7_E1)
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:
P7_E2_Multimedia y CSS
Tipos de bordes para imágenes:
Tutorial Visual Studio Code: