Autor Tema: Cómo subir página web a un servidor para que pueda verse en internet CU00730B  (Leído 1199 veces)

EnigmaticNerd

  • Principiante
  • **
  • Mensajes: 65
    • Ver Perfil
Buenas noches. Este es el enunciado del ejercicio CU00730B del tutorial de programación web con HTML desde cero:

Citar
Crea tres archivos HTML con diferente contenido y guárdalos con tres nombres de archivo distintos, por ejemplo webpage1.html, webpage2.html y webpage3.html. Establece links entre cada una de las páginas webs para que se pueda pasar de una a otra, por ejemplo desde webpage1.html hemos de poder pasar con un link a webpage2.html y webpage3.html, etc.. A continuación sube los tres documentos HTML al servidor y comprueba que puedan visualizarse y navegar mediante los links entre una página y otra.

Acá el link para ver la página: http://enigmaticnerd.byethost13.com/pagina1.html
Acá los códigos:

Página1.html:
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">

    <head>
        <title>
            Interstellar
        </title>
        <meta charset="utf-8"/>
   
    </head>
   
    <body style="background-color:honeydew">
         <div id="page" style="width: 980px; text-align: center; margin: auto; border: 2px solid blue;">

    <!--INICIO DE LA CABECERA-->
        <div id="cabecera">

            <h1 style="text-align:center;">Bienvenidos a mi página web</h1>

            <p>
                Hoy vamos a hacer a una reseña sobre la película <a href="https://es.wikipedia.org/wiki/Interstellar" target="_blank" title="Ir a Wikipedia">Interstellar</a>,
                donde se conocerán ciertos aspectos del film y mi experiencia personal con el
            </p>

            <img src="data:image/jpeg;base64,/9j/4AAQ..." height="400px" alt="Poster de Interstellar"/>
       
        </div>
    <!--FIN DE LA CABECERA-->

    <!--INICIO DEL CONTENEDOR-->

        <div id="wrapper">

    <!--INICIO DEL MENÚ-->

            <div id="menu">

                <ul>
                    <li><a href="#reseña" title="Ir a reseña">Reseña de la película</a></li>
                    <li><a href="#opinion" title="Ir a opinión personal">Opinión personal</a></li>
                    <li><a href="pagina2.html" title="Ver personajes">Personajes principales de la película</a></li>
                    <li><a href="pagina3.html" title="">Atinos científicos en la película</a></li>
                </ul>

            </div>
    <!--FIN DEL MENÚ-->

        <hr/>

    <!--INICIO DEL CUERPO-->
   
            <div id="cuerpo">

                <h3 id="reseña">Reseña de la película</h3>
                <p>
                    Interstellar (Interestelar en Hispanoamérica)
                    es una película épica de ciencia ficción estadounidense de 2014,
                    dirigida por Christopher Nolan y protagonizada
                    por Matthew McConaughey, Anne Hathaway, Jessica Chastain, Michael Caine y Matt Damon.
                    La película presenta a un equipo de astronautas que viaja a través de un agujero
                    de gusano
                     en busca de un nuevo hogar para la humanidad.
                    Los hermanos Christopher y Jonathan Nolan escribieron el guion, que tuvo su origen
                    en un borrador que Jonathan desarrolló en 2007.
                    Christopher Nolan produjo la película junto a su esposa Emma Thomas
                    mediante su compañía
                    productora Syncopy,
                    y con Lynda Obst a través de Lynda Obst Productions.
                    El físico teórico Kip Thorne, cuyo trabajo inspiró la película,
                    fue productor ejecutivo
                    y participó como consultor científico. Warner Bros.,
                    Paramount Pictures y Legendary Pictures cofinanciaron la película.
                </p>

                <br/>

                <h3 id="opinion">Opinión personal</h3>

                <p>
                    Al saber que existía la película me interesé en ella, dado que soy aficionado de los films de
                    ciencia ficción ligados con drama (<a href="https://es.wikipedia.org/wiki/Contact_(pel%C3%ADcula)" target="_blank" title="Ir a Wikipedia">Contacto</a>,
                    <a href="https://es.wikipedia.org/wiki/The_Dark_Knight" target="_blank" title="Ir a Wikipedia">Batman: el caballero de la noche</a>, entre otras).
                </p>
               
                <p>
                    Desde el comienzo me atrapó con la trama pre-apocalíptica donde el mundo está
                    a punto de llegar a su fin porque las fuentes de alimentos ya no son suficientes y la
                    única restante está a punto de extinguirse. El personaje principal (representado por <a href="https://es.wikipedia.org/wiki/Matthew_McConaughey" target="_blank" title="Ir a Wikipedia">
                    Matthew McConaughey</a>) ya era uno de mis favoritos por su papel en la serie <em>True detective</em> donde
                    personaliza a un detective de filosofía nihilista pero muy profesional.
                </p>

                <p>
                    La trama principal es la que me impactó porque involucra el viaje al espacio e interdimensional,
                    donde su misión principal es encontrar vestigios de una misión que ya había sido enviada años antes.
                    Viaje que es dirigido por un muy respetado cuerpo de científicos y el mismísimo gobierno de Estados Unidos,
                    desde una base secreta.
                </p>

            </div>

    <!--FIN DEL CUERPO-->


        </div>
    <!--FIN DEL CONTENEDOR-->
           
        <br/>
   
    <!--INICIO DEL PIE-->

            <div id="pie">

                <img src="data:image/png;base64,iVBO...=" height="30" alt="copyright"/>
                EnigmaticNerd 2017-2018. <a href="#cabecera" title="Ir a arriba">Volver arriba</a>

            </div>

    <!--FIN DEL PIE-->
         </div>
    </body>
