Clase03

572 views
559 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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
572
On SlideShare
0
From Embeds
0
Number of Embeds
76
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×