Scribd
Cargar
79 vistas

HTML Practicas

Este documento presenta 7 prácticas para aprender HTML. La Práctica 1 explica cómo crear una página web básica. La Práctica 2 cubre los fondos, encabezados y bloques de texto. La Práctica 3 trata sobre resaltados de texto y fuentes. La Práctica 4 explica listas. La Práctica 5 cubre hipervínculos e imágenes. La Práctica 6 explica tablas. La Práctica 7 trata sobre formularios. El documento proporciona código HTML de ejemplo para cada

Cargado por

Jorge Armando LLerena Rojas
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
79 vistas

HTML Practicas

Este documento presenta 7 prácticas para aprender HTML. La Práctica 1 explica cómo crear una página web básica. La Práctica 2 cubre los fondos, encabezados y bloques de texto. La Práctica 3 trata sobre resaltados de texto y fuentes. La Práctica 4 explica listas. La Práctica 5 cubre hipervínculos e imágenes. La Práctica 6 explica tablas. La Práctica 7 trata sobre formularios. El documento proporciona código HTML de ejemplo para cada

Cargado por

Jorge Armando LLerena Rojas
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 13

Practicas de HTML

Practicas de HTML

1. Pagina bsica En un procesador de texto cualquiera teclear el siguiente cdigo


<HTML> <HEAD> <TITLE> Mi primera pagina Web </HEAD>

</TITLE>

<BODY> Esta es mi primera pagina, es muy sencilla, pero como el lenguaje HTML es fcil, pronto estar en condiciones de hacer cosas mas interesantes. </BODY> </HTML>

Guardar el archivo como Practica1.html en formato texto y visualizarlo con el navegador. 2. Fondos de pgina, cabeceras y bloques En un procesador de texto cualquiera teclear el siguiente cdigo <html> <head> <title>Practica de cabeceras y bloques</title> </head> <body bgcolor="#EBDCA7"> <h2 align="center">Practicas de encabezados y bloques de texto</h2> <hr> <div align="center"> <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 alineacin</p>

Pedro Rufo Martn http://www.asptutor.com

Pgina 1 de 13

Practicas de HTML

<hr width="50%" size="5"> </div> <hr> <blockquote>Parrafos con diferentes alineaciones</blockquote> <p>Parrafo fuera del &lt;DIV&gt; centrado, por lo cual toma la alineacin izquierda por defecto</p> <p align="right">Parrafo alineado a la derecha</p> <p align="center">Parrafo centrado</p> <hr>

con esta lnea comprobamos que el H T espacios ni los saltos de lnea

L no respeta ni los

<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 aadir 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> <p> Para cualquier consulta dirigirse a <address> Jun Gonzalez </address><p> </body> </html> Guardar el archivo como Practica2.html en formato texto y visualizarlo con el navegador.

Pedro Rufo Martn http://www.asptutor.com

Pgina 2 de 13

Practicas de HTML

3. Resaltados de texto y control de fuentes Con las etiquetas de control de texto estudiadas conseguir los efectos siguientes:.

Agregar adems a la pagina diferentes ejemplos de etiquetas de resaltado Guardar el archivo como Practica3.html en formato texto y visualizarlo con el navegador.

4. Listas En un procesador de texto cualquiera teclear el siguiente cdigo


<HTML> <HEAD> <TITLE> Practicas de listas </TITLE> </HEAD> <BODY> <CENTER> <H1> Mis aficiones </H1> </CENTER> <HR> Sin un orden particular, mis <B> aficiones </B> son las siguientes: <UL> <LI> El cine <LI> El deporte <UL> <LI> Natacin <LI> Baloncesto </UL> <LI> La msica </UL> La msica que ms me gusta es (en orden de preferencia): <OL> <LI> El rock <LI> El jazz <LI> La msica clsica </OL> </BODY> </HTML>

Pedro Rufo Martn http://www.asptutor.com

Pgina 3 de 13

Practicas de HTML

Completar la pgina con el resto de tipos de listas estudiadas y observar sus diferencias. Guardar el archivo como Practica4.html en formato texto y visualizarlo con el navegador.

5. Hiperenlaces e inclusin de imagenes En un procesador de texto cualquiera teclear el siguiente cdigo


