Estructura global 2

Información Adicional

No existe información adicional para este video tutorial.

Transcripción

En el video anterior iniciamos la creación de nuestro documento HTML con su estructura normal y correcta
En este video retomaremos donde nos habíamos quedado y terminaremos nuestro documento
Ahora usaremos la etiqueta title de título en español
Así que añadimos la etiqueta title y luego añadimos la etiqueta de cierre
Y dentro de esta etiqueta añadiremos el título de nuestro documento
En este caso colocaremos mi primera página web
Ahora, esta es la primera cosa que escribimos en nuestro documento que vamos a poder ver dentro de nuestra página en el navegador
Así que si guardamos el documento, y luego vamos al navegador y refrescamos la página, recuerda con los atajos del teclado que vimos en un video anterior
Podrás ver que aquí arriba ahora dice mi primera página web
Eso es debido a que ese es el título de nuestra página
En otros navegadores es posible que el título de la página parezca en otra área y no necesariamente en la pestaña
Es posible que lo veamos en el área de título del navegador
Lo siguiente es colocar la etiquete body a nuestro documento
Así que regresamos al editor y colocamos la etiqueta body
Esta etiqueta va siempre después del cierre de la etiqueta head
No va dentro de la etiqueta head, debe ir debajo de ella
Dentro de la etiqueta body vamos a colocar todo el contenido de nuestro sitio web
Esto es lo que se puede ver en el navegador, aquí es donde colocaremos todas nuestras imágenes, textos, videos, etc…
Ahora esto es básicamente lo que necesitamos para estructurar nuestro documento HTML
Pero aún hay algunas etiquetas extra  que pueden ayudarte con la estructura del documento
Primero tenemos la etiqueta div, así que vamos a colocar una etiqueta div y la vamos a cerrar
Y dentro de este div, vamos a colocar algo de texto, vamos a colocarle este es un div
Div significa división, o una sección de tu documento
Los divs son muy usados y se usan más que todo para darle estilo a secciones específicas del documento
Y también son usadas para agrupar contenido de forma lógica
Es posible tener varios divs en una sola página, y en ocasiones se encuentran unos dentro de otros
Tal y como este div se encuentra dentro de la etiqueta body
Un div es un elemento conocido como un elemento en bloque o block element
Existen otros elementos que también son block elements, pero un block element significa que colocará otros elementos fuera de su camino, es decir que los colocará bajo el
Vamos a aprender más sobre esto cuando toquemos CSS
Ahora si vamos al navegador nuevamente y refrescamos la página
Podrás ver que nuestro texto, esto es un div, ahora aparece en el navegador
Este texto no luce particularmente diferente, pero nosotros sabemos que se encuentra dentro de un div que podemos estilizar si lo deseamos
Por ejemplo, podríamos cambiar el color de fondo, o podemos modificar y añadir otros parámetros de diseño al div
Finalmente tenemos lo que se llama una etiqueta span
La etiqueta span es bastante similar al div, ya que se usa para dividir texto, normalmente pequeñas porciones o algunas palabras de un texto más amplio
Así que para usar la etiqueta span podemos simplemente colocarla donde deseamo que inicio, por ejemplo en nuestro texto ya escrito
Colocamos la etiqueta span, de modo que selecciones solo el texto que deseamos, y luego cerramos para indicar dónde termina nuestra etiqueta span
O podríamos también tener una etiqueta span independiente así que vamos a colocar un texto dentro de esta etiqueta que diga, este es un span
Y vamos a guardar nuestro documento, regresar al navegador y refrescarlo
Y ahora puedes ver el texto este es un div y este es un span
Nuevamente, no parece que exista algo particularmente especial con estos textos y en realidad no lo hay
Es solo una etiqueta div y una etiqueta span respectivamente
Vamos a hablar de sus diferencias en un futuro video
Peor por ahora lo que debes saber es que la etiqueta span es lo que se llama un inline element
Que es lo contrario a un block element
Un inline element no mueve otros elementos fuera del camino, es decir que el texto o elementos que envuelve no son afectados en su posición
En cambio un inline element  sigue la línea del elemento en el que se encuentra y de la página en general
Y no distorsionalal fluidez de la página
Así como viste que colocamos una etiqueta span dentro de nuestro div, y no ha modificado la posición de ese contenido
Así que si cambiamos este span por un div
Y luego guardamos, regresamos al navegador y refrescamos la página
Podrás ver que la palabra div ahora se encuentra bajo de la primera frase
Esto es debido a que el div es un block element y lo que hace es ocupar el 100% de la anchura de la página y por lo tanto envía al siguiente elemento hacia abajo
Y eso es
Hemos creado nuestra primera página web HTML correctamente estructurada
En los siguientes videos iniciaremos a aprender sobre cómo usar las etiquetas HTML para el texto

2 Comments on “Estructura global 2”

    1. Moymiss

      el span sigue siendo span, lo que hace que se parezca a un span es que contiene texto de igual manera, normalmente dentro de un div devería ir otras etiquetas por ejemplo div>h2+p+img (dentro del div un titulo, un parrafo y una imagen.

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