Clase1

Transcript

Indice: - div y span - Tablas - Formularios - CSS - Maquetación Uso de capas Las capas son zonas rectangulares que contienen código HTML y que lo muestra por encima de la capa de ejecución. Los tags para hacerlos son

. Los dos ultimos son reconocidos por Netscape. Podemos usar cualquiera de los otros dos que son iguales. UNA CAPA BÁSICA Id: para el uso con javascript y también css Style: Recibe una serie de propiedades que nos permiten configurar el aspectos y la posición de la capa entre otras cosas. Las sintaxis es nombre:valor Class: Se utiliza cuando se definen estilos personalizados en el css. Las capas son utilizada para tener ordenadamente diferenciado las secciones de una página. Un ejemplo de divs:

Algún tipo de noticia, comentario o algo.

Ahora veamos como definimos secciones con div.

header

body

contenido

foot

TABLAS Nuestra primera tabla  : define la tabla. Recibe varios atributos: Border : establece el grueso del borde de la tabla en pixeles. Width: recibe la anchura que tendra la tabla en pixeles. Los pixeles también pueden recibir un valor porcentual. Align: Alineación de la tabla. Los mismos valores de siempre. : define las filas de la tabla. : define las celdas de cada fila. Recibe atributos: Width: establece el ancho de la celda. Height: establece la altura de la celda. Una vez definido el alto y el ancho de la primera celda, el resto de ellas, de la misma fila, tendrán el mismo ancho y alto, por ende no se especifica para las restantes celdas de la misma fila.  : define el espacio en blanco. Colocando contenidos Se pueden cambiar las alineaciones de las celdas () mediante los atributos: Align: alineación horizontal. Recibe 3 valores: Left: izquierda. Right: derecha. Center: centro. Valing: alineación vertical. Recibe 3 valores: Top: parte superior. Bottom: parte inferior. Baseline: línea de base. Mas sobre colocación: En ocasiones viene bien establecer una separación mínima entre el contenido de las celdas y los bordes, sin necesidad de recurrir a las alineaciones. : Representa celdas de cabecera. Suplantan al tag td. Scope: atributo que puede ser obviado. Es sólo para facilitar la lectura. Row : si la cabecera se refiere a una fila Col: si se refiere a una columna El atributo bgcolors pude ser aplicado a los tag: td, th, tr, table. Background: es un atributo que se puede usar en td, tr, table. Bordercolor: atributo que se le asigna al table. Establece el color del borde de la tabla. Estos son atributos del table: Bordercolorlight: establece el color del borde claro. Bordercolordark: establece el color del borde oscuro. : añade una cabecera general a la tabla. Las secciones de las tablas Cuando se crea una tabla se puede dividir en tres secciones:

celda 1	celda 2
celda 3	celda 4

FORMULARIO BASICO FORMULARIOS Un formulario está compuesto básicamente por una serie de campos que el usuario puede rellenar.

