0prácticas Básicas de HTML

Aplicaciones Web.
Tema 2. Lenguajes de marcas: HTML y CSS. Prcticas HTML.

Prcticas de HTML
1. Pgina bsica
Teclear el siguiente cdigo:
<HTML>
<HEAD>
<TITLE> Mi primera pagina Web </TITLE>
</HEAD>
<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.
C.F.G.M. Sistemas Microinformticos y Redes

IES Luis Braille Coslada
Ana M. Barbero y M. ngeles Bravo
Pgina 1/11
Aplicaciones Web.
2. Fondos de pgina, cabeceras y bloques

<html>
<head>
<title>Prctica 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>
<p>Prrafo dentro del <DIV> centrado, por lo cual, hereda la alineacin</p>
</div>
<hr width="50%" size="5">

<hr>
<blockquote>Prrafos con diferentes alineaciones</blockquote>
<p>Prrafo fuera del <DIV> centrado, por lo cual toma la alineacin izquierda por defecto</p>
<p align="right">Prrafo alineado a la derecha</p>
<p align="center">Prrafo centrado</p>
<hr>
con esta lnea
comprobamos que el H
lnea
L no respeta ni los espacios ni los saltos de
<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 aadir ms blancos, debemos hacer
referencia a la entidad que lo representa ( )como por ejemplo:

esto</p>
<p> Para cualquier consulta dirigirse a <address> Juana Gonzlez </address><p>
</body>
</html>

Pgina 2/11
Aplicaciones Web.
3. Resaltados de texto y control de fuentes

Con las etiquetas de control de texto estudiadas conseguir los efectos siguientes:
Agregar adems a la pgina diferentes ejemplos de etiquetas de resaltado.


Pgina 3/11
Aplicaciones Web.
4. Listas
Teclear el siguiente cdigo
<HTML>
<HEAD>
<TITLE> Prctica 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>
<LI> El deporte</LI>
<UL>
<LI> Natacin</LI>
<LI> Baloncesto</LI>
</UL>
<LI> La msica</LI>
</UL>
La msica que ms me gusta es (en orden de preferencia):
<OL>
<LI> El rock</LI>
<LI> El jazz</LI>
<LI> La msica clsica</LI>
</OL>
</BODY>
</HTML>
Completar la pgina con el resto de tipos de listas estudiadas y observar sus diferencias.

Pgina 4/11
Aplicaciones Web.
5. Hiperenlaces e inclusin de imgenes

<html>
<head>
<title>Prctica de Hiperenlaces</title>
</head>
<body bgcolor="#D9D9F3">
<p align="center"><a name="inicio"></a>
<font size=+3><u>Enlaces con otras pginas</u></font></p>
<hr><hr width="80%">
<ul>
<li><p align="left"><a href="http://www.microsoft.com">Microsoft</a></p></li>
<li><p align="left"><a href="Practica1.html">Mi primera pgina Web</a></p></li>
<li><p align="left"><a href="Practica2.html">Mi segunda pgina Web</a></p></li>
</ul>
<hr width="80%"><hr>
<p align="center"><font size=+3><u>Enlaces en la misma pgina</u></font></p>
<hr><hr width="80%">
<ul>
<li><p
<li><p
<li><p
<li><p
</ul>
align="left"><a
align="left"><a
align="left"><a
align="left"><a
href="#foto1">Foto 1</a></p></li>
href="#inicio">Volver al principio de la pgina</a></p></li>
<hr width="80%"><hr>
<center>
<p align="center"><a name="foto1"></a><font color="#008000" size="4">fotografa 1</font></p>
<img src="imagenes/foto1.gif" width="100" height="100" ALIGN=TOP>
Texto alineado arriba
<hr>
<img src="imagenes/foto2.gif" width="100" height="100" ALIGN=MIDDLE>
Texto alineado al centro
<hr>
<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 pgina</a></p>
</center>
</body>
</html>

Pgina 5/11
Aplicaciones Web.
5.1. Validacin
Ahora vamos a validarlo con http://validator.w3.org/check y corregiremos todos los errores. Usaremos
las siguientes especificaciones:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
5 bis. Ms sobre imgenes

Aadir al cdigo de Practica5.html las siguientes sentencias:
Imagen con hipervnculo

<HR><A HREF="Practica3.html">
<IMG SRC="imagenes/adelante.gif" alt=Mi tercera prctica>
</A> Enlace a prctica 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. 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.

Pgina 6/11
Aplicaciones Web.
6.
Tablas
Teclear el siguiente cdigo. Crear primero la pgina del primer punto a e ir completando los siguientes
puntos en el mismo archivo. Salvar el archivo como Practica6.html y visualizar los resultados con el
navegador.
Tabla sencilla:
<HTML>
<HEAD>
<TITLE> Prctica de tablas </TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<CAPTION> Ejemplo de tabla sencilla</CAPTION>
<TR>
<TD>fila1-celda1</TD> <TD>fila1-celda2</TD> <TD>fila1-celda3</TD>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
Tablas con desigual nmero de celdas

<TABLE BORDER>
<CAPTION> Ejemplo de tabla sencilla</CAPTION>
<TR>
</TR>
<TR>
<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>

Pgina 7/11
Aplicaciones Web.
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="imagenes/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
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="imagenes/nubes.jpg">
<TD BACKGROUND=" imagenes/nubes.jpg>
Separacin entre las celdas
<TABLE BORDER CELLSPACING=20>

