Saltar navegación

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

PaginaSencillaHTML&CSS - 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 26 de marzo de 2025 por Ezequiel Richard C.

12 visualizaciones

Video explicativo

Más información Transcripción

Descargar la transcripción

Bueno, hola buenas, vengo a presentar lo que sería mi proyecto, mi página web sobre una página sencilla 00:00:00
y enseñaros cómo lo he maquetizado y los pasos que he seguido para completarlo. 00:00:10
Para empezar, la página se vería tal que así. He elegido como tema lo que sería uno de mis artistas favoritos, 00:00:19
En plan de renacimiento 00:00:28
Para no hablar mucho sobre mí 00:00:30
Tal se vería 00:00:31
Esta 00:00:35
He hecho un display 00:00:36
Aquí en el header de mi encabezado 00:00:38
Para poner tres obras 00:00:41
De renacimiento 00:00:43
Que no tienen nada que ver con el autor inicial 00:00:44
Dentro del header 00:00:47
También he hecho una especie de recuadro para el tema 00:00:49
Y dentro de ello 00:00:51
He hecho una especie de mini presentación 00:00:53
En el que 00:00:55
También he colocado una imagen en un recuadro con un text-align center para que todo esté 00:00:56
bien centradito. 00:01:03
Aquí en el display he modificado todas las imágenes para que queden una al lado de otra 00:01:04
sin que se entorpezcan. 00:01:10
Y bueno, he hecho aquí un quién es y hablando un poquito sobre quién es este elegido artista 00:01:12
Sandro Venticelli. 00:01:23
Y aquí un poquito de información general sobre él, tal cual, he hecho un menú en 00:01:24
el que hay varias opciones dentro de la página y aquí en la información general pues he 00:01:31
puesto dos vídeos, dos enlaces con dos vídeos y he hecho un folder para testificar, como 00:01:38
una especie de certificado que le he hecho yo, en el que hay un enlace que lleva a mi github. 00:01:51
Abrimos aquí en historia y nos lleva a un enlace en el que aparece la historia de este buen señor, 00:02:08
con sus primeras obras, obras de madurez, últimos años y eso. 00:02:16
Aquí está un poquito mal porque no había ajustado pero ya no está ajustado. 00:02:22
Aquí también podemos abrir en la opción obras, que esto lo he hecho con un float, 00:02:28
y aparecen varias obras hechas por un display, también los he separado por section y article 00:02:35
para que solo viera dos por cada fila. He puesto aquí varias obras también modificadas 00:02:46
por tamaño y altura para que encajen una sobre otra con sus respectivos títulos. Y 00:02:53
este sí que me ha quedado bien ajustado. Y tus datos, he hecho como una especie de 00:03:01
registro para que se registren en la página web, aunque no tiene nada que ver con la página 00:03:09
web pero para hacer lo de los formularios y crear y acabo así he puesto un título que opinas he 00:03:12
puesto datos de registro el nombre de usuario contraseña repita contraseña correo datos 00:03:19
personales nombre fecha de nacimiento sexo hombre mujer número color de avatar 00:03:25
califiquen su satisfacción y le escribo un comentario y también he hecho otra pestaña 00:03:32
para volver al inicio y volver a la página del principio. ¿Cómo hemos hecho esto? 00:03:40
Entramos a Visual Studio Code y aquí abrimos un nuevo archivo. 00:03:51
abrimos 00:03:57
abrir archivo 00:04:01
y nos vamos a 00:04:04
así lo tenemos organizado 00:04:06
desde dentro 00:04:08
sería lo que sería página sencilla 00:04:09
abrimos en página sencilla 00:04:12
y tenemos una carpeta de imágenes 00:04:14
una carpeta de estilos 00:04:15
el index 00:04:17
la página de historia 00:04:19
la página de obras 00:04:22
y la página de tus datos 00:04:24
esta página nada, ponemos el hexágono por aquí, la página que hice principalmente pero como había 00:04:25
que hacer una index pues hice una index, abrimos la index y aquí lo tenemos. ¿Cómo se ha creado todo? 00:04:32
Pues muy fácil, abres un html, haces un gead, indicas la ruta del estilo de la hoja de ccs, 00:04:39
das un nombre a la página 00:04:52
y empiezas con el móvil 00:04:55
abrí un disk contenedor 00:04:56
y dentro de ese disk contenedor 00:04:58
creé un head 00:05:00
hice un enlace a las tres imágenes 00:05:01
con sus respectivos class para modificarlos 00:05:04
en la hoja CSS 00:05:07
y hice 00:05:09
un título 00:05:10
en h1 00:05:13
hacer el header y abrí un nav 00:05:14
dentro de este nav 00:05:16
hice un disk class 00:05:19
encabezado 00:05:20
puse un texto, hoy presentamos a Sandro Bochicelli, lo remarqué en negrita 00:05:21
y puse un enlace con un retrato, con un clase de retrato para modificarlo también 00:05:28
hacer el nav y abrir una site para crear lo que es el menú 00:05:35
este es el menú clase inicio, porque cada menú en plan respectivamente iba a tener una longitud del margen 00:05:41
entonces esto lo hice de inicio porque es el del index 00:05:50
dentro de esto pues hice 00:05:53
un class menú 00:05:56
ese sí que es genérico 00:05:57
y pues sus respectivos enlaces 00:05:59
tiene un enlace al html historia 00:06:01
tiene un enlace al html obras 00:06:04
tiene un enlace al html datos 00:06:06
y tiene un enlace al html index 00:06:08
para regresar a esta misma página 00:06:11
se cierra la site 00:06:12
y se abre un main 00:06:15
dentro de este main 00:06:16
hice un h1 00:06:17
Class H1 00:06:19
¿Quién es? 00:06:22
Diferenciándolo de este 00:06:24
Diferenciándolo de 00:06:25
Este que es un H1 00:06:27
Normal 00:06:30
Este lo hice un H1 00:06:31
Class H1 para diferenciarle y para ponerle 00:06:34
Propiedades que el otro no tenía 00:06:36
Section Class 00:06:37
Le puse primero 00:06:39
Sandro Tichel 00:06:40
H2 y H1 H3 00:06:42
Explicando un poquito 00:06:44
Un poquito de cultura general 00:06:45
No sobre el tipo 00:06:48
y después aquí hice 00:06:49
un section class 00:06:51
y con los iframes 00:06:54
sacados de youtube 00:06:55
esto, bueno, te voy a decir que lo he escrito yo 00:06:56
pero es mentira 00:07:00
entonces copié el enlace 00:07:00
de youtube 00:07:04
y los coloque tal cual 00:07:06
le puse un 00:07:07
class segundo para 00:07:10
colocarles un display y que no estuvieran 00:07:11
uno encima de otro, sino que estuvieran 00:07:14
uno a la par 00:07:16
hacer el mine y creo un minifolder 00:07:16
este folder en plan 00:07:19
página desarrollada 00:07:21
un enlace a mi github 00:07:22
y que acabe 00:07:25
por mi nombre 00:07:27
mi nombre real 00:07:28
cierras el folder 00:07:30
cierras el div, cierras el body y cierras 00:07:33
el html 00:07:35
vamonos a 00:07:36
a lo que seria 00:07:39
pues eso en plan 00:07:41
aquí puedo abrir distintos tipos de html, bueno vamos a la página css, bueno en plan te va a explicar que se diferencia cada página de otra 00:07:45
documentos, historia por ejemplo, historia, por ejemplo esta página de aquí se diferencia por el, bueno todos se diferencian por lo mismo 00:07:57
1, archivo, abrir historia, abrir archivo, abrir archivo obras y abrir archivo datos. 00:08:20
Aquí tenemos las cuatro páginas HTML que he utilizado para realizar lo que es la página 00:08:46
general. Tenemos el index, tenemos el historias, tenemos obras y tenemos datos. ¿Qué es lo 00:08:52
único que cambia de esas tres, estas cuatro páginas, pues el contenido del 00:08:59
main. Por ejemplo, aquí en este main tenemos, en la historia tenemos cuatro 00:09:04
sections que se separan por cada uno por un título. Tenemos el h1 que es el 00:09:12
genérico en el que aparece biografía. Tenemos otro que es h3 que ya sería, que 00:09:21
éste ya estaría por dentro que serían primeras obras y obras de madurez y últimos años explicando 00:09:27
un poquito la historia de de sangre después tendríamos obras ahora sí que es un poquito 00:09:34
más complicado que tendríamos un main con su respectivo h1 mejores obras y en todo este 00:09:41
main se separaría por sexo y de todo eso se separaría por artículo o sea sexo sería lo 00:09:48
que serían las filas y articles serían lo que serían las columnas siempre con un h3 para 00:09:56
definir el título y con un enlace de la imagen y con su respectivo class para modificar las 00:10:02
propiedades de la imagen entonces tenemos un sexo por ejemplo art y tenemos un sexo en el 00:10:10
que cabrían la imagen de la fortaleza y la imagen de adoración a los magos 00:10:16
y dentro de esto habría un artículo que se referiría a la fortaleza en el que habría su 00:10:25
respectivo enlace y su respectivo clase y otro artículo que tendría su respectivo enlace y su 00:10:30
respectivo y así hasta cuatro veces para crear el main de obras para que quede 00:10:37
que quede tal que así. Te enseño como quedan historias 00:10:45
y pues nos faltaría tus datos tus datos en plan lo único que cambia 00:10:56
es el main y dentro de este main no hay sección sino from para crear una especie 00:11:09
formulario, su respectivo h1 y dentro de este front hay un face cell, va a crear un contenedor 00:11:14
dentro de ello y datos registros, le pones aquí todo lo que sería formularios, nombre 00:11:21
de usuario, contraseña, repita contraseña, correo electrónico, con su respectivo input 00:11:28
con el nombre, con la fecha de nacimiento, sexo con un input type radio, número de teléfono 00:11:34
con un input type tel, color con un input color, y una vez hecho este, he hecho un da 00:11:49
nuestra opinión con un label para clasificar, label list, nota, satisfaction y en todo esto 00:12:01
pues he hecho una especial escala para que la persona que utilice esto pues pueda dar 00:12:09
una opinión sobre esto y ¿qué más? he abierto un textarea para dar ya la opinión 00:12:14
en plan, no estamos hablando de opinión pero hay que abrir un textarea para que se pueda 00:12:22
escribir cositas y un section con class botones para modificarlo y sus respectivos botones 00:12:26
un botón de enviar y un botón de grabar por defecto y pues lo mismo con un folder que 00:12:36
no se que vale pues así queda la página una vez hecho esto pues te lo voy a mostrar 00:12:45
quedaría tal que así, la página de inicio con su respectivo texto, la página de historia, 00:12:52
la página de obras, la página de tus datos, y otra de la página de inicio, y bueno, ahora 00:13:02
te va a mostrar lo que sería el CSS, el CSS pues tal que así, en plan, aparte de haber 00:13:19
hecho el display que no me acuerdo donde lo he hecho pero debe estar por ahí 00:13:30
modifique las tres propiedades de las imágenes poniendo imagen principal 00:13:35
imagen de encabezado e imagen 3 los puse en medida para que los tres 00:13:42
cambiaran en una misma fila y para darle así buen impacto a la persona que abra la 00:13:47
página un h1 con un text ali center con una 00:13:51
letra, con un tamaño, color de fondo y color de la letra. Con esto lo que hice lo de artes 00:13:56
relacionistas y con un pad. Después el H1, que sería el título de todo, emplante salicente, 00:14:06
rota de la letra, no sé qué, y con la diferencia de un fondo verde. Contenedor, le he puesto 00:14:16
un fondo plano que sería todo el html por defecto tiene un fondo de este color 00:14:25
que sería un fondo con los cremas, bueno con los carnecitos y rosita 00:14:31
y el encabezado pues más de lo mismo 00:14:37
después text1, el retrato que esto era complicado, le puse un border 00:14:42
y le puse un tamaño adecuado para que no ocupara mucho 00:14:50
después un main también con el mismo fondo 00:14:55
esto es un class funsite 200 para poner el tamaño 00:15:00
después separe los aside dependiendo de qué página porque cada aside tenía la 00:15:05
única diferencia que había entre ellos era el height del fondo 00:15:11
en cada esto hay un height diferente hay 2100 00:15:16
1800, 1100 y 975 para que todo quedara compacto y que no hubiera mucha... 00:15:21
sí que es... que quizás lo puede haber hecho de otra manera pero... 00:15:30
después el fondo del formulario, el fondo lo puse de un color diferente para que 00:15:37
viera un poquito más de seriedad y el menú, estos son los... las tablitas del 00:15:43
menú que lo puse de color blanco, budding, text-align center, put the radius y margin 00:15:51
button para darle separación. El artículo, esto es lo de las obras, que les puse un display 00:15:58
y les puse un margin left para darles también separación. Lo de los botones, del enviar 00:16:11
y reset después un texto alicente y aquí estarían las imágenes de las obras con sus clases las de 00:16:16
fortaleza las de magos las del infierno delante las de primavera en busca el tema en menos más 00:16:25
teclas del nacimiento de venus de retratada teclas de palacios del toro y aquí estaría por último el 00:16:33
el class del folder con su respectiva letra con su respectiva tamaño color y por último 00:16:42
el test write en plan elegí ponerlo a la derecha porque creí que en la izquierda estaba muy todo 00:16:57
muy solapado. Y eso en plan así es como he hecho mi página sencilla y quedaría tal 00:17:05
casi. No tiene mucho más misterio. La página de inicio, aquí pusimos dos enlaces externos, 00:17:16
aquí la página de historia, la página de obras, la página y la página de datos. 00:17:27
También cómo quedaría la arquitectura, pues la arquitectura quedará tal casi, vamos 00:17:38
a borrar esto, con el index, las tres páginas html, el estilo css y una carpeta con las 00:17:44
imágenes, donde se encontrarían todas las imágenes, y pues nada más, ha sido un placer, 00:17:52
me ha llevado unas cuantas horas y unas cuantas horitas de lo de cabeza, pero creo que he 00:17:59
hecho algo bonito. Muchas gracias y ha sido un placer. 00:18:08
Idioma/s:
es
Materias:
Informática
Niveles educativos:
▼ Mostrar / ocultar niveles
  • Formación Profesional
    • Ciclo formativo de grado medio
      • Primer Curso
      • Segundo Curso
Autor/es:
Ezequiel Richard Cuaresma Abgo
Subido por:
Ezequiel Richard C.
Moderado por el profesor:
Miguel Angel Del Cura Varas (miguel.delcura)
Licencia:
Reconocimiento
Visualizaciones:
12
Fecha:
26 de marzo de 2025 - 19:23
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
18′ 14″
Relación de aspecto:
16:10 El estándar usado por los portátiles de 15,4" y algunos otros, es ancho como el 16:9.
Resolución:
1152x720 píxeles
Tamaño:
77.06 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid