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.

Html

351 views

Published on

  • Be the first to comment

  • Be the first to like this

Html

  1. 1. HTMLHTMLMariela Tapia
  2. 2. HTML• HTML (Hyper Text Markup Language)• Originado para compartir textos con científicos (1992 TimBerners-Lee)• Describe semánticamente el texto• Compuesto por una serie de comandos, marcas, o etiquetas,también denominadas “Tags”• Permiten definir la estructura de un documento web yestablecer los atributos del mismo.• En resumen, es un lenguaje que permite crear páginas web ypara ello utiliza unos comandos o etiquetas que indican omarcan qué se debe mostrar y de qué forma.
  3. 3. HTML• El predecesor de HTML fue GML Lenguaje General deMarcado creado por IBM• Posteriormente mejorado por sus creadores dando el lenguajede marcado generalizado estándar, SGML• Tim Berners-Lee y Anders Berglund, crearon una aplicaciónsimplificada del SGML se llamó HTML, lenguaje de marcas dehipertexto, y se convirtió por su simplicidad en el servicio máspopular de la red: el servicio web• HTML ha ido evolucionando desde la transferencia dedocumentos de texto plano, a la presentación de multimedia(imágenes, vídeo, Flash),estilos (CSS) y operatividad (CGI, ASP,JSP, PHP,...) que no estaban presentes en un principio
  4. 4. • HTML fue víctima de la guerra de navegadores• En 1996 se crea el consorcio W3C (www.w3.org)desarrollando especificaciones y software de referencia.• HTML5 está siendo desarrollado por Ian Hickson de GoogleInc. y David Hyatt de Apple junto con todas las personas queparticipan en Web Hypertext Application Technology WorkingGroup.
  5. 5. Versiones
  6. 6. HTML5• HTML5 permite una mayor interacción entre nuestras páginasweb y contenido media (video, audio, entre otros) así comouna mayor facilidad a la hora de codificar un diseño básico.
  7. 7. HTML5• Novedades• Nuevas etiquetas semánticas• Se dieron de baja algunas etiquetas• Soporte nativo de multimedia (no requiere plugins)• Sintaxis más simple• Formularios mejorados
  8. 8. Nuevas etiquetas HTML5• (Algunos no están soportados en todos los navegadores oversiones de navegadores)
  9. 9. Nuevas input• (Algunos no están soportados en todos los navegadores oversiones de navegadores)
  10. 10. Estructura HTML
  11. 11. Estructura de las marcas
  12. 12. Estructura HTML
  13. 13. DOCTYPE• El DOCTYPE debe ser especificado, y va en la parte de arribadel documento HTML. Antes de la etiqueta de inicio <html>.• Es el que indica que tipo de versión se está usando y que sepael navegador cómo presentarlo• NO es casesensitive<!DOCTYPE html> <!doctype html> <!DocType HTML>
  14. 14. DOCTYPE
  15. 15. html• Representa la raiz del documento• Debería tener siempre un atributo de lenguaje. Por ejemplo,“en” para English, "fr" para French, “es” para Español• Busque el idioma apropiado en http://rishida.net/utils/subtags/index.php?list=4&submit=List• <html> ... </html> contiene el elemento head sequido delbody<html lang="es"></html>
  16. 16. head• El elemento head representa una colección de metadados.• <head> ... </head> contiene el título, la información de la hojade estilos y scripts.• El contenido del head NO SE DESPLIEGA EN EL NAVEGADOR• <head> </head>
  17. 17. Encoding• El encoding que va dentro del head permite transformar losbits y bytes descargados de internet a caracterescomprensibles• En versiones anteriores se declaraba así:<meta http-equiv=“Content-Type” content=“text/html” charset=“utf-8”/>• En html5<meta charset=“utf-8”>
  18. 18. body• Representa el contenido principal de la página<body>Aquí está el contenido visible</body>
  19. 19. Ejemplos
  20. 20. Cabeceras<h1>h1 Título 1 </h1><h2>h2 Título 2 </h2><h3>h3 Título 3 </h3><h4>h4 Título 4</h4><h5>h5 Título 5 </h5><h6>h6 Título 6 </h6>
  21. 21. Párrafos<p>Párrafo 1</p><p>Párrafo 2</p><p>Párrafo 1<p>Párrafo 2
  22. 22. Párrafos
  23. 23. Línea<p>Párrafo 1<hr><p>Párrafo 2
  24. 24. Texto<p> Texto en <b>negrita</b><p> Texto en <i>cursiva</i><p> Texto con <u>subrayado</u><p> Texto en <sup>superíndice</sup><p> Texto en <sub>subíndice</sub><p> Texto <s>tachado</s>
  25. 25. Texto• <font>• Size• Color• face
  26. 26. Texto Preformateado• <pre>
  27. 27. Listas con viñetas<ul><li>elemento1<li>elemento2<li>elemento3</ul>
  28. 28. Lista con viñetas
  29. 29. Listas con viñetas
  30. 30. Listas con números<ol><li>elemento1<li>elemento2<li>elemento3</ol>
  31. 31. Listas con Letras
  32. 32. Listas con definiciones<dl><dt>Html</dt><dd> Hyper Text Markup Language<dt>HTTP</dt><dd> Hyper Text Transfer Protocol</dl>
  33. 33. Listas con definiciones
  34. 34. Links• Si el link llama a un archivo que se encuentra en la mismacarpeta• Si el link llama a un archivo que está dentro de una carpeta• Si el link llama a un archivo que está fuera de una carpeta• Si el link llama a una página web de otro web site
  35. 35. Links
  36. 36. Imágenes• El texto alternativo es aquella frase que aparecerá en la webcuando por el motivo que sea el navegador no consiguemostrar la imagen.• Search de Google• hspace (pixels) y vspace (pixels)• Este atributo ha sido desaprobado en HTML 4.01. Por lo tanto, su uso ya no esrecomendado.• Establece la cantidad de espacio en blanco (en píxeles) que será insertado comomárgenes superior e inferior de la imagen.• <img src="img/foto.png" vspace="10" />
  37. 37. tablas• align: especifica la alineación horizontal del contenido de todala tabla, de una fila o de una sola celda. Por ejemplo, left,center o right.• valign: especifica la alineación vertical del contenido de unacelda. Por ejemplo, top, middle o bottom.
  38. 38. Etiquetas y atributos deTablas
  39. 39. • Realizar la siguiente tabla.• Observe que dentro de la tabla hay otras tablas con fondoamarillohttp://www.w3schools.com/tags/att_table_frame.asp
  40. 40. Audio y Video
  41. 41. Tratamiento del Colorhttp://html-color-codes.info/codigos-de-colores-hexadecimales/
  42. 42. • http://site.ebrary.com/lib/unemisp/Doc?id=10156644&ppg=75Copyright © 2007. Ediciones Díaz deSantos. All rights reserved.• http://es.html.net/tutorials/html/• http://www.trazos-web.com/2011/02/01/tips-y-recursos-para-empezar-con-html5/• http://www.w3.org/wiki/HTML/Training• http://html5test.com/• http://www.w3schools.com/• http://www.w3.org/wiki/HTML/Training/Basic_content• http://www.htmlpoint.com/css/css_04.htm• http://es.html.net/tutorials/css/

×