Clase03

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Reorganizar con RowSpan <ul><li><Table Border="1"> </li></ul><ul><li><TR> </li></ul><ul><li><TD RowSpan=2 ><Img Src="eye_01.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="onevisioneye.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="eye.jpg"></TD> </li></ul><ul><li></TR><TR>…</TR> </li></ul><ul><li></Table> </li></ul>ej016.html

20. Reorganizar con ColSpan <ul><li><Table Border="1"> </li></ul><ul><li><TR> </li></ul><ul><li><TD ColSpan=2 ><Img Src="eye_01.jpg"></TD> </li></ul><ul><li><TD><Img Src="eye.jpg"></TD> </li></ul><ul><li></TR><TR> </li></ul><ul><li><TD><Img Src="iridology.jpg"></TD> </li></ul><ul><li><TD><Img Src="onevisioneye.jpg"></TD> </li></ul><ul><li><TD><Img Src="main_im_acp_1.jpg"></TD> </li></ul><ul><li></TR><TR>…</TR> </li></ul><ul><li></Table> </li></ul>ej017.html

21. Centrar <ul><li><Table Border="1"> </li></ul><ul><li><TR> </li></ul><ul><li><TD Align=Center VAlign=Middle ColSpan=2><Img Src="eye_01.jpg"></TD> </li></ul><ul><li><TD Align=Center VAlign=Middle ><Img Src="eye.jpg"></TD> </li></ul><ul><li></TR><TR> </li></ul><ul><li><TD Align=Center VAlign=Middle ><Img Src="iridology.jpg"></TD> </li></ul><ul><li><TD Align=Center VAlign=Middle ><Img Src="onevisioneye.jpg"></TD> </li></ul><ul><li><TD Align=Center VAlign=Middle ><Img Src="main_im_acp_1.jpg"></TD> </li></ul><ul><li></TR><TR> </li></ul><ul><li><TR> </li></ul><ul><li></Table> </li></ul>ej018.html

22. Combinaciones de tablas