Introducción a HTML5 y CSS3

1. UT2 – Lenguajes para visualización de la información HTML5 y CSS3 – INTRODUCCIÓN (1 de 2) Jorge Castellanos Vega

2. 1. ADVERTENCIA • Las siguientes transparencias exponen las etiquetas del lenguaje HTML en su versión 5 • Las transparencias carecen en su mayoría de ejemplos • Se pretende que las pruebes mientras las estudias • Puedes probarlas mediante un editor de texto y un navegador • Notepad++ • Geany “me lo contaron y lo olvidé, lo vi y lo entendí, lo hice y lo aprendí.” Confucio

3. 2. PRINCIPIOS DE HTML5 • Principio de separación de contenido y apariencia • Contenido  html • Apariencia  css • Simplificación del código • Evitar plugins • Integración de etiquetas para audio y vídeo

4. 3. NOVEDADES EN HTML5 • Doctype simplificado • Supresión de etiquetas y atributos de presentación • Nuevas etiquetas • Semánticas y organizativas • Audio y vídeo • Diseño 2D Y 3D (etiqueta canvas) • Nuevos formularios • Calendario • Cursores • Validación nativa de datos

5. 4. REGLAS • Las etiquetas se escriben en minúscula • En todo caso no son sensibles a mayúsculas • Toda etiqueta abierta debe cerrarse • <etiqueta>…….</etiqueta> • Los valores de los atributos deben ir entre comillas • <etiqueta atributo=“valor”>…..</etiqueta> • Las etiquetas deben anidarse correctamente • <e1><e2><e3>…..</e3></e2></e1>  bien • <e1><e2><e3>…..</e2></e3></e1>  mal

6. 5. FORMATO DE DOCUMENTO • Todo documento html5 debe comenzar por un doctype y una etiqueta <html> <!DOCTYPE html> <html> ….. </html> • La etiqueta html puede incluir el atributo lang que especifica el lenguaje de documento • <html lang=“en”>

7. 5. FORMATO DE DOCUMENTO • El encabezado del documento • Se define en la etiqueta <head>….</head> • Dentro de la etiqueta <head> podemos encontrar: • Título de la página <title> • Obligatoria!! • Meta etiquetas orientadas a definir codificación, palabras clave, etc… • <meta name=“author” content=“Jorge”> • Llamadas a hojas de estilo CSS • <style>…</style> • Funciones o vínculos a archivos de script • <script>….</script>

8. 5. FORMATO DEL DOCUMENTO • Meta etiquetas <head> <meta charset="UTF-8"> <meta name="description" content=“Tutorial de HTML"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content=“Jorge"> </head>

9. 5. FORMATO DEL DOCUMENTO • Juego de caracteres • Aspecto muy importante, puede provocar errores de legibilidad de documento • Determina como son interpretados los bytes del archivo para generar su representación en texto • Los navegadores incluyen una función de detección del juego de caracteres • No es recomendable dejarlo sin determinar • Se establece con la etiqueta <meta> • <meta charset=“codigo”> • Por ejemplo • <meta charset=“UTF-8”> Wikipedia: Charset Encoding

10. 5. FORMATO DE DOCUMENTO <!– UN DOCUMENTO BÁSICO --> <!DOCTYPE html> <html> <head> <title> Mi primera página web </title> </head> </html>

11. 5. FORMATO DE DOCUMENTO • El cuerpo del documento • Se define entre las etiquetas <body>….</body> • En html5 ya no se usan los atributos de formato en esa etiqueta

12. 5. FORMATO DE DOCUMENTO <!– UN DOCUMENTO BÁSICO --> <!DOCTYPE html> <html> <head> <title> Mi primera página web </title> </head> <body> ¡Hola mundo! </body> </html>

13. 6. ETIQUETAS BÁSICAS • Salto de línea • En html los retornos de carro no se interpretan como tal y se sustituyen por un espacio <!DOCTYPE html> <html> <head> <title> Mi primera página web </title> </head> <body> Ahora hay un salto de línea </body> </html>

