Ejemplos codigo html, css y javascript. Formato web y etiquetas HTML5.
Crea un documento HTML, con el titulo Flex-box, con las siguientes caracteristicas:
Documento CSS de estilos separado del HTML.
10 imagenes de 200 pixeles de ancho
Las imagenes deben adaptarse a la pantalla y cambiar al espacio disponible hacia abajo
Crea un documento HTML con el título "Selectores CSS", con las siguientes caracteristicas:
1. Enlaza el fichero CSS con el documento HTML
2. Dentro del body del documento crea un encabezado, poniendole un identificador unico.
3. Añade una lista ordenada con 4 elementos, poniendole una clase al primer elemento.
4. Añade una lista desordenada con 4 elementos, ponidendole la misma clase del punto anterior al primer elemento.
5. En el CSS eliminar los margenes y paddings del documento, con el selector universal * ponerlos a 0.
6. El primer elemento de cada lista mostrarlo en color azul.
7. A traves de encadenar selectores, hacer que el primer elemento de cada lista tenga un tamaño de 1.8rem.
Crea un nuevo documento HTML con las siguientes caracteristicas:
Dentro de la seccion, incluir 3 articulos (articles), segun lo siguiente:
1. Titulo H2 indicando Video
Incluyendo un video de Youtube
2. Titulo H2 indicando Imagen
Incluyendo una imagen referenciada por URL
3. Titulo H2 indicando Audio
Busca audio en internet y enlazalo desde su etiqueta correspondiente
Crea un documento HTML con una tabla que contenga lo siguiente:
1. Columnas: Nombre, Apellidos, Nota final
2. Con 4 filas rellenas de datos
Crea un documento HTML con un formulario que contenga:
1. Un campo de texto nombre
2. Un campo numerico edad
3. Un campo de area de texto
4. Boton para enviar
5. Boton de reset
Nota: en el action del formulario poner "#" para que no cambie de pagina.
Ejercicio practico en el que se crea una linterna que se apaga o enciende al hacer click en la imagen.
En el siguiente #video vemos como cambiar el color primario y secundario de la #web mediante #javascript, con el que cambiaremos el archivo #css que se cargara para mostrar el color del sitio.
Propongo como reto crear la siguiente #web segun el ejemplo del video 👇
Ejemplo de creacion de una lista de tareas basicas con JavaScript.
Ya he subido a #github el codigo usado en tutorial #javascript / #jquery
https://github.com/ticoticotaa/Tutorial-JavaScript
1. Solicita al usuario 6 numeros y muestra el valor mayor y menor.
window.onload = function(){
//console.log('Hola');
var mayor = 0;
var menor=99999;
var numeros = [];
//captura de datos
for(var i=0;i<6;i++){
numeros[i]=parseInt(prompt('Dime un numero y te indicare cual es el mayor de los seis...'));
}
//recorremos array y comprobamos cual es el mayor / menor
for(var i=0;i<numeros.length;i++){
if(numeros[i]>mayor){
mayor = numeros[i];
}
if(numeros[i]<menor){
menor = numeros[i];
}
}
console.log('Hemos terminado de comprobar');
console.log(`El numero mayor es ${mayor}`);
console.log(`El numero menor es ${menor}`);
}
2. Igual que el ejercicio anterior pero que solicite numeros hasta que el usuario indique "fin".
window.onload = function(){
//console.log('Hola');
var mayor = 0;
var menor=99999;
var numeros = [];
var usuario = "";
do{
usuario = prompt('Dime un numero o escribe "fin" para terminar');
if (usuario!='fin'){
usuario = parseInt(usuario);
numeros.push(usuario);
}
}while(usuario!='fin');
//recorremos array y comprobamos cual es el mayor / menor
for(var i=0;i<numeros.length;i++){
if(numeros[i]>mayor){
mayor = numeros[i];
}
if(numeros[i]<menor){
menor = numeros[i];
}
}
if(numeros.length>2){
console.log('Hemos terminado de comprobar');
console.log(`El numero mayor es ${mayor}`);
console.log(`El numero menor es ${menor}`);
}else{
console.log('No hay numeros suficientes para comprobar mayor y menor');
}
}
Captura y controla los errores en el script de #javaScript para evitar que se "rompa" la ejecucion del #codigo.
