Practica Html1

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>
<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.

<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:
         &nbsp
;     esto</p>
</body>
</html>


3. Ejercicio Práctico guiado
Con ayuda de tu Instructor crea una página que muestre el siguiente resultado.



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>


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>


<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>

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


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


Practica Html1

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Similar a Practica Html1

Similar a Practica Html1 (20)

Practica Html1