Saltar navegación

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

html introduccion - 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 20 de enero de 2021 por David Jose P.

87 visualizaciones

Más información Transcripción

Descargar la transcripción

Venga, pues vamos entonces a empezar a conocer nuestro código HTML. Lo único que he hecho ha sido abrir una página web, cualquiera, por ver un poco de qué va esto. 00:00:00
Con el botoncito derecho lo que voy a hacer es ver el código fuente de la página. Sí que es verdad que hay una combinación de teclas, un control, no sé qué, que no me lo sé de memoria, que me lleva un poco a lo mismo. 00:00:11
¿Vale? Si os fijáis bien, cualquier página web tiene una serie de instrucciones que están entre los signos menor que y mayor que. Esto, ¿lo veis bien? ¿Os se ve bien? Esto es lo que se conoce como etiqueta. 00:00:22
Y una página web está creada a partir de etiquetas. Y cada etiqueta tiene una función determinada. Todas las páginas web siempre van a comenzar con la etiqueta admiración doctype HTML. Esto realmente no hace nada al código. 00:00:42
Sencillamente es una etiqueta informativa. Es una etiqueta informativa diciendo que el tipo de documento es un código HTML. ¿Vale? Ni más ni menos. 00:01:04
Veis que comienza con una etiqueta que viene HTML y si yo me voy al final, terminará en esa etiqueta con una barrita, ¿vale? 00:01:13
Entre los signos, no sé si lo veis bien, no lo veis bien, no me decís nada chicos, ahí, bueno, ¿vale? Ahí sí que se ve 00:01:30
Veis que al final siempre me viene la misma etiqueta con la barra. Esta es la forma que tiene de trabajar este código HTML. ¿Qué os decía que necesito? Necesito un editor de textos plano. 00:01:48
Yo aquí no sé cuál hay, voy a abrirlo, me voy a oficina, no. Accesorios, anotaciones, no sé cuál. Aquí el editor de texto pluma. Igual que en Windows tenemos el blog de notas, aquí en Linux en el aula tenemos el editor de texto pluma. 00:02:02
¿Vale? Es un editor de texto que no da formato. Os decía, vamos a empezar a crear nuestra primera página web. ¿Qué es lo que necesito? Primero voy a crear la etiqueta diciendo que esto es un documento de tipo HTML, ¿vale? 00:02:26
Que insisto que no me hace nada, solo es informativo. Y todas las páginas web, os decía, comienzan con HTML, ¿vale? Y terminan, voy a copiar y pegar porque tardo menos, control C, control V y le pongo la barrita delante, ¿vale? 00:02:47
¿Vale? Toda la página web la tengo que meter entre esas dos etiquetas, siempre, ¿vale? Siempre. Una página web, ¿qué es lo que tiene? Voy a cerrar esto de aquí, veis que tiene un título o un encabezado, ¿vale? Tiene un encabezado y luego tiene un contenido. 00:03:11
El encabezado es lo que yo veo en la parte superior, en la barra superior de mi ventana. Eso también lo voy a configurar. Siempre, os repito, una página web tiene su cabecera, lo he puesto mal, etiqueta de inicio de cabecera, etiqueta de control C. 00:03:32
la voy a poner por aquí, control V y etiqueta de fin de cabecera. La cabecera lo voy a tener que poner aquí entre medias. ¿Qué es lo que tiene el contenido? 00:04:03
Fuera de la cabecera yo voy a poner mi contenido. El contenido es en una etiqueta que yo llamo body. El body es el cuerpo del control C, lo voy a poner por aquí, 00:04:17
Control-V y le pongo la etiquetita. Todos los contenidos los tengo que meter en esta etiqueta. No se ve... Ay, perdonadme, de verdad. 00:04:29
Chicos, avisadme antes porque es que no estoy de fondo ahí. Vale. ¿Lo veis ahora mejor? Sí, perdonadme, ¿vale? 00:04:44
Os decía, ¿vale? Inicio de mi código, fin de mi código. Inicio de la cabecera, fin de la cabecera. Inicio del cuerpo, fin del cuerpo. 00:04:54
Claro, exactamente las mismas. 00:05:04
Lo que pasa es que muchas veces cuando tú visualizas el código de una página web, yo voy a ver ese código fuente, muchas veces hace referencia a imágenes, a archivos, a elementos que están alojados en el servidor. 00:05:16
Entonces, muchas veces tú no vas a poder copiar íntegramente todos los contenidos porque utiliza hojas de estilo de cascada que no siempre están disponibles y utiliza etiquetas tipo meta, ¿vale? Que son metadatos y esto no siempre lo voy a tener disponible, no siempre, ¿vale? Pero en principio sí, si tú copias y pegas el código, tú lo vas a tener disponible para ti, sí, se puede hacer. 00:05:35
Os quería decir, hay algo muy frecuente y es intercambiar el orden de las etiquetas. Fijaos lo que he hecho, he abierto una etiqueta HID, he abierto una etiqueta BODY, antes de abrir una etiqueta BODY tengo que haber cerrado la etiqueta HID. 00:06:03
¿Me entendéis lo que os quiero decir? Son dos cosas diferentes. Una cosa es la cabecera y otra es el contenido. Con lo cual, lo que aparezca en la cabecera tengo que definirlo. 00:06:30
Aquí voy a definir mi cabecera. Yo no puedo abrir una etiqueta body sin haber cerrado antes la hit. Igual que cuando creo mi código HTML o cojo la etiqueta HTML, todo el contenido tiene que estar entre esas dos etiquetas. 00:06:44
¿Me explico? ¿Sí? Venga, pues esta la voy a quitar de aquí, control X, control V 00:07:05
Ahora mismo no tengo nada, ¿vale? Solo he puesto etiquetas de que aquí voy a poner una cabecera 00:07:13
Y aquí voy a poner un cuerpo, ¿vale? Un contenido 00:07:19
¿Qué voy a poner en la cabecera? Pues voy a poner un título 00:07:22
Y para eso utilizamos una etiqueta que se llama title, ¿vale? De título 00:07:25
Cojo mi etiqueta de título, control-C, la voy a poner aquí, control-V y le pongo la barrita final. Esto lo hago yo porque soy un poco vago y tardo mucho en escribir. ¿Qué título voy a escribir? No sé, voy a crear una página que sea monos. 00:07:34
Vale, pues monos 00:07:54
¿Vale? Mi título va a ser monos 00:07:56
¿Qué voy a poner en el cuerpo? 00:07:58
Pues voy a ir poniendo, por ejemplo, un encabezado 00:08:02
¿Vale? Un encabezado es una etiqueta H 00:08:05
Que puede ser H1, H2, H3, basta el H7 00:08:09
¿Qué me indica el número? 00:08:14
Me indica el tamaño de ese encabezado 00:08:16
El 1 es el más grande, el 7 es el más pequeño 00:08:18
Voy a empezar por poner el H1 y voy a poner, yo qué sé, página principal de monos. Porque es aquí donde voy a ir creando mi página. Os decía que he empezado con la etiqueta H1, que es el que me va a dar el encabezado. 00:08:22
tengo que finalizar mi etiqueta. ¿Estoy entendiendo bien cómo funciona? Creo que sí, ¿verdad? Bueno, he puesto el encabezado. Voy a crear un párrafo. 00:08:50
El párrafo lo utilizamos una etiqueta que es etiqueta P. Y como voy a meter luego alguna imagen y algún hipervínculo, vamos a poner aquí visita los diferentes monos. Pues poneros algo. ¿Vale? Esto es lo que voy a escribir. Empieza mi párrafo y etiqueta de finalización de párrafo. 00:09:04
Me perdonéis un segundito, hacemos esto para el próximo día, ya sé que ha tocado, dos minutitos que no voy a tardar nada más. ¿Qué es lo que tengo que hacer con este archivo? Lo voy a guardar, ya lo tengo creada la estructura básica, lo voy a guardar. Archivo, guardar como, lo tengo que guardar siempre con el código HTML. 00:09:34
Bueno, vale, veo que directamente este me da el código HTML 00:09:58
Si utilizarais el blog de notas, tenéis que ponerle la extensión .html 00:10:05
Yo lo voy a guardar como página principal, como home, por ejemplo 00:10:14
Lo voy a dejar en el escritorio y le voy a guardar 00:10:20
Un segundito chicos, no os escapéis 00:10:26
Esa página home.html 00:10:29
Si yo le hago el doble clic 00:10:32
Voy a ir viendo, como veis, primero 00:10:34
Que me pone el título monos 00:10:36
¿Vale? 00:10:39
Me aparece el encabezado 00:10:40
Y me aparece el contenido 00:10:42
¿Sí? 00:10:44
Probad en casa esta, a ver si os funciona bien 00:10:46
¿Vale? 00:10:48
Sería lo primero 00:10:50
Venga, chicos 00:10:51
Autor/es:
David Perez Ovejero
Subido por:
David Jose P.
Licencia:
Reconocimiento - Compartir igual
Visualizaciones:
87
Fecha:
20 de enero de 2021 - 11:05
Visibilidad:
Público
Centro:
IES MIGUEL DE CERVANTES
Duración:
10′ 56″
Relación de aspecto:
4:3 Hasta 2009 fue el estándar utilizado en la televisión PAL; muchas pantallas de ordenador y televisores usan este estándar, erróneamente llamado cuadrado, cuando en la realidad es rectangular o wide.
Resolución:
1024x768 píxeles
Tamaño:
29.60 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid