Saltar navegación

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

video html y css de Marcos - 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 30 de abril de 2025 por Marcos M.

7 visualizaciones

Video explicando como se ha heco la página, los contenidos y los estilos.

Más información Transcripción

Descargar la transcripción

Hola, soy Marcos Moreno Cuesta, de Segundo SMR y este es el proyecto de HTML y CSS de aplicaciones web. 00:00:01
Este es el video de documentación. 00:00:17
este es 00:00:19
el fichero 00:00:22
de documentación 00:00:25
que es lo que te pide 00:00:27
que documentes cada cosa 00:00:29
primero están los encabezados 00:00:31
que es el header 00:00:33
que esto aparece ahí arriba en la página web 00:00:34
y al poner H1 00:00:37
aparece en grande 00:00:39
si tú vas 00:00:39
la página 00:00:44
como esto está compuesto 00:00:46
el trabajo está hecho por 00:00:47
la parte css, el html y el 00:00:49
redmi.md, hay dos 00:00:52
carpetas dentro, ahí 00:00:54
bueno, está primero el html 00:00:55
trabajo de recuperación, luego una carpeta 00:00:58
llamada html trabajo 00:01:00
y luego dos carpetas 00:01:01
que una es la parte css y otra el html 00:01:03
vale 00:01:06
y pues si 00:01:06
clicamos aquí y le damos a opening 00:01:08
default browser 00:01:11
bueno, esta ya estaba 00:01:12
el bonicrum, bueno 00:01:15
nos lleva al inicio y esto sería el header 00:01:17
¿ves? aparece en h1 00:01:19
pues aparece así de grande 00:01:21
esto sería h2 00:01:23
parece un poco más pequeño 00:01:24
pide 00:01:28
ahora los párrafos 00:01:31
que hay que escribir una p 00:01:35
y pues poner algo de duqueras ahí 00:01:36
que esto sirve pues para 00:01:39
que no se vaya 00:01:42
para 00:01:45
que no siga escribiendo 00:01:45
para allá 00:01:48
que si por ejemplo 00:01:49
pones un párrafo 00:01:52
no siga escribiendo 00:01:53
para allá, no 00:01:56
que baje aquí 00:01:58
que no se vaya 00:01:58
fuera de la pantalla 00:02:01
aquí hay otro párrafo 00:02:02
luego los enlaces que están 00:02:07
para que tú 00:02:09
cliques 00:02:11
aquí está un enlace, aquí hay otro 00:02:12
¿vale? tú clicas 00:02:15
aquí y te lleva al currículum 00:02:18
o aquí te lleva al formulario 00:02:20
al inicio ¿vale? 00:02:22
tienes que escribir 00:02:24
y luego la a y ya te sale 00:02:29
pues le das a la a 00:02:32
y ya te pone hr 00:02:33
esto lo pones tú 00:02:35
el enlace que tú quieras y esto 00:02:37
no vas a querer que aparezca 00:02:41
el enlace en tu página 00:02:44
que si tú clicas en inicio 00:02:47
en realidad estés en el enlace y te lleve a tal sitio 00:02:50
luego las imágenes 00:02:54
las imágenes hay que poner 00:02:55
img, esto se pone solo, luego la página web 00:02:59
y luego esto es por si 00:03:02
la página no carga, o sea la imagen no carga 00:03:05
aparezca esta palabra, aquí ves 00:03:08
que yo quito 00:03:11
esta 00:03:14
esta ruta 00:03:14
lo guardo 00:03:17
me voy a la página y mira 00:03:19
CodeLini, aparece una palabra 00:03:21
¿vale? porque no carga 00:03:23
entonces 00:03:25
ahora las tablas 00:03:28
están en el currículum 00:03:31
vamos aquí primero 00:03:33
están 00:03:36
las tablas 00:03:37
y luego estas 00:03:38
aquí están las TH 00:03:40
y las TD 00:03:47
TH pues aparece esto así 00:03:48
en línea 00:03:51
y TD 00:03:54
es para que 00:03:56
TH aparece en línea 00:03:57
vale 00:04:03
primero hay que poner tabla 00:04:06
TR, TH, TD 00:04:09
depende de lo que tú quieras poner 00:04:11
luego 00:04:12
Luego pide listas, que hay que escribir li, en tabla hay que poner esto i, luego esto 00:04:15
para cerrar, porque si no no va a aparecer nada, luego li, así se hace una lista, hay 00:04:24
que escribir li html css li, luego abajo otra vez li, así consecutivamente, luego los bloques 00:04:33
o las Sections. Yo escribo Sections y es como que divide las partes. Por ejemplo, esto de 00:04:42
aquí es una Sections, esto es otra Sections. Los formularios. Nos vamos al formulario y 00:04:55
hay varios tipos. Pues este está para poner tu nombre, tu correo, tu contraseña, etc. 00:05:07
Un teléfono, la edad, el legado. 00:05:14
Pues entonces así sube el número y así baja. 00:05:17
Luego la fecha de nacimiento. 00:05:21
Le das aquí y te lleva a tu explorador de archivos. 00:05:25
Luego esto, pues para poner tu sitio web. 00:05:30
Esto es como un rango. 00:05:33
¿Vale? 00:05:36
¿Cómo eres satisfecho? 00:05:37
Pues aquí está bien. 00:05:38
¿Qué más? 00:05:40
Comentarios. 00:05:41
Si tú le das aquí lo puedes hacer más grande. 00:05:41
y masculinas pues para que tú puedas 00:05:44
elegir 00:05:47
luego enviar 00:05:48
esto es pues por ejemplo 00:05:50
el de 00:05:52
por ejemplo el de 00:05:55
textos para poner un texto 00:05:58
siempre hay que poner el 00:06:00
input type es importante pues para que 00:06:02
dependiendo de que tipo 00:06:04
sea el formulario que tú vayas a 00:06:06
querer 00:06:08
pues te va a aparecer 00:06:10
distintas configuraciones por ejemplo 00:06:12
nombre, pues 00:06:14
el id es edad, vale 00:06:16
luego 00:06:18
file 00:06:20
es tipo de archivo 00:06:23
pues por esto sale lo de 00:06:24
lo de 00:06:26
lo de 00:06:28
seleccionar el archivo 00:06:31
esto es para 00:06:32
el de select es pues 00:06:34
es para que te dé varias opciones 00:06:36
luego 00:06:39
está este que es para darle a enviar 00:06:40
el de comentarios 00:06:43
el de rango 00:06:44
pues para la barra 00:06:48
del rango 00:06:51
si puedes poner su url 00:06:51
el color, pues para que tú puedas 00:06:54
elegir el color 00:06:56
o sea, esto lo puedes poner muy bien 00:06:57
pues tú tienes que poner 00:07:01
esto 00:07:03
y luego el tipo de formulario que tú quieras 00:07:03
luego 00:07:07
los vídeos 00:07:08
Esto está en el 00:07:11
Sobre el proyecto 00:07:13
¿Vale? 00:07:16
Está este vídeo 00:07:17
Bueno, este es un vídeo que he grabado antes 00:07:19
Pero bueno 00:07:22
Ahora pondré otro 00:07:23
El que estoy grabando ahora 00:07:25
¿Vale? 00:07:27
Pues el vídeo 00:07:31
Está aquí 00:07:32
Y lo que hay que poner es 00:07:33
El vídeo 00:07:35
Control with 00:07:39
Source SRC 00:07:40
Y el enlace del vídeo, tipo mp4, vale, esto es lo que va a salir si el vídeo no carga, bueno, esto es el footer, que esto es lo que va a aparecer debajo de todas las páginas, vale, así, luego, ahora vamos a los estilos, que están los CSS selectores de distintos tipos, 00:07:42
pues está el body, el header, el nav 00:08:20
el header es pues para poner 00:08:22
la cabecera bien, el body pues 00:08:24
para poner 00:08:26
lo que sería esto 00:08:27
vale 00:08:30
aquí está 00:08:31
por ejemplo el body 00:08:33
el tipo de, esto es bueno 00:08:36
luego lo que hice también pero es el tipo de letra 00:08:38
el header pues el 00:08:40
color 00:08:42
donde que es que esté el texto pues que esté centrado 00:08:43
esto es para centrar el texto 00:08:46
vale 00:08:48
la navegación, pues esto es para 00:08:49
esto 00:08:52
de qué color quieres que sea 00:08:56
esta parte 00:08:58
esta parte también 00:08:58
luego 00:09:03
está los colores 00:09:05
que pones 00:09:08
color y te pones lo que quieras 00:09:09
o el back color que esto es 00:09:12
el color de fondo 00:09:13
por ejemplo 00:09:15
background color 00:09:18
es color del fondo 00:09:19
de la página 00:09:20
¿vale? 00:09:22
luego está 00:09:25
el de las dimensiones 00:09:26
que es para hacer más grande 00:09:27
por ejemplo 00:09:28
los márgenes 00:09:29
pues también está 00:09:30
el de caja 00:09:35
que es para 00:09:35
las cajas 00:09:36
sería 00:09:37
esto es una caja 00:09:37
¿vale? 00:09:39
esto sería una caja 00:09:43
que lo que ves 00:09:44
pues aparece 00:09:49
esto de aquí 00:09:50
¿vale? 00:09:51
luego 00:09:54
puedes hacer más grande la caja 00:09:54
puedes hacer otra aquí 00:09:59
o otra aquí al lado 00:10:01
y tal 00:10:03
las imágenes de fondo 00:10:04
pues 00:10:07
está 00:10:09
aquí 00:10:13
en el proyecto y sería 00:10:14
esta imagen 00:10:16
que primero tienes que poner esto 00:10:17
para poner la imagen 00:10:21
luego esto 00:10:22
si no quieres que 00:10:23
aparezca varias veces la imagen, o sea, queda muy mal. 00:10:26
Entonces así, si te vas al proyecto, bueno, también si quitas esto. 00:10:32
Esto es para que cubra toda la parte trasera, que aparece así de mal. 00:10:46
Luego, está también el float, que esto es básicamente, no lo tengo puesto, pero es si quieres que se quede arriba esto, la cabecera y el navegador. 00:10:57
luego está el texto que es para poner las distintas partes del texto 00:11:21
allí lo mismo 00:11:28
los enlaces 00:11:29
esto si quieres que esté subrayado el enlace cuando tú pones el cursor encima 00:11:30
las listas pues para hacerlas más grandes 00:11:38
o el tipo de lista que quieras 00:11:45
las tablas 00:11:50
esto es para hacer las tablas 00:11:51
el tamaño de las tablas más grandes 00:11:53
y tal 00:11:56
las imágenes para ajustar el tamaño 00:11:58
hacer más pequeñas 00:12:00
más grandes, más anchas 00:12:03
si quieres también 00:12:04
el borde es 00:12:06
por si quieres que las imágenes 00:12:08
más grandes 00:12:09
esto es por si quieres que las imágenes 00:12:11
a ver 00:12:16
si quieres que las imágenes 00:12:23
aparezcan así, con el borde así, como con una curva, y luego los formularios, pues hay distintos tipos, que es el form, el label, el input, 00:12:25
Tarea, textarea, luego pide la página principal, pues la página principal es esta, que es el index, el currículum, con el footer, una lista aquí de imagen, el formulario y los distintos proyectos. 00:12:42
Bueno, el proyecto que ahora tengo que poner aquí, el vídeo que estoy grabando ahora, una lista, luego también pedía un enlace a GitHub. Bueno, lo he puesto aquí también, ¿vale? Y ya estaría. Ya está el proyecto. 00:13:07
Valoración:
  • 1
  • 2
  • 3
  • 4
  • 5
Eres el primero. Inicia sesión para valorar el vídeo.
Idioma/s:
es
Materias:
Sistemas Microinformáticos y Redes
Etiquetas:
Aplicaciones WEB
Niveles educativos:
▼ Mostrar / ocultar niveles
  • Formación Profesional
    • Ciclo formativo de grado medio
      • Segundo Curso
Autor/es:
marcos.moreno9
Subido por:
Marcos M.
Moderado por el profesor:
Miguel Angel Del Cura Varas (miguel.delcura)
Licencia:
Reconocimiento - Compartir igual
Visualizaciones:
7
Fecha:
30 de abril de 2025 - 20:23
Visibilidad:
Público
Enlace Relacionado:
https://github.com/marco0s9/AplicacionesWeb_MarcosMoreno
Centro:
IES VILLABLANCA
Descripción ampliada:
Vido explicativo.
Duración:
13′ 31″
Relación de aspecto:
1.78:1
Resolución:
1280x720 píxeles
Tamaño:
66.59 MBytes

Del mismo autor…

Ver más del mismo autor

Comentarios

Para publicar comentarios debes entrar con tu nombre de usuario de EducaMadrid.

Comentarios

Este vídeo todavía no tiene comentarios. Sé el primero en comentar.


EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid