Your SlideShare is downloading. ×
  • Like
Curso Html
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply
Published

 

Published in Education , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,096
On SlideShare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
353
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Agosto 2008 Introducción HTML Miguel Peinado
  • 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.
  • 3.
    • Que es una página Web?
    Agosto 2008 Una página Web es un tipo de fichero de texto, con una extensión .htm o html (hypertext markup language – lenguaje de Hipertexto), CURSO HTML
  • 4. Agosto 2008 CURSO HTML
  • 5. Agosto 2008 CURSO HTML Que es el Código HTML?
    • HTML es un lenguaje de etiquetas para crear documentos de hipertexto que sean portables de una plataforma a otra.
    • Es un lenguaje para estructurar documentos a partir de texto en World Wide Web. Este lenguaje se basa en tags (Etiquetas) (instrucciones que le dicen al texto como deben mostrarse) y atributos (parámetros que dan valor al tag).
  • 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=&quot;#CCCCCC&quot;> <div aling=“center”> <font size=&quot;5&quot;>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=&quot;5&quot;>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=&quot;#CCCCCC&quot;> <div align=“center”> <font size=&quot;5&quot;>hola</font> </div> <img src=&quot;dirección_imagen/nombre.gif&quot; width=&quot;100&quot; height=&quot;10&quot; border=&quot;1&quot;> </body>
  • 16. Agosto 2008 CURSO HTML Creando Links: <body bgcolor=&quot;#CCCCCC&quot;> <div aling=“center”> <font size=&quot;5&quot;>hola</font> </div> <img src=&quot;dirección imagen/nombre.gif&quot; width=&quot;100&quot; height=&quot;10&quot; border=&quot;1&quot;> <a href=página2.html> Pagina 2 </a> </body>
  • 17. Agosto 2008 CURSO HTML Modificar colores Links: <body bgcolor=&quot;#CCCCCC“ link=&quot;#00FF33&quot; vlink=&quot;#FFFFFF&quot; alink=&quot;#CC9966&quot;> <div align=“center”> <font size=&quot;5&quot;>hola</font> </div> <img src=&quot;dirección imagen/nombre.gif&quot; width=&quot;100&quot; height=&quot;10&quot; border=&quot;1&quot;> <a href=página2.html> Pagina 2 </a> </body>
  • 18. Agosto 2008 CURSO HTML Salto de Línea: <body bgcolor=&quot;#CCCCCC“> Estoy muy entretenido <br> Es realmente bueno el curso <br> jajjajajajaj </body>
  • 19. Agosto 2008 CURSO HTML Guardar como pagina1.html:
  • 20. Julio 2006 CURSO HTML
    • Ir a carpeta donde guardamos el archivo y hacer doble click en él:
  • 21. Agosto 2006 CONSULTAS HASTA AQUÍ…. FIN PRIMERA PARTE.
  • 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=&quot;#C0D9D9&quot; text=&quot;#000000&quot;> Bienvenidos al curso de HTML<br> <hr align=center width=50%><br> Cuando la temperatura es menor a 15&deg;c hace bastante fr&iacute;o.<br> <hr align=left width=25% size=5><br> Este es un ejemplo de p&aacute;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=&quot;#C0D9D9&quot; text=&quot;#000000&quot;> <h1 align=&quot;center&quot;> Bienvenidos al curso de HTML</h1><br> <hr align=center width=50%><br> <h2>Bienvenidos</h2> Cuando la temperatura es menor a 15&deg;c hace bastante fr&iacute;o.<br> <hr align=left width=25% size=5><br> Este es un ejemplo de p&aacute;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=&quot;#C0D9D9&quot; text=&quot;#000000&quot;> <h1 align=&quot;center&quot;> 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&oacute;n it&aacute;lica</i><br> Este <b>texto <i>cuenta <u>con un </u>combinado</i> de</b> todo.<br> </body> </html>
  • 28. Agosto 2008 CURSO HTML
    • Etiqueta <font> </font>
    • Esta etiqueta proporciona al autor un medio de personalizar el texto con respecto al tipo de
    • fuente, tamaño y color. Atributos:
      • • Color determina el color que se aplica al texto
      • • Size determina el tamaño relativo del texto. Los tamaños válidos son del 1 al 7,
      • siendo el predeterminado el 3 y el más grande el 1.
      • • Face asigna una fuente o tipo de letra.
  • 29. Agosto 2008 CURSO HTML Un ejemplo <html> <head> <title>Curso de HTML</title> </head> <body bgcolor=&quot;#C0D9D9&quot; text=&quot;#000000&quot;> <h1 align=&quot;center&quot;> Bienvenidos al curso de HTML</h1><br> <hr align=center width=50%><br> <h2>Bienvenidos</h2> Cuando la temperatura es menor a 15&deg;c hace bastante fr&iacute;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=&quot;red&quot;><font size=7>B</font>o</font><font color=&quot;yellow&quot;> li</font><font color=&quot;green&quot;>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=&quot;#C0D9D9&quot; text=&quot;#000000&quot; background=&quot;fondo.gif&quot;> <center><h1> Bienvenidos al curso de HTML</h1></center><br> <hr width=50%><br> <h2>Informaci&oacute;n General</h2> Este curso muestra los conceptos b&aacute;sicos del uso de etiquetas e instrucciones en la elaboraci&oacute;n de documentos <b><i><font color=&quot;#000080&quot;>HTML</font></i></b>.<br><br> <center><img src=&quot;foto.jpg&quot; border=&quot;1&quot; alt=&quot;Foto de Miguel&quot;></center> <br> </body> </html>
  • 32. Agosto 2008 CURSO HTML Generación de Tablas: <body bgcolor=&quot;#CCCCCC“> <TABLE BORDER=&quot;1&quot;> <TR>    <TH>Cabereca 1</TH>    <TH>Cabereca 2</TH> </TR> <TR>    <TD>Dato 1</TD>    <TD>Dato 2</TD> </TR> <TR>    <TD>Dato 4</TD>    <TD>Dato 5</TD>   </TR> </TABLE> </body>
  • 33. Agosto 2008 CURSO HTML Generación de Tablas: <body bgcolor=&quot;#CCCCCC“> <table width=&quot;23%&quot; height=&quot;214&quot; border=&quot;1&quot;> <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=&quot;#CCCCCC“> <table width=&quot;23%&quot; height=&quot;214&quot; border=&quot;1&quot;> <tr> <td> <a href=&quot;mailto:hola@hola.com&quot;>ENVIAR MAIL</a> </td> </tr> </table> </body>
  • 35. Agosto 2008 CURSO HTML Generación de Tablas: <TABLE border=&quot;1&quot;> <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=&quot;3&quot;><em>No disponible</em> </TABLE>
  • 36. Agosto 2008 CURSO HTML Generación de Tablas: <TABLE border=&quot;1&quot;> <TR><TD>1 <TD rowspan=&quot;2&quot;>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=&quot;1&quot;> <TR><TD>1 <TD>2 <TD>3 <TR><TD colspan=&quot;2&quot;>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>
  • 42. Agosto 2008 FIN… (Primera parte)