</html>

Página2.html:
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
    <head>
        <title>
            Interstellar
        </title>
        <meta charset="utf-8"/>
    </head>
   
    <body style="background-color:honeydew">
        <div id="page" style="width: 980px; text-align: center; margin: auto; border: 2px solid crimson;">


        <!--INICIO DE LA CABECERA-->
       
            <div id="cabecera">
            <a style="font-size: 20px;" href="pagina1.html" title="Ir al Inicio">Volver a la página principal</a>

                <h1>Personajes principales</h1>
                <img src="data:image/jpeg;base64,/9j/4AA..." alt="Interstellar"/>

            </div>

        <!--FIN DE LA CABECERA-->

        <hr/>

        <!--INICIO DEL CONTENEDOR-->

        <div id="wrapper">

        <!--INICIO DEL MENÚ-->

        <div id="menu">


            <ul>
                <li><a href="#joseph" title="Ir a Joseph Cooper">Joseph Cooper</a></li>
                <li><a href="#murphy" title="Ir a Murphy Cooper">Murphy Cooper</a></li>
                <li><a href="#amelia" title="Ir a Amelia Brand">Amelia Brand</a></li>
            </ul>

        </div>

        <!--FIN DEL MENÚ-->

        <hr/>
        <br/>
        <!--INICIO DEL CUERPO-->
       
        <div id="cuerpo">
       
            <span id="joseph">
            <img src="https://vignette3.wikia.nocookie.net/interstellarfilm/images/d/de/Josephcooper1.jpg/revision/latest/scale-to-width-down/286?cb=20140606062816"  alt="Joseph Cooper"/>
            <h2>Joseph Cooper</h2>
            <hr/>
           
            <p>
                <b>Joseph A. Cooper</b> es un piloto de la NASA con experiencia en ingeniería, y el piloto
                de la expedición interestelar. Cooper tiene dos hijos, Tom Cooper y Murphy Cooper. Es interpretado
                por el actor <a href="https://es.wikipedia.org/wiki/Matthew_McConaughey" target="_blank" title="Ir a Wikipedia">
                     Matthew McConaughey</a>
            </p>
           
            <br/>
            <p><b>Película</b></p>
            <hr/>

            <p>
                No se sabe mucho sobre los primeños años de vida de Cooper excepto que cuando estaba creciendo
                ya no había juegos de beisbol debido a los conflictos por comida entre otras cosas.
             </p>
           
            <p>
                Unos diez años antes del lanzamiento del Endurance, Cooper trabajó como piloto de pruebas para la NASA.
                El banco de pruebas que utilizó fue un prototipo de Ranger, mientras sobrevolaba la estratósfera, una anomalía
                causó que estrellara la nave.
            </p>

            <p>
                Copper tiene alrededor de 35 años al momento del lanzamiento del Endurance. Al principio, él era muy despectivo
                respecto a la fijación de su hija por un "fantasma" en su habitación.
            </p>
           
            </span>

            <hr/>
            <br/>

            <span id="murphy">
               
                <img src="https://vignette3.wikia.nocookie.net/interstellarfilm/images/a/ae/Youngmurph.jpg/revision/latest/scale-to-width-down/227?cb=20140606061322" alt="Murphy Cooper"/>
                <h2>Murphy Cooper</h2>
               
                <hr/>

                <p>
                    <b>Murphy Cooper</b>, conocida comunmente como <cite>"Murph"</cite> es la hija más joven de Erin y Joseph Cooper.
                    Ella desarrolla una personalidad idealística pero ruda más adelante en su vida. Ella heredó la afición de su padre por explorar
                    lo desconocido. Es interpretada por la actriz <a href="https://es.wikipedia.org/wiki/Mackenzie_Foy" title="Ir a Wikipedia" target="_blank">Mackenzie Foy</a>.
                </p>

              <br/>

                <p><b>Película</b></p>
                <hr/>

                <p>
                    De los hijos de Cooper, ella era la más apegada a su padre, tenía esa emoción de explorar y descubrir los desconocido,
                    muy parecida a su padre.
                </p>

                <p>
                    Demás está de decir que no le gustaba su nombre, debido a que tenía la idea de que ella era la portadora de la mala suerte,
                    como sea su padre le reforzaba la idea de que su nombre es en realidad un llamado a la <em>esperanza</em>.
                </p>

                <p>
                    Una mañana, ella afirmó que su habitación era acechada por un "fantasma", idea que su hermano y padre no tomaban en cuenta.
                    Eventualmente, descubrió que se trataba de algo realmente importante, como una serie de filas de polvo acumulado en un patrón
                    consistente con código binario. Su padre sugirió que eran coordenadas, las cuales llevan al cuartel general de la NASA.
                    Se puso furiosa cuando su padre le dijo que dejaría la tierra, lo cual tómo como un abandono de parte de él. Rencor que
                    mantuvo por casi veinticinco años.
                </p>

            </span>

            <hr/>
            <br/>

            <span id="amelia">

                <img src="https://vignette1.wikia.nocookie.net/interstellarfilm/images/d/d9/Ameliabrand1.jpg/revision/latest/scale-to-width-down/300?cb=20140606063903" alt="Amelia Brand"</>
                <h2>Amelia Brand</h2>

                <hr/>

                <p>
                    Dr.<b>Amelia Brand</b> es la científica/bióloga comandante en jefe de la expedición enviada a través del agujero de gusano
                        pretendiendo reubicar a la raza humana. Ella es la hija del Dr. John Brand. Es protagonizada por la actriz <a href="https://es.wikipedia.org/wiki/Anne_Hathaway" title="Ir a Wikipedia" target="_blank">Anne Hathaway</a>
                </p>

                  <br/>

                <p><b>Película</b></p>
                <hr/>

                <p>
                    Como la hija de el director de la NASA, en esencia, fue una de la científicas al frente de la misión.
                    Aproximádamente diez años antes del lanzamiento del Endurance, ella y un compañero científico Dr. Wof Edmunds estuvieron enamorados.
                    Cooper sospecha de sus sentimientos hacia Edmund cuando discuten sobre el destino al que arribarían, sabiendo que sus sentimientos hacia
                    Wolf harían que ella quisiese ir a su planeta primero.
                </p>
            </span>
           

         </div>
        <!--FIN DEL CUERPO-->
       
        </div>
        <!--FIN DEL CONTENEDOR-->

        <br/>
        <br/>
        <!--INICIO DEL PIE-->

        <div id="pie">

                <img src="data:image/png;base64,iVB...I=" height="30" alt="copyright"/>
                EnigmaticNerd 2017-2018. <a href="#cabecera" title="Ir a arriba">Volver arriba</a> <a href="pagina1.html" title="Ir al Inicio">Volver a la página principal</a>

            </div>

    <!--FIN DEL PIE-->
        </div>
    </body>
</html>

Página 3.html:
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
    <head>
        <title>
            Interstellar
        </title>
        <meta charset="utf-8"/>
    </head>
   
    <body style="background-color:honeydew">
        <div id="page" style="width: 980px; text-align: center; margin: auto; border: 2px solid crimson;">


        <!--INICIO DE LA CABECERA-->
       
            <div id="cabecera">
            <a style="font-size: 20px;" href="pagina1.html" title="Ir al Inicio">Volver a la página principal</a>

            <br/>
            <br>           

            <h1>Atinos científicos de la película</h1>
            <img src="http://up-ship.com/blog/wp-content/uploads/2014/08/bwah.png" width="500px" alt="Gargantua"/>
               
            </div>

        <!--FIN DE LA CABECERA-->

            <hr/>
        <!--INICIO DEL CONTENEDOR-->
           
            <div id="wrapper">

        <!--INICIO DEL CUERPO-->

            <div id="cuerpo">

                <p>
                    <b>Atinos</b>:  La contribución más sobresaliente del asesoramiento científico de Kip Thorne a la producción de Interstellar fue el de lograr una representación comprensible, atractiva
                    y consistente de Gargantúa, el agujero negro al que llegan los protagonistas en su búsqueda
                    de los planetas colonizables.
                </p>

                <p>
                    Para esto, Throne se dedicó por un año entero a la creación de ecuaciones que permitían seguir
                    los rayos de luz a  medida que rodean a un agujero negro o entran a un agujero de gusano,
                    todo con base en la Teoría de la Relatividad de Eistein. El paso siguiente
                    fue la programación de un software de CGI (Computer Generared Images) que interpretara y
                    graficara los cálculos de Thron, con un resultado sencillamente espectacular: la imagen de
                    un agujero de gusano con la apariencia  de una esfera de cristal que refleja todo el universo,
                    y además la icónica imagen del agujero negro con un halo de luz que no sólo lo rodea sino que
                    también pasa por el medio de él. Pero por qué la luz tendría esta configuración? Kip Throne
                    explica en el libro “The Science Behind Interstellar” que existe un fenómeno sobresaliente del
                    agujero negro llamado “disco de acreción”, compuesto por gas caliente procedente de otros soles
                     que orbita en torno al agujero negro. Sorprendentemente, la interpretación que realizó el
                     software de los cálculos de Throne fue que esta nube amarilla de gas debería observase como
                     un flujo luminoso que pasa estar encima, debajo y en frente del agujero.
                </p>

                <p>
                    Este trabajo científico arrojó tal cantidad de información novedosa sobre los fenómenos que ocurren alrededor de un agujero negro,
                    que se están escribiendo ya dos artículos de investigación con estos descubrimientos,
                    y los expertos consideran ya a Gargantúa
                    como <b>la representación más realista jamás lograda de un agujero negro hasta el día de hoy</b>.
                </p>

           
                </div>

            <!--FIN DEL CUERPO-->


            </div>
            <!--FIN DEL CONTENEDOR-->

            <br/>
            <!--INICIO DEL PIE-->

            <div id="pie">

                <img src="data:image/png;base64,iVB...I=" height="30" alt="copyright"/>
                EnigmaticNerd 2017-2018. <a href="#cabecera" title="Ir a arriba">Volver arriba</a> <a href="pagina1.html" title="Ir al Inicio">Volver a la página principal</a>

            </div>

    <!--FIN DEL PIE-->
         </div>
    </body>
