Css

CSS

CSS se usa para controlar el diseño de varias páginas web a la vez y, es un lenguaje usado para definir el estilo de una pagina web o cualquier documento sus siglas hacen referencia a: C ascading S tyle S heets(Hojas de estilo en cascada).

<STYLE>

Es una etiqueta utilizada en HTML y CSS cuya función es definir información de estilo a una etiqueta definida como veremos en el ejemplo:

ATRIBUTO STYLE EN CSS

ES UN ATRIBUTO CUYA FUNCIÓN ES DEFINIR ESTILO A LA ETIQUETA EN LA CUAL ESTÁ.

ATRIBUTO ID EN CSS

ES UN ATRIBUTO QUE ASIGNA AL TEXTO EL TIPO DE ESTILO CON UN INDICE ESTABLECIDO PREVIAMENTE.

EL EJEMPLO QUE MOSTRARÉ ACLARARA CUALQUIER TIPO DE DUDA.

ATRIBUTO CLASS CSS

ES UN ATRIBUTO QUE CAMBIA EL ESTILO DE LA ETIQUETA CON UNA CLASE ESPECIFICA PREVIAMENTE ESTABLECIDA POR EL USUARIO:

¿CUÁL ES EL CÓDIGO DE HTML CORRECTO PARA REFERIRSE A UNA HOJA DE ESTILO EXTERNA?

PARA INSERTAR UNA HOJA DE ESTILO EXTERNA

¿QUÉ ETIQUETA HTML SE UTILIZA PARA DEFINIR UNA HOJA DE ESTILO INTERNA?

SE USA LA ETIQUETA DE ESTILO( STYLE) DENTRO DE LA ETIQUETA DE ENCABEZADO(HEAD).

¿CUÁL ES EL CÓDIGO DE HTML CORRECTO USAR CSS EN LINEA DE CÓDIGO?

DESPUÉS(CSS COMO) W3SCHOOLS)

¿CÓMO SE INSERTA UN COMENTARIO EN CSS?

UN COMENTARIO  SE INSERTA CON ESTOS SÍMBOLOS /*(PARA EMPEZAR EL COMENTARIO)Y */(PARA TERMINAR EL COMENTARIO).

¿CUÁL ES LA PROPIEDAD DE CSS, QUE PERMITE CAMBIAR EL COLOR DE FONDO?

LA PROPIEDAD UTILIZADA PARA CAMBIAR EL COLOR DE FONDO ES: BACKGROUND-COLOR

¿CUAL ES LA PROPIEDAD DE CSS QUE ES USADA PARA CAMBIAR EL COLOR DE UN ELEMENTO?

PARA CAMBIAR EL COLOR DE UN ELEMENTO(ETIQUETA)EN CSS SE UTILIZA LA PROPIEDAD: COLOR

12-¿QUE PROPIEDAD DE CSS CONTROLA EL TAMAÑO DEL TEXTO?

PARA CONTROLAR EL TAMAÑO DEL TEXTO SE TIENE QUE UTILIZA RLA PROPIEDAD DE: FONT-SIZE

¿CUAL ES LA SINTAXIS CORRECTA DE CSS PARA ASIGNAR NEGRITAS A TODAS LA ETIQUETAS P DE UN ARCHIVO HTML?

LA SINTAXIS CORRECTA ES ESTA:

DESPUÉS(SELECTORES CSS)W3SCHOOLS

¿CUAL SERÍA LA SINTAXIS EN CSS, PARA MOSTRAR LOS LINKS O HIPERVÍNCULOS SIN EL SUBRAYADO?
LA SINTAXIS CORRECTA PARA MOSTRAR LOS LINKS SIN EL SUBRAYADO ES ESTA.

• A:LINK - AL INDICAR LA PROPIEDAD VA A HACER EFECTUADA SI EL USUARIO NUNCA HA VISITADO LA PÁGINA.
• A:VISITED - AL INDICAR LA PROPIEDAD SE VA A ACTIVAR CUANDO EL USUARIO A VISITADO LA PÁGINA.
• A:HOVER - SE ACTIVA LA PROPIEDAD CUANDO EL USUARIO UNA ACCIÓN SOBRE EL ENLACE.
• A:ACTIVE -SE ACTIVA CUANDO EL USUARIO HACE CLICK SOBRE EL ENLACE.

¿CUÁL SERÍA LA FORMA DE HACER QUE CADA PALABRA EN UN TEXTO INICIE CON UNA MAYÚSCULA MEDIANTE UN CÓDIGO DE CSS?

PARA HACER QUE CADA PALABRA DEL TEXTO-INICIE CON UNA LETRA MAYÚSCULAS SE TIENE QUE ESCRIBIR ESTE CÓDIGO:

COMO SE PUEDE VER EN ESTE EJEMPLO SE TIENE QUE UTILIZAR (TEXT-TRANSFORM) CON EL VALOR DE CAPITALIZE.

RESULTADO:

¿CUAL PROPIEDAD ES USADA PARA CAMBIAR TIPO DE LETRA EN UN TEXTO, DE CUALQUIER TIPO DE HTML, CON CSS?

ESTA PROPIEDAD RECIBE EL NOMBRE DE (FONT-FAMILY) Y DESPUÉS DE LOS DOS PUNTO(:) COLOCAS EL VALOR O EL TIPO DE LETRA. EJEMPLO:

¿COMO SE PUEDE HACER EN CSS, PARA PONER UN TEXTO EN NEGRITAS?

PARA PONER UN TEXTO EN NEGRITAS SE TIENE QUE UTILIZAR FONT-WEIGHT LA CUAL PERMITE CAMBIAR LA GRAVEDAD CON LA CUAL SE ESCRIBE LA LETRA.

SINTAXIS:

RESULTADO:

¿CUAL ES LA PROPIEDAD DE CSS PARA CAMBIAR EL MARGEN IZQUIERDO DE CUALQUIER ELEMENTO HTML?

PARA CAMBIAR EL MARGEN IZQUIERDO SE UTILIZA LA PROPIEDAD MARGIN-LEFT LA CUAL SIRVE PARA ALEJAR EL TEXTO A CIERTA CANTIDAD ESPECIFICADA DE LA IZQUIERDA DE LA PÁGINA.

EJEMPLO:

RESULTADO:

¿CUAL SERIA LA FORMA DE COLOCAR CUADRADOS EN VEZ DE CÍRCULOS EN UNA LISTA NO ORDENADA MEDIANTE CSS?

PARA COLOCAR CUADRADOS EN VEZ DE CIRCULOS EN UNA LISTA DESORDENADA SE UTILIZA LIST-STYLE-TYPE

LA CUAL PERMITE ESPECIFICAR EL TIPO DE VIÑETA TANTO DE UNA LISTA ORDENADA COMO DESORDENADA.

SINTAXIS:

RESULTADO:

¿CUÁL SERÍA EL CÓDIGO PARA SELECCIONAR(SOLO AFECTAR) SOLO A LAS ETIQUETAS “P” DENTRO DE UNA ETIQUETA “DIV” DENTRO DE UN ARCHIVO DE HTML?

PARA SELECCIONAR SOLO A LAS ETIQUETAS "P" DENTRO DE UNA ETIQUETA "DIV" SE COLOCA LA ETIQUETA "DIV" Y LUEGO SEPARADO POR UNA COMA SE COLOCA LA ETIQUETA "P".

SINTAXIS:

RESULTADO:

¿CUÁL ES UNA DE LAS PROPIEDADES QUE SE UTILIZAN PARA GENERAR ESPACIO ALREDEDOR DE CONTENIDO DE UN ELEMENTO, EN EL INTERIOR DE CUALQUIER FRONTERAS DEFINIDAS EN CSS?

PARA GENERAR ESPACIO ALREDEDOR DEL CONTENIDO DE UN ELEMENTO SE PUEDE UTILIZAR LA PROPIEDAD "WIDTH"(ANCHO)PARA AJUSTAR EL ANCHO DE LAS FRONTERAS O BORDES.
SINTAXIS:

RESULTADO:

¿CUÁL ES UNA DE LAS PROPIEDADES QUE SE UTILIZAN PARA GENERAR UNA LÍNEA QUE SE DIBUJA ALREDEDOR DE LOS ELEMENTOS, FUERA DE LAS FRONTERAS, PARA HACER QUE EL ELEMENTO "DESTAQUE". MEDIANTE CSS

PARA ESTO PRIMERO SE NECESITA LA PROPIEDAD "OUTLINE-STYLE" QUE SIRVE PARA DEFINIR EL ESTILO DE EL ESQUEMA Y DEFINIMOS EL COLOR CON "OUTLINE-COLOR".

SINTAXIS:

RESULTADO:

¿CUÁL ES UNA DE LAS PROPIEDADES QUE SE UTILIZAN PARA MANIPULAR EL ESTILO DE CUANDO EL CURSOR DEL MOUSE PASA POR ENCIMA. MEDIANTE CSS?

ESTA PROPIEDAD SE LLAMA "HOVER" Y SE EJECUTA CUANDO EL USUARIO CRUZA EL MOUSE SOBRE EL CONTENIDO.
EJEMPLO:

RESULTADO (ANTES):





RESULTADO (DESPUÉS):

USO DE LA PROPIEDAD INLINE

SE USA PARA ALINEAR LOS ELEMENTOS DE TEXTO EN UN BLOQUE.
SINTAXIS:

RESULTADOS:

Css

PROPIEDADES DE FONDOS DE LA PAGINA