: Encierran el formulario completo Name: Atributo del tag form. Que establece el nombre del formulario. Action: Atributo que indica al navegador del cliente que es lo que tiene que ocurrir cuando el usuario pulsa el boton del tipo submit (el que envia el formulario). Method: Atributo que permite establecer el método por el que se enviará el formulario al servidor. Los valores posible son post o get. Enctype: Atributo que determina el tipo de codificación con el que se debe enviar el formulario. Text/plain: Que el formulario se envíe como un simple texto sin formato. Application/x-www-form-urlencoded: Los campos del formulario se envían como un fichero adjunto de nombre postdata.att. Multipart/form-data: Se emplea cuando el formulario incluye campo de archivos. : define un campo en el formulario. type: Atributo que indica el tipo de campo que queremos crear. Text: Campo para el ingreso de un texto. Submit: Boton que nos permite enviar los datos segun el método definido en Method. Reset: Limpia los campos dejandolo como empezaron Name: Se determina el nombre del campo. Size: atributo que determina la longitud física del campo en la pantalla expresada en caracteres. Maxlength: Atributo que establece el máximo número de caracteres. Tipo de campo Campo de contraseñas : Define un campo de contraseña. Donde lo que teclee el usuario aparece como un conjunto de asteriscos. Zonas de Texto : Genera un campo que da la oportunidad al usuario de escribir un mensaje largo. Son de texto. cajas de texto con barras de desplazamientos. Que no se crean con el tag input. Name: Se le asigna el nombre del campo. Cols: Atributo que recibe solo un valor que expresa el ancho, en carácteres de la caja Rows: Atributo que recibe el número de filas que el usuario podra ver simutaneamente en la pantalla. Wrap: atributo (ajuste) que hace referencia a como se agustara el texto que el usuario escriba en la caja de texto si, por ejemplo alguna línea tiene mas caracteres de lo que hemos definido en el atributo cols. OFF : aparecerá una barra de scroll horizontal y no habra nueva línea hasta que el usuario aprete enter. Virtual: Si el usuario escribe una línea de texto más larga que el ancho de la caja, el texto saltara a la siguiente línea como en un bloc de notas. Physical: Es idéntico al virtual pero al transmitirce el mensaje al servidor, se envia el texto tal como aparece en la caja de texto. Sin embargo en virtual la frace llega al servidor en una sola linea (si no apreta enter)sin importar como lo ve el usuario. Value: Para ofrecer un valor predterminado. Campos Ocultos Son campos que el usuario no pueden ver ni cambiar. Se emplean cuando el formulario se va a enviar contra una aplicación cliente servidor o contra aplicaciones como CGIs. <input type=”hidden”> : De esta forma se crea el campo oculto. Name: Es obligatorio. Nombre del campo Value: es obligatorio. Valor predeterminado Casillas de verificación Son casillas que se pueden activar o desactivar. Si esta activada envia una valor predeterminado al servidor. <input type=”checkbox”>: De esta manera se genera una casilla de verificación. Name: nombre Value: valor predeterminado Checked: Si ponemos, al cargarce la pagina la casilla aparece activada sino aparecera desactivada por defecto. Botones de Radio Se emplean cuando queremos forzar al usuario a que escoja una opcion y solo una, de un grupo de varios posibles. <input type=”radio”>: Se genera un boton de radio. Name: nombre del radio Value: valor predeterminado Checked: si aparece activada o no por default como checked. Lo que se manda al servidor es el nombre de cada grupo (name) con el valor (value) del boton elegido. Lo importante, es que los botones que pertenescan al mismo grupo tengan el mismo valor en Campo de archivos Se emplean cuando queremos permitir al usuario, que nos envie ficheros del ordenador. <input type=file>: Se crea un campo de archivo con la casilla de texto y el boton examinar. El metodo tiene que ser POST y enctype=”multipart/form-data”. Este tipo de campo recibe los atributos name, size y maxlength. Primero el nombre del campo, despues el tamaño de la caja de texto y por ultimo la cantidad de caracteres a contener el campo. Listas desplegables Menus: Se emplean cuando el usuario tiene que elegir uno a mas opciones de la lista y no le resulta adecuados los botones de opcion. <select name=”provincia”> <option value=”1” selected>argentina</option> <option value=”2” >peru</option> <option value=”3” >el lago nez</option> <option value=”4” >el pais de las maravillas</option> </select> Para crear un menú, se le asigna a select el atributo name, que recibe el nombre del campo. <opcion>: Para definir cada una de las opciones necesarias. Cada una de estas opciones tiene un valor predeterminado que se define con value. Para nuestro ejemplo, al pulsar submit enviará al servidor. Provincia = 4 si hemos seleccionado el pais de las maravillas. <selected>: Atributo que permite seleccionar por defecto la opcion a mostrar en el primer Lista propiamente dicha: Similar a la lista de menus pero se le añade una barra de scroll vertical. <select Size=3>:El atributo size se le añade al tag select. El numero es la cantidad de lineas que puede ver el usuario. Multiple: Es un atributo que se le agrega al tag select, que permite elegir varias opciones. Otros botones Por ejemplo botones genericos, son aquellos que no tienen asignada una mision especifica. La accion de este boton es necesario programarla.(JavaScript). <input type=”button”>: crea el boton mensionado anteriormente. Recibe los atributos name y value. Otro tipos de botones pueden ser creados por el tag: <button></button>: Funciona de igual manera que input. Acepta los atributos type, name. Submit: se puede agregar esto al type y incluyendo en un formulario podría reemplazar al input. Podría llevar el atributo disabled para que el boton este inhabilitado. Campo de imagen Se crea un boton a partir de una imagen, al pulsarlo actua al igual que submit. Este tipo de campo admite los atributos border, width y height. Al arrimarle el cursor, la caracteristica principal es, que aparece, una manito al hacerle clic. <input type=”image” name=”boton2” src=”/image.gif”> Otros atributos de los campos Tabindex: Atributo que sirve para fijar un determinado orden del desplazamiento del foco. Se coloca asociado a cada campo y se pone un numero que indica el orden en el que se desplaza el foco. Accesskey: Atributo que se emplea cuando se quiere que el usuario pueda acceder a cada campo del formulario mediante una combinación de la tecla alt+tecla especifica para cada campo. Se le agrega a cada campo este atributo y se le asigna una letra, que se usa como clave. <input type=”submit” accesskey=”C”>. Cuidando la apariencia  <fieldset></fieldset>: Sirve para agrupar conjuntos de campos. <legend></legend>: Sirve para rotular cada fieldset con una leyenda. HOJAS DE ESTILO EN CASCADA Estilo para un tags <html> <body> <h1 style=”font-family:arial; color:blue”> Encabezedo1 </h1> <h1> encabezado 2 </h1> </body> </html> Solo el encabezado 1 tomara esos atributos no todos lo que nosotros definamos. ESTILO PARA TODALA PAGINA Si queremos definir un estilo para toda la página podemos hacer esto. <html> <head> <style type=”text/css”> H1 {font-family:arial; color:blue} </style> </head> <body> <h1>encabezado 1</h1> <h1> encabezedo2</h1> </body> </html> ESTILOS PARA TODO EL SITE Creamos un archivo con extensión .css que va a contener lo siguiente: H1 {color:red; font-family:arial: text-decoration:underline} Body {background-color:#00ffff} P {font-family:Tahoma; color:red; text-decoration:overline} .clasepersonalizada1 {background-color:black; border:double yellow; color:lightgreen; textdecoration:none} Ahora todas las páginas que creamos .html solo tenemos que agregar: <link rel=”stylesheet” type=”text/css” href=” carpeta/mistilo.css”> El tag link recibe el tribute rel, con el valor “stylesheet” para indicarle que va a enlazar a una hoja de estilos. El atributo type con el valor “text/css”, para indicarle que la hoja de estilos esta en formato de texto. El atributo href para indicarle la ruta y el nombre de la hoja de estilos. Esto se puede agregar en el head o en el body. Por experiencia no hace diferencia, pero para una mejor lectura en un futuro conviene agregar en el head. Ejemplo: <html> <head> <title>Prueba stilo </title> <link rel=”stylesheet” type=”text/css” href=” carpeta/mistilo.css”> </head> <body> contenido.... </body> ACERCA DE LAS IMÁGENES DE FONDO Si en un archivo .css colocamos: H1 {background-image:url(“../imágenes/miimage.gif”); color:red} De ahora en mas todo los que tengan h1 tendran un fondo con la imagen miimage.gif. Background-attachment: con el valor fixed, determina que la imagen de fondo permanesca fija. Background-repeat: Con el valor no-repeat permite que la imagen de fondo no se repita, sino aparece una sola vez. Ejemplo: body {background-attachment: fixed; background-image:url(“miimage.gif”); backgroundrepeat: no-repeat; background-position: center center} esto seria un ejemplo de como definir un body en un css con las caracteristicas vista asta ahora. ahora definimos bien las propiedades: Background-image: url() para establecer cuál será la imagen de fondo. Background-attachment: Establece la forma de adjuntar la imagen al fondo: fixed, la imagen sera fija, aunque los contenidos de la página se desplace; si recibe el valor scroll o ningun valor la imagen de fondo se desplazará con los contenidos, cuando estos lo hagan. Background-repeat: Se usa para indicar si queremos que la imagen de fondo se repita. El valor no-repeat hace que la imagen aparezca una sola vez. El valor repeat-x hace que se repita en una sola fila horizontal. El valor repeat-y, hace que la imagen se repita en una columna vertical. Repeat es un valor que hace que la imagen se repita en mosaico para rellenar el área de Background-position: Esta propiedad sirve para posicionar una imagen en el área de navegación cuando pusimos que no se repita. Left,center y right es para situarla a la izquierda, centro o derecha. Con top, center, bottom es para situarla en la parte superior, centro o en la parte inferior. Los valores pueden ser 50px(50 pixeles) o 50cm y 50mm que son centimetros y milimetros. Usualmente se usa pixeles para no confundirce. ESTILOS PARA LOS ENLACES Vamos a ver el manejo de la apariencia de los enlaces de nuestra pagina. Link: el estado del enlace normal cuando aún no hemos accedido a la página a la que éste apunta. Hover: Es cuando el puntero se sitúa sobre el enlace, antes de pulsarlo. Active: Es cuando estamos visitando la pagina del enlace o cuando hemos regresado de ella y el enlace todabia tiene el foco visited: Es cuando hemos regresado de la pagina a la que apunta el enlace y éste ha perdido el foco. Cada uno de estos cuatro estados puede ser configurado en cuanto al color de la letra, su tipografia, tamaño, subrallado, etc.... ejemplo: a:link {font-family:tahoma,arial; font-size: 12px; font-weight:bold; color:#0000aa; text- decoration:none;} a:hover {font-family:tahoma,arial; font-size:10px; font-weight:bold; text-transform:uppercase; color:#cc0000; text-decoration:none;} a:active {font-family:tahoma,arial; font-size:12px; font-weight:bold; color:#00aa00; textdecoration:none;} a:visited {font-family:tahoma,arial; font-size:12px; font-weight:bold; color:#0000aa; textdecoration:none;} LAS VIÑETAS DE LAS LISTAS Las viñetas de una lista pueden ser suplantada por imagenes. Por ejemplo: stilo.css. Ul {list-style-image: url(../img/bola.gif)} index.html: <html> <head><title>viñetas</title> <link rel=”stylesheet” type=”text/css” href=”css/stilos_13.css”> </head> <body> <ul> <li>primer elemento</li> <li>segundo elemento</li> <li>tercer elemento</li> </ul> </body> </html> Donde en la hoja de estilo le indicamos que imagen usar la porpiedad list-style-image: ulr(). Ahora ya tendra una lista con su imagen personalizada. Tambien se puede crear un stilo personalizado y luego agregar al tag con class. Ejemplo: <ul class= “vineta”> <li>elemento</li> <li>elemento</li> FORMULARIOS CON CSS archivo.css: .casillas {background-color:#0000ff; color:#ffffff} .botones {background-color:#ff0000; color:#000000; font-weight:bold} index.html: <html> <head> <link rel=”stylesheet” type=”text/css” href=”css/archivo.css”> </head> <body> <form action=”script.php” method=”post”> nombre: <input type=”text” name=”nombre” class=”casillas”> <input type=”submit” value=”enviar” class=”botones”> </form> </body> </html> TRANSPARENCIA DE CAPAS filter:alpha(opacity=60); -moz-opacity:.60; opacity:.60; Ejercicios: </div> </div> </div> <!-- End Description Section --> </main> <!-- ========== END MAIN ========== --> <div id="embedModal" class="js-login-window u-modal-window u-modal-window--embed"> <button class="btn btn-xs u-btn--icon u-btn-text-secondary u-modal-window__close" type="button" onclick="Custombox.modal.close();"> <span class="fas fa-times"></span> </button> <form class="p-7"> <header class="text-center mb-7"> <h4 class="h4 mb-0">Embed!</h4> <p>Clase1</p> </header> <textarea class="form-control u-form__input" rows="5">

---