Curso completo de HTML - PRÁCTICA 1: La pagina web de "La chistera"
(126 opiniones)
Curso gratis de
Jorge Ferrer, Víctor García y Rodrigo García - 23 de Febrero de 2006
La propuesta
En esta primera práctica de la obra se propone crear un sitio Web REAL poniendo en práctica los conocimientos adquiridos hasta ahora. En él incluiremos imágenes, varios titulares párrafos de texto de distinto tipo y enlaces hipertexto a otras páginas.
En la figura 2.12 se muestra una captura de un navegador visitando la página tal y como debe quedar al final. Se propone al lector intentar imitar la apariencia de esta página usando únicamente las etiquetas HTML explicadas hasta ahora.
Para empezar a realizar la página debe abrirse un editor de textos o de HTML (es indiferente). Algunos ejemplos de programas que pueden servir son notepad, emacs, vi, HomeSite, etc. Una vez abierto se puede empezar a escribir la página tal y como se ha explicado, comenzando por la cabecera y siguiendo con el resto de la página. A continuación se muestran las primeras líneas que podría contener el archivo a modo de elemplo:
<html>
<head>
<title>
La chistera - Humor y magia
</title>
</head>
<body>
|
Tras escribir el código debe guardarse con terminación ".html" y ya está lista para ser visualizada con cualquier navegador. Tras abrir éste hay que seleccionar la opción Archivo/Abrir...Examinar... (o similar) y elegir el archivo en el que habíamos guardado la página. En ese momento debe mostrarse en pantalla la página creada. Lo habitual es tener que realizar cambios en el código HTML, volver al navegador, volver a hacer cambios y así hasta que se obtiene el resultado deseado. ¡suerte!
La solución
En esta primera práctica se va a mostrar a continuación el código completo de la página resultado. Por supuesto, conviene intentarlo antes de mirarlo. También hay que tener en cuenta que no hay un único resultado y es posible que un código ligeramente diferente de lugar a una página prácticamente idéntica al verla con el navegador.
<html>
<head>
<title>
La chistera - Humor y magia
</title>
</head>
<body>
<center>
<h1>
<img src="imagenes/chistera.gif">
LA CHISTERA - Humor y magia
</h1>
</center>
<h2>
Quienes somos
</h2>
<p>La chistera es un grupo de artistas
dedicados al mundo de la magia, la comedia y el espectáculo.
Entre nosotros podrás encontrar humoristas, magos, showmen,
etc.</p>
<p>Si usted o su empresa necesita crear
un espectáculo y no quiere quedar decepcionado no dude en
escribirnos AHORA MISMO. Nuestra dirección es:</p>
<center>
chistera@chistera.es
</center>
<h2>
Un ejemplo de nuestro repertorio
</h2>
<p>Cada día le mostramos ejemplos
distintos de nuestro amplísimo y novedoso repertorio de chistes:
<blockquote>
Era un tío tan gafe, tan gafe, que se sentó en un pajar y se
clavó la aguja.
</blockquote>
<blockquote>
Doctor, Doctor, ¿cuanto tiempo me queda de vida?
<br>
5... 4... 3... 2...
</blockquote>
</p>
<h2>
Enlaces a páginas relacionadas
</h2>
<p>
<a href="http://www.ciudadfutura.com/areirse
">¡A Reírse Toca, ¡Ja, ja, ja!
</a>: Si te aburres, estás deprimido,
o simplemente quieres reír, pásate por mi página y disfrutarás
de los más de 110 chistes que tiene. ¡Con posibilidad de enviar
tú el tuyo!
<p>
<a
href="http://www.geocities.com/BourbonStreet/Delta/3543/"
>1er Concurso de feos por
Internet</a>: 1er Concurso de Feos por
Internet participa y gana tu premio. </p>
<p>
<a
href="http://www.geocities.com/Hollywood/8620">Albert
Grau's Web</a>
: En esta pagina encontrarás un listado de dichos
populares, y las 50 cosas que se deberían cambiar para mejorar
la vida terrícola de nuestro querido planeta Tierra
</p>
<hr size="5">
<address>
Página creada por el equipo de programación Web de LA CHISTERA
<br> Ultima actualización: 32-12-1997 ;-)
</address>
</body>
</html>
|
|
Una vez hemos comprobado que con nuestro navegador habitual la página es mostrada correctamente conviene probarla con otros incluyendo alguno en modo texto (Lynx) y diferentes tamaños de pantalla. A veces las diferencias serán sorprendentes. |
- 1 - Introducción al lenguaje HTML
- 2 - Primeros pasos con HTML
- 3 - Parrafos en HTML
- 4 - Cómo insertar imagenes en una pagina
- 5 - Cómo crear enlaces hipertexto
- 6 - PRÁCTICA 1: La pagina web de "La chistera"
- 7 - Anclas (I)
- 8 - Anclas (II)
- 9 - Formato de texto
- 10 - La etiqueta FONT
- 11 - Texto preformateado
- 12 - Acentos y otros caracteres especiales
- 13 - Listas en HTML (I)
- 14 - Listas en HTML (II)
- 15 - Comentarios en HTML
- 16 - Practica 2: Un sitio web completo
- 17 - Usando color en el WWW
- 18 - Cómo cambiar la apariencia de una pagina
- 19 - Imagenes en las paginas Web (I)
- 20 - Imagenes en las paginas Web (II)
- 21 - Imagenes en las paginas Web (III)
- 22 - Cómo cambiar la apariencia de las imagenes
- 23 - Alternativas a las imagenes inline (I)
- 24 - Alternativas a las imagenes inline (II)
- 25 - Mejoras en las imagenes
- 26 - Cómo se crea una tabla HTML (I)
- 27 - Cómo se crea una tabla HTML (II)
- 28 - Alineamiento de tablas
- 29 - Alineamiento de celdas y filas
- 30 - Ancho de tablas y celdas
- 31 - Celdas que abarcan varias filas o columnas
- 32 - Margenes y separación de celdas
- 33 - Anidamiento
- 34 - Practica 3 - Tabla de Datos
- 35 - Practica 4 - Pagina Web con una estructura creada con tablas
- 36 - Practica 4 - Pagina Web con una estructura creada con tablas
- 37 - Practica 4 - Pagina Web con una estructura creada con tablas
- 38 - Estandares y extensiones del lenguaje HTML (I)
- 39 - Estandares y extensiones del lenguaje HTML (II)
- 40 - Extensiones a las listas (I)
- 41 - Extensiones a las listas (II)
- 42 - Alineamiento
- 43 - La etiqueta META
- 44 - Otras etiquetas del lenguaje HTML 3.2
- 45 - El atributo TARGET
- 46 - La etiqueta BASE
- 47 - Creación de paginas con frames
- 48 - Creación del documento de definición de frames (I)
- 49 - Creación del documento de definición de frames (II)
- 50 - Pagina completa con frames
- 51 - Atributos de la etiqueta FRAME
- 52 - Compatibilidad: NOFRAME
- 53 - Anidamiento de framesets
- 54 - Bordes de los frames
- 55 - Valores especiales del atributo TARGET
- 56 - Practica 5: Web de Los Alpes con frames
- 57 - Frames flotantes
- 58 - Sonido vídeo y otros ficheros externos
- 59 - Multimedia Inline (I)
- 60 - Multimedia Inline (I)
- 61 - Plug-ins y objetos incrustados
- 62 - Java en las Paginas Web
- 63 - Inserción de Applets Java (I)
- 64 - Inserción de Applets Java (II)
- 65 - Inserción de Applets Java (III)
- 66 - ActiveX, la tecnología del futuro
- 67 - Formularios en HTML
- 68 - Controles de Formularios (I)
- 69 - Controles de Formularios (II)
- 70 - Controles de Formularios (III)
- 71 - Controles de Formularios (IV)
- 72 - Otros controles
- 73 - Practica 6-Formulario para "Los Alpes"
- 74 - COMO USAR LOS DATOS DE UN FORMULARIO
- 75 - Envío De Ficheros Usando Formularios
|
Wikis relacionados con 'Curso completo de HTML - PRÁCTICA 1: La pagina web de "La chistera"'
