Documente Academic
Documente Profesional
Documente Cultură
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
7: Indice
o Confeccione una hoja llamada Index.html, que tenga vínculos dinámicos a las
prácticas anteriores.
o Agregue colores :
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
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á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 es mi página inicial, con la lista de mis enlaces favoritos
y otra información de interé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
<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
<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>
</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>
</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>
</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
</BODY>
</HTML>
11
7: Texto animado
<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
<html lang="es">
<HEAD>
<meta charset="UTF-8">
<TITLE>Página inicial de Alejandra</TITLE>
</HEAD>
<BODY>
<MARQUEE>A las tablas !!!!</MARQUEE>
</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
<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
<html lang="es">
<HEAD>
<meta charset="UTF-8">
<TITLE>Frames Layout</TITLE>
</HEAD>
<body>
</iframe>
</body>
</HTML>
Ejem9.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
14
<body>
<p>
<br/> <br/>
<br/> <br/>
<br/> <br/>
<br/> <br/>
<br/> <br/>
<input type="reset">
</p>
</form>
</body>
15
</html>
Ejem10.htm
<html lang="es">
<HEAD>
<meta charset="UTF-8">
<TITLE>Web Banking</TITLE>
</HEAD>
<BODY>
</form>
</BODY>
</HTML>
REFERENCIAS
https://html.spec.whatwg.org/multipage/semantics.html