¿Qué es el lenguaje HTML?
- 1. HTML Nerea Sánchez Moreno Gema Rodríguez Calero
- 2. INTRODUCCIÓN • Lenguaje HTML – Significado de HTML y utilidad – ¿Por qué HTML no es un lenguaje de programación? – Etiquetas – Atributos • Estructura básica de una página HTML – Editores de texto plano y editores de documentos web. Ejemplos – Elementos básicos de la estructura de un documento HTML – Elementos de bloque y de línea – Etiquetas básicas – Atributos globales aplicables a cualquier etiqueta: id, class, style, title – Listas y tipos – Encabezados – Tablas – Imágenes – Enlaces
- 3. INTRODUCCIÓN • Personalización del estilo: CSS – Significado de CSS y utilidad – Formas de colocación del código CSS – Selectores básicos – Colores – Texto – Tamaño – Bordes – Márgenes – Posicionamiento – Imagen de fondo
- 5. Significado y utilidad El lenguaje HTML(hypertext markup language, ‘lenguaje de marcas de hipertexto’) es un conjunto de etiquetas predefinidas que el navegador web interpreta a la hora de construir una página para su visualización. Así, el HTML es el lenguaje utilizado para estructurar una página web.
- 6. ¿Por qué HTML no es un lenguaje de programación? Aunque nos refiramos a HTML como lenguaje de programación no lo es realmente, pues carece de ciertas características que definen un lenguaje, como las estructuras de control y toma de decisiones. Así, se pueden definir el HTML como una serie de instrucciones o etiquetas que indican al navegador cómo debe estructurarse el contenido.
- 7. Etiquetas Una etiqueta HTML consta de un nombre que la define encerrado por los símbolos <y>, y escrito en minúsculas. Existen etiquetas que pueden contener texto y otras que representan partes de una estructura. Por ello, se emplea una etiqueta de cierre (idéntica a la de apertura pero con el símbolo / ante el nombre) para definir con precisión qué engloba. Algunas etiquetas no se pueden cerrar porque no pueden contener nada en su interior. Se recomienda incluir el símbolo /, con un espacio, al final de la única etiqueta presente para indicar que termina ahí.
- 8. Etiquetas Ejemplos de etiquetas: • Párrafo. <p> • Salto de línea. <br/> • Párrafo con contenido en negrita. <strong></p>
- 9. Etiquetas
- 10. Atributos • Son valores adicionales que se agregan a una etiqueta para configurarla o definir su comportamiento. Existen atributos propios y exclusivos de algunas etiquetas, así como atributos globales aplicables a cualquier etiqueta. • Se añaden a la etiqueta de apertura, nunca a la de cierre. • Cada atributo tiene un nombre que define la propiedad que modifican y se agrega separados por un espacio de dicho nombre y del resto de atributos. • Ejemplos de atributos: <img> (para insertar una imagen) src (indica cual es el archivo de la imagen que se muestra) alt ( para mostrar un texto alternativo si la imagen no está disponible )
- 11. Estructura básica de una página HTML
- 12. Editores de texto plano y editores de documentos web. Ejemplos • Un texto plano es un formato de contenido que solo incluye caracteres imprimibles. • Para crear un documento HTML se puede utilizar un editor de texto plano. • Notepad++, Aptana Studio, Sublime Text, NetBeans u otros de Linux como gedit o Kate, son ejemplos de editores de documentos HTML. • Microsoft Word y LibreOffice Writer no entran en esta categoría.
- 13. Elementos básicos de la estructura de un documento HTML Nombre del elemento Definición DOCTYPE Informa al navegador de que tipo de archivo se trata. Es la primera etiqueta del documento <html> Elemento raíz que contiene todo el documento HTML. Se define después del DOCTYPE. <head> Es el primer elemento que aparece en el interior de <html> <meta charset=“UTF-8”/> Indica al navegador el tipo de codificación de caracteres que utiliza el editor. Para no tener problemas al utilizar caracteres especiales, se recomienda aplicar UTF-8 como valor. <body> A continuación de <head>. El contenido que se mostrará al usuario deberá incluirse dentro del elemento <body>.
- 14. Elementos básicos de la estructura de un documento HTML
- 15. Elementos de bloque y de línea • Elemento de bloque Ocupan por defecto todo el ancho disponible dentro del elemento que los contiene. Los elementos situados tras un elemento de bloque siempre se sitúan debajo de este, aunque se modifique su ancho y puedan disponerse uno junto a otro. Pueden contener otros elementos de bloque y de línea. Ejemplos de elementos de bloque: los párrafos (<p>), los bloques de división (<div>), las listas (<ul>, <ol>) y las tablas (<table>). • Elementos en línea Ocupan solo el ancho necesario definido, por ejemplo por la cantidad de texto incluido o por el tamaño de la imagen mostrada. Se sitúan uno junto al otro hasta ocupar el ancho disponible. Solo pueden contener otros elementos en línea, texto e imágenes. Ejemplos de elementos en línea: las imágenes(<img>), los enlaces (<a>), los botones (<button>) y el texto resaltado (<strong>).
- 16. Etiquetas básicas • Divide la página en secciones • Permite aplicar estilos con CSS más fácilmente División <div> • Representa un párrafo. • Establece márgenes superiores e inferiores con respecto al resto del contenido. Párrafo <p> • Representa un subíndice • Tamaño menor y desplazado hacia abajo Subíndice <sub>
- 17. Etiquetas básicas • Fuerza un salto de línea en el texto • No tiene etiqueta de cierre Salto de línea <br> • Dibuja una línea de separación en la página • No tiene etiqueta de cierre Separación horizontal <hr> • Similar a <div> • No define un bloque • Agrupa textos y otros elementos en línea. Agrupar elementos en línea <span>
- 18. Listas y tipos • Una lista es estructura que engloba un conjunto de elementos que la componen. • Si no establece un orden concreto se llama “lista desordenada”, como la lista de la compra. • Si se quiere establecer un orden, se utiliza la “lista ordenada”, como en la clasificación de un campeonato • Los elementos que componen la lista utilizan la etiqueta <li> . • La lista ordenada se representa con la etiqueta <ol> y puede contener atributos como reversed (invierte el orden), start (establece en qué número empieza la lista) y type (indica qué tipo de numeral se va a emplear: 1-números, a-letras minúsculas; A-letras mayúsculas…) • La lista desordenada se representa con <ul> y normalmente el navegador inserta círculos negros, lo que se puede modificar.
- 19. Listas y tipos Código HTML Resultado visual
- 20. Listas y tipos • Las listas anidadas son listas internas en el interior de un elemento de otra lista principal . No se debe cerrar la etiqueta <li> hasta no haber cerrado la etiqueta interna. Cómo agregar una lista anidada: 1. Abrir un elemento de la lista principal (<li>) 2. Escribir el texto que precederá a la lista anidada 3. Añadir las etiquetas de la lista interna 4. Cerrar elemento de la lista principal
- 21. Listas y tipos Código HTML Resultado visual
- 22. Encabezados • Los encabezados son párrafos especiales destinados a la creación de títulos para las diferentes secciones y subsecciones de una página web. • Están definidos por las etiquetas <h1> hasta <h6>. • <h1> representa el encabezado de mayor nivel y se mostrará con el tipo de letra más grande;<h2> será un poco más pequeño y así sucesivamente.
- 23. Tablas • Una tabla (<table>) es un elemento de bloque empleado para estructurar una serie de datos alineados según un esquema de filas y columnas. • Las filas se representan con <tr>, y estas contienen celdas o <td>. • El atributo border se utiliza para dibujar bordes de separación entre las celdas. • Para unir celdas se utilizan los atributos (dentro de <td>) colspan (columnas) y rowspan (filas)
- 25. Imágenes Elementos en línea <img> No tiene etiqueta de cierrre Atributo width (ancho en píxeles) Atributo height (alto en píxeles)
- 26. Imágenes • Si se quiere incluir una imagen externa (en un servidor de internet distinto) se debe incluir la URL completa: Imagen en el subdirectorio img Imagen en el directorio anterior (padre) Imagen en un servidor externo •img/imagen.jpg •../imagen.jpg •http://dominio.com/ruta/imagen.jpg
- 27. Enlaces • Son vínculos a otras páginas, que pueden ser: Locales( en el mismo servidor u ordenador) Externas( en un servidor externo) • Se utiliza la etiqueta <a> que englobará un texto y una imagen que servirá de enlace a la ruta especificada. • Se utilizan los atributos href, que incluye la ruta hacia la página con la que enlazará, y target, cuyo valor _blank indicará al navegador que deberá abrir el enlace en otra página.
- 29. Significado de CSS y utilidad • CSS es el lenguaje utilizado para definir el modo de presentar el código HTML de una página web. • Permite separar la estructura de un documento (HTML) de su diseño (CSS). Así un solo archivo CSS puede modificar el aspecto de varios documentos HTML .
- 30. Formas de colocación del código CSS FORMAS DE VINCULAR CSS A HTML DEFINICIÓN Con el atributo style •En cualquier etiqueta •Permite insertar directamente Código CSS como valor de dicho atributo •Las diferentes estaciones se separaran con: ; Con la etiqueta <style> •Establece un diseño general que afectará al todo el documento HTML que lo incluya. •Se incluye dentro de: <head>. En un archivo independiente •Tendrá una extensión .css. •Se sitúa en un directorio diferente al de HTML. •Es preciso insertar esta etiqueta en la cabecera.
- 31. Selectores Básicos • Afectan a determinados elementos del documento HTML. • Contendrán unas series de reglas con las que se modificará el aspecto de dichos elementos. • Formato para escribir dichos elementos: selector { propiedad: valor; propiedad2: valor2; }
- 32. Selectores Básicos Por Tipo • Solo para una etiqueta. • Sus propiedades afectan a todos los elementos del mismo tipo del documento HTML. De Clase • Va precedido de un punto. • Debe representar una clases añadida a uno o varios elementos HTML mediante el atributo class De id • Corresponde al nombre de identificador del elemento (valor de su atributo id) • Afecta solo a un elemento • Debe ir precedido de #
- 33. Colores • Para modificar el color del texto se utiliza la propiedad color. • Para modificar el color de fondo la propiedad correspondiente es background-color. • Algunos métodos para establecer un valor cromático son los siguientes: o Nombre del color: blue, red… o Proporción de cada valor RGB en decimales (de 0 a 25): rgb(255,0,0) o Proporción de cada valor RGB en porcentajes: rgb(100%,0%,0%). o Proporción de cada valor RGB, más un valor de 0 a 1, que indica la transparencia: rgba(255,0,0,0.5) o CMYK (cian, magenta, amarillo y negro) con 4 valores entre paréntesis, bien en % de intensidad o con valores numéricos de 0 y 255): cmyk(50%,100%,0%,0%).
- 34. Texto Propiedades que modifican el texto Función Text-align Alineación del texto Text-decoration Subrayado Text-transform Transformación mayúsculas/minúsculas Font-sice Tamaño de texto Font-family Tipo de fuente Font-style Cursiva Font-weight Grosor del texto Text-shadow Sombreado
- 35. Tamaño • Para modificar la forma en la que el navegador considera un elemento, se pueden establecer las siguientes propiedades: Display: block. El elemento afectado se comporta como un elemento de bloque, un divisor o un párrafo. Display: inline. El elemento se comporta como un elemento en línea. Display: inline-block. El elemento se establece como un bloque pero se comporta como un elemento en línea. • El tamaño de un elemento viene definido por sus propiedades widht (ancho) y height (alto), que pueden tener un valor en píxeles o en porcentaje. • También se puede asignar un tamaño mínimo (min-widht y min-height) y máximo (max-widht y max-height)
- 36. Bordes Propiedades para añadir borde Función Propiedades complementarias Border-widht Añade grosor al borde de los cuatro lados (px) Border-left-width, border- right-width, border-top- width y border-botton- width. Border-style Trazo que dibuja el borde Solid, dashed, dotted, double. Border-color Define el color del borde Igual que los valores para establecer un color de fondo o de texto Border Establece las 3 funciones anteriores a la vez Border-left, border-right, border-top, border-bottom. Border-radius Hace referencia al radio de curvatura de las esquinas de un elemento _
- 37. Márgenes • CSS tiene 2 propiedades para establecer márgenes: margin. Representa el espacio entre un elemento y los elementos que lo rodean, o el borde del elemento que lo contiene. Como valor, se utiliza la unidad en px o en %. padding. Representa el espacio entre un elemento y su contenido. Acepta los mismos valores que la propiedad margin.
- 38. Posicionamiento • El posicionamiento de los elementos de la página web se realiza según la estructura HTML establecida. Así, el navegador los muestra en el orden determinado por el código: unos dentro de otros o unos debajo de otros si son elementos de bloque adyacentes. • Este comportamiento se puede modificar para obligar al navegador a dibujar un elemento en un lugar distinto al original con la propiedad position.
- 39. Posicionamiento position:static Valor por defecto Realiza un salto de línea para añadir el siguiente elemento Modifica su tamaño con márgenes Position: relative Ocupa el mismo espacio que el valor static Propiedades top, bottom, left y right para desplazar el elemento una cantidad de px determinada postion: absolute El elemento se sitúa en la esquina superior izquierda Se despega del documento margin-top y margin-left Mover un elemento Con las propiedades top, left, right o bottom, deja de situarse con respecto al elemento que lo contiene y emplea todo el HTML como referencia position: fixed Similar a absolute Utiliza la ventana como referencia para posicionarse El elemento siempre estará visible (incluso haciendo scroll)
- 40. Imagen de fondo • Para establecer una imagen de fondo se utilizan las propiedades: background-image. Su valor será la ruta a la imagen desde el directorio donde se encuentra el archivo CSS. Esta ruta debe incluirse entre comillas simples y paréntesis, precedida de la palabra url, así: background-image: url(‘.../img.png’);. background-position. Si la imagen es más pequeña que el elemento, esta propiedad establece la alineación vertical y horizontal de la misma. Se establecen dos valores separados por espacio: la alineación horizontal, que puede ser left, center o right, y la alineación vertical, que puede ser top, center o bottom. background-repeat. Si la imagen es más pequeña que el elemento, se repetirá, por defecto, horizontal y verticalmente hasta ocupar todo el espacio disponible. Este comportamiento se puede modificar con los valores no-repeat, reapeat-x (horizontalmente) o repeat-y (verticalmente).
- 41. FIN Gracias por su atención