El uso de div y objetos basicos.

 div

Hola, se me olvida ayer vimos como crear la base para hacer nuestro documento html, hoy vamos a ver como creamos los cajones donde vamos a insertar la informacion, en el html existe una etiqueta llamada DIV es la etiqueta basica en cualquier maquetacion con xhtml y css, es una etiqueta que funciona como si fuera cajones, como si colocaramos un cajon y abajo otro y asi… su estructura es:

<div></div>

Estas etiqueta va entre <body> y </body>, vamos con un ejemplo, vamos a escribir HOLA MUNDO!.

<div>Hola mundo</div>

Ahora miremos como iria en el codigo total:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”es-ES” lang=”es-ES”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<meta name=”author” CONTENT=”WebMaster de Los Alpes”>
<meta name=”keywords” CONTENT=”viajes, ofertas, Los Alpes, Orlando, Nueva Zelanda”>
<meta name=”description” CONTENT=”La agencia de viajes Los Alpes tiene un gran prestigio en el mundo de las empresas y combina una gran calidad con unos excelentes precios.”>
<title>La empresa de mi papa</title>
<style type=”text/css” media=”screen”>
<!– @import url(css/principal.css);–>
</style>
</head>
<body>

<div>Hola mundo</div>

</body>
</html>

Listo, coloca esto en nuestro archivo de prueba y habras hecho tu primer texto enxhtml y css!!!, ahora vamos con algo mas complicado. Vamos a hacer que ese texto… sea de color verde!,  entonces vamos y abrimos el archivo principal.css y en el… al final del archivo, colocamos:

#div_de_hola_mundo{
  color:#759C00;

vamos a explicar un poquito… todos sabemos que como pedrito… como juanito… son NOMBRES que nos identifican y nos hacen DIFERENTES, si no tubieramos nombres nos confundiriamos y nadie sabria quien es quien, por eso en css se crearon los identificadores de objetos, un objeto es como decir una persona. la cual deve tener un nombre…, en este caso creamos un objeto llamado “div_de_hola_mundo” ,  hasta ahi todo bien, ahora para identificar que es un objeto,
le coloco un # al comienso del nombre, que me identifica que es un objeto.

a continuacion abro unas llaves asi { que me indica que voy a insertar propiedades de ese objeto, las propiedades son como caracteristicas de el objeto, imaginemonos en la vida diaria, existe Andrés Lara, en css seria #andres_lara, este tiene unas caracteristicas como es: pelo negro… ojinegro… color de piel medio blanca. Todo esto son caracteristicas… y en css se delimitan entre { y }.

Como ya tenemos el objeto creado en el archivo css, pasamos a modificar el xhtml, entonces lo primero es mirar el div y colocarle algo que lo identifique:

<div id=”div_de_hola_mundo”>Hola mundo</div>

en lo anterior lo que hicimos fue colocar el texto: id=”nombre_del_objeto”

en la etiqueta que necesito identificar, hay una anotacion importante, solo va en la primera parte, en la porcion donde se cierra la etiqueta no va, osea en </div> no va.

Vamos a visualizar y si resulto todo deveria salir algo asi:

Hola mundo

Ahora si queremos darle otras propiedades como lo son: ancho, alto utilizamos esta lista:
ancho: width:300px;
alto: height:230px;
margen exterior (arriba, a la derecha, abajo, a la izquierda) : margin:3px 2px 6px 1px;
margen interior (arriba, a la derecha, abajo, a la izquierda): hpadding:2px 1px 3px 8px;
fondo (lo basico despues profundizamos): background: url(pix/border1.gif);
tamaño de fuente (por ahora lo trabajareos con px, despues con em): font-size:14px;
tipos de fuente(si en la pc no existe un tipo de fuente para a la otra y asi…: font-family:Arial, verdana;Que pena no haber actualizado antes pero tuve una semana dura. pueden buscar mas docu en google, mañana monto el articulo de clases en css si pueden consulten en google: “clases en css” y bueno se cuidan 😛 de nuevo perdon por demorarme jeje.  cualquier dura mi correo es:
andreslara501(arroba)hotmail.com PORFA PORFA dudas si antes han leido!! y han investigado. chau!.

Anuncios
Acerca de

Programador, usuario Linux e hincha de Millonarios de Colombia

Tagged with: , , , , , , , , , , , , , , , , , , , , , , ,
Publicado en General
One comment on “El uso de div y objetos basicos.

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 )

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 )

Google+ photo

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

Conectando a %s

Sígueme en Twitter
Categorías
Flickr Photos
A %d blogueros les gusta esto: