Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Programas en HTML Leonel Morales Díaz Ingeniería Simple [email_address] Disponible en: http://www.ingenieriasimple.com/int...
Primer ejemplo <ul><li><HTML> </li></ul><ul><li><Head> </li></ul><ul><li><Title>La Inseguridad Informática</Title> </li></...
Observar <ul><li>Centrado o alineación </li></ul><ul><li>Salto de línea </li></ul><ul><li>Espacio entre líneas </li></ul><...
Segundo ejemplo <ul><li><HTML> </li></ul><ul><li><Head> </li></ul><ul><li><Title>La Inseguridad Informática</Title> </li><...
Un poco de texto <ul><li><Body> </li></ul><ul><li><H1>Inseguridad informática: un concepto dual en seguridad informática</...
Centrar <ul><li><Body> </li></ul><ul><li><H1  Align=Center >Inseguridad informática: un concepto dual en seguridad informá...
Otra forma de centrar <ul><li><Body> </li></ul><ul><li><Center> </li></ul><ul><li><H1>Inseguridad informática: un concepto...
Y otra más <ul><li><Body> </li></ul><ul><li><Div Align=“Center”> </li></ul><ul><li><H1>Inseguridad informática: un concept...
Imágenes <ul><li><HTML> </li></ul><ul><li><Body> </li></ul><ul><li><H1 Align=Center>Presentando... Una imagen:</H1> </li><...
Centrar la imagen <ul><li><HTML> </li></ul><ul><li><Body> </li></ul><ul><li><H1 Align=Center>Presentando... Una imagen:</H...
Si la imagen no existe <ul><li><HTML> </li></ul><ul><li><Body> </li></ul><ul><li><H1 Align=Center>Presentando... Una image...
Utilizar Alt <ul><li><HTML> </li></ul><ul><li><Body> </li></ul><ul><li><H1 Align=Center>Presentando... Una imagen:</H1> </...
Líneas horizontales <ul><li><HTML> </li></ul><ul><li><Body> </li></ul><ul><li><Center> </li></ul><ul><li><H1>Presentando.....
Reducir las imágenes <ul><li><HTML><Body><Center> </li></ul><ul><li><H1>Presentando... Una imagen:</H1> </li></ul><ul><li>...
Imágenes <ul><li>Se pueden usar </li></ul><ul><ul><li>jpg (jpeg), gif, bmp, ico, tiff, rle, wmf, etc. </li></ul></ul><ul><...
Tablas <ul><li><HTML><Body> </li></ul><ul><li><H4>Una tabla de imágenes</H4> </li></ul><ul><li><Table> </li></ul><ul><li><...
Bordes de tabla <ul><li><HTML><Body> </li></ul><ul><li><H4>Una tabla de imágenes</H4> </li></ul><ul><li><Table  Border=“1”...
Varias filas <ul><li><Table Border=“1”> </li></ul><ul><li><TR> </li></ul><ul><li><TD><Img Src=“eye.jpg”></TD> </li></ul><u...
Reorganizar con RowSpan <ul><li><Table Border=&quot;1&quot;> </li></ul><ul><li><TR> </li></ul><ul><li><TD  RowSpan=2 ><Img...
Reorganizar con ColSpan <ul><li><Table Border=&quot;1&quot;> </li></ul><ul><li><TR> </li></ul><ul><li><TD  ColSpan=2 ><Img...
Centrar <ul><li><Table Border=&quot;1&quot;> </li></ul><ul><li><TR> </li></ul><ul><li><TD  Align=Center VAlign=Middle  Col...
Combinaciones de tablas
Combinaciones de tablas
Combinaciones de tablas
Upcoming SlideShare
Loading in …5
×

Clase03

597 views

Published on

Revisión rápida de la sintáxis y principales marcas o "tags" de HTML. Manejo de textos, centrado y otras formas de alineación, inserción de imagenes, líneas horizontales, manejo y utilización de tablas, ejercicios de construcción de tablas utilizando colspan y rowspan

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

