2. Agosto 2008 CURSO HTML Terminología Básica - HTTP: “hyper text transport protocol” Es un protocolo para transmitir hipertexto. - Internet: Conjunto de redes interconectadas. Tiene un alcance mayor a 10 5 km. - Browser: Programa necesario para navegar en Internet.
6. Agosto 2008 CURSO HTML Que son las Etiquetas ? Una etiqueta es un texto que cumple con el siguiente formato: <nombre de la etiqueta> Apertura de una etiqueta siempre entre “< >” texto/gráfico/etiquetas A la cual se aplica la etiqueta </nombre de la etiqueta > Cierra de la etiqueta siempre entre “</ >”
7. Agosto 2008 CURSO HTML Inicio: -Abrir Block de notas (o algún editor de texto)
8. Agosto 2008 CURSO HTML Código Básico de una página: <html> <head> <title></title> </head> <body> </body> </html>
9. Agosto 2008 CURSO HTML Ingresando titulo de la página (en el Browser: <html> <head> <title> Mi Primera Página </title> </head> <body> </body> </html>
10. Agosto 2008 CURSO HTML Ingresando texto en la página: <html> <head> <title> Mi Primera Página </title> </head> <body> Aquí escribo lo que deseo... Hola Mundo!!!!! </body> </html>
11. Agosto 2008 CURSO HTML Centrando texto en la página: <html> <head> <title> Mi Primera Página </title> </head> <body> <center> HOLA MUNDO!!!!! </center> </body> </html>
12. Agosto 2008 CURSO HTML Mostrar texto en negrita: <html> <head> <title> Mi Primera Página </title> </head> <body> <center> <strong> HOLA MUNDO!!!!! </strong> </center> </body> </html>
13. Agosto 2008 CURSO HTML Cambiando color de Background: <html> <head> <title> Mi Primera Página </title> </head> <body bgcolor="#CCCCCC"> <div aling=“center”> <font size="5">hola</font> </div> </body> </html> #000000-> NEGRO #ffffff-> BLANCO
14. Agosto 2008 CURSO HTML Cambiando tamaño de texto y centrando de otra forma: <html> <head> <title> Mi Primera Página </title> </head> <body> <div align=“center”> <font size="5">hola</font> </div> </body> </html> ALIGN: right, left, center, justify. SIZE: desde 1 hasta 7 (con modificaciones de + y -).
15. Agosto 2008 CURSO HTML Ingresando Imágenes: <body bgcolor="#CCCCCC"> <div align=“center”> <font size="5">hola</font> </div> <img src="dirección_imagen/nombre.gif" width="100" height="10" border="1"> </body>
16. Agosto 2008 CURSO HTML Creando Links: <body bgcolor="#CCCCCC"> <div aling=“center”> <font size="5">hola</font> </div> <img src="dirección imagen/nombre.gif" width="100" height="10" border="1"> <a href=página2.html> Pagina 2 </a> </body>
17. Agosto 2008 CURSO HTML Modificar colores Links: <body bgcolor="#CCCCCC“ link="#00FF33" vlink="#FFFFFF" alink="#CC9966"> <div align=“center”> <font size="5">hola</font> </div> <img src="dirección imagen/nombre.gif" width="100" height="10" border="1"> <a href=página2.html> Pagina 2 </a> </body>
18. Agosto 2008 CURSO HTML Salto de Línea: <body bgcolor="#CCCCCC“> Estoy muy entretenido <br> Es realmente bueno el curso <br> jajjajajajaj </body>
22. Agosto 2008 CURSO HTML Revisando algunas etiquetas? Etiqueta <hr> La etiqueta <hr> dibuja de manera predeterminada una regla horizontal alineada automáticamente, con una apariencia de tercera dimensión. Esta etiqueta especial, por que no necesita de cierre, tiene los siguientes atributos: • Align establece que la regla se alinee a la izquierda, centro o derecha LEFT,CENTER o RIGHT • NOSHADE quita el sombreado predeterminado de la regla • WIDTH permite especificar el ancho de la regla (en pixeles o porcentaje) • SIZE permite especificar el alto de la regla (en pixeles)
23. Agosto 2008 CURSO HTML Un ejemplo <html> <head> <title>Curso de HTML</title> </head> <body bgcolor="#C0D9D9" text="#000000"> Bienvenidos al curso de HTML<br> <hr align=center width=50%><br> Cuando la temperatura es menor a 15°c hace bastante frío.<br> <hr align=left width=25% size=5><br> Este es un ejemplo de página WEB :)<br> </body> </html>
24. Agosto 2008 CURSO HTML Encabezados Las etiquetas <h1> </h1> al <h6> </h6> (acrónimos de “heading 1..6”) son encabezados del cuerpo del texto. El encabezamiento <h1> nos proporciona las letras de mayor tamaño. Notará que si usamos una etiqueta de encabezamiento, automáticamente se incluirá un retorno de carro al final del mismo. La etiqueta tiene el siguiente atributo: • Align Permite ubicar el encabezamiento a la izquierda, centro o derecha de la pantalla (LEFT, CENTER,RIGHT)
25. Agosto 2008 CURSO HTML Un ejemplo <html> <head> <title>Curso de HTML</title> </head> <body bgcolor="#C0D9D9" text="#000000"> <h1 align="center"> Bienvenidos al curso de HTML</h1><br> <hr align=center width=50%><br> <h2>Bienvenidos</h2> Cuando la temperatura es menor a 15°c hace bastante frío.<br> <hr align=left width=25% size=5><br> Este es un ejemplo de página WEB :)<br> </body> </html>
26. Agosto 2008 CURSO HTML Ubicación, formato y atributos de texto Etiqueta <center> </center> Se utiliza para centrar el texto/imagen o datos que se encuentren entre la apertura y el cierre. Etiqueta <b> </b> Esta es la etiqueta que nos posibilita un texto con negrillas. Etiqueta <u> </u> Etiqueta que posibilita resaltar un texto con subrayado. Etiqueta <i> </i> Etiqueta que permite resaltar el texto con inclinación itálica.
27. Agosto 2008 CURSO HTML Un ejemplo <html> <head> <title>Curso de HTML</title> </head> <body bgcolor="#C0D9D9" text="#000000"> <h1 align="center"> Bienvenidos al curso de HTML</h1><br> <hr align=center width=50%><br> <h2>Bienvenidos</h2> <hr align=left width=25% size=5><br> <b>Este texto esta con negrillas</b><br> <u>Este texto esta con subrayado</u><br> <i>Este texto esta con inclinación itálica</i><br> Este <b>texto <i>cuenta <u>con un </u>combinado</i> de</b> todo.<br> </body> </html>
28.
29. Agosto 2008 CURSO HTML Un ejemplo <html> <head> <title>Curso de HTML</title> </head> <body bgcolor="#C0D9D9" text="#000000"> <h1 align="center"> Bienvenidos al curso de HTML</h1><br> <hr align=center width=50%><br> <h2>Bienvenidos</h2> Cuando la temperatura es menor a 15°c hace bastante frío.<br> <hr align=left width=25% size=5><br> Este <b>texto <i>cuenta <u>con un </u>combinado</i> de</b> todo.<br> <font color="red"><font size=7>B</font>o</font><font color="yellow"> li</font><font color="green">via</font><br> </body> </html>
30. Agosto 2008 CURSO HTML Etiqueta <img> Se trata de otra etiqueta especial, pues no necesita de etiqueta de cierre. Esta etiqueta instruye al navegador para que exhiba la imagen especificada. El formato básico para incluir un gráfico es: <img src=”imagen.ext”>
31. Agosto 2008 CURSO HTML Un ejemplo <html> <head> <title>Curso de HTML</title> </head> <body bgcolor="#C0D9D9" text="#000000" background="fondo.gif"> <center><h1> Bienvenidos al curso de HTML</h1></center><br> <hr width=50%><br> <h2>Información General</h2> Este curso muestra los conceptos básicos del uso de etiquetas e instrucciones en la elaboración de documentos <b><i><font color="#000080">HTML</font></i></b>.<br><br> <center><img src="foto.jpg" border="1" alt="Foto de Miguel"></center> <br> </body> </html>
33. Agosto 2008 CURSO HTML Generación de Tablas: <body bgcolor="#CCCCCC“> <table width="23%" height="214" border="1"> <tr> <td>PRINCIPAL</td> </tr> <tr> <td>FOTOS</td> </tr> </table> </body>
34. Agosto 2008 CURSO HTML Generación de links a mail: <body bgcolor="#CCCCCC“> <table width="23%" height="214" border="1"> <tr> <td> <a href="mailto:hola@hola.com">ENVIAR MAIL</a> </td> </tr> </table> </body>
35. Agosto 2008 CURSO HTML Generación de Tablas: <TABLE border="1"> <CAPTION>Tazas de café consumidas </CAPTION> <TR><TH>Nombre<TH>Tazas<TH>Tipo de Café<TH>¿Azúcar? <TR><TD> Miguel<TD>10<TD>Espresso<TD>No <TR><TD>Juan <TD>5<TD>Descafeinado<TD>Sí <TR><TD>Carlos<TD colspan="3"><em>No disponible</em> </TABLE>
36. Agosto 2008 CURSO HTML Generación de Tablas: <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>
37. Agosto 2008 CURSO HTML Generación de Tablas: <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
38. Agosto 2008 CURSO HTML Generación de Listas: Lista no ordenada <UL TYPE=“bullet”> <LI>Perros <LI>Gatos <LI>Peces <LI>Hamsters </UL>
39. Agosto 2008 CURSO HTML Generación de Listas: Lista ordenada <OL TYPE=“A”> <LI>Perros <LI>Gatos <LI>Peces <LI>Hamsters </OL>
40. Agosto 2008 CURSO HTML Generación de Listas: Lista de Definicion <DL> <DT><B>Vehiculo</B> <DD> Vehículo de 4 o más ruedas que sirve para desplazar cosas, personas o animales. <DT><B>HTML</B> <DD> Lenguaje de Marcas de Hipertexto </DL>
41. Agosto 2008 CURSO HTML Generación de Listas: Lista de Definicion <DL> <DT><B>Vehiculo</B> <DD> Vehículo de 4 o más ruedas que sirve para desplazar cosas, personas o animales. <DT><B>HTML</B> <DD> Lenguaje de Marcas de Hipertexto </DL>
