Html
- 2. ÍNDICE • 1. Lenguaje HTML • 1.1. Significado de HTML y utilidad • 1.2. ¿Por qué HTML no es un lenguaje de programación? • 1.3. Etiquetas • 1.4. Atributos • 2. Estructura básica de una página HTML • 2.1. Editores de texto plano y editores de documentos 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 • 2.5. Atributos globales aplicables a cualquier etiqueta: id, class, style, title • 2.6. Listas y tipos
- 3. 1.1. Encabezados 1.2. Tablas 1.3. Imágenes 1.4. Enlaces 2. Personalizacióndel estilo:CSS 2.1. Significadode CSSyutilidad 2.2. Formasde colocacióndel códigoCSS 2.3. Selectoresbásicos 2.4. Colores 2.5. Texto 2.6. Tamaño 2.7. Bordes 2.8. Márgenes 2.9. Posicionamiento 2.10.Imagende fondo • 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 • 3.5. Texto • 3.6. Bordes • 3.7. Márgenes • 3.8. Posicionamiento • 3.9. Imagen de fondo
- 4. 1. LENGUAJE HTML 1.1. SIGNIFICADO DE HTML Y UTILIDAD Es un lenguaje de marcado que se utiliza para el desarrollo de páginas de Internet. Se trata de la sigla que corresponde a HyperText Markup Language, es decir, Lenguaje de Formato de Documentos para Hipertexto.
- 5. 1.2. ¿POR QUÉ HTML NO ES UN LENGUAJE DE PROGRAMACIÓN? HTML es un lenguaje de etiquetas. Estas etiquetas (tag) HTML comunican al navegador cuál es la información a mostrar por pantalla, además del formato de dicha información. Es por ello que no puede definirse como un lenguaje de programación, sino como un sistema de etiquetas.
- 6. 1.3. ETIQUETAS Las etiquetas HTML son fragmentos de código que permiten crear elementos HTML, estructuras básicas del lenguaje de programación HTML en el que se escriben las páginas web porque es el que entienden los navegadores. Están encerradas entre corchetes angulares < >, y cada elemento HTML tiene una etiqueta de inicio del tipo <etiqueta> y suele terminar con una etiqueta de cierre </etiqueta>
- 8. 1.4. ATRIBUTOS • Son valores adiciones que se agregan a una etiqueta para configurarla o definir su comportamiento. • Se añaden a la etiqueta de apertura
- 9. 2. ESTRUCTURA BÁSICA DE UNA PÁGINA HTML • Cada página comienza con: < HTML > . • A continuación viene la cabecera, delimitada por < HEAD > y < /HEAD > . • Después, el comando < BODY >, que indica el comienzo del cuerpo de la página. Las instrucciones HTML se escribirán a continuación, y finalizarán con < /BODY >. • La página acabará con < /HTML > .
- 10. 2.1. EDITORES DE TEXTO PLANO Y EDITORES DE DOCUMENTOS WEB. EDITORES DE TEXTO Programas que nos pueden ayudar a la hora de construir una página web. Técnicamente es un software para editar y crear código HTML. EDITORES DE TEXTO PLANO Permiten crear y modificar archivos digitales compuestos únicamente por textos sin formato, por lo que necesitas conocer sus etiquetas y su funcionamiento. EDITORES DE DOCUMENTOS WEB El editor convierte todas las entradas directamente en HTML o CSS, por lo que puedes editar el código HTML en el diseño del sitio web correspondiente.
- 11. EJEMPLOS: Writebox es un editor de texto multinavegador. Writer es un editor de texto multinavegador. Simplenote es un editor de texto en la nube muy sencillo y muy rápido. Google Docs es un editor de texto integrado dentro de Google Drive.
- 12. 2.2. ELEMENTOS BÁSICOS DE LA ESTRUCTURA DE UN DOCUMENTO HTML DOCTYPE Es la primera etiqueta y la única que va en mayúsculas. Informa del tipo de archivo que es. <html> Se define justo después de DOCTYPE y contiene todo el documento. <head> Es la primera parte del <html>, indica la información general sobre la página web (contiene a la etiqueta <tittle>). <meta charset=“U TF-8”> Va incluido en <head> e indica el tipo de codificación de los caracteres que va a utilizar el editor (es recomendable usar la codificación UTF-8). <body> Va a continuación de <head> y es el contenido que mostrará la página.
- 13. 2.3. ELEMENTOS DE BLOQUE Y DE LÍNEA o Elementos de línea -Ocupan el ancho necesario -Solo pueden componer dos elementos de línea -Pueden ser <img><a><button> o Elementos de bloque -Ocupan todo el ancho disponible -Pueden contener otros elementos -Pueden ser <p><div><ul><ol><table>
- 15. 2.5. ATRIBUTOS GLOBALES APLICABLES A CUALQUIER ETIQUETA: ID, CLASS, STYLE, TITLE Los atributos globales son atributos comunes a todos los elementos HTML; pueden usarse en todos los elementos, aunque pueden no tener efecto en algunos. id Define un identificador único (ID) el cual debe ser único en todo el documento. class Especifica uno o más nombres de clases de un elemento (se refiere a una clase en una hoja de estilo). style Especifica una línea de estilo CSS de un elemento. tittle Especifica información adicional acerca de un elemento. Será mostrada por un globo al poner el puntero encima.
- 16. 2.6. LISTAS Y TIPOS LISTAS DESORDENADAS <ul> No tienen una numeración y no tienen un orden establecido. LISTAS ORDENADAS <ol> En las ordenadas los elemento van precedidos de una numeracion <ul> <li>Elemento 1 de la lista</li> <li>Elemento 2 de la lista</li> <li>Elemento 3 de la lista</li> </ul> <ol> <li>Elemento 1.1 de la lista</li> <li>Elemento 1.2 de la lista</li> </ol>
- 17. 2.7. ENCABEZADOS Crean títulos para diferentes secciones y subsecciones. Hay desde <h1> hasta <h6>, y necesitan un cierre.
- 18. 2.8. TABLAS Elemento de bloque que se emplea para estructurar una serie de datos alineados según un esquema de filas y columnas Se representa mediante <TABLE>, <TR>, <TH>, <TD>
- 19. 2.9. IMÁGENES •<img> elemento (en línea) básico. Los atributos que se utilizan para tratar las imágenes son: •src = “x” indica la dirección de la imagen. •border, señala los píxeles del borde. • width y height, indican el ancho y alto en píxeles. •alt, ofrece un texto en caso de que no se cargue la foto.
- 20. 2.10. ENLACES La etiqueta básica es <a> y se pueden referir tanto a páginas locales como externas. • Página en otro directorio: dir/subdir/arch • Uso de anclas: <aname="nombreAncla">Comienzo</a> • Referencia externa: <ahref="http://www.sitio.com/ancla_en#S">Texto sensible</a>
- 21. 3. PERSONALIZACIÓN DEL ESTILO: CSS 3.1. SIGNIFICADO DE CSS Y UTILIDAD Lenguaje usado para la presentación de html. Nos permite personalizar el texto, el fondo y muchos elementos más relacionados con el diseño de la página.
- 22. 3.2. FORMAS DE COLOCACIÓN DEL CÓDIGO CSS En un atributo HTML, con el atributo style permite un diseño general que afecta a todo HTM Con la etiqueta <style> Añadir un archivo independiente a partir de un archivo externo
- 23. 3.3. SELECTORES BÁSICOS SELECTORES Selectores id Selectores de tipo Selectores de clase Está definido como una lista de elementos separados por espacio, y uno de esos elementos debe coincidir exactamente con el nombre de clase dado en el selector. Buscan un elemento basado en el contenido del atributo id. El atributo ID del elemento seleccionado debe coincidir exactamente con el valor dado en el selector. Afecta a todos los elementos del mismo tipo, como puede ser los enlaces <a>.
- 24. 3.4. COLORES Para cambiar el color del texto utilizamos color Para cambiar el color del fondo background-color Podemos elegir el color por el nombre o mediante valores RGB
- 25. 3.5. TEXTO Alineación del texto (text-align): left, right, center… Subrayado (text-decoration): underline, none, overline, line-through... Transformación mayúsculas/minúsculas (text- transform): uppercase, lowercase... Tamaño del texto (front-size): px, pt, %... Tipo de fuente (font-family): serif, monospace… Cursiva (font-style): italic. Grosor del texto (font-weight): bold. Sombreado (text-shadow): -4px 2px 5px grey.
- 26. 3.6. BORDES Podemos poner un borde con border. • Border-width. Añade grosor. • Border-style. Tipo de trazo del borde. • Border-color. Define el color del borde. • Border. Establece las tres propiedades anteriores a la vez. • Border-radius. Hace referencia al radio de la curvatura de las esquinas.
- 27. 3.7. MÁRGENES Tienen dos propiedades: Margin Representa el espacio elemento- elemento, o entre borde-elemento. Padding Representa el espacio elemento- contenido.
- 28. 3.8. POSICIONAMIENTO Position:static •Por defecto. •Añade un salto de línea tras el elemento anterior. Position:relative •Mediante las propiedades top, bottom, left y right podemos cambiar su posición sin que influya al resto de elementos. Position:absolute •Esquina superior izquierda del elemento. •En una capa superior (su espacio queda libre). Position:margin-top Position:margin-left •Permiten mover los elementos. •Si le damos valores dejan de tener como referencia el elemento anterior y les damos una posición referente a toda la página. Position:fixed •Similar a absolute. •Siempre visible (barras de herramientas).
- 29. 3.9. IMAGEN DE FONDO • Background-image. Su valor es la ruta a la imagen desde el directorio donde se encuentra el archivo CSS. • Background-position. Si la imagen es mas pequeña que el elemento, esta propiedad establece la alineacion vertical y horizontal de la misma. • Background-repeat. Si la imgagen es mas pequeña que el elemento, se repetirá por defecto, horizontal y verticalmente.
- 30. FIN