Saltar navegación

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

HTML Introducción - 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 28 de diciembre de 2020 por Amadeo M.

106 visualizaciones

Más información Transcripción

Descargar la transcripción

Ya hemos visto cómo es un fichero XML. 00:00:00
Vamos a pasar ahora al elemento fundamental de lo que es Internet para el usuario final, que es la web. 00:00:05
Y la web se basa primero en un protocolo de comunicaciones, que es HTTP, o Hyper Test Transfer Protocol. 00:00:12
Y sobre ese protocolo de transferencia de páginas, pues están esas páginas. 00:00:24
Y esas páginas corresponden o tienen como lenguaje de marcas el lenguaje HTML, que ya en la introducción del módulo dijimos que provenía, que era una variante o una abreviatura o una parte de lo que era SGML. 00:00:30
HTML, repito, se llama Hypertext Markup Language, o lenguaje de marcas de hipertexto. 00:00:45
Y bueno, vuelvo a repetir la importancia que tuvo en su momento y cómo ha cambiado nuestras vidas el que podamos ir saltando de un sitio a otro. 00:00:54
como podemos ver aquí en el título 00:01:02
dentro de nuestro portal de mclibre.org 00:01:05
que agradecemos a Bartolomé Sintes 00:01:08
de este desarrollo y poner esto a disposición de todo el público 00:01:11
vemos que el título es 00:01:15
Páginas web HTML y hojas de estilo CSS 00:01:17
bueno, ya las veremos posteriormente 00:01:20
las hojas de estilo, pero es el elemento que logra 00:01:23
que una página HTML, que al fin y al cabo no tiene que tener 00:01:26
más que el contenido, la estructura del documento 00:01:29
acabe teniendo un formato de visualización que se adapte a diversos dispositivos 00:01:32
y que además pueda ser más o menos agradable dependiendo del gusto del diseñador correspondiente 00:01:37
entonces visto todo esto vamos a empezar para ver qué es una página web 00:01:42
y una página web es un documento de texto con marcas 00:01:48
entonces esto que aparece aquí puede ser el código fuente de una página web 00:01:52
Aquí tenemos una marca que es la marca o etiqueta P 00:01:58
Que significa que empieza un párrafo y con esto lo acabamos 00:02:04
Como conocemos ya XML no hay que contar cómo son estas etiquetas 00:02:07
Bueno, la cuestión que aparece es que hay etiquetas como P que se abren y se cierran 00:02:12
Y a diferencia de XML podemos tener etiquetas vacías 00:02:18
Es decir, etiquetas que no se abren y no se cierran como es HR 00:02:23
HR, vemos que es una etiqueta 00:02:27
que simplemente aparece y que va a significar 00:02:29
que pinta una línea, un salto 00:02:31
un salto con una línea 00:02:34
pintada, y vemos que realmente 00:02:36
pues no se cierra 00:02:37
esta va a ser la gran diferencia con XML 00:02:39
por eso HTML no se puede considerar 00:02:41
XML, aunque se parezca 00:02:43
muchísimo 00:02:45
bueno, este es el código fuente de esta página 00:02:46
y aquí es como se vería en el navegador 00:02:49
un párrafo y detrás otro 00:02:51
vamos a ver, voy a aplicar 00:02:52
el botón derecho aquí 00:02:55
y voy a ver la fuente de este trocito del marco que estamos aquí 00:02:57
y vemos que esto es una página completa 00:03:00
este marco es una página completa 00:03:04
y vemos su estructura 00:03:06
entonces vemos aquí, vamos a ponerlo más grande para verlo mejor 00:03:07
que esta paginita, ese trocito de página 00:03:11
tiene primero el identificador del tipo de documento que va a venir 00:03:15
que es HTML 00:03:19
y que como ya iremos sabiendo 00:03:19
no especificamos qué versión 00:03:23
porque ahora mismo está en continuo movimiento y por tanto no hay un versionado de ellas 00:03:25
tenemos la etiqueta HTML que indica que todo lo que viene a partir de ahora hasta aquí es una página HTML 00:03:31
con un atributo que es LANG o LANGUAGE que dice que va a ser una página en español 00:03:38
dentro siempre aparecen HEAD y BODY 00:03:44
la cabecera donde vamos a explicar cosas sobre la página y lo que vamos a visualizar dentro de la página 00:03:47
el body, dentro de head 00:03:54
lo primero que estamos viendo es 00:03:56
una meta información 00:03:57
de la propia página, en la cual establecemos 00:03:59
que el conjunto de caracteres 00:04:01
se corresponde a UTF-8 00:04:03
UTF-8 00:04:06
que va a ser el estándar para todas las páginas 00:04:07
web, a pesar de que esto lo podemos cambiar 00:04:10
ya veremos que voy a recomendar 00:04:11
en todo momento 00:04:13
que las páginas las creemos ya en este formato 00:04:14
para no tener complicaciones 00:04:18
después tenemos un título 00:04:19
un título que acaba 00:04:21
ahí y que es tan largo como todo esto que aparece aquí, ¿de acuerdo? Este título en 00:04:23
la visualizadora en modernos se puede visualizar aquí, en esta parte de aquí, ¿de acuerdo? 00:04:30
Este como es del marco no aparece, aparece de la página donde estaba incluida y es esto 00:04:36
de aquí. Después tenemos otro meta, otra información que dice, que además es relativamente 00:04:41
moderno que esta página 00:04:51
se adecue al dispositivo 00:04:53
en el que encuentra, al ancho 00:04:55
de su dispositivo 00:04:57
en un inicio internet era 00:04:58
ordenadores, ordenadores peces 00:05:01
y en un inicio anterior incluso simplemente 00:05:03
editor de texto, pero bueno 00:05:05
a día de ya en los normales 00:05:07
navegadores en un 00:05:09
ordenador que tiene una pantalla por mínimo 00:05:11
de 800 x 600 píxeles 00:05:13
¿qué ocurre? que poco a poco 00:05:15
han ido apareciendo por un lado 00:05:17
pantallas mucho más grandes, pero también por otro 00:05:19
dispositivos pequeños como son nuestros móviles 00:05:21
por lo tanto nuestra página 00:05:23
debe adecuarse un poco a esa 00:05:25
información, ya veremos lo que es el diseño 00:05:27
adaptativo 00:05:29
o responsivo como se dice 00:05:30
en inglés, en el cual 00:05:33
podemos modificar incluso el aspecto 00:05:34
del documento con esos CSS 00:05:37
a los que vamos a trabajar después 00:05:39
en función de que dispositivo 00:05:41
o que tamaños estamos manejando 00:05:44
el head puede incluir 00:05:45
muchas más cuestiones, de momento estas son 00:05:47
básicas y ya iremos viendo algunas más 00:05:49
por ejemplo enlaces, hojas de estilo, etc 00:05:52
etc 00:05:54
en el cuerpo, vemos que empieza 00:05:54
aquí y finaliza aquí 00:05:57
hay dos párrafos 00:05:59
P y P, que es lo que hemos visualizado 00:06:01
realmente en el marco, de acuerdo 00:06:03
este es el trocito que hemos visualizado 00:06:05
en nuestro marco 00:06:07
bueno, este es un documento 00:06:09
perfectamente realizado 00:06:11
que como vemos tiene etiquetas 00:06:12
que se abren y se cierran y algunas 00:06:15
como meta 00:06:17
Que no se abre 00:06:18
Que se abre, perdón, pero no se cierra 00:06:20
Es decir, etiquetas 00:06:22
Que no hace falta cerrar 00:06:24
¿De acuerdo? 00:06:27
Vamos a cerrar esta ventana 00:06:30
Y vamos a continuar 00:06:31
Voy a poner esto un poco en un formato más pequeño 00:06:33
Porque si no 00:06:35
No vemos la información 00:06:36
Por lo menos así 00:06:38
Bien 00:06:40
HR era de las que decíamos 00:06:40
Que no se abrió, no se cierra 00:06:45
Aquí más ejemplos 00:06:46
Strong, que los navegadores consideran que tiene que convertirse en algo con tipo negrita 00:06:47
o algo un poco más resaltado. Y una cuestión que es muy interesante es ver que por defecto 00:06:55
un conjunto de espacios es solamente un espacio, corresponde a un único espacio. Y el tratamiento 00:07:02
genérico que se hace a los altos de línea es poner simplemente un espacio. Excepto una 00:07:10
etiqueta, que es la etiqueta pre o pre 00:07:17
formateo, que en la cual 00:07:19
lo que hacemos es justo 00:07:21
que lo que hemos puesto aquí se vea 00:07:23
en el mismo modo, de tal manera que veríamos 00:07:25
uno, veríamos esta información 00:07:27
justo de esta manera 00:07:29
¿de acuerdo? bueno, este comportamiento 00:07:31
se puede variar con una propiedad que ya veremos 00:07:33
dentro de los CSS 00:07:35
que es white space 00:07:36
¿qué más cuestiones? bueno 00:07:38
pues simplemente como cada 00:07:41
navegador va dándole 00:07:43
un formato a cada estructura de nuestro documento 00:07:45
pero quiero indicar que nuestro documento debe tener 00:07:48
la información propia del documento, no entrar en 00:07:51
cómo se va a visualizar, como ya hemos 00:07:54
visto por aquí, todas las etiquetas pueden 00:07:57
tener atributos, por ejemplo este atributo 00:08:00
title, en el cual si yo 00:08:02
me pongo por encima de este párrafo, me va a aparecer 00:08:05
una ventanita que dice sorpresa 00:08:09
vamos a ponernos por encima y efectivamente ha aparecido ahí en negrita 00:08:12
Bueno, en fondo negro, la palabra sorpresa 00:08:15
O, una cosa que vamos a desaconsejar enormemente 00:08:18
Pero que lo estamos haciendo aquí para comprobarlo 00:08:21
Podemos definir un estilo 00:08:24
En el cual decimos que el color del texto va a ser rojo 00:08:26
Y entonces por eso esto aparece directamente en rojo 00:08:30
¿De acuerdo? 00:08:34
Bueno, aquí también nos dice nuestro amigo Bartolomé 00:08:35
Que esto es desaconsejado 00:08:39
¿Cómo ponemos un comentario? 00:08:41
Algo que queremos que aparezca dentro de la información 00:08:43
Pero que no se visualice 00:08:46
Pues con esta información que ya utilizamos en XML 00:08:48
Con lo cual no hay mucho más que contar 00:08:52
Y bueno, la historia de HTML es preciosa 00:08:54
Es una historia realmente apasionante 00:08:58
Y además, sabiendo que se inicia en Europa 00:09:00
Que es de las pocas cosas que se inicia en nuestro continente 00:09:03
Pues también tiene gran interés 00:09:05
Lo que sí hay que decir es que hay dos organismos 00:09:07
Que han estado implicados durante los años 00:09:10
Uno, el V3C 00:09:12
Que es el que ha dado vida hasta la versión HTML4 00:09:13
Y después poco a poco 00:09:17
Un consorcio de grandes empresas 00:09:19
Y ninguna de ellas son desconocidas 00:09:21
Apple, Mozilla, Opera 00:09:24
Pues empezaron a conformar esto que se llama WOT o WG 00:09:26
Y a día de hoy es el que lleva las riendas 00:09:30
Y su recomendación 00:09:33
Que es la norma que realmente deberíamos seguir 00:09:36
Está en esta dirección 00:09:39
Yo ya la he bajado para que la veamos 00:09:40
Y este es el estándar que deberíamos seguir en todo momento 00:09:42
Ya no se está hablando de versionado 00:09:47
Y por eso en el Doctype hemos visto simplemente que decimos HTML 00:09:50
Porque ya no estamos entrando en qué versión estamos 00:09:54
Y aquí, esta página, que es la que actualmente está manejando WOT o WG 00:09:56
Es donde podemos ver todos los elementos que se está trabajando 00:10:03
Y será nuestro elemento de referencia siempre que queramos buscar de verdad cómo se hace algo 00:10:06
porque una cosa que van a tener ustedes siempre en cuenta 00:10:12
es que va a haber muchas páginas que les funcionen 00:10:16
es decir, que se vean lo que ustedes querían ver en el navegador 00:10:19
pero realmente estén mal desarrolladas 00:10:22
es decir, el navegador interpreta que lo que uno ha escrito es de una manera 00:10:25
y lo pone así, pero hace él por su cuenta los cambios 00:10:30
es una cosa muy interesante de ver y ya lo veremos con algún ejemplo concreto 00:10:34
donde hagamos una página muy tonta, muy tonta 00:10:38
y veamos que termina errores y veremos como él automáticamente modifica ese árbol de la página 00:10:40
para adecuarlo a un navegador 00:10:50
bueno, como introducción de lo que es una página web creo que ya es más que suficiente 00:10:52
Idioma/s:
es
Autor/es:
Amadeo Mora
Subido por:
Amadeo M.
Licencia:
Dominio público
Visualizaciones:
106
Fecha:
28 de diciembre de 2020 - 11:33
Visibilidad:
Público
Centro:
IES CLARA DEL REY
Duración:
10′ 59″
Relación de aspecto:
1.78:1
Resolución:
1364x768 píxeles
Tamaño:
66.83 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid