Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Taller de Html

1,757 views

Published on

Breve introducción al uso de etiquetas HTML

Published in: Design
  • Be the first to comment

  • Be the first to like this

Taller de Html

  1. 1. Taller (HTML) Rafael Castillo Guerrero
  2. 2. Lenguaje de Etiquetado de Hipertexto (HTML) g eHTML:(HyperText Markup Language). Es un lenguajecomúnmente utilizado para la publicación dehipertexto en la Web y desarrollado con la idea deque cualquier persona o tipo de dispositivo puedaacceder a la información en la Web. HTML utilizaetiquetas que marcan elementos y estructuran eltexto de un documento. http://www.w3c.es/divulgacion/a-z/ <2>
  3. 3. Lenguaje de Etiquetado de Hipertexto (HTML) g eProgramas Dreamweaver Archivo > Guardar > tipo > html GoLive FrontPage Block de Notas Archivo > Guardar Como > tipo > Todos los archivos <3>
  4. 4. Lenguaje de Etiquetado de Hipertexto (HTML) g eEstructura básica<html> <head> <title>primera pagina</title> <meta name=”keywords” content=”html, etiquetas, código fuente, taller”> <meta name=”description” content=”introducción al uso de etiquetas html”> <meta name=”author” content=”Rafael Castillo G.“> <meta name=”robots” content=”all”> </head> continua en la hoja siguiente http://www.maestrosdelweb.com/editorial/usarmetas/ <4>
  5. 5. Lenguaje de Etiquetado de Hipertexto (HTML) g eEstructura básica <body> <h1>primera pagina</h1> <p>aqui va todo un parrafo, aqui va todo un parrafo, aqui va todo un parrafo, aqui va todo un parrafo, aqui va todo un parrafo, aqui va todo un parrafo</p> </body><html> <5>
  6. 6. Lenguaje de Etiquetado de Hipertexto (HTML) g eConceptos fundamentales:Las etiquetas que se encuentran entre el tag<head> </head>, se utilizan para decribir contenido,y aportan con esa descripción para que el sitioweb sea posible de encontrar por parte de losbuscadores<title>primera pagina</title><meta name=”keywords” content=”html, etiquetas, código fuente, taller”><meta name=”description” content=”introducción al uso de etiquetas html”><meta name=”author” content=”Rafael Castillo G.“><meta name=”robots” content=”all”> <6>
  7. 7. Lenguaje de Etiquetado de Hipertexto (HTML) g eConceptos fundamentales:Las etiquetas que se encuentran bajo el tag<body>, constituyen la parte visible de la página,el contenido, y también aportan para que el sitioWeb sea posible de encontrar por parte de losbuscadores<h1>primera pagina</h1><p>aquí va un párrafo</p> <7>
  8. 8. Lenguaje de Etiquetado de Hipertexto (HTML) g eEstructura básica <body> <h1>primera pagina</h1> <p>aqui va todo un parrafo, aqui va todo un parrafo, aqui va todo un parrafo, aqui va todo un parrafo, aqui va todo un parrafo, aqui va todo un parrafo</p> <img src=”hola.jpg” title=”descripción de la imagen”> </body></html> <8>
  9. 9. Lenguaje de Etiquetado de Hipertexto (HTML) g eCaracteres especialesá => &aacute;é => &eacute;í => &iacute;ó => &oacute;ú => &uacute; <9>
  10. 10. Lenguaje de Etiquetado de Hipertexto (HTML) g eCaracteres especiales<meta http-equiv=”Content-Type”content=”text/html; charset=utf-8” />El UTF-8 es un tipo de codificación de caracterespara Unicode que nos permite escribir nuestraspáginas Web y no preocuparnos por si se va a vercorrectamente o van a aparecer caracteres extraños. http://sentidoweb.com/2006/03/30/especial-utf8-i.php <10>
  11. 11. e Lenguaje de Etiquetado de Hipertexto (HTML) g e nt rta poIm Mitos y Leyendas del HTML <11>
  12. 12. e Lenguaje de Etiquetado de Hipertexto (HTML) nt rta poIm 1. HTML, No es un lenguaje de programación 2. HTML, No está estandarizado 3. HTML, No está completo 4. HTML tradicional, No desaparecerá dentro de poco 5. El HTML, No dará paso fácil a XHTML 6. Saber HTML, No es lo único que necesitas para crear excelentes sitios Web <12>
  13. 13. Lenguaje de Etiquetado de Hipertexto (HTML) g eEtiquetas, Enlaces• Enlace a una página dentro del sitio: <a href=”dos.htm”>Otra pagina</a>• Enlace a una página fuera del sitio: <a href=”http://www.infoxicacion.cl”>Infoxicación</a>• Enlace a correo electronico: <a href=”mailto:rcastillo@auradesign.cl”>Contactenos</a>• Enlace en la misma página: <a href=”hola.htm#top”>volver al inicio</a> <a name=”top”></a> <13>
  14. 14. Lenguaje de Etiquetado de Hipertexto (HTML) g eEtiquetas, Listados• Con números:<ol> <li>chao</li> <li>hola</li></ol>• resultado:1. chao2. hola <14>
  15. 15. Lenguaje de Etiquetado de Hipertexto (HTML) g eEtiquetas, Listados• Con Viñetas:<ul> <li>cabro</li> <li>hola</li></ul>• Resultado:• cabro• hola <15>
  16. 16. Lenguaje de Etiquetado de Hipertexto (HTML) g eEtiquetas, Tablas<table> <tr> <td>hola muchachos</td> </tr></table> <16>
  17. 17. Lenguaje de Etiquetado de Hipertexto (HTML) g eEtiquetas, Tablas<table> <tr> <td>hola muchachos</td> <td>Chao muchachos</td> </tr></table> <17>
  18. 18. Lenguaje de Etiquetado de Hipertexto (HTML) g eEtiquetas, Tablas<table border=”2”> <tr> <td>hola muchachos</td> <td>Chao muchachos</td> </tr> <tr> <td>Chicos</td> <td>Grandes</td> </tr></table>* border= grosor del borde de la tabla <18>
  19. 19. Lenguaje de Etiquetado de Hipertexto (HTML) g eEtiquetas, Tablas<table border=”2” cellspacing=”10”> <tr> <td>hola muchachos</td> <td>Chao muchachos</td> </tr> <tr> <td>Chicos</td> <td>Grandes</td> </tr></table>* cellspacing= espacio entre celdas <19>
  20. 20. Lenguaje de Etiquetado de Hipertexto (HTML) g e Etiquetas, Tablas<table border=”2” cellspacing=”10” cellpadding=”15”> <tr> <td>hola muchachos</td> <td>Chao muchachos</td> </tr> <tr> <td>Chicos</td> <td>Grandes</td> </tr></table> * cellpading= margen dentro de la celdas <20>
  21. 21. Lenguaje de Etiquetado de Hipertexto (HTML) g e Etiquetas, Tablas<table border=”2” cellspacing=”5” cellpadding=”5”> <tr> <td colspan=”3”>hola muchachos</td> </tr> <tr> <td>Chicos</td> <td>Grandes</td> <td>medianos</td> </tr></table> * colspan= fusión de columnas <21>
  22. 22. Lenguaje de Etiquetado de Hipertexto (HTML) g e Etiquetas, Tablas<table width=”80%”> <tr> <td rowspan=”2”>Chicos</td> <td>Grandes</td> <td>medianos</td> </tr> <tr> <td>Chicos</td> <td>Grandes</td> </tr></table> * rowspan= fusión de filas <22>
  23. 23. Lenguaje de Etiquetado de Hipertexto (HTML) g eBibliografía http://www.estandaresweb.es/ http://www.w3c.es http://cssbeauty.com http://useme.cl/labs/layouts/ http://www.w3schools.com/css/css_list.asp http://www.unmatchedstyle.com/ http://cssvault.com/ http://www.alzado.org/articulo.php?id_art=193 <23>
  24. 24. Lenguaje de Etiquetado de Hipertexto (HTML) g eBibliografía http://www.manual-html.com/ http://www.tejedoresdelweb.com/w/Portada http://www.anieto2k.com/ http://www.nosolousabilidad.com/ http://www.revistafaz.org/index.html http://iainstitute.org/es/ http://ergonomic.wordpress.com/ <24>

×