HTML y CSS

1,293 views

Published on

  • Es fantástico, me encanta esta presentación!!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

HTML y CSS

  1. 1. HTML y CSS
  2. 2. Tecnología HTML
  3. 3. Introducción
  4. 4. Introducción al HTML •  Origen del HTML •  ¿Qué es el HTML? •  W3C
  5. 5. Origen del HTML •  Se remota a 1980 •  Propuesto por Tim Berners-Lee como un nuevo sistema de ”hipertexto” para compartir datos. •  En el ámbito de la informática: •  Permitía que los usuarios acceder a la información relacionada con los documentos electrónicos que estas visualizando •  Primitivos sistemas de hipertexto: –  Podría asimilarse a los enlaces de las páginas web actuales
  6. 6. ¿Qué es HTML? •  Siglas: Hyper Text Markup Language •  Definición: Lenguaje de marcas para la creación de hipertextos. •  Se escribe en forma de “etiquetas”, rodeadas por corchetes angulares (<,>) •  Los archivos de formato HTML usan la extensión .htm o .html •  Lenguaje reconocido por la W3C
  7. 7. Especificaicones oficial W3C (World Wide Web Consortium )
  8. 8. Lenguaje HTML •  Se basa en: –  Tags (Etiquetas): Instrucciones que le dicen al texto como deben mostrarse •  <etiqueta></etiqueta> –  Atributos: Parámetros que dan valor al tag •  <etiqueta atributo></etiqueta>
  9. 9. Estructura básica HTML •  <HTML> <HEAD> Definiciones de la cabecera </HEAD> <BODY> Instrucciones HTML </BODY> </HTML>
  10. 10. ESTRUCTURA BÁSICA HTML: <HTML> </HTML>
  11. 11. ESTRUCTURA BÁSICA HTML:
  12. 12. ESTRUCTURA BÁSICA HTML: <HEAD> </HEAD>
  13. 13. <HEAD> </HEAD>
  14. 14. ESTRUCTURA BÁSICA HTML: <BODY> </BODY>
  15. 15. Características básicas
  16. 16. Características básicas •  Etiquetas y atributos •  Elementos HMTL •  Sintaxis
  17. 17. Etiquetas y atributos Etiquetas a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input, ins, isindex, kbd, label, legend, li, link, map, menu, meta, noframes, noscript, object, ol, optgroup, option, p, param, pre, q, s, samp, script, select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, var. Obsoletas y no se pueden utilizar: applet, basefont, center, dir, font, isindex, menu, s, strike, u.
  18. 18. Etiquetas y atributos Atributos 1- Atributos básicos
  19. 19. Etiquetas y atributos Atributos 2- Atributos internacionalización
  20. 20. Etiquetas y atributos Atributos 3- Atributos eventos 4- Atributos para los elementos que pueden obtener el foco:
  21. 21. Elementos HTML
  22. 22. Elementos HTMLDos tipos de elementos Elementos en linea: a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var. Elementos en bloque: address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, nos-cript, ol, p, pre, table, ul.
  23. 23. Elementos HTML
  24. 24. Sintaxis de las etiquetas1- Las etiquetas se tienen que cerrar de acuerdo a como se abren. <p>Lorem ipsum<a>ipsum</a></p> 2- Los nombres de las etiquetas y atributos siempre se escriben en minúsculas 3- El valor de los atributos siempre se encierra con comillas <p>Este es un párrafo con <a href= "http://www.google.com“ >un enlace</a></p> 4- Todas las etiquetas deben cerrarse siempre Imagen : <img src=“” title=“” alt=“” /> <br/>
  25. 25. Etiquetas HTML
  26. 26. ETIQUETAS DE TEXTO
  27. 27. ETIQUETAS DE TEXTO PÁRRAFO <p></p>
  28. 28. ETIQUETAS DE TEXTO PÁRRAFO <p></p>
  29. 29. ETIQUETAS DE TEXTO PÁRRAFO <p></p>
  30. 30. ETIQUETAS DE TEXTO Secciones <h1></h1, <h2></h2>,……,<h6></h6>
  31. 31. ETIQUETAS DE TEXTO Secciones <h1></h1, <h2></h2>,……,<h6></h6>
  32. 32. ETIQUETAS DE TEXTO Secciones <h1></h1, <h2></h2>,……,<h6></h6>
  33. 33. ETIQUETAS DE TEXTO Marcado genérico de texto <span></span>
  34. 34. ENLACESURL: Son esenciales para crear los enlaces, pero también se utilizanen otros elementos HTML como las imágenes y los formulariosEjemplo de URL: http://www.librosweb.es/xhtml/capitulo4.htmlLas partes: Protocolo (http://): el mecanismo que debe utilizar el navegador para acceder a ese recurso Servidor (www.librosweb.es): simplificando mucho su explicación, se trata del dominio en el que se encuentra guardada la página que se quiere acceder Ruta (/xhtml/capitulo4.html): camino que se debe seguir, una vez que se ha llegado al servidor, para localizar el recurso específico que se quiere acceder.
  35. 35. ENLACESTIPO DE ENLACES: Enlaces relativos y absolutosLas URL absolutas: incluyen todas las partes de la URL (protocolo, servidor y ruta). Ejemplo: http://www.ejemplo.com/ruta1/ruta2/pagina2.htmlLas URL relativas: prescinden de algunas partes de las URL para hacerlas más breves. Ejemplo: /ruta1/ruta2/pagina2.html
  36. 36. ENLACES Estructura de directorios y archivos
  37. 37. ENLACES Etiqueta de enlace <a href=“www.google.es“>Esto es google</a>
  38. 38. ENLACESTipos de enlace:1- Enlace al inicio del sitio web2- Enlace a un email3- Enlazar hojas de estilos CSS 4- Enlazar el favicon
  39. 39. LISTASNos permiten agrupar determinadas palabras o frases en un conjuntode elementos que tienen más significado de forma conjunta.Ejemplo: El menú de navegación de un sitio webTipos : Listas no ordenadas (se trata de una colección simple de elementos en laque no importa su orden) Listas ordenadas (similar a la anterior, pero los elementos están numerados ypor tanto, importa su orden)
  40. 40. LISTASListas no ordenadas
  41. 41. LISTASListas no ordenadas
  42. 42. LISTASListas no ordenadas
  43. 43. LISTASListas ordenadas
  44. 44. LISTASListas ordenadas
  45. 45. LISTASListas ordenadas
  46. 46. IMÁGENESSon uno de los elementos más importantes de las páginas webTipos: Imágenes de contenido: son las que proporcionan información y complementan lainformación textual. Incrustada con etiqueta Imágenes de adorno: son las que se utilizan para hacer bordes redondeados, paramostrar pequeños iconos. Incrustadas con CSS.
  47. 47. IMÁGENES
  48. 48. IMÁGENES
  49. 49. ESTRUCTURA Y LAYOUT
  50. 50. ESTRUCTURA
  51. 51. ESTRUCTURALos atributos más utilizados con esta etiqueta son id (para identificar la capa de formaúnica) y class (para aplicar a la capa estilos CSS).
  52. 52. ESTRUCTURALos nombres más comunes, y sus equivalentes en inglés, se muestran a continuación: •  Contenedor (wrapper) suele encerrar la mayor parte de los contenidos de la página y se emplea para definir las características básicas de la página: su anchura, sus bordes, imágenes laterales, si se centra o no respecto de la ventana del navegador, etc. •  Cabecera (header) que incluye todos los elementos invariantes de la parte superior de la página (logotipo, imagen o banner, cuadro de búsqueda superior, etc.) •  Contenido (content) engloba el contenido principal del sitio •  Menu (menu) se emplea para agrupar todos los elementos del menú lateral de navegación de la página •  Pie (footer) que incluye todos los elementos invariantes de la parte inferior de la página (aviso de copyright, política de privacidad, términos de uso, etc.) • Lateral (sidebar) se emplea para agrupar los elementos de las columnas laterales y secundarias de la página.
  53. 53. ESTRUCTURA
  54. 54. Metadatos
  55. 55. MetadatosIncluye la información que no es visualizada por el usuario. Siempre se incluye en lasección de la cabecera, es decir, dentro de la etiqueta <head>
  56. 56. Metadatos Definir el autor del documentoDefinir el copyright del documentoDefinir las palabras clave que definen el contenido del documentoDefinir una breve descripción del sitio:
  57. 57. Otras etiquetas
  58. 58. Otras etiquetas Comentarios Comentarios: <!-- texto del comentario -->
  59. 59. CSS
  60. 60. ¿Qué es CSS?
  61. 61. Soporte CSS
  62. 62. Soporte CSS
  63. 63. Como incluir CSS
  64. 64. Incluir CSS en un documento 1- Incluir CSS en el mismo documento HTML
  65. 65. Incluir CSS en un documento 2- Definir CSS en un archivo externo a) Se crea un archivo de texto y se le añade solamente el siguiente contenido b) Se guarda el archivo de texto con el nombre estilos.css Se debe poner especial atención a que el archivo tenga extensión .css c) En la página HTML se enlaza el archivo CSS externo mediante la etiqueta <link>
  66. 66. Incluir CSS en un documento
  67. 67. Incluir CSS en un documento 3. Incluir CSS en los elementos HTML
  68. 68. Definición
  69. 69. Componente de un estilo CSS básico
  70. 70. Selectores
  71. 71. Selectores CSSLos selectores son imprescindibles para aplicar de forma correcta los estilos CSS en una página,mientras que la declaración indica "qué hay que hacer" , el selector indica "a quién hay quehacérselo".1. Selector universal: se utiliza para seleccionar todos los elementos de la página. * { margin: 0; padding: 0; }2. Selector de etiqueta: selecciona todos los elementos de la página cuya etiqueta HTMLcoincide con el valor del selector. h1 { color: red; }3. Selector descendiente: selecciona los elementos que se encuentran dentro de otroselementos. p span { color: red; }
  72. 72. Selectores CSS4. Selector de clase: selecciona los elementos que tengan una determinada class<body> <p class="destacado“>Lorem ipsum dolor sit amet...</p> <p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a> accumsan...</p><p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p></body> .destacado { color: red }5. Selectores de ID: seleccionar un elemento de la página a través del valor de su atributo id.<p>Primer párrafo</p><p id="destacado">Segundo párrafo</p><p>Tercer párrafo</p> #destacado { color: red; }
  73. 73. Agrupación de reglas
  74. 74. Agrupación de reglas
  75. 75. Unidades de Mediada y Colores Muchas de las propiedades de CSS permiten indicar medidas y colores en sus valores. Además, CSS es tan flexible que permite indicar las medidas y colores de muchas formas diferentes. Las medidas en CSS se emplean, entre otras, para definir la altura, anchura y márgenes de los elementos y para establecer el tamaño de letra del texto. 1. Unidades relativas La unidades relativas son más flexibles que las unidades absolutas porque se adaptan más fácilmente a los diferentes medios. em: relativa respecto del tamaño de letra empleado. ex: relativa respecto de la altura de la letra x px: relativa respecto de la resolución de la pantalla del usuario
  76. 76. Unidades de Mediada y Colores 2. Unidades absolutas Las unidades absolutas definen las medidas de forma completa, ya que sus valores reales no se calculan a partir de otro valor de referencia, sino que son directamente los valores indicados. in: del inglés "inches", pulgadas (1 pulgada son 2.54 centímetros) cm: centímetros mm: milímetros pt: puntos (1 punto equivale a 1 pulgada/72, es decir, unos 0.35 milímetros) pc: picas (1 pica equivale a 12 puntos, es decir, unos 4.23 milímetros) 3. Porcentajes CSS define otra unidad de medida relativa basada en los porcentajes.
  77. 77. Unidades de Mediada y ColoresLos colores en CSS se pueden indicar de cinco formas diferentes:1. Palabras claveCSS define 17 palabras clave para referirse a los colores básicos.aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow2. RGB decimalEl modelo RGB consiste en definir un color indicando la cantidad de color rojo, verde y azul que se debemezclar para obtener ese color. p { color: rgb(71, 98, 176); }3. RGB porcentual p { color: rgb(27%, 38%, 69%); }
  78. 78. Unidades de Mediada y Colores4. RGB hexadecimalEl color se define mediante el sistema numérico hexadecimal.p { color: #4762B0; }5. Colores web safeEn la década de los 90 los monitores de los usuarios no eran capaces de mostrar más de 256 coloresdiferentes. A partir de todos los colores disponibles, se eligieron 216 colores que formaron la paleta decolores "web safe".
  79. 79. Modelo de CajasEl modelo de cajas o "box model" es la característica más importante del lenguaje CSS, ya que condicionael diseño de todas las páginas web. El modelo de cajas hace que todos los elementos de las páginas serepresenten mediante cajas rectangulares.Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta HTML, se creauna nueva caja rectangular que encierra los contenidos de ese elemento.
  80. 80. Modelo de CajasLos navegadores crean y colocan las cajas de forma automática, pero CSS permite modificar todas suscaracterísticas. Cada una de las cajas está formada por seis partes, tal y como muestra la siguienteimagen:
  81. 81. Modelo de CajasLas partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son lassiguientes:Contenido (content): se trata del contenido HTML del elemento (las palabras de un párrafo, una imagen, eltexto de una lista de elementos, etc.)Relleno (padding): espacio libre opcional existente entre el contenido y el borde.Borde (border): línea que encierra completamente el contenido y su relleno.Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el espacio derelleno.Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de relleno.Margen (margin): separación opcional existente entre la caja y el resto de cajas adyacentes.
  82. 82. Anchura y Altura 1.Anchura width Valores: <medida> | <porcentaje> | auto | inherit Se aplica a:Todos los elementos, salvo los elementos en línea que no sean imágenes, las filas de tabla y los grupos de filas de tabla La propiedad width no admite valores negativos y los valores en porcentaje se calculan a partir de la anchura de su elemento padre. #lateral { width: 200px; } <div id="lateral"> ... </div> 2. Altura height Valores: <medida> | <porcentaje> | auto | inherit Se aplica a: Todos los elementos, salvo los elementos en línea que no sean imágenes, las columnas de tabla y los grupos de columnas de tabla. #cabecera { height: 60px; } <div id="cabecera"> ... </div>
  83. 83. Margen y Relleno1.MargenCSS define cuatro propiedades para controlar cada uno de los márgenes horizontales yverticales de un elemento. margin-top margin-right margin-bottom margin-leftValores: <medida> | <porcentaje> | auto | inheritSe aplica a: Todos los elementos, salvo margin-top y margin-bottom que sólo se aplican a los elementos debloque y a las imágenesCSS define una propiedad que permite establecer los cuatro márgenes de forma directa empleando unaúnica propiedad: "shorthand" marginValores:( <medida> | <porcentaje> | auto ) {1, 4} | inheritSe aplica a: Todos los elementos salvo algunos casos especiales de elementos mostrados como tablas
  84. 84. Margen y Relleno2.RellenoCSS define cuatro propiedades para controlar cada uno de los espacios de relleno horizontales y verticalesde un elemento. padding-top padding-right padding-bottom padding-leftValores: <medida> | <porcentaje> | inheritSe aplica a: Todos los elementos excepto algunos elementos de tablasShorthand: paddingValores: ( <medida> | <porcentaje> ) {1, 4} | inheritSe aplica a: Todos los elementos excepto algunos elementos de tablas
  85. 85. BordesDefine el aspecto de cada uno de los cuatro bordes de los elementos. Para cada borde se puede establecersu anchura, su color y su estilo.Antes de presentar las propiedades, es conveniente definir los tres siguientes tipos de valores:<medida_borde> = <medida> | thin | medium | thick<color_borde> = <color> | transparent<estilo_borde> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset border-top border-right border-bottom border-leftValores: ( <medida_borde> || <color_borde> || <estilo_borde> ) | inheritSe aplica a: Todos los elementosShorthand: border div { border-top: 1px solid red; border-right: 1px solid red; div { border: 1px solid red; } border-bottom: 1px solid red; border-left: 1px solid red; }
  86. 86. Margen, relleno, bordes y modelo de cajasLa anchura y altura de un elemento no solamente se calculan teniendo en cuenta sus propiedades width yheight.El margen, el relleno y los bordes establecidos a un elemento determinan la anchura y altura final delelemento.En el siguiente ejemplo se muestran los estilos CSS de un elemento:div { width: 300px; padding-left: 50px; padding-right: 50px; margin-left: 30px; margin-right: 30px; border: 10px solid black; }30px + 10px + 50px + 300px + 50px + 10px + 30px = 480 píxel
  87. 87. FondosEl fondo solamente se visualiza en el área ocupada por el contenido y su relleno, puede ser un color simpleo una imagen.CSS define cinco propiedades para establecer el fondo de cada elemento:background-color: <color> | transparent | inheritbackground-image: <url> | none | inheritbackground-repeat: repeat | repeat-x | repeat-y | no-repeat | inheritbackground-attachment: scroll | fixed | inheritbackground-position: ( ( <porcentaje> | <medida> | left | center | right ) ( <porcentaje> | <medida> | top |center | bottom )? ) | ( ( left | center | right ) || ( top | center | bottom ) ) | inherit backgroundValores: ( <background-color> || <background-image> || <background-repeat> || <background-attachment>|| <background-position> ) | inheritSe aplica a: Todos los elementos body { background: #222d2d url(./graphics/colorstrip.gif) repeat-x 0 0; }
  88. 88. Posicionamiento y VisualizaciónLos navegadores crean y posicionan de forma automática las cajas que forman cada página HTML. Noobstante, CSS permite modificar la posición en la que se muestra cada caja.El posicionamiento de una caja se establece mediante la propiedad: positionValores: static | relative | absolute | fixed | inheritSe aplica a: Todos los elementosstatic: posicionamiento normal o estático. Si se utiliza este valor, se ignoran los valores de las propiedadestop, right, bottom y left que se verán a continuación.relative: posicionamiento relativo. El desplazamiento de la caja se controla con las propiedades top, right,bottom y left.absolute: posicionamiento absoluto. El desplazamiento de la caja también se controla con las propiedadestop, right, bottom y left, pero su interpretación es mucho más compleja, ya que el origen de coordenadas deldesplazamiento depende del posicionamiento de su elemento contenedor.fixed: corresponde al posicionamiento fijo. El desplazamiento se establece de la misma forma que en elposicionamiento absoluto, pero en este caso el elemento permanece inamovible en la pantalla.
  89. 89. Posicionamiento y VisualizaciónNormalmente, cuando se posiciona una caja también es necesario desplazarla respecto de su posiciónoriginal o respecto de otro origen de coordenadas. top right bottom leftValores: <medida> | <porcentaje> | auto | inheritSe aplica a: Todos los elementos posicionadosLa propiedad CSS que permite posicionar de forma flotante una caja se denomina: floatValores: left | right | none | inheritSe aplica a: Todos los elementosAdemás de las propiedades que controlan el posicionamiento, CSS define otra propiedad para controlar suvisualización: displayValores: inline | block | noneSe aplica: aTodos los elementos
  90. 90. Posicionamiento y VisualizaciónPosicionamiento normal Elementos de bloque Elementos de linea
  91. 91. Posicionamiento y VisualizaciónPosicionamiento relativo
  92. 92. Posicionamiento y VisualizaciónPosicionamiento relativo
  93. 93. Posicionamiento y VisualizaciónPosicionamiento relativo
  94. 94. Posicionamiento y VisualizaciónPosicionamiento relativo
  95. 95. Posicionamiento y VisualizaciónPosicionamiento absoluto
  96. 96. Posicionamiento y VisualizaciónPosicionamiento absoluto
  97. 97. Posicionamiento y VisualizaciónPosicionamiento absoluto
  98. 98. Posicionamiento y VisualizaciónPosicionamiento absoluto
  99. 99. Posicionamiento y VisualizaciónPosicionamiento flotante
  100. 100. Posicionamiento y VisualizaciónPosicionamiento flotante
  101. 101. TEXTO
  102. 102. TipografíaColor
  103. 103. TipografíaColor
  104. 104. TipografíaFont-family
  105. 105. TipografíaFont-size
  106. 106. TipografíaFont-size
  107. 107. TipografíaFont-weight
  108. 108. TipografíaFont-weight
  109. 109. TextoText-align
  110. 110. TextoText-align
  111. 111. ENLACES
  112. 112. EnlacesTamaño, color y decoración
  113. 113. EnlacesPseudo-clasesCambia el aspecto de un enlace cuando por ejemplo el usuario pasa el ratón por encimao cuando el usuario pincha sobre ese enlace :link, aplica estilos a los enlaces que apuntan a páginas o recursos que aún no han sido visitados por el usuario. :visited, aplica estilos a los enlaces que apuntan a recursos que han sido visitados anteriormente por el usuario :hover, aplica estilos al enlace sobre el que el usuario ha posicionado el puntero del ratón. :active, aplica estilos al enlace que está pinchando el usuario. Los estilos sólo se aplican desde que el usuario pincha el botón del ratón hasta que lo suelta, por lo que suelen ser unas pocas décimas de segundo
  114. 114. LISTAS
  115. 115. ListasList-style-image
  116. 116. ListasList-style-image

×