14. 6. ETIQUETAS BÁSICAS • ¿Qué ha pasado??? • El salto de línea no funciona • Las tildes no se muestran correctamente

15. 6. ETIQUETAS BÁSICAS • Solución: • Etiqueta de juego de caracteres, por ejemplo: • <meta charset="UTF-8"> • <meta charset=“iso-8859-1”> • Etiqueta de salto de línea <br> • Se puede poner sin cierre • O con cierre <br />

16. 6. ETIQUETAS BÁSICAS • También podemos generar un salto de línea mediante la etiqueta párrafo • Al finalizar el párrafo se genera un salto de línea • <p> …. </p> • Formatos básicos de texto • Negrita <b>….</b> • Cursiva <i>….</i> • Texto tachado <del>….</del> • Subíndice <sub> …. </sub> • Superíndice <sup> …. </sup> • Span <span> …. </span> • No aplica formato pero identifica un texto para poder aplicar estilo mediante las hojas de estilo que veremos más adelante

17. 6. ETIQUETAS BÁSICAS • Otros formatos de texto • Preformateado • Etiqueta <pre> …. </pre> • Tipo de letra de ancho fijo • Respeta saltos de línea y espacios • Cita • Dos tipos • <blockquote> …. </blockquote> • Al igual que el párrafo tiene salto de línea antes y después del texto • Se muestra desplazada hacia el margen derecho • <q> … </q> • No cumple con las características de blockquote pero muestra el texto entre comillas (“)

18. 6. ETIQUETAS BÁSICAS • Comentarios • Para ayudar a entender el código es recomendable introducir comentarios • Pueden situarse en cualquier parte del documento • Aconsejable ser ordenado • Se indican de la siguiente forma:

19. 6. ETIQUETAS BÁSICAS • Títulos • Al igual que en los procesadores de texto hay títulos predefinidos • Seis tamaños diferentes • Organizados desde la etiqueta <h1> (para el más grande) a la h6 (para el más pequeño) • Por defecto escriben el texto en negrita <h1>….</h1> <h2>….</h2> <h3>….</h3> <h4>….</h4> <h5>….</h5> <h6>….</h6>

20. 6. ETIQUETAS BÁSICAS • Línea horizontal • Muestra una línea horizontal en el texto que puede actuar para separa secciones • Etiqueta <hr> • No es necesario cierre • Se puede usar el de XHTML 1.0 <hr />

21. 6. ETIQUETAS BÁSICAS • Listas • Ordenadas • Cada elemento de la lista lleva un identificador ordenado • Se definen con la etiqueta <ol> …. </ol> • El atributo start permite empezar las listas en valores distintos al 1 • No ordenadas • Cada elemento va identificado por una viñeta • Se definen con la etiqueta <ul> …. </ul> • En ambos casos cada elemento de la lista se define mediante la etiqueta <li> …. </li> • Las listas permiten anidarse

22. 6. ETIQUETAS BÁSICAS • Listas • De definición • Formada por un texto y su descripción • Se define mediante la etiqueta <dl> …. </dl> • Cada elemento identificado por dos etiquetas • Término a definir <dt> …. </dt> • Definición <dd> …. </dd>

23. 6. ETIQUETAS BÁSICAS • Listas <ol> <li> primer elemento </li> <li> segundo elemento</li> <li> tercer elemento </li> </ol> <ul> <li> primer elemento </li> <li> segundo elemento</li> <li> tercer elemento </li> </ul> ¿Cómo se ven en el navegador?

24. 6. ETIQUETAS BÁSICAS • Enlaces • Permiten enlazar a otro recurso de Internet • Página web o sección de página • Dirección de correo • Archivo • Etiqueta ancla • <a href=“destino”>Texto enlace </a> • Atributos • Ping – Puede contener URLs que serán notificadas cuando el usuario visite el enlace • Target – Lugar donde debe abrirse la página web • Target=“_blank” – nueva ventana • Target=“_self” – En la misma ventana • Type – Tipo MIME del archivo de destino si no se trata de un documento html5

