Saltar navegación

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

HTML - Estructura documento 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 2 de noviembre de 2020 por Fernando M.

304 visualizaciones

Más información Transcripción

Descargar la transcripción

Bueno, pues vamos a empezar haciendo el primer documento HTML, ¿vale? 00:00:00
Para hacer este documento nos vamos a ir a nuestro editor, que en este caso es el Brackets, ¿vale? 00:00:06
Como veis aquí. 00:00:16
Entonces, lo primero que vamos a hacer es crear un documento nuevo, para eso le damos a Archivos y a Nuevo, ¿vale? 00:00:17
O simplemente podemos pulsar la tecla Control-N, ¿vale? 00:00:23
Y se nos crea, como veis, un archivito aquí. 00:00:26
Entonces, lo primero que vamos a hacer es guardarlo. 00:00:32
Para eso seguimos el mismo proceso, archivo, guardar o control S. 00:00:34
Se nos abrirá una carpeta y lo guardamos donde queramos. 00:00:39
Yo en este caso lo voy a grabar en una carpeta con todos los códigos. 00:00:42
Y lo importante es que tenemos que acordarnos de grabarlo como el nombre del archivo. 00:00:47
En mi caso va a ser prueba.html. 00:00:51
¿Vale? Fijaros que ya lo he guardado y aquí en la parte izquierda, ¿veis? Aparece que dentro de la carpeta que yo he llamado código, ¿vale? Aparece prueba.html, ¿vale? 00:00:55
Entonces, ¿qué es lo primero que vamos a hacer? Lo primero que vamos a hacer es poner una etiqueta para indicar que este documento que estamos haciendo es un documento HTML, ¿vale? 00:01:09
Porque no vale componer la extensión únicamente. Entonces, ponemos el símbolo de menor que y ponemos una exclamación, ¿vale? El símbolo de abrir exclamación. Perdón, de cerrar exclamación. 00:01:18
y ponemos doc type vale y ponemos html y cerramos la mayuta vale 00:01:34
entonces una vez que hemos hecho eso le damos a la tecla enter 00:01:44
y ahora lo que vamos a hacer es poner la etiqueta html 00:01:51
ponemos la etiqueta html y fijaros que ya automáticamente el 00:01:57
editor me la cierra, ¿vale? Ahora, cosa importante. Dentro de esta etiqueta HTML tenemos que establecer 00:02:02
dos parámetros, ¿vale? Lo que vamos a llamar parámetros en este caso, que son, o atributos, 00:02:10
más que parámetros, atributos. El primero es el idioma, ¿vale? Le vamos a decir que 00:02:18
la página está escrita en castellano. Para eso ponemos una primera etiqueta que se llama 00:02:21
lang. Le damos a igual y entre comillas vamos a poner el idioma. En este caso, como es castellano, 00:02:25
español, pues ponemos es, ¿vale? Y a continuación vamos a poner, bueno, con eso en principio 00:02:31
sería más que suficiente, ¿vale? Ahora lo que vamos a hacer es poner el contenido de 00:02:40
la web. En este caso vamos a poner tanto una cabecera como el cuerpo de la web, ¿vale? 00:02:47
Para poner la cabecera ponemos una etiqueta que se llama head, ¿vale? ¿Ok? Y luego pondríamos 00:02:54
la etiqueta body, ¿vale? Que sería el cuerpo de la web. 00:03:02
Cosas importantes que hay que añadir. Pues dentro de la etiqueta head vamos a meter una etiqueta meta, 00:03:08
que es para meter lo que se llaman los metadatos de la web. 00:03:14
En este caso vamos a poner una etiqueta muy importante, que es la etiqueta meta, 00:03:17
con el charset, que es un conjunto de caracteres, ¿vale? Que se llama UTF-8, ¿vale? 00:03:23
¿Para qué sirve meter esta etiqueta? Esta etiqueta sirve para que cuando nosotros pongamos en nuestra página web, por ejemplo, acento o la ñ, ¿vale? Es decir, esos caracteres raros, pues el navegador sea capaz de reconocerlo, ¿vale? 00:03:31
Y por último, vamos a poner una etiqueta muy importante, que es la etiqueta title, ¿vale? Que es para poner un título de la página web, ¿vale? En este caso, pues voy a poner mi primera página web, ¿vale? 00:03:45
Y luego nos vamos a ir al body y vamos a poner una etiqueta que ya explicaremos más adelante, que es la etiqueta de cabecera, ¿vale? La H1, ¿vale? Y ponemos la página web de Pico2, ¿vale? 00:04:02
Y otra etiqueta para poner párrafo, que es la etiqueta P, ¿vale? Y ponemos el contenido de mi primera página web, ¿vale? Y le damos a guardar, ¿vale? 00:04:20
Y si nosotros ahora abrimos esta página, ¿vale? Es decir, la visualizamos, para ello podremos darle aquí a Opening Browser, ¿vale? Botón derecho, Opening Browser. Esto nos abrirá un archivo en nuestro navegador, el que nosotros estamos utilizando, ¿vale? 00:04:38
En mi caso yo utilizo el Firefox y a ver si se me abre y os lo puedo enseñar. Si no, lo abro yo directamente. Voy a probar a abrirlo. Vale, entonces, fijaros, esto sería lo que se vería al crear la página web, ¿vale? 00:04:58
Lo que veis es lo que hablábamos de la cabecera, la etiqueta H1, ¿vale? Esto sería la etiqueta P y el title que está dentro de la cabecera, pues si os dais cuenta, se ve justo aquí, ¿vale? 00:05:51
Donde pone mi primera página web, ¿vale? Ahí lo podréis ver. ¿Ok? Bueno, pues con esto ya podríamos hacer una primera página web. 00:06:04
Vamos a seguir viendo etiquetas y diferentes contenidos sobre los que podemos trabajar para desarrollar nuestra web. 00:06:17
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
304
Fecha:
2 de noviembre de 2020 - 21:42
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
06′ 26″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
15.64 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid