Lenguaje html y css
- 1. LENGUAJE HTML Y CSS Trabajo realizado por: Ángel Ruescas Selva y Alberto Pérez Díaz
- 2. GUIÓN 1.0 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.0 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 2.7 Encabezados 2.8 Tablas 2.9 Imágenes 2.9 Enlaces 3.0 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 Tamaño 3.7 Bordes 3.8 Márgenes 3.9 Posicionamiento 3.10 Imagen de fondo
- 3. 1.1 SIGNIFICADO DE HTML Y UTILIDAD HTML significa lenguaje de marca de hipertexto Es un conjunto de etiquetas predefinidas que el navegador web interpreta a la hora de construir una pagina Carece de las estructuras de control y la toma de decisiones 1.2 ¿Por qué HTML no es un lenguaje de programación?
- 4. 1.3 ETIQUETAS Definida por los simbolos < y > , en minusculas. Las etiquetas iternas deben incluir el simbolo / ,precedido de un espacio. Párrafo: <p> contenido del parrafo </p> Salto de linea: <br/> Párrafo con contenido en negrita: <p> Texto normal y <strong> texto en negrita. </strong></p>
- 5. 1.4 Atributos Son valores adicionales que se agregan a una etiqueta.Existen atributos propios y exclusivos Los atributos se añaden a la etiqueta de apertura , nunca a la de cierre <img> insertar una imagen Src archivo que contiene la imagen Alt mostrar un texto alternativo <img src=“imagen.jpg”alt=“Imagen de prueba” />
- 6. 2. ESTRUCTURA BÁSICA DE UNA PÁGINA HTML 2.1EDITORES DE TEXTO PLANO Y EDITORES DE DOCUMENTOS WEB Texto plano: Formato de contenido que solo incluye caracteres imprimibles Para editarlos se usan procesadores de texto Convenientemente que resalte el HTML destacando etiquetas y atributos frente al texto
- 7. 2.2 Elementos básicos de la estructura de un documento HTML DOCTYPE: informa al navegador del tipo de archivo que se trata.Se escribe en mayúsculas <html>:elemento raíz que contiene todo el documento <head>:aparece en el interior de <html>, dentro de el se incluye información general sobre la pagina web <meta charset=“UTF-8” />: le indica al navegador el tipo de codificación de los caracteres <body>:va a continuación de <head>
- 8. 2.3 Elementos de bloque Ocupan todo el ancho disponible Los elementos tras un elemento de bloque se situan debajo de este Pueden contener otros elementos de bloque y en linea Ejemplos: <p> <div> <ul> <table>
- 9. 2.3 Elementos de línea Ocupan solo el ancho necesario Los elementos en linea se situan juntos hasta ocupar el ancho posible Pueden contener otros elementos en linea texto e imágenes Ejemplos: <img> <a> <button> <strong>
- 10. 2.4 Etiquetas básicas División(<div>):permite dividir la pagina en secciones Párrafo(<p>):solo puede englobar elementos en línea Agrupar elementos en línea(<spam>): agrupa textos y otros elementos en línea Subíndice(<u>):el texto seleccionado aparece en un menor tamaño y desplazado hacia abajo Salto de linea(<br>):fuerza un salto de linea en el texto
- 11. 2.5 Atributos globales Son aplicables a cualquier etiqueta No hay que incluirlos todos sino solo los necesarios para modificar el comportamiento de la etiqueta Se añaden solo a la de apertura nunca a la de cierre
- 12. 2.6 Listas y tipos Engloba un conjunto de elementos, existen dos tipos: Los elementos que componen las listas se representa con la etiqueta <li> Listas desordenadas: no mantienen ningún orden concreto Listas ordenadas: si establece un orden concreto. Se representa con la etiqueta <ol>, admite varios atributos como reversed,start,type. Lista anidada: son listas internas en el interior de otra lista principal, se tienen que cerrar con la etiqueta <li>
- 13. 2.7 Encabezados Parrafos especiales para la creacion de titulos Definidos por <h1> y <h2> <h1> para el encabezado de mayor nivel y <h2> sera un poco mas peuqeño
- 14. 2.8 Tablas Elemento de bloque que se emplea para estructurar una serie de datos alineados según un esquema Sus filas se representan con : <tr> y estas solo conceden celas o <td> Todas las filas tienen el mismo numero de celdas Se utiliza el atributo border para la separacion de las celdas
- 15. 2.9 Imágenes Son elementos en linea Se representan con la etiqueta <img> sin cierre En caso de ser una imagen externa: Imagen en el subdirectorio img: img/imagen.jpg Imagen en el directorio anterior: ../imagen.jpg Imagen en un servidor externo: http://dominio.com/ruta/imagen.jpg Se utilizara width y height para establecer el ancho y el alto en pixeles
- 16. 2.10 Enlaces Son vinculos a otras paginas locales o externas La etiqueta que utliza es <a> y engloba a un texto o una imagen como enlace a una ruta especifica Sus atributos son href para incluir una ruta, target y _blank para indicar al navegador que abra un enlace
- 17. 3.1 Significado de CSS y utilidad • Lenguaje utilizado para definir el modo de presentacion de HTML • Permite separar la estructura de un documento su diseño o su presentacion
- 18. 3.2 Formas de colocación del código CSS Existen 3 formas de vincular el codigo CSS al HTML El atributo HTML , con el atributo style: Se puede incluir en cualquier etiqueta Las instrucciones se separan con el punto y coma Con la etiquta <style>: Permite establecer un diseño general Se suele incluir en la cabecera En un archivo independiente: Se situa en un directorio diferente al del HTML
- 19. 3.3 SELECTORES BÁSICOS Selectores por tipo:Se escribe solo el nombre de la etiqueta HTML y afectaran a parrafos y enlaces Selectores de clase:Su nombre debe ir precedido de un punto (.) y mediante el atributo class sus modificaciones afectaran a todos los elementos Selectores de id:Corresponde al nombre del identificador de un elemento con el atributo id
- 20. 3.4 Colores Para cambiar el color es con la propiedad color mientras que para el fondo es con background- color. Los valores del color se definde en el formato (RGB) Proporcion del color en hexadecimal:#FF0000 Proporcion del RGB en decimales: rgb(255,0,0) Proporcion del RGB en porcentajes rgb(100%,0%.0%)
- 21. 3.5 Texto • Alineacion del texto:Los valores mas comunes son left(a la izquierda) right(a la derecha)center(en el centro)y justify(justificada) • Subrayado: Underline-none(quita la propiedad del subrayado) (encima del texto)line-through(tachado) • Text-transform: uppercase(mayuscula)lowercase(minuscula)capital(la primera en mayuscula) • Tamaño del texto:px(pixel)pt(puntos)%(por ciento) • Tipo de fuente:seriff o monospace(aplican la fuente por defecto) • Cursiva:italic(texto en cursiva) y normal(retira la propiedad anterior) Grosor del texto:bold(transforma el texto a negrita) y normal (la elimina) • Sombreado:El primer numero al valor de la derecha y el segundo a la izquierda
- 22. 3.6 Tamaño Por defecto ocupan todo el ancho disponible La anchura y la altura se pueden establecer con el CSS Display :block.se comporta como un elmento divisor(<div>) Display:inline.se comporta como un elemento en linea <div> Display: inline-block.se establece como un bloque pero se comporta como un elemento en linea El tamaño viene definido por el ancho(widht) y alto(height)
- 23. 3.7 Bordes border-witch:Añade grosor al borde en pixeles border stylus:Se dibuja el borde con solido(linea seguida)clashed (dicontinua) border color:define el color del borde border:Permite establecer las 3 anteriores a la vez Border radius:Hace referencia al radio de curvatura
- 24. 3.8 MÁRGENES Dispone de dos propiedades: Margin:es el espacio entre un elemento y los elementos que lo rodean Padding: es el espacio entre un elemento y su contenido Se pueden utilizar los sufijos: -left, -right, -top y -bottom
- 25. 3.9 Posicionamiento Static:Realiza un salto de linea para incorporar un elemento Relative:Ocupa lo mismo que si su valor fuera el de static Absolute:Se situa en la esquina superior izquierda TopPermite mover un elemento Fixed:Es similar al absoluto
- 26. 3.10 IMAGEN DE FONDO Se utilizan 3 propiedades: Background-image: su valor será la ruta a la imagen desde el directorio de donde se encuentra el archivo CSS Background-position:si la imagen es mas peqeuña se establece alineacion vertical y horizontal ;para la alineacion horizontal;left(izquierda),center(centro) o right(derecha),y la alineación vertical;top(arriba),center(centro) o bottom(abajo) Background-repeat:si la imagen es mas pequeña se repetira el paso anterior hasta que sea igual al espacio disponible; modificable con los valores: no-repeat, repeat-x( eje horizontal) o repeat-y(eje vertical)