Como Inicializar un proyecto en Html

Hola buenas les quiero compartir como inicializar un trabajo en HTML.

Lo primero que quiero que hagamos es que veamos el video que les comparto en el siguiente enlace
Mirar video de la clase

Lo segundo que tendrías que realizar es crear una carpeta con el nombre que deseas llamar a tu proyecto, en mi caso le llamare
Unicorn

Una vez abres Visual Studio Code se mostrará de esta manera

Pueden realizarlo de dos formas una arrastrando la carpeta con nombre Unicorn a Visual Studio Code de esta forma

o la otra forma es en Visual Studio Code solo es presionar donde dice Open Folder y buscar el proyecto y seleccionarlo y listo. Una vez seleccionado te aparecerá el nombre del proyecto en Visual Studio Code.

Creamos un archivo con el nombre index.html y apretamos

Shift + 1 = ! y le damos enter y aparecera esto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Después de esto cambiamos el titule de Document por Unicorn
y creamos como estaría compuesto el Body lo vamos a dividir en Header, Main, Footer y quedaría de esta forma

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Unicorn</title>
</head>
<body>
    <header>

    </header>
    <main>

    </main>
    <footer>

    </footer>
</body>
</html>

dentro del Header va esto

      <a>
        <span>Unicorn</span>
        <span>Diseño Web / Love Unicorn</span>
      </a>
      <nav>
        <ul>
          <li><a href="#">Inicio</a></li>
          <li><a href="#">Servicios</a></li>
          <li><a href="#">Portafolio</a></li>
          <li><a href="#">Contacto</a></li>
        </ul>
      </nav>

y esto va dentro del Main

    <article>
        <header>
          <h1>Esta es una historia de un <span>Unicornio</span></h1>
        </header>
        <img
          src="https://d11cuk1a0j5b57.cloudfront.net/blog/wp-content/uploads/2022/09/13123104/empleados-unicornio-occmundial-1000x600.jpg"
          alt="Unicorn"
        />
        <div class="content">
          <p>
            ¿Alguna vez viste un unicornio? No en pintura ni en tapices, tampoco
            en ninguno de esos productos brillantes pensados para niñas. Me
            refiero a uno de verdad, es decir, una de esas criaturas con forma
            de caballo, pezuñas hendidas, barba de chivo y, por supuesto, un
            cuerno largo en espiral —su característica más reconocible— saliendo
            de su frente.
          </p>
          <p>
            Con la mano en el pecho puedo decir que, por lo menos, he visto el
            cuerno de uno. Me topé con él recientemente en París, en una
            exhibición del Museo Cluny, que alberga una colección fascinante de
            arte medieval.
          </p>
          <p>
            Era una pieza de marfil montada sobre una base de bronce oscuro que
            se robaba las miradas. Fue diseñada por un escultor estadounidense
            posmoderno, Saint Clair Clemin, para lo que se inspiró en un
            pedestal con la forma de cabeza de unicornio que había hecho el
            orfebre italiano renacentista Benvenuto Cellini para un cuerno
            similar que perteneció al papa Clemente VII.
          </p>
          <p>
            Claro está que la pieza de marfil que se exhibía en el Museo Cluny
            —y puede que también la del Papa del siglo XVI— nunca adornó la
            cabeza de un unicornio. De haberlo hecho, el pobre animal hubiera
            tenido problemas para comer, ya que el cuerno le hubiera impedido
            bajar el hocico lo suficiente para poder pastar.
          </p>
          <p>
            Aquel "cuerno de unicornio" que se muestra en el museo francés es en
            realidad el colmillo helicoidal de un narval, un cetáceo que vive en
            las aguas del Ártico, frente a las costas de Rusia, Groenlandia y
            Canadá.
          </p>
          <p>
            Según Béatrice de Chancel-Bardelot, la curadora de la exhibición
            Unicornios mágicos, en la Europa Occidental de la edad media la
            gente creía que esos exóticos colmillos de narval eran cuernos de
            unicornios. Se pagaba por ellos un alto precio.
          </p>
          <p>
            En Groenlandia, donde los narvales a veces eran arrastrados por las
            olas hasta las playas, la gente se dio cuenta de que en esas piezas
            de marfil extrañas y abundantes podía haber un negocio en una zona
            más lejana. Así que fueron llevados a Europa a través de una red que
            pasaba por Escandinavia y se convirtieron con el tiempo en objetos
            de prestigio, codiciados por príncipes y Papas, que a veces ni
            siquiera sabían qué eran.
          </p>
          <p>
            Erróneamente, supusieron que los colmillos procedían de los
            monoceros, el nombre con el que los antiguos griegos llamaban a unas
            bestias con cuerno que fueron descritas, entre otros, por el
            escritor romano del siglo I Plinio el Viejo como un "animal muy
            fiero" con el cuerpo de un caballo, la cabeza de un ciervo, los pies
            de un elefante y la cola de un jabalí.
          </p>
          <p>
            Supuestamente, según Plinio, los monoceros emitían una especie de
            mugido grave y tenían un cuerno negro de casi 90 centímetros de
            largo en medio de la frente. Según escribió, era imposible
            capturarlos vivos.
          </p>
        </div>
      </article>

