Sunteți pe pagina 1din 17

1

Ejercicios Iniciales en HTML

 1: Ejercicios básicos
o edición de archivo ejem1.htm usando un editor (por ejemplo el Bloc de notas)
o Visualizar el ejem1.htm con el navegador (IE).
o Usar en el visualizador del browser:
file:///D:/Alejandra/Cursos/CursoPHP/CCyD/Clase1/Ejem1.html

 2: Los enlaces
o ejem2.htm

 3: Listas anidadas
o edición de listas anidadas: ejem3.htm
o desdoblamiento de listas, creación de lista de índices

 4: Secciones, atributos
o creación de secciones (h2, h3)
o edición de archivo ejem4.htm
o creación de carpetas: raíz(gifs,docs)
o etiquetas y atributos <ol type="i">
o editores: Bloc de notas, HoTMetaL, Dreamweaver, FrontPage

 5: Tipos de enlaces
o edición de archivo ejem5.htm
o incorporación de imágenes:
<img src="../gifs/world.gif">
o enlaces: tipos de enlaces

 6: Cuestiones de estilo (opcional).


o Edición con HoTMetaL (de SoftQuad)
o las hojas de estilo (CSS).
o etiqueta LINK dentro de HEAD: <link href="ejem.css"
REL="stylesheet" type="text/css">
o archivo de muestra, ejem6.htm (el estilo se particulariza en cada elemento
mediante la etiqueta "class")
o ejemplo de hoja de estilo: ejem.css

 7: Indice
o Confeccione una hoja llamada Index.html, que tenga vínculos dinámicos a las
prácticas anteriores.
o Agregue colores :

Document background <body bgcolor=color>


All document text <body text=color>
Active hyperlinks <body alink=color>
Visited hyperlinks <body vlink=color>
Regular hyperlinks <body link=color>
Small portion of text <font color=color>

En todos los casos, debe especificar el valor del color como un nro hexadecimal de 6
díditos que represente el rojo, verde y azul (RGB) que compone el color. Los primeros 2
dígitos corresponden al componente de rojo, los dos siguientes al verde, y los dos
ultimos al azul.
2

Un valor de 00 corresponde a la falta total de la componente de ese color y un valor de


FF (255) corresponde al uso total de esa componente de color.

Ejemplo, rojo brillante es FF0000, verde brillante es 00FF00, y azul brillante es


0000FF.

Otros colores primarios son una mezcla de componnentes:

Amarillo (FFFF00), magenta (FF00FF), y cyan (00FFFF).

Blancoe (FFFFFF) y negro (000000).

