Taller programación inicial

Entradas

Mostrando las entradas de agosto, 2022

Media

agosto 29, 2022

Ejercicio 32: Crear una página en html, agregar minimamente: 1. Un nombre a la página 2. Un video desde un archivo, con los controles y en silencio 3. Un audio desde un archivo, con los controles 4. Insertar otra página en la misma página 5. Un video desde Youtube index.html <!DOCTYPE html > <html> <head> <title> HTML - Media </title> </head> <body > <main> <h1 > Media con HTML </h1> <p > Video y audio desde archivo </p> <video src = "marimonias.mp4" width = "150" height = "300" controls muted > Video </video> <audio controls > <source src = "transicion.mp3" > </source> </audio> <p > Página web insertada y video desde Youtube </p>

Marcador (id y links)

agosto 29, 2022

Ejercicio 31: Crear una página en html, agregar minimamente: 1. Un nombre a la página 2. Escribir una página que contenga "5 capítulos" y 2 que se dirijan desde la parte superior del body a sus respectivos capítulos (simulando un índice de drive o word) index.html <!DOCTYPE html > <html> <head> <title> Marcador o índice </title> </head> <body > <main> <p > <a href = "#C2" > Ir al capítulo 2 </a > </p> <p > <a href = "#C5" > Ir al capítulo 5 </a > </p> <h2 > Capítulo 1 </h2> <p > Explicación de este capítulo </p> <h2 id = "C2" > Capítulo 2 </h2> <p > Explicación de este capítulo </p> <h2 > Capítulo 3 </h2> <p > Explicaci

Atributo Class y Span

agosto 26, 2022

Ejercicio 30: Crear una página en html, agregar minimamente: 1. Un nombre a la página y un favicon 2. CSS de forma interna: a. U na clase, que contenga: fondo, letra de color y espacio b. Otra clase, que contenga: distinto tamaño, y letra de color 3. Escribir una página usando las clases en partes de párrafos, títulos, etc. Utilizando las clases al menos 2 veces en 2 tipos de textos, y una vez utilizar 2 clases en el mismo framento index.html <!DOCTYPE html > <html> <head> <title> Atributos Class y Span </title> <link rel = "icon" size = "16x16" href = "favicon-16x16.png" > <style> .backgroundStyle { background-color : rgba ( 240 , 128 , 128 , 0.7 ) ; color : darkslategray ; padding : 10px ; } .importantRed { font-size :

HTML - Menú de navegación

agosto 22, 2022

Ejercicio 29: Crear una página en html, agregar minimamente: 1. Un nombre a la página 2. CSS de forma interna: a. U n menú de navegación de al menos 3 páginas index.html <!DOCTYPE html > <html> <head> <title> HTML - Menú de navegación </title>  <style> ul { list-style-type : none ; margin : 0 ; padding : 0 ; overflow : hidden ; background-color : #333333 ; } li { float

CSS - Enlace con color de fondo

agosto 22, 2022

Ejercicio 28: Crear una página en html, agregar minimamente: 1. Un nombre a la página 2. CSS de forma interna: a. U n enlace cambiando el color de fondo cuando no fue visitado, cuando fue visitado, cuando se pasa el cursor encima y cuando se cliquea index.html <!DOCTYPE html > <html> <head> <title> CSS - Enlace 2 </title> <style> a:link { color : white ; background-color : rgba ( 31 , 133 , 74 , 0.7 ) ; padding : 15px 50px ; text-align : center ; text-decoration : none ; display : inline-block ; } a:visited { color : white ; background-color : rgba ( 31 , 130 , 133 , 0.7 ) ; padding : 15px 50px ; text-align : center ; text-decoration : none ; d

CSS - Enlace color letra

agosto 22, 2022

Ejercicio 27: Crear una página en html, agregar minimamente: 1. Un nombre a la página 2. CSS de forma interna: a. U n enlace cambiando el color de letra cuando no fue visitado, cuando fue visitado, cuando se pasa el cursor encima y cuando se cliquea index.html <!DOCTYPE html > <html> <head> <title> CSS - Enlace 1 </title> <style> a:link { color : darkred ; background-color : transparent ; text-decoration : none ; } a:visited { color : crimson ; background-color : transparent ; text-decoration : none ; } a:hover { color : tomato ; background-color : transparent ; text-decoration : underline ; } a:active { color : dar

HTML - Listas

agosto 19, 2022

Ejercicio 26: Crear una página en html, agregar minimamente: 1. Un nombre a la página 2. Una lista no ordenada a. Cambiar marcador 3. Una lista ordenada a. Cambiar el marcador b. Inversa 4. Otra lista ordenada a. Cambiar el comienzo 5. Una lista descriptiva index.html <!DOCTYPE html > <html> <head> <title> HTML - Listas </title> </head> <body > <h1> Listas en HTML </h1> <p> Listas no ordenada </p> <ul style = "list-style-type:square;" > <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> </ul> <p> Listas ordenada 1 </p> <ol type = "A" reserved > <li> Item 1 </li> <li> Item 2 </li> <li&

HTML - Favicon

agosto 12, 2022

Ejercicio 25: Crear una página en html, agregar minimamente: 1. Un nombre a la página 2. Un favicon index.html <!DOCTYPE html > <html> <head> <title> Icono </title> <link rel = "icon" size = "16x16" href = "favicon-16x16.png" > </head> <body > </body> </html> ...

CSS - style (externo)

agosto 12, 2022

Ejercicio 24: Crear una página en html, agregar minimamente: 1. Un nombre a la página 2. CSS de forma externa, creando un archivo styles.css: a. U n color oscuro para el fondo de mi página web (como si fuera tema nocturno), utilizando rgb b. O tro color para el borde de mis títlos principales c. P ara mi subtítulo 2 un color de fondo transparente al 70% y agregar una imagen d. P ara mis párrafos otro color de letra, agregar margen y cambiar tipo de letra 3. Redactar una página con 2 títulos, 2 subtítulos y 3 párrafos index.html <!DOCTYPE html > <html> <head> <title> CSS - externo </title> <link rel = "stylesheet" href = "styles.css" > </head> <body > <main> <h1 > CSS externo </h1> <p > Párrafo 1 </p>

CSS - style (interno)

agosto 08, 2022

Ejercicio 23: Crear una página en html, agregar minimamente: 1. Un nombre a la página 2. CSS de forma interna: a. U n color para el fondo de mi página web b. O tro color para la letra de mis títlos principales c. P ara mis subtítulos distintos colores de fondo y centrarlos d. P ara mis párrafos un color de borde y un espacio de 40px 3. Redactar una página con 2 títulos, 3 subtítulos y 4 párrafos index.html <!DOCTYPE html > <html> <head> <title> CSS - interno </title> <style> body { background-color : papayawhip ; } h1 { color : darkolivegreen ; } h2 { background-color : lightgrey ; text-align : center ; } h3 { background-color : lightgreen ; text-align : center ;

CSS - style (en línea HTML)

agosto 08, 2022

Ejercicio 22: 1. Crear una página en html, agregar minimamente: a. Un nombre a la página b. Un color para el fondo c. Un título centrado y distinta tipografía d. Un párrafo con distinto colo de letra y de 20px de tamaño e. Un subtítulo con un borde de color f. Un párrafo con color de fondo index.html <!DOCTYPE html > <html> <head> <title> CSS - en línea </title> </head> <body style = "background-color:lightblue;" > <main> <h1 style = "text-align:center;font-family:'Courier New',Courier,monoespace" > CSS: style (en línea HTML) </h1> <p style = "color:darkslategrey" > Comenzamos con algo de CSS </p> <h2 style = "border: 2px solid darkslateblue" >