DR.

BELISARIO DOMÍNGUEZ

DOCENTE:

SEMESTRE:

GÓMEZ PALACIO, DGO.

ISC MARÍA DE LA CRUZ GARCÍA TRIANA.

 DR. BELISARIO DOMÍNGUEZ

Práctica 1: Introducción a HTML

A lo largo de estas prácticas vamos a conocer los conceptos básicos sobre HTML, y cómo se
utiliza para crear páginas web.

Mi primera página

Para que te vayas haciendo una idea de cómo crear una página HTML a través del Bloc de
notas, vamos a crear una página web sencilla

1) Lo primero que tienes que hacer es abrir el Bloc de notas. Seguidamente introduce, en el
documento en blanco, el texto siguiente:

2) Guarda el documento en la carpeta HTML con el nombre P1_U1_Apellidos.HTML,

Sustituyendo la palabra Apellidos por tus dos apellidos.

Pulsando dos veces sobre el icono del archivo P1_U1_Garcia_Triana,

éste debe abrirse automáticamente en el navegador que tengas instalado. El navegador deberá
mostrar una página como la siguiente:

ISC MARÍA DE LA CRUZ GARCÍA TRIANA.

 DR. BELISARIO DOMÍNGUEZ

ISC MARÍA DE LA CRUZ GARCÍA TRIANA.

 DR. BELISARIO DOMÍNGUEZ

Práctica 2: Formatos de fuente y color en fondo de pantalla

en HTML
En la siguiente práctica aprenderemos a poner fondo de color a la pantalla por medio del elemento
bgcolor, cambiar el color y el tamaño del texto utilizado en la página aplicando los elementos Font
color y size y aplicar los saltos de línea <br/>.

El nombre de la práctica debe ser P2_U1_Apellidos.html

Recuerda sustituir la palabra Apellidos por tus dos apellidos. El título de la página web debe ser
igual que el nombre de la práctica P2_U1_Apellidos.html

ISC MARÍA DE LA CRUZ GARCÍA TRIANA.

 DR. BELISARIO DOMÍNGUEZ

Práctica 3: Fondo de pantalla con imagen y formato de

Texto en HTML
En la siguiente práctica aprenderemos a poner una imagen de fondo de pantalla, dar formato al
texto en una página web, aplicando tamaño, color, estilo, alineación, formato a un párrafo y
aplicaremos el uso de entidades en HTML.

El siguiente link contiene fondos de pantalla con imágenes para páginas WEB:
 https://pixabay.com/es/ (Triana#770503)
 https://carontestudio.com/blog/como-poner-una-imagen-de-fondo-en-
html/#:~:text=Para%20a%C3%B1adir%20una%20imagen%20de,jpg%2F%C2%BB).

El nombre de la práctica debe ser P3_U1_Apellidos.html

Recuerda sustituir la palabra Apellidos por tus dos apellidos. El título de la página web debe ser
igual que el nombre de la práctica P3_U1_Apellidos.html

Para realizar la práctica es necesario:

 Descarga y guarda una imagen para el fondo de pantalla en la misma ruta que vas a generar
tu código HTML.
 Descarga y guarda una fotografía personal en la que se vea claramente tu cara en la misma
ruta que vas a generar tu código HTML.
 Copia y pega la letra de una canción o escribe un poema de algún escritor o realizado por
ti. Al menos 3 párrafos.
 Aplica formatos utilizando los siguientes elementos: center, face, strong, em, pre, h2, aling,
i, p, b, pr
 Para agregar una imagen de fondo utilizaremos la etiqueta background.
 Para agregar la fotografía se utiliza la etiqueta img, src, alt, width, height y border.

ISC MARÍA DE LA CRUZ GARCÍA TRIANA.

 DR. BELISARIO DOMÍNGUEZ

ISC MARÍA DE LA CRUZ GARCÍA TRIANA.

 DR. BELISARIO DOMÍNGUEZ

ISC MARÍA DE LA CRUZ GARCÍA TRIANA.

 DR. BELISARIO DOMÍNGUEZ

Práctica 4: Caracteres especiales y espacios en blanco

Realiza una página web en la que se debe considerar lo siguiente:

De la materia de “Ecología”, selecciona un tema a mostrar en tu página.

Descarga 1 imagen del tema y tu fotografía personal, las cuales deben tener los formatos de
alineación, tamaño y bordes.

Aplica un color verde de tu elección al fondo de pantalla.

El título de la práctica: P4_U1_APELLIDOS

El h1 debe ser “ECOLOGÍA”, aplica color, tipo de fuente y centrado.

El h2 debe ser el nombre del tema seleccionado a mostrar en tu página, aplica color de fuente,
tipo de fuente, alineación y cursiva aplicando la etiqueta <em> </em>

