Practias 430A Segundo Y Tercer Parcial

COLEGIO DE ESTUDIOS CIENTÍFICOS Y TECNOLÓGICOS
DEL ESTADO DE MICHOACÁN

PLANTEL 05 GUACAMAYAS
PÁGINAS WEB PRÁCTICAS SEGUNDO PARCIAL

Ing. Sonia Jesamín Serafín García 430 – A 11/Marzo/2019
PRÁCTICA 1.: Tamaños y formatos
En este ejercicio, crearemos un documento HTML para iniciarnos con el tamañ o de la

fuente. Para profundizar un poco más sobre lo que hemos visto en este tema, hemos
utilizado también un encabezado y un efecto de letra un poco peculiar. Procure que el
ejercicio quede lo más parecido a la imagen final.
La cabecera del documento junto con la etiqueta de apertura seri ́a:
<html> <head>
<title>Ejercicio sobre tamaños y formatos</title> </head>
El cuerpo del documento quedari ́a como el siguiente:
<body>
Esto está a un tamañ o de 40px
Esto está a un tamañ o small
Esto está a un tamañ o medium Esto está a un tamañ o large
Esto está a un tamañ o xx-large Esto está a un tamañ o xx-small Esto
está a un tamañ o 2%
Esto está a un tamañ o 20%
Esto está a un tamañ o 300% <h2>Pruebas de
formatos</h2>
Esto es normal
y esto es subi ́ndice: sub 
Esto es normal y esto es superi ́ndice: sup 
 
</body> </html>

PRÁCTICA 2: Lin
́ eas
Crearemos una página para practicar con li ́neas horizontales. Esta herramienta, junto con
todas sus variedades, es muy ú til para dar un aspecto más profesional a nuestras páginas.
Procure que el ejercicio quede lo más parecido a la imagen que mostramos abajo.
La cabecera del documento junto con la etiqueta de apertura sería:
<html> <head>
<title>Ejemplos de líneas horizontales</title>
</head>
El cuerpo del documento quedaría como el siguiente:
<body>
Li ́nea estándar:
<hr>
Li ́nea de grosor 5px, que ocupa el 50% de la ventana:
<hr size="5" width="50%">
Li ́nea de grosor 25px y 50 px de ancho:
<hr size="25" width="50">
Li ́nea de grosor 10px, que ocupa el 75% de la ventana,color azul
y alineada a la izquierda:
<hr style="width: 75%; height: 10px; background-color: rgb(0, 0, 255); margin- left:
0pt;">
Li ́nea de grosor 50px, que ocupa el 60% de la ventana, color rojo ,
con borde 10px verde y alineada a la derecha:
<hr style="border-width: 10px; width: 60%; height: 50px; color: rgb(0, 255, 0);
background-color: rgb(255, 0, 0); margin-right: 0pt;">
</body> </html>

PRÁCTICA 3: Colores
Otro aspecto muy llamativo a la hora de diseñ ar una página, es el uso de colores. Realiza un
documento html lo más parecido posible a la imagen final.
La cabecera del documento junto con la etiqueta de apertura seri ́a:
<html> <head>
<title>colores</title> </head>
El cuerpo del documento quedari ́a como el siguiente:
<body style="color: rgb(0, 0, 0); background-color: rgb(122, 122, 122);">

#000000 negro
#FFFFFF blanco
#FF0000 rojo
#00FF00 verde
#0000FF azul
#FFFF00
amarillo #FF00FF
morado,mezcla de rojo y azul </body>
</html>

PRÁCTICA 4: Una tabla compleja
La cabecera del documento junto con la etiqueta de apertura seri ́a: <html>
<head>
<title>una tabla compleja</title>
</head>
La tabla que vamos a generar contiene siete celdas con una distribución poco
homogénea el color del texto no es del mismo color, el tamañ o de la fuente es
diferente, asi ́ como la alineación. con el objeto de trabajar con la mayori ́a de los
parámetros que hemos visto a lo largo del tema, cambiaremos, además, el color de
fondo de un par de celdas.
El cuerpo del documento es el siguiente:
<body>
<table style="text-align: left; width: 100%; margin-left: auto; margin-right: auto;"
border="3" cellpadding="2" cellspacing="2">
<caption>TITULO DE LA TABLA 
</caption><tbody>
<tr align="center">
<th colspan="3" rowspan="1"
style="vertical-align: top; background-color: rgb(153, 255, 153);">CELDA 1 
</th>
</tr>
<tr>
<td colspan="1" rowspan="2"
style="vertical-align: middle; text-align: left; background-color: rgb(102, 255,
255);">CELDA 2</td>
<td style="vertical-align: top; text-align: center; color: red;">CELDA 3</td>

