clase1

Indice: - div y span - Tablas - Formularios - CSS - Maquetación visibility:visible. width:200px.left:280px. top:140px. height:150px. Podemos usar cualquiera de los otros dos que son iguales. comentario o algo. Un ejemplo de divs: <div id=”capa1” style=”position:absolute. background-color: #33FFFF. </div> Ahora veamos como definimos secciones con div. Los tags para hacerlos son <span> <div> <layer> <ilayer>.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. . Las capas son utilizada para tener ordenadamente diferenciado las secciones de una página. Los dos ultimos son reconocidos por Netscape.”> Algún tipo de noticia. 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. <html> <head> <title>titulo</title> <link text="text/css" rel="stylesheet" href="css.css" /> </head> <body> <div id="wrapper"> <div id="header"> header </div> <div id="menu"> body </div> <div id="main"> <h3>contenido</h3> </div> <div id="footer"> foot </div> </div> </body> </html> . Width: recibe la anchura que tendra la tabla en pixeles.TABLAS Nuestra primera tabla <table></table>: define la tabla. Right: derecha. Recibe 3 valores: Left: izquierda. Height: establece la altura de la celda. de la misma fila. Align: Alineación de la tabla.: define el espacio en blanco. el resto de ellas. <tr></tr>: define las filas de la tabla. <td></td>: define las celdas de cada fila. Los mismos valores de siempre. por ende no se especifica para las restantes celdas de la misma fila. Recibe atributos: Width: establece el ancho de la celda. Una vez definido el alto y el ancho de la primera celda. Colocando contenidos Se pueden cambiar las alineaciones de las celdas (<td>) mediante los atributos: Align: alineación horizontal. Los pixeles también pueden recibir un valor porcentual. Center: centro. . &nbsp. tendrán el mismo ancho y alto. Recibe varios atributos: Border : establece el grueso del borde de la tabla en pixeles. que combina celda contiguas en forma vertical. Row : si la cabecera se refiere a una fila Col: si se refiere a una columna . Bottom: parte inferior. Suplantan al tag td. Scope: atributo que puede ser obviado. Rowspan: atributo del td. Sólo combina celdas de columnas adyacentes. que une la dos o mas celda en una sola. <table cellpadding: recibe un valor numérico indicando los pixeles de separación entre los contenidos y los bordes dentro de la celda. Baseline: línea de base. Es sólo para facilitar la lectura. Combinando celdas Colspan: atributo del td. Cuidando la presentacion <th></th> : Representa celdas de cabecera. Recibe 3 valores: Top: parte superior. Filas contiguas. sin necesidad de recurrir a las alineaciones.Valing: alineación vertical. Mas sobre colocación: En ocasiones viene bien establecer una separación mínima entre el contenido de las celdas y los bordes. <table cellspacing: recibe un valor numérico indicando los pixeles de separación entre las celdas. <caption></caption>: añade una cabecera general a la tabla. Bordercolor: atributo que se le asigna al table.forma la celda de la primer fila --> <td> celda 2 </tr><!-. table.la segunda celda de la segunda fila --> </tr> </table> . tr. table.El atributo bgcolors pude ser aplicado a los tag: td. Las secciones de las tablas Cuando se crea una tabla se puede dividir en tres secciones: <thead></…: es la cabecera <tbody></…: es el cuerpo <tfoot></….forma la segunda fila --> <td> celda 3 </td><!-. Bordercolordark: establece el color del borde oscuro.la primer celda de la segunda fila --> <td> celda 4 </td><!-.: el pie ejemplo: <table> <tr><!-. Establece el color del borde de la tabla.forma la fila --> <td> celda 1 </td><!-. Background: es un atributo que se puede usar en td. tr. Estos son atributos del table: Bordercolorlight: establece el color del borde claro. th.forma la segunda celda de la primer fila --> </tr> <tr><!-. Size: atributo que determina la longitud física del campo en la pantalla expresada en caracteres. Reset: Limpia los campos dejandolo como empezaron Name: Se determina el nombre del campo. Text: Campo para el ingreso de un texto. Maxlength: Atributo que establece el máximo número de caracteres. Value: Atributo que asigna un valor predeterminado al campo. Los valores posible son post o get. Multipart/form-data: Se emplea cuando el formulario incluye campo de archivos. Enctype: Atributo que determina el tipo de codificación con el que se debe enviar el formulario. Que establece el nombre del formulario. Text/plain: Que el formulario se envíe como un simple texto sin formato. Method: Atributo que permite establecer el método por el que se enviará el formulario al servidor. Submit: Boton que nos permite enviar los datos segun el método definido en Method. type: Atributo que indica el tipo de campo que queremos crear. .att. <form></form> : Encierran el formulario completo Name: Atributo del tag form. <input>: define un campo en el 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). Application/x-www-form-urlencoded: Los campos del formulario se envían como un fichero adjunto de nombre postdata.FORMULARIO BASICO FORMULARIOS Un formulario está compuesto básicamente por una serie de campos que el usuario puede rellenar. Rows: Atributo que recibe el número de filas que el usuario podra ver simutaneamente en la pantalla. Zonas de Texto <textarea>: Genera un campo que da la oportunidad al usuario de escribir un mensaje largo. Virtual: Si el usuario escribe una línea de texto más larga que el ancho de la caja. en carácteres de la caja de texto. Physical: Es idéntico al virtual pero al transmitirce el mensaje al servidor. Donde lo que teclee el usuario aparece como un conjunto de asteriscos. Name: Se le asigna el nombre del campo. . Son cajas de texto con barras de desplazamientos. Cols: Atributo que recibe solo un valor que expresa el ancho. OFF : aparecerá una barra de scroll horizontal y no habra nueva línea hasta que el usuario aprete enter. Wrap: atributo (ajuste) que hace referencia a como se agustara el texto que el usuario escriba en la caja de texto si. el texto saltara a la siguiente línea como en un bloc de notas. Value: Para ofrecer un valor predterminado. por ejemplo alguna línea tiene mas caracteres de lo que hemos definido en el atributo cols.Tipo de campo Campo de contraseñas <input type=”password”>: Define un campo de contraseña. Sin embargo en virtual la frace llega al servidor en una sola linea (si no apreta enter)sin importar como lo ve el usuario. Que no se crean con el tag input. se envia el texto tal como aparece en la caja de texto. <input type=”hidden”> : De esta forma se crea el campo oculto. Lo que se manda al servidor es el nombre de cada grupo (name) con el valor (value) del boton elegido. de un grupo de varios posibles. al cargarce la pagina la casilla aparece activada sino aparecera desactivada por defecto. Nombre del campo Value: es obligatorio. Si esta activada envia una valor predeterminado al servidor. Name: Es obligatorio. Se emplean cuando el formulario se va a enviar contra una aplicación cliente servidor o contra aplicaciones como CGIs. Name: nombre Value: valor predeterminado Checked: Si ponemos. <input type=”radio”>: Se genera un boton de radio. <input type=”checkbox”>: De esta manera se genera una casilla de verificación. Valor predeterminado Casillas de verificación Son casillas que se pueden activar o desactivar. es que los botones que pertenescan al mismo grupo tengan el mismo valor en el atributo name.Campos Ocultos Son campos que el usuario no pueden ver ni cambiar. Botones de Radio Se emplean cuando queremos forzar al usuario a que escoja una opcion y solo una. Lo importante. Name: nombre del radio Value: valor predeterminado Checked: si aparece activada o no por default como checked. . que recibe el nombre del campo. Cada una de estas opciones tiene un valor predeterminado que se define con value. size y maxlength. . El metodo tiene que ser POST y enctype=”multipart/form-data”. se le asigna a select el atributo name. que nos envie ficheros del ordenador. <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ú. Este tipo de campo recibe los atributos name. 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. Provincia = 4 si hemos seleccionado el pais de las maravillas. Para nuestro ejemplo. <selected>: Atributo que permite seleccionar por defecto la opcion a mostrar en el primer campo.Campo de archivos Se emplean cuando queremos permitir al usuario. al pulsar submit enviará al servidor. <opcion>: Para definir cada una de las opciones necesarias. 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. <input type=file>: Se crea un campo de archivo con la casilla de texto y el boton examinar. Multiple: Es un atributo que se le agrega al tag select. que permite elegir varias opciones. al pulsarlo actua al igual que submit.(JavaScript). Al arrimarle el cursor. <input type=”button”>: crea el boton mensionado anteriormente. la caracteristica principal es. Este tipo de campo admite los atributos border. Submit: se puede agregar esto al type y incluyendo en un formulario podría reemplazar al input. El numero es la cantidad de lineas que puede ver el usuario. Recibe los atributos name y value. que aparece. <input type=”image” name=”boton2” src=”/image. <select Size=3>:El atributo size se le añade al tag select.gif”> .Lista propiamente dicha: Similar a la lista de menus pero se le añade una barra de scroll vertical. Campo de imagen Se crea un boton a partir de una imagen. Otro tipos de botones pueden ser creados por el tag: <button></button>: Funciona de igual manera que input. una manito al hacerle clic. son aquellos que no tienen asignada una mision especifica. width y height. name. Acepta los atributos type. La accion de este boton es necesario programarla. Otros botones Por ejemplo botones genericos. Podría llevar el atributo disabled para que el boton este inhabilitado. 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. <legend></legend>: Sirve para rotular cada fieldset con una leyenda. que se usa como clave.Otros atributos de los campos Tabindex: Atributo que sirve para fijar un determinado orden del desplazamiento del foco. <input type=”submit” accesskey=”C”>. Cuidando la apariencia <fieldset></fieldset>: Sirve para agrupar conjuntos de campos. ESTILO PARA TODALA PAGINA Si queremos definir un estilo para toda la página podemos hacer esto. . color:blue} </style> </head> <body> <h1>encabezado 1</h1> <h1> encabezedo2</h1> </body> </html> Esto fija ese estilo para todos los encabezados que se incluyan en la página.HOJAS DE ESTILO EN CASCADA Estilo para un tags <html> <body> <h1 style=”font-family:arial. <html> <head> <style type=”text/css”> H1 {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. font-family:arial: text-decoration:underline} Body {background-color:#00ffff} P {font-family:Tahoma. El atributo type con el valor “text/css”.html solo tenemos que agregar: <link rel=”stylesheet” type=”text/css” href=”carpeta/mistilo. con el valor “stylesheet” para indicarle que va a enlazar a una hoja de estilos.css”> </head> <body> contenido. text-decoration:overline} .css”> El tag link recibe el tribute rel. para indicarle que la hoja de estilos esta en formato de texto. color:red. pero para una mejor lectura en un futuro conviene agregar en el head. textdecoration:none} Ahora todas las páginas que creamos . Esto se puede agregar en el head o en el body.. color:lightgreen... border:double yellow. El atributo href para indicarle la ruta y el nombre de la hoja de estilos.ESTILOS PARA TODO EL SITE Creamos un archivo con extensión . Ejemplo: <html> <head> <title>Prueba stilo </title> <link rel=”stylesheet” type=”text/css” href=”carpeta/mistilo. Por experiencia no hace diferencia. </body> </html> .css que va a contener lo siguiente: H1 {color:red.clasepersonalizada1 {background-color:black. gif. . hace que la imagen se repita en una columna vertical. Background-repeat: Con el valor no-repeat permite que la imagen de fondo no se repita. Background-repeat: Se usa para indicar si queremos que la imagen de fondo se repita.. 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. Background-attachment: Establece la forma de adjuntar la imagen al fondo: fixed. Ejemplo: body {background-attachment: fixed. sino aparece una sola vez. background-image:url(“miimage. Repeat es un valor que hace que la imagen se repita en mosaico para rellenar el área de navegación. Background-attachment: con el valor fixed. El valor no-repeat hace que la imagen aparezca una sola vez. la imagen sera fija. determina que la imagen de fondo permanesca fija.ACERCA DE LAS IMÁGENES DE FONDO Si en un archivo . ahora definimos bien las propiedades: Background-image: url() para establecer cuál será la imagen de fondo.gif”)./imágenes/miimage. color:red} De ahora en mas todo los que tengan h1 tendran un fondo con la imagen miimage.css colocamos: H1 {background-image:url(“. backgroundrepeat: no-repeat. cuando estos lo hagan. background-position: center center} esto seria un ejemplo de como definir un body en un css con las caracteristicas vista asta ahora. El valor repeat-y.gif”). El valor repeat-x hace que se repita en una sola fila horizontal. Left. ESTILOS PARA LOS ENLACES Vamos a ver el manejo de la apariencia de los enlaces de nuestra pagina.. font-weight:bold. Link: el estado del enlace normal cuando aún no hemos accedido a la página a la que éste apunta. Con top.} a:visited {font-family:tahoma. tamaño.} a:active {font-family:tahoma. textdecoration:none. Cada uno de estos cuatro estados puede ser configurado en cuanto al color de la letra. Hover: Es cuando el puntero se sitúa sobre el enlace. Usualmente se usa pixeles para no confundirce. font-size:12px. su tipografia. centro o derecha. center.} a:hover {font-family:tahoma. etc. textdecoration:none.Background-position: Esta propiedad sirve para posicionar una imagen en el área de navegación cuando pusimos que no se repita. antes de pulsarlo.arial. font-size: 12px. Los valores pueden ser 50px(50 pixeles) o 50cm y 50mm que son centimetros y milimetros. color:#0000aa. bottom es para situarla en la parte superior. subrallado. color:#cc0000.arial..arial. text-decoration:none.} . font-weight:bold. font-weight:bold. color:#00aa00. textdecoration:none. font-size:10px.arial. color:#0000aa. font-size:12px. centro o en la parte inferior. text-transform:uppercase. ejemplo: a:link {font-family:tahoma. font-weight:bold.center y right es para situarla a la izquierda.. 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. css. Ul {list-style-image: url(. Tambien se puede crear un stilo personalizado y luego agregar al tag con class. Ejemplo: <ul class= “vineta”> <li>elemento</li> <li>elemento</li> </ul> . Por ejemplo: stilo.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()..gif)} index.LAS VIÑETAS DE LAS LISTAS Las viñetas de una lista pueden ser suplantada por imagenes. Ahora ya tendra una lista con su imagen personalizada./img/bola.html: <html> <head><title>viñetas</title> <link rel=”stylesheet” type=”text/css” href=”css/stilos_13. FORMULARIOS CON CSS archivo. opacity:.html: <html> <head> <link rel=”stylesheet” type=”text/css” href=”css/archivo.css: . font-weight:bold} index.60.60. -moz-opacity:.casillas {background-color:#0000ff.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). color:#ffffff} .botones {background-color:#ff0000.css”> </head> <body> <form action=”script. color:#000000. . Ejercicios: . Documents Similar To clase1Skip carouselcarousel previouscarousel nextManual Javascriptuploaded by Leydi Canchilaexcel-gestion-empresas.pdfuploaded by MARCSTARStutojquery-100605163839-phpapp02uploaded by Rafa CarrUsabilidad Para Formularios en La Web Móviluploaded by Franklyn MARCHENA PEÑACV YOSKI DAVID BURGOS PÉREZ__2012uploaded by yoskidavidTEstuploaded by Gilberto PerezGuía para Instalación de WordPress en un Servidor Localuploaded by Charles Thompson54-279-1-PBuploaded by adarmemariel47373146-1630-1-PBuploaded by maypresentacionumlwebuploaded by Javier Torres3. HTML5 - Avanzadouploaded by Ramiro Estigarribia CaneseResumen_Formulariouploaded by Isis MariammProyecto Ofimatica IIuploaded by mariel_24Funcionamiento Del Servidor Webuploaded by keylanoleRuby on Railsuploaded by hmsjPrincipales Elementos en Una Base Da Datosuploaded by leidyguty96001 Redes de Computadoras (1era Clase)uploaded by StevenEst a Dosuploaded by CarmeloCv Mariano Biniuploaded by Leonel Coylarubrica paginas webuploaded by api-216441278Desarrollo Pag Webuploaded by Emiiy Maria Gil CamachoNaverFiuuploaded by Darwing Jaime Espinoza ChamorroPRACTICA_4-9_U3uploaded by TAtiizz VillalobosCrea Tu Propio Servidor Gratis Con ClearOS - Taringa!uploaded by abel_2006Curso PHP ITA Matricesuploaded by Alma description: tags: 0405FAFSAInsertLetteruploaded by anon-890008730278460 Proyecto FInaluploaded by Alex DavidMaster en Programación Web con Dreamweaver CC + HTML5 + CSS3 + PHP + MySQL + JavaScript + JQuery + Ajax + Titulación Universitariauploaded by Jesús MorenoManual de PHP Avanzadouploaded by Marks Arturo Calderon Niquininformeuploaded by Silvio CondoriMenú del pie de páginaVolver arribaAcerca deAcerca de ScribdPrensaNuestro blog¡Únase a nuestro equipo!ContáctenosRegístrese hoyInvitar amigosObsequiosAsistenciaAyuda / Preguntas frecuentesAccesibilidadAyuda de compraAdChoicesEditoresLegalTérminosPrivacidadCopyrightRedes socialesCopyright © 2018 Scribd Inc. .Buscar libros.Directorio del sitio.Idioma del sitio: English中文EspañolالعربيةPortuguês日本語DeutschFrançaisTurkceРусский языкTiếng việtJęzyk polskiBahasa indonesiaUsted está leyendo una previsualización gratuita.DescargarCerrar diálogo¿Está seguro?This action might not be possible to undo. Are you sure you want to continue?CANCELARAceptar

Description

Comments