junio 2: desarrollo del proyecto en la sala 3 junio 9: continuación del proyecto en la sala 3 junio...
TRANSCRIPT
Junio 2: Desarrollo del proyecto en la sala 3Junio 9: Continuación del proyecto en la sala 3Junio 16: Examen Final. Sala 3.
Entrega del proyecto (se indica el URL donde reside la página)
HTML(Hyper Text Markup
Language)
HTML
•Lenguaje para estructurar documentos.
•Los documentos se visualizan a través de navegadores (browsers).
•Consta de una serie de etiquetas (Tags) que le indican al navegador la forma cómo se representan los elementos contenidos en los documentos.
HTML
•Sintaxis de las etiquetas HTML:
<etiqueta> contenido </etiqueta>
<TITLE> Curso ITI </TITLE>
<H1> Introducción al lenguaje HTML </H1>
<HTML>
<HEAD>
<TITLE> Curso ITI – Lenguaje HTML </TITLE>
</HEAD>
<BODY>
Cuerpo de la página
</BODY>
</HTML>
HTML<H1>
Permite colocar el texto que se encuentra entre las etiquetas de inicio y de fin, en un tamaño y formato diferente
<BR>
Etiqueta que no requiere ser cerrada y que permite un salto de línea
HTML<CENTER>
Permite centrar el texto que se encuentra entre las etiquetas de inicio y de fin
<FONT size="4" color="blue">
Permite establecer el color, estilo y tamaño de la fuente
HTML<BODY bgcolor="black">
Permite establecer el color del fondo de la página
<BODY background=“nombreImagen.jpg">
Establece una imagen como fondo
HTML
<IMG src=“nombre.jpg" ALT=“Comentario" >
Inserta la imagen nombre.jpg en la página.
ALT permite colocar un mensaje que se visualizará cuando se pase el ratón sobre la imagen
HTML<HR>
Inserta una línea horizontal
HTML
<A HREF=“inicio.html"> Inicio </A>
Crea un hiperenlace a la página llamada exactamente con el nombre inicio.html. El enlace aparecerá con el nombre de “Inicio”.
HTML
<A HREF=“http://www.google.com”> Google </A>
Crea un enlace a la página http://www.google.com
El enlace aparecerá con el nombre “Google”
HTML
<A HREF="http://www.google.com">
<IMG src="google.gif">
</A>
Crea un enlace a la página "http://www.google.com"
El enlace aparecerá como la imagen del archivo llamado google.gif
HTML
<A HREF=“EstructuraTematica.odp">
Estructura temática
</A>
Crea un enlace a un archivo. Este enlace, permite que se descargue el archivo
HTML
<A HREF=mailto:[email protected] > Oscar Bedoya
</A>
Crea un enlace a una dirección de correo electrónico
HTMLManejo de viñetas
Se utiliza la etiqueta <ul>
<ul>
<li> Windows </li>
<li> Linux </li>
<li> Unix </li>
</ul>
HTMLManejo de Listas ordenadas
Se utiliza la etiqueta <ol>
<ol>
<li> Windows </li>
<li> Linux </li>
<li> Unix </li>
</ol>
HTMLManejo de tablas
<TABLE> para la definición de la tabla
<TR> para la creaciones de cada fila
<TD>Aca se pone el texto de la celda </TD>
HTML<TABLE border="1" >
<TR>
<TD> Esta es la celda 1,1 </TD>
<TD> Esta es la celda 1,2 </TD>
<TD> Esta es la celda 1,3 </TD>
</TR>
<TR>
<TD> Esta es la celda 2,1 </TD>
<TD> Esta es la celda 2,2 </TD>
<TD> Esta es la celda 2,3 </TD>
</TR>
</TABLE>
Indica que comienza un fila
Indica que comienza una fila
HTML<b> Texto </b>
Negrita
<u>Texto </u>
Subrayado
<i> Texto </i>
Cursiva
HTMLPara colocar la a con tilde: á
Información
Para colocar la ñ: ñ
HTML
<img src=“nombre.jpg” width=“200” height=“150” alt=“Comentario” >
Permite establecer las dimensiones de la imagen
HTML<bgsound src=“musica.mp3" loop=infinite>
Incluir sonido en Internet Explorer
<EMBED SRC=“musica.mp3" autostart=true></EMBED> Incluir sonido en Netscape, Mozilla
<EMBED SRC=“video.mpg" HEIGHT=110 WIDTH=220> </EMBED>
Incluir un video. Los videos tienen extensión avi o mpg.
HTML•¿Cómo publicar la página para que esté disponible en Internet?
•En su cuenta cree un directorio llamado public_htmlpublic_html
•Coloque en la carpeta public_html los archivos html, las imágenes y todos los archivos que se solicitan para la presentación del proyecto
•Escriba en un terminal
fs sa . system:anyuser l
fs sa public_html system:anyuser rl
HTML•¿Cómo publicar la página para que esté disponible en Internet?
•La dirección de la página será: http://malpelo/~u0309555/http://malpelo/~u0309555/
menu.html
inicio.html
index.html: es la página principal que integra el menú y la zona de despliegue
<HTML> <HEAD> <TITLE> Menu </TITLE> <HEAD><BODY bgcolor="black">
<FONT size="4" color="white" >
GUINNESS RECORDS DISPONIBLES<br><A HREF="nails.html" target="iti"> Fingernails</A> <br><br><A HREF="coin.html" target="iti"> Coin </A> <br><br><A HREF="bowling.html" target="iti"> Bowling </A><br><br><A HREF="math.html" target="iti"> Math </A><br><br><A HREF="cards.html" target="iti"> Memory </A><br><br><A HREF="mind.html" target="iti"> Mind </A><br><br>
</BODY></HTML>
menu.html
<HTML> <HEAD> <TITLE> Proyecto I.T.I. </TITLE> </HEAD>
<FRAMESET cols="200,*"> <FRAME SRC="menu.html"> <FRAME SRC="inicio.html" name="iti" noresize> </FRAMESET>
</HTML>
index.html
Nombres y códigos
DocumentaciónDocumentación
Este enlace debe permitir la descarga de cada uno de los documentos a entregar