<td style="vertical-align: top; text-align: center;">
<tr>
<td colspan="1" rowspan="2"
style="vertical-align: bottom; text-align: right; background-color: rgb(255, 153,
255);">
<tr>
<td style="vertical-align: top; text-align: center;">
</tbody>
</table>
</body>
</html>

PRÁCTICA 5 (imagen de fondo)
Una forma de poner una imagen de fondo en la etiqueta body.
<html>
<head> <title>Fondo de prueba</title>
</head>
<body style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); background-

image: url(file:///C:/Users/Public/Pictures/Sample%20Pictures/Penguins.jpg);
background-repeat: no-repeat; background-position: center 0%;"
alink="#000099" link="#000099" vlink="#990099">
<table
style="text-align: left; width: 50%; background-color: rgb(255, 255, 153); margin-
left: auto; margin- right: auto; height: 50%;" border="4" cellpadding="2"
cellspacing="2">
<caption> 
</caption><tbody>
<tr>
<th colspan="2" rowspan="1"
style="vertical-align: middle; background-color: white; text-align:
center;">ENCABEZADO </th>
</tr>
<tr>
<td style="vertical-align: middle; text-align: center;">CELDA1 
</td>
<td style="vertical-align: middle; text-align: center;">CELDA2 
</td>
</tr>
</tbody>
</table>
 
 
</body>
</html>

PRÁCTICA 6 (Listas)
En este caso debes de averiguar cual será el código html-css para crear una lista ordenada.
Crea una página que muestre el siguiente texto:
Diarios de :
1. ESPAÑ A...
a. El Mundo
b. El Pai ́s
c. La Vanguardia
2. EE.UU.
I. New York Times
II. The Washington Post
PRÁCTICA 7 (ejercicio 1), 8 (ejercicio 2), 9 (ejercicio 3) y 10

(ejercicio 4).

PRÁCTICA 11 (ejercicio 5), 12 (ejercicio 6), 13 (ejercicio 7) y 14

(ejercicio 8).

PRÁCTICA 15.
En esta actividad vamos a crear una tabla de 9 filas x 3 columnas. En las filas pares
insertaremos en cada celda una imagen pequeñ a de un tipo de flor y en las filas impares
pondremos el nombre de cada flor. Una vez hecho esto crearemos un enlace en cada
imagen para que al pulsar , por ejemplo , en la ROSA se nos abra una página que hable de
ROSAS.

PRÁCTICA 16.

PRÁCTICA 17. Videos
En esta actividad vamos a crear una tabla de 2 filas por tres columnas y en cada celda
insertaremos un vi ́deo con el tamañ o adecuado. Podremos visualizar todos los vi ́deos al
mismo tiempo.

PRÁCTICA 18. Listas anidadas.


PRÁCTICA 19.

PRÁCTICA 20.

PRACTICA 21.
PÁGINAS WEB PRÁCTICAS TERCER PARCIAL

Ing. Sonia Jesamín Serafín García 430 – A 02/ABRIL/2019
DISEÑO DE FRAMES.
El diseño con frames es otra forma de diseñar la página en la cual utilizamos varios frames
o marcos, (frame: en español significa "marco") de manera que cada uno de los frames
consiste en un archivo html distinto. La página queda dividida en diferentes areas, cada una
de esas áreas o frames es independiente del resto, y es en sí una página distinta, con un
archivo html distinto; aunque las veamos todas en la misma ventana del navegador.
El diseño con frames está poco recomendado hoy en día, prefiriendo usar otros tipos de
diseño de página. No obstante podemos encontrar páginas que tienen este tipo de diseño,
y también podemos seguir construyendo páginas con diseño de frames.
Composición y etiquetas.
Una página compuesta con frames se compone de un archivo principal, con la definición de
los frames o marcos que va a tener, y tantas páginas o archivos HTML como marcos vaya a
tener.
La página principal es una página en HTML, en la que la etiqueta <body> ... </body> es
sustituida por la etiqueta <frameset> ... </frameset>.
Dentro de la etiqueta frameset se insertan las etiquetas <frame src="ruta_de_la_página"/>.

Cada etiqueta frame debe coincidir con una partición de la página, y el atributo src tiene la
ruta al archivo html que irá en esa parte de la página. Los archivos html pueden ser tanto
internos (del propio sitio web), como externos (de otros sitios web).
Para hacer la partición de la página, la etiqueta frameset debe llevar el

atributo cols(columnas) o rows (filas), para partir la página en varias columnas o en varias
filas. La etiqueta frameset solo admite uno de estos dos atributos, por lo que debemos
decidir cómo hacer la partición principal de la página, si en filas o columnas. Si queremos
poner filas y columnas a la vez lo haremos anidando etiquetas frameset
El numero de filas (o de columnas) y el espacio que van a ocupar, lo indicaremos en el valor

del atributo rows (o cols), indicando el espacio ocupado por cada una de ellas, separados
por comas, ejemplo:
<frameset rows="20%,65%,15%">

Esta sería una página partida horizontalmente en tres partes, la primera con un 20% de la
pantalla, la segunda con un 65%, y la tercera con un 15%. Ademas de en tantos por ciento
las medidas de los frames pueden expresarse en píxeles, para ello sólo hay que escribir el
número de píxeles (sin "px" detrás). También podemos dejar una columna o fila sin definir
el tamaño, para que ocupe todo el resto de la pantalla que no ocupan las demás, en ese
caso, en lugar de porcentaje o número escribimos un asterisco ( * ). Ejemplo:
<frameset cols="200,*,200">
Este ejemplo indica una partición con dos columnas a derecha e izquierda de 200px cada
una, y una columna central que ocupa el resto de la página.
Ejemplo de página con frames
Vamos a hacer un ejemplo clásico de página con cabecera, pie de página y diseño central a
tres columnas (menú izquierdo, contenido, y lateral derecho). En principio partiremos la
página en horizontal en tres partes (la cabecera, el cuerpo principal, y el pie de página).
El código HTML de la página principal será el siguiente:
Observa como en esta página no está la etiqueta body la cual ha sido sustituida por la
etiqueta frameset. El número de etiquetas frame dentro de la etiqueta frameset debe ser
igual al número de filas especificadas en el atributo rows
Cada etiqueta frame apunta hacia un archivo html mediante el atributo src este archivo es
el que se verá en el espacio que ocupa cada fila.
Ahora tenemos que crear los archivos "pagina1.html", "pagina2.html" y "pagina3.html", y

colocarlos en la misma carpeta que el archivo principal. estos son sus códigos HTML:

Dentro de cada frame hemos dado un color de fondo diferente y hemos insertado un poco
de texto para distinguirlos. El título que demos a cada frame es indiferente, ya que en el
navegador sólo se verá el título de la página principal.
Para hacer un diseño a tres columnas debemos partir el segundo frame en tres columnas,
para ello, sustituiremos la etiqueta del segundo frame por una etiqueta frameset con un
atributocols que indique tres columnas, y dentro de esta etiqueta colocaremos las tres
etiquetas framede cada una de las columnas.
El código HTML de la página principal quedará así:


Hemos añadido una etiqueta frameset anidada. Ésta es la segunda fila de la primera
etiqueta. dentro de esta etiqueta, conservamos la página 2 como contenido principal, y
hemos añadido las páginas 4 y 5 que hacen de columnas laterales.
Observa que el orden en que aparecen las disintas etiquetas frame en el código es el mismo
en el que aparecen en la página (viendo esta de izquierda a derecha y de arriba a abajo);
debemos tener en cuenta el orden en que ponemos las páginas para que en cada una de
ellas aparezca su archivo. Para completar la página debemos crear los archivos
"pagina4.html" y "pagina5.html", los cuales tendrán el siguiente código:

Práctica 1.
Realiza dentro de un frame y una tabla los siguientes formularios (agenda de servicios y curriculum).
Nota: los formularios deben ser iguales a los de las imágenes.

Practias 430A Segundo Y Tercer Parcial

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Practias 430A Segundo Y Tercer Parcial

Cargado por

Copyright:

Formatos disponibles

COLEGIO DE ESTUDIOS CIENTÍFICOS Y TECNOLÓGICOS

DEL ESTADO DE MICHOACÁN

PÁGINAS WEB PRÁCTICAS SEGUNDO PARCIAL

PRÁCTICA 1.: Tamaños y formatos

En este ejercicio, crearemos un documento HTML para iniciarnos con el tamañ o de la

La cabecera del documento junto con la etiqueta de apertura seri ́a:

<title>Ejercicio sobre tama&ntilde;os y formatos</title> </head>

El cuerpo del documento quedari ́a como el siguiente:

PÁGINAS WEB PRÁCTICAS SEGUNDO PARCIAL

La cabecera del documento junto con la etiqueta de apertura sería:

<title>Ejemplos de l&iacute;neas horizontales</title>

El cuerpo del documento quedaría como el siguiente:

PÁGINAS WEB PRÁCTICAS SEGUNDO PARCIAL

La cabecera del documento junto con la etiqueta de apertura seri ́a:

El cuerpo del documento quedari ́a como el siguiente:

<body style="color: rgb(0, 0, 0); background-color: rgb(122, 122, 122);">

PÁGINAS WEB PRÁCTICAS SEGUNDO PARCIAL

PRÁCTICA 4: Una tabla compleja

<title>una tabla compleja</title>

El cuerpo del documento es el siguiente:

PÁGINAS WEB PRÁCTICAS SEGUNDO PARCIAL

<td style="vertical-align: top; text-align: center;"><font

PÁGINAS WEB PRÁCTICAS SEGUNDO PARCIAL

PRÁCTICA 5 (imagen de fondo)

Una forma de poner una imagen de fondo en la etiqueta body.

<body style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); background-

