Iframes y comentarios

Información Adicional

No existe información adicional para este video tutorial.

Transcripción

Bienvenido a este nuevo video tutorial, mi nombre es José Liévano y en este video hablaremos sobre iframes y añadir comentarios en nuestro HTML
Iniciaremos hablando sobre añadir un iframe en nuestro documento.
En algunas ocasiones especiales vamos a necesitar combinar el contenido de dos páginas web.
Para este propósito podemos usar un iframe, lo que un iframe te permite es mostrar el contenido de una página web dentro de otra, es como una ventana que te permite ver lo que hay dentro de otra página independiente a donde te encuentras en este momento.
Vamos a realizar un ejemplo para ver de lo que estamos hablando
Como puedes observar tenemos dos documentos actualmente abiertos en nuestro editor
Tenemos el documento index.html y el documento llamado otrapagina.html
Si observamos la carpeta donde estos dos documentos se encuentran guardados podrás ver que se encuentran en la misma carpeta.
Regresemos al editor.
Y podrás ver que dentro de index.html tenemos el código base para nuestra página y que dentro de otrapagina.html tenemos el código base más un párrafo extra.
Hemos añadido algo de texto lorem ipsum en este párrafo, que como lo discutíamos en un video anterior, es un texto que nos ayuda a simular contenido real.
Entonces, lo que haremos será colocar el iframe dentro de index.html, así que regresamos a index.html y dentro de la etiqueta body colocaremos la nuestro iframe.
Así que iniciamos, colocamos la etiqueta iframe, ahora colocaremos el atributo width que significa ancho, esto nos permite definir el ancho en pixels que nuestro iframe tendrá, le colocaremos en este caso 300.
Luego colocamos el atributo height que significa altura, esto nos ayuda a definir el alto de nuestro iframe en pixels, le colocaremos 300 igualmente.
Y ahora colocaremos el atributo source con src que como sabes significa fuente, u origen, y aquí le indicaremos donde se encuentra esa otra página que nosotros deseamos cargar dentro de index.html
Así que como valor colocaremos el nombre de nuestro documento otrapagina.html, recuerda que este documento se encuentra en el mismo folder que nuestro index, y debido a ello no necesitamos especificar nada más, si se encontrara en un folder inferior o superior necesitaríamos especificarlo dentro del valor de source.
Y ahora colocaremos la eitqueta iframe de cierre.
Muy bien, ahora sí, guardamos nuestros cambios y vamos a nuestro navegador.
Al refrescar la página podrás ver que ahora tenemos aquí esta especie de caja que contiene y nos muestra la página otrapagina.html
Abriremos otrapagina.html también, para que puedas visualizar mejor lo que está ocurriendo.
Tenemos aquí el documento otrapagina.html como puedes verlo en la barra de direcciones, y aquí esta index.html
Entonces lo que hace nuestro iframe, es mostrar el contenido que tenemos aquí en otrapagina.html dentro de index.html dentro de esta caja que es el iframe.
Los iframe pueden encontrarse rodeados e interactuar con otros elementos sin problemas, para poder ver esto en acción regresemos a nuestro index.html en el editor y añadiremos un párrafo arriba de la etiqueta iframe.
Vamos a colocar nuestra etiqueta p y dentro de ella escribiremos esto de abajo es un iframe.
Ahora guardamos el documento, regresamos al navegador y refrescamos.
Como puedes observar tenemos nuestro párrafo al inicio y luego nuestro iframe.
Dentro de un iframe, también podemos colocar otras páginas web, vamos a hacer la prueba, regresemos a nuestro editor
Vamos a modificar el tamaño de este iframe, lo haremos un poco más grande, vamos a colocarle 700 de ancho y 600 de alto, y dentro de source eliminaremos el valor actual y vamos a mostrar el sitio web de lievanosan.com dentro de nuestro index, así que escribimos http://lievanosan.com
Ahora guardamos nuestro documento, regresamos al navegador y refrescamos.
Y como puedes observar ahora dentro de nuestro index se muestra el sitio web de lievanosan.com
Lo siguiente a ver en este video son los comentarios.
Los comentarios dentro del código HTML nos permiten añadir notas, especificaciones, guías y cualquier tipo de comentario que sea de ayuda para entender nuestro código.
Los comentarios son muy importantes tanto en HTML, como en CSS, y lenguajes de programación como Javascript, PHP y muchos más.
Es importante saber que estos comentarios no pueden ser visualizados por los visitantes, ya que el navegador no los muestra como parte del sitio web, sin embargo, si el usuario observar el código HTML de nuestra web, entonces si podrá ver los comentarios dentro del código.
Eso significa que no debemos colocar ningún tipo de información demasiado importante dentro de ellos, como por ejemplo contraseñas y usuarios, correos privados, o cualquier tipo de información que no deseamos compartir.
Entrar en la vista de código en la mayoría de navegadores es muy fácil, al dar clic derecho podremos ver la opción de ver el código de la página, y eso nos abre una pestaña o ventana nueva en la que podremos ver el código de la página.
Y como puedes observar, desde aquí es posible ver todo el código HTML que hemos colocado en esta página, de modo que el código que escribimos aquí no es precisamente un secreto para el visitante, ya que es muy fácil ver el código de cualquier sitio web.
Entonces, ahora que sabemos esto, veamos como añadir algunos comentarios en nuestra página.
Vamos a regresar al editor.
Los comentarios no son siempre necesarios para documentos HTML relativamente pequeños, serán mucho más útiles cuando entres en CSS y Javascript.
Lo más beneficioso de añadir comentarios en un código muy largo es que te permiten recordar que es lo que estabas haciendo, imagina que inicias un código HTML el día de hoy y por cualquier motivo ya no sigues con ese proyecto, y luego seis meses después decides retomarlo, bien, pues a menos que coloques comentarios que te ayuden a recordar que es lo que estabas haciendo será muy difícil arrancar de donde te habías quedado.
Entonces para añadir un comentario únicamente debemos primero añadir los símbolos de mayor y menor que, luego colocamos un símbolo de exclamación, seguido por dos guiones un espacio y luego otros dos guiones.
Entonces, es en esta zona que nuestros comentarios deben ir, entre los dos pares de guiones; vamos a colocar este es un comentario.
Guardamos nuestro documento, regresamos al navegador y si refrescamos la página podrás observar que el comentarios no se muestra al visitante, pero si vamos al ver el código de la página podrás ver que ahí tenemos nuestro comentario
Esto es todo por este video tutorial, en el siguiente video seguiremos nuestro aprendizaje de HTML hablando sobre la creación de tablas.
Mi nombre es José Liévano y nos veremos en el siguiente video.

One Comment on “Iframes y comentarios”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Quieres aprender a crear sitios web?

Regístrate gratis como estudiante y aprende a crear sitios web sorprendentes. Gana certificados y medallas al completar los cursos gratuitos.
¡REGÍSTRATE GRATIS!
close-link
Crea tu sitio web con diseño profesional en menos de 15 minutos
Ver Tutorial
close-image