Primera clase de HTML

5,723 views
7,570 views

Published on

presentación de la primera clase de html para mis alumnos el Instituto Profesional Los Leones de Santiago - Chile

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

  • Be the first to like this

No Downloads
Views
Total views
5,723
On SlideShare
0
From Embeds
0
Number of Embeds
4,154
Actions
Shares
0
Downloads
96
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Primera clase de HTML

  1. 1. Clase 1 de Web Profesor Jorge Llantén B. Diseñador Gráfico Publicitario www.j2.cl /wwwj2cl @jorgellanten jorgellantenb /jorgellanten /jorgellanten jueves, 12 de septiembre de 13
  2. 2. Recomendaciones antes de empezar jueves, 12 de septiembre de 13
  3. 3. Recomendaciones antes de empezar 52.7%4%1.7% 27.9% jueves, 12 de septiembre de 13
  4. 4. Recomendaciones antes de empezar Todos los problemas de un desarrollador web empiezan con I y terminan con E (12.7%) 52.7%4%1.7% 27.9% jueves, 12 de septiembre de 13
  5. 5. Edición de código en Dreamweaver, Edge Code, Brackets, Coda, etc. jueves, 12 de septiembre de 13
  6. 6. Edición de código en Dreamweaver, Edge Code, Brackets, Coda, etc. jueves, 12 de septiembre de 13
  7. 7. Edición de código en Dreamweaver, Edge Code, Brackets, Coda, etc. Los guerreros usan “Block de Notas” o “Textedit” jueves, 12 de septiembre de 13
  8. 8. Que es HTML? jueves, 12 de septiembre de 13
  9. 9. Que es HTML? HyperText Markup Language jueves, 12 de septiembre de 13
  10. 10. Observa este documento HTML Ambos corresponden al mismo “index.html” Editor HTML Navegador http://www.csszengarden.com jueves, 12 de septiembre de 13
  11. 11. Estructura típica HTML <p class=”normal”>Esto es un párrafo</p> jueves, 12 de septiembre de 13
  12. 12. Estructura típica HTML <p class=”normal”>Esto es un párrafo</p> Etiqueta de apertura jueves, 12 de septiembre de 13
  13. 13. Estructura típica HTML <p class=”normal”>Esto es un párrafo</p> Etiqueta de apertura Etiqueta de cierre jueves, 12 de septiembre de 13
  14. 14. Estructura típica HTML <p class=”normal”>Esto es un párrafo</p> Etiqueta de apertura Etiqueta de cierre Nombre atributo jueves, 12 de septiembre de 13
  15. 15. Estructura típica HTML <p class=”normal”>Esto es un párrafo</p> Etiqueta de apertura Etiqueta de cierre Nombre atributo Valor atributo jueves, 12 de septiembre de 13
  16. 16. Estructura típica HTML <p class=”normal”>Esto es un párrafo</p> Etiqueta de apertura Etiqueta de cierre Nombre atributo Valor atributo Contenido jueves, 12 de septiembre de 13
  17. 17. Estructura básica de un HTML jueves, 12 de septiembre de 13
  18. 18. Estructura básica de un HTML <!DOCTYPE html> jueves, 12 de septiembre de 13
  19. 19. Estructura básica de un HTML Especificación del lenguaje y la versión del documento <!DOCTYPE html> jueves, 12 de septiembre de 13
  20. 20. <html> </html> Estructura básica de un HTML Especificación del lenguaje y la versión del documento <!DOCTYPE html> jueves, 12 de septiembre de 13
  21. 21. <html> </html> Estructura básica de un HTML Especificación del lenguaje y la versión del documento <!DOCTYPE html> <html lang=”es”> </html> jueves, 12 de septiembre de 13
  22. 22. <html> </html> Estructura básica de un HTML Especificación del lenguaje y la versión del documento <!DOCTYPE html> Indica el comienzo y el final de un documento HTML. Ninguna etiqueta o documento puede colocarse antes o después de esta etiqueta. <html lang=”es”> </html> jueves, 12 de septiembre de 13
  23. 23. <html> </html> Estructura básica de un HTML Especificación del lenguaje y la versión del documento <!DOCTYPE html> Indica el comienzo y el final de un documento HTML. Ninguna etiqueta o documento puede colocarse antes o después de esta etiqueta. <html lang=”es”> </html> <head> </head> jueves, 12 de septiembre de 13
  24. 24. <html> </html> Estructura básica de un HTML Especificación del lenguaje y la versión del documento <!DOCTYPE html> Indica el comienzo y el final de un documento HTML. Ninguna etiqueta o documento puede colocarse antes o después de esta etiqueta. <html lang=”es”> </html> <head> </head> Contiene información relativa al documento, como el título, hoja de estilo a utilizar y meta información para buscadores. jueves, 12 de septiembre de 13
  25. 25. <html> </html> Estructura básica de un HTML Especificación del lenguaje y la versión del documento <!DOCTYPE html> Indica el comienzo y el final de un documento HTML. Ninguna etiqueta o documento puede colocarse antes o después de esta etiqueta. <html lang=”es”> </html> <head> </head> Contiene información relativa al documento, como el título, hoja de estilo a utilizar y meta información para buscadores. <body> </body> jueves, 12 de septiembre de 13
  26. 26. <html> </html> Estructura básica de un HTML Especificación del lenguaje y la versión del documento <!DOCTYPE html> Indica el comienzo y el final de un documento HTML. Ninguna etiqueta o documento puede colocarse antes o después de esta etiqueta. <html lang=”es”> </html> <head> </head> Contiene información relativa al documento, como el título, hoja de estilo a utilizar y meta información para buscadores. Corresponde al contenido de nuestro sitio y será visible para los visitantes. <body> </body> jueves, 12 de septiembre de 13
  27. 27. Estructura básica de un HTML <!DOCTYPE html> <head> </head> <body> </body> <html lang=”es”> </html> jueves, 12 de septiembre de 13
  28. 28. Estructura básica de un HTML <!DOCTYPE html> <head> </head> <body> </body> <html lang=”es”> </html> jueves, 12 de septiembre de 13
  29. 29. Estructura básica de un HTML <!DOCTYPE html> <head> </head> <body> </body> <html lang=”es”> </html> jueves, 12 de septiembre de 13
  30. 30. Nuestras primeras etiquetas HTML jueves, 12 de septiembre de 13
  31. 31. Nuestras primeras etiquetas HTML <p> Párrafo jueves, 12 de septiembre de 13
  32. 32. Nuestras primeras etiquetas HTML <p> Párrafo <h1> ...hasta...<h6> Encabezados o títulos con 6 grados de importancia jueves, 12 de septiembre de 13
  33. 33. Nuestras primeras etiquetas HTML <p> Párrafo <h1> ...hasta...<h6> Encabezados o títulos con 6 grados de importancia <a> Enlaces o vínculos jueves, 12 de septiembre de 13
  34. 34. Nuestras primeras etiquetas HTML <p> Párrafo <h1> ...hasta...<h6> Encabezados o títulos con 6 grados de importancia <a> Enlaces o vínculos <strong> Énfasis fuerte o marcado para su contenido, se ve en negritas. jueves, 12 de septiembre de 13
  35. 35. Nuestras primeras etiquetas HTML <p> Párrafo <h1> ...hasta...<h6> Encabezados o títulos con 6 grados de importancia <a> Enlaces o vínculos <strong> Énfasis fuerte o marcado para su contenido, se ve en negritas. <em> Énfasis menos fuerte que strong, se ve en cursiva. jueves, 12 de septiembre de 13
  36. 36. Nuestras primeras etiquetas HTML <p> Párrafo <h1> ...hasta...<h6> Encabezados o títulos con 6 grados de importancia <a> Enlaces o vínculos <strong> Énfasis fuerte o marcado para su contenido, se ve en negritas. <em> Énfasis menos fuerte que strong, se ve en cursiva. <ul>, <ol>, <li> Listas ordenadas y desordenadas jueves, 12 de septiembre de 13
  37. 37. Nuestras primeras etiquetas HTML <p> Párrafo <h1> ...hasta...<h6> Encabezados o títulos con 6 grados de importancia <a> Enlaces o vínculos <strong> Énfasis fuerte o marcado para su contenido, se ve en negritas. <em> Énfasis menos fuerte que strong, se ve en cursiva. <ul>, <ol>, <li> Listas ordenadas y desordenadas <img> Imagen jueves, 12 de septiembre de 13
  38. 38. Etiquetas HTML: Enlaces URL absoluta URL relativa jueves, 12 de septiembre de 13
  39. 39. Etiquetas HTML: Enlaces URL absoluta URL relativa Incluyen todas las partes de la URL (protocolo, servidor, ruta) jueves, 12 de septiembre de 13
  40. 40. Etiquetas HTML: Enlaces URL absoluta URL relativa Incluyen todas las partes de la URL (protocolo, servidor, ruta) ej: http://www.ejemplo.cl/ruta1/pagina.html jueves, 12 de septiembre de 13
  41. 41. Etiquetas HTML: Enlaces URL absoluta URL relativa Incluyen todas las partes de la URL (protocolo, servidor, ruta) Prescinden de algunas partes de las URL para hacerlas más breves ej: http://www.ejemplo.cl/ruta1/pagina.html jueves, 12 de septiembre de 13
  42. 42. Etiquetas HTML: Enlaces URL absoluta URL relativa Incluyen todas las partes de la URL (protocolo, servidor, ruta) Prescinden de algunas partes de las URL para hacerlas más breves ej: http://www.ejemplo.cl/ruta1/pagina.html ej: /ruta1/pagina.html jueves, 12 de septiembre de 13
  43. 43. Etiquetas HTML: Enlaces jueves, 12 de septiembre de 13
  44. 44. Etiquetas HTML: Enlaces <a> : Crear enlaces internos o externos jueves, 12 de septiembre de 13
  45. 45. Etiquetas HTML: Enlaces <a> : Crear enlaces internos o externos <a href=”http://www.google.com”>Ir a Google</a> jueves, 12 de septiembre de 13
  46. 46. Etiquetas HTML: Enlaces <a> : Crear enlaces internos o externos <a href=”http://www.google.com”>Ir a Google</a> Ir a Google jueves, 12 de septiembre de 13
  47. 47. Etiquetas HTML: Enlaces <a href=”http://www.j2.cl”>Ir a J2</a> jueves, 12 de septiembre de 13
  48. 48. Etiquetas HTML: Enlaces <a href=”http://www.j2.cl”>Ir a J2</a> <a href="http://www.j2.cl" title="Ir a j2" target="new">Ir a J2</a> jueves, 12 de septiembre de 13
  49. 49. Etiquetas HTML: Enlaces <a href=”http://www.j2.cl”>Ir a J2</a> <a href="http://www.j2.cl" title="Ir a j2" target="new">Ir a J2</a> lugar a donde nos llevará el vínculo jueves, 12 de septiembre de 13
  50. 50. Etiquetas HTML: Enlaces <a href=”http://www.j2.cl”>Ir a J2</a> <a href="http://www.j2.cl" title="Ir a j2" target="new">Ir a J2</a> lugar a donde nos llevará el vínculo título del vínculo jueves, 12 de septiembre de 13
  51. 51. Etiquetas HTML: Enlaces <a href=”http://www.j2.cl”>Ir a J2</a> <a href="http://www.j2.cl" title="Ir a j2" target="new">Ir a J2</a> lugar a donde nos llevará el vínculo título del vínculo en que ventana se abrirá jueves, 12 de septiembre de 13
  52. 52. Etiquetas HTML: Enlaces <a href=”http://www.j2.cl”>Ir a J2</a> <a href="http://www.j2.cl" title="Ir a j2" target="new">Ir a J2</a> lugar a donde nos llevará el vínculo título del vínculo en que ventana se abrirá _self: abre el vínculo en la misma ventana _blank: abre cada vínculo en una ventana nueva new: abre cada vínculo en solo 1 ventana nueva jueves, 12 de septiembre de 13
  53. 53. Etiquetas HTML: Enlaces <a href=”http://www.j2.cl”>Ir a J2</a> jueves, 12 de septiembre de 13
  54. 54. Etiquetas HTML: Enlaces <a href=”http://www.j2.cl”>Ir a J2</a> <a href=”#arriba”>Subir</a> jueves, 12 de septiembre de 13
  55. 55. Etiquetas HTML: Enlaces <a href=”http://www.j2.cl”>Ir a J2</a> <a href=”#arriba”>Subir</a> <a href=”mailto:jorge@j2.cl”>Escríbame</a> jueves, 12 de septiembre de 13
  56. 56. Etiquetas HTML: Enlaces <a href=”http://www.j2.cl”>Ir a J2</a> <a href=”#arriba”>Subir</a> <a href=”mailto:jorge@j2.cl”>Escríbame</a> <a href=”doc/1.pdf”>bajar documento</a> jueves, 12 de septiembre de 13
  57. 57. Etiquetas HTML: Enlaces <a href=”http://www.j2.cl”>Ir a J2</a> <a href=”#arriba”>Subir</a> <a href=”mailto:jorge@j2.cl”>Escríbame</a> <a href=”doc/1.pdf”>bajar documento</a> <a href=”tel:+56995555555”>Llámame</a> jueves, 12 de septiembre de 13
  58. 58. Etiquetas HTML: Enlaces <a href=”http://www.j2.cl”>Ir a J2</a> <a href=”#arriba”>Subir</a> <a href=”mailto:jorge@j2.cl”>Escríbame</a> <a href=”doc/1.pdf”>bajar documento</a> <a href=”tel:+56995555555”>Llámame</a> <a href=”sms:+56995555555”>Mensaje de texto</a> jueves, 12 de septiembre de 13

×