PÁGINAS WEB PRÁCTICAS SEGUNDO PARCIAL

II. The Washington Post

PRÁCTICA 7 (ejercicio 1), 8 (ejercicio 2), 9 (ejercicio 3) y 10

PÁGINAS WEB PRÁCTICAS SEGUNDO PARCIAL

PRÁCTICA 11 (ejercicio 5), 12 (ejercicio 6), 13 (ejercicio 7) y 14

PÁGINAS WEB PRÁCTICAS SEGUNDO PARCIAL

PÁGINAS WEB PRÁCTICAS SEGUNDO PARCIAL

PÁGINAS WEB PRÁCTICAS SEGUNDO PARCIAL

PRÁCTICA 17. Videos

PÁGINAS WEB PRÁCTICAS SEGUNDO PARCIAL

PRÁCTICA 18. Listas anidadas.

PÁGINAS WEB PRÁCTICAS SEGUNDO PARCIAL

PÁGINAS WEB PRÁCTICAS SEGUNDO PARCIAL

PÁGINAS WEB PRÁCTICAS SEGUNDO PARCIAL

PÁGINAS WEB PRÁCTICAS TERCER PARCIAL

Dentro de la etiqueta frameset se insertan las etiquetas <frame src="ruta_de_la_página"/>.

Para hacer la partición de la página, la etiqueta frameset debe llevar el

El numero de filas (o de columnas) y el espacio que van a ocupar, lo indicaremos en el valor

PÁGINAS WEB PRÁCTICAS TERCER PARCIAL

Ejemplo de página con frames

El código HTML de la página principal será el siguiente:

Ahora tenemos que crear los archivos "pagina1.html", "pagina2.html" y "pagina3.html", y

PÁGINAS WEB PRÁCTICAS TERCER PARCIAL

El código HTML de la página principal quedará así:

PÁGINAS WEB PRÁCTICAS TERCER PARCIAL

PÁGINAS WEB PRÁCTICAS TERCER PARCIAL

PÁGINAS WEB PRÁCTICAS TERCER PARCIAL

PÁGINAS WEB PRÁCTICAS TERCER PARCIAL

También podría gustarte

<title>Ejercicio sobre tamaños y formatos</title> </head>

<title>Ejemplos de líneas horizontales</title>