Saltar navegación

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

Introducción a HTML - 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 23 de septiembre de 2024 por Pedro Luis L.

46 visualizaciones

Más información Transcripción

Descargar la transcripción

Bueno, vamos a empezar con nuestro pequeño curso de HTML, vamos a seguir estos apuntes, los tendréis en el aula virtual, y bueno, un archivo HTML es básicamente un archivo de texto, lo puedo editar con cualquier editor de texto, el Visual Studio Code, lo de notas, el Notepad Plus, el que queráis. 00:00:00
Yo estoy usando aquí en Linux 00:00:22
Si nos vamos a los apuntes 00:00:24
Vamos a ver 00:00:28
Bueno, aquí hay una pequeña teoría 00:00:29
Que os tenéis que leer 00:00:31
Bueno, y la estructura básica de un documento HTML 00:00:32
Es esta, vamos a verla 00:00:37
Esto es recomendable que lo vayáis escribiendo 00:00:40
Todo documento en HTML 00:00:42
Tiene que empezar por esto 00:00:43
.type 00:00:44
HTML, estamos diciendo que esto es un HTML 00:00:47
Fijaros que sale negrita 00:00:49
Voy a guardarlo 00:00:51
Hago aquí un guardar como 00:00:53
me voy aquí al curso este que estoy preparando y le voy a poner un nombre como tan original como 00:00:54
página 1.html la extensión es importante página 1.html le doy a guardar y veis que ya lo reconoce 00:01:02
el editor lo reconoce y me ha cambiado los colores esto es importante porque luego nos va a ayudar a 00:01:11
escribir mejor bueno lo que todo comentó tiene que empezar con la etiqueta html y cerrarse con 00:01:16
la etiqueta html mira a esto llamamos etiquetas de acuerdo estas cositas está la etiqueta de 00:01:23
apertura y este que tiene aquí la barrita es la etiqueta de cerrar todo documento html tiene que 00:01:30
tener lo que se llama una cabecera lo que hago es que la abro y la cierro y un cuerpo que abro 00:01:38
y cierro. Dentro de la cabecera, muy muy 00:01:48
importante, tengo que meterle un atributo que se llama 00:01:53
meta, que lo que le voy a decir es que la codificación 00:01:57
que voy a usar es UTF-8. 00:02:00
Esto es importante, le estoy diciendo que el código de caracteres que voy a usar 00:02:05
es el UTF-8, porque si no nuestras queridas señes, los acentos 00:02:08
no saldrían bien. Lo guardo y ahora voy a abrir 00:02:13
esta bonita página web que he hecho, esto lo abro, mi bonita página web. Bueno, para 00:02:16
abrirlo podéis cogeros el navegador de ficheros, o sea, podéis coger el navegador de ficheros 00:02:30
e iros a donde tenéis la página y hacerle doble clic, que se abrirá, o bien dentro 00:02:35
del propio navegador, control o, se abrirá esta ventanita que permite buscar el archivo 00:02:43
y lo hago aquí lo tenemos de momento es algún documento en blanco si nos fijamos aquí explotado 00:02:50
algo a nada que un navegador esto bueno bueno me sale aquí una ventanita en blanco le puedo 00:02:57
meter contenido por ejemplo por ejemplo bueno es para meter párrafos abril cierro siempre 00:03:09
a viciar. También es importante que probéis en vuestro editor si, usando P y tabulador, 00:03:18
se autocompleta, porque hay muchos editores que la autocompletan y te ponen ya directamente 00:03:25
este que estoy usando o no. No es mala idea cuando estás aprendiendo a escribirlo todo 00:03:29
a mano, ¿eh? Eso es muy bueno. Pues vamos a hacer algo muy importante que es poner Hola 00:03:34
Mundo. Los informáticos tenemos toda la tontería de cuando aprendemos algo ponemos Hola Mundo. 00:03:37
Ahí lo tenemos. Me está diciendo hola mundo. Un hola mundo bastante soso, no tiene formato ningún. Fijaos que aquí me pone la dirección del archivo, dónde lo tengo el archivo. Esto lo puedo cambiar poniéndolo, poniendo un title. 00:03:42
abro y cierro, siempre abro y cierro, probad 00:03:59
a poner la barra, perdón, el tabulador, probad a poner 00:04:03
title y tabulador a ver si vuestro editor lo soporta, hay muchos editores 00:04:08
que lo soportan, y aquí voy a poner hola 00:04:12
este texto va a ser 00:04:15
el que va a aparecer aquí, si le doy a recargar la página 00:04:20
puedo recargar la página, veis que pone hola, o F5 que es lo mismo 00:04:23
El más rápido. Bueno, pues ya he cambiado el título. Voy un poquito rápido porque esto es un vídeo. Bueno, esto es lo que acabamos de hacer. Bueno, importante. Puedo usar símbolos unicode porque lo he marcado yo. 00:04:28
Con estos dos símbolos marco el principio y el fin de una etiqueta y luego este simbolito lo veremos más adelante. 00:04:47
Marca el comienzo de una referencia. 00:04:55
Vais a ver que no puedo poner este símbolo. Estos símbolos no los puedo poner directamente porque representan, veis que representan etiquetas. 00:04:59
¿Qué tengo que hacer para poner estos símbolos de mayor y menor igual? 00:05:07
Voy a meter otro párrafo como ejemplo y hay que poner esta cosa tan curiosa. 00:05:12
Esto significa greater than, y esto significa less than, ¿de acuerdo? Mayor y menor, mayor y menor. 00:05:18
Si voy a la página y la recargo, ¿dónde estás? Aquí. Y la recargo. ¿Lo veis ahí en los símbolos? De acuerdo. Y luego, para poner el ampersand, se pone amp.ampersand.amp.com. 00:05:34
si voy a mi página y la recargo, ahí lo tengo, el ampersand, vamos a continuar, tal, bueno, hay muchos símbolos 00:05:53
que los puedo meter directamente, pero tengo también unos códigos que me sirven para introducir los documentos, 00:06:10
vamos a esperar para eso, vamos más adelante, bueno, la estructura ya la hemos visto, el top type también, 00:06:16
Bueno, con lang le especifico el idioma, ¿vale? Si pongo lang igual a s, lang igual a es, le estoy diciendo que el idioma de este documento va a ser el castellano, el español, ¿de acuerdo? 00:06:24
A esto se le llama un atributo. O sea, esto es la etiqueta y a esto de aquí se le llama atributo. 00:06:45
Los atributos suelen ser un valor, perdón, un nombre igual a un valor. 00:06:53
Y el valor entre comillas. Las comillas pueden ser simples, como las he puesto aquí, o dobles. 00:07:00
Me es indiferente. Puedo usar cualquiera de las dos. 00:07:05
Veis que aquí he usado la comilla simple y aquí he usado la comilla doble. Es indiferente usar una u otra. 00:07:09
Bueno, la cabecera. 00:07:16
Bueno, en la cabecera puedo meter el título, 00:07:19
puedo meter una referencia a dónde está localizado el documento, 00:07:22
me lo salto, y los meta, que hay muchos tipos de meta. 00:07:26
¿De acuerdo? Como, por ejemplo, el nombre del autor, 00:07:30
el idioma, la descripción, las palabras importantes que define el documento. 00:07:33
Hay muchos metas. 00:07:38
Pero vamos, el más importante va a ser este, el charset. 00:07:39
Body. Voy un poquito rápido, pero bueno. 00:07:43
el body, bueno, el body 00:07:45
es el documento principal, le puedo cambiar 00:07:48
el color de fondo poniendo esto, no lo voy a 00:07:50
hacer, porque ahora voy a tener una herramienta 00:07:52
mucho más poderosa 00:07:54
bueno, para 00:07:55
meter comentarios, esto es importante 00:07:58
ves que aquí 00:08:00
está este simbolito, este simbolito 00:08:02
es para meter comentarios 00:08:04
si yo me vengo aquí y pongo 00:08:06
ves que lo ha cambiado de color 00:08:07
bueno, pues veis que este cachito de aquí 00:08:12
es un comentario, lo que hace 00:08:17
el html es ignorarlo esto lo guardo y si me voy a mi página web y la recargo ves que no sale nada 00:08:19
porque la ha ignorado esto es un comentario que usamos a veces los programadores o el señor que 00:08:28
está haciendo la página para meter algún tipo de comentario se me ha olvidado poner no sé qué 00:08:33
o hay que hacer esto de acuerdo vais a ver muchas veces el todo ves que incluso la apuesta de tu 00:08:38
nombre, todo significa por hacer. Cuando veis un comentario que pone todo, oye, que falta hacer 00:08:46
esto. Y el fix me. Ves que cuando lo escribo lo pone incluso de otro color. Fix me. Fix me 00:08:51
significa arreglame. O sea, en los comentarios a veces vais a encontrar todo. Todo significa, 00:08:57
pues queda por hacer esto. O fix me. Oye, que esto está estropeado y hay que arreglarlo. Vale, 00:09:02
lo vais a ver en muchos comentarios. El todo y el fix me. Vale. Bueno, la estructura de un 00:09:08
documento html suele variar mucho pero suele ser esta una cabecera una barra de navegación de 00:09:18
navegación la información principal las barras laterales que pueden tener un a un lado al otro 00:09:25
etcétera etcétera etcétera y luego la parte de abajo esto en html5 lo vamos a representar así 00:09:32
esto va a ser un header un nav bueno aquí está la parte principal que van a ser secciones section 00:09:37
los aside y los footer, ¿vale? 00:09:45
Si es que lo metemos en nuestro documento, vais a ver que aparentemente no pasa nada. 00:09:48
Por ejemplo, si pongo aquí un header, pongo un header, 00:09:53
y voy a meter un párrafo, vais a ir a nuestra página web 00:10:04
y aparentemente no pasa nada, ha puesto cabecera. 00:10:15
Esto luego le vamos a indicar con una cosa que se llama ccss como debe de colocarlo. 00:10:19
De hecho, lo vamos a ver casi en el siguiente vídeo. 00:10:26
Si pongo un footer, pues vais a ver que tampoco pasa nada. 00:10:28
Oye, no me coloques esto. 00:10:35
Footer, barra, footer, vais a ver que no pasa nada. 00:10:40
Piede, página. 00:10:53
Fijaos que estos elementos, el footer, el footer que representa el pie, el header que representa la cabecera, 00:10:56
no los pone por defecto en estas zonas que pone aquí. 00:11:06
O sea, en lo que pongamos como header, dentro de la etiqueta header, dentro de aquí, de las etiquetas, puedo meter otras etiquetas. Esto se me olvida decirlo. Aquí dentro del header o dentro de cualquier etiqueta puedo meter otras. Esto lo puedo llenar de contenido. 00:11:09
¿De acuerdo? Pues aquí con esta etiqueta, que aparentemente no hace nada, 00:11:24
le estoy indicando que lo que va aquí dentro va a ser la cabecera. 00:11:28
Esta que se llama footer, lo que está indicando es que lo que vaya aquí dentro va a ser el pie de la página. 00:11:31
Voy a parar aquí. Voy a parar aquí. 00:11:41
Y un poquito más en el siguiente vídeo vamos a ver cómo se le da formato a eso. 00:11:44
A ver si soy capaz yo de parar. Vale. 00:11:51
Subido por:
Pedro Luis L.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
46
Fecha:
23 de septiembre de 2024 - 10:59
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
11′ 58″
Relación de aspecto:
1.78:1
Resolución:
1280x720 píxeles
Tamaño:
23.02 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