Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Video HTML Extraordinaria Iván Zugazaga - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 8 de mayo de 2025 por Iván Z.

1 visualizaciones

Este es mi video de la práctica sobre HTML.

Más información Transcripción

Descargar la transcripción

Bueno, pues yo soy Iván Zugazaga, alumno de segundo de SMRB del Instituto IES Villablanca 00:00:02
y voy a empezar a explicar mi proyecto. 00:00:06
Mi proyecto consta de cuatro documentos HTML, una carpeta con los estilos 00:00:09
y una carpeta con las fotos que he utilizado. 00:00:14
Pues voy a empezar a explicar la página de HTML principal. 00:00:17
Primero lo abrimos con la extensión de Live Server 00:00:21
y mi página principal tiene un header con la clase header1, ¿vale? 00:00:24
Que tiene un font size 50px para hacerla más grande, textaline center para que esté centrada, color blanco, color white para que las letras estén blancas, un font height bold para que esté en negrita y resalte, un font style italic para que esté en cursiva y un text decoration underline para que esté subrayado. 00:00:31
subrayado, luego 00:00:51
sigue una barra de navegación 00:00:52
luego lo continúa una barra de navegación 00:00:54
con un background 00:00:59
linear gradient para que haya un pequeño degradado 00:01:00
de colores 00:01:03
y un margin top 15 para que haya un espacio 00:01:04
entre el header 00:01:07
luego dentro de la barra de navegación 00:01:07
tengo unos divs 00:01:11
con la clase botón 00:01:13
con la clase botón 00:01:14
que tiene background color white 00:01:20
Un width max content para que ocupe el máximo de contenido posible 00:01:21
Un border radius 15px para que el borde esté redondeado 00:01:27
Un padding de 15 para que haya una pequeña separación 00:01:33
Un font size de 15px para que la letra sea un poco más grande 00:01:36
Margin length de 250px para que haya espacio en cada una a la izquierda 00:01:42
margin-top de 10 nuevamente para que haya un pequeño espacio aquí 00:01:47
aquí arriba, perdón 00:01:51
margin-bottom para que haya también un pequeño espacio aquí 00:01:53
color black y text-underline none 00:01:57
y también tengo una etiqueta 00:02:00
que es el dos puntos hover 00:02:03
para que cada vez que pase el cursor del ratón cambie de color 00:02:06
luego tengo aquí un h2 00:02:10
con la frase tres características que me define 00:02:12
Y lo único que tiene este H2 es un font-size. 00:02:15
Luego tengo aquí, ya todo esto está dentro de la etiqueta main, ¿vale? 00:02:20
Con un section para ir separando básicamente las diferentes secciones del documento. 00:02:27
Un section que contiene la clase características, perdón que no la escribo bien, 00:02:37
Con un column count 3 para que tenga 3 columnas 00:02:45
Un width para que sea más largo 00:02:48
Un height para que tenga más profundidad hacia abajo 00:02:50
Float left para que esté a la izquierda 00:02:54
Margin top 10 para dejar un pequeño espacio 00:02:57
Arriba margin bottom 20 nuevamente para dejar aquí un pequeño espacio 00:02:59
Un background color blanched almond para que esté de este color 00:03:03
Padding 5 00:03:07
Border 3px sólido y azul 00:03:11
TextAlincente para que todo esté centrado 00:03:14
Color para que las letras estén en negras 00:03:17
Y un font-size de 20px para que las letras sean un poco más grandes 00:03:20
Y luego en cada columna tengo una característica 00:03:26
Abro una etiqueta artículo y voy poniendo las características 00:03:30
Con un h3 y un párrafo que el h3 tiene en el CSS 00:03:33
Las características de font-height-bold para que esté en negrita 00:03:38
y text underline para que esté subrayado 00:03:43
vale 00:03:45
luego siguiendo 00:03:46
tendría otro section 00:03:49
donde habría 00:03:51
otro h2 que serían dos cosas que nunca dejaría 00:03:52
de hacer 00:03:55
nuevamente tiene las mismas características 00:03:56
que este h2 00:03:59
pondría un hr que el único que le he puesto 00:04:00
ha sido color kaki para que le cambie 00:04:03
el color 00:04:05
y un border 2px 00:04:06
solid para que sea sólido 00:04:09
y se pueda ver mejor 00:04:11
luego tendría un artículo con un h3 clase artículo 2 00:04:13
artículo 2 00:04:18
con un margin rate de 300px para dejar una separación a la izquierda 00:04:22
vale, tendría 00:04:31
voy a cerrar la carpeta de las fotos que si no me lío 00:04:33
tendría un href 00:04:36
vale, que cuando tú pinchas en la foto te abrirá una pestaña nueva 00:04:38
al gimnasio básicamente 00:04:42
y las dos cosas que no dejaré de hacer 00:04:44
que se me ha olvidado decirlas 00:04:47
mis disculpas son ir al gimnasio 00:04:48
y ver la UFC 00:04:50
y luego tendría una clase 00:04:51
una foto, perdón 00:04:53
que es la del gimnasio con un título gimnasio 00:04:55
luego 00:04:58
al cerrar el artículo abriría otra 00:05:00
con un h3 que sea ver la UFC 00:05:02
nuevamente tiene un enlace que si pinchas 00:05:04
te lleva a la página principal 00:05:07
luego la imagen 00:05:08
nuevamente de la UFC con su propio 00:05:10
título de UFC 00:05:12
¿Vale? Luego cerraría el artículo y el section 00:05:14
Pondría otro h2 00:05:17
Que tiene font-height-volt 00:05:19
Y font-size 25px para hacerlo más grande 00:05:21
Pondría nuevamente un hr 00:05:26
¿Vale? Para separarlo 00:05:28
Y abriría otro section con un artículo que tiene de clase artículo 4 00:05:31
Que te pondría un margin-right de 300px 00:05:36
Para dejar bastante margen a la derecha 00:05:39
Y lo que contiene es una S3 00:05:42
Que es la aplicación que más utilizo con frecuencia 00:05:45
Y debajo una foto con un href nuevamente 00:05:50
Que si pinchas te llevaría a Instagram 00:05:53
Y una imagen, que es la imagen de Instagram 00:05:55
Que si tú mantienes el cursor 00:05:59
Saldría Instagram como título 00:06:01
Cierro el main y debajo tengo el footer 00:06:03
¿Vale? Con clase footer index 00:06:06
que tiene font-height-bolt para hacer la letra en negrita, 00:06:09
un background-linear-gradient para tener el mismo degradado que en el NAP, 00:06:16
clear-both para que esté abajo, 00:06:21
un text-alien-center para que esté todo en el centro 00:06:24
y un padding para que haya una pequeña separación. 00:06:26
Vale, pues tendría aquí este texto que la página web que era dada por mí, 00:06:31
luego un br para ponerlo debajo 00:06:35
y nuevamente un enlace que si pinchas aquí te lleva al github para descargarte la aplicación 00:06:38
y luego tendría una site a la izquierda, vale, con la información sobre mí 00:06:44
pero te voy a decir lo que tiene los sites, que tiene background color khaki para que esté de este color 00:06:53
un color black para que las letras estén en negro, float left para que esté a la izquierda 00:07:00
Un Width para que sea más largo, un Height de 800px para que tenga más profundidad hacia abajo, un Margin Top para que haya una pequeña separación aquí, Textaline Center para que las letras estén a la izquierda y un Border sólido negro para que se pueda remarcar. 00:07:06
Esta site contiene información sobre mí y este contiene datos y esta site tiene básicamente las mismas características que este en el CSS. 00:07:28
Pasamos al currículum donde tiene nuevamente el header, la barra de navegación con un degradado de colores y tiene la clase nap currículum, ¿vale? 00:07:36
y un margin top para que haya una pequeña separación, un dos puntos hover para que los deep al pasar el ratón se pongan en gris 00:07:48
y luego dos asides nuevamente iguales que los de la página principal con exactamente las mismas características, lo único cambiando el color. 00:08:02
Vale, voy a empezar ya a explicar la página del currículum 00:08:13
Tendríamos para empezar un main para que todo sea principal 00:08:19
Un div con clase encabezado que tiene background color este color 00:08:23
Para que sea azul 00:08:33
Un height de 230px para que esto sea más profundo 00:08:35
Y un color white para que todo lo que esté dentro esté en blanco 00:08:40
Una imagen con la clase imagen 00:08:43
Que es básicamente mi foto 00:08:47
Que tiene un margin top de 50 para que haya un espacio 00:08:51
Tiene un width de 110 para que sea más grande 00:08:56
Tiene un border sólido negro para que se resalte 00:09:00
Y un margin left para que haya un espacio a la izquierda 00:09:02
Siguiendo con el currículum 00:09:04
Habría un section con un h2 y un h4 00:09:07
que tiene float right para que esté a la derecha 00:09:12
margin left 120 00:09:17
padding right 50 00:09:20
y margin top 60 para que haya sus respectivos espacios 00:09:22
luego seguiría una lista ordenada 00:09:25
con la clase información 00:09:32
float right para que esté por aquí 00:09:34
y un margin top para que haya un espacio 00:09:40
y siguiendo 00:09:43
tiene el único cambio que he hecho ha sido poner list style imagen url para que sustituir el punto por esta foto 00:09:46
y un textaline left para que salga a la izquierda y con esto es exactamente lo mismo 00:09:55
cerraríamos la barra de navegación el div perdón abriríamos otro con un section que sea class sobre mi 00:10:03
que tiene un margin button de 15px y un textaline left para poner esto todo a la izquierda 00:10:10
vale 00:10:16
tendría un 00:10:17
h2 con clase yo 00:10:20
vale 00:10:21
lo único que tiene es un float left para que 00:10:23
esté a la izquierda, padded left para que haya 00:10:26
un espacio a la izquierda 00:10:28
text decorator para que esté subrayado 00:10:30
font style para que esté en cursiva 00:10:32
margin top para que haya espacio 00:10:35
arriba y un margin bottom 00:10:36
para que haya espacio abajo 00:10:38
vale 00:10:40
y luego tendría un h3 00:10:41
Un H3 que pone estudiantes en empresa de celebrar con ganas de conseguir trabajo 00:10:45
Que tiene un color white para que esté en blanco 00:10:50
Y un font size para que esté más grande 00:10:53
Luego seguiríamos con educación y preparación 00:10:55
Que es otro H2 con esta clase 00:11:00
Que tiene los mismos rasgos que esta para que estén alineadas 00:11:03
Luego dentro lo seguiría una tabla 00:11:08
que tiene un TH del tiempo que estuve cursando la ESO 00:11:12
y un TD de donde cursé la ESO 00:11:18
y también un TH del tiempo que estoy cursando este grado 00:11:20
y un TD en donde lo estoy haciendo 00:11:26
por ejemplo la ESO empecé el 1 de septiembre del 2018 00:11:28
y acabé el 20 de junio del 2022 en el GS de Moratalab 00:11:31
y SMR empecé el 1 de septiembre del 2022 00:11:35
y sigo cursando este curso en el IES Villablanca 00:11:38
luego tendría otro section con un class que tendría proyectos 00:11:41
que tiene float left para que esté a la izquierda 00:11:49
margin de 25px para que haya un margen 00:11:53
text decorator underline, font style y un color white 00:11:57
y luego detrás de eso lo seguiría otra nueva tabla con un th 00:12:01
que es el tiempo que estuve haciendo el proyecto de WordPress 00:12:12
y un td que es el nombre del proyecto 00:12:15
y luego también debajo otro th 00:12:17
del tiempo que estuve haciendo un proyecto académico con Moodle 00:12:20
y el nombre del proyecto 00:12:23
y luego para acabar cerraría el div y cerraría el main 00:12:24
y habría un footer con clase footer currículum 00:12:28
que es exactamente igual que el footer de la página principal 00:12:32
solo que lo único que cambia es que este 00:12:36
tiene el background linear gradient en azul 00:12:39
para que pegue con la página web 00:12:42
y nuevamente aquí el enlace para descargarlo 00:12:44
siguiendo con el formulario 00:12:46
el formulario tendría 00:12:49
vendríamos por aquí arriba 00:12:52
y tendría este script 00:12:55
que lo explicaré más adelante 00:12:59
el header1 nuevamente 00:13:01
la barra de navegación 00:13:03
la barra de navegación con clase navformulario 00:13:05
que tiene background linear gradient 00:13:10
para hacer este degradado 00:13:15
nuevamente los deep con un hover 00:13:17
para que cada vez que pases el ratón 00:13:20
se vea en dorado 00:13:22
los asides nuevamente 00:13:23
que lo único que cambia 00:13:26
sería el color rojo 00:13:28
y el borde rojo 00:13:31
y esto que es un color white 00:13:34
para poner todas las letras en blanco 00:13:36
y empezando con el currículum, o sea, perdón, empezando con el formulario 00:13:39
tendríamos un main, que es donde está todo, un h2 00:13:45
con un font-size y un color para hacer la letra más grande y que esté en blanca 00:13:51
y empezaría con un form, la etiqueta form que es la del formulario 00:13:56
y empezaríamos con la etiqueta fieldset 00:14:01
que le tengo puesto un background color rojo 00:14:04
las letras en negro 00:14:09
un text online left para ponerla 00:14:10
a la derecha, bordes radius para que 00:14:12
este borde así 00:14:14
curvo 00:14:16
un width para que sea más largo 00:14:17
un height para que sea más 00:14:20
para que tenga más 00:14:22
no me sale la palabra 00:14:24
perdón, para que 00:14:26
tenga más profundidad hacia abajo 00:14:27
y ya está básicamente 00:14:30
y luego dentro de ese fieldset vendría un input de tipo texto con un nombre concreto y con un placeholder 00:14:33
y tendría su label concreto con el título nombre de usuario. 00:14:43
Seguiría otro label, un label de tipo correo con su nombre y su placeholder, 00:14:48
perdón, un input de tipo correo con su label correspondiente y con su título de correo electrónico. 00:14:56
Luego vendría el label un input de tipo password 00:15:00
Con su nombre, su label concreto y con el título contraseña 00:15:05
Nuevamente un nuevo label de tipo contraseña 00:15:09
Y aquí cerraría el fieldset 00:15:13
Abriría otro con un legend que tiene un h2 00:15:16
Y dentro está un input de tipo texto 00:15:20
con su nombre, su placeholder y el título de nombre, luego otro input type de tipo texto con su nombre, su placeholder y su label con el nombre de apellidos, luego vendría un input type de tipo fecha, de tipo date con su fecha de nacimiento y su label y su título fecha de nacimiento, luego vendría un input de tipo radio que es para seleccionar 00:15:29
con su label básicamente con el nombre sexo. 00:15:55
Luego vendría un input type de tipo number para poner la altura 00:16:00
con su placeholder y su label correspondiente con el nombre altura. 00:16:03
Luego vendría un input de tipo tel para poner el número de teléfono 00:16:09
con su placeholder y su label número de teléfono. 00:16:13
Luego vendría un input type de tipo option, un input de tipo select, perdón, 00:16:18
con sus diferentes opciones para poder seleccionar la que tú quieras. 00:16:25
Y nuevamente con su nuevo label. 00:16:29
Siguiéndolo y último input, vendría un input type de tipo color, 00:16:32
con su label de color preferido para seleccionar el color. 00:16:39
Cerraría nuevamente el field set y abriría otro, 00:16:43
con uno que sea de datos académicos, 00:16:47
que tenga un label de tipo select nuevamente para seleccionar el tipo, un input de tipo select para seleccionar nuevamente el título que tengas 00:16:52
y un label con el nombre de títulos obtenidos. Lo seguiría un label de tipo checkbox, ¿vale? Para seleccionar el idioma. 00:17:04
Lo que diferencia este checkbox de este radio es que tú puedes seleccionar más de uno, ¿vale? 00:17:15
En el tipo radio solamente puedes seleccionar uno, pero en el checkbox puedes seleccionar más de uno. 00:17:21
Luego le seguiría un input type de tipo rango, con su label en específico, para poder seleccionar el rango que quieras. 00:17:27
Y luego vendría un input type de tipo textarea, que es esta cajita de aquí, con su placeholder y su label. 00:17:36
Y vamos a rellenar este formulario para ver que funciona. 00:17:48
Vamos poniendo por aquí, lo bueno de esta contraseña sale aquí en privado, de modo que nadie lo pueda ver. 00:17:55
y van 00:18:02
vamos a ir seleccionando 00:18:05
las cosas 00:18:08
para ver que funciona 00:18:09
vale, altura podemos poner 00:18:11
unos 67, número de teléfono 00:18:16
659, 38, 76 00:18:17
55, estado civil, soltero 00:18:20
color preferido, verde 00:18:22
vale, luego datos 00:18:24
académicos, yo por ejemplo 00:18:26
voy a seleccionar que tengo 00:18:27
la ESO 00:18:30
domino el inglés, el francés 00:18:31
otro idioma y voy a poner el español. Nivel de inglés tengo un B2 y cualidades, no suelo 00:18:34
tener cualidades, pues lo pongo por aquí. Le doy a enviar y pone tu formulario se ha 00:18:47
enviado correctamente. Luego aquí también lo podemos cambiar, que podemos poner esto 00:18:57
Y vamos a ver que funciona 00:19:04
Formulario 00:19:06
Enviado 00:19:08
Así por ejemplo, vale 00:19:10
Y podemos enviarlo 00:19:11
Y aquí cambia el formulario enviado 00:19:14
Y ya para terminar el formulario 00:19:16
Tendríamos 00:19:19
Cerraríamos el main, tendríamos un footer 00:19:20
Nuevamente 00:19:22
Como todas las páginas 00:19:24
Con su clase de 00:19:26
Footer formulario 00:19:28
Lo único que cambia es el background 00:19:30
Linear gradient para que esté también 00:19:32
Con ese degradado 00:19:34
Y ya por último 00:19:37
La última parte 00:19:38
La del proyecto 00:19:40
La de este main 00:19:41
Puede ir 00:20:32
Y tienen aquí 00:20:41
Otras posibilidades 00:22:07
De proyecto 00:22:12
Valoración:
  • 1
  • 2
  • 3
  • 4
  • 5
Eres el primero. Inicia sesión para valorar el vídeo.
Idioma/s:
es
Materias:
Informática
Etiquetas:
Tecnología
Niveles educativos:
▼ Mostrar / ocultar niveles
  • Formación Profesional
    • Ciclo formativo de grado básico
      • Primer Curso
      • Segundo Curso
    • Ciclo formativo de grado medio
      • Primer Curso
      • Segundo Curso
    • Ciclo formativo de grado superior
      • Primer Curso
      • Segundo Curso
Autor/es:
Iván Zugazaga Sánchez
Subido por:
Iván Z.
Moderado por el profesor:
Miguel Angel Del Cura Varas (miguel.delcura)
Licencia:
Todos los derechos reservados
Visualizaciones:
1
Fecha:
8 de mayo de 2025 - 20:17
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
23′ 21″
Relación de aspecto:
1.88:1
Resolución:
1920x1020 píxeles
Tamaño:
1.23

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid