Como hacer una pagina web y ganar dinero
Creada para aprender lo que mas nesesitas porque la calidad es mejor que la cantidad.
Blog

Nuestro primer div

Tags: maquetacion, css, div, capa, formato
publicado el 2010-06-02   leido 3006 leídas

Es hora de aprender a crear una capa, no te asustes porque no es nada del otro mundo, si seguiste todas las lecciones te será muy fácil.

Como crear un DIV


La forma de crear una capa DIV es así:

<div></div>

recuerda que todo contenido visible de la página debe ir entre las etiquetas <body></body> (esto ya esta explicado al comienzo del curso paso a paso).

con el código HTML completo quedaría así:
<html>
    <head>
        <title>Curso de maquetacion CSS</title>
    </head>
<body>
    <div>¡Esta es mi primer capa!</div>
</body>
</html>

Dando formato a un DIV


Esto se hace con estilos CSS, si hiciste el curso para aprender a crear una pagina web ya sabes crear una hoja de estilos y relacionarla con un archivo html.

Para darle formato a un DIV tenemos que identificarlo de alguna forma, para esto existe el atributo ID, en el pondremos el nombre del DIV para luego llamarlo desde la hoja de estilos, la forma de escribirlo es así:
<div id="capa1">¡Esta es mi primer capa!</div>
Como podemos ver, a esta capa le pusimo "capa1" de nombre, ahora solo nos falta abrir la hoja de estilos que creamos y llamarlo de esta manera:
#capa1{
    background-color:green;
}

Maquetacion css



Como vemos, el color se estira, esto es porque no le definimos un ancho determinado, para hacer agregaremos el atributo width a #capa1 de la siguiente forma:

#capa1{
    width:210px;
    background-color:green;  
}

Ahora seguramente ya verás el fondo verde en un area mucho mas corta, pero ¿que pasa si queremos que la capa sea mas alta?

Simple, le agregaremos el atributo height con el valor en pixeles que queramos, de esta forma:
#capa1{
    width:210px;
    height:300px;
    background-color:green;  
}
Con esto ya tendremos una especie de rectangulo verde donde podremos agregar texto como queremos.

Te gust?

Creación de tablas en Html

Flotar y acomodar un DIV

 
Información
Christian Valencia publicado porPor: Ero-Fierce

Suscribete
Recibe los ultimos articulos en tu email:


Ultimos Artculos
Hacer SEO en el 2016 - 2017
Habilitar sonido al pulsar las teclas Bloq Mayús, Bloq Num y Bloq Des
10 trucos viejos, seo que nunca te dijeron
15 Efectos carrusel como pagina de libro animado con ejemplos
No se pudo generar una instancia de usuario de SQL Server debido a un error (.mdf
Solucion Error 26. No se encontró el servidor o éste no estaba accesible. Sql

Todos los tutoriales

Hacer una web paso a paso Php y MySQL Javascript
Posicionamiento Web SEO Cómo ganar dinero con tu web Herramientas y Programas Web
Maquetación con CSS Hosting y Dominios MySQL y Phpmyadmin
Ajax UML: Analisis y Diseño Programacion Orientada a Objetos
Java
 
Copyright © 2009 - pagina Web 2 - Todos los derechos Reservados