1 00:00:02,540 --> 00:00:10,779 Buenos días. Hoy vamos a hablar de HTML. Vamos a hacer una introducción más adelante en la siguiente unidad. 2 00:00:11,460 --> 00:00:19,480 Hablaremos, trabajaremos y haremos prácticas sobre todo el contenido. Hoy es simplemente para que veáis de qué se trata. 3 00:00:19,480 --> 00:00:36,590 Para ello voy a compartir la pantalla para que veáis el código que voy escribiendo en Visual Studio 4 00:00:36,590 --> 00:00:41,530 y además veamos qué es lo que va sucediendo en el navegador. 5 00:00:42,609 --> 00:00:50,270 Como hemos dicho, HTML es un lenguaje de marcas, con lo cual se trabaja con etiquetas. 6 00:00:50,270 --> 00:01:03,649 Las etiquetas en HTML empiezan por el símbolo menor y terminan por el símbolo mayor. 7 00:01:04,469 --> 00:01:14,909 Por ejemplo, la primera etiqueta que hay que poner en todo documento HTML es esta, que indica al navegador que es un documento HTML5. 8 00:01:14,909 --> 00:01:30,370 Un documento HTML debe tener siempre o empezar siempre con una etiqueta HTML que tiene una etiqueta de cierre HTML. 9 00:01:30,969 --> 00:01:41,329 La etiqueta de inicio se diferencia de la etiqueta de cierre por esta barra que tiene, este slash que tiene al principio del cierre. 10 00:01:41,329 --> 00:01:53,909 El texto es exactamente el mismo. Dentro de esta etiqueta HTML vamos a ir introduciendo los distintos elementos que debe tener una página. 11 00:01:54,930 --> 00:02:06,409 Debe tener dos secciones básicas, una sección que se llama cabecera y una sección que se llama body. 12 00:02:06,409 --> 00:02:17,979 En la sección cabecera vamos a trabajar con todos los elementos que tienen que ver con los metadatos y la información de la página. 13 00:02:18,879 --> 00:02:27,500 Por ejemplo, en este momento vamos a poner el título que se va a llamar mi primer HTML. 14 00:02:30,069 --> 00:02:32,990 En la parte de body vamos a poner el contenido de la página. 15 00:02:33,830 --> 00:02:44,509 Si nosotros abrimos nuestro explorador de Windows, vemos que aquí tenemos nuestra página HTML 16 00:02:44,509 --> 00:02:50,409 linkada a la aplicación del navegador, el que tengamos por defecto. 17 00:02:50,969 --> 00:03:00,000 Si le doy doble clic, aparece mi página en el navegador Edge, que es el que yo tengo por defecto. 18 00:03:00,840 --> 00:03:14,699 Como veis, aparece en blanco, porque de momento lo único que tengo he puesto es el título que me aparece aquí arriba como nombre de la pestaña, para identificar la pestaña. 19 00:03:15,919 --> 00:03:20,039 Si quiero que aparezca algo de contenido, debo meterlo en la parte de Body. 20 00:03:20,419 --> 00:03:29,780 Por ejemplo, vamos a meter una etiqueta H1. H1 viene de Header y 1 significa que es la cabecera más grande. 21 00:03:30,000 --> 00:03:48,490 Si pongo una cabecera que se llama mi primer HTML, cuando recargo el navegador me aparece un título grande con el texto que le he introducido. 22 00:03:48,490 --> 00:04:15,740 Podemos utilizar también una etiqueta de párrafo. Este es el primer párrafo de mi página, de forma que aparezca en la página con una fuente de tamaño normal, la que tiene por defecto. 23 00:04:15,740 --> 00:04:36,519 Y por último, para esta introducción vamos a añadir una imagen. La imagen se añade con una etiqueta que es img y le tenemos que poner el lugar donde se encuentra, el source, src. 24 00:04:36,519 --> 00:04:49,300 De acuerdo, en este caso yo la tengo en la misma carpeta en donde tengo mi fichero HTML, con lo cual únicamente tengo que escribir el título, madrid.jpg. 25 00:04:49,680 --> 00:05:04,819 En la etiqueta de imagen también vamos a poner un atributo que va a describir a la imagen para que nuestra página sea completamente accesible. 26 00:05:04,819 --> 00:05:23,800 En este caso vamos a poner imagen de Madrid. La etiqueta image no tiene etiqueta de cierre. Podemos poner una etiqueta, una barra aquí para indicar que queremos cerrarla, pero no es necesario. 27 00:05:23,800 --> 00:05:53,600 Sí, ahora actualizamos nuestra página. Ya tenemos nuestra imagen. Recordad que tenéis que buscar imágenes de Creative Commons. Ya hemos visto cómo en el navegador con las herramientas y si es necesario poner el nombre y la autoría del autor debajo de la imagen o que sea visible en algún sitio. 28 00:05:53,800 --> 00:06:04,699 Vale, pues con esto terminamos la introducción de HTML. Espero que os haya parecido interesante.