Agrega la información del tema aplicando formato de párrafo, alienación, color, tamaño, tipo de
fuente, en algunas partes del texto aplica strong para resaltarlo, en otras letras cursivas, utiliza las
entidades para los caracteres especiales, para las vocales acentuadas y la letra ñ.

Recuerda incluir tu nombre completo en la página web. Aplicando color, tipo de fuente, negrita,
cursiva, tamaño y alineación.

ISC MARÍA DE LA CRUZ GARCÍA TRIANA.

 DR. BELISARIO DOMÍNGUEZ

Práctica 5: Mapas en imágenes en HTML

En la siguiente práctica aprenderemos a aplicar mapas de imágenes en HTML. HTML nos permite
la opción de crear diferentes enlaces url dentro de una misma imagen. Es decir, podemos hacer
que diferentes partes de una imagen tengan enlaces que nos permitan ir a diferentes destinos.

Las imágenes que se pueden incluir en un mapa de imágenes deberán ser de formatos: .jpg, .gif
o .png, que son los tres formatos recomendables para todos los navegadores.

Lo complicado o tedioso de crear un mapa de imágenes no es el mapa en sí, sino encontrar las
coordenadas en la imagen. Aunque existen programas de edición de imágenes que nos ayudarían
en esa tarea, por ejemplo, el Paint.

El nombre de la práctica debe ser P5_U1_Apellidos.html

Recuerda sustituir la palabra Apellidos por tus dos apellidos. El título de la página web debe ser
igual que el nombre de la práctica P5_U1_Apellidos.html

Para realizar la práctica es necesario:

 Descarga la siguiente imagen y guárdala en la misma ruta que guardarás tu código HTML
con el nombre logos.jpg

 Descarga y guarda una fotografía personal en la que se vea claramente tu cara en la misma
ruta que vas a generar tu código HTML.
 Aplicar un color en el fondo de pantalla.

ISC MARÍA DE LA CRUZ GARCÍA TRIANA.

 DR. BELISARIO DOMÍNGUEZ

 Aplicar 2 encabezados, el encabezado 1 para que se muestre “APLICANDO MAPAS EN

HTML” considera un formato de color en la fuente y que esté centrado. El encabezado 2
“P5_U1_APELLIDOS” debe considerar un color distinto al h1, letra inclinada, tipo de fuente
arial y también debe estar centrado.
 Agregar la imagen logos en tu página WEB utilizando el elemento img, sin modificar nada .
 Agregar la fotografía personal, cambiando sus propiedades largo y ancho al 20%, borde =
8 y alineada a la izquierda de la página web
 Agregar tu nombre completo, dándole formato de color, alineado a la izquierda, tipo de
fuente forte, tamaño 15 y en negrita.
 Para crear el mapa de imágenes vamos a utilizar las etiquetas <map> </map>, <area
shape = "rect/circle/poly" coords = "X1,Y1,X2,Y2" href="" />

Para obtener las coordenadas de las imágenes es necesario abrir el programa Paint y en
el menú Archivo/Abrir cargar la imagen logos.

Se muestra ya cargada la imagen logos, las coordenadas las obtenemos posicionando el

cursor en alguna parte de la imagen para que el programa Paint me indique los pixeles
donde se encuentra el cursor, esto es la parte que se indica con un círculo rojo:

ISC MARÍA DE LA CRUZ GARCÍA TRIANA.

 DR. BELISARIO DOMÍNGUEZ

Y se deben considerar los puntos necesarios según el tipo de área a considerar. Cada
área debe contener lo siguiente:

• <area shape="rect" coords="35,45,185,185"

href="https://www.manualweb.net/html5/" />
• <area shape="circle" coords="233,68,60" href =
"https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/What_is_JavaS
cript" />
• <area shape="rect" coords="390,40,534,205" href =
"https://www.youtube.com/watch?reload=9&v=QC9_8nRNNHA" />
• <area shape="poly" coords="630,60,702,118,630,191,558,119" href =
"https://www.youtube.com/watch?v=z95mZVUcJ-E"/>

Dónde shape es la forma a utilizar, coords el conjunto de coordenadas que define la forma.
Dependiendo de la forma utilizada serán unas coordenadas u otras. El atributo
href contendrá el enlace y alt el texto alternativo a ese enlace.

 El mapa se le asigna un nombre con la propiedad name el cual deberá ser “mapalogos”
para esta práctica: <map name="mapalogos">

 Para llamar el mapa de imágenes se utiliza usemap = “#nombre_del_mapa”

<img src="logos.jpg" usemap="#mapalogos" alt="Mapa de Logos" />

ISC MARÍA DE LA CRUZ GARCÍA TRIANA.

 DR. BELISARIO DOMÍNGUEZ

