* The preview only shows a few pages of manuals at random. You can get the complete content by filling out the form below.
The preview is currently being created... Please pause for a moment!
Description
Ciclo 3: Desarrollo de Software
Material de Apoyo Html y CSS
Programa Ciencias de la Computación e Inteligencia Artificial Escuela de Ciencias Exactas e Ingeniería Universidad Sergio Arboleda Bogotá
H T ML
HyperText Markup Language
¿Qué es y Para qué sirve HTML? HTML es un lenguaje de basado en etiquetas para crear o diseñar la estructura de un sitio web. También define la información y el contenido que el usuario observa en pantalla.
Estructura de un Documento HTML Las extensiones de estos archivos son .html Podemos comparar la estructura o sintaxis de HTML, como un sandwich que tiene dos pedazos de pan, ya que un documento HTML tiene etiquetas de apertura y cierre
Elemento Es un elemento contenedor para los elementos , , al interior de la sección .
CSS en archivo externo Se crea un documento independiente guardado con la extensión .css y será referenciado en el “index.html” dentro de la etiqueta
Documento HTML
Hoja de Estilo CSS
Sintaxis de CSS CSS se compone de reglas que el navegador interpreta y luego a los correspondientes elementos del documento.
Comentarios en CSS Un comentario es un texto que no se mostrará en pantalla y que nos permite documentar nuestro proyecto, agregar notas o descripciones. Utilizamos la sintaxis: /* Contenido del comentario */
PROPIEDADES
Propiedad Background Esta propiedad permite agregar un fondo a los elementos. Algunas propiedades de background son: background-color
Especifica el color de fondo de un elemento. Los colores se pueden especificar como: • Nombre del color en inglés : “red”, “blue”, “gray” , etc • En valor hexadecimal : “FF0000” , “FFF000”, “000000”, etc • En valor RGB como : “rgb(255,0,0)”, “rgb(255, 87, 51), etc
background-image
Permite agregar una imagen como fondo. Por defecto, la imagen se repite para cubrir el elemento completo.
background-repeat
Especifica como se van a repetir las imágenes. Las img se pueden repetir de forma horizontal o de forma vertical. -repeat-x : Repite la imagen de forma horizontal -repeat-y : Repite la imagen de forma vertical
background-attachment
Establece se una imagen permanece fija o se desplaza con el resto de la página.
Propiedad Border Esta propiedad permite personalizar los bordes de los elementos HTML. Se debe tener un orden para poder utilizar esta propiedad, especificando el tamaño, el estilo y el color del borde.
Código HTML
Código CSS
Resultado
Propiedad Border-width Permite especificar el ancho del borde, teniendo en cuenta el borde superior, borde derecho, borde inferior y borde izquierdo
Propiedad Border-style El borde por defecto no tiene ningún estilo. Algunos de los estilos soportados para el borde son : dotted, double, Groove, inset, hidden, dashed, etc.
Propiedad Border-color Esta propiedad permite especificar un color a uno o los cuatro bordes de un elemento. El color puede ser especificado en valor HEX, RGB, HSL o con el nombre del color.
Margins La propiedad margin es utilizada para crear espacios alrededor de los elementos. Sus mismas sub-propiedades son: margin-top, margin-bottom, margin-right, margin-left. Estos a su vez pueden tener los siguientes valores: • auto – el navegador se encarga de calcular la margen. • length – especifica una margen ex px, pt, cm, etc • % - especifica la margen en % del ancho del elemento contenedor. • Inherit – especifica que la margen debe ser heredada del elemento padre.
Padding Se utiliza para crear espacio alrededor del contenido de un elemento, dentro de los bordes definidos.
También, utiliza sub-propiedades para cada lado del elemento como • padding-top • padding-right • padding-bottom • padding-left
Padding Sus sub-propiedades (padding-top, padding-bottom….) , utilizan ciertos valores. • length – especifica una margen ex px, pt, cm, etc • % - especifica la margen en % del ancho del elemento contenedor. • Inherit – especifica que la margen debe ser heredada del elemento padre • No son permitidos los valores negativos.
Fonts La fuente o tipografía en CSS se especifica con la propiedad font-family. Existen 5 familias de fuentes genéricas : • Serif : Tienen un pequeño trazo en los bordes de cada letra, dando formalidad y elegancia. • Sans-serif fonts: Crean un aspecto moderno y minimalista. • Monospace fonts: Todas las letras tiene el mismo ancho fijo creando una apariencia uniforme. • Cursive : fuentes que imitan la escritura humana. • Fantasy: fuentes decorativas
Fonts Serif
Sans-serif
Monospace
Cursive Fantasy
Times New Roman Georgia Garamond Arial Verdana Helvetica Courier New Lucida Console Monaco Brush Script M7 Lucida Handwriting Copperplate Papyrus
Modelo de Caja (Box Model)
Box Model El término “Box Model” se utiliza cuando se habla de diseño y maquetación de un sitio web. Este consiste en márgenes (margin), bordes (border), y relleno (padding).
Box Model Cada elemento de una página es visto como una caja. El “Modelo de Caja” permite calcular el ancho y alto actual de los elementos.