Pgina 8/11
Aplicaciones Web.
Separacin entre el borde y el contenido de las celdas

<TABLE BORDER CELLPADDING=20>
Un calendario con tablas: Debes obtener el siguiente resultado:

Pgina 9/11
Aplicaciones Web.
7. Formularios
Teclea la pgina base (formulario simple) y ve introduciendo y visualizando en el navegador los
diferentes elementos. Salva el archivo como Practica7.html y visualzalo con el navegador.
Formulario simple:
<html>
<head>
<title>Prctica de formularios</title>
</head>
<body>
<FORM ACTION="mailto: pepita@gmail.com" METHOD="POST">
Escriba su usuario:
<BR>
<INPUT TYPE="text" NAME="usuario" SIZE="10" MAXLENGTH="12">
<P><INPUT TYPE="submit" VALUE="Enviar datos"> <INPUT TYPE="reset"
VALUE="Borrar datos">
</FORM>
</body>
</html>
Aadir un campo de tipo contrasea:

<INPUT TYPE="password" NAME="clave" SIZE="10" MAXLENGTH="12">
Texto Multilnea:
Introduzca sus sugerencias o comentarios:
<TEXTAREA NAME="Comentarios" ROWS="6" COLS="40">
</TEXTAREA>
Mens
Cmo contacto con nosotros?
<SELECT NAME="Contacto">
<OPTION value=casualidad>Por casualidad </OPTION>
<OPTION value=periodico>Por el peridico </OPTION>
<OPTION value=buscadores>En los buscadores </OPTION>
<OPTION value=comentario>Me lo comentaron </OPTION>
</SELECT >
Checkbox
<INPUT TYPE="checkbox" NAME="Lista">
S, deseo recibir informacin acerca de sus productos.
Radio Button
Cul es su sistema operativo preferido?
<BR>
<INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="NT" CHECKED> Windows
<INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="Mac">Mac OS
<INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="Unix">Unix

Pgina 10/11
Aplicaciones Web.
8. Marcos
Crear una pgina de marcos que nos permita acceder a todas las prcticas realizadas hasta ahora.
Guardar los diferentes archivos con los nombres:
Practica8.html
Practica8fi.html
Practica8fd.html
Pagina de definicin de marcos

Marco Izquierdo
Marco derecho
Cada vez que se seleccione una de las prcticas en el marco izquierdo, debe mostrarse la pgina en el
marco derecho, el enlace INICIO nos conducir de nuevo a la pgina de presentacin.
Cdigo de la pgina principal de marcos:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Prctica de Frames</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset cols="182,*">
<frame name="contenido" src="practica8fi.html">
<frame name="principal" src="practica8fd.html">
<noframes>
<p>Esta pgina usa marcos, pero su explorador no los admite.</p>
</noframes>
</frameset>
</html>

Pgina 11/11

0prácticas Básicas de HTML

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

0prácticas Básicas de HTML

Caricato da

Copyright:

Formati disponibili

Aplicaciones Web.

Tema 2. Lenguajes de marcas: HTML y CSS. Prcticas HTML.

C.F.G.M. Sistemas Microinformticos y Redes

Tema 2. Lenguajes de marcas: HTML y CSS. Prcticas HTML.

2. Fondos de pgina, cabeceras y bloques

<hr width="50%" size="5">

L no respeta ni los espacios ni los saltos de

C.F.G.M. Sistemas Microinformticos y Redes

Tema 2. Lenguajes de marcas: HTML y CSS. Prcticas HTML.

3. Resaltados de texto y control de fuentes

Agregar adems a la pgina diferentes ejemplos de etiquetas de resaltado.

C.F.G.M. Sistemas Microinformticos y Redes

Tema 2. Lenguajes de marcas: HTML y CSS. Prcticas HTML.

C.F.G.M. Sistemas Microinformticos y Redes

Tema 2. Lenguajes de marcas: HTML y CSS. Prcticas HTML.

5. Hiperenlaces e inclusin de imgenes

C.F.G.M. Sistemas Microinformticos y Redes

Tema 2. Lenguajes de marcas: HTML y CSS. Prcticas HTML.

5 bis. Ms sobre imgenes

Imagen con hipervnculo

Texto rodeando completamente la imagen

C.F.G.M. Sistemas Microinformticos y Redes

Tema 2. Lenguajes de marcas: HTML y CSS. Prcticas HTML.

Tablas con desigual nmero de celdas

Grosor de los bordes

C.F.G.M. Sistemas Microinformticos y Redes

Tema 2. Lenguajes de marcas: HTML y CSS. Prcticas HTML.

Contenido de las celdas

Alineacin en sentido vertical

Alineacin en sentido horizontal

Dimensionado de las tablas

Celdas que abarcan a otras varias

C.F.G.M. Sistemas Microinformticos y Redes

Tema 2. Lenguajes de marcas: HTML y CSS. Prcticas HTML.

Separacin entre el borde y el contenido de las celdas

C.F.G.M. Sistemas Microinformticos y Redes

Tema 2. Lenguajes de marcas: HTML y CSS. Prcticas HTML.

Aadir un campo de tipo contrasea:

C.F.G.M. Sistemas Microinformticos y Redes

Tema 2. Lenguajes de marcas: HTML y CSS. Prcticas HTML.

Pagina de definicin de marcos

Cdigo de la pgina principal de marcos:

C.F.G.M. Sistemas Microinformticos y Redes

Potrebbero piacerti anche