</html>

Nota: Tuve que acortar algunas rutas de imágenes en los códigos dado que eran muy largas y excedían la longitud de caracteres permitidas acá.

Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.
« Última modificación: 26 de Agosto 2017, 17:31 por Alex Rodríguez »

Jack_F

  • Visitante
Hola  EnigmaticNerd, te felicito por tu página esta genial.
El primer código bien.
El segundo bien.
El tercero te falto cerra un <br />. En esta línea:
Código: [Seleccionar]
<!--INICIO DE LA CABECERA-->
       
            <div id="cabecera">
            <a style="font-size: 20px;" href="pagina1.html" title="Ir al Inicio">Volver a la página principal</a>

            <br/>
            <br>         
En cuanto el probelma de la imegenes puedes descargartelas y luego subirlas en un alojador de imagenes, como http://imgur.com que es gratuito, y asi no se te hace muy largo las direcion de la imagen. Y la web todo bien la verdad me gusto mucho el tema que usaste.

Un saludo.. :) :) :) :)

EnigmaticNerd

  • Principiante
  • **
  • Mensajes: 65
    • Ver Perfil
¡Muchas gracias por tus revisiones y tus consejos hermano! Significa mucho que cuides tu nivel de detalle al chequear cada ejercicio, me inspiras a seguir aprendiendo.

Seguiré con el curso de CSS. Espero que puedas seguir revisando y corrigiendo mis ejercicios.

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".