25. 6. ETIQUETAS BÁSICAS • Enlaces a una página web • <a href=“http://www.otrapagina.com”> Enlace a otra página </a> • Enlaces a la misma carpeta • <a href=”pagina.htm”>Enlace a página </a> • Enlaces a una subcarpeta • <a href=“subcarpeta/pagina.htm”>Enlace a página en subcarpeta </a> • Enlaces a una carpeta de nivel superior • <a href=“../pagina.htm”>Enlace a página en carpeta de nivel superior </a>

26. 6. ETIQUETAS BÁSICAS • Enlaces a secciones de la página • Si tenemos una página con mucho contenido podemos establecer secciones y acceder directamente a ellas mediante la etiqueta <a> con atributo id. Por ejemplo: • <a id=“seccion1”></a> • Para acceder directamente a la página en la zona donde está el enlace de la sección 1 lo indicamos del siguiente modo: • <a href=“#seccion1”>Enlace a sección 1 de esta página </a> • <a href=“pagina.htm#seccion1”>Enlace a sección 1 de pagina.htm</a> • Enlaces a correo electrónico • <a href=“mailto:Jorge@educa.madrid.org”>Enlace </a>

27. ETIQUETAS BÁSICAS • Imágenes • <img src=“Ruta a la imagen” alt=“texto alternativo”> • Atributos posibles. • height – Define la altura de la imagen • width – Define el ancho de la imagen • Permiten al navegador ir construyendo la página aunque no se haya acabado de cargar la imagen • <img src=“img.jpg” height=“300” width=“200”> • Se pueden definir en píxeles o porcentaje • alt – Texto alternativo. Pensado para personas invidentes.

28. 6. ETIQUETAS BÁSICAS • Imágenes como mapa • Permite que una imagen tenga diferentes zonas con enlaces a distintos recursos. <img src=“archivoImagen.jpg” usemap=“#identificadorMapa”> • Cada zona se conoce con el nombre de área y se define en una estructura como la siguiente: <map name=“identificadorMapa”> <area shape=“forma” coords=“coordenadas” href=“destino 1” alt=“texto”> <area shape=“forma” coords=“coordenadas” href=“destino 2” alt=“texto”> ….. </map>

29. 6. ETIQUETAS BÁSICAS • Etiqueta area • El atributo shape determina la forma del área • Rectángulo – rect • Círculo – circle • Polígono – polygon • Por defecto – default • Gestiona clics fuera de zonas activas • El atributo coords indica las coordenadas de inicio y final de la forma. • Depende del tipo de área • Para encontrarlas es recomendable abrir la imagen con algún editor, como por ejemplo gimp

30. 6. ETIQUETAS BÁSICAS • Etiqueta area <area shape=“rect” coords=“x1,y1,x2,y2” href=“pagina1.htm”> <area shape=“circle” coords=“x,y,r” href=“pagina2.htm”> <area shape=“polygon” coords=“x1,y1,x2,y2, x3,y3,x4,y4, x5,y5” href=“pagina3.htm”> x1, y1 x2, y2 x, y r X1, y1 X2, y2 X3, y3 X4, y4 X5, y5

31. 7. CARACTERES ESPECIALES • Hay determinados caracteres que pueden presentar ambigüedades al ser interpretados por el navegador. Para ello se utiliza un código que lo sustituye. Carácter Código < < > > & " “ &

32. 8. VALIDACIÓN DE HTML5 • Es posible validar si nuestro código HTML cumple con la especificación de HTML5 • Existen diferentes páginas en Internet que nos facilitan este servicio • W3C - https://validator.w3.org/ • Validator.nu - https://html5.validator.nu/

