DESARROLLO DE APLICACIONES WEB: CREAR PAGINA HTML CON JAVASCRIPT

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>CREAR PAGINA CON SCRIPTS 26 septiembre 2013</title>

</head>

<body>
    <script>
    var myH1 = document.createElement("h1");
    var textNode1 = document.createTextNode ("An HTML Document");
    myH1.appendChild(textNode1);
    document.body.appendChild(myH1);

    var myP = document.createElement("p");
    var textNode2 = document.createTextNode ("This is a");
    myP.appendChild(textNode2);
    document.body.appendChild(myP);



    var textNode3 = document.createTextNode (" simple ");
    var textNode4 = document.createTextNode ("document");

    var myI = document.createElement ("i");
    myI.appendChild(textNode3);

    myP.appendChild(myI);
    myP.appendChild(textNode4);

    </script>
</body>

</html>

_________________________________________________________________
EJERCICIO 2:

<!DOCTYPE>
<html>
<head>
    <title>The best site ever</title>
<style>
#column1{
    width:200px;
    height:400px;
    float:left;
    background-color:#9a9;
}
#column2{
    width:200px;
    height:400px;
    float:left;
    background-color:#a99;
}
#column3{
    width:200px;
    height:400px;
    float:left;
    background-color:#99a;
}
</style>
</head>

<body>
    <script>
    var mysection = document.createElement("section");
    document.body.appendChild(mysection);

    var myheader = document.createElement("header");
    mysection.appendChild(myheader);

            var myH1 = document.createElement("h1");
            var textNode1 = document.createTextNode ("The best site ever");
            myH1.appendChild(textNode1);
            myheader.appendChild(myH1);

            var mydiv =document.createElement("div");
            mydiv.id="column1";
            var textNode2 = document.createTextNode ("just adding some content");
            mydiv.appendChild(textNode2);
            myheader.appendChild(mydiv);

                var myH2 = document.createElement("h2");
                var textNode3 = document.createTextNode ("well");
                myH2.appendChild(textNode3);
                mydiv.appendChild(myH2);

                    var myPe = document.createElement("p");
                    var textNode4 = document.createTextNode ("This was not so easy");
                    myPe.appendChild(textNode4);
                    myH2.appendChild(myPe);

        var mydiv2 =document.createElement("div");
        mydiv2.id="column2";
        myheader.appendChild(mydiv2);

        var mydiv3 =document.createElement("div");
        mydiv3.id="column3";
        myheader.appendChild(mydiv3);
    </script>
</body>

</html>

________________________________________________________________________________

EJERCICIO 3 (duplicar página):

<!DOCTYPE>
<html>
<head>
    <title>The best site ever</title>
<style>
#column1{
    width:200px;
    height:400px;
    float:left;
    background-color:#9a9;
}
#column2{
    width:200px;
    height:400px;
    float:left;
    background-color:#a99;
}
#column3{
    width:200px;
    height:400px;
    float:left;
    background-color:#99a;
}
#limpiar{
    clear:both;
}
</style>
</head>

<body>
    <script>
    var mysection = document.createElement("section");
    mysection.id="PERRO";
    document.body.appendChild(mysection);

    var myheader = document.createElement("header");
    mysection.appendChild(myheader);

            var myH1 = document.createElement("h1");
            var textNode1 = document.createTextNode ("The best site ever");
            myH1.appendChild(textNode1);
            myheader.appendChild(myH1);

            var mydiv =document.createElement("div");
            mydiv.id="column1";
            var textNode2 = document.createTextNode ("just adding some content");
            mydiv.appendChild(textNode2);
            mysection.appendChild(mydiv);

                var myH2 = document.createElement("h2");
                var textNode3 = document.createTextNode ("well");
                myH2.appendChild(textNode3);
                mydiv.appendChild(myH2);

                    var myPe = document.createElement("p");
                    var textNode4 = document.createTextNode ("This was not so easy");
                    myPe.appendChild(textNode4);
                    myH2.appendChild(myPe);

        var mydiv2 =document.createElement("div");
        mydiv2.id="column2";
        mysection.appendChild(mydiv2);

        var mydiv3 =document.createElement("div");
        mydiv3.id="column3";
        mysection.appendChild(mydiv3);

        var divlimpiar=document.createElement("div");
        divlimpiar.id="limpiar";
        mysection.appendChild(divlimpiar);

        var aNode = document.body.children[1]
        var another = aNode.cloneNode(); //estamos clonando el Div entero
        document.body.appendChild(another);
    </script>
</body>

</html>

DESARROLLO DE APLICACIONES WEB

Páginas

Buscar este blog

jueves, 26 de septiembre de 2013

CREAR PAGINA HTML CON JAVASCRIPT

No hay comentarios:

Publicar un comentario