background: Una propiedad abreviada para todas las propiedades background-* 


Background-color: Especifica el color de fondo de un elemento.

Propiedad establece una o más imágenes de fondo de un elemento

background-image: Especifica una o más imágenes de fondo para un elemento

propiedad establece si una imagen se desplaza fondo con el resto de la página, o es fijo.

background-attachment: Establece si una imagen de fondo se desplaza con el resto de la página o si es fija

Javascript

¿Que es javascript?

es un lenguaje de programación que se utiliza principalmente para crear páginas web dinámicas.

¿Que etiqueta dentro de HTML, me permite introducir un script de JavaScript?

<script> 

ASP Y JAVA

AQUI ESTAN LAS DOS DIAPOSITIVAS DE GOOGLE DRIVE

Este es el de JAVA,Este es el de ASP

ATRIBUTOS DE HTML

Atributos básicos.

Los atributos de las etiquetas HTML sirven para definir detalles de comportamiento o presentación de la etiqueta a los que se les coloca. Se escriben dentro de la propia etiqueta con su nombre de atributo y el valor del atributo entre comillas.

href: se utiliza para indicar la URL a la que apunta el enlace  y es el atributo mas importante para la etiqueta <a>.

Ejemplo: <a href="https://www.w3schools.com">This is a link</a>

SRC: Donde el atributo src contiene como valor un URL. Este URL indica la dirección y el nombre de la imagen que se desea insertar. Esta dirección puede ser absoluta o relativa.

Ejemplo: <img src="img_girl.jpg">

width yheight: proporcionan información para las imágenes.

Ejemplo: <img src="img_girl.jpg" width="500" height="600">



alt: especifica un texto alternativo que se utilizará, si una imagen no se puede visualizar.

Ejemplo: <img src="img_girl.jpg" alt="Girl with a jacket">

style: se utiliza para especificar el estilo de un elemento, como el color, tipo de letra, tamaño, etc.

Ejemplo: <p style="color:red">This is a paragraph.</p>

lang: Con este atributo se declara el lenguaje.

Ejemplos: <html lang="en-US">

title:  añade atributo al <p> elemento. El valor del atributo de título se muestra como un consejo al pasar el ratón sobre el párrafo.

Ejemplo: <p title="I'm a tooltip">

This is a paragraph.

</p>

Atributos para internacionalización

accesskey: provee un indicio para generar un atajo de teclado para el elemento actual.

Ejemplo: <a href="https://www.w3schools.com/css3" accesskey="c">CSS3</a>

class: es una lista de las clases del elemento separada por espacios.

Ejemplo: <h1 class="intro">Header 1</h1>

contenteditable: es un atributo enumerado que indica si el elemento debe de ser editable por el usuario.

Ejemplo: <p contenteditable="true">This is an editable paragraph.</p>

data-*: forman una clase de atributos , llamados atributos de datos modificables , permite a la información propietaria ser intercambiada entre el HTML y su representación en el DOM que puede ser usada por scripts.

Ejemplo: <li data-animal-type="bird">Owl</li>

dir: es un atributo enumerado que indica la direccionalidad del texto de los elementos.

Ejemplo: <p dir="rtl">Write this text right-to-left!</p>

draggable: es un atributo enumerado que indica si el elemento puede ser arrastrado , usando el HTML Drag and Drop API.

Ejemplo: <p draggable="true">This is a draggable paragraph.</p>

dropzone: es un atributo enumerado que indica qué los tipos de contenido pueden ser soltados en un elemento , usando la API Drag and DroP. 

Ejemplo: <div dropzone="copy"></div>

hidden: es un atributo Booleano que indica que el elemento todavía no está , o ya no es relevante.

Ejemplo: <p hidden>This paragraph should be hidden.</p>

id: define un identificador único (ID) el cual no debe repetirse en todo el documento.

Ejemplo: <h1 id="myHeader">Hello World!</h1>

lang: participa en la definición del lenguaje del elemento , el lenguaje en que están escritos los elementos no editables o el lenguaje en el cual los elementos editables deberían de estar escritos.

Ejemplo: <p lang="fr">Ceci est un paragraphe.</p>

spellcheck: es un atributo enumerado que define si el elemento debe de ser verificado por errores de deletreado.

Ejemplo: <p contenteditable="true" spellcheck="true">This is a paragraph.</p>

style: contiene declaraciones de estilo  CSS a ser aplicados a un elemento . Notar que es recomandado para los estilos ser definidos en archivo o archivos separados .

Ejemplo: <p style="color:green">This is a paragraph.</p>

tabindex: indica si su elemento puede ser enfocado, y si participa en la navegación secuencial del teclado (usualmente con la tecla Tab, de ahí el nombre).

Ejemplo: <a href="https://www.w3schools.com/" tabindex="2">W3Schools</a>

title: contiene un texto representado información relacionada al elemento al cual pertenece.