Y esto iría en el Footer

      <p>
        &copy; 2014 <a href="https://dev.to/develprofeadonis">ADEVELOPER</a>
      </p>

Quedando todo el cuerpo del Body de esta forma

  <body>
    <header>
      <a>
        <span>Unicorn</span>
        <span>Diseño Web / Love Unicorn</span>
      </a>
      <nav>
        <ul>
          <li><a href="#">Inicio</a></li>
          <li><a href="#">Servicios</a></li>
          <li><a href="#">Portafolio</a></li>
          <li><a href="#">Contacto</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article>
        <header>
          <h1>Esta es una historia de un <span>Unicornio</span></h1>
        </header>
        <img
          src="https://d11cuk1a0j5b57.cloudfront.net/blog/wp-content/uploads/2022/09/13123104/empleados-unicornio-occmundial-1000x600.jpg"
          alt="Unicorn"
        />
        <div class="content">
          <p>
            ¿Alguna vez viste un unicornio? No en pintura ni en tapices, tampoco
            en ninguno de esos productos brillantes pensados para niñas. Me
            refiero a uno de verdad, es decir, una de esas criaturas con forma
            de caballo, pezuñas hendidas, barba de chivo y, por supuesto, un
            cuerno largo en espiral —su característica más reconocible— saliendo
            de su frente.
          </p>
          <p>
            Con la mano en el pecho puedo decir que, por lo menos, he visto el
            cuerno de uno. Me topé con él recientemente en París, en una
            exhibición del Museo Cluny, que alberga una colección fascinante de
            arte medieval.
          </p>
          <p>
            Era una pieza de marfil montada sobre una base de bronce oscuro que
            se robaba las miradas. Fue diseñada por un escultor estadounidense
            posmoderno, Saint Clair Clemin, para lo que se inspiró en un
            pedestal con la forma de cabeza de unicornio que había hecho el
            orfebre italiano renacentista Benvenuto Cellini para un cuerno
            similar que perteneció al papa Clemente VII.
          </p>
          <p>
            Claro está que la pieza de marfil que se exhibía en el Museo Cluny
            —y puede que también la del Papa del siglo XVI— nunca adornó la
            cabeza de un unicornio. De haberlo hecho, el pobre animal hubiera
            tenido problemas para comer, ya que el cuerno le hubiera impedido
            bajar el hocico lo suficiente para poder pastar.
          </p>
          <p>
            Aquel "cuerno de unicornio" que se muestra en el museo francés es en
            realidad el colmillo helicoidal de un narval, un cetáceo que vive en
            las aguas del Ártico, frente a las costas de Rusia, Groenlandia y
            Canadá.
          </p>
          <p>
            Según Béatrice de Chancel-Bardelot, la curadora de la exhibición
            Unicornios mágicos, en la Europa Occidental de la edad media la
            gente creía que esos exóticos colmillos de narval eran cuernos de
            unicornios. Se pagaba por ellos un alto precio.
          </p>
          <p>
            En Groenlandia, donde los narvales a veces eran arrastrados por las
            olas hasta las playas, la gente se dio cuenta de que en esas piezas
            de marfil extrañas y abundantes podía haber un negocio en una zona
            más lejana. Así que fueron llevados a Europa a través de una red que
            pasaba por Escandinavia y se convirtieron con el tiempo en objetos
            de prestigio, codiciados por príncipes y Papas, que a veces ni
            siquiera sabían qué eran.
          </p>
          <p>
            Erróneamente, supusieron que los colmillos procedían de los
            monoceros, el nombre con el que los antiguos griegos llamaban a unas
            bestias con cuerno que fueron descritas, entre otros, por el
            escritor romano del siglo I Plinio el Viejo como un "animal muy
            fiero" con el cuerpo de un caballo, la cabeza de un ciervo, los pies
            de un elefante y la cola de un jabalí.
          </p>
          <p>
            Supuestamente, según Plinio, los monoceros emitían una especie de
            mugido grave y tenían un cuerno negro de casi 90 centímetros de
            largo en medio de la frente. Según escribió, era imposible
            capturarlos vivos.
          </p>
        </div>
      </article>
    </main>
    <footer>
      <p>
        &copy; 2014 <a href="https://dev.to/develprofeadonis">ADEVELOPER</a>
      </p>
    </footer>
  </body>

Quedando la pagina web de esta forma

Blog

Como Inicializar un proyecto en Html

Adonis Aleman

Join Our Newsletter. No Spam, Only the good stuff.

Related