<html> <head> <title>Practica de Hiperenlaces</title> </head> <body bgcolor="#D9D9F3"> <p align="center"><a name="inicio"> <font size=+3><u>Enlaces con otras paginas</u></font></p> <hr> <hr width="80%"> <dir> <li><p align="left"><a href="http://www.microsoft.com">Microsoft</a></p> </li> <li><p align="left"><a href="Practica1.html">Mi primera pagina Web</a></p> </li> <li><p align="left"><a href="Practica2.html">Mi segunda pagina Web</a></p> </li> </dir> <hr width="80%"> <hr> <p align="center"><font size=+3><u>Enlaces en la misma pagina</u></font></p> <hr> <hr width="80%"> <dir> <li><p align="left"><a </li> <li><p align="left"><a </li> <li><p align="left"><a </li> <li><p align="left"><a pagina</a></p> </li> </dir> <hr width="80%"> <hr>

href="#foto1">Foto 1</a></p> href="#foto2">Foto 2</a></p> href="#foto3">Foto 3</a></p> href="#inicio">Volver al principio de la

Pedro Rufo Martn http://www.asptutor.com

Pgina 4 de 13

Practicas de HTML

<center> <p align="center"><a name="foto1"></a><font color="#008000" size="4">fotografia 1</font></p> <img src="imagenes/foto1.gif" width="100" height="100" ALIGN=TOP> Texto alineado arriba <hr> <p align="center"><a name="foto2"></a><font color="#008000" size="4">fotografia 2</font></p> <img src="imagenes/foto2.gif" width="100" height="100" ALIGN=MIDDLE> Texto alineado al centro <hr> <p align="center"><a name="foto3"></a><font color="#008000" size="4">fotografia 3</font></p> <img src="imagenes/foto3.gif" width="100" height="100" ALIGN=BOTTOM> Texto alineado abajo <hr> <p align="left"><a href="#inicio">Volver al principio de la pagina</a></p> </center> </body> </html>

Guardar el archivo como Practica5.html en formato texto y visualizarlo con el navegador. 5 bis. Mas sobre imgenes Aadir al codigo de Practica5.html las siguientes sentencias: Imagen con hipervinculo

<HR><A HREF="Practica3.html" alt=MI tercera practica><IMG SRC="imagenes/adelante.gif"> </A> Enlace a Practica 3<HR>

Texto rodeando completamente la imagen <hr><p> Hidra (mitologa), en la mitologa griega, monstruo de nueve cabezas que viva en un pantano cerca de Lerna, Grecia. Una amenaza para todos los habitantes de Argos, <IMG SRC="imagenes/hidra.gif" width="100" height="100" ALIGN=LEFT > tena un aliento mortalmente ponzooso y cuando le cortaban una de sus cabezas, crecan dos en su lugar; la cabeza del centro era inmortal. Hrcules, a quien se envi a matarla como el segundo de sus doce trabajos, logr eliminarla quemando las ocho cabezas mortales y enterrando la novena, inmortal, bajo una enorme roca. Hrcules es el nombre romano del hroe griego Heracles. Era hijo del dios Zeus y de Alcmena, mujer del general tebano Anfitrin.

Pedro Rufo Martn http://www.asptutor.com

Pgina 5 de 13

Practicas de HTML

Hera, la celosa esposa de Zeus, decidida a matar al hijo de su infiel marido, poco despus del nacimiento de Hrcules envi dos grandes serpientes para que acabaran con l. El nio era an muy pequeo pero estrangul a las serpientes. <hr> Rotura de texto
<IMG SRC="imagenes/muro.gif" ALIGN=LEFT> Este texto esta a un lado de la imagen. <BR> Este tambin esta a un lado de la imagen, en la lnea siguiente. <BR CLEAR=LEFT> Este otro texto, en cambio, ha buscado el primer margen libre a la izquierda.

6. Tablas En un procesador de texto cualquiera teclear los siguientes cdigos. Crear primero la pgina del primer punto a e ir completando los siguientes puntos en el mismo archivo. Salvar el archivos como Practica6.html y visualizar los resultados con el navegador. Tabla sencilla
<HTML> <HEAD> <TITLE> Practicas de tablas </TITLE> </HEAD> <BODY> <TABLE BORDER> <CAPTION> Ejemplo de tabla sencilla</CAPTION> <TR> <TD>fila1-celda1</TD> <TD>fila1-celda2</TD> <TD>fila1celda3</TD> </TR> <TR> <TD>fila2-celda1</TD> <TD>fila2-celda2</TD> <TD>fila2celda3</TD> </TR> </TABLE> </BODY> </HTML>

Tablas con desigual numero de celdas


<TABLE BORDER> <CAPTION> Ejemplo de tabla sencilla</CAPTION> <TR> <TD>fila1-celda1</TD> <TD>fila1-celda2</TD> <TD>fila1celda3</TD> </TR> <TR>

Pedro Rufo Martn http://www.asptutor.com

Pgina 6 de 13

Practicas de HTML

<TD>fila2-celda1</TD> <TD>fila2-celda2</TD> </TR> </TABLE>

