Curso de html

628 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
628
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
45
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Curso de html

  1. 1. Introducción HTML Miguel Peinado Agosto 2008 1
  2. 2. CURSO HTMLTerminología Básica - HTTP: “hyper text transport protocol” Es un protocolo para transmitir hipertexto. - Internet: Conjunto de redes interconectadas. Tiene un alcance mayor a 105 km. - Browser: Programa necesario para navegar en Internet. Agosto 2008 2
  3. 3. CURSO HTMLQue es una página Web? Una página Web es un tipo de fichero de texto, con unaextensión .htm o html (hypertext markup language – lenguajede Hipertexto), Agosto 2008 3
  4. 4. CURSO HTML Agosto 2008 4
  5. 5. CURSO HTMLQue 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). Agosto 2008 5
  6. 6. CURSO HTMLQue 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 “</ >” Agosto 2008 6
  7. 7. CURSO HTMLInicio: -Abrir Block de notas (o algún editor de texto) Agosto 2008 7
  8. 8. CURSO HTMLCódigo Básico de una página:<html><head><title></title></head><body></body></html> Agosto 2008 8
  9. 9. CURSO HTMLIngresando titulo de la página (en el Browser:<html><head><title> Mi Primera Página </title></head><body></body></html> Agosto 2008 9
  10. 10. CURSO HTMLIngresando texto en la página:<html><head><title> Mi Primera Página </title></head><body> Aquí escribo lo que deseo... Hola Mundo!!!!!</body></html> Agosto 2008 10
  11. 11. CURSO HTMLCentrando texto en la página:<html><head><title> Mi Primera Página </title></head><body> <center> HOLA MUNDO!!!!! </center></body></html> Agosto 2008 11
  12. 12. CURSO HTMLMostrar texto en negrita:<html><head><title> Mi Primera Página </title></head><body> <center> <strong> HOLA MUNDO!!!!! </strong> </center></body></html> Agosto 2008 12
  13. 13. CURSO HTMLCambiando 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 Agosto 2008 13
  14. 14. 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 -). Agosto 2008 14
  15. 15. CURSO HTMLIngresando 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> Agosto 2008 15
  16. 16. CURSO HTMLCreando 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> Agosto 2008 16
  17. 17. CURSO HTMLModificar 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> Agosto 2008 17
  18. 18. CURSO HTMLSalto de Línea:<body bgcolor="#CCCCCC“>Estoy muy entretenido <br>Es realmente bueno el curso <br>jajjajajajaj</body> Agosto 2008 18
  19. 19. CURSO HTMLGuardar como pagina1.html: Agosto 2008 19
  20. 20. CURSO HTML• Ir a carpeta donde guardamos el archivo y hacer doble click en él: Julio 2006 20
  21. 21. CONSULTAS HASTA AQUÍ….FIN PRIMERA PARTE. Agosto 2006 21
  22. 22. CURSO HTMLRevisando algunas etiquetas?Etiqueta <hr>La etiqueta <hr> dibuja de manera predeterminada una reglahorizontal alineadaautomáticamente, con una apariencia de tercera dimensión.Esta etiqueta especial, por que nonecesita de cierre, tiene los siguientes atributos:• Align establece que la regla se alinee a la izquierda, centro o derechaLEFT,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) Agosto 2008 22
  23. 23. CURSO HTMLUn 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&deg;c hacebastante fr&iacute;o.<br><hr align=left width=25% size=5><br>Este es un ejemplo de p&aacute;gina WEB :)<br></body></html> Agosto 2008 23
  24. 24. CURSO HTMLEncabezadosLas etiquetas <h1> </h1> al <h6> </h6> (acrónimos de“heading 1..6”) son encabezados delcuerpo del texto. El encabezamiento <h1> nos proporciona lasletras de mayor tamaño. Notaráque si usamos una etiqueta de encabezamiento, automáticamentese incluirá un retorno de carroal final del mismo. La etiqueta tiene el siguiente atributo:• Align Permite ubicar el encabezamiento a la izquierda, centro o derecha de lapantalla (LEFT, CENTER,RIGHT) Agosto 2008 24
  25. 25. CURSO HTMLUn 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&deg;c hacebastante fr&iacute;o.<br><hr align=left width=25% size=5><br>Este es un ejemplo de p&aacute;gina WEB :)<br></body></html> Agosto 2008 25
  26. 26. CURSO HTMLUbicación, formato y atributos de textoEtiqueta <center> </center>Se utiliza para centrar el texto/imagen o datos que seencuentren entre la apertura y el cierre.Etiqueta <b> </b>Esta es la etiqueta que nos posibilita un texto connegrillas.Etiqueta <u> </u>Etiqueta que posibilita resaltar un texto con subrayado.Etiqueta <i> </i>Etiqueta que permite resaltar el texto con inclinaciónitálica. Agosto 2008 26
  27. 27. CURSO HTMLUn 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&oacute;n it&aacute;lica</i><br> Este <b>texto <i>cuenta <u>con un </u>combinado</i> de</b> todo.<br> </body> </html> Agosto 2008 27
  28. 28. CURSO HTMLEtiqueta <font> </font>Esta etiqueta proporciona al autor un medio depersonalizar el texto con respecto al tipo defuente, 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. Agosto 2008 28
  29. 29. CURSO HTMLUn 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&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="red"><font size=7>B</font>o</font><font color="yellow"> li</font><font color="green">via</font><br> </body> Agosto 2008 29 </html>
  30. 30. CURSO HTMLEtiqueta <img>Se trata de otra etiqueta especial, pues no necesita de etiquetade cierre. Esta etiqueta instruye alnavegador para que exhiba la imagen especificada. El formatobásico para incluir un gráfico es:<img src=”imagen.ext”> Agosto 2008 30
  31. 31. CURSO HTMLUn 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&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="#000080">HTML</font></i></b>.<br><br> <center><img src="foto.jpg" border="1" alt="Foto de Miguel"></center> <br> </body> Agosto 2008 31 </html>
  32. 32. CURSO HTMLGeneración de Tablas:<body bgcolor="#CCCCCC“><TABLE BORDER="1"> <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> Agosto 2008 32
  33. 33. CURSO HTMLGeneració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> Agosto 2008 33
  34. 34. CURSO HTMLGeneració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> Agosto 2008 34
  35. 35. CURSO HTMLGeneració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> Agosto 2008 35
  36. 36. CURSO HTMLGeneració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> Agosto 2008 36
  37. 37. CURSO HTMLGeneració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 Agosto 2008 37
  38. 38. CURSO HTMLGeneración de Listas:Lista no ordenada<UL TYPE=“bullet”> <LI>Perros <LI>Gatos <LI>Peces <LI>Hamsters</UL> Agosto 2008 38
  39. 39. CURSO HTMLGeneración de Listas:Lista ordenada<OL TYPE=“A”> <LI>Perros <LI>Gatos <LI>Peces <LI>Hamsters</OL> Agosto 2008 39
  40. 40. CURSO HTMLGeneració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> Agosto 2008 40
  41. 41. CURSO HTMLGeneració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> Agosto 2008 41
  42. 42. FIN… (Primera parte) Agosto 2008 42

×