Use estos valore en el tag reemplazando el color con la componente RGB deseada ,
precedida por un (#). Ejemplo para el color magenta ::

<body vlink="#FF00FF">
ejem1.htm
<!DOCTYPE HTML>
<HTML>

<HEAD>
<TITLE>P&aacute;gina inicial de Alejandra</TITLE>
</HEAD>

<BODY>
<H1>P&aacute;gina inicial de Alejandra</H1>
<P>Bienvenido a mi p&aacute;gina personal. Soy la teacher del curso y
esta es mi p&aacute;gina inicial, con la lista de mis enlaces favoritos
y otra informaci&oacute;n de inter&eacute;s </P>
<H2>Enlaces favoritos:</H2>
<OL>
<LI>Internet </LI>
<LI>Google </LI>
<LI>Aldea global </LI>
<LI>Manual de HTML</LI>
</OL>
<ADDRESS>Alejandra, CCyD , Abril 2006.</ADDRESS>
</BODY>

</HTML>

Ejem2.htm

 UTF-8 - Character encoding for Unicode


 ISO-8859-1 - Character encoding for the Latin alphabet
3

<!DOCTYPE HTML >

<html lang="es">

<HEAD>
<meta charset="UTF-8">
<TITLE>Página inicial de Alejandra</TITLE>
</HEAD>

<BODY>
<H1>Página inicial de Alejandra</H1>
<P>Bienvenido a mi página personal. Soy la teacher del curso y esta e
s mi página inicial, con la lista de mis enlaces favoritos y otra informa
ción de interés </P>
<H2>Enlaces favoritos:</H2>
<OL>
<LI>Internet </LI>
<LI>
<A HREF="http://www.google.com">Google </A>
</LI>
<LI>Aldea global </LI>
<LI>
<A HREF="../w3c/htmlref.htm">Manual de HTML</A>
</LI>
</OL>
<ADDRESS>Alejandra, CCyD , Enero 2020.</ADDRESS>

</BODY>

</HTML>

Ejem3.htm

<!DOCTYPE HTML >

<html lang="es">

<HEAD>
<meta charset="UTF-8">
<TITLE>Página inicial de Alejandra</TITLE>
</HEAD>

<BODY>
<H1>Página inicial de Alejandra</H1>
<P>Bienvenido a mi página personal. Soy la teacher del curso y esta e
s mi página inicial, con la lista de mis enlaces favoritos y otra informa
ción de interés </P>
4

<H2>Enlaces favoritos:</H2>
<OL>
<LI>Páginas personales
<UL>
<LI>Charkes F. Golfarb </LI>
<LI>Lou Burnard </LI>
<LI>Tim Berners-Lee </LI>
</UL>
</LI>
<LI>Páginas de referencia </LI>
<LI>Portales </LI>
<LI>Medios de comunicación </LI>
</OL>

<ADDRESS>Alejandra, CCyD , Enero 2020.</ADDRESS>

</BODY>

</HTML>

Ejem4.htm

<html lang="es">

<HEAD>
<meta charset="UTF-8">
<TITLE>Página inicial de Alejandra</TITLE>
</HEAD>

<BODY>
<H1>Página inicial de Alejandra</H1>
<P>Bienvenido a mi página personal. Soy la teacher del curso y esta e
s mi página inicial, con la lista de mis enlaces favoritos y otra informa
ción de interés </P>
<H2>Enlaces favoritos:</H2>
<OL>
<LI>
<A href="#pper">Páginas personales</A>
<LI>Páginas de referencia
<LI>Portales
<LI>Publicaciones
</OL>
<HR>
<H2 id="pper">Páginas personales</H2>
<OL>
<LI>Documentalistas
<UL>
<LI>Charkes F. Golfarb
5

<LI>Lou Burnard
<LI>Tim Berners-Lee
</UL>
<LI>Historiadores
<LI>Lingüistas
<LI>Traductores
</OL>
<HR>
<H2>Páginas de referencia</H2>
<OL>
<LI>Bibliotecas universitarias
<LI>Centros de documentación
<LI>Museos de arte contemporáneo
<LI>Medios de comunicación
</OL>
<HR>
<H2>Portales</H2>
<OL>
<LI>Inicia
<LI>Telépolis
<LI>Ciudades
<LI>Terra
</OL>
<HR>
<H2>Publicaciones</H2>
<OL>
<LI>Ciberp@ís
<LI>Diario Tecnologías de la Información
<LI>The Standard
<LI>Infoworld
<LI>Wired
</OL>
<HR>

<ADDRESS>Alejandra, CCyD , Enero 2020.</ADDRESS>

</BODY>

</HTML>

Ejem5.htm

<html lang="es">

<HEAD>
6

<meta charset="UTF-8">
<TITLE>Página inicial de Alejandra</TITLE>
</HEAD>

<BODY>
<H1>Página inicial de Alejandra</H1>
<P ALIGN="CENTER">
<IMG SRC="world.gif" ALT="mundo" ALIGN="MIDDLE">
</P>
<P>Bienvenido a mi página personal. Soy la teacher del curso y esta e
s mi página inicial, con la lista de mis enlaces favoritos y otra informa
ción de interés </P>
<H2>Enlaces favoritos:</H2>
<OL>
<LI>
<A href="#pper">Páginas personales</A>
<LI>Páginas de referencia
<LI>Portales
<LI>Publicaciones
</OL>
<HR>
<H2 id="pper">Páginas personales</H2>
<OL>
<LI>Documentalistas
<UL>
<LI>
<A HREF="https://en.wikipedia.org/wiki/Charles_Goldfa
rb">Charkes F. Golfarb</A> </LI>
<LI>
<A HREF="http://users.ox.ac.uk/~lou/">Lou Burnard </A
>
</LI>
<LI>
<A HREF="http://www.w3.org/People/Berners-
Lee/">Tim Berners-Lee</A>
</LI>
</UL>
<LI>Historiadores
<UL>
<LI>
<A HREF="https://www.itba.edu.ar/la-
universidad/docentes/maria-alejandra-
buquete/">Maria Alejandra Buquete</A>
</LI>
</UL>
</OL>
<HR>
<H2>Páginas de referencia</H2>
<OL>
7

<LI>Bibliotecas universitarias
<LI>Centros de documentación
<LI>Museos de arte contemporáneo
<LI>Medios de comunicación
</OL>
<HR>
<H2>Portales</H2>
<OL>
<LI>Inicia
<LI>Telépolis
<LI>Ciudades
<LI>Terra
</OL>
<HR>
<H2>Publicaciones</H2>
<OL>
<LI>Ciberp@ís
<LI>Diario Tecnologías de la Información
<LI>The Standard
<LI>Infoworld
<LI>Wired
</OL>
<HR>

<ADDRESS>Alejandra, CCyD , Enero 2020.</ADDRESS>

</BODY>

</HTML>

Ejem6.css

BODY {
font-family: "Comic Sans MS", "Lucida Console", Courier;
background-color: #777799;
}

A:link {
text-decoration: "none";
color: "blue"
}

A:visited {
text-decoration: none;
background-color: rgb(153, 102, 153);
color: #0000A0
8

A:hover {
text-decoration: underline;
color: blue
}

H1 {
font-size: big
}

DIV.refs {
background-color: rgb(255, 255, 204);
}

DIV.publ {
color: blueviolet;
background-color: rgb(255, 239, 204);
}

Ejem6.html

<html lang="es">

<HEAD>
<meta charset="UTF-8">
<TITLE>Página inicial de Alejandra</TITLE>
<LINK HREF="ejem6.css" REL="stylesheet" TYPE="text/css">
</HEAD>

<BODY>
<H1>Página inicial de Alejandra</H1>
<P ALIGN="CENTER">
<IMG SRC="world.gif" ALT="mundo" ALIGN="MIDDLE">
</P>
<P>Bienvenido a mi página personal. Soy la teacher del curso y esta e
s mi página inicial, con la lista de mis enlaces favoritos y otra informa
ción de interés </P>
<H2>Enlaces favoritos:</H2>
<OL CLASS="index">
<LI>
<A href="#pper">Páginas personales</A>
<LI>Páginas de referencia
<LI>Portales
<LI>Publicaciones
</OL>
<HR>
<H2 id="pper">Páginas personales</H2>
<OL>
9

<LI>Documentalistas
<UL>
<LI>
<A HREF="https://en.wikipedia.org/wiki/Charles_Goldfa
rb">Charkes F. Golfarb</A> </LI>
<LI>
<A HREF="http://users.ox.ac.uk/~lou/">Lou Burnard </A
>
</LI>
<LI>
<A HREF="http://www.w3.org/People/Berners-
Lee/">Tim Berners-Lee</A>
</LI>
</UL>
<LI>Historiadores
<UL>
<LI>
<A HREF="https://www.itba.edu.ar/la-
universidad/docentes/maria-alejandra-
buquete/">Maria Alejandra Buquete</A>
</LI>
</UL>
</OL>
<HR>
<DIV CLASS="refs">
<A NAME="refs"></A>

<H2>Páginas de referencia</H2>
<OL>
<LI>Bibliotecas universitarias
<LI>Centros de documentación
<LI>Museos de arte contemporáneo
<LI>Medios de comunicación
</OL>
<HR>
</DIV>
<DIV CLASS="publ">

<H2>Portales</H2>
<OL>
<LI>Inicia
<LI>Telépolis
<LI>Ciudades
<LI>Terra
</OL>
<HR>
<H2>Publicaciones</H2>
<OL>
<LI>Ciberp@ís
10

<LI>Diario Tecnologías de la Información


<LI>The Standard
<LI>Infoworld
<LI>Wired
</OL>
</DIV>
<HR>

<ADDRESS>Alejandra, CCyD , Enero 2020.</ADDRESS>

</BODY>

</HTML>
11

Ejercicios Intermedios en HTML

 7: Texto animado

o edición de archivo ejem7.htm


o Las Tablas
o Agregue colores y Visualizar el ejem7.htm con el navegador (IE). :

<table bgcolor=color>
<tr bgcolor=color>
Table cells
<td bgcolor=color>
<th bgcolor=color>
<table bordercolor=color>
<table bordercolorlight=color>
Table borders (Internet Explorer only)
<table bordercolordark=color>
(same for <tr>, <td>, and <th>)

 8: Frames
o edición de frames: ejem8.htm

 9 Y 10: Formularios
o edición de archivo ejem9.htm
o creación de cajas de texto, option buttons, commnad buttons, check buttons ,
listas desplegables y áreas de texto

Ejem7.htm

<!DOCTYPE HTML >

<html lang="es">

<HEAD>
<meta charset="UTF-8">
<TITLE>Página inicial de Alejandra</TITLE>
</HEAD>

<BODY>
<MARQUEE>A las tablas !!!!</MARQUEE>

<!-- Esto es un comentario -->


<table border cellspacing=0 cellpadding=5>
<caption align=bottom> Mirar Futbol versus Mirar Utilisima, por g
énero</caption>
<tr>
<td colspan=2 rowspan=2></td>
<th colspan=2 align=center>Preferencias</th>
</tr>
<tr>
<th>Mirar Futbol</th>
<th>Mirar Utilisima</th>
12

</tr>
<tr align=center>
<th rowspan=2>Género</th>
<th>Masculino</th>
<td>73%</td>
<td>27%</td>
</tr>
<tr align=center>
<th>Femenino</th>
<td>16%</td>
<td>84%</td>
</tr>
</table>
</BODY>

</HTML>

Ejem8.htm

<!DOCTYPE HTML >

<html lang="es">

<HEAD>
<meta charset="UTF-8">
<TITLE>Frames Layout</TITLE>
</HEAD>
<frameset rows="60%,*" cols="65%,20%,*">
<frame src="ejem1.html">
<frame src="ejem2.html">
<frame src="ejem3.html" name="fill_me">
<frame scrolling=yes src="ejem4.html">
<frame src="ejem5.html">
<frame src="ejem6.html">
<noframes> Ud esta usando un Navegador que no
soporta frames.
<a href="ejem1.html">Tome este link</a> p
ara ver el primer documento HTML que hizo en esta practica.
</noframes>
</frameset>

</HTML>

Ejem8VersionHTML5.htm
13

La etiqueta IFRAME siempre debe insertarse en la sección BODY de la página


principal.

Con relación al scroll, podemos ponerlo automático, obligado o sin scroll


scrolling="auto", scrolling="YES", scrolling="NO",

Con respecto al borde podemos hacer que no lo tenga o que lo tenga:


frameborder="0", frameborder="1"

Es posible definir su altura y su ancho


height="300" width="300"

<!DOCTYPE HTML >

<html lang="es">

<HEAD>
<meta charset="UTF-8">
<TITLE>Frames Layout</TITLE>
</HEAD>

<body>

<iframe src="https://ccyd.com.ar/" width="600" height="400" scrolling


="auto">

Texto alternativo para navegadores que no aceptan iframes

</iframe>

</body>

</HTML>

Ejem9.htm

<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8">
14

<title>Ejemplo del uso de formularios -


aprenderaprogramar.com</title>
</head>

<body>

<form action="http://www.aprenderaprogramar.com" method="get">

<p>

<label for="nombre">Nombre: </label>

<input type="text" name="nombre" id="nombre">

<br/> <br/>

<label for="apellido">Apellido: </label>

<input type="text" name="apellido" id="apellido">

<br/> <br/>

<label for="email">Email: </label>

<input type="text" name="email" id="email">

<br/> <br/>

<input type="radio" name="sexo" id="varon" value="Varón">

<label for="varon">Varón: </label>

<br/> <br/>

<input type="radio" name="sexo" id="mujer" value="Mujer">

<label for="mujer">Mujer: </label>

<br/> <br/>

<input type="submit" value="Enviar">

<input type="reset">

</p>

</form>

</body>
15

</html>

Ejem10.htm

<html lang="es">

<HEAD>
<meta charset="UTF-8">
<TITLE>Web Banking</TITLE>
</HEAD>

<BODY>

Bienvenidos a nuestra página de Web banking !! No, ud no puede deposi


tar o retirar efectivo ... pero puede consultar su saldo, hacer transfere
ncias y listar los últimos movimientos de su cuenta.

<form method="post" action="Ejem1.html">


<pre> Número de Cuenta:

<input type="text" name="acct"> PIN:


<input type="password" name="pin" size=8> Transaction:
<br/>
<select name="transaction">
<option value="saldo" selected>Saldo de Cuenta </option>
<option value="trans">Transferir </option>
<option value="ults">Ver últimas transactiones </option>
<option value="alto">Detener un pago de un cheque </option>
</select>
<br/>
<input type="radio" name="verify_by_mail" value="yes" checked> Enviar Mai
l con la verificación
<input type="radio" name="verify_by_mail" value="no"> No enviar mail con
la verificación
<br/>
<input type="checkbox" name="info " value="cds"> Certificados de depósito
<input type="checkbox" name="info " value="mortgages"> Tasas de interés d
e Hipoteca
<input type="checkbox" name="info " value="autoloans"> Tasas de interés d
e préstamos personales
<br/>
<textarea rows=5 cols=60 name="comments ">
</textarea>

<input type="submit" value="Enviar">

<input type="reset" value="Limpiar">


16

</form>

<ADDRESS>Alejandra, CCyD , Enero 2020.</ADDRESS>

</BODY>

</HTML>

REALIZAR EL SIGUIENTE FORMULARIO:


17

REFERENCIAS

https://html.spec.whatwg.org/multipage/semantics.html

S-ar putea să vă placă și