Grosor de los bordes


<TABLE BORDER=5>

Celdas de cabecera
<TR> <TH>Columna 1</TH> <TH>Columna 2</TH> <TH>Columna 3</TH> </TR>

Contenido de las celdas


<HTML> <HEAD> <TITLE> Contenido de las celdas </TITLE> </HEAD> <BODY> <TABLE BORDER=5> <CAPTION> Tabla con diversos elementos</CAPTION> <TR> <TH>Dibujo</TH> <TH>Link</TH> <TH>Texto</TH> </TR> <TR> <TD><IMG SRC="hidra.gif" WIDTH=60 HEIGHT=150 ></TD> <TD><A HREF="Pagina1.html">Pgina principal </A></TD> <TD>Un texto cualquiera</TD> </TR> </TABLE> </BODY> </HTML>

Alineacin dentro de las celdas Alineacin en sentido vertical


<TD VALIGN=TOP> Arriba </TD> <TD VALIGN=BOTTOM> Abajo </TD>

Alineacin en sentido horizontal


<TD ALIGN=CENTER> Al centro </TD> <TD ALIGN=RIGHT> A la derecha </TD> <TH ALIGN=LEFT> Cabecera a la izquierda </TH> (Nota: Las cabeceras por defecto estn centradas)

Dimensionado de las tablas


<TABLE WIDTH=60%> Fuerza a la tabla a ocupar el 60% de la ventana <TABLE HEIGHT=200> Dimensiona la tabla a 200 puntos de alto

Pedro Rufo Martn http://www.asptutor.com

Pgina 7 de 13

Practicas de HTML

Celdas que abarcan a otras varias


<TR><TD COLSPAN=2> Celda sobre 2 columnas </TD><TR> <TD ROWSPAN=2> Celda junto a 2 filas </TD>

Color de fondo en tablas y celdas


<TABLE BORDER BGCOLOR="#00FF00"> <TD BGCOLOR="#FF0000">

Imgenes de fondo en tablas y celdas


<TABLE BORDER BACKGROUND="nubes.jpg"> <TD BACKGROUND="nubes.jpg>

Separacin entre las celdas


<TABLE BORDER CELLSPACING=20>

Separacin entre el borde y el contenido de las celdas


<TABLE BORDER CELLPADDING=20>

7. Formularios En un procesador de texto cualquiera teclear la pagina base (Formulario simple) e ir introduciendo y visualizando en el navegador los diferentes elementos. Salvar el archivo como Practica7.html y visualizarlo con el navegador. Formulario simple
<html> <head> <title>Practica de formularios</title> </head> <body> <FORM ACTION=http://www.host.com/vfor.asp METHOD="POST"> Escriba su usuario: <BR> <INPUT TYPE="text" NAME="usuario" SIZE="10" MAXLENGTH="12"> <P><INPUT TYPE="submit" VALUE="Enviar datos"> &nbsp;&nbsp;<INPUT TYPE="reset" VALUE="Borrar datos"> </FORM> </body> </html>

Pedro Rufo Martn http://www.asptutor.com

Pgina 8 de 13

Practicas de HTML

Password Aadir un campo de tipo contrasea


<INPUT TYPE="password" NAME="clave" SIZE="10" MAXLENGTH="12">

Texto Multilinea Insertar dentro del FORM este nuevo elemento:


Introduzca sus sugerencias o comentarios: <TEXTAREA NAME="Comentarios" ROWS="6" COLS="40"> </TEXTAREA>

Menus Insertar dentro del FORM este nuevo elemento:


Cmo contacto con nosotros? <SELECT NAME="Contacto"> <OPTION value=casualidad>Por casualidad </OPTION> <OPTION value=periodico>Por el periodico </OPTION> <OPTION value=buscadores>En los buscadores </OPTION> <OPTION value=comentario>Me lo comentaron </OPTION> </SELECT >

Checkbox Insertar dentro del FORM este nuevo elemento:


<INPUT TYPE="checkbox" NAME="Lista"> S, deseo recibir informacin acerca de sus productos.

Radio Button Insertar dentro del FORM este nuevo elemento:


Cul es su sistema operativo preferido? <BR> <INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="NT" CHECKED> Windows NT <INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="Mac"> Mac <INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="Unix"> Unix

Pedro Rufo Martn http://www.asptutor.com

Pgina 9 de 13

Practicas de HTML

8. Marcos Crear una pagina de marcos que nos permita acceder a todas las practicas realizadas hasta ahora. Guardar los diferentes archivos con los nombres: Practica8.html Pagina de definicin de marcos Practica8fi.html Marco Izquierdo Practica8fd.html Marco derecho Cada vez que se seleccione una de las practicas en el marco izquierdo, debe mostrarse la pagina en el marco derecho, el enlace INICIO nos conducir de nuevo a la pagina de presentacin. Nota: El texto ondulante que aparece en la pagina de presentacin es una applet que introduciremos en una practica posterior.

