1. Escuela En ingeniería en Sistemas
Diseño Web y Multimedia I
HTML
Etiquetas Básicas y de Estructura de páginas Web, Manejo de Texto y diseño de Páginas.
Objetivo:
Hacer prácticos los conocimientos adquiridos en la clase teórica.
Investigar más etiquetas para el diseño de la Pagina Web.
Desarrollar usando la creatividad los ejercicios propuestos para la clase practica.
1. Pagina básica
En un procesador de texto cualquiera teclear el siguiente código
<HTML>
<HEAD>
<TITLE> Mi primera pagina Web </TITLE>
</HEAD>
<BODY>
Esta es mi primera pagina, es muy sencilla, pero como el
Lenguaje HTML es fácil, pronto estaré en condiciones de hacer
Cosas más interesantes.
</BODY>
</HTML>
Guardar el archivo como Practica1.html en formato texto y visualizarlo con el navegador.
2. Fondos de página, cabeceras y bloques
En un procesador de texto cualquiera teclear el siguiente código
<html>
<head>
<title>Practica de cabeceras y bloques</title>
</head>
<body bgcolor=quot;#EBDCA7quot;>
<h2 align=quot;centerquot;>Practicas de encabezados y bloques de texto</h2>
<hr>
<div align=quot;centerquot;>
<h1>Encabezado de nivel 1 </h1>
<h2>Encabezado de nivel 2</h2>
<h3>Encabezado de nivel 3</h3>
<h4>Encabezado de nivel 4</h4>
<h5>Encabezado de nivel 5</h5>
<h6>Encabezado de nivel 6</h6>
<p>Parrafo dentro del <DIV> centrado, por lo cual, hereda la alineación</p>
<hr width=quot;50%quot; size=quot;5quot;>
</div>
<hr>
Docentes: Milagro Arévalo, Josué Fortis, Carlos Narváez y Christopher Lara.
2. Escuela En ingeniería en Sistemas
Diseño Web y Multimedia I
<blockquote>Parrafos con diferentes alineaciones</blockquote>
<p>Parrafo fuera del <DIV> centrado, por lo cual toma la alineación izquierda
por defecto</p>
<p align=quot;rightquot;>Parrafo alineado a la derecha</p>
<p align=quot;centerquot;>Parrafo centrado</p>
<hr>
con esta línea comprobamos que el H T M L no respeta ni los
espacios ni los saltos de línea
<pre>
Pero si incluimos la etiqueta <PRE>
nos muestra el T E X T O tal y como
lo escribimos
</pre>
<p>HTML separa las palabras del texto con un blanco, si
queremos añadir mas blancos, debemos hacer referencia a la
entidad que lo representa (&nbsp;)como por ejemplo:
 
; esto</p>
</body>
</html>
Guardar el archivo como Practica2.html en formato texto y visualizarlo con el navegador.
3. Ejercicio Práctico guiado
Con ayuda de tu Instructor crea una página que muestre el siguiente resultado.
Guardar el archivo como Practica3.html en formato texto y visualizarlo con el navegador.
Docentes: Milagro Arévalo, Josué Fortis, Carlos Narváez y Christopher Lara.
3. Escuela En ingeniería en Sistemas
Diseño Web y Multimedia I
4. Listas
Confeccione una lista ordenada con los tres países con mayor población del planeta. Disponer un
título de segundo nivel y debajo de la lista la suma de habitantes de esos tres países enfatizados.
<html>
<head>
</head>
<body>
<h2>Paises con mayor población</h2>
<ol>
<li>China (1300 millones)</li>
<li>India (1080 millones)</li>
<li>Estados Unidos (295 millones)</li>
</ol>
<p>Sumando estos tres paises tenemos una población de <strong>2675 Millones
</strong></p>
</body>
</html>
Guardar el archivo como Practica4.html en formato texto y visualizarlo con el navegador.
5. Listas anidadas.
Confeccionar una lista no ordenada de lenguajes de programación. Luego disponer una lista
ordenada con hipervínculos a sitios que tratan dichos lenguajes.
<html>
<head>
</head>
<body>
<ul>
<li>PHP
<ol>
<li><a href=quot;http://www.vivaphp.com.arquot;>Viva PHP</a></li>
<li><a href=quot;http://www.phpadictos.comquot;>PHP Adictos</a></li>
<li><a href=quot;http://www.php-hispano.netquot;>PHP Hispano</a></li>
<li><a href=quot;http://www.php.org.mxquot;>PHP México</a></li>
</ol>
</li>
<li>JavaScript
<ol>
<li><a href=quot;http://www.gamarod.com.arquot;>Gamarod</a></li>
Docentes: Milagro Arévalo, Josué Fortis, Carlos Narváez y Christopher Lara.
4. Escuela En ingeniería en Sistemas
Diseño Web y Multimedia I
<li><a href=quot;http://www.htmlpoint.com/javascript/tutorialquot;>HTML
Point</a></li>
</ol>
</li>
<li>C++
<ol>
<li><a href=quot;http://codigomaldito.blogspot.comquot;>Código Maldito
C++</a></li>
<li><a href=quot;http://www.arrakis.es/~rporcarquot;>Club Builder</a></li>
</ol>
</li>
</ul>
</body>
</html>
Guardar el archivo como Practica5.html en formato texto y visualizarlo con el navegador.
6. Ejercicios
1. Con ayuda de tu Instructor, aplica en el ejercicio Practica5.html, una imagen de fondo.
2. Investiga en el Internet que son y para qué sirven las Etiquetas METAS.
3. Busca información sobre la etiqueta <META http-equiv=”Page-Exit”… y <META http-
equiv=”Page-Enter”…, aplica a los ejercicios a los archivos anteriormente creados.
4. Con las etiquetas marquesinas crea una animación de texto en el archivo Practica3.html
que se mueva de la siguiente manera
TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO
5. Crea una página HTML, con la siguiente estructura.
1. Etiquetas Básicas
a. <html>
Inicia una página web
b. <body>
Indica el inicio del cuerpo de la pagina
c. <Head>
2. Etiquetas de Texto
a. <Font
Face
Size
Color
Docentes: Milagro Arévalo, Josué Fortis, Carlos Narváez y Christopher Lara.
5. Escuela En ingeniería en Sistemas
Diseño Web y Multimedia I
b. <h1>….<h6>
3. Etiquetas de Atributos al texto
a. <sub> H2O
b. <b> Hola
c. <u> Hola de nuevo
d. <i> aquí estamos de nuevo
e. <sup> O16
f. <del> mira esto
4. Etiquetas de Párrafo
a. <div>
b. <p>
Aplica un color de fondo negro, una marquesina con tu nombre, color de letra blanco, guarda
el archivo con el nombre de Practica6.html
Docentes: Milagro Arévalo, Josué Fortis, Carlos Narváez y Christopher Lara.