Junio 2: Desarrollo del proyecto en la sala 3 Junio 9: Continuaci

1
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)
2
HTML(Hyper Text Markup Language)
3
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.

4
HTML

• Sintaxis de las etiquetas HTML
• ltetiquetagt contenido lt/etiquetagt
• ltTITLEgt Curso ITI lt/TITLEgt
• ltH1gt Introducción al lenguaje HTML lt/H1gt

5
ltHTMLgt ltHEADgt ltTITLEgt Curso ITI
Lenguaje HTML lt/TITLEgt lt/HEADgt ltBODYgt
Cuerpo de la página lt/BODYgt lt/HTMLgt
6
HTML
ltH1gt Permite colocar el texto que se encuentra
entre las etiquetas de inicio y de fin, en un
tamaño y formato diferente ltBRgt Etiqueta que no
requiere ser cerrada y que permite un salto de
línea
7
HTML
ltCENTERgt Permite centrar el texto que se
encuentra entre las etiquetas de inicio y de
fin ltFONT size"4" color"blue"gt Permite
establecer el color, estilo y tamaño de la fuente
8
HTML
ltBODY bgcolor"black"gt Permite establecer el
color del fondo de la página ltBODY
backgroundnombreImagen.jpg"gt Establece una
imagen como fondo
9
HTML
ltIMG srcnombre.jpg" ALTComentario" gt 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
10
HTML
ltHRgt Inserta una línea horizontal
11
HTML
ltA HREFinicio.html"gt Inicio lt/Agt Crea un
hiperenlace a la página llamada exactamente con
el nombre inicio.html. El enlace aparecerá con el
nombre de Inicio.
12
HTML
ltA HREFhttp//www.google.comgt Google
lt/Agt Crea un enlace a la página
http//www.google.com El enlace aparecerá con el
nombre Google
13
HTML
ltA HREF"http//www.google.com"gt ltIMG
src"google.gif"gt lt/Agt Crea un enlace a la página
"http//www.google.com" El enlace aparecerá como
la imagen del archivo llamado google.gif
14
HTML
ltA HREFEstructuraTematica.odp"gt Estructura
temática lt/Agt Crea un enlace a un archivo. Este
enlace, permite que se descargue el archivo
15
HTML
ltA HREFmailtooscarbed_at_eisc.univalle.edu.co gt
Oscar Bedoya lt/Agt Crea un enlace a una
dirección de correo electrónico
16
HTML
Manejo de viñetas Se utiliza la etiqueta
ltulgt ltulgt ltligt Windows lt/ligt ltligt Linux
lt/ligt ltligt Unix lt/ligt lt/ulgt
17
HTML
Manejo de Listas ordenadas Se utiliza la etiqueta
ltolgt ltolgt ltligt Windows lt/ligt ltligt Linux
lt/ligt ltligt Unix lt/ligt lt/olgt
18
HTML
Manejo de tablas ltTABLEgt para la definición de
la tabla ltTRgt para la creaciones de cada fila
ltTDgtAca se pone el texto de la celda lt/TDgt
19
HTML
ltTABLE border"1" gt ltTRgt ltTDgt Esta es la celda
1,1 lt/TDgt ltTDgt Esta es la celda 1,2 lt/TDgt ltTDgt
Esta es la celda 1,3 lt/TDgt lt/TRgt ltTRgt ltTDgt Esta
es la celda 2,1 lt/TDgt ltTDgt Esta es la celda 2,2
lt/TDgt ltTDgt Esta es la celda 2,3
lt/TDgt lt/TRgt lt/TABLEgt
Indica que comienza un fila
Indica que comienza una fila
20
HTML
ltbgt Texto lt/bgt Negrita ltugtTexto
lt/ugt Subrayado ltigt Texto lt/igt Cursiva
21
HTML
Para colocar la a con tilde aacute Informacioa
cuten Para colocar la ñ ntilde
22
HTML
ltimg srcnombre.jpg width200
height150 altComentario gt Permite
establecer las dimensiones de la imagen
23
HTML
ltbgsound srcmusica.mp3" loopinfinitegt Incluir
sonido en Internet Explorer ltEMBED
SRCmusica.mp3" autostarttruegtlt/EMBEDgt Incluir
sonido en Netscape, Mozilla ltEMBED
SRCvideo.mpg" HEIGHT110 WIDTH220gt
lt/EMBEDgt Incluir un video. Los videos tienen
extensión avi o mpg.
24
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 . systemanyuser l
• fs sa public_html systemanyuser rl

25
HTML

• Cómo publicar la página para que esté disponible
  en Internet?
• La dirección de la página será
  http//malpelo/u0309555/

26
(No Transcript)
27
menu.html
28
inicio.html
29
index.html es la página principal que integra el
menú y la zona de despliegue
30
ltHTMLgt ltHEADgt ltTITLEgt Menu lt/TITLEgt
ltHEADgt ltBODY bgcolor"black"gt ltFONT size"4"
color"white" gt GUINNESS RECORDS
DISPONIBLES ltbrgt ltA HREF"nails.html"
target"iti"gt Fingernailslt/Agt ltbrgtltbrgt ltA
HREF"coin.html" target"iti"gt Coin lt/Agt
ltbrgtltbrgt ltA HREF"bowling.html" target"iti"gt
Bowling lt/Agtltbrgtltbrgt ltA HREF"math.html"
target"iti"gt Math lt/Agtltbrgtltbrgt ltA
HREF"cards.html" target"iti"gt Memory
lt/Agtltbrgtltbrgt ltA HREF"mind.html" target"iti"gt
Mind lt/Agtltbrgtltbrgt lt/BODYgt lt/HTMLgt
menu.html
31
ltHTMLgt ltHEADgt ltTITLEgt Proyecto I.T.I.
lt/TITLEgt lt/HEADgt ltFRAMESET cols"200,"gt
ltFRAME SRC"menu.html"gt ltFRAME SRC"inicio.html"
name"iti" noresizegt lt/FRAMESETgt lt/HTMLgt
index.html
32
Nombres y códigos
Documentación
Este enlace debe permitir la descarga de cada uno
de los documentos a entregar