Práctica 6: Mapas de imágenes

En la siguiente práctica aplicarás lo visto en la práctica 5. El grupo 1 realizará una página web
para acceder a las 5 redes sociales que se muestran en la imagen. El grupo 2 realizará una
página web para acceder a páginas que muestren información de los siguientes países:
México, Estados Unidos y Guatemala

 El nombre de la práctica debe ser P6_U1_Apellidos.html

 Recuerda sustituir la palabra Apellidos por tus dos apellidos. El título de la página web
debe ser igual que el nombre de la práctica P6_U1_Apellidos.html
 Para realizar la práctica es necesario:
 Descarga la siguiente imagen y guárdala en la misma ruta que guardarás tu código HTML
con el nombre redessociales.jpg para el grupo 1 o mapa para el grupo 2

ISC MARÍA DE LA CRUZ GARCÍA TRIANA.

 DR. BELISARIO DOMÍNGUEZ

 Aplica un color en el fondo de pantalla.

 Tu página web debe contener 2 encabezados, el encabezado 1 para que se muestre
“INFORMACIÓN DE ESTADOS DE LA REPÚBLICA MEXICANA” o “MIS REDES
SOCIALES FAVORITAS”, según corresponda. Considera un formato de color en la fuente
y que esté centrado. El encabezado 2: “P6_U1_APELLIDOS” debe considerar un color
distinto al h1, letra inclinada, el tipo de fuente que desees y también debe estar centrado.
 Recuerda incluir tu fotografía personal, cambiando sus propiedades largo y ancho que
consideres, borde = 5 y alineada a la derecha de la página web
 Agregar tu nombre completo, dándole formato de color, alineado a la izquierda, tipo de
fuente italic, tamaño 12 y en negrita.
 Utiliza el programa Paint, para sacar las coordenadas de las áreas rectangulares de tu
mapa. El nombre del mapa deberá ser “mapa_republica” o “mapa_redes”.

ISC MARÍA DE LA CRUZ GARCÍA TRIANA.

 DR. BELISARIO DOMÍNGUEZ

Práctica 7: Tablas básicas

 Con la etiqueta <table> podemos definir una tabla.
 Cada fila se define con <tr>.
 El encabezado de la tabla se define con <th>.
 Y las celdas se definen con <td>.
 Dentro de un <td> puede haber cualquier tipo de elemento HTML, textos, imágenes, listas,
etc.

<!doctype html>
<html>
<head>
<title> P7_U1_GARCIA_TRIANA </title>
<meta charset=”utf-8”/>
</head>

<body bgcolor="#EBDEF0">
<table cellspacing="2" cellpadding = "2" border = "1">
<caption><font size = "+4" color = "#4A235A" ><b> MIS VACACIONES EN VERANO 2022
</font></caption>

<tr><th rowspan = "2" colspan = "2"></th>

<th colspan = "2" > <font color = "#6C3483" > <i> HOTELES 3 ESTRELLAS </font> </th>
<th rowspan = "2" > <font color = "#6C3483" > <i> HOTELES 4 ESTRELLAS </font> </th>

</tr>

<tr><th> <font color = "#E3B1D2" ><b><i> SOLO ALOJAMIENTO </font> </th>

<th> <font color = "#E3B1D2" > <b><i>PENSIÓN COMPLETA </font> </th>
</tr>

<tr><th rowspan = "2" > <font color = "#6C3483" ><i> 1 SEMANA </font></th>
<th> AVIÓN TURISTA </th>
<td align = "center"> 700 USD </td>
<td align="center"> 1000 USD </td>
<td rowspan = "2" align = "center" > 1500 USD </td>
</tr>

<tr><th> AVIÓN PREFERENTE </th>

<td align = "center" > 850 USD </td>

ISC MARÍA DE LA CRUZ GARCÍA TRIANA.

 DR. BELISARIO DOMÍNGUEZ

<td align = "center" > 1150 USD </td>

</tr>

<tr><th colspan = "2" ><i> <font color = "#6C3483" > 2 SEMANAS </th>
<td align ="center" > 1300 USD </td>
<td align ="center" > 1850 USD </td>
<td align ="center" > 2600 USD </td>
</tr>
</table>
<br><center> <img src = "Yop Solita.jpeg" alt = "MI FOTO" width = "15%" height = "15%" border
= "2"></center>
<b> <font color = "#6C3483" size = "10"> <center> ING. TRIANA <center> </font>
</body>
</html>

ISC MARÍA DE LA CRUZ GARCÍA TRIANA.

 DR. BELISARIO DOMÍNGUEZ

Práctica 8: Tablas en HTML/CSS con un simulador en línea

