Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Como Crear Tu Primera Página Web

    Cargado por

    Dani Marroquin
    51 vistas5 páginas
    mi primera pagina web

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    mi primera pagina web

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    51 vistas5 páginas

    Como Crear Tu Primera Página Web

    Cargado por

    Dani Marroquin
    mi primera pagina web

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 5

    Como crear tu primera pgina web, mtodo paso por paso

    1- El cdigo HTML elemental


    Para comenzar sigue los siguientes pasos:
    Crea en el Escritorio una carpeta llamada sitio y dentro de ella crea un nuevo
    documento de texto, renmbralo a index.html, asegrate de que no tenga la
    extensin de archivo .txt.
    Se supone que tienes desactivado en el Panel de Control -> Opciones de Carpeta
    -> Ocultar las extensiones de archivo, si no te ser imposible.
    Arrastra el archivo creado index.html encima del Bloc de notas y sultalo, en el
    pegars el cdigo que se muestra en esta pgina a continuacin.
    Cada vez que pegues algo nuevo, guarda los cambios y ejecuta (dos clics) el
    archivo, que se abrir con tu navegador instalado, de esa manera podrs
    comprobar como se ve tu pgina.
    Copia y pega el siguiente cdigo:
    <html>
    <head>
    <title>Mi Primera Pagina</title>
    </head>
    <body>
    Esta es mi primera pgina web
    </body>
    </html>
    Ya tienes tu primera pgina web.
    Una sencilla explicacin del cdigo anterior.
    Cada elemento que va entre los signos < y > es un tag o etiqueta, donde quiera
    que hay un tag algo suceder en la representacin del documento, algunas veces
    visualmente y otras de manera oculta.
    La etiqueta <html> le indica a tu navegador que tu documento es una pgina web
    y debe representarla como tal.
    Las etiquetas <title> encierran el ttulo de la pgina, es imprescindible su uso, se
    muestra en la barra superior del navegador.
    Los elementos que se encuentran entre las dos etiquetas <head> que es el
    encabezado, contiene datos e informacin para el funcionamiento la pgina, que el
    usuario no ve.
    En el espacio comprendido entre las etiquetas <body> es el que contiene todo el
    contenido que quieres visualizar.
    2- Agregarle un ttulo o encabezado a la pgina web
    Ahora vamos a agregarle un titulo en letras grandes y un subtitulo, copia y pega
    por supuesto en la siguiente lnea despus del <body>:

    <h1>Mi Pgina</h1>
    <h3>Esta es mi primera pgina web</h3>

    3- Agregarle una imagen a la pgina web


    Ahora insertas una imagen que copiaste previamente en tu carpeta sitio y la
    renombraste imagen.jpg:
    <img src="imagen.jpg" alt="Esta es mi casa">

    4- Agregarle un link o vnculo a un sitio web


    Ahora un vnculo que te llevara a Google o el lugar que especifiques, ponlo en la
    parte del <body> que gustes:
    <a href="http://www.google.com/">Para ir a Google</a>

    5- Agregar texto o contenido al cuerpo de la pgina


    Ahora le toca el texto con el contenido de la pagina (con el tag <p> le estas
    indicando que es un prrafo):
    <p>Aqui todo lo que quieras escribir.</p>
    Despues una pequea lista de men con vnculos a otras pginas que crears
    despus en tu sitio:
    <ul>
    <li><a href="pgina1.html">Otra pagina</a></li>
    <li><a href="pgina2.html">Otra mas</a></li>
    <li><a href="about.html">Acerca de mi</a></li>
    </ul>

    6- Agregar el estilo CSS a la pgina


    El estilo CSS son instrucciones para darle un estilo preciso a cualquiera de los
    elementos que componen la pgina. Es posible modificar el tamao del texto, los

    colores, el tipo de fuente, como se muestran las imgenes, etc.


    Para eso se incluyen algunas lneas encerradas entre dos etiquetas <style>
    En este ejemplo se incluyen algunos comentarios (encerrados entre los caracteres
    /* */ ), solo para que se comprenda que significan los valores y se puedan
    modificar.
    <style>
    body{background:#b7e5ff; /*el color del fondo*/
    font-size:20px; /*tamao del texto en pixeles*/
    color:black; /*color de las letras*/
    padding:20px; /*el espacio entre el borde y el contenido*/
    border:6px solid white; /*tamao, forma y color del borde de la pagina*/
    }
    h1{color:red;} /*color del encabezado*/
    </style>

    6- Agregar la declaracin
    Ya est casi lista la pagina solamente pegaremos el DOCTYPE al comienzo para
    que sea compatible con todos los navegadores y especificaremos que se debe
    mostrar en idioma espaol:
    <!DOCTYPE html>
    <html lang="es">
    La etiqueta <br> indica un salto de lnea.
    Finalmente rectifica como queda todo el cdigo con lo que hemos agregado:
    <!DOCTYPE html>
    <html lang="es">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=windows-1252">
    <title>Mi Primera Pagina</title>
    <style>
    body{background:#b7e5ff;
    font-size:20px;
    color:black;
    padding:20px;
    border:6px solid white;}
    h1{color:red;}

    </style>
    </head>
    <body>
    <h1>Mi Pgina</h1>
    <h3>Esta es mi primera pgina web</h3>
    <img src="imagen.jpg" alt="Esta es mi casa">
    <br>
    <a href="http://www.google.com/">Link para ir a Google</a>
    <p>Esta es una pgina web sencilla, pequea, casi est vacia,
    pero bonita porque es mi primera pgina web.</p>
    <ul>
    <li><a href="pgina1.html">Otra pagina</a></li>
    <li><a href="pgina2.html">Otra mas</a></li>
    <li><a href="about.html">Acerca de mi</a></li>
    </ul>
    </body>
    </html>

    Agregar ms elementos a la pgina web creada

    Lo creado hasta este punto es una pgina web elemental, debers irle agregando
    sucesivamente imgenes, ms texto y vnculos.
    Despus crea otras pginas de forma similar y enlaza cada una de ellas mediante
    los vnculos.
    El resultado ser un pequeo sitio web contenido en la carpeta sitio, donde la
    primera pgina creada llamada index es su pgina principal.
    Las etiquetas ms utilizadas en el cdigo HTML
    HTML es el lenguaje con el que se escriben las pginas web, los navegadores
    estn programados para traducir las etiquetas y as mostrar solo el contenido, con
    el formato necesario.
    Las siguientes son algunas de las etiquetas ms utilizadas, la mayora no las
    utilizamos en el cdigo anterior, pero es necesario conocerlas para poder

    interpretar correctamente el cdigo y comprender la funcin de cada una de ellas.

    También podría gustarte