![Introducción a HTML Ing. Fabio García Ramirez( [email_address] ) Seminario de Tecnologìa de Punta – VI Semestre Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco](https://image.slidesharecdn.com/html-090907171553-phpapp01/85/html-1-320.jpg)
![Objetivo ,[object Object],Introducción a HTML](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (20)
Similar a Html
Similar a Html (20)
Último
Último (20)
Html
- 1. Introducción a HTML Ing. Fabio García Ramirez( [email_address] ) Seminario de Tecnologìa de Punta – VI Semestre Tecnología en Sistemas de Información Fundación Universitaria Tecnológico Comfenalco
- 11. Formato de texto(Ejemplo). <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Ejemplo de página con texto con formato</title> </head> <body> <HR WIDTH=20% ALIGN = CENTER SIZE = 5 NOSHADE> <PRE> Los cambios de línea de este texto son los que aparecen en la ventana del navegador. Además, varios blancos seguidos aparecen exactamente igual. </PRE> Introducción a HTML
- 12. Formato de texto(Ejemplo). <P ALIGN = CENTER> Párrafo de texto <BR> marcado con P, centrado <BR> y con cambios de línea generados con BR. <BR> </P> <B> Negrita </B><BR> <I> itálica</I><BR> <BIG> GRANDE </BIG><BR> <SMALL> pequeña</SMALL><BR> <STRONG> Enfásis intenso </STRONG><BR> <SUB> SUBÍNDICE </SUB> <SUP> SUPERINDICE </SUP> <H1> TITULO </H1> <H2> TITULO </H2> <H2> TITULO </H2> <H3> TITULO </H3> Introducción a HTML
- 13. Formato de texto(Ejemplo). <H4> TITULO </H4> <H5> TITULO </H5> <H6> TITULO </H6> <ADDRESS>Cartagena de Indias </ADDRESS> <EM> Texto enfatizado </EM> </body> </html> Introducción a HTML
- 20. Listas(Ejemplos). <html> <head><title>Lista ordenada – listaordenada.htm </title></head> <body> <h1>MODELO EN CASCADA</h1> < ol> <li> Definición del problema. <li> Especificación y análisis de requisitos. <li> Diseño de prototipos. <li> Pruebas. <li> Publicación. <li> Mantenimiento. </ol> </body> </html> Introducción a HTML
- 21. Listas(Ejemplos). <html> <head><title>Lista no ordenada – listanoordenada.htm </title></head> <body> <h3>Documentación requerida para graduarse en el ITC</h3> < ul> <li> Paz y Salvo académico. <li> Paz y Salvo administrativo. <li> Fotocopia de Cédula de ciudadanía. <li> Fotocopia de Libreta militar. <li> Carnet estudiantil. </ul> </body> </html> Introducción a HTML
- 22. Listas(Ejemplos). <html> <head><title>Lista de Definiciones – listadefiniciones.htm </title></head> <body> <h3>Glosario</h3> <dl> <dt>HTML <dd> Hyper Text Markup Language. <dt> WWW <dd> World Wide Web. <dt> URL <dd> Universal Resource Locator. </dl> </body> </html> Introducción a HTML
- 23. Listas(Ejemplos). <html> <head><title>Lista anidada – listaanidada.htm </title></head> <body> <h3>Programas Académicos del ITC</h3> <ul> <li>Tecnología en Sistemas de Información. <ul type=circle> <li> Jornada diurna. <li> Jornada nocturna. </ul> <li> Contaduría Pública <li>Tecnología en Administración Financiera <ul type=square> <li> Jornada diurna. <li> Jornada nocturna. Introducción a HTML
- 24. Listas(Ejemplos). </ul> </ul> </body> </html> Introducción a HTML
- 29. Tablas(Ejemplos). <html> <head><title>Tabla Simple – tablasimple.htm </title></head> <body> <table border width=60% align=center> <caption align=top><h3> Horario de Atención al Público</h3></caption> <tr align=center><th><th>Lunes<th>Martes<th>Miercoles<th>Jueves<th>Viernes</tr> <tr align=center><th>Mañana<td>10:00 – 2:00<td>----<td>10:00-2:00 <td>10:00-5:00<td>10:00-2:00</tr> <tr align=center><th>Tarde<td>5:00-8:00<td>---<td>5:00-8:00<td>---<td>---</tr> </table> </body> </html> Introducción a HTML
- 30. Tablas(Ejemplos). <html> <head><title>Tabla 2 filas y 3 columnas – tabla2x3. htm </title></head> <body> <table border=5 align=center> <tr> <td>1,1</td><td>1,2</td><td>1,3</td> </tr> <tr><td>2,1</td><td>2,2</td><td>2,3</td> </tr> </table> </body> </html> Introducción a HTML
- 31. Tablas(Ejemplos). <html> <head><title>Tabla 3 filas y 3 columnas – tabla3x3. htm </title></head> <body> <table border=1> <tr><td colspan=2>1,1 y 1,2</td><td>1,3</td> </tr> <tr><td rowspan=2>2,1 y 3,1</td><td>2,2</td><td>2,3</td> </tr> <tr><td>3,2</td><td>3,3</td> </tr> </table> </body> </html> Introducción a HTML
- 32. Tablas(Ejemplos). <html> <head><title>Tabla con celdas combinadas – tablacombinada.htm </title></head> <body> <table> <caption>cups of coffee consumed by each senator</caption> <tr> <th>name</th> <th>cups</th> <th>type of coffee</th> <th>sugar?</th> <tr> <td>t. sexton</td> <td>10</td> <td>espresso</td> <td>no</td> Introducción a HTML
- 33. Tablas(Ejemplos). <tr> <td>j. dinnen</td> <td>5</td> <td>decaf</td> <td>yes</td> </table> <p> <table border="1"> <caption>cups of coffee consumed by each senator</caption> <tr><th>name<th>cups<th>type of coffee<th>sugar? <tr><td>t. sexton<td>10<td>espresso<td>no <tr><td>j. dinnen<td>5<td>decaf<td>yes <tr><td>a. soria<td colspan="3"><em>not available</em> </table> Introducción a HTML
- 34. Tablas(Ejemplos). <p> <table border="1"> <tr><td>1 <td rowspan="2">2 <td>3 <tr><td>4 <td>6 <tr><td>7 <td>8 <td>9 </table> <p> <table border="1"> <tr><td>1 <td>2 <td>3 <tr><td colspan="2">4 <td>6 <tr><td>7 <td>8 <td>9 </table> </body> </html> Introducción a HTML
- 35. Tablas(Ejemplos). <html> <head><title>Tabla Agrupada – tablaagrupada.htm </title></head> <body> <table width=100% cellpadding=5 cellspacing=10 rules=groups> <caption>Guía de teléfono. Letra:<b>S</b></caption> <colgroup span=2 align=left width=40%></colgroup> <col align=right width=20%> <thead align=left> <tr><th>Apellidos <th>Nombre <th> Teléfono </thead> <tbody align=left> <tr><td>Sánchez Alipio<td>María <td> 6664506 <tr><td>Sanz Rodríguez<td>Ana <td> 6564328 <tr><td>Serena González <td>Ruben <td> 6235421 Introducción a HTML
- 36. Tablas(Ejemplos). <tr><td>Soriano Pascual <td>Carlos <td>6123548 <tr><td<Soro Sarao <td>Patricia <td>6321456 <tr><td>Soto del Rio <td>Pedro <td>6987452 </tbody> </table> </body> </html> Introducción a HTML
- 40. Hiperenlaces(Ejemplos). <html> <head><title>Hiperenlaces locales – anclaslocales.htm </title></head> <body> <p><h2 align=center><a name=“principio”>INDICE</A></h2> <ul> <li><a href=“#capitulo1”>Capítulo 1</a> <li><a href=“#capitulo2”>Capítulo 2</a> </ul> <p><h3><a name=“capitulo1”>Capítulo 1</a> <h5><a href=“#principio”>Volver al principio del documento</a></h5> <h3><a name=“capitulo2”>Capítulo 2 </a></h3> <h5><a href=“#principio”>Volver al principio del documento</a></h5> </body> </html> Introducción a HTML
- 41. Hiperenlaces(Ejemplos). <html> <head><title>Anclas absolutas a otras páginas - anclasabsolutas.htm </title></head> <body> <p><h2 align=center>INDICE</h2> <ul> <li><a href=“http://www.democompany.com/products/buddy.htm>Link1</a> <li><a href=“http://www.webdesignref.com”>Link 2</a> </ul> </body> </html> Introducción a HTML
- 42. Hiperenlaces(Ejemplos). <html> <head><title>Anclas relativas a otras páginas – anclasrelativas.htm </title></head> <body> <p><h2 align=center>INDICE</h2> <ul> <li><a href=“capitulo1.htm”>Capitulo 1</a> <li><a href=“capitulo2.htm”>Capitulo 2</a> </ul> </body> </html> Introducción a HTML
- 43. Hiperenlaces(Ejemplos). <html> <head><title>Capitulo 1</title></head> <body> <p><h2 align=center>Capitulo 1</h2> <a href=“anclasrelativas.htm”>Volver a la página principal</a> </body> </html> <html> <head><title>Capitulo 2</title></head> <body> <p><h2 align=center>Capitulo 2</h2> <a href=“anclasrelativas.htm”>Volver a la página principal</a> </body> </html> Introducción a HTML
- 48. Imágenes y objetos(Ejemplos). <html> <head><title>mapas sensibles – mapas.htm </title> <body> <map name="navegadores"> <area shape=rect coords="0,0,24,31" href="http://www.netscape.com" alt="netscape"> <area shape=rect coords="26,0,53,31" href="http://www.microsoft.com" alt="microsoft"> <area shape=default nohref alt="nada"> </map> <img src="nav.gif" width=53 height=31 border=0 usemap="#navegadores"> </body></html> Introducción a HTML
- 49. Imágenes y objetos (Ejemplos). <html> <head><title>Imágenes – imagenes.htm </title> </head> <body> <p>La siguiente es un vínculo como imagen: <a href="http://www.netscape.com"><img src="dwnldns.gif" alt="netscape 4.0" width=88 height=31></a> <h3>Alineación del texto y gráficos</h3> <p> <img align=top src="dwnldns.gif" alt="netscape 4.0" width=88 height=31>Este es el texto con ALIGN=TOP <p> <img align=middle src="dwnldns.gif" alt="netscape 4.0" width=88 height=31>Este es el texto con ALIGN=MIDDLE Introducción a HTML
- 50. Imágenes y objetos (Ejemplos). <p> <img align=bottom src="dwnldns.gif" alt="netscape 4.0" width=88 height=31>Este es el texto con ALIGN=BOTTOM <p> <img align=right src="dwnldns.gif" alt="netscape 4.0" width=88 height=31>Este es el texto con ALIGN=RIGHT <p> <img align=left src="dwnldns.gif" alt="netscape 4.0" width=88 height=31>Este es el texto con ALIGN=LEFT <p> <img align=middle src="dwnldns.gif" alt="netscape 4.0" width=88 height=31 hspace=50 vspace=50>Este es el texto con HSPACE=50 VSPACE=50 </body> </html> Introducción a HTML
- 72. Otros tags(Ejemplos). <html> <head><title>Empleo de Fuentes – fuentes.htm </title></head> <body> <font face="Arial">Arial</font><br> <font face="Arial Black">Arial Bold</font><br> <font face="Arial Black"><I>Arial Bold Italic</I></font><br> <font face="Comic Sans MS">Comic Sans MS</font><br> <font face="Courier New">Courier New</font><br> <font face="Georgia">Georgia</font><br> <font face="Impact">Impact</font><br> <font face="Lucida Console">Lucida</font><br> <font face="Marlett">Marlett</font>(Marlett)<br> <font face="Symbol">Symbol</font>(Symbol)<br> <font face="Tahoma">Tahoma</font><br> <font face="Times New Roman">Times New Roman</font><br> Introducción a HTML
- 73. Otros tags(Ejemplos). <font face="Verdana">Verdana</font><br> <font face="wingdings">Wingdings</font>(Windgdings)<br> <font face="desconocida">Esto sale con el tipo de fuente por defecto</font><br> <font face="chicago, Palatino, charter, Helvética, Times">Esto sale en el primer tipo de fuente que este instalada</font><br> <P><font size=1>size=1</font> <font size=2>size=2</font> <font size=3>size=3</font> <font size=4>size=4</font> <font size=5>size=5</font> <font size=6>size=6</font> <font size=7>size=7</font> <P><font size=-4>size=-4</font> <font size=-3>size=-3</font> <font size=-2>size=-2</font> Introducción a HTML
- 74. Otros tags(Ejemplos). <font size=-1>size=-1</font> <font size=+1>size=+1</font> <font size=+2>size=+2</font> <font size=+3>size=+3</font> <font size=+4>size=+4</font> <br><font color="#0000FF">AZUL</font><br> <font color="#A52A2A">MARRON</font><br> <font color="#00FFFF">CYAN</font><br> <font color="#808080">GRAY</font><br> <font color="#008000">GREEN</font><br> <font color="#FF00FF">MAGENTA</font><br> <font color="#000080">NAVY</font><br> <font color="#FFA500">ORANGE</font><br> <font color="aliceblue">ALICEBLUE</font><br> <font color="chocolate">CHOCOLATE</font><br> Introducción a HTML
- 75. Otros tags(Ejemplos). <font color="coral">CORAL</font><br> <font color="darkturquoise">DARKTURQUOISE</font><br> <font color="orange">ORANGE</font><br> <font color="indigo">INDIGO</font><br> <font color="black">T<font color="blue">U<font color="green">T <font color="brown">T<font color="fuchsia">I<font color="cyan">F <font color="navy">R<font color="indigo">U<font color="gold">T <font color="silver">T<font color="skyblue">I</font> </body> </html> Introducción a HTML
- 76. Otros tags(Ejemplos). <html> <head> <title>Empleo de Fuentes – fuentes2. htm </title> <basefont face="Arial, Helvetica" color="blue" size=5> </head> <body> <p align="center">Este texto sale del mismo color en todo el documento. </body> </html> Introducción a HTML
- 77. Otros tags(Ejemplos). <html> <head> <title>Empleo de Colores – fondocolor.htm </title> </head> <body bgcolor="lightblue" text="black" link="navy" alink="yellow" vlink="red"> <h1 align="center">HIPERENLACES</h1> <p> <a href="losmasvendidos.htm">Lista de autores más solicitados</a><br> <a href="listadefiniciones.htm">Lista definiciones</a><br> <a href="textoconformato.htm">Texto con formato</a> </body> </html> Introducción a HTML
- 78. Otros tags(Ejemplos). <html> <head> <title>Empleo de Imagen de fondo – fondoimg.htm </title> </head> <body background="itclogobig.jpg"> </body> </html> Introducción a HTML
- 79. Otros tags(Ejemplos). <html> <head> <title>Empleo de color en las tablas – tablacolor.htm </title> </head> <body> <table align="center" border="1" cellspacing="0" cellpadding=8" bgcolor="green"> <tr> <th bgcolor="lightblue">A</th> <th bgcolor="lightblue">A</th> <th bgcolor="lightblue">A</th> </tr> <tr bgcolor="orange"> <td>B</td> <td>B</td> <td>B</td> Introducción a HTML
- 80. Otros tags(Ejemplos). </tr> <tr> <td bgcolor="red">C</td> <td bgcolor="white">C</td> <td bgcolor="blue">C</td> </tr> <tr> <td>D</td> <td>D</td> <td>D</td> </tr> </table> </body> </html> Introducción a HTML
- 82. Otros tags(Caracteres especiales y reservados). Introducción a HTML ™ ™ (espacio en blanco que no puede ser usado para saltar de línea) ® ® © © ª ª º º ¡ ¡ ¿ ¿ á, Á, é, É, í, Í, ó, Ó, ú , Ú á, Á, é, É,... RESULTADO CODIGO
- 83. Otros tags(Caracteres especiales y reservados). Introducción a HTML “ & quot; & & amp; > & gt; < & lt; RESULTADO CODIGO
- 84. Otros tags(Ejemplos). <html> <head><title>Caracteres especiales y reservados caracteresespeciales.htm </title></head> <body> <center><table BORDER COLS=2 WIDTH="100%" > <caption><b><font face="Arial,Helvetica"><font size=+2>CARACTERES ESPECIALES Y RESERVADOS</font></font></b></caption> <tr> <td> <center><b><font face="Arial,Helvetica"><font size=+1>CODIGO</font></font></b></center> </td> <td> <center><b><font face="Arial,Helvetica"><font size=+1>RESULTADO</font></font></b></center></td></tr> Introducción a HTML
- 85. Otros tags(Ejemplos). <tr> <td>&aacute;, &Aacute;, &eacute;, &Eacute;,...</td> <td>á, Á, é, É, í, Í, ó, Ó, ú, Ú</td> </tr> <tr> <td>&iquest;</td> <td>¿</td> </tr> <tr> <td>&iexcl;</td> <td>¡</td> </tr> Introducción a HTML
- 86. Otros tags(Ejemplos). <tr> <td>&ordm;</td> <td>º</td> </tr> <tr> <td>&ordf;</td> <td>ª</td> </tr> <tr> <td>&copy;</td> <td>©</td> </tr> <tr> <td>&reg;</td> <td>®</td></tr> Introducción a HTML
- 87. Otros tags(Ejemplos). <tr> <td>&nbsp;</td> <td>(espacio en blanco que no puede ser usado para saltar de línea)</td> </tr> <tr> <td>&trade;</td> <td>™ </td> </tr> <tr> <td>&lt;</td> <td><</td> </tr> <tr> <td>&gt;</td> Introducción a HTML
- 88. Otros tags(Ejemplos). <td>></td> </tr> <tr> <td>&amp;</td> <td>&</td> </tr> <tr> <td>&quot;</td> <td>“ </td> </tr> <tr> <td>&#164;</td> <td>¤</td> </tr> Introducción a HTML
- 89. Otros tags(Ejemplos). <tr> <td>&#239;</td> <td>ï</td> </tr> <tr> <td>&#234;</td> <td>ê</td> </tr> <tr> <td>&#235;</td> <td>ë</td> </tr> </table></center> </body> </html> Introducción a HTML