HTML

5,065 views

Published on

Principal tags, frames and tables

Published in: Technology
2 Comments
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
5,065
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
43
Comments
2
Likes
0
Embeds 0
No embeds

No notes for slide

HTML

  1. 1. Laboratorio N° 1 pacd1985
  2. 2. <ul><li>H yper T ext M arkup L anguage </li></ul><ul><li>Es un lenguaje utilizado para describir páginas web. </li></ul><ul><li>No es un lenguaje de programación, es un lenguajes de marcas. </li></ul><ul><li>Busca separar el contenido de la presentación; de esta última se encargarán otros mecanismos. </li></ul>
  3. 3. <ul><li>Con HTML Markup Tags o simplemente Tags. </li></ul><ul><li>Existen distintos tipos de Tags que describen distintos tipos de contenidos. </li></ul><ul><li>Un Tag es una palabra contenida dentro de angle brackets , como <html> . </li></ul><ul><li>Normalmente vienen en pares, como <b> y </b> . </li></ul>
  4. 4. <ul><li><html> Todo va dentro de tags html </li></ul><ul><li><head> </li></ul><ul><li>… Informaci ón sobre el documento </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li>… Contenido del documento </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  5. 5. <ul><li>Identifica al documento como html. </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> Página WEB </title> </li></ul><ul><li>… </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li>… </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  6. 6. <ul><li>Contiene informaci ón del documento, como el título y la metadata. </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=windows-1250&quot;> </li></ul><ul><li><meta name=&quot;generator&quot; content=&quot;PSPad editor, www.pspad.com &quot;> </li></ul><ul><li><title>Página Web</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li>… </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  7. 7. <ul><li>Aqu í va todo el contenido del documento, lo que se verá. </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li>… </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1>Este es un encabezado.</h1> </li></ul><ul><li><p>Este es un p árrafo. </p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  8. 8. <ul><li>Editor simple de texto. Ejemplo: Notepad </li></ul>
  9. 9. <ul><li>Editor asistente. Ejemplo: PSPad </li></ul>
  10. 10. <ul><li>Editor WYSIWYG. Ejemplo: Publisher </li></ul>
  11. 11. <ul><li>Un elemento html es todo lo que est á contenido entre tags html. </li></ul><ul><li>La mayoría tiene atributos. </li></ul><ul><li>Pueden estar anidados; es decir, pueden haber elementos html dentro de otros elementos html. </li></ul><ul><li>Existen elementos html vacíos, como por ejemplo: <br /> </li></ul>
  12. 12. <ul><li>Los atributos dan informaci ón adicional sobre un elemento html. </li></ul><ul><li>Son siempre especificados en el tag inicial. </li></ul><ul><li>Presentan el siguiente formato : </li></ul><ul><li><nom_tag nom_atr1=“val1” nom_atr2=“val2”..> </li></ul><ul><li>… </li></ul><ul><li></nom_tag> </li></ul>
  13. 13. <ul><li><a href=&quot;http://mi.ing.udep.edu.pe/&quot;>Mi ING</a> </li></ul><ul><li><img src='http://www…./img/foto.gif'/> </li></ul><ul><li><table border=0 width=100% >…</table> </li></ul>
  14. 14. <ul><li>Cerrar los tags. La mayoría de los browsers lo podrían pasar, pero en futuras versiones no se permitirá. </li></ul><ul><li>Cerrar bien los tags vacíos. En el caso del tag </li></ul><ul><li><br /> tambi én se admite poner <br> , pero en futuras versiones no se admitirá. </li></ul><ul><li>Los tags ponerlos en min úsculas. Las futuras versiones de HTML lo demandarán. </li></ul>
  15. 15. <ul><li>Se recomienda usarlos solo para encabezados de p ágina y no simplemente para formatear un texto. </li></ul><ul><li>Son usados por los motores de búsqueda para indexar las páginas web. </li></ul><ul><li>h1 define el heading más grande y h6 el más pequeño. </li></ul>
  16. 16. <ul><li>El elemento anchor es utilizado para definir hyperlinks y anclas. Ambos son links y son así: </li></ul><ul><li><a href=&quot;url&quot;>Texto del link</a> </li></ul><ul><li>Atributos importantes son: </li></ul><ul><li>href : Define la dirección url del link. </li></ul><ul><li>target : Define donde será abierto el documento linkeado. Ejemplo: </li></ul><ul><li><a href=&quot;http://mi.ing.udep.edu.pe/&quot; target=&quot;_blank&quot;> </li></ul><ul><li>mi ING </li></ul><ul><li></a> </li></ul>
  17. 17. <ul><li>name : Sirve para identificar anclas en un documento html. Ejemplo: </li></ul><ul><li><a href=&quot;#cap1&quot;>Cap. I</a> </li></ul><ul><li>… </li></ul><ul><li><a name=“cap1&quot;>Cap. I</a> </li></ul><ul><li>El primer anchor linkea al segundo anchor, el cual está en el mismo documento. </li></ul>
  18. 18. <ul><li>Listas sin orden </li></ul><ul><li><ul> <li>item1</li> <li>item2</li> </li></ul><ul><li>... </li></ul><ul><li></ul> </li></ul>
  19. 19. <ul><li>Listas ordenadas </li></ul><ul><li><ol> <li>item1</li> <li>item2</li> </li></ul><ul><li>... </li></ul><ul><li></ol> </li></ul>
  20. 20. <ul><li>Listas de definici ón </li></ul><ul><li><dl> <dt>item1</dt> <dd>este item es un …</dd> <dt>item2</dt> <dd>este item es un …</dd> </li></ul><ul><li></dl> </li></ul>
  21. 21. <ul><li><img src=“http://.../foto.gif/&quot; alt=&quot;Big Boat&quot; /> </li></ul><ul><li>src : Este atributo define el url de la imagen a cargar. </li></ul><ul><li>alt : Define un texto que se mostrará en caso el browser no pueda cargar la imagen. </li></ul>
  22. 22. <ul><li>GIF </li></ul><ul><li>Es apropiado para logotipos ya que comprime la imagen sin pérdida de información y puede contener zonas transparentes. Este formato soporta un máximo de 256 colores. Es el único soportado por cualquier browser. </li></ul>
  23. 23. <ul><li>JPEG </li></ul><ul><li>Apropiado para imágenes complejas o fotografías. Comprime y destruye parte de la información, aunque esta pérdida no es perceptible por el ojo humano. No puede ser transparente y soporta hasta 16,6 millones de colores. </li></ul>
  24. 24. <ul><li>Utilizando frames se puede mostrar más de un documento html en un misma página. </li></ul><ul><li><frameset cols=&quot;25%,75%&quot;>    <frame src=&quot;frame_a.html&quot;>    <frame src=&quot;frame_b.html&quot;> </li></ul><ul><li></frameset> </li></ul>
  25. 25. <ul><li>No se pueden utilizar <frameset> y < body> a la vez. </li></ul><ul><li><html> </li></ul><ul><li><frameset cols=&quot;25%,50%,25%&quot;> </li></ul><ul><li><frame src=&quot;frame_a.html&quot;> </li></ul><ul><li><frame src=&quot;frame_b.html&quot;> </li></ul><ul><li><frame src=&quot;frame_c.html&quot;> </li></ul><ul><li><noframes> </li></ul><ul><li><body>El browser no soporta el uso de frames.</body> </li></ul><ul><li></noframes> </li></ul><ul><li></frameset> </li></ul><ul><li></html> </li></ul>
  26. 26. <ul><li>Si se quiere utilizar un frame incrustado en un documento html, se debe utilizar el tag iframe. </li></ul><ul><li><iframe src=“index.html&quot;></iframe> </li></ul>
  27. 27. <ul><li><p>Este es un párrafo</p> </li></ul><ul><li>Los comentarios se hacen así: </li></ul><ul><li><!– Este es un comentario--> </li></ul><ul><li>El cambio de línea de logra con el tag: <br /> </li></ul><ul><li>Se puede crear una línea de separación horizontal con el tag: <hr /> </li></ul>
  28. 28. <ul><li><b>,<strong> : Ponen el texto en negritas. </li></ul><ul><li><big> : Agrandan el texto. </li></ul><ul><li><i>,<em> : Ponen el texto en cursiva. </li></ul><ul><li><small> : Achican el texto. </li></ul><ul><li><sub> : Ponen el texto como sub índice. </li></ul><ul><li><sup> : Ponen el texto como superíndice. </li></ul>
  29. 29. <ul><li>Son definidas con el tag <table> y est án divididas en filas (con <tr> ), donde cada una está dividida en celdas (con <td> ). </li></ul><ul><li>Para poner celdas como encabezado, se utiliza <th> en vez de <td> . </li></ul><ul><li>Cada celda puede contener texto, imágenes, listas, párrafos, etc. </li></ul>
  30. 30. <ul><li><table border=&quot;1&quot;> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </li></ul><ul><li></table> </li></ul>

×