En el siguiente link puedes modificar los datos y las propiedades de la tabla en HTML. Observa
como el código el css nos ayuda a darle formato.

https://www.kikopalomares.com/blog/como-hacer-tablas-en-html-con-sus-celdas-y-columnas

Añadir borde

Si no se especifica un borde para la tabla saldrá sin bordes por defecto. Tenemos que usar la
propiedad de CSS border.

Uniendo los bordes

Si queremos que unir los bordes de cada elemento para que solo haya un borde y no se vea doble,
podemos usar la propiedad border-collapse.

ISC MARÍA DE LA CRUZ GARCÍA TRIANA.

 DR. BELISARIO DOMÍNGUEZ

Añadir padding a las celdas

Si queremos dejar espacio entre el contenido de las celdas y el borde podemos usar la propiedad
padding de CSS.

Alinear a la izquierda los encabezados

Por defecto los <th> se muestran en negrita y centrados. Si queremos alinearlos a la izquierda
podemos usar la propiedad de CSS text-align con el valor left.

ISC MARÍA DE LA CRUZ GARCÍA TRIANA.

 DR. BELISARIO DOMÍNGUEZ

Añadir espacio entre los bordes

Podemos añadir espacio entre las celdas usando la propiedad de CSS border-spacing.

Celdas que ocupan varias columnas

Tenemos el atributo colspan en el que podemos indicar el número de columnas que ocupa esa
celda.

Celdas que ocupan varias filas

Tenemos el atributo rowspan en el que podemos indicar el número de filas que ocupa esa celda.

ISC MARÍA DE LA CRUZ GARCÍA TRIANA.

 DR. BELISARIO DOMÍNGUEZ

Añadir un título a la tabla

Podemos usar la etiqueta <caption> para añadir un título a la tabla.

Resumen

 Usamos <table> para definir una tabla

 Usamos <tr> para definir una fila en una tabla
 Usamos <td> para definir una celda de la tabla
 Usamos <th> para los encabezados de la tabla
 Usamos <caption> para ponerle un título
 Con la propiedad de CSS border podemos ponerle un borde
 Con la propiedad de CSS border-collapse podemos juntar los bordes
 Con el padding de CSS podemos darle relleno a las celdas
 Con el text-align de CSS podemos alinear el texto de las celdas
 Con el border-spacing podemos setear espacio entre celdas
 El atributo colspan hace que una celda ocupe varias columnas
 El atributo rowspan hace que una celda ocupe varias filas

ISC MARÍA DE LA CRUZ GARCÍA TRIANA.

 DR. BELISARIO DOMÍNGUEZ

Práctica 9: Mi Tabla en HTML

Diseña y realiza una tabla personalizada con lo visto en las prácticas 7, 8. Puedes tomar el código
que se presenta a continuación y adecuarlo con tu información.

<html>
<head>
<title> P2_U1_GARCIA_TRIANA </title>
</head>

<body>
<center><h1><font size = "10" color = "red"> MI PÁGINA PERSONAL </font></h1></center>

<table border="3" width="50%" align = "center">

<tr>
<td align="center" valign="middle"> Ing. Triana </td>
<td align="center" valign="middle"> <img src="yop solita.jpeg" width="100"height="100" alt="google"></a></td>
</tr>
<tr>
<td align="center" valign="middle"> Google </td>
<td align="center" valign="middle"> <a href="http://www.google.com.mx/"> <img src="google.jfif" width="100"height="100" alt="google"></a></td>
</tr>

<tr>
<td align="center" valign="middle" color = "blue"> Mi canción favorita </td>
<td align="center" valign="middle"><a href="https://youtu.be/JyqD_zfXfi8"> <img src="nota musical.jfif" width="100" height="100" alt="Mi canción Favorita"></td>
</tr>

<tr>
<td align="center" valign="middle" > Mi Facebook </td>
<td align="center" valign="middle"><a href="https://www.facebook.com/"> <img src="logo face.png" width="100" height="100" alt="Mi canción Favorita"></td>
</tr>
<tr>
<td align="center" valign="middle" > Mi Frase </td>
<td align="center" valign="middle"><img src="OyeTeQuiero.jfif" width="100" height="100" alt="Mi Frase"></td>
</tr>
</table>

</body>
</html>

ISC MARÍA DE LA CRUZ GARCÍA TRIANA.

 DR. BELISARIO DOMÍNGUEZ

Bibliografía:

https://uniwebsidad.com/libros/xhtml/capitulo-7/tablas-basicas#google_vignette

https://www.uv.es/jac/guia/tablaeje.htm

https://disenowebakus.net/aprender-css-hoja-de-estilo-en-cascada.php

https://desarrolladoresweb.org/html/tablas-en-html/

ISC MARÍA DE LA CRUZ GARCÍA TRIANA.