33. 9. HOJAS DE ESTILO • Permiten añadir información de formato a nuestros documentos html • La declaración de un estilo se indica mediante el par: • Propiedad: valor; • Por ejemplo: • padding: 3px; • Propiedad: Elemento de formato sobre el que queremos aplicar el valor • Valor: Puede ser un porcentaje, palabra reservada o número de píxeles.

34. 9. HOJAS DE ESTILO • Las hojas de estilo no son case-sensitive • Sin embargo puede que haya URLs que si lo sean • Como norma general los nombres de propiedades y valores se escribirán en minúscula

35. 10. SELECTORES • Permiten identificar a qué elementos de nuestro código html vamos a aplicar el estilo definido • Selector universal (*) • Sirve para seleccionar todos los elementos de la página. * {margin:10px; padding: 5px}; • Selectores de etiqueta • En este caso se aplican solo a la etiqueta p { text-align: center} • Si queremos ajustar los mismos estilos a dos etiquetas diferentes podemos ponerlos separados por comas P, h1, h2 { text-align: center} • También podríamos haber definido las etiquetas por separado

36. 10. SELECTORES • Selectores de clase • En ocasiones no vamos a querer aplicar el mismo formato en todas las etiquetas del mismo tipo • Para ello podemos asignar a las etiquetas a una clase determinada de la forma • <p class=“parrafoCentrado”> ….. </p> • El selector se especificaría: .parrafoCentrado { text-align: center; } • Y se aplicaría a todas las etiquetas que perteneciesen a la clase “parrafoCentrado” sean del tipo que sean • Si queremos limitarlo a un solo tipo de etiquetas se debe especificar: p.parrafoCentrado {text-align: center; }

37. 10. SELECTORES • Selectores descendentes • Permite seleccionar elementos que se encuentran dentro de otros elementos, por ejemplo: p h1 {color: red; }: • Se aplicará a todas las etiquetas h1 que estén dentro de bloques p • No tiene porqué ser descendiente directo • El nivel de anidación puede tener varios niveles: p a b i {text-decoration: underline; } • Se aplica a los elementos en cursiva, dentro de etiquetas de negrita, anidados dentro de enlaces que se encuentren en párrafos. • ¡CUIDADO!! • No confundir el selector descendente con la aplicación del mismo selector a distintas etiquetas • p a b i {color: blue; } vs p,a,b,i {color: blue;}

