Html
- 1. HTML Carlos Verdú y Guillermo Campaña
- 2. LENGUAJE HTML Significado de HTML y utilidad El lenguaje HTML (hypertext markup language) consiste en un conjunto de etiquetas predefinidas que el navegador web interpreta a la hora de construir una página para su visualización. Sirve para estructurar una página web. ¿Por qué HTML no es un lenguaje de programación? HTML no es un lenguaje como tal ya que carece de características necesarias para un lenguaje como las estructuras de control y la toma de decisiones.
- 3. Etiquetas Constan de un nombre que viene encerrado por los símbolos < y > que tienen funciones y usos específicos y se utilizan para escribir código HTML. Cuando utilizas una etiqueta es necesario cerrarlas utilizando una etiqueta de cierre igual que la de apertura pero con el símbolo / delante del nombre. Atributos Son la forma que tienen los autores de definir propiedades para un elemento. Estas propiedades habitualmente cambian la forma en que los navegadores interpretan al elemento, al cambiar su significado o presentación. Por ejemplo, el elemento <a> inserta un vínculo en el documento
- 4. ESTRUCTURA BÁSICA DE UNA PÁGINA HTML Editores de texto plano Guardan tan solo los caracteres escritos, pero no información sobre el tamaño o tipo de letra utilizado y otros detalles que realmente no son código. Como el bloc de notas o Notepad. Editores de documentos web Es una aplicación diseñada con el fin de facilitar la creación y edición de documentos HTML. Pueden ser de pago como Dreamweaver o gratis como Kompozer o Sublime Text.
- 5. Elementos básicos de la estructura de un documento HTML DOCTYPE Informa al navegador de qué tipo de archivo se trata. Se incluye siempre como la primera etiqueta del documento. Es la única que se escribe en mayúsculas <html> Elemento que contiene todo el documento HTML .Se define justo después del elemento DOCTYPE. <head> Es el primer elemento que aparece en el interior de <html>. Dentro de esta etiqueta se incluye información general sobre la página web dirigida, por lo general, al navegador o a buscadores web. <meta charset=“UTF- 8”> Se emplea para indicar 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> Se añade a continuación de <head>.El contenido que se mostrará al usuario deberá incluirse dentro del elemento <body>
- 6. Elementos 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 al otro. - Pueden contener otros elementos de bloque y otros elementos en línea. - Los párrafos (<p>), los bloques de división (<div>), las listas (<ul> , <ol>) y las tablas (<table>) constituyen ejemplos de este tipo de elementos. Elementos en línea - Ocupan tan solo el ancho necesario, que viene definido, por ejemplo, por la cantidad de texto incluido o por el tamaño de la imagen que se debe mostrar. - Los elementos en línea, seguidos, se sitúan uno junto al otro hasta que ocupan el ancho disponible. - Estos elementos solo pueden contener otros elementos en línea, texto e imágenes. - Las imágenes (<img>), los enlaces (<a>), los botones (<button>) y el texto
- 7. Etiquetas básicas División (<div>) Permite dividir la página en secciones Párrafo (<p>) Representa un párrafo y solo puede englobar elementos en línea. Los párrafos establecen márgenes superiores e inferiores con respecto al resto del contenido Agrupar elementos en línea (<span>) Esta etiqueta es similar a <div>con la diferencia de que no define un bloque. Se utiliza para.agrupar textos y otros elementos en línea Subrayado (<u>) El texto aparecerá subrayado Cursiva (<em>) El texto aparecerá en cursiva Negrita (<strong>) El texto aparecerá en negrita Subíndice (<sub>) Representa un subíndice Superíndice (<sup>) El texto se convierte en un superíndice Salto de línea (<br>) Fuerza un salto de línea en el texto. No tiene etiqueta de cierre. Separación horizontal (<hr>) Elemento de bloque que dibuja una línea de separación horizontal en la página. No tiene etiqueta de cierre.
- 8. Atributos globales aplicables a cualquier etiqueta Id Se utiliza para identificar una etiqueta de forma única en el documento HTML. Su valor debe empezar por una letra y solo puede contener letras, números y los caracteres -,_,:,.. class Se usa para agrupar varias etiquetas bajo un estilo común cuando se aplica código CSS a la página. style Se emplea para aplicar un estilo mediante CSS directamente a un elemento title Sirve para realizar una descripción corta de un elemento
- 9. Listas y tipos Existen dos tipos: ordenadas y desordenadas. Se representan con la etiqueta <li> En el caso de que la lista no mantenga ningún orden, se le llamaría lista “desordenada”. Utilizan la etiqueta <ul>. Delante de estos elementos el navegador inserta círculos negros pero se puede modificar mediante propiedades CSS. Si una lista sigue un orden concreto, se trataría de una lista “ordenada”. Utilizan la etiqueta <ol> y admite varios atributos como reserved (invertir el orden), start (establece en que número empieza la lista) y type que indica que tipo de número se va a utilizar Encabezados Están definidos por las etiquetas <h1> hasta <h6>. Según el número de etiqueta, el encabezado destacará más o menos, lo cual estará relacionado con su importancia.
- 10. Tablas Se representa con la etiqueta <table> La etiqueta <tr> representa las filas, <td> las columnas y <border> se utiliza para dibujar los bordes Imágenes Utiliza la etiqueta <img> la cual no va acompañada por una etiqueta de cierre. El archivo correspondiente a la imagen se referencia estableciendo la ruta al mismo con el atributo src. También es recomendable incluir el atributo alt, que permite incluir un texto alternativo que describe la imagen y que se mostrará en caso de que el navegador, por algún motivo, no pueda mostrarla Enlaces La etiqueta utilizada para crear un enlace es <a>, y esta englobará un texto o una imagen que servirá de enlace a la ruta especificada. Los atributos propios de esta etiqueta son href, que permite incluir la ruta hacia la página con la que enlazará, y opcionalmente target, cuyo valor _blank indicará al navegador que deberá abrir el enlace en una página o pestaña nueva para evitar salir de la que se está visualizando en el momento.
- 11. Personalización del estilo: CSS 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. Entre otras cosas, la utilización de CSS permite separar la estructura de un documento (HTML) de su diseño o presentación (CSS). Formas de colocación del código CSS Existen tres formas distintas de vincular código CSS a una estructura HTML: EN UN ATRIBUTO HTML CON EL ATRIBUTO STYLE El atributo style se puede incluir en cualquier etiqueta y permite insertar directa- mente código CSS. A su vez, las instrucciones incluidas se separarán con (;) CON LA ETIQUETA STYLE Permite establecer un diseño general que afectará a todo el documento HTML en el que se encuentre la etiqueta. Esta se suele incluir en la cabecera del documento EN UN ARCHIVO INDEPENDIENTE Es la forma mas recomendada de insertar el código. Este archivo, que tendrá una extensión .css, se situará en un directorio diferente al de los documentos HTML.
- 12. Sectores básicos Afectarán a determinados elementos del documento HTML. Existen varios: SELECTORES POR TIPO: se escribe únicamente el nombre de una etiqueta HTML. Las propiedades modificadas en este selector afectarán a todos los elementos del mismo tipo en el documento HTML. SELECTORES DE CLASE: El nombre del selector debe ir precedido de un punto (.) y representará una clase añadida a uno o varios elementos HTML mediante el atributo class. Las propiedades modificadas en el interior afectarán a todos los elementos para los que se haya establecido dicha clase como atributo SELECTORES DE ID: Corresponde al valor de su atributo id. Afecta solamente a un elemento. En el selector CSS, el nombre del identificador debe ir precedido de almohadilla (#).
- 13. Colores Modifica el color de fondo del elemento en cuestión, la propiedad correspondiente es background-color. Algunos de los métodos que permiten establecer un valor cromático son los si- guientes: Nombre del color: blue, red, orange, green... Proporción de cada valor RGB en código hexadecimal precedido de almohadilla: #FFOOOO Proporción de cada valor RGB en decimales, de O a 255: rgb(255, O, O), Proporción de cada valor RGB en porcentajes: rgb(100%, 0%, 0%). Proporción de cada valor RGB, más un valor de O a 1 (alpha) que indica la transparencia de dicho color: rgba(255, 0, 0, 0.5).
- 14. Texto Algunas de las propiedades que modifican el aspecto de un texto, cuyo prefijo es font o text, así como sus posibles valores, son las siguientes: Subrayado(text-decoration): Los valores pueden ser underline (subrayado), none (quita la propiedad de subrayado si la tuviera). Cursiva(front-style): El valor italic transforma el texto en cursiva, mientras que el valor normal retira dicha propiedad. Grosor del texto (font-weight): . El valor bold transforma el texto a negrita y normal la elimina. Sombreado (text-shadow): Un ejemplo de sombreado desplazado 4 píxeles de la izquierda, 3 hacia abajo, con un difuminado de 5 píxeles y de color gris: text-shadow: -4px 2px 5px grey;.
- 15. 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, como un divisor (<div>) o un párrafo. display: inline. El elemento se comporta como un elemento en línea, si se aplica a varios (<div>) seguidos, estos se situarían uno junto a otro. display: inline-block. El elemento se establece como un bloque pero se comporta como un elemento en línea, al estilo de una imagen. Los cambios de tamaño tienen efecto en los elementos con esta propiedad. El tamaño de un elemento viene definido por sus propiedades width (ancho) y height (alto). El tamaño mínimo de un elemento se puede establecer mediante las propiedades min-width y min-height . Los valores se establecen en píxeles o en porcentajes.
- 16. Bordes y márgenes Border-width Añade grosor al borde de los cuatro lados. Border-style Tipo de trazo con el que se dibuja el borde Border-color indica el color del borde Border- radius hace referencia al radio de curvatura de las esquinas de un elemento. 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 una unidad de medida en píxeles (px) o porcentaje (con respecto al espacio total disponible). padding. Representa el espacio o margen interno entre un elemento y su contenido. De esta manera, es el elemento contenedor el que fuerza que los elementos interiores se despeguen de su borde. Tiene los mismos valores que la propiedad margin. Para modificar de manera individual cada uno de los lados, se pueden utilizar los sufijos -left, -right, top y -bottom
- 17. Posicionamiento position: static Es el valor que después de cada elemento de bloque, realiza un salto de línea para añadir debajo el siguiente elemento position: relative Ocupará el mismo espacio que si su valor fuera static, se puede obligar al navegador a desplazar la posición donde lo dibujará position: absolute El elemento se sitúa en la esquina superior izquierda del elemento margin-top y margin- left Si se asignan los valores left: 0px; bottom: 20px; el elemento se situa pegado al lado izquierdo de la página y a veinte píxeles de distancia de la parte inferior del documento position: fixed Es muy similar a absolute, con la diferencia de que utiliza la ventana, y no el documento, como referencia para posicionarse
- 18. Imagen de fondo Para establecer una imagen de fondo en un elemento, se utilizan estas 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. En el caso de que la imagen sea 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. 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.