Estructura General y Estilos Propios
|
|
|
- Josefa Coronel Padilla
- hace 5 años
- Vistas:
Transcripción
1 Estructura General y Estilos Propios En esta práctica se creará una estructura general para un sitio web utilizando lo aprendido en el manejo del Grid de Bootstrap además de comenzar a utilizar estilos propios para los elementos y combinarlos con los proporcionados por Bootstrap. Estructura General del Sitio En este ejemplo se realizará un sitio Web con la siguiente estructura general, conforme se avance, se irán definiendo elementos particulares de cada página y de cada bloque creado. Banner del Sitio Menú de Navegación Cuerpo Principal Barra Lateral Footer del Sitio Se comenzará un nuevo proyecto con los archivos de Bootstrap para recordar el proceso de creación de la estructura de directorios y de instalación de los archivos de Bootstrap y se crearán cuatro filas para: header, menú, cuerpo y footer. <!DOCTYPE html> <html lang="es"> <head> <meta charset = "utf-8"/> <meta keywords = "estructura básica, estructura general"/> <meta description = "Sitio con Estructura General"/> <title>sitio con Estructura General</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/bootstrap.min.js"></script> <script src="js/jquery min.js"></script> </head> <body> <section class="container"> <header class="row"> <nav class="row"> </nav> <section class="row"> <footer class="row"> </body> </html> 1
2 De acuerdo a la estructura general del sitio, el banner (header) tendrá solo un bloque de 12 columnas, el menú también será de 12 columnas, el cuerpo principal estará formado por dos bloques, se tendrá uno de 9 y otro de 3 y finalmente el footer será de 12 columnas. De esta manera, dentro de <body> </body> se tiene: <section class="container"> <header class="row"> <section class="col-lg-12 bg-info"> El header <nav class="row"> <section class="col-lg-12 bg-success"> El Menú </nav> <section class="row"> <section class="col-lg-9 bg-primary"> Bloque Izquierdo <section class="col-lg-3 bg-warning"> <footer class="row"> <section class="col-lg-12 bg-danger"> El footer Aplicando Estilos Propios Bootstrap tiene varios estilos ya predefinidos, pero también es posible crear estilos propios que se combinen con los ya establecidos. En esta práctica se crearán algunos estilos para la estructura del sitio general, es recomendable crear uno o varios archivos css para los estilos propios, éstos pueden colocarse en el directorio css creado por Bootstrap, pero para mayor claridad, se creará un directorio para los estilos propios, éste directorio se llamará css_propios. Se comenzará creando un archivo llamado general.css para la estructura general del sitio web, éste se referencia de la misma manera que cualquier otro archivo de estilos en el documento html. 2
3 <link rel="stylesheet" href="css_propios/general.css"> Primero se creará un estilo para cualquier elemento que no tenga un estilo propio *{ color:#000000; Se quitará que las ligas queden marcadas después de ser visitadas a:focus{ outline:0px; Se le dará un color de fondo al sitio general <body> body{ background-color:#eeeeee; Color de Fondo Propio Bootstrap tiene varios colores de fondo ya establecidos, ahora se le cambiará color a los elementos del sitio. Para esto, se trabajará con los elementos columna o fila, dependiendo el alcance deseado, que se han declarado con Bootstrap, si bien ya se les asignó una clase al declararlos, se les puede asignar otra: <header class="row banner"> El header En este caso se le agrega la clase banner a la sección que representa el encabezado, aquí no se utiliza el elemento <header> para referirse al elemento de manera directa, ya que éste se declaró como la fila en la que estará el banner de 12 columnas utilizando la clase row. Ahora en la hoja de estilos propia, se puede indicar el color de fondo:.banner{ Con esto cambia el color de fondo de lo que sería el banner, no es necesario eliminar la propiedad que indicaba el color de fondo de Bootstrap, pero por orden del código, se hará: 3
4 <header class="row banner"> El header Otra opción, es por ejemplo, crear un estilo con un color de fondo establecido, esto sería útil en caso de que se quiera utilizar varias veces el mismo color de fondo: <nav class="row"> <section class="col-lg-12 bg-fondo_guinda"> El Menú </nav> Si se quiere aplicar este mismo color de fondo al footer, solo se debe indicar que también se tendrá disponible esa clase: <footer class="row"> <section class="col-lg-12 bg-fondo_guinda"> El footer No es necesario agregar el prefijo bg para indicar que se trata del fondo, pero sirve como apoyo para dar claridad al código. Borde También es posible agregar un borde a los elementos utilizando un estilo propio, por ejemplo, se le dará un borde a lo que es el cuerpo principal. <section class="row cuerpo"> El estilo sería:.cuerpo{ border: 1px solid #640923; También se le dará un borde al bloque izquierdo, pero solamente en la parte izquierda e inferior: <section class="col-lg-3 bg-warning bloque_lateral"> 4
5 El estilo es:.bloque_lateral{ border-left: 1px solid #640923; border-bottom: 1px solid #640923; De ésta manera se pueden utilizar estilos propios, así la estructura general a utilizar para el sitio quedaría de la siguiente manera: <section class="container"> <header class="row banner bg-fondo_guinda"> El header <nav class="row menu_sitio bg-fondo_guinda"> El Menú </nav> <section class="row cuerpo"> <section class="col-lg-9 bloque_izquierdo"> Bloque Izquierdo <section class="col-lg-3 bg-warning bloque_lateral"> <footer class="row footer_sitio bg-fondo_guinda"> El footer Mientras que los estilos quedan de la siguiente manera:.banner{ height:90px; margin-bottom:5px; 5
6 .menu_sitio{ height:70px; margin-bottom:5px;.cuerpo{ border: 1px solid #640923; margin-bottom:5px; height:400px;.bloque_izquierdo{ height:400px;.bloque_lateral{ border: 1px solid #640923; border-radius:5px; height:300px; margin-top:5px; margin-bottom:2px;.footer_sitio{ height:70px;.bg-fondo_guinda{ background-color:#640923; En este momento el borde del contenedor lateral se encima con el del cuerpo principal, al agregar un margen, las columnas se desbordan por el tamaño establecido, pero se puede agregar la propiedad padding al cuerpo para eliminar este problema:.cuerpo{ border: 1px solid #640923; margin-bottom:5px; height:400px; padding-right:5px; 6
7 Creando otro Estilo de Cuerpo Tomando como base el cuerpo anterior, se creará uno nuevo en donde no parezca que los elementos se encuentran anidados. <section class="row cuerpo_2"> <section class="col-lg-9 bloque_izqueirdo_2"> Bloque Izquierdo <section class="col-lg-3 bloque_lateral_2"> Cómo se observa, la estructura es la misma, pero los estilos se cambiarán para que no parezca que se tienen elementos anidados. Los estilos correspondientes son:.cuerpo_2{ margin-bottom:5px; height:auto; margin-bottom:10px; /*Estilo del bloque derecho*/.bloque_izquierdo_2{ height:400px; /*Estilo del bloque lateral*/.bloque_lateral_2{ height:300px; margin-bottom:2px; border-left: 5px solid #EEEEEE; Como no se tiene manera de poner un espacio entre columnas, se coloca un borde que sirve como separación, aunque los elementos siguen siendo independientes. Quitando padding Al agregar otro elemento dentro de un contenedor, automáticamente se le asigna un padding: 7
8 <section class="row cuerpo_2"> <section class="col-lg-9 bloque_izquierdo_2"> <div class="col-lg-12"> Bloque Izquierdo </div> <section class="col-lg-3 bloque_lateral_2"> <div class="col-lg-12"> </div> El padding aumentó reduciendo el espacio para el contenido, por lo que es necesario eleiminarlo. Para esto se creará una clase y después se aplicará al contenedor..sin_padding{ padding-right:0px; padding-left:0px; Al aplicarla a cada contenedor: <div class="col-lg-12 sin_padding"> Bloque Izquierdo </div> <div class="col-lg-12 sin_padding"> </div> Agregando Información al Footer Se desea colocar información en el Footer, el cual solamente tiene un elemento de doce columnas, se desea colocar un elemento superior y debajo tres elementos. Se utilizará el elemento de 12 puntos y se crearán tres contenedores más, cada uno de 4 columnas. <footer class="row footer_sitio bg-fondo_guinda"> INFORMACION CENTRADA <section class="col-lg-4"> BLOQUE FOOTER A 8
9 <section class="col-lg-4"> BLOQUE FOOTER B <section class="col-lg-4"> BLOQUE FOOTER C Una vez creados, se les asignará una clase específica para personalizar sus estilos. <footer class="row footer_sitio bg-fondo_guinda"> <section class="col-lg-12 titulo_footer"> INFORMACION CENTRADA <section class="col-lg-4 bloque_footer_a"> BLOQUE FOOTER A <section class="col-lg-4 bloque_footer_a"> BLOQUE FOOTER B <section class="col-lg-4 bloque_footer_a"> BLOQUE FOOTER C En este caso se tiene la misma clase para los tres elementos (bloque_footer_a) ya que se quiere que se vean igual, pero podría crearse una clase para cada uno de ellos. Los estilos para éstos elementos son:.titulo_footer{ color:#ffffff; text-align:center; padding-top:10px;.bloque_footer_a{ color:#ffffff; text-align:center; padding-top:10px; Agregando Información al Banner En el banner se tendrá una imagen a la izquierda, mientras que a la derecha se desean dos elementos, uno arriba del otro. Para esto, se crearán dos contenedores, uno de 3 y otro de 9 con la siguiente estructura: 9
10 Por el momento solo se cuenta con un contenedor de 12 columnas que es el banner completo. <header class="row banner bg-fondo_guinda"> El header La nueva estructura es: <header class="row banner bg-fondo_guinda"> <section class="col-lg-3 bg-success contenedor_imagen"> <figure> <img src="imgs/uamlogo.png"/> </figure> <section class="col-lg-9 contenedor_info_header"> <section class="col-lg-12 bg-info bloque_header_a"> TEXTO_SUPERIOR_BANNER <section class="col-lg-12 bg-info bloque_header_b"> TEXTO_INFERIOR_BANNER La etiqueta <figure> solo indica que en esa posición se tendrá una imagen, no crea ningún formato o comportamiento especial. Al igual que con el footer, se le agregan nombres especiales a cada uno de los contenedores, en este caso cada una de las dos secciones tiene un nombre distinto por si se desean estilos diferentes. También se agregará algo de contenido a los dos elementos: 10
11 <section class="col-lg-9 contenedor_info_header"> <section class="col-lg-12 bg-info bloque_header_a"> <h1>trabajando con Bootstrap</h1> <section class="col-lg-12 bg-info bloque_header_b"> <h2>creando la Primera Plantilla</h2> Al colocar las etiquetas <h1> y <h2>, se desborda por el estilo que tienen predefinido para tamaño y padding en los estilos de Bootstrap, por lo que será necesario sobre escribirlos con un estilo propio. Los estilos para los elementos del header son:.contenedor_imagen{ margin-top:5px; text-align:center;.contenedor_imagen figure img{ height:80px;.contenedor_info_header{ margin-top:10px;.bloque_header_a{ margin-bottom:10px;.bloque_header_a h1{ font-size:20px; margin:2px; color:#ffffff;.bloque_header_b{ margin-bottom:10px;.bloque_header_b h2{ text-align:right; font-size:16px; font-style:italic; color:#ffffff; Finalmente solo se quitan las clases que le daban un fondo a los contenedores (bg-info y bg-success) y el encabezado del sitio queda listo. 11
Estructura General del Sitio y Estilos
Estructura General del Sitio y Estilos Aunque los sitios pueden ser muy diversos, la mayoría tiene una estructura general en la que se pueden encontrar varias secciones principales: Cabecera para el logo,
Personalizando Plantillas
Personalizando Plantillas Ya que se tiene la estructura general del sitio web, se comienza a trabajar con la apariencia de cada una de las plantillas. Página Principal (index.html) La página principal
Se utilizará una plantilla de prueba y posteriormente se integrará un elemento de navegación con el sitio.
Navegación y Menú En esta práctica se utilizarán varios de los menús y elementos de navegación que utiliza Bootstrap además de modificar los estilos por defecto que ofrece. Preparando la Plantilla Se utilizará
Manejo de Textos de Imágenes
Manejo de Textos de Imágenes En ésta práctica se manejará la combinación de textos e imágenes utilizando el framework de Bootstrap. Se continuará trabajando con el proyecto de otras prácticas, pero se
Comportamiento Responsivo con Bootstrap
Comportamiento Responsivo con Bootstrap Bootstrap ofrece como parte de sus características un comportamiento responsivo que ofrece buenos resultados, sin embargo en ocasiones es necesario realizar una
Un manejo más avanzado del comportamiento de elementos se realiza a través de las media queries.
Media Queries Un manejo más avanzado del comportamiento de elementos se realiza a través de las media queries. Las media queries son sentencias de CSS que se aplican al diseño, pero solo si se cumplen
En la carpeta css, crear una hoja de estilo para cada una de las plantillas, en este caso:
Estilos Personalizados Una vez que se han definido las plantillas, se pueden empezar a crear hojas de estilos para cada una de ellas, esto facilita el modificarlas de manera personalizada sin afectar al
Proyectos Terminales y Descargas de Software
Proyectos Terminales y Descargas de Software En esta práctica se realizará el diseño de las plantillas de Proyectos Terminales y de Descargas de Software. Proyectos Terminales Se trabajará con la plantilla
Una lista estará formada por las etiquetas <ul> u <ol> además de <li> para indicar cada uno de los elementos de la lista.
Manejo de Listas En ésta práctica se revisarán varios de los estilos por defecto de Bootstrap, además de generar listas propias y dar estilo tanto a las propias como a las que usan el framework. Se comenzará
En que nos ayuda las hojas de estilo cascada (css)?
HECHO POR CREACIONES Y DESARROLLO WEB COSTA RICA, CUALQUIER MACRO CON GUSTO ESTAMOS PARA AYUDARLE, LLAMENOS Y CON GUSTO LE ATENDEREMOS TEL 8364-3733 // 8348-9439 En que nos ayuda las hojas de estilo cascada
Conceptos Teóricos de HTML5 (material extra adicional libro):
Temario de Examen Unidad I Materia: Informática Catedráticos: Víctor Aquino/Débora Santizo Temas: Uso del programa Sublime Text Forma Correcta de guardar archivos html y css (.html y.css) Uso de la etiquetas
En esta práctica se utilizarán varias de las tablas que ofrece Bootstrap.
Tablas en Bootstrap En esta práctica se utilizarán varias de las tablas que ofrece Bootstrap. Se comenzará copiando el archivo index.html al directorio plantillas y renombrándolo como tablas.html, se debe
Elementos de Control en Bootstrap
Elementos de Control en Bootstrap En esta práctica se utilizarán los elementos de control que ofrece Bootstrap. Se comenzará copiando el archivo index.html al directorio plantillas y renombrándolo como
DISEÑO WEB CSS CON DOS, TRES O MÁS COLUMNAS CON FLOAT. WIDTH EN PORCENTAJES NO FUNCIONA? TIPOS DE ANCHO. EJEMPLOS. (CU01036D)
APRENDERAPROGRAMAR.COM DISEÑO WEB CSS CON DOS, TRES O MÁS COLUMNAS CON FLOAT. WIDTH EN PORCENTAJES NO FUNCIONA? TIPOS DE ANCHO. EJEMPLOS. (CU01036D) Sección: Cursos Categoría: Tutorial básico del programador
CSS. Añadir estilos a las páginas web
CSS Añadir estilos a las páginas web Qué es CSS? CSS (Cascade Style Sheets) es un tipo de archivo que permite añadir estilos a páginas web (colores de texto, bordes, separaciones, etc.) Son archivos de
LABORATORIO 2. I. Desarrollo
UNIVERSIDAD CAPITÁN GENERAL GERARDO BARRIOS FACULTAD DE CIENCIA Y TECNOLOGÍA LABORATORIO 2 Nombre : Repaso HTML y CSS parte II Ciclo : II 2012 Asignatura : Web y Comercio Electrónico II Catedrático : Ing.
HOJAS DE ESTILO PORTAL PISTA LOCAL PÁGINA DE INICIO
HOJAS DE ESTILO PORTAL PISTA LOCAL PÁGINA DE INICIO PORTADA Las hojas de estilo referenciadas en la portada (http://pistalocal.pista-femp.org.es/index.php) son:
Roatan Bilingual School
Roatan Bilingual School Evaluación final de Informática Grado: Noveno Valor: 15% Primer paso: Crear una carpeta con su nombre en documentos de la computadora. Segundo paso: Copia y pega el código en el
Ing. Pedro G. Castañeda Sánchez Página
GUIA CSS No 1 Es un lenguaje de programación de páginas web, que incluye muchos beneficios, con este lenguaje se puede poner a funcionar toda la creatividad del programador para dar un mejor entorno en
CSS Cascading Style Sheets Rellenos y Márgenes Antes de empezar...
Rellenos y Márgenes Antes de empezar... margin tienen una pequeña particularidad que suele ser el origen de muchos quebraderos de cabeza: Los márgenes exterior horizontales de cajas contiguas que se toque
Ejercicios - Introducción al desarrollo web para móviles
Ejercicios - Introducción al desarrollo web para móviles Índice 1 Ejercicio 1 - Tablas...2 2 Ejercicio 2 - Cajas Div... 2 3 Ejercicio 3 - Terminando la Web de ejemplo...3 En esta primera sesión vamos a
QUÉ ES UNA HOJA DE ESTILOS? Una hoja de estilo en cascada (CSS) es un conjunto de reglas en las que definimos el formato que va a tomar un
QUÉ ES UNA HOJA DE ESTILOS? Una hoja de estilo en cascada (CSS) es un conjunto de reglas en las que definimos el formato que va a tomar un determinado elemento de una página web. Siglas CCS significa "Cascading
SUBRAYAR CON MARCATEXTO EL PARRAFO DONDE ENCONTRÓ LA PREGUNTA LAS RESPUESTAS LAS ENCUENTRAS DE LA PAG 26 A LA 96 DEBE COPIAR PREGUNTA Y RESPUESTA
TAREA NO 1 INTRODUCCIÓN A HTML5 Y CSS3 PRIMERO BÁSICO PROF. VICTOR AQUINO URRUTIA CURSO: TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN (TICS) CICLO: 2017 ------------------------------------------------------------------------------------------
EL MODELO DE CAJA CSS
EL MODELO DE CAJA CSS Sesión 10 By Ing. David Gil LA ETIQUETA HTML La etiqueta define una división o una sección en un documento HTML. La etiqueta se utiliza para agrupar bloques
Hojas de estilo en cascada
Hojas de estilo en cascada Es la forma como indicamos el diseño, colores, tamaños, etc de un sitio web, separado de la programación y la estructura de este. HTML Estructura, músculos, huesos web CSS El
Maquetación con estilos
Objetivos específicos Maquetación con estilos Aplicar estilos relacionados con tamaños, bordes y márgenes. Aplicar estilos relacionados con el posicionamiento de los objetos. Contenidos Estilos de caja.
Z-INDEX CSS NO FUNCIONA? CONTROL DE SUPERPOSICIÓN DE ELEMENTOS COMO CAPAS, DIV O IMÁGENES (CU01039D)
APRENDERAPROGRAMAR.COM Z-INDEX CSS NO FUNCIONA? CONTROL DE SUPERPOSICIÓN DE ELEMENTOS COMO CAPAS, DIV O IMÁGENES (CU01039D) Sección: Cursos Categoría: Tutorial básico del programador web: CSS desde cero
Modelo de Cajas. Maquetación Web con HTML 5 y CSS 3. Ing. Rasjido Jose UNPA - UACO
Modelo de Cajas Maquetación Web con HTML 5 y CSS 3 Ing. Rasjido Jose UNPA - UACO AGENDA Propiedades de las cajas Tipos de cajas Esquemas de posicionamiento Bibliografía 2 Propiedades de las cajas Cada
Diseño web. Fundamentos de CSS. Informática 4º ESO
Diseño web Fundamentos de CSS Informática 4º ESO Cascading Style Sheets HTML está bastante limitado a la hora de dar formato a las páginas web HTML fue inventado por científicos Énfasis en el contenido
Taller de Programación II J2EE
ᄎ INACAP Universidad Tecnológica de Chile Sede Santiago Centro Taller de Programación II J2EE Tema 02 Cascading Style Sheets (CSS) Ing. Manuel López R. Qué es CSS? La tecnología CSS (Cascading Style Sheets
Presentación de la formación y del formador 01:51
El vídeo-training de calidad HTML5 Y CSS3 Las tecnologías que cambiarán internet Índice del curso INTRODUCCIÓN HTMLY CSS3: HISTORIA, PRESENTE Y FUTURO Presentación de la formación y del formador 01:51
Se utiliza para meter los elementos que se repiten en cada página (logo con el sitio, menú de navegación principal, barra de utilidades, etc.).
Maquetación con CSS Elementos principales Elemento body El elemento body será el que definirá todos los aspectos de presentación generales, como la familia de la fuente, color de fondo y primer plano,
Técnicas para la enseñanza de. Desarrollo Web. M is notas de CSS. Liliana Gutiérrez Flores. Enero de 2016
Técnicas para la enseñanza de Desarrollo Web M is notas de CSS. Liliana Gutiérrez Flores Enero de 2016 En el presente documento se presenta el proyecto de creación de una página Web con notas de CSS. Se
CONCEPTO FLOAT CSS. NONE, LEFT, RIGHT Y CENTRAR?. COLOCAR TEXTO ALREDEDOR DE UNA IMAGEN. EJEMPLOS DE POSICIONAMIENTO FLOTANTE (CU01034D)
APRENDERAPROGRAMAR.COM CONCEPTO FLOAT CSS. NONE, LEFT, RIGHT Y CENTRAR?. COLOCAR TEXTO ALREDEDOR DE UNA IMAGEN. EJEMPLOS DE POSICIONAMIENTO FLOTANTE (CU01034D) Sección: Cursos Categoría: Tutorial básico
CSS Programación de Web Estático
UNIVERSIDAD AUTÓNOMA METROPOLITANA UNIDAD CUAJIMALPA CSS Programación de Web Estático Propiedades CSS para listas Las propiedades CSS de listas permiten hacer lo siguiente: - Colocar diferentes marcadores
Tabla de contenidos Introducción...3 Objetivos...3 Links de utilidad...3 CodeIgniter...3 Bootstrap...3 Servidor Local...3 Editor de Texto...
Tabla de contenidos Introducción...3 Objetivos...3 Links de utilidad...3 CodeIgniter...3 Bootstrap...3 Servidor Local...3 Editor de Texto...3 Parte 1 Conociendo Bootstrap...4 Estructura básica de nuestro
Índice general. Pág. N. 1. Capítulo 1. Capítulo 2
Pág. N. 1 Índice general Capítulo 1 Introducción al diseño web con HTML 5 y CSS3 1.1 Las versiones del HTML 1.2 Los navegadores y sus diferencias 1.2.1 Tiempo de carga 1.2.2 Entorno de trabajo 1.2.3 Ventanas
MATERIALES Leer previamente la Guía número 3 Elementos proporcionados por docente para realización de asignación.
Tema: Hipervínculos CONTENIDOS Qué es un hipervínculo? Referencia absoluta y referencia relativa Destino _blank y _self Formato y tipos de los enlaces Div y CSS OBJETIVOS ESPECÍFICOS Que el estudiante
Examen de CSS - Cuestionario
Examen de CSS - Cuestionario Qué propiedad de CSS se emplea para definir el espacio entre caracteres? word-spacing white-space letter-spacing Las anteriores respuestas no son correctas Cómo se hace en
Estructura básica de un documento de HTML5
Estructura básica de un documento de HTML5 Todos tenemos una estructura básica al realizar un sitio web y en HTML5 no hay excepción, lo que es muy fácil de hacer ya que HTML5 tiende a ser una estructura
ESTRUCTURA DEL CÓDIGO HTML5
ESTRUCTURA DEL CÓDIGO HTML5 1. DocType Es la etiqueta que se escribe en la primera línea del código. Permite declarar el tipo de documento. Es decir, el doctype indica que el documento está escrito siguiendo
<DOCTYPE HTML PUBLIC> <HTML> <HEAD>... </HEAD> <FRAMESET>... </FRAMESET> </HTML>
... ... Marcos en HTML
CSS. Página 1/16. Atributo id #texto1 {font-size: 20px;} <p id= texto1 >Texto</p> p:nth-child(2) { background: # }
CSS. Página 1/16 Introducción CSS p, span{ color: #FF0000; font-size:24px; Pseudoclases
La arquitectura de LIM
La arquitectura de LIM LIM utiliza una combinación de HTML y JSON para almacenar la información que permite generar los libros-lim. Captura de código HTML. Elaboración propia. Licencia: CC by Plantillas
Diseño de columnas con CSS
Para el diseño de una web con varias columnas mediante CSS no existe una receta universal. De momento, y mientras se sigue desarrollando el CSS, nos basaremos en dos principios esenciales: position:absolute
Ejercicios - Introducción al desarrollo web para móviles
Ejercicios - Introducción al desarrollo web para móviles Índice 1 Ejercicio 1 - Estructura en HTML (0.6 puntos)... 2 2 Ejercicio 2 - Terminando la Web de ejemplo (0.6 puntos)... 2 3 Ejercicio 3 - Estructura
Ejercicios CSS 3º- A partir del código HTML crear un archivo de CSS para dar estilo como el que aparece en la imágen:
Ejercicios CSS 3º- A partir del código HTML crear un archivo de CSS para dar estilo como el que aparece en la imágen:
EFECTO CSS DE ESQUINAS REDONDEADAS: BORDER- RADIUS. BORDER-LEFT- TOP-RADIUS. EJEMPLOS CIRCULO O ELIPSE (CU01058D)
APRENDERAPROGRAMAR.COM EFECTO CSS DE ESQUINAS REDONDEADAS: BORDER- RADIUS. BORDER-LEFT- TOP-RADIUS. EJEMPLOS CIRCULO O ELIPSE (CU01058D) Sección: Cursos Categoría: Tutorial básico del programador web:
PROPIEDADES VISIBILITY (VISIBLE, HIDDEN, COLLAPSE) Y OVERFLOW CSS. SCROLL. OVERFLOW- X Y OVERFLOW-Y. EJEMPLOS (CU01038D)
APRENDERAPROGRAMAR.COM PROPIEDADES VISIBILITY (VISIBLE, HIDDEN, COLLAPSE) Y OVERFLOW CSS. SCROLL. OVERFLOW- X Y OVERFLOW-Y. EJEMPLOS (CU01038D) Sección: Cursos Categoría: Tutorial básico del programador
Cómo se define? selector {propiedad1: valor1; propiedad2: valor2}
Hojas de Estilos Cómo se define? selector {propiedad1: valor1; propiedad2: valor2} Tipos de selector Etiqueta de HTML Identificador De clase sintaxis Nbre_Etiqueta #nbre_identificador.nombredeclase Dónde
Frameworks CSS: Bootstrap
Diseño, Evaluación y Desarrollo de Interfaces Frameworks CSS: Bootstrap Luis Rodríguez Baena (luis.rodriguez@upsam.es) Universidad Pontificia de Salamanca Escuela Superior de Ingeniería y Arquitectura
CSS Velneo Open Apps Oficiales
CSS Velneo Open Apps Oficiales Objetivo Este documento te guiará en el proceso de edición de las hojas de estilo para las Velneo Open Apps Oficiales. Índice Introducción Hoja de estilos Velneo Open Apps
PADDING Y MARGIN CSS. TOP, RIGHT, BOTTOM Y LEFT. MARGIN NEGATIVO Y CENTRAR CON MARGIN AUTO. EJEMPLOS (CU01029D)
APRENDERAPROGRAMAR.COM PADDING Y MARGIN CSS. TOP, RIGHT, BOTTOM Y LEFT. MARGIN NEGATIVO Y CENTRAR CON MARGIN AUTO. EJEMPLOS (CU01029D) Sección: Cursos Categoría: Tutorial básico del programador web: CSS
Contenedores. Elementos <div>
Html5 añade nuevos elementos semánticos pero todos ellos se basan en el uso del . Estos elementos sirven para dividir la página (de ahí el nombre div, de divisor) en contenido relacionado, un div
DEGRADADOS CSS. EFECTO LINEAL Y RADIAL. LINEAR-GRADIENT. ANGULOS CSS: UNIDADES ANGULARES DEG, GRAD, TURN, RAD. (CU01060D)
APRENDERAPROGRAMAR.COM DEGRADADOS CSS. EFECTO LINEAL Y RADIAL. LINEAR-GRADIENT. ANGULOS CSS: UNIDADES ANGULARES DEG, GRAD, TURN, RAD. (CU01060D) Sección: Cursos Categoría: Tutorial básico del programador
DISEÑANDO. Web. Empresa. de mi. COmo crear una web empresarial sin ser programador ni diseñador
introducción Bienvenida El Instructor Juan Sebastián Ossa Domínguez Diseñador Gráfico y Diseñador Desarroldor de Software introducción Bienvenida Objetivo del Curso Transmitir los conceptos básicos diseño
UNIDAD 1 GENERALIDADES HTML
UNIDAD 1 GENERALIDADES HTML GENERALIDADES HTML5 Una página web es un archivo con texto en el que se insertan diferentes etiquetas HTML, para que ese contenido pueda ser interpretado por el navegador web.
Producción Digital I. Lic. Wenceslao Zavala 10 de Octubre 2018
Producción Digital I Lic. Wenceslao Zavala 10 de Octubre 2018 NO debe aparecer la barra de desplazamiento abajo, para mover la pantalla de izquierda a derecha. Trabajo Práctico N 5 Sitio Responsive Si
CONCEPTOS DE MARGEN Y RELLENO CSS. DIFERENCIAS ENTRE MARGIN Y PADDING CSS CON EL BOX MODEL. EJEMPLOS (CU01028D)
APRENDERAPROGRAMAR.COM CONCEPTOS DE MARGEN Y RELLENO CSS. DIFERENCIAS ENTRE MARGIN Y PADDING CSS CON EL BOX MODEL. EJEMPLOS (CU01028D) Sección: Cursos Categoría: Tutorial básico del programador web: CSS
Índice del curso. Elementos HTML. Elementos HTML. Elementos de texto. Creación de páginas web básicas. 1.Introducción a Internet. Lenguaje HTML.
Índice del curso 1.Introducción a Internet. Lenguaje HTML. Elementos HTML Creación de páginas web básicas 2.Elementos HTML. 3.Creación y gestión de imágenes con GIMP. 4.Hojas de estilo. 5.Creación de páginas
ESTILOS Y HERENCIA EN TABLAS CSS. WIDTH, HEIGHT, FONT-SIZE Y OVERFLOW EN TABLAS. PROPIEDAD BORDER- COLLAPSE (CU01051D)
APRENDERAPROGRAMAR.COM ESTILOS Y HERENCIA EN TABLAS CSS. WIDTH, HEIGHT, FONT-SIZE Y OVERFLOW EN TABLAS. PROPIEDAD BORDER- COLLAPSE (CU01051D) Sección: Cursos Categoría: Tutorial básico del programador
Producción Digital I. Lic. Wenceslao Zavala 26 de Septiembre 2018
Producción Digital I Lic. Wenceslao Zavala 26 de Septiembre 2018 El ancho de la caja del sitio no debe superar los 1300 px, y si la resolución es más pequeña, debe adaptarse al navegador. Trabajo Práctico
PROPIEDAD DISPLAY CSS. INLINE, BLOCK, NONE, LIST-ITEM, INLINE-BLOCK. EJERCICIOS DE EJEMPLO RESUELTOS EN CÓDIGO CSS (CU01033D)
APRENDERAPROGRAMAR.COM PROPIEDAD DISPLAY CSS. INLINE, BLOCK, NONE, LIST-ITEM, INLINE-BLOCK. EJERCICIOS DE EJEMPLO RESUELTOS EN CÓDIGO CSS (CU01033D) Sección: Cursos Categoría: Tutorial básico del programador
FUNDAMENTOS DE ROBÓTICA. Maestro: Ing. Marco Antonio López Paredes REPORTE DE PROGRAMA: ANALIZAR LOS OBSTACULOS DE ROBOTS EN UN TABLERO
S UNIVERSIDAD AUTÓNOMA DEL ESTADO DE MÉXICO Centro Universitario UAEM Atlacomulco FUNDAMENTOS DE ROBÓTICA Maestro: Ing. Marco Antonio López Paredes REPORTE DE PROGRAMA: ANALIZAR LOS OBSTACULOS DE ROBOTS
TEXT-ALIGN, COLOR, TEXT- DECORATION, TEXT- INDENT, WHITE-SPACE NOWRAP, PRE, PRE- WRAP, PRE-LINE O NORMAL (CU01040D)
APRENDERAPROGRAMAR.COM TEXT-ALIGN, COLOR, TEXT- DECORATION, TEXT- INDENT, WHITE-SPACE NOWRAP, PRE, PRE- WRAP, PRE-LINE O NORMAL (CU01040D) Sección: Cursos Categoría: Tutorial básico del programador web:
Conocimientos previos
Tema: Animando un sitio web Ficha de Aprendizaje 12 n Logro Crea e inserta animaciones que permiten que su página web se vea más dinámica. Crea efectos en las imágenes de su página web. @ # Conocimientos
Las tablas pueden ser consideradas como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Una tabla puede ser insertada en un
Las tablas Las tablas pueden ser consideradas como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Una tabla puede ser insertada en un documento HTML usando tres elementos básicos:
NUEVAS ETIQUETAS HTML 5
NUEVAS S HTML 5 Se muestra a continuación el listado completo de las etiquetas indicando las nuevas HTML 5, las mismas se agrupan en base a su funcionalidad dentro del documento html. Establece
Producción Digital I. Lic. Wenceslao Zavala 7 de Junio 2018
Producción Digital I Lic. Wenceslao Zavala 7 de Junio 2018 Trabajo Cierre de Cursada Sitio HTML COMPLETO online Adaptable para: Tabletas hasta 768px; Móviles hasta 480px. Debe tener: Slider en alguno de
CSS Flujo y posicionamiento
Vamos a comprobar que los cuadros de las páginas web siguen un flujo natural. Además, veremos cómo podemos anular dicho flujo y colocar elementos fijos o flotantes. Existen tres posibilidades de colocar
Aprenda los lenguajes HTML5, CSS3 y JavaScript para crear su primer sitio web
La Web 1. Qué es la Web? 7 1.1 Lado servidor: HTTP, FTP, lenguajes, SQL 7 1.2 Lado cliente: HTML, CSS, JavaScript 10 2. Los lenguajes y su utilidad 10 2.1 HTML 10 2.2 CSS 14 2.3 JavaScript 17 2.4 Ejemplo
BASE es un framework, el cual, podría definirse de manera muy sencilla como un esquema para el desarrollo y/o la implementación de una aplicación.
BASE por Carlos Lobo Qué es? BASE es un framework, el cual, podría definirse de manera muy sencilla como un esquema para el desarrollo y/o la implementación de una aplicación. En el caso de BASE, ellos
Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales
UNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES Licenciatura en Artes Multimediales Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales CSS CSS - Hojas
<header> </header> <nav></nav> <footer></footer>
DESCRIPCIÓN DE LA ACTIVIDAD En esta actividad se analizará la estructura del cuerpo (dentro del del documento), a través del uso de etiquetas semánticas: header, nav, section, article, aside, footer,
Producción Digital I. Lic. Wenceslao Zavala 12 de Septiembre
Producción Digital I Lic. Wenceslao Zavala 12 de Septiembre 2018 consultas@producciondigitalup.com www.producciondigitalup.com Realizar la maqueta en HTML de la versión de escritorio del Wireframe entregado
Producción Digital I. Lic. Wenceslao Zavala 19 de Septiembre 2018
Producción Digital I Lic. Wenceslao Zavala 19 de Septiembre 2018 Trabajo Práctico N 3 Sitio Navegable entre secciones A partir de la maqueta de HTML realizada en el TP N 2, se deberá tener el sitio con
HOJAS DE ESTILOS EN CASCADA CSS (Cascading Style Sheet)
HOJAS DE ESTILOS EN CASCADA CSS (Cascading Style Sheet) 1. QUÉ ES UNA HOJA DE ESTILOS? Las hojas de estilos son un conjunto de instrucciones, el cual permiten manejar el formato y presentación de contenido
Listado de elementos o etiquetas HTML5
Listado de elementos o etiquetas HTML5 Etiqueta Función Define un comentario Define el tipo de docuemento Define
UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION
CICLO 01-2016 UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION GUIA DE LABORATORIO Nº 13 Nombre de la práctica: Introducción al diseño responsivo con el framework Bootstrap.
Técnicas de visualización
Técnicas de visualización LENGUAJE HTML Máster en Tecnologías de la Información Geográfica Laboratori d Informació Geogràfica i de Teledetecció (LIGIT) Departament de Geografia. UAB Anna Jiménez Introducción
Taller 1: conceptos básicos y entorno de programación HTML5, CSS3 y Java Script
Taller 1: conceptos básicos y entorno de programación HTML5, CSS3 y Java Script Contenido Presentación 3 Las aplicaciones móviles web o web apps: 5 El HTML 6 El CSS 9 El Java Script 10 Herramientas para
LABORATORIO Nº 9 TABLAS DINÁMICAS
OBJETIVO Mejorar el nivel de comprensión y el manejo de las destrezas del estudiante para utilizar tablas dinámicas en Microsoft Excel. 1) DEFINICIÓN Las tablas dinámicas permiten resumir y analizar fácilmente
Como hacer un menú de navegación adaptable a dispositivos móviles (Responsive Design)
Como hacer un menú de navegación adaptable a dispositivos móviles (Responsive Design) Como utilizar iconos personalizados mediante fuentes Una de las tendencias actuales dentro del diseño web es el diseño
Capas. Para definir una sección o división se utilizan las capas. Para esto utilizamos las etiquetas de HTML
Capas Capas Para definir una sección o división se utilizan las capas. Para esto utilizamos las etiquetas de HTML y Uso principal es poder aplicar estilo en el cuerpo/porción del documento
Informática General Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales
Informática General 2018 Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales Box model El "box model" es el comportamiento de CSS que hace que todos los elementos incluidos en una página
Figura 1: página de la vivienda sin estilo
Diseño de Interfaces Hombre Máquina Prácticas de laboratorio Curso 2009/10 Práctica 2 Interacción con hojas de estilo en cascada 1 Objetivo 1.1 Creación de una hoja de estilo La figura 1 muestra una página
Formulario de Contacto
Un formulario es la forma habitual en la que el usuario puede interaccionar con la página web. Vamos a incluir un formulario de contacto en nuestra página contacto.html Paso 1 El formulario en HTML Abre
Tema. Objetivos. Administrar la interfaz gráfica de documentos HTML con CSS. Material a utilizar.
Tema. Administración de la interfaz de usuario Objetivos. Administrar la interfaz gráfica de documentos HTML con CSS Material a utilizar. Editor de texto para el código HTML Navegador Web Introducción.
Construcción de interfaces de usuario, usando: Bootstrap 4, HTML, Imágenes
Tema. Construcción de interfaces de usuario, usando: Bootstrap 4, HTML, Imágenes Objetivos. Objetivo General o Aprender como instalar, configurar y el uso de Bootstrap 4 en nuestros proyectos Objetivos
Modelos de caja. Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son las siguientes:
Modelo de caja El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares. Las cajas de una página se crean automáticamente.
Wenceslao Zavala
Producción Digital I Wenceslao Zavala www.producciondigitalup.com.ar alumnos@producciondigitalup.com.ar Convenciones Web Diseño Web El Monitor: Unidad de Medida (pixel) Dimensión de Trabajo (según pantalla
1. La evolución de HTML La evolución de las CSS 16
HTML5 y CSS3 1. La evolución de HTML 15 2. La evolución de las CSS 16 2.1 La noción de módulo 16 2.2 La evolución de los estados 16 2.3 Los prefijos comerciales 17 2.4 Utilizar los prefijos comerciales
TIC II Tema 2: Programación Web
TIC II Tema 2: Programación Web REFERENCIAS Existen varios métodos para seleccionar qué elementos HTML serán afectados por las reglas CSS: Referencia por la palabra clave del elemento. Referencia por el
QUÉ SE NECESITA PARA UTILIZAR HTML5
Una página web es un archivo con texto en el que se insertan diferentes etiquetas HTML, para que ese contenido pueda ser interpretado por el navegador web. Existen diferentes versiones del lenguaje HTML,
Qué es HTML? Estructura interna de una página HTML. Cabecera de la página <head>
Qué es HTML? El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada,
PROGRAMACIÓN WEB II 4043
Modalidad: Online Duración: 26 horas Objetivos: HTML5 es un nuevo concepto para la construcción de sitios web y aplicaciones que combina dispositivos móviles, computación en la nube y trabajos en red.
SPRITE CSS: CONCEPTO. QUÉ ES, CÓMO CREAR Y USAR UN SPRITE? EJEMPLOS Y EJERCICIO RESUELTO EN CÓDIGO CSS (CU01037D)
APRENDERAPROGRAMAR.COM SPRITE CSS: CONCEPTO. QUÉ ES, CÓMO CREAR Y USAR UN SPRITE? EJEMPLOS Y EJERCICIO RESUELTO EN CÓDIGO CSS (CU01037D) Sección: Cursos Categoría: Tutorial básico del programador web:
DEFINICIÓN DE FONDO CSS. BACKGROUND- IMAGE Y EFECTO FONDO PÁGINA CON PAPEL TAPIZ. BACKGROUND-REPEAT. EJEMPLOS (CU01030D)
APRENDERAPROGRAMAR.COM DEFINICIÓN DE FONDO CSS. BACKGROUND- IMAGE Y EFECTO FONDO PÁGINA CON PAPEL TAPIZ. BACKGROUND-REPEAT. EJEMPLOS (CU01030D) Sección: Cursos Categoría: Tutorial básico del programador
SOMBRAS CON CSS ver. 2
Sombras con CSS para Diseño WEB ver. 2_TICO 1º Bachillerato página 1/6 SOMBRAS CON CSS ver. 2...1 Procedimiento 1: Diseño con Gimp 2.6 de una sombra...2 Procedimiento 2: Diseño Web con Kompozer...3 Código
Qué es CSS. Si necesitamos hacer modificaciones lo hacemos en un sólo lugar y no tenemos que editar todos los documentos HTML por separado.
Qué es HTML y CSS Una página web es un documento de texto el cual se escribe en lenguaje HTML, con el que se que crea el contenido de una web. Aquí se manejan los contenidos. Por otro lado, existe el código