HTML (Hyper Text Markup Language)
Download
Report
Transcript HTML (Hyper Text Markup Language)
Junio 2: Desarrollo del proyecto en la sala 3
Junio 9: Continuación del proyecto en la sala 3
Junio 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
HTML
Manejo de viñetas
Se utiliza la etiqueta <ul>
<ul>
<li> Windows </li>
<li> Linux </li>
<li> Unix </li>
</ul>
HTML
Manejo de Listas ordenadas
Se utiliza la etiqueta <ol>
<ol>
<li> Windows </li>
<li> Linux </li>
<li> Unix </li>
</ol>
HTML
Manejo 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>
Indica que comienza un fila
<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 una fila
HTML
<b> Texto </b>
Negrita
<u>Texto </u>
Subrayado
<i> Texto </i>
Cursiva
HTML
Para 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_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/
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">
menu.html
<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>
<HTML>
<HEAD>
<TITLE> Proyecto I.T.I. </TITLE>
</HEAD>
index.html
<FRAMESET cols="200,*">
<FRAME SRC="menu.html">
<FRAME SRC="inicio.html" name="iti" noresize>
</FRAMESET>
</HTML>
Nombres y códigos
Documentación
Este enlace debe permitir la
descarga de cada uno de los
documentos a entregar