¡Continuemos!
Ahora vamos a ver cómo trabajar con CSS (Cascading Style Sheets). Se puede insertar directamente al documento html mediante los tags <style type = "text/css"> </style>. Pero, es preferible trabajar con el css aparte y en html simplemente llamarlo (enlazarlo).
(Haz click para agrandar)
Todos los elementos que están ahí ya los conoces, excepto por los resaltados. Como se pueden imaginar, en la línea 5 se especifica el enlace al archivo css, que se llama "stylesheet.css". Recuerda bien que los documentos html terminan en ".html" ".htm" y las hojas de estilo terminan en ".css".
Para enlazar el css al html, siempre se escribe lo necesario dentro del elemento <link /> (elemento auto-cerrado, por lo tanto, no requiere de un </link>, presta atención a estos detalles). Dentro del <link /> hay tres atributos. El primero, rel="" indica el tipo de relación. En este caso, como es css, va "stylesheet". El segundo, type="text/css" indica el tipo de recurso. El css siempre se especifica como "text/css". Por úlimo, el tercero, href="stylesheet.css" indica la localización del archivo. Si te das cuenta, los dos primeros atributos nunca van a cambiar, porque dependen de css. Pero, el tercero puede cambiar dependiendo del nombre que le has puesto a tu archivo css y su localización. Por ejemplo, si lo has llamado 'estilos.css', entonces tu tercer atributo de <link /> será: href="estilos.css".
Por otro lado, el elemento <div> es muy útil, lo vas a usar a menudo por su versatilidad. Los <div>s son usados para agrupar o definir un bloque de elementos de html para estilizarlos con css. En este caso, se les ha dejado solos, para que te des cuenta que no necesariamente sirve para agrupar elementos, miren la siguiente imagen.
Esa imagen que ven ahí es todo el archivo css. Su estructura siempre es:
elemento1(nombre){
}
elemento2(nombre){
}
etc...
Dentro de las llaves es donde va el contenido, donde se especifica cómo se verá cada elemento, fíjate que no se coloca '<' o '>', solo va el nombre. Al elemento <div> se le ha otorgado tres atributos: border (borde), height(alto) y width(ancho). Como ambos, tanto height como width, tienen "100px", se ha formado un cuadrado. Ahora, cuando se hace esto, a TODOS los divs se les da tales atributos. Por lo tanto, si se quiere dar esos atributos a un div en específico, se tiene que hacer otra cosa. No te preocupes por ello, en otra lección te voy a enseñar cómo, por ahora concéntrate en la lección actual.
Empecemos, abre Dreamweaver y elije "nuevo" → "html" y escribe lo que está en la primera imagen. Guárdalo en una nueva carpeta "web" (puedes llamarlo como quieras) y listo. Ahora, abre un "nuevo" → "css". No te preocupes, va a abrirse en una pestaña aparte. En esa pestaña, escribe el contenido de la segunda imagen y guárdalo dentro de la carpeta "web". (¡No te olvides que cuando guardes, debes escribirlo con todo y su extensión!). Para una mejor vista, en dreamweaver usa el "dividir" para que veas cómo va quedando.
(Haz click para agrandar)
Como puedes ver, los dos <divs> se han formado como cuadrados. Si no tuvieran borde, no estarían visibles. Pero, no se ve muy bien, ¿Verdad? ¿Qué tal si hacemos algo más? ¿Qué tal un color de fondo a la página y a los cuadrados? Además, que están "en línea". Esta vez yo solo msotraré el código, si quieres saber cómo queda descúbrelo tú mismo/a.
¿Verdad que ahora se les hace más fácil entender lo que se ha hecho? Al elemento <body> (o sea, a todo el cuerpo de la página) se le ha dado un "background-color" (color de fondo) "#ffcc66". Tal vez se preguntarán qué color es.
También se puede colocar así:
background-color: blue(azul);
Pero, no hay mucha variedad si solo usas blue, red, yellow, etc. Mejor es aprender a usar los colores hexadecimales. No necesitas memorizarlos, solo escribe en tu motor de búsqueda favorito "color hexadecimal" y te van a salir varias páginas e imágenes.
Muy bien, el elemento <div> está igual, solo se le ha aumentado un color de fondo y el atributo "display" (mostrar). Este atributo es muy útil, mira algunas cosas que puedes hacer:
display: none; (no muestra nada, checkéalo, verás cómo tus cuadrados desaparecen).
display: inline-block; (muestra los bloques alineados uno al costado del otro, como en este caso).
display: list-item; (muestra como si se tratara de un <li>, pronto conocerás este elemento)
otros.
Muy bien, para no abrumarte hasta aquí llegamos por hoy. Como un resumen, recuerda que aprendiste:
- Enlazar un archivo css a un documento html, con: <link />
- Aprendiste en general cómo se puede usar <div> y lo útil que es.
- La estructura del css: nombre_elemento{atributo: valor; atributo2: valor;}
- Atributos básicos del css.
¡Nos vemos en la siguiente lección, practiquen bastante e intenten agruparlo todo junto, las tablas que aprendieron en la lección anterior con div y css!
Write more, thats all I have to say. Literally, it seems as though you relied
ResponderEliminaron the video to make your point. You obviously
know what youre talking about, why waste your intelligence on just posting videos to your site when you could be giving us
something informative to read?
my website :: James
Thanks for your comment and your visit. Nevertheless, I don't have any video on my site, perhaps you mean "images".
EliminarThis is a good tip especially to those new to the blogosphere.
ResponderEliminarSimple but very accurate information… Many thanks for sharing this one.
A must read article!
Review my page :: where to offer my gold,
Ϻу namе's Etta from Villeneuve-D'аsсq, France аnd I have to say youг artiсle is really еntertaіnіng.
ResponderEliminarThe сlaritу οf youг ωriting iѕ гathеr good and I cаn pгesume you are
аn authοгity on this subject.
With youг pегmissіon, woulԁ уou let me tο grab your RSS feeԁ tο kеep up-to-date with nеw artiсles?
Thanks a ton anԁ pleaѕe continuе
thе awesome ωoгk.
my ωebsіte whitesnake
Hеllo there, I just wanted to аsk if уou ever have haԁ any troublе
ResponderEliminarwith hackers? My last drupal blog at http://entendiendolaсomputadoгa.
blogsρot.cοm/ waѕ hаcked and I enԁed up
losing nіne wееks оf hard work due to no back up.
Do you have any tіps to ѕtop hackeгs?
I must ask thοugh, but where did уou obtain yοur blog theme:
ԁіd уou сome acгoss it somewhere or ԁid you prеρare it yoursеlf?
A format јust like yours with а few simple modifications would finally make my website cοme alive.
Tell me where you got your template whеn you get the chаnce.
Also ѵisit mу site :: mobile pizza oven
Hello Anónimo, fortunately my blog was never hacked and I'm so sorry for your blog. Well, there's a lot and so little to do. But, always remember to use secure passwords (a combination of "Aa8@_"). If you can't enter to your blogger-account, try to use this link: https://www.google.com/accounts/recovery?hl=es&ard=AHwGkRnHKX4oqf5LvPzTcKGspSl2e9nDB6Uonvwr1XjvVt3EEIx5d_0wVqIppive7P5P26egf4K1qvbM2MkvDhvoKJcLIr_T9M5k4TS0qNyI5fmQFJP47PCVYOj654xJUHxifG6irVEqHfWUpWpewMs8tLbFYlcV3w . Also, you can try to use your cache-information that is on Google: just write, if you remember your domain "cache:name_of_your_blog@blogspot.com". One more thing, yes, is very important to back up your information in everything, not only in blogger. (If you don't know how to do it, blogger gives you the perk of just click on "export blog"). Another thing you can do is report it to Google or ask for help in this link:
Eliminarhttp://productforums.google.com/forum/#!forum/blogger-es
PD: Let me the link of your new site that you want me to visit.
Wish you all the luck.
Ηey theгe, my name is Melvina and I'm a fellow blogger out of Onara, Italia. I'm glad to see the woгk yοu're doing on this site. There'ѕ no
ResponderEliminarԁοubt that Bloggeг: Entendiendo la cоmputadora *(+.
+)*/ is an eхample of intelligent woгk and repoгtіng.
Continue the great ωork guys: I’ve put уou guys on
my blogrοll. I'm sure it will improve the value of my web site.
my homepage - www.scufgaming.com
Thank you so much, let me know if you want me to link your page ;). I'll do it with pleasure.
Eliminar