Introducción a HTML - Contenido educativo
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
Video introductorio al lenguaje de marcas HTML, realizado para el módulo de Lenguajes de marcas de 1ASIR
Buenos días. Hoy vamos a hablar de HTML. Vamos a hacer una introducción más adelante en la siguiente unidad.
00:00:02
Hablaremos, trabajaremos y haremos prácticas sobre todo el contenido. Hoy es simplemente para que veáis de qué se trata.
00:00:11
Para ello voy a compartir la pantalla para que veáis el código que voy escribiendo en Visual Studio
00:00:19
y además veamos qué es lo que va sucediendo en el navegador.
00:00:36
Como hemos dicho, HTML es un lenguaje de marcas, con lo cual se trabaja con etiquetas.
00:00:42
Las etiquetas en HTML empiezan por el símbolo menor y terminan por el símbolo mayor.
00:00:50
Por ejemplo, la primera etiqueta que hay que poner en todo documento HTML es esta, que indica al navegador que es un documento HTML5.
00:01:04
Un documento HTML debe tener siempre o empezar siempre con una etiqueta HTML que tiene una etiqueta de cierre HTML.
00:01:14
La etiqueta de inicio se diferencia de la etiqueta de cierre por esta barra que tiene, este slash que tiene al principio del cierre.
00:01:30
El texto es exactamente el mismo. Dentro de esta etiqueta HTML vamos a ir introduciendo los distintos elementos que debe tener una página.
00:01:41
Debe tener dos secciones básicas, una sección que se llama cabecera y una sección que se llama body.
00:01:54
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.
00:02:06
Por ejemplo, en este momento vamos a poner el título que se va a llamar mi primer HTML.
00:02:18
En la parte de body vamos a poner el contenido de la página.
00:02:30
Si nosotros abrimos nuestro explorador de Windows, vemos que aquí tenemos nuestra página HTML
00:02:33
linkada a la aplicación del navegador, el que tengamos por defecto.
00:02:44
Si le doy doble clic, aparece mi página en el navegador Edge, que es el que yo tengo por defecto.
00:02:50
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.
00:03:00
Si quiero que aparezca algo de contenido, debo meterlo en la parte de Body.
00:03:15
Por ejemplo, vamos a meter una etiqueta H1. H1 viene de Header y 1 significa que es la cabecera más grande.
00:03:20
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.
00:03:30
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.
00:03:48
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.
00:04:15
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.
00:04:36
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.
00:04:49
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.
00:05:04
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.
00:05:23
Vale, pues con esto terminamos la introducción de HTML. Espero que os haya parecido interesante.
00:05:53
- Idioma/s:
- Autor/es:
- Lucía San Miguel
- Subido por:
- Lucia S.
- Licencia:
- Reconocimiento - No comercial - Compartir igual
- Visualizaciones:
- 6
- Fecha:
- 25 de junio de 2023 - 12:01
- Visibilidad:
- Clave
- Centro:
- IES FRANCISCO DE QUEVEDO
- Duración:
- 06′ 09″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1920x1080 píxeles
- Tamaño:
- 17.85 MBytes