HTML/CSS básico (I) -Las etiquetas
Si editas en HTML una página de tu Blog y, como yo, no tienes ni idea de los códigos para el diseño de webs, encontrarás un montón de líneas de texto que te van a sonar a chino.
Como a estas altura de este Blog, ya hemos hablado de editar el HTML de una página, o de la plantilla del blog, etc... y más adelante pretendo meter las narices (por ejemplo) en temas como añadir botones con enlaces, etc, etc... me ha parecido interesante poner en limpio algunos apuntes elementales que voy tomando, para aclararme sobre qué diablos es eso de HTML, CSS, etc... a fin de poder entender un poco lo que pone en esas líneas de código.
Hay mucha información en google sobre el tema, yo me he basado, muy frecuentemente, en lo que se dice en esta interesante web.
Asi que vamos a centrar ideas.
¿Que es una etiqueta?
Se conoce como 'etiqueta', en HTML, al elemento básico que sirve para definir 'algo' (encabezamiento, párrafo, imagen...) o para definir qué aspecto debe tener ese 'algo'.
Por tanto, un documento en HTML estará constituido básicamente por textos que añades y por un conjunto de etiquetas, para así definir cada tipo de texto y la forma con la que se tendrá que presentar sus distintos elementos.
La etiqueta presenta frecuentemente dos partes: la apertura, del tipo <'etiqueta'> y el cierre, de tipo </'etiqueta'>
Todo lo que incluyas entre esos dos elementos, apertura y cierre, está afectado por lo que 'manden hacer' las etiquetas (de estilo) que contenga.
Naturalmente lo del nombre de 'etiqueta' es genérico, en realidad cada característica tiene su propio nombre. Por ejemplo, la etiqueta <b> (y su 'cierre', </b>) define que el texto que incluya debe ir en negrita. La etiqueta <p> y </p> define el párrafo, un encabezamiento (o título) por
(puedes mira en la Wikipedia, o buscar más información sobre etiquetas en Google)
¿Cómo se crea un documento HTML?
Normalmente un documento HTML ha de estar delimitado por la etiqueta y
<html> y </html>.Dentro de este documento, podemos asimismo distinguir dos partes principales: La cabecera, delimitado por <heal> y </head>, donde colocaremos etiquetas de índole informativo como por ejemplo el titulo de nuestra página. El cuerpo, definido entre las etiquetas <body> y </body>, y entre las que colocaremos nuestro texto e imágenes, definidos, a su vez por otras etiquetas que determinen cómo queremos que, específicamente, aparezcan. y y
(por supuesto, en un Blog como los que ofrece Blogger, el diseño de la plantilla tiene muchas más 'tripas': cuerpo, pie de página, barras de navegación, etc, etc: Vamos que, naturalmente, está hecho por gente con conocimientos muy avanzados, y hay que 'hacer un acto de fe' y creernos las cosas (etiquetas) que pongan, y que no entendamos).
¿Que es CSS? ¿y CSS3?
CSS (Cascading Style Sheets, u hojas de estilo en cascada) es un lenguaje que se integra perfectamente con HTML que potencia y simplifica enormemente el diseño, sobre todo en lo referido cuestiones de aspecto y formato, complementando y mejorando las prestaciones del clásico (y ya viejo) HTML. (un comentario: en CSS se puede escribir, indistintamente, con mayúsculas o sin ellas)
¿Y CSS3? Pues no es más que un CSS más desarrollado, que contiene especificaciones más avanzadas, por lo que permite, como hace CSS, incluir de forma mucho más fácil que haciéndolo 'en puro lenguaje HTML', nuevos recursos de diseño, como bordes redondeados en botones, colores con gradientes, etc, etc. Hoy en día casi todos los Blogs, y navegadores, admiten CSS3.
Reglas básicas sobre la sintaxis CSS
Los estilos a aplicar son muy simples, e intuitivos, del tipo, por ejemplo, font-size: ... font-family: ... color: ..., etc, es decir, el atributo seguido por dos puntos y luego el valor que queremos asignar. Además, se pueden añadir cuantos atributos quieras, separándolos por punto y coma (o una coma, si son varios valores del mismo atributo). Verás muy a menudo estas expresiones:
LAS LLAVES {…}
Se suelen emplear para definir el estilo general de una etiqueta de uso frecuente (y por tanto, de esta forma solo lo definimos de una vez por todas, escribiendo la etiqueta y luego sus diferentes atributos, separados por puntos y comas, dentro de esas llaves). Por ejemplo, para los párrafos del cuerpo ('Body') de una entrada podría poner...
P {font-Family:arial,verdana; color: white; background-color: black}
es decir, cuantos atributos quieras, separados por punto y coma.
Y queda decir que los estilos generales asignados a la etiqueta <body> son heredados por todo lo que contiene el cuerpo del blog, mientras no haya alguna alguna modificación específica.
(Por eso, si pinchas en 'Fuente Predeterminada' verás que te pone font family= inherit (que no es una fuente extraña, es eso: 'heredada')
EL ATRIBUTO STYLE=”...” dentro de las etiquetas.
Indica que se va a aplicar un estilo CSS. Entre las etiquetas que lo suelen usar, son muy comunes...
<SPAN>... </SPAN>
Se emplea para definir estilos en algún bloque específico de una página, o en determinadas frases, o palabras, de un párrafo.
Añadiendo el atributo style=”...”> (admitido por todas las etiquetas HTML) podemos incluir los estilos que queramos. Por ejemplo, si escribes, en edición HTML...
"en este párrafo, lo que sigue <span style="font-size: 10px;"><span style="font-family: Verdana,sans-serif;"><span style=”color:#000099”> va en letra pequeña, verdana, y en azul</span></span></span>
se vería como se dice ahí
<DIV>... </DIV>
Añadiendo el atributo style=”...”> (admitido por todas las etiquetas HTML) podemos incluir los estilos que queramos. Por ejemplo, si escribes, en edición HTML...
"en este párrafo, lo que sigue <span style="font-size: 10px;"><span style="font-family: Verdana,sans-serif;"><span style=”color:#000099”> va en letra pequeña, verdana, y en azul</span></span></span>
se vería como se dice ahí
Se emplea para definir secciones ('divisiones') de una página, y poderle aplicar, en general, a esa sección, el atributo style. Así quedan definidos, de una sola vez, los estilos de esa sección, o bloque de la página (que puede incluir varios párrafos).
<div style="color:#000099; font-weight:bold">
[contenido de la sección, o bloque]
</div>
NOTA: la diferencia entre 'div' y 'span' lo ves muy claro en este ejemplo:
<div style="color:#000099; font-weight:bold">
[contenido de la sección, o bloque]
</div>
NOTA: la diferencia entre 'div' y 'span' lo ves muy claro en este ejemplo:
esto es lo que sale si aplico <div style="background:silver"
y esto es lo que sale si aplico <span style="background:silver"
(es decir, 'div' engloba toda la sección (el párrafo) mientras que 'span' solo afecta a lo escrito en ese párrafo)
CLASS=”...” (es decir, 'div' engloba toda la sección (el párrafo) mientras que 'span' solo afecta a lo escrito en ese párrafo)
¿qué son las 'clases'...? En la hoja de estilos CSS una 'clase' es una definición de estilos que se crea independientemente de las etiquetas, pero que se puede invocar, luego, para aplicarle ese estilo, ya definido, a cualquier etiqueta.
Una clase se 'guarda' poniéndole un nombre precedido de un punto y, a continuación, definiendo sus estilos (propiedades) entre llaves.
Y se invoca incluyendo, en una etiqueta, class=”nombreClase”> (sin el punto inicial)
Es una forma muy cómoda de aplicar estilos, y puedes crear cuantas 'clases' quieras.
Lo vemos bien en un fácil ejemplo:
Suponte que, en tu blog, añades de vez en cuando algunos párrafos 'aclaratorios', como 'Notas', y quieres que tengan todos la misma configuración. Puedes crear una clase, que llamarás, por ejemplo 'Nota'. Y podrías definirla, también por ejemplo, así:
<style type=”text/CSS”>.Nota {color: magenta; font-family= 'Comic Sans MS'; font-syze=10pt; font-weight:bold}
</style>
Pues bien ahora, si queremos que un párrafo quede automáticamente configurado como una 'Nota' nos bastaría invocar la clase así:
<p class=”Nota”><... (aquí iría el texto del párrafo)></p>
Y el párrafo adquiriría las propiedades definidas para esa 'clase'
Buen invento ¿no?
(Por cierto: habitualmente las 'clases' que has definido es cómodo guardarlas al final de 'head' (es decir, justo antes de </head>. Así las tienes muy a la vista, editando la plantilla, por si quieres añadir alguna más, cambiar algún estilo (propiedades de esa clase, etc).
Si te interesa el tema, en esta entrada 'trabajo' con las 'class'.
El atributo ID
Una clase se 'guarda' poniéndole un nombre precedido de un punto y, a continuación, definiendo sus estilos (propiedades) entre llaves.
Y se invoca incluyendo, en una etiqueta, class=”nombreClase”> (sin el punto inicial)
Es una forma muy cómoda de aplicar estilos, y puedes crear cuantas 'clases' quieras.
Lo vemos bien en un fácil ejemplo:
Suponte que, en tu blog, añades de vez en cuando algunos párrafos 'aclaratorios', como 'Notas', y quieres que tengan todos la misma configuración. Puedes crear una clase, que llamarás, por ejemplo 'Nota'. Y podrías definirla, también por ejemplo, así:
<style type=”text/CSS”>.Nota {color: magenta; font-family= 'Comic Sans MS'; font-syze=10pt; font-weight:bold}
</style>
Pues bien ahora, si queremos que un párrafo quede automáticamente configurado como una 'Nota' nos bastaría invocar la clase así:
<p class=”Nota”><... (aquí iría el texto del párrafo)></p>
Y el párrafo adquiriría las propiedades definidas para esa 'clase'
Buen invento ¿no?
(Por cierto: habitualmente las 'clases' que has definido es cómodo guardarlas al final de 'head' (es decir, justo antes de </head>. Así las tienes muy a la vista, editando la plantilla, por si quieres añadir alguna más, cambiar algún estilo (propiedades de esa clase, etc).
Si te interesa el tema, en esta entrada 'trabajo' con las 'class'.
Esto es algo similar a CLASS, pero de uso un poco más limitado, y específico (solo puede haber un ID por ámbito, y se emplea para áreas específicas: header, footers...). Se suele usar en etiquetas a las que se aplique JavaScripts, mientras que las 'clases' se emplean, habitualmente, para tener preconfigurados, y aplicar, diversos estilos generales a lo largo del Blog.
Un ID se crea como la clase, se guarda anteponiendo una almohadilla (#) al nombreID y se invoca, también, como las clases. Algo así
<style>
#nombreID {aquí definimos los estilos pretendidos}
</style>
y luego...
<div ID=”nombreID”><....></div>
(las clases y los IDs pueden convivir, CLASS define un estilo general, e ID puede generar una propiedad exclusiva para una parte específica)
Un ID se crea como la clase, se guarda anteponiendo una almohadilla (#) al nombreID y se invoca, también, como las clases. Algo así
<style>
#nombreID {aquí definimos los estilos pretendidos}
</style>
y luego...
<div ID=”nombreID”><....></div>
(las clases y los IDs pueden convivir, CLASS define un estilo general, e ID puede generar una propiedad exclusiva para una parte específica)
Insisto en que esto no es un cursillo de HTML y CSS, sino unos simples 'apuntes' de novato (y ademas, reconocidamente ignorante en estos asuntos de diseño) para identificar algunos conceptos que sin duda verás si editas en HTML una entrada, o una plantilla del Blog.
Por lo menos, confío que sirvan para 'saber de qué va la cosa'.
Continuaré con alguna cosita más, en plan 'estrictamente divulgativo'
De todas formas, si alguien quiere profundizar un poco sobre HTML/CSS, es muy interesante este enlace:
http://roble.pntic.mec.es/apuente/html/paginas/contenidos.htm
Etiquetas: Perfeccionamientos y Trucos
entrada de Julio Bengoa ('aka' doc) @ 2/03/2014 10:13:00 p. m.
1 comentarios
1 comentarios:
Muy bueno el Blog
Publicar un comentario
Nota: solo los miembros de este blog pueden publicar comentarios.
Suscribirse a Enviar comentarios [Atom]
<< Inicio