Scribd Logo
Upload

Welcome to Scribd!

  • HTML

    Uploaded by

    Francisco Rampas Vazquez
    82 views16 pages
    primer examen

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    primer examen

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    82 views16 pages

    HTML

    Uploaded by

    Francisco Rampas Vazquez
    primer examen

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 16

    Formularios: <form> Atributos: -action: URLdel programa que procesar los datos del formulario. -Method: POST / GET.

    Mtodo del protocolo http para enviar la informacin. Enctype: tipo de codificacin usada para enviar el formulario al servidor. La aplicacin que procesar los datos del servidor se encargar de enviar una respuesta al cliente. POST permite el envo de mucha mas informacin que get. GET adems admite como mximo 500 byte. GET no permite el envi de archivos adjuntos, POST s. Los datos enviados con GET se ven en la barra de navegacin, forman parte de la URL. Los de POST no. Se recominda GET para los que no modifican la informacin (Ej. buscador googl) y POST para los que lo modifican (Ej. formulario para hacerte socio de una pagina). <input> elemento del formulario. Atributos: Type: text, password... Name: bautizarlo. Asignarle un nombre. Value: asignarle un valor inicial. Size: para darle tamao. Maxlength *Cuadro de texto: Nombre: <input type=text2 name=nom value=Maria/> (Si no se coloca el nombre no se enva la informacin al servidor) *Cuadro de contrasea Contrasea: <input type=pasword name= contrasea/> (Se vera un campo con asteriscos) *Checkbox: cada checkbox es independiente de los otros. Aficiones <br /> <input type=checkbox name=mosques/> Matar moscas <input type=checkbox name=estudiar/> Estudiar <input type=checkbox name=piedras/> Lanzar piedras Atributo: checked= checked (para que aparezca marcado por defecto) * Radiobutton (estn relacionados) acceso<br /> <input type=radio name=acces value=bat /> Bach <input type=radio name=acces value=prueba /> Prueba de acceso (se pone oblicatoriamente el valor para saber cual se marca). *Boton de envio del formulario <input type=submit name=benviar value=Envia/> *Boton de reset (borra toda la informacin del formulario)

    <input type=reset name=esborra value=Neteja /> *Enviar ficheros adjuntos <p>Selecciona un fichero adjunto </p> <input type=file namefichero /> FORMULARIOS AVANZADOS: AGRUPAR ELEMENTOS <fieldset> agrupar elemntos <legend> titulo para la agrupacin de elementos <form action=aplicacion.php method=post> <fieldset> <legend>datos de usuario </legend> nombre:<input type= text name nombre /><br/> apellidos: <input type=text name= apellidos /> <fieldset> </form> *<label> es un titulo del formulario. Hace que el texto del valor del formulario lo puedas clicar y funcione. Ejemplo: multi respuesta, no solo darle al cuadradito sino tb al texto. <form action=aplicacion.php method=post> <fieldset> <legend>datos de usuario </legend> <label for=nombre>Nom: </label> <input type=text id=nombre name=nombre /> nombre:<input type= text name= nombre /><br/> apellidos: <input type=text name= apellidos /> <fieldset> </form> *<textarea> atributo: -rows: numero de filas -Cols: numero de columnas Escribe un conte: <br/> <textarea rows=10 cols=60/> 28/10 Lista desplegable: <select> Atributos: size: nmero de items que mostrar la lista. Multiple: para seleccionar diversas opciones de una lista

    <option> Elementos de la lista Atributos: Selected: seleccionado por defecto Value: valor que se enva al servidor Ejemplo: -------------------------------------------------------------------<label for="music">Msicos</label> <select id="musicos" name="musica"> <option value="sopa">Sopa de cabra</option> <option value="caracol">Sopa de caracol</option> <option value="metallica">Metalica</option> </select> -------------------------------------------------------------------<optgroup> (creamos grupos de opciones)

    METAINFROMACI <head> <title>La guerra de Lbia</title> <meta name=author value=Paco /> <!-- nombre del meta dato, value es el valor--> <meta name=author content=Paco /> <!-- equivalente al anterior--> <meta name=keywords content=Libia, guerra, Lybia, war guerra, Gadafy /> <!-indexar la pgina, son tags--> <meta name=descrippcion content=Sitio web con infromacin sobre la guerra de libia /> <!-- se mostrara como resumen de la pagina--> </head> 04/11 DOCTYPE (125-intoduccin_xhtml) a) Especifica si es HTML o XHTML i de qu versin se trata. b) Especifica la DTD que se usar. Tres tipos: strict (estricto) Significa que cumple las reglas de la versin (ejemplo 4.0.0) de un modo estricto, solo de esa version. transitional (transitorio) Significa que si estamos en una versin pero podemos usar cosas de versiones anterior que ya no se tienen que usar. frameset (con marcos) Significa que si estamos en una versin pero podemos usar cosas de versiones anterior que ya no se tienen que usar y ademas podemos usar marcos (no se deberan de usar.) ej.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    Lo subrayado significa que usa el mtodo estricto y la DTD de ese mtodo.

    (inciso)Etiqueta hr <hr /> (muestra una lnea horizontal en la pantalla) TRANSFORMACIN DE <HTML> Si estamos en xhtml podemos ponerle atributos a la etiqueta <html> Para la lengua. Lang siempre tiene que poner la misma lengua. CA CA (catalan) ES ES (espaol) IT IT (Italiano). <html xmlns=http://www.w3.org/1999/xhtml\ xml:lang=ca lang=ca>

    ACCESIBILIDAD
    Facilitan el acceso a los contenidos del documento a personas con discapacidades. Tambin facilitan el aceso a dispositivos sin pantalla o con pantalla minscula. Algunos requisitos: Incluir texto alternativo para todas las imgenes, objetos y otros elementos no textuales (En imagenes con el atributo alt=... Que toda la informacin que utilice el color como elemento informativo pueda ser entendida pe las personas o dispositivos que no puedan distinguir los colores Marcar las variaciones de lengua del texto. Que el documento pueda leerse correctamente cuando no se usan las hojas de estilo. No incluir ningn elemento que parpadee en la pantalla. ----secundarios, los dio deprisa---- Escribir en un lenguaje sencillo Si usamos tablas poner encabezamiento, a las filas tb VALIDACIN Hacer uso de un programa que comprobar si el documento cumple las normas. Http://validator.w3.org http://validome.org Iconos para indicar que el documento es vlido http://www.w3.org/QA/Tools/Icons

    HOJAS DE ESTILO (pag 129 intruduccion_xhtml)


    CSS (Cascade Style Sheets) Versin actual CSS 2.1 Objetivos: -Controlar el aspecto de los documentos XHTML -Separar el contenido (XHTML) de la presentacin (CSS) -Reduce la complejidad del mantenimiento. -Permite visualizar el documento en diferentes dispositivos.

    1. Como incluir CSS en un documento Podemos usarlo de dos lugares diferentes: a)En un documento externo. Se necesita enlazarlo con el siguiente cdigo. <head> <link rel=hoja_de_estilo.css relstylesheet type=text/css href=estils.css media=screen /> </head> b)En el propio documento (X)HTML. Debemos usar la etiqueta en el <head>: <style> . </style> <style type=text/css> p {color: black;} </style> c)Directamente en las etiquetas <p style=color:blue;> Text blau </p> EJ: hoja_de_estilo.css body { backgraund-color: blue; color: black; /*color letra*/ font-family: Arial, sans-serif; font-size: 10pt; } REGLA CSS selector declaracions+ (el + significa 1 o ms) propiedades valores p{ color: black;}
    regla

    p: selector declaracin: color:black color: propiedades

    black: valor MEDIOS DE CSS BRAILLE, PRINT, SCREEN, SPEECH... Regla @media: donde especificamos el medio destino de nuestra hoja de estilo css. @media print { body { font-size: 10pt;} } @media screen { body7 { font-size:12pt;} } regla @import: <head>... <style rype=text/css> @import url(estils_basics.css) screen; <link rel=stylesheet type=text/css media=screen href=stils_basic.css /> (es lo mismo que la de arriba, son sinonimas) @import url (estils_print.css) print; @import url(stils_basics.css); (por defecto poruqe no se especifica, para todos dispositivos). </style> COMENTARIOS /* comentario de dos lneas o ms */ SELECTORS selectores bsicos -Selector universal: * (se aplica a todo) Selector de etiqueta: h1, h2, p... Se pueden agrupar: h1, h2, p { color: red; font-family: Verdana;} Luego se puede volver a usar otro selector: p {font-weight: normal;} *si entrean en conflicto vale el ultimo puesto. Selector descendente: p a {color: green;} Las etiquetas <a> que est incluidas en una <p> se le aplicar. <p>..... <spam>...<a></a>....</spam>....</p> (le afectaria y sera verde al estar dentro de una <p>) - Selector de clase: se le puede aplicar a cualquier etiqueta. .mola {color: grey;} <p class=mola>.......</p> <h1 class=mola>....</p>

    Se puede aplicar ms de una clase a una misma etiqueta .especial {font-size: 18px;} <p class=mola especial>....</p> Selector ID: no se puede repetir un id, solo se puede usar con una nica etiqueta. #emfasis {color: pink;} <p id=emfasis> Pink Panther</p> Selectores avanzados: -Selector de hijos: para seleccionar un elemento que es hijo directo de otro elemento. P > a {color:green;} <p>..... <spam>...<a></a>....</spam>....</p> (no le afectara porque no es hijo directo de <p>) Selector adjacente: h1 + h2 { color:red;} (se aplica solo si va directamente uno detrs del otro como se expresa) <h1> Mejor imposible </h1> <h2> Uno de los nuestros </h2> <h2> Blade Runner </h2> (a este no le afectara)

    UNIDADES DE MEDIDA Y COLORES: -Unidades de medida: *mrgenes, altura, anchura de los elementos, tamao de la letra. *Es un valor numrico seguido de una unidad de medida. Valor numrico: -Absoluto -Relativo: em em: 1em es la anchura de la letra M del tipo de letra que estamos usando. Ex: 1ex es la anchura de la letra de x. Px: segn los pxeles. body {font-size: 0.9em;} body {font-size: .9em;} (equivalente al anterior. Si hay un . Pero no 0 se sobreentiende que debera de haber un 0 **Las medidas relativas no se heredan directamente, lo que se hereda son los valores reales una vez calculados. Body {font-size: 0.8em; text-indent: 3em;} h1{font-size:1.2em;} (text.indentm es la distancia entre el margen y el texto. En este caso el resultado relativo arriba es 30px (ej) y abajo no se recalculara, sera el mismo text-indent que el del body. Si no fuera as el segundo margen sera mas grande puesto que la letra es ms grande.

    - UNIDADES ABSOLUTAS in (inches) pulgadas que son 2,54 centmetros cm mm pt (1 punto es 1/72 pulgadas, que son 0,35 milmetros). Pc (picas: 1 pica son 12 puntos, 4,23 mm) El tamao de la letra se suele poner con: pt -Unidad relativa *Porcentajes. Body { font-size:1em;} h1{font-size:200%;} h2 {font-size: 160%;} **recomendacin: usar medidas relativas. Intentar evitarlas. -COLORES: Nombre del color: red, green, aqua, lime, navy, silver.... RGB decimal: p { color: rgb (45,67, 123;} valores entre 0 y 255 RGB porcentual p {color: rgb(20%,30%,87%;} RGB exadecimal p {#34B30A;} ** Se pueden comprimir los valores cuando todas los componentes son iguales dos a dos. #A3C --> #AA33CC -BOX MODEL (MODELO DE CAJA) margin (distancia del contenido hasta el borde de la caja) pading (distancia del relleno del contenido hasta la caja) (en la libreta un dibujo mas mejor) **Anchura y altura width: anchura de la caja height: altura .alt {width: 200px; height: 100px;} **margenes: margin-top margin-bottom margin-left margin-right .margenes {margin-right:4em;}

    margin (shorthand) .margenes {.4em 2em 3em .9em;} (afecta el primer numero a top, segundo a bottom, tercero a left y el cuarto a right) **Relleno: padding padding-top padding-bottom padding-left padding-right padding {4px;} (afecta a los cuatro costados) **Bordes Ancho border-top-width border-bottom-width border-left-width border-right-width thin | medium | thick (delgado o medio o grueso) .bordes {border-top-width: thick;} .mesbordes {border-width: thin;} color del borde border-top-color border-bottom-color border-left-color border-right-color .colorborde {border-color: #A3C #567A4F blue #4432AF;} Estilo: clote border-top-style border-bottom-style bordet-left-style border-right-style dashed dotted solid double (estilos) //Shorthands .borderinferior {border-bottom:solid red;} .bordesuperior {border-top: 2px double red;} (ms potente) .bordes{ border: 3px solid #443356;}

    (si tenemos 3 iguale y una desigual lo que hacemos es definir las 4 iguale y luego definir la desigual) .bordes{ border: 3px solid #443356; border-top: 1px double red;} *Fondo: backgraund-color body {backgraund-color: purple;} body {backgraudn-image: url(cielo.jpeg);} ** imagen de fondo repeticin backgraund-repeat: repeat | no-repeat | repeat-x (horizontal) | repeat-y (vertical) ** imagen de fondo posicin de donde comience la imagen, referencia vrtice izq. backgraund-position: center | *Texto propiedades ** color body {color: #A4F;} //para todos los elementos del body, menos los enlaces **Font-family tipo de letras Se puede especificar una letra o una familia de letras p{font-family: {Arial, Helvetica, sans-serif;} **Font-size: tamao Forma absoluta: xx-small, x-small, small, medium, large, x-arge, xx-large Formes relatives: larger, smaler (respecto a la medida usada). **font-wight: grosor normal, bold, bolder, lighter... ** font-style: estilo italic | normal | oblique ** font-variant (versalitas) PACO RAMPAS small-caps **text-align (alineacin) - left | rigth | center | justify **line-height (interlineado) p {line-height: 1.4em;} ** text-decoration underline | overline | line-through

    ** text-transform: Se Ha Desbordado la Primavera (mayuscula primera letra) capitalize | uppercase (mayuscula) | lowercase (minuscula) ** vertical-align baseline (linea base, parte inferior) | middle (mitad) | top (superior) ** text-ident (tabulacin del texto), necesita una medida (em, px, pt...) Duyn est tocado del ala y me dice que quedan 55 minutos para que comience el examen de FOL, mi asignatura prefeririisima. ** letter-spacing (espcio entre letras) medidas (px, pt, em...) ** word- spacing (espacio entre palabras) medidas (px, pt, em...) *ENLACES **Pseudoclases: :link (enllace que no est visitado) :visited (enlace visitado) :hover (passa el cursor por encima) :active (cuando hacemos clic antes de soltar el botn) a:hover {text-decortion: none;} *IMGENES ** <a heref=htto://malibu.org> <img src=malibu.jpg alt=bla bla/> </a> **se aade por defecto un borde, podemos quitarlo img {border: none;} ** dimensiones #imggran { width:200px; height: 100px; } *LISTAS Monserrat roig Tirant lo Blanch Severo Ochoa 1. 2. 3. Nit de l'alb Misteri d'elx Sixto marco

    list-slyle-type (tipo de vieta) (cambia la o el 1. 2. 3...) circle, square, lower-roman **list-style-pisition inside | outside

    Esta es la vieta. Y est situada outside. Queda a l'equerra de totes les lnes del pargraf.

    Esta es, por el contrario, una vieta inside. Queda al mismo sitio donde comienza cada una de las lineas a partir de la segunda linea. ** list-style-image (imagen diferente para la lista) ul {list-style-image: url(magrana.jpeg)} ul {list-style-image:url (magrana.jpeg);} *TABLAS **border-collapse (fusin de bordes) collapse | separate border-spacing (con separate, con la otra desaparece el espacio entre lineas) empty-cells (tratamiento de las celdas vacias) (las celdas sin valor pueden ser visibles o no) show | hide **Caption-side top | bottom **pseudoclase :hover (pasas con el cursor por encima de una celda esta cambia) tr:hover {background: green;} *FORMULARIOS ** padding (para alejar en una caja de formulario donde comienza el texto) input {padding: 0.3em;} ***NOTA: input es unaetiqueta de las cajas de formularios y otras cosas ***NOTA: label etiqueta nombre de las cajas de los formularios Nombre: Apellidos: label input **para alinear las cajas de un formularios usaremos un div <div> <label for=nom>Nombre</label> <input type=text id=nombre /> </div> CSS div label { width: 25%; float: left; }

    input:focus { background: green; }

    POSICIONAMIENTO Y VISUALIZACIN 5 formas de posicionamiento: Normativo (esttico) Relativo: posicionar la caja de forma normal y a continuacin desplazarla respecto de su posicin original. Absoluto: la posicin se establece de forma absoluta respecto del elemento contenedor de la caja. Fijo: quedar en una posicin fija independientemente de que desplacemos las barras de scroll. Flotante: desplaza la caja todo lo posible hacia la izquierda o derecha. (nico que no se hace con position) POSITION *static | relative | absolute | fixed ** propiedades: top, right, bottom y left .relativa { position: relative; top: 8 em; } RELATIVO -El desplazamiento de una caja no afecta al resto de cajas. Es decir al mover un elemento no afecta a los de su alrededor, de este modo puede ocurrir que una caja se superponga a otra creando solapamientos. ABSOLUTO -El resto de cajas ignoraran a la caja posicionada de forma absouta y ocuparan su lugar (el de la caja que se ha movido). -Tambin se producen solapamientos. Pero el desplazamiento de una caja hace que las otras intenten ocupar su lugar. FIJO - La posicin es inamovible dentro de la ventana del navegador. - Es un caso particular del posicionamiento absoluto. - Una caja no se mover . FLOTANTE -La caja flotante se posiciona lo mas a la izquierda o derecha posible. - El resto de cajas ocupan el lugar dejado por la caja flotante (si ellas no son flotante). - Las cajas que son flotantes no se chafan entre si. - propiedad: float (left | right | none) - clear: especifica si un elemento tiene que fluir o no al lado de un elemento flotante. I_ndica el lado del elemento que no tiene que ser adyacente a ninguna caja flotante. (left | right | none)

    VISUALIZACIN *display: oculta completamente un elemento, como si no existiera. Los elementos intentran ocupar su lugar *visibility: hace invisible un elemento. Pero sigue ah. *display (puede convertir tb elemento en bloque en elementos en lnea y a la inversa) block | inline | none <p> Hola <em>cmo</em> estas locor!</p> (em= elemento en linea) <p> hola como estas loco</p> <div>...</div> (elementos en bloque, van uno debajo de otro) *overflow controla la forma en que se visualizan los contenidos que sobresalen de sus elementos. Visible | hidden | scroll visible, el texto que se salga se mostrara fuera de la caja Hola como estas loco vente para aca que te voy a matar hidden, se muestra solo la parte que no sobresale del texto Hola como estas loco vente para aca scroll, el texto que no cabe en la caja no se muestra, pero habr una barra de scroll para acceder a ella. (es un amago de scroll el pequeo rectngulo que puse al lado xD) Hola como estas loco vente para aca

    LAYOUT (DISSEO) #contenidor { width: 80%; margin: 0 aouto; //centrado y mismo margen a izq y der } <body> <div id=contenidor> </div> </body>

    estilo.css #contenedor { width: 80%; margin: 0 auto; } #cabecera {} #menuizq { float:left; width: 15%; } #contenido { float:left; width: 65%; } #footer { clear:both; //no puede tener elementos flotantes ni a izq ni a derecha } documento.html <body> <div id=contenedor> <div id=cabecera>...</div> <div id=menuizq>...</div> <div id=contenido>...</div> <div id=footer>...</div> </div> </body>

    personalizar el cursor Con: cursor

    Imprimir enlaces: interNOSTRUM stilo a:after { // en la etiqueta del enlace a lo que debe de imprimirse content: (attr(href)); } //imprime la direccin de la pagina en la impresin interNOSTRUM (http://internostrum.com)

    You might also like