Clase03

  1. 1. Programas en HTML Leonel Morales Díaz Ingeniería Simple [email_address] Disponible en: http://www.ingenieriasimple.com/introprogra Copyright 2008 by Leonel Morales Díaz – Ingeniería Simple. Derechos reservados
  2. 2. Primer ejemplo <ul><li><HTML> </li></ul><ul><li><Head> </li></ul><ul><li><Title>La Inseguridad Informática</Title> </li></ul><ul><li></Head> </li></ul><ul><li><Body> </li></ul><ul><li><H1>Inseguridad informática: un concepto dual en seguridad informática</H1> </li></ul><ul><li><p>Jeimy J. Cano, Ph.D</p> </li></ul><ul><li><p>Profesor de Cátedra</p> </li></ul><ul><li><p>Departamento de Sistemas y Computación</p> </li></ul><ul><li></Body> </li></ul><ul><li></HTML> </li></ul>ej001.html
  3. 3. Observar <ul><li>Centrado o alineación </li></ul><ul><li>Salto de línea </li></ul><ul><li>Espacio entre líneas </li></ul><ul><li>Posición del título </li></ul><ul><li>¿Alguna mejora? </li></ul>
  4. 4. Segundo ejemplo <ul><li><HTML> </li></ul><ul><li><Head> </li></ul><ul><li><Title>La Inseguridad Informática</Title> </li></ul><ul><li></Head> </li></ul><ul><li><Body> </li></ul><ul><li><H1>Inseguridad informática: un concepto dual en seguridad informática</H1> </li></ul><ul><li><p>Jeimy J. Cano, Ph.D<BR>Profesor de Cátedra<BR>Departamento de Sistemas y Computación</p> </li></ul><ul><li></Body> </li></ul><ul><li></HTML> </li></ul>ej002.html
  5. 5. Un poco de texto <ul><li><Body> </li></ul><ul><li><H1>Inseguridad informática: un concepto dual en seguridad informática</H1> </li></ul><ul><li><p>Jeimy J. Cano, Ph.D<BR>Profesor de Cátedra<BR>Departamento de Sistemas y Computación</p> </li></ul><ul><li><H2>Resumen</H2> </li></ul><ul><li><p>Este documento desarrolla una breve reflexión donde sugiere al lector repensar la seguridad informática como un continuo entre técnicas de hacking y análisis de riesgos, que permita a las organizaciones aprender de sus fallas de seguridad y fortalecer sus esquemas de seguridad, no para contar con mayores niveles de seguridad, sino para evidenciar el nivel de dificultad que deben asumir los intrusos para ingresar a los sistemas.</p> </li></ul><ul><li></Body> </li></ul>ej003.html
  6. 6. Centrar <ul><li><Body> </li></ul><ul><li><H1 Align=Center >Inseguridad informática: un concepto dual en seguridad informática</H1> </li></ul><ul><li><p>Jeimy J. Cano, Ph.D<BR>Profesor de Cátedra<BR>Departamento de Sistemas y Computación</p> </li></ul><ul><li><H2 Align=Center >Resumen</H2> </li></ul><ul><li><p>Este documento desarrolla una breve reflexión donde sugiere al lector repensar la seguridad informática como un continuo entre técnicas de hacking y análisis de riesgos, que permita a las organizaciones aprender de sus fallas de seguridad y fortalecer sus esquemas de seguridad, no para contar con mayores niveles de seguridad, sino para evidenciar el nivel de dificultad que deben asumir los intrusos para ingresar a los sistemas.</p> </li></ul><ul><li></Body> </li></ul>ej004.html
  7. 7. Otra forma de centrar <ul><li><Body> </li></ul><ul><li><Center> </li></ul><ul><li><H1>Inseguridad informática: un concepto dual en seguridad informática</H1> </li></ul><ul><li><p>Jeimy J. Cano, Ph.D<BR>Profesor de Cátedra<BR>Departamento de Sistemas y Computación</p> </li></ul><ul><li><H2>Resumen</H2> </li></ul><ul><li></Center> </li></ul><ul><li><p>Este documento desarrolla una breve reflexión donde sugiere al lector repensar la seguridad informática como un continuo entre técnicas de hacking y análisis de riesgos, que permita a las organizaciones aprender de sus fallas de seguridad y fortalecer sus esquemas de seguridad, no para contar con mayores niveles de seguridad, sino para evidenciar el nivel de dificultad que deben asumir los intrusos para ingresar a los sistemas.</p> </li></ul><ul><li></Body> </li></ul>ej005.html
  8. 8. Y otra más <ul><li><Body> </li></ul><ul><li><Div Align=“Center”> </li></ul><ul><li><H1>Inseguridad informática: un concepto dual en seguridad informática</H1> </li></ul><ul><li><p>Jeimy J. Cano, Ph.D<BR>Profesor de Cátedra<BR>Departamento de Sistemas y Computación</p> </li></ul><ul><li><H2>Resumen</H2> </li></ul><ul><li></Div> </li></ul><ul><li><p>Este documento desarrolla una breve reflexión donde sugiere al lector repensar la seguridad informática como un continuo entre técnicas de hacking y análisis de riesgos, que permita a las organizaciones aprender de sus fallas de seguridad y fortalecer sus esquemas de seguridad, no para contar con mayores niveles de seguridad, sino para evidenciar el nivel de dificultad que deben asumir los intrusos para ingresar a los sistemas.</p> </li></ul><ul><li></Body> </li></ul>ej006.html
  9. 9. Imágenes <ul><li><HTML> </li></ul><ul><li><Body> </li></ul><ul><li><H1 Align=Center>Presentando... Una imagen:</H1> </li></ul><ul><li><Img Src=“dotmatprint.jpg”> </li></ul><ul><li><p Align=Center>Gracias</p> </li></ul><ul><li></Body> </li></ul><ul><li></HTML> </li></ul>ej007.html
  10. 10. Centrar la imagen <ul><li><HTML> </li></ul><ul><li><Body> </li></ul><ul><li><H1 Align=Center>Presentando... Una imagen:</H1> </li></ul><ul><li><Center> </li></ul><ul><li><Img Src=“dotmatprint.jpg”> </li></ul><ul><li></Center> </li></ul><ul><li><p Align=Center>Gracias</p> </li></ul><ul><li></Body> </li></ul><ul><li></HTML> </li></ul>ej008.html
  11. 11. Si la imagen no existe <ul><li><HTML> </li></ul><ul><li><Body> </li></ul><ul><li><H1 Align=Center>Presentando... Una imagen:</H1> </li></ul><ul><li><Center> </li></ul><ul><li><Img Src=“dotmatprint08.jpg”> </li></ul><ul><li></Center> </li></ul><ul><li><p Align=Center>Gracias</p> </li></ul><ul><li></Body> </li></ul><ul><li></HTML> </li></ul>ej009.html
  12. 12. Utilizar Alt <ul><li><HTML> </li></ul><ul><li><Body> </li></ul><ul><li><H1 Align=Center>Presentando... Una imagen:</H1> </li></ul><ul><li><Center> </li></ul><ul><li><Img Src=“dotmatprint08.jpg” Alt=“Aquí va una impresora”> </li></ul><ul><li></Center> </li></ul><ul><li><p Align=Center>Gracias</p> </li></ul><ul><li></Body> </li></ul><ul><li></HTML> </li></ul>ej010.html
  13. 13. Líneas horizontales <ul><li><HTML> </li></ul><ul><li><Body> </li></ul><ul><li><Center> </li></ul><ul><li><H1>Presentando... Una imagen:</H1> </li></ul><ul><li><HR Width=“50%”> </li></ul><ul><li><Img Src=“dotmatprint.jpg” Alt=“Aquí va una impresora”> </li></ul><ul><li><HR Width=“90%”> </li></ul><ul><li><p>Gracias</p> </li></ul><ul><li></Center> </li></ul><ul><li></Body> </li></ul><ul><li></HTML> </li></ul>ej011.html
  14. 14. Reducir las imágenes <ul><li><HTML><Body><Center> </li></ul><ul><li><H1>Presentando... Una imagen:</H1> </li></ul><ul><li><HR Width=“50%”> </li></ul><ul><li><Img Src=“dotmatprint.jpg” Alt=“Aquí va una impresora” Width=“100” Height=“50” > </li></ul><ul><li><HR Width=“90%”> </li></ul><ul><li><p>Gracias</p> </li></ul><ul><li></Center></Body></HTML> </li></ul>ej012.html
  15. 15. Imágenes <ul><li>Se pueden usar </li></ul><ul><ul><li>jpg (jpeg), gif, bmp, ico, tiff, rle, wmf, etc. </li></ul></ul><ul><ul><li>Solo algunos serán reconocidos </li></ul></ul><ul><ul><ul><li>jpg, gif </li></ul></ul></ul><ul><li>Trabajarlos con programas adecuados </li></ul><ul><ul><li>Paint, Photo Editor, Photo Shop </li></ul></ul><ul><li>Recortarles los espacios inservibles </li></ul>
  16. 16. Tablas <ul><li><HTML><Body> </li></ul><ul><li><H4>Una tabla de imágenes</H4> </li></ul><ul><li><Table> </li></ul><ul><li><TR> </li></ul><ul><li><TD><Img Src=“eye.jpg”></TD> </li></ul><ul><li><TD><Img Src=“iridology.jpg”></TD> </li></ul><ul><li><TD><Img Src=“main_im_acp_1.jpg”></TD> </li></ul><ul><li><TD><Img Src=“onevisioneye.jpg”></TD> </li></ul><ul><li><TD><Img Src=“eye_01.jpg”></TD> </li></ul><ul><li></TR> </li></ul><ul><li></Table> </li></ul><ul><li></Body></HTML> </li></ul>ej013.html
  17. 17. Bordes de tabla <ul><li><HTML><Body> </li></ul><ul><li><H4>Una tabla de imágenes</H4> </li></ul><ul><li><Table Border=“1” > </li></ul><ul><li><TR> </li></ul><ul><li><TD><Img Src=“eye.jpg”></TD> </li></ul><ul><li><TD><Img Src=“iridology.jpg”></TD> </li></ul><ul><li><TD><Img Src=“main_im_acp_1.jpg”></TD> </li></ul><ul><li><TD><Img Src=“onevisioneye.jpg”></TD> </li></ul><ul><li><TD><Img Src=“eye_01.jpg”></TD> </li></ul><ul><li></TR> </li></ul><ul><li></Table> </li></ul><ul><li></Body></HTML> </li></ul>ej014.html
  18. 18. Varias filas <ul><li><Table Border=“1”> </li></ul><ul><li><TR> </li></ul><ul><li><TD><Img Src=“eye.jpg”></TD> </li></ul><ul><li><TD><Img Src=“iridology.jpg”></TD> </li></ul><ul><li></TR><TR> </li></ul><ul><li><TD><Img Src=“main_im_acp_1.jpg”></TD> </li></ul><ul><li><TD><Img Src=“onevisioneye.jpg”></TD> </li></ul><ul><li></TR><TR> </li></ul><ul><li><TD><Img Src=“eye_01.jpg”></TD> </li></ul><ul><li></TR> </li></ul><ul><li></Table> </li></ul>ej015.html
  19. 19. Reorganizar con RowSpan <ul><li><Table Border=&quot;1&quot;> </li></ul><ul><li><TR> </li></ul><ul><li><TD RowSpan=2 ><Img Src=&quot;eye_01.jpg&quot;></TD> </li></ul><ul><li><TD><Img Src=&quot;iridology.jpg&quot;></TD> </li></ul><ul><li></TR><TR> </li></ul><ul><li><TD><Img Src=&quot;onevisioneye.jpg&quot;></TD> </li></ul><ul><li></TR><TR> </li></ul><ul><li><TD><Img Src=&quot;main_im_acp_1.jpg&quot;></TD> </li></ul><ul><li><TD><Img Src=&quot;eye.jpg&quot;></TD> </li></ul><ul><li></TR><TR>…</TR> </li></ul><ul><li></Table> </li></ul>ej016.html
  20. 20. Reorganizar con ColSpan <ul><li><Table Border=&quot;1&quot;> </li></ul><ul><li><TR> </li></ul><ul><li><TD ColSpan=2 ><Img Src=&quot;eye_01.jpg&quot;></TD> </li></ul><ul><li><TD><Img Src=&quot;eye.jpg&quot;></TD> </li></ul><ul><li></TR><TR> </li></ul><ul><li><TD><Img Src=&quot;iridology.jpg&quot;></TD> </li></ul><ul><li><TD><Img Src=&quot;onevisioneye.jpg&quot;></TD> </li></ul><ul><li><TD><Img Src=&quot;main_im_acp_1.jpg&quot;></TD> </li></ul><ul><li></TR><TR>…</TR> </li></ul><ul><li></Table> </li></ul>ej017.html
  21. 21. Centrar <ul><li><Table Border=&quot;1&quot;> </li></ul><ul><li><TR> </li></ul><ul><li><TD Align=Center VAlign=Middle ColSpan=2><Img Src=&quot;eye_01.jpg&quot;></TD> </li></ul><ul><li><TD Align=Center VAlign=Middle ><Img Src=&quot;eye.jpg&quot;></TD> </li></ul><ul><li></TR><TR> </li></ul><ul><li><TD Align=Center VAlign=Middle ><Img Src=&quot;iridology.jpg&quot;></TD> </li></ul><ul><li><TD Align=Center VAlign=Middle ><Img Src=&quot;onevisioneye.jpg&quot;></TD> </li></ul><ul><li><TD Align=Center VAlign=Middle ><Img Src=&quot;main_im_acp_1.jpg&quot;></TD> </li></ul><ul><li></TR><TR> </li></ul><ul><li><TR> </li></ul><ul><li></Table> </li></ul>ej018.html
  22. 22. Combinaciones de tablas
  23. 23. Combinaciones de tablas
  24. 24. Combinaciones de tablas

×