Lenguaje html y css
- 1. R I CA R D O F E R R A N D O G Ó M E Z J O S É A N T O N I O V E L A S C O L Ó P E Z LENGUAJE HTML Y CSS
- 2. ÍNDICE 1. Lenguaje HTML 1.1Significado HTML y utilidad 1.2 ¿Por qué HTML no es un lenguaje de programación? 1.3 Etiquetas 1.4 Atributos 2. Estructura de una página HTML 2.1 Editores de texto plano y editores de textos web. Ejemplos 2.2 Elementos básicos de la estructura de un documento HTML 2.3 Elementos de bloque y de línea 2.4 Etiquetas básicas
- 3. ÍNDICE 2.5 Atributos aplicablesa cualquier etiqueta: id, class, style, title 2.6 Listas y tipos 2.7 Encabezados 2.8 Tablas 2.9 Imágenes 2.10 Enlaces 3. Personalización del estilo: CSS 3.1 Significado de CSS y utilidad 3.2 Formas de colocación del código CSS 3.3 Selectores básicos 3.4 Colores
- 4. ÍNDICE 3.5 Texto 3.6 Tamaño 3.7Bordes 3.8 Márgenes 3.9 Posicionamiento 3.10 Imagen de fondo
- 5. SIGNIFICADO DE HTML.UTILIDAD HTML significa Lenguaje marcado de híper texto Lenguaje: uso de palabras Marcado: es la edición que realizas sobre el texto. Hiper: los programas antiguos leían el código línea por línea. HTML puede leer a saltos. Texto: contenido HTML sirve para que los navegadores sepan como estructurar una página web.
- 6. ¿POR QUÉ HTMLNO ES UN LENGUAJE DE PROGRAMACIÓN? No lo es porque no posee atributos propios de los lenguajes de programación como la toma de decisiones. HTML consiste solo en instrucciones que un navegador sigue para estructurar una página web.
- 7. ETIQUETAS ETIQUETA FUNCIÓN <html> </html>Indica el principio/cierre de la página HTML <head> </head> Indica el principio/cierre del encabezado <body> </body> Indica el principio/cierre del cuerpo de la página <p> </p> Indica el principio/cierre de un párrafo <br /> Punto y a parte <h1,2,3…> </h1,2,3…> Indica el principio/cierre de encabezados ordenados por relevancia. Son marcas que indican el principio y el fin de una estructura Las etiquetas de cierre son iguales a las de apertura, pero van precedidas de “/”
- 8. ATRIBUTOS ATRIBUTO FUNCIÓN <alt> Proporcionaun texto alternativo cuando no se muestre la imagen <bg color> Indica el color del fondo <border> Indica el ancho del borde de la página <color> Indica el color del texto <img src> Indica la ruta de una imagen Son valores que se añaden a las etiquetas para modificar su comportamiento Van solo con la etiqueta de apertura
- 9. EDITORES DE TEXTOPLANO Y WEB Editores de texto planos Editores de texto web Bloc de notas Notepad C++ Wordpad Microsoft Office Word A diferencia de los editores planos, los editores web pueden añadir etiquetas al código que tú no has escrito.
- 10. ELEMENTOS BÁSICOS DEUN DOCUMENTO HTML ELEMENTO EXPLICACIÓN DOCTYPE Informa al navegador del tipo de archivo <html> Indica que se va a utilizar HTML para escribir la página <head> Es la parte de la página donde se escribe el título y similares <body> Es la parte de la página donde se aloja la mayoría del código <meta charset> Indica al navegador el tipo de codificación de los caracteres
- 11. ELEMENTOS DE BLOQUEELEMENTOS DE LÍNEA ELEMENTOS DE BLOQUE Y DE LÍNEA -Ocupan todo el ancho disponible -Los elementos tras él se colocan debajo -Pueden contener otros elementos de bloque y de línea -Ejemplos: <p>;<table>;<ol> -Ocupan solo el ancho necesario -Los elementos se van alineando hasta ocupar el espacio disponible -Pueden contener sólo otros elementos de línea -Ejemplos: <strong>;<img>;<a>
- 12. ETIQUETAS BÁSICAS ETIQUETA FUNCIÓN <div> Indicaun bloque de contenidos <u> Indica un texto subrayado <em> Indica un texto en cursiva <sub> Indica un texto en subíndice <sup> Indica un texto en superíndice <strong> Indica un texto en negrita
- 13. ATRIBUTOS APLICABLES ACUALQUIER ETIQUETA ATRIBUTO DESCRIPCIÓN id Identifica una etiqueta concreta en todo el documento HTML class Se usa para agrupar etiquetas bajo un mismo estilo style Aplica un estilo a un elemento title Sirve para elaborar una descripción corta de un elemento
- 14. LISTAS Y TIPOS Sonenumeraciones de elementos. Dentro de cada elemento puede haber otra enumeración. Hay dos tipos: Lista ordenada: los elementos se ordenan. En HTML puedes usar varias maneras de ordenar (por números (1,2,3), por letras (A,B,C), etc. Lista no ordenada: los elementos no van en orden. Aquí, los elementos se ordenan por guiones, por puntos, etc.
- 15.
- 16. ENCABEZADOS Son textosespeciales que se usan para crear títulos y así distinguir secciones dentro de una página. Para definirlos se usa la etiqueta <h1,2,3…> Están constituidos de manera jerárquica, es decir, h1 se usa para títulos con mayor importancia que h2
- 17.
- 18. TABLAS Son elementosque estructuran la información en filas y columnas. Para definirlas se usa la etiqueta <table>. Además se usan las etiquetas <tr> para las filas y <td> para las celdas dentro de cada fila. También se pueden modificar otros aspectos como el borde de la tabla.
- 19.
- 20. IMÁGENES Para definirlasse usa la etiqueta <img>. Se usa siempre con el atributo src que indica el directorio donde se guarda la imagen. Se usa el atributo alt para proporcionar un texto alternativo si la imagen no se puede mostrar. Se pueden modificar atributos como el ancho o la altura con los atributos width y height respectivamente.
- 21.
- 22. ENLACES Son vínculosa otras páginas. Para definirlos se usa la etiqueta <a> seguido del atributo href que indica la ruta a la página.
- 23.
- 24.
- 25. CSS: Significado yutilidad CSS (hojas de estilo en cascada) es un lenguaje que se usa para definir el modo de presentar el código HTML, es decir, el estilo de la página.
- 26. FORMAS DE COLOCAREL CÓDIGO CSS Existen tres maneras principales: -Con el atributo style
- 27. FORMAS DE COLOCAREL CÓDIGO CSS -Con la etiqueta <style>
- 28. FORMAS DE COLOCAREL CÓDIGO CSS -En un archivo independiente
- 29. SELECTORES BÁSICOS Son modificadoresque afectan a ciertos elementos y que cambiarán sus propiedades. Tres tipos: SELECTOR DESCRIPCIÓN De tipo La modificación afectará a todas las etiquetas que sean del tipo de la seleccionada. De clase La modificación afectará a todas las etiquetas reunidas en una clase con el atributo class De id La modificación afectará a un elemento concreto; del que se especifique su atributo id
- 30. COLORES Para modificarel color del texto se utiliza la propiedad «color». Esto afecta al texto; si queremos cambiar el color del fondo usaremos bg-color. Existen muchas maneras de definir un color. Las más comunes son: por su nombre en inglés, por su valor RGB o por su código hexadecimal.
- 31. TEXTO Existen muchos modificadoresque afectan a las letras del texto MODIFICADOR DESCRIPCIÓN Text-align Alineación del texto Text-decoration Subrayado, tachado, etc Text-transform Cambios entre mayúsculas y minúsculas. Font-size Tamaño de la letra Font-family Tipo de letra Font-syle Aplica cursiva Font-weight Grosor del trazo del texto Text-shadow Sombreado
- 32. TAMAÑO Puesto que dependiendode si el elemento es de bloque o de línea ocupará ciertas dimensiones, existen herramientas CSS para cambiar la forma en la que el navegador considera un elemento: ELEMENTO DESCRIPCIÓN display: block El elemento se comportará como elemento de bloque display: inline El elemento se comportará como elemento de línea display: inline-block El elemento se establece como bloque pero se comporta como línea
- 33. BORDE Se puede establecerun borde alrededor del documento HTML. Se pueden establecer las siguientes propiedades: PROPIEDAD DESCRIPCIÓN Border-width Establece el grosor del borde Border-style Tipo de trazo. Línea continua, doble etc Border-color Establece el color del borde Border Es la propiedad genérica que permite establecer las anteriores a la vez Border-radius Radio de la curvatura que tiene el borde en las esquinas del documento
- 34. MÁRGENES Es el espacioque hay entre elementos. Dos propiedades: PROPIEDAD DESCRIPCIÓN Margin Espacio entre un elemento y los elementos que lo rodean Padding Es el espacio interno entre un elemento y su contenido
- 35. POSICIONAMIENTO Es el lugarque ocupan los elementos en el espacio del documento. Se puede modificar con la propiedad position y un atributo: ATRIBUTO DESCRIPCIÓN Position: static El elemento ocupa la posición por defecto, es decir, después del elemento anterior Position: relative Desplaza la posición hacia una dirección establecida a partir de la posición original Position: absolute El elemento se sitúa en la parte superior izquierda Margin-top y margin-left Mueven el elemento Position: fixed Igual que el absolute pero se utiliza la ventana como referencia para la posición
- 36. IMAGEN DE FONDO Paraestablecerla se usan 3 propiedades: PROPIEDAD DESCRIPCIÓN Bg-image Su valor será la ruta donde está la imagen Bg-position Establece la alineación de la imagen Bg-repeat Si la imagen es más pequeña que el elemento, se irá repitiendo hasta llenar el espacio.