Unas pinceladas de HTML y CSS
Como lo prometido es deuda, esta es la entrada de HTML y CSS que prometíamos aqui.
Lo cierto es que el ejemplo que pusimos ayer de que el HTML es el texto de un libro y que el CSS es la edición en la que leemos ese libro, si bien no es tan sencillo, nos puede servir, al menos de momento, para empezar a ver este tema.
HTML son las siglas de HyperText Markup Language, vamos Lenguaje de Marcas de Hipertexto, y es el lenguaje que utilizan los navegadores para mostrar la información web.
Este lenguaje se basa en etiquetas encerradas entre los símbolos < y >. Una etiqueta le explica al navegador donde empieza cierta parte del código, por lo que es necesario cerrarlas con la misma etiqueta pero esta vez con una barra precediendo al nombre. Un ejemplo típico es <p>Hola soy un párrafo.</p> .
Existe un gran número de etiquetas definir texto en HTML, la lista aquí.
Si hacemos un pequeño ejemplo de HTML, podríamos hacer esto:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejemplo de HTML</title>
</head>
<body>
<p> Este es un ejemplo de código en HTML. Está visualizando un párrafo que presenta una lista desordenada.</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Y otras cosas más</li>
</ul>
</body>
</html>
Si copiamos el texto anterior, lo abrimos en una aplicación de texto plano y lo guardamos con el nombre que queramos y la extensión HTML, tendremos nuestro primer ejemplo de página web.
Básicamente si nos miramos las etiquetas en unas 5 horas habremos aprendido lo que necesitamos en HTML.
Os voy a explicar un poco estas etiquetas, <!DOCTYPE html> dice cual es el lenguaje que utilizamos. Siempre será nuestra primera linea, y se puede reutilizar en todos los proyectos que iniciemos. <html> viene a ser lo mismo que la linea anterior pero como no cuesta nada ponerla y se recomienda en muchos lugares la incluimos. El cierre se coloca al final del texto, para decirle al navegador que ya hemos terminado.
La etiqueta head encierra propiamente el comienzo del documento. dentro de esta etiqueta se puede poner la codificación en la que la página está escrita.(Esta codificación en este caso UTF-8 permite visualizar acentos), el título de la página, que veremos en la pestaña de nuestro navegador,ó si escribimos la hoja de estilos (CSS) del documento en el HTML.
Después aparece la etiqueta body que contiene todos los datos que se visualizan en la página web, como el de párrafo <p> el de lista desordenada <ul> y el de cada elemento de esa lista <li> .
Como decíamos antes ya tenemos nuestra primera web en local, pero es fea,fea, fea. Quizás hubiera estado bien en los primeros años 90 en los que las webs eran así de sosas, pero esto a día de hoy es inviable, por lo que necesitamos algo que le de estilo a la web, en este caso el lenguaje CSS. Una página que contenga el mismo HTML que otra, se puede ver de manera completamente distinta si cambiamos el CSS. Un ejemplo de lo que digo está en la página CSS ZenGarden . Aqui el texto es siempre el mismo, y solo cambia la hoja de estilos.
El CSS es bastante parecido a HTML, pero claro muy parecido no significa igual, por lo que necesitamos aprender el lenguaje. Mira la lista de opciones de CSS
Yo soy de la opinión que el código de HTML debe de ir separado del CSS. La razón por la cual creo que es mejor hacer las cosas así es la página de ZenGarden. Si alguna vez te cansas de tu diseño, ó ves que está empezando a ser antiguo, creas tu nueva hoja de estilos por separado de tu código principal, del que solo tendrás que cambiar una linea, la que pone la ruta del archivo donde está tu hoja de estilos. Es por eso que es la solución ideal en el mundo de verdad, pero como esto es solo una breve introducción a la programación web, vamos a hacer este mini ejemplo solo en un archivo.
Aquí está el mismo código que antes con una hoja de estilos:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
p {
color: blue;
font-family: Verdana;
font-size:25px;
}
li {
list-style-type:none;
background-color:#ee459a;
font-family:Arial;
}
</style>
<title>Ejemplo de HTML y CSS</title>
</head>
<body>
<p> Este es un ejemplo de código en HTML y ya con hoja de estilos. Está visualizando un párrafo que presenta una lista desordenada.</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Y otras cosas más</li>
</ul>
</body>
</html>
Si tuviéramos la hoja de estilos en otro documento en nuestro servidor tendríamos que poner <link rel="stylesheet" href="ruta donde está el archivo/su nombre.css"> , borrar la linea <style type= "text/css" > y copiar y pegar en un archivo nuevo con extensión CSS el texto que definía el estilo desde p { hasta el último } ambos inclusive y eliminar </style> .
Vamos a explicar un poco la sintaxis de este CSS. Si os fijáis en HTML se marca que un párrafo empieza con la etiqueta <p> y termina con </p> , pues bien en este CSS marcamos que todos los párrafos (p) tengan ciertas características. Para hacer esto marcamos p y abrimos unas llaves. Todas las órdenes que ponemos a los párrafos van incluidas entre estos dos elementos, son como el comienzo de etiqueta y de final del CSS.
En este caso le hemos dicho con color:blue; que queremos que el color del texto sea azul. Ademas de los colores básicos en inglés todos los atributos de color se pueden definir por el color en hexadecimal precedido de un # . color:#ffffff; nos pondría el texto de color blanco. Más información de los colores en hexadecimal aquí. Font-family:Verdana; nos cambia el tipo de letra a Verdana, y font-size:25px; nos cambia el tamaño de la letra a 25px.
La etiqueta li cambia todas las etiquetas <li> de nuestro HTML. En este caso list-style-type:none; quita los puntos con los que por defecto marca el comienzo de cada linea de las listas no ordenadas. background-color:#ee459a; Cambia el color de fondo de cada linea a ese rosa tan discreto :D . font-family:Arial; Pues eso cambia la fuente a Arial.
Este ejemplo es muy básico, y lo hemos podido realizar en editores de texto plano, pero para hacer un proyecto de web, es mejor utilizar editores HTML. De los que he probado que no son muchos me gusta AptanaStudio 3 que es multiplataforma tanto para Windows, Os X y Linux. Todas las descargas desde su página web. El programa se encarga de escribir el cierre de las etiquetas y de las llaves, cuando escribimos el inicio, así como de terminar el texto y no tener que escribir entero por ejemplo font-family:Arial; sino que al poner fo, ya nos aparece la opción de autocompletar.
Hasta aquí la introducción de HTML y CSS. Como siempre si tenéis alguna duda y/o sugerencia no dudéis en comentar y lo hablamos.
No hay comentarios:
Publicar un comentario