Codigo de la pagina principal de marcos:


<html> <head> <title>Practica de Frames</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <frameset cols="182,*"> <frame name="contenido" target="principal" src="practica8fi.htm"> <frame name="principal" src="practica8fd.html"> <noframes> <body> <p>Esta pgina usa marcos, pero su explorador no los admite.</p> </body> </noframes> </frameset> </html>

Pedro Rufo Martn http://www.asptutor.com

Pgina 10 de 13

Practicas de HTML

9. Java Script En un procesador de texto cualquiera teclear los siguientes cdigos. Salvar el archivos como Practica9.html y visualizar los resultados con el navegador. Nota: Al contrario que en HTML, Java Script distingue entre maysculas y minsculas.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script LANGUAGE="JavaScript"><!-/// Funcion de cambio de imagenes al mover el raton sobre ellas // Imagenes seleccionadas image1on = new Image(); image1on.src ="imagenes/buzon_abierto.jpg"; image2on = new Image(); image2on.src ="imagenes/cara_alegre.jpg"; // Imagenes por defecto image1off = new Image(); image1off.src ="imagenes/buzon_cerrado.jpg"; image2off = new Image(); image2off.src ="imagenes/cara_triste.jpg"; function img_act(imgNombre) { imgOn = eval(imgNombre + "on.src"); document [imgNombre].src = imgOn; } function img_inact(imgNombre) { imgOff = eval(imgNombre + "off.src"); document [imgNombre].src = imgOff; } /// Scroll en en una ventana, var txt="Esta es la primera linea de texto que se desplaza " + " y esta es la segunda, puedes poner todas las" + " que quieras ! "; function scroll() { document.frm.w.value = txt; txt = txt.substring(1, txt.length) + txt.charAt(0); window.setTimeout("scroll()",150);} //--> </script>

Pedro Rufo Martn http://www.asptutor.com

Pgina 11 de 13

Practicas de HTML

<title>Ejemplos de JavaScript</title> </head> <body onLoad="scroll()" bgcolor="#C0C0C0"> <table border="1" width="100%"> <tr> <td width="100%" bgcolor="#008080"><p align="center">Aplicaciones de Java script</td> </tr> </table> <p><br> </p> <div align="center"><center> <table border="1" width="82%" height="77"> <tr> <td width="50%" rowspan="2" height="71"><table border="1" width="32%"> <tr> <td width="100%" colspan="2" bgcolor="#FFFFFF"><p align="center">Cambio de imgenes </td> </tr> <tr> <td width="50%" align="center" bgcolor="#0000FF"><img src="imagenes/buzon_cerrado.jpg" name="image1" alt="correo" onMouseOver="img_act('image1')" onMouseout="img_inact('image1')" WIDTH="118" HEIGHT="118"></td> <td width="50%" align="center" bgcolor="#0000FF"><img src="imagenes/cara_triste.jpg" name="image2" alt="cara" onMouseOver="img_act('image2')" onMouseout="img_inact('image2')" WIDTH="118" HEIGHT="118"></td> </tr> </table> </td> <td width="50%" height="8" bgcolor="#FFFFFF"><p align="center">Caja de texto rotativo</td> </tr> <tr> <td width="50%" height="75" bgcolor="#0000FF"><form NAME="frm"> <p><input TYPE="text" NAME="w" SIZE="45"> </p> </form> </td> </tr> </table> </center></div> <div align="center"> <table border="1" width="56%"> <tr> <td width="100%"><p align="center"><a href="javascript:window.history.back()"><img src="imagenes/atras.gif" alt="atras.gif (650 bytes)" align="middle" WIDTH="30" HEIGHT="30">Volver a la pagina anterior</a></td> </tr> </table> </div> </body> </html>

Pedro Rufo Martn http://www.asptutor.com

Pgina 12 de 13

Practicas de HTML

10. Applet Java En la pagina Pagina8fd.html realizada en la practica8 introducir la llamada a la APPLET SineText

<applet codebase="applet" code="SineText.class" width="400" height="100"> <param name="Text" value="Coleccin de practicas"> <param name="Foreground" value="FF0000"> <param name="Background" value="FFFFFF"> <param name="Traveling" value="yes"> <param name="MouseClick" value="yes"> <param name="Rate" value="4"> </applet>

Pedro Rufo Martn http://www.asptutor.com

Pgina 13 de 13

También podría gustarte