Ejemplo: <p title="Free Web tutorials">W3Schools.com</p>

translate: es un atributo enumerado que es usado para especificar si los valores del atributo de un elemento y los valores de sus nodos hijos de Texto serán traducidos cuando la página es localizada , o si se debe de dejarlos sin cambio. 

Ejemplo: <p translate="no">Don't translate this!</p>

Atributos de eventos

onload: el evento "onload" es lanzado cuando el agente de usuario termina de cargar una página o todos los marcos en un ser de marcos. Este evento es exclusivo de los elementos HTML body yHTML framset.

Ejemplo: <body onload="myFunction()">

onunload: el evento "onunload" es disparado cuando el agente de usuario retira el documento de una ventana o marco. este evento es exclusivo de los elementos HTML body y HTML framset.

Ejemplo: <body onunload="myFunction()">

onclick: el evento "onclick" ocurre cuando se realiza un click sobre el elemento.

Ejemplo: <button onclick="myFunction()">Click me</button>

ondblclick: el evento "ondblclick" es ejecutado cuando se hace un doble click sobre el elemento.

Ejemplo: <button ondblclick="myFunction()">Double-click me</button>

onmousedown: el evento "onmousedown" es lanzado cuando el botón del mouse es presionado sobre el elemento (independientemente de que sea soltado o no).

Ejemplo: <p onmousedown="mouseDown()">Click the text!</p>

onmouseup: el evento "onmouseup" es disparado cuando el botón del mouse se suelta sobre el elemento.

Ejemplo: <p onmouseup="mouseUp()">Click the text!</p>

onmouseover: el evento "onmouseover" ocurre cuando el mouse es puesto sobre el elemento.

Ejemplo: <img onmouseover="bigImg(this)" src="smiley.gif" alt="Smiley">

onmousemove: el evento "onmousemove" es ejecutado cuando el mouse es movido mientras está sobre el elemento.

Ejemplo: <img onmousemove="bigImg(this)" src="smiley.gif" alt="Smiley">

onmouseout: el evento "onmouseout" es lanzado cuando el mouse se quita de encima de un documento.

Ejemplo: <img onmouseout="normalImg(this)" src="smiley.gif" alt="Smiley">

onfocus: el envento "onfocus" es disparado cuando un elemento recibe el enfoque, bien sea a través del mouse o por navegación tabulada. Este evento es exclusivo de aquellos elementos que pueden recibir el enfoque: HTML a, HTML area, HTML label, HTML input, HTML select, HTML textarea, y HTML button.

Ejemplo: <input type="text" id="fname" onfocus="myFunction(this.id)">

onblur: el evento "onblur" ocurre cuando el elemento pierde el enfoque bien sea a través del mouse o por navegación tabulada. Este evento es exclusivo de aquellos elementos que pueden recibir el enfoque.

Ejemplo: <input type="text" name="fname" id="fname" onblur="myFunction()">

onkeypress: el evento "onkeypress" es ejecutado cuando una tecla es presionada y luego soltada mientras el elemento tiene el enfoque. Este evento es exclusivo de aquellos elementos que pueden recibir el enfoque.

Ejemplo: <input type="text" onkeypress="displayResult()">

onkeydown: el evento "onkeydown" es lanzado cuando una tecla es presionada (independientemente de que sea solatada o no) mientras el elemento tiene el enfoque. Este evento es exclusivo de aquellos elementos que pueden recibir el enfoque.

Ejemplo: <input type="text" onkeydown="myFunction()">

onkeyup: el evento "onkeyup" es disparado cuando una tecla es solatada mientras el elemento tiene el enfoque. Este evento es exclusivo de aquellos elementos que pueden recibir el enfoque.

Ejemplo: <input type="text" onkeyup="myFunction()">

onsubmit: el evento "onsubmit" ocurre cuando el formulario es enviado. Este evento es exclusivo del elemento HTML form.

Ejemplo: <form onsubmit="myFunction()">

  Enter name: <input type="text">

  <input type="submit">

</form>

onreset: el evento "onreset" es ejecutado cuando el formulario es reestablecido a sus valores por defecto. Este evento es exclusivo del elemento HTML form.

Ejemplo: <form onreset="myFunction()">

  Enter name: <input type="text">

  <input type="reset">

</form>

onselect: el evento "onselect" es lanzado cuando un usuario selcciona texto en un campo de texto. Este evento es exclusivo de los elementos HTML input y HTML textarea.

Ejemplo: <input type="text" onselect="myFunction()" value="Hello world!">

onchange: el evento "onchange" es disparado cuando un control pierde el enfoque y su valor ha sido modificado desde que recibió el enfoque por última vez. Este evento es exclusivo de los elementos HTML input, HTML select y HTML textarea.

Ejemplo: <select onchange="myFunction()">