Ejercicios HTML

Ejercicios de HTML
PARA ENTREGAR ESTE TRABAJO, INDICA TU DOMINIO AQUÍ (CUANDO LO CREES):
(SIMILAR A sitiowebprueba.w3spaces.com)
ENTORNO DE PRÁCTICAS : CREACIÓN DEL HOSTING PARA LOS EJERCICIOS DE

HTML.
 Entra en https://spaces.w3schools.com/
 Entra en sesión con tu cuenta de Gmail.com

 Crea un sitio web y edítalo (derecha > EDIT):
https://spaces.w3schools.com/space/sitiowebprueba/editor
 Crea el fichero “index.html” e incluye este texto:
<!DOCTYPE html lang=”ES”>
<html>
<head>
<meta charset=”UTF-8”>
</head>
<body>
<h1>Página para alojar tus ejercicios HTML</h1>

<br>
<p> Recuerda dejar las fotos en el directorio PIC</p>
RECUERDA:
Un enlace Absoluto (debemos poner la URL completa): <a href="https://www.w3schools.com">https://www.w3schools.com</a>
Un enlace relativo (buscara el fuente en la misma carpeta de esta pagina): <a href="pagina01.html">pagina01.html</a>
<br>
<center>
<p> <a href="pagina1.html">pagina1.html</a></p>
1
</center>
</body>
</html>
 Crea el fichero “pagina1.html” (elige HTML) e incluye este texto:
<!—ESQUELETO PAGINA HTML BÁSICA -->

<!DOCTYPE html lang=”ES”>
<html>
<head>
<meta charset=”UTF-8”>
</head>
<body>
<h1>Página EN CONSTRUCCION</h1>
</body>
</html>
 Haz lo mismo para crear 10 páginas como la anterior con los nombres: pagina2.html, pagina3.html,
pagina4.html, pagina5.html, pagina6.html, pagina7.html, pagina8.html, pagina9.html, pagina10.html.
Ahora queremos ver cómo queda la página vista desde cualquier navegador. Pulsa PREVIEW.
Ahora deberías ver tu página como queda para todos los navegadores, debería parecerse a esto:
2
1. PÁGINA1.HTML
Crea una página que muestre 3 veces la misma imagen.
Muestra 3 veces la imagen, pero con distintos tamaños.
URL de la imagen: https://www.w3schools.com/images/w3schools_green.jpg
Recuerda usar 3 marcas <IMG > y cambia sus propiedades width=400px;height=560px
SUGERENCIA SI NECESITAS AYUDA: BUSCADOR GOOGLE > W3SCHOOLS + IMAGES después entra en TRY
IT YOURSELF Y PRUEBA EL CÓDIGO (PUEDES COPIARLO Y PEGARLO EN TU PÁGINA)
3
SUGERENCIA: SI NECESITAS AYUDA: BUSCADOR GOOGLE > W3SCHOOLS + NESTED LISTS
2. PÁGINA2.HTML
ENLACES Y LISTAS.
Crea una página con una lista ordenada con los signos del zodíaco y un enlace a cada signo en la web de
Wikipedia.
SUGERENCIA: SI NECESITAS AYUDA: BUSCADOR GOOGLE > W3SCHOOLS + ordered list” y “w3schools links
3. PAGINA3.HTML
VÍDEOS.
Haz una página web con vídeos de Youtube.
Deberás usar el objeto iFrame para incluir vídeos de YOUTUBE.
- Busca un vídeo de youtube sobre ZARAGOZA
- Haz clic en el btn derecho en la imagen
- Copia el código de inserción
- Pégalo dentro del BODY de tu página web.
4. PAGINA4.HTML
Estilo y colores.
Usa los siguientes colores para hacer esta web:
Puedes cambiar el formato de fondo
Usa los mismos colores que vienen indicados en la etiqueta. Por ejem:
4
<h1 style="background-color: Orange;”> Orange </h1>
5. PAGINA5.HTML
Crea un redireccionador a la página /RECETAS DE COCINA/INDEX.HTML
SUGERENCIA SI NECESITAS AYUDA: BUSCADOR GOOGLE > redireccionador html
6. PAGINA6.HTML
SITIO WEB DE RECETAS CON VARIAS PÁGINAS WEB Y UNA MISMA PLANTILLA DE ESTILO.
Crea un directorio “recetas de cocina” y una página principal index.html que tenga este aspecto:
5
Para la foto puedes tomar esta imagen:
IMPORTANTE: TODAS LAS FOTOS DE LAS RECETAS DEBERÁN ESTAR EN EL SUBDIRECTORIO ./RECETAS/IMAGENES
IMPORTANTE: FORMATEA LA PÁGINA DE PATATAS FRITAS CON UNA HOJA DE ESTILO CSS.
6
Mipagina.html
<link rel="stylesheet" href="estilos.css">
"estilos.css"
body {font-family:verdana;}
h1 {color:#333; font-size:24px;}
h2 {color:#666; font-size:18px;}
p, li {color:#000; font-size:14px;}
Este archivo “estilos.css” deberá estar en el mismo directorio que el resto de páginas de recetas.
Haz el resto de páginas (pollo, quiche, tortilla) cambiando la de patatasfritas. incluyendo esta plantilla “estilos.css”
7. PÁGINA7.HTML
PÁGINA WEB CON TABLAS.
Cambia la página con la siguiente tabla.

<table style="width:100%">
<tr>
<th>ENCABEZADO COL1</th>
<th> ENCABEZADO COL2</th>
<th> ENCABEZADO COL3</th>
</tr>
<tr>
<td> fila 1, col 1</td>
</tr>
<tr>
</tr>
</table>
Adáptala para que se vea así:
8. PÁGINA8.HTML
PÁGINA WEB CON TABLAS.
Crea una página en la que muestres tu horario del curso. Para ello, incluye un título y debajo una tabla con
el horario. En el horario se mostrarán los intervalos de horas (teniendo en cuenta el recreo). Las materias
que duren dos o más horas deberán ocupar una sola celda, excepto si están partidos por el recreo. Y el
7
recreo de toda la semana deberá ocupar una sola celda.
Pista: para agrupar celdas: BUSCA COLSPAN Y ROWSPAN:
9. PÁGINA9.HTML
FORMULARIOS. Haz esta página usando las marcas form, checkbox, input, text, submit
SUGERENCIA: SI NECESITAS AYUDA, VE A https://www.w3schools.com/html/html_form_attributes_form.asp
10. PÁGINA10.HTML
Crea una página que muestre lo que indica la imagen que se muestra a continuación.Todas las imágenes
tienen que ser igual de altas.
Pista: la marca para hacer saltos de línea es <br>
Los enlaces puedes hacerlos a la página de PCcomponentes o cualquier otra (pruébalos, deben funcionar).
8
Puedes coger las imágenes de aquí:

Ejercicios HTML

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

Ejercicios HTML

Cargado por

Copyright:

Formatos disponibles

Ejercicios de HTML

PARA ENTREGAR ESTE TRABAJO, INDICA TU DOMINIO AQUÍ (CUANDO LO CREES):

ENTORNO DE PRÁCTICAS : CREACIÓN DEL HOSTING PARA LOS EJERCICIOS DE

 Entra en sesión con tu cuenta de Gmail.com

<h1>Página para alojar tus ejercicios HTML</h1>

 Crea el fichero “pagina1.html” (elige HTML) e incluye este texto:

<!—ESQUELETO PAGINA HTML BÁSICA -->

Cambia la página con la siguiente tabla.

Adáptala para que se vea así:

SUGERENCIA: SI NECESITAS AYUDA, VE A https://www.w3schools.com/html/html_form_attributes_form.asp

Pista: la marca para hacer saltos de línea es <br>

También podría gustarte