;  MY LIFE: CSS Y HTML INTRODUCCIÓN

06 agosto 2011

CSS Y HTML INTRODUCCIÓN

Aunque en la web podemos encontrar muchos manuales sobre qué es y cómo se utilizan estos lenguajes, voy a intentar hacer un pequeño resumen para principiantes como yo, con el fin de que conozcamos un poquito más y de un modo sencillo como darles el mejor uso para nuestro blog.

1. ¿QUÉ ES EL HTML?

El HTML es el lenguaje de tu navegador. Cuando visualizamos una página web, es el navegador el que interpreta el código HTML de dicha página y nos la muestra tal y como la vemos. Mejorado con el tiempo ahora lo podemos ver como XHTML.


2. ¿QUÉ ES EL CSS?

Es un lenguaje de estilo que define la presentación de los documentos HTML. Es decir, lo que nos permite darle forma: colores, bordes, fuentes, textos....
El HTML, creado en principio con fines de divulgación científica, ya que se creó para que los científicos de diferentes universidades pudieran tener acceso a los estudios y tesis de sus compañeros, abarcó mucha más importancia de la esperada para su creador, y con el tiempo ha necesitado de herramientas y modificaciones que nos sirvan para mejorarlo, como el CSS.


3. HTLM: ELEMENTOS Y ETIQUETAS

Los ELEMENTOS proporcionan la estructura al documento HTML. Es la manera de decirle al navegador como queremos que presente nuestra página web o nuestro blog. Normalmente están formados por una etiqueta de inicio, el contenido y una etiqueta de cierre.

Un ejemplo de un elemento que vemos en la plantilla de nuestro blog son los encabezados .Los encabezados vienen representados por la h, y según el número que tengan al lado (h1,h2,h3....), sabremos la importancia que tiene en cuanto al orden de aparición y tamaño.

Las ETIQUETAS son lo que usamos para determinar el principio y el fin de un elemento. Todas las etiquetas empiezan con el signo < y terminan con el > (os suena, ¿verdad?). Una etiqueta de inicio será así <body>. Y una etiqueta de cierre así </body>. El contenido quedará entre una etiqueta de inicio y una de cierre.

¿Cómo sería una estructura básica?

<html>

      <head>
      </head>
      <body>
      </body>
  
  </html>

Con <html> estamos diciendo que se trata de una página web. Luego vendrá el encabezado de nuestra página, donde podemos poner por ejemplo un título, utilizando para ello la etiqueta <title> como inicio y </title> como cierre. Entre las etiquetas <body> y </body> estableceremos el contenido de nuestra página, y dentro de ellas, según lo que queramos poner, utilizaremos unas etiquetas u otras. Por ejemplo, si vamos a escribir un párrafo, lo haremos entre las etiquetas <p> y </p>, que son las que determinan que lo va dentro es un párrafo de texto.

Debemos tener en cuenta que existen elementos que se abren y cierran con la misma etiqueta, ya que no están relacionados con el texto. Son los que se conocen como ELEMENTOS VACÍOS y hemos visto muchos en nuestras plantillas. Algunos ejemplos:
<br/> su función es crear un salto de línea
<hr/> crea una línea horizontal
<img/> para poner una imagen

4. ATRIBUTOS
Un ATRIBUTO es una información extra que podemos añadir a un elemento. Por ejemplo, el atributo style.
¿Qué tenemos que tener en cuenta a la hora de añadir un atributo? Que siempre van dentro de la etiqueta de inicio, seguido de un = y con los valores del atributo entre comillas. Por ejemplo:

<h1 style="background-color:red;">El texto que queramos</h1>

Estamos diciendo que el encabezado (h1) tenga un color de fondo rojo (el punto y coma que sigue al color es para poder poner a continuación otro comando de estilo, como por ejemplo la fuente de la letra).

5. CSS

Ya hemos dicho antes que CSS es el lenguaje que nos va a ayudar a dar estilo a nuestra página HTML. Es decir, nos permitirá darle forma, tipo de letra, colores, márgenes, imágenes....Pero, ¿no hemos dicho también que utilizando los elementos y atributos en HTML también podemos lograrlo? La respuesta es sí, pero CSS nos ofrece más opciones, es más preciso y lo que es más importante, lo soportan todos los navegadores web.

Por ejemplo, si quisiéramos conseguir un color de fondo rojo, con HTML sería así:


<body bgcolor="red">


Y en CSS quedaría:


body {background-color:red;}


Lo siguiente a explicar serían las PROPIEDADES en CSS, pero creo que para ser una introducción ya me he extendido bastante, así que os lo contaré en otro post.


Os dejo el enlace de la página donde he extraído toda esta información, aunque han sido varias las que he leído, os dejo la que creo que lo explica de un modo más sencillo.
TUTORIALES SENCILLOS

Os dejo otros post de mi blog que podrían interesaros:


COMO PONER UNA TABLA
COMO DAR FORMATO A UNA TABLA
COMO ENMARCAR UN TEXTO


Espero que os haya servido de ayuda. Un saludo