Taller            (HTML)         Rafael Castillo Guerrero
Lenguaje de Etiquetado de Hipertexto (HTML)                        g      eHTML:(HyperText Markup Language). Es un lenguaj...
Lenguaje de Etiquetado de Hipertexto (HTML)                            g      eProgramas     Dreamweaver            Archiv...
Lenguaje de Etiquetado de Hipertexto (HTML)                              g      eEstructura básica<html>    <head>        ...
Lenguaje de Etiquetado de Hipertexto (HTML)                               g      eEstructura básica   <body>      <h1>prim...
Lenguaje de Etiquetado de Hipertexto (HTML)                                   g      eConceptos fundamentales:Las etiqueta...
Lenguaje de Etiquetado de Hipertexto (HTML)                               g      eConceptos fundamentales:Las etiquetas qu...
Lenguaje de Etiquetado de Hipertexto (HTML)                               g      eEstructura básica   <body>      <h1>prim...
Lenguaje de Etiquetado de Hipertexto (HTML)                      g      eCaracteres especialesá => &aacute;é => &eacute;í ...
Lenguaje de Etiquetado de Hipertexto (HTML)                           g      eCaracteres especiales<meta http-equiv=”Conte...
e                Lenguaje de Etiquetado de Hipertexto (HTML)                             g      e       nt    rta  poIm   ...
e                      Lenguaje de Etiquetado de Hipertexto (HTML)       nt    rta  poIm             1. HTML, No es un len...
Lenguaje de Etiquetado de Hipertexto (HTML)                                g      eEtiquetas, Enlaces• Enlace a una página...
Lenguaje de Etiquetado de Hipertexto (HTML)                         g      eEtiquetas, Listados• Con números:<ol>  <li>cha...
Lenguaje de Etiquetado de Hipertexto (HTML)                         g      eEtiquetas, Listados• Con Viñetas:<ul>  <li>cab...
Lenguaje de Etiquetado de Hipertexto (HTML)                       g      eEtiquetas, Tablas<table>  <tr>     <td>hola much...
Lenguaje de Etiquetado de Hipertexto (HTML)                       g      eEtiquetas, Tablas<table>  <tr>     <td>hola much...
Lenguaje de Etiquetado de Hipertexto (HTML)                         g      eEtiquetas, Tablas<table border=”2”>   <tr>    ...
Lenguaje de Etiquetado de Hipertexto (HTML)                         g      eEtiquetas, Tablas<table border=”2” cellspacing...
Lenguaje de Etiquetado de Hipertexto (HTML)                          g      e  Etiquetas, Tablas<table border=”2” cellspac...
Lenguaje de Etiquetado de Hipertexto (HTML)                           g      e  Etiquetas, Tablas<table border=”2” cellspa...
Lenguaje de Etiquetado de Hipertexto (HTML)                          g      e  Etiquetas, Tablas<table width=”80%”>   <tr>...
Lenguaje de Etiquetado de Hipertexto (HTML)                          g      eBibliografía   http://www.estandaresweb.es/  ...
Lenguaje de Etiquetado de Hipertexto (HTML)                         g      eBibliografía   http://www.manual-html.com/   h...
Upcoming SlideShare
Loading in...5
×

Taller de Html

1,390

Published on

Breve introducción al uso de etiquetas HTML

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
1,390
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
37
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×