Escuela En ingeniería en Sistemas
                                                                      Diseño Web y Multi...
Escuela En ingeniería en Sistemas
                                                                      Diseño Web y Multi...
Escuela En ingeniería en Sistemas
                                                                        Diseño Web y Mul...
Escuela En ingeniería en Sistemas
                                                                        Diseño Web y Mul...
Escuela En ingeniería en Sistemas
                                                                      Diseño Web y Multi...
Próxima SlideShare
Cargando en…5
×

Practica Html1

1.877 visualizaciones

Publicado el

Primera guia de HTML por Josue Fortis Visitanos en http://www.freewebs.com/josuefortis007/ o en http://josuefortisitca.iespana.es

0 comentarios
4 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
1.877
En SlideShare
0
De insertados
0
Número de insertados
4
Acciones
Compartido
0
Descargas
0
Comentarios
0
Recomendaciones
4
Insertados 0
No insertados

No hay notas en la diapositiva.

Practica Html1

  1. 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 &lt;DIV&gt; 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. 2. Escuela En ingeniería en Sistemas Diseño Web y Multimedia I <blockquote>Parrafos con diferentes alineaciones</blockquote> <p>Parrafo fuera del &lt;DIV&gt; 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 &lt;PRE&gt; 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 (&amp;nbsp;)como por ejemplo: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;&nbsp;&nbsp;&nbsp;&nbsp; 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. 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. 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. 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.

×