Inicio > css, html, tutorial > Tutorial básico HTML, como crear una página web sencilla.

Tutorial básico HTML, como crear una página web sencilla.

Vamos a iniciarnos en el mundo de la creación de páginas web, vamos a crear una muy básica con HTML y CSS.

Para empezar, para éste tutorial usaré el Rapid CSS 2007, también podéis hacerlo con un simple bloc de notas o notepad.

Abriremos un documento HTML y crearemos nuestra página, en éste caso he decidido crear una web sobre fútbol.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;









       
       
        LigaBBVA








   

LIGABBVA! Tu web sobre el mundo del futbol español!


   


     




           


           


           

Equipo


            


           


               


               




               


               


             

FC Barcelona
                


                ______________________________




           


               


               




               


               


           

Real Madrid CF.
                


                ______________________________




             


               


               




               


               


               


               

RCD Espanyol
                


                ______________________________












© LIGABBVA 27 Enero 2011 Davishh












 




Una vez terminada, daremos vida a lo escrito dentro de cada div, dandole un estilo propio.

Sin cerrar el html, abriremos un archivo nuevo CSS, y haremos lo siguiente:

   *{
margin:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
}


    #divlogo{
    margin-top:50px;
    text-align:center;
  }


    #divtitulo{
    margin-left:0px;
    margin-top:50px;
    text-align:center;
    font-weight:bold;
    font-size:30px;
    color: white;
  }


    #divclubbar{
    margin-left:250px;
    text-align:center;
    font-weight:bold;
  }


    #divcampnou{
    margin-left:250px;
    text-align:center;
    font-weight:bold;
}


    #divcierre{
      text-align:right;
      font-weight:bolt;
    } 


Existen muchas posibles propiedades para añadir pero nosotros demomento solo usaremos estas,  finalmente guardamos.

Una vez hecho esto vamos a la página HTML y en el Head pondremos lo siguiente:

        <link rel="stylesheet" href="Ruta del archivo CSS” />

Aquí solo deberiamos de cambiar el url del archivo CSS y ponerlo donde lo tengais guardado vosotros, yo por ejemplo lo tengo guardado en la carpeta Estilo y lo he llamado ligacss. ( \Estilo\Ligacss.css)

El head tendrá que quedar así:


       
       
        LigaBBVA
       

y este es el resultado:

Espero que os sea útil.

Categorías:css, html, tutorial
  1. Aún no hay comentarios.
  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

w

Conectando a %s