38. 10. SELECTORES • Selectores descendentes • Podemos combinar el selector universal con selectores descendentes, por ejemplo: p * b {color: #0000FF;} • Se aplica a todas las etiquetas de tipo <b> que estén anidadas en cualquier otra etiqueta que a su vez esté dentro de una etiqueta de tipo p • Sin embargo no se aplicará a las etiquetas de tipo <b> que estén dentro de una etiqueta de tipo <p> directamente

39. 10. SELECTORES • Selectores de ID • Permite seleccionar un elemento de la página por medio de su atributo id • El valor del atributo id no puede repetirse en dos elementos diferentes de la misma página • Por ejemplo: <p id=“unico”>….</p> • Se referencia mediante una de las siguientes posibilidades: #unico { color: blue;} p#unico {color: blue;} • Este último caso solo tiene sentido si el archivo css se aplica a varias páginas

40. 10. SELECTORES • Selectores de hijos • Sirve para seleccionar un elemento que es hijo directamente de otro • b > i {color: blue;} • Se aplicará a todas las etiquetas <i> anidadas directamente dentro de etiquetas <b> • Selector adyacente • Selecciona elementos que se encuentran a continuación de otro • b + i {color: blue;} • Se aplicará a todas las etiquetas <i> anidadas directamente a continuación de etiquetas <b>

41. 11. AÑADIENDO ESTILOS • Declaración en línea • Dentro de la propia etiqueta mediante el atributo style • Deben evitarse para preservar el principio de separación de contenidos y formato • <p style=“color: red;”> …. </p> • Declaración Interna • En el encabezado del documento • Dentro de las etiquetas <style type=“text/css”> …. </style>

42. 11. AÑADIENDO ESTILOS • Declaración en archivo externo • En el encabezado mediante la etiqueta link • <link rel=“stylesheet” type=“text/css” href=“rutaArchivo.css”> • El archivo de estilos tendrá extensión CSS • El código del archivo de estilos no tendrá etiqueta de declaración de estilo, p.e: • h1 {background-color: #blue} • Otra forma de usar hojas de estilo externas es mediante la etiqueta @import • Es una directiva CSS no html <style type=“text/css”> @import url(“formato1.css”); </style>

43. 12. CASCADA Y HERENCIA • Cascada, precedencia de estilos • Ante distintas declaraciones contradictorias a aplicar sobre la misma etiqueta el navegador aplicará la siguiente precedencia 1. Declaración en línea 2. Declaración interna 3. Declaración externa 4. Propiedades por defecto del navegador • Herencia • Si tenemos varios elementos anidados… • Los elementos más internos heredan los estilos de los externos en los que están anidados • Siempre y cuando ellos no los tengan definidos

44. 13. COMENTARIOS • Podemos establecer comentarios en nuestro código CSS mediante la siguiente sintaxis. • Apertura  /* texto del comentario */  Cierre • Pueden ocupar diferentes líneas /* esto es un comentario */

45. 14. UNIDADES DE MEDIDA • Pueden ser absolutas o relativas • Absolutas. Cualquier longitud expresada en una de estas unidades siempre se mostrará del mismo tamaño • Relativas. Dependen de la longitud de otra propiedad. • Se debe especificar la unidad usada • Siempre con dos caracteres • Sin dejar espacio • P.e: 13px Unidades absolutas cm Centímetros mm Milímetros In Pulgadas Px Píxeles Pt Puntos pc Picas

46. 14. UNIDADES DE MEDIDA UNIDADES RELATIVAS em Relativa al tamaño del tipo de letra por defecto ex Relativa al valor de x-height de la fuente actual ch Relativa al ancho del cero “0” rem Relativa al tamaño de letra del elemento raíz vw Relativa al 1ª del ancho del tamaño de la ventana del navegador vh Relativa al 1ª del alto del tamaño de la ventana del navegador

50. 17. FORMATOS PARA LISTAS Formato Propiedad Valores Estilo del marcador de lista list-style-type Valor (ver enlace) Marcador gráfico list-style- image url(imagen.gif) | none * Las imágenes pueden ser gif, jpg y png Posición list-style- position Inside | outside

51. 18. COLORES • Cuando queremos asignar un color a una propiedad de una hoja de estilo tenemos varias posibilidades: • Palabras clave mediante códigos de color en inglés. • Notación hexadecimal #rrggbb siendo • rr – cantidad de color rojo desde 00 a ff • gg – cantidad de color verde desde 00 a ff • bb . Cantidad de color azul desde 00 a ff • Por ejemplo: #00ef3d

52. 18. COLORES • Notación decimal. Parecida a la hexadecimal, se usa la sintaxis rgb (rojo, verde, azul) siendo cada color representado por un número cuyo valor oscilará entre 0 y 255. • Por ejemplo: rgb (111, 23, 150) • Notación en porcentaje. Similar a la anterior pero especificando la cantidad de cada color en porcentaje • Por ejemplo rgb (37%, 50%, 25%) • Notación RGBa. Incorporando un cuarto valor a la notación RGB (alpha) que representa el nivel de opacidad y que se mueve entre 0 (totalmente transparente) y 1 (totalmente opaco). • Otras notaciones. Notación HLS (Hue, Saturation, Luminance), HLSa (que añade opacidad a la anterior….)

Introducción a HTML5 y CSS3

Estás leyendo una previsualización.

Eche un vistazo a continuación

Introducción a HTML5 y CSS3

Más Contenido Relacionado

Presentaciones para usted (20)

A los espectadores también les gustó (20)

Similares a Introducción a HTML5 y CSS3 (20)

Más reciente (20)