En este tutorial veremos, o al menos eso intentaré:
· HTML
· CSS
Pero empezaré con una pregunta, ¿Qué se necesita para poder seguir este tutorial?
Pues, puedo decir que tenemos dos instancias, en la primera bastará con tener un block de notas, aunque recomiendo el Notepad++
Notepad++
Es un editor de texto inteligente, puesto que configurándolo puede reconocer etiquetas de diferentes lenguajes, este nos servirá para editar HTML, CSS, PHP, etc.
Luego, más adelante, necesitaremos nuevos programas para seguir avanzando, pero eso se verá después cuando sea realmente necesario, por el momento el Notepad++ nos alcanza.
HTML – HyperText Markup Language
El HTML es un lenguaje estándar basado en etiquetas utilizado para la estructuración y desarrollo de una página web, en el pasado este lenguaje se utilizaba para toda la web, es decir, tanto para colocar el contenido como para maquetarla, actualmente la maquetación vía HTML cayó en desuso con la creación del CSS, por lo cual, etiquetas dedicadas al diseño como fuentes, colores, etc. ya no se utilizan mas desde el HTML, de manera que serán destacadas en este tutorial.
Particularmente, cuando codifico una página lo hago al estilo XHTML (eXtencible HyperText Markup Language, Lenguaje eXtensible de Marcado de HiperTexto), es un lenguaje que tiene ciertas particularidades, pero la más importante para ésta instancia es que es estricto, es decir, cada etiqueta abierta debe cerrarse, los grupos de etiquetas deben cerrarse en el orden correcto, los valores de atributos deben ir entre comillas (“), los nombres de los elementos y atributos deben ir en minúsculas, etc.
Comenzaremos con lo básico, HTML para ser reconocido como una pagina web y que los navegadores lo puedan interpretar, necesita ciertas etiquetas base que no pueden faltar nunca.
Estas son <html>, <head>, y <body>.
Pero en primera medida, ¿Qué son las etiquetas?
Las etiquetas son las palabras reservadas que tiene HTML y se colocan dentro de sus delimitadores que son “<” y “>” (menor y mayor), como mencioné anteriormente las etiquetas deben cerrarse, para hacer eso se coloca delante del mayor la contra barra (“/”) es decir “/>”.
Etiquetas
<html> Es el contenedor del documento.
<html>Contenido del documento</html>
<head> Es la encargada de contener todo el sector de código que no verá el usuario pero si será interpretado por navegadores y/o buscadores.
<head>Encabezado del documento</head>
<body> Es la encargada de contener todo el cuerpo del documento, es decir, todo lo que verá el usuario.
<body>Cuerpo del documento</body>
<title> Determina el título del documento, éste se verá en el navegador en la barra superior, la cual contiene los botones de minimizar, maximizar y cerrar.
Esta etiqueta debe ir dentro de la etiqueta <head> puesto que ésta es su contenedora.
<head><title>Titulo de la Pagina</title></head>
<p> Determina un párrafo.
Esta etiqueta debe usarse dentro de la etiqueta <body> puesto que ésta es su contenedora.
<body><p>Contenido del párrafo</p></body>
Ahora crearemos nuestra primer pagina, la cual por razones de tradición programática será el clásico “Hola Mundo”.
Escribimos el siguiente código en el Notepad++ o el editor de texto que tengan:
<html>
<head>
<title>Hola Mundo</title>
</head>
<body>
<p>Hola Mundo<p>
</body>
</html>
Y ahora solo resta guardar el archivo como holamundo.html y abrirlo con nuestro navegador
Es importante que la extensión .html esté puesta ya que de lo contrario no funcionará como una pagina web.
Aclaración: Es recomendable que todos los archivos .html que creemos en el futuro tengan su nombre en minúscula, sin espacios o en su defecto separados por el guión bajo (“_”), y sin acentos.
Etiquetas [2]
<strong> Convierte en negrita al texto que contenga.
<strong>Texto</strong>
<em> Convierte en cursiva al texto que contenga.
<em>Texto</em>
<u> Subraya el texto que contenga.
<u>Texto</u>
<del> Tacha al texto que contenga.
<del>Texto</del>
<a> Es hacedora de hipervínculo, debe ir acompañada con la palabra href cuyo parámetro es la dirección web.
<a href=”paginaweb”>Texto Link</a>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> Estas etiquetas delimitan encabezados, van de mayor a menor, es decir el <h1> es el encabezado mas grande, usado para titulares, el <h2> como titular temático, y el <h6> generalmente usado para pie de página.
Se recomienda que en una página web (documento, no la página completa) debe haber solo un <h1> pudiendo haber varios <h2>, <h3>, etc.
<h1>Texto</h1>
Etiqueta de Tablas [*]
Voy a hacer un apartado especial para las tablas, puesto que serán muy utilizadas, hasta que se ingrese al mundo del maquetado por CSS y Divs.
Las tablas se determinan por la etiqueta <table> ésta determina el sector que ocupará la tabla.
Para agregar una fila a la tabla hay que utilizar la etiqueta <tr>, y para subdividir esta fila en columnas hay que utilizar la etiqueta <td>
Es decir, para crear una tabla con una fila y tres columnas hay que tipear lo siguiente
<table>
<tr>
<td>Primera Celda</td>
<td>Segunda Celda</td>
<td>Tercera Celda</td>
</tr>
<table>
CSS
Ya es tiempo de ver que es CSS, ya que esto nos permitirá avanzar en el "diseño" aunque el curso sea de programación.
CSS es un lenguaje propiamente dicho que permite establecer los estilos a los objetos que forman parte de nuestra página, es decir, a la mayoría de los tags HTML le podremos determinar su posición, su tamaño, su color, etc.
Este lenguaje es un estandar web y esta mantenido por el W3C, sus siglas significan Cascading Style Sheets (Es decir, Hojas de Estilo en Cascada)
La existencia de este lenguaje permitió desglosar la programación propiamente dicha de la página web del diseño de la misma.
Es decir, uno puede programar un HTML para que funcione como página web, y hacer por separado un archivo CSS que le de diseño al mismo, haciendo que el código del HTML sea más limpio, pues dentro de él solo estará la programación de la página.
Las propiedades CSS de los elementos se escriben dentro de llaves ({...}), estos son sus delimitadores.
Veamos un ejemplo:
Supongamos que tenemos una página web y le queremos dar un color de fondo al Body y además establecer la fuente y el color de la misma, para ello debemos escribir el siguiente código.
body {
background-color: #000;
color: #FFF;
font-family: verdana;
}
Analicemos la instrucción anterior:
Lo que está delante de la llave que abre ({) es el target, es decir, a donde se va a aplicar el estilo, este puede ser un ID, una Clase (Class) o algún Tag reservado de HTML o XML.
Dentro de las llaves ({...}) se escriben las propiedades y sus respectivos valores, a la izquierda de los dos puntos (:) va la propiedad, a la derecha el valor respectivo.
El valor no es solo una palabra, en realidad existen ciertos estándares que hay que respetar, por ejemplo, cuando se determina el tamaño de algo hay que especificar su unidad de medida es decir --> Propiedad: 200px; <-- "px" quiere decir que la unidad de medida será en píxeles.
Cuando es un color hexadecimal, adelante de su número hay que escribir el símbolo numeral (#), y como éstos cosas hay otros que se verán cuando llegue el momento.
Para terminar una instrucción hay que escribir el punto y coma (;) eso le dice al lenguaje que finalizó la línea que uno escribió.
Pero... ¿Donde escribo eso para que funcione?, existen 3 formas de insertar CSS en un HTML u otro archivo.
Ahora veremos una sola, pero más adelante, si lo necesitamos, veremos las otras.
Como aclaración, de las tres formas de hacerlo solo una deja el código limpio separado del diseño.
Las otras dos lo ensucian, una más que la otra. La que veremos nosotros lo ensucia lo menos posible.
Entre los tags <head> y </head> hay que escribir los tags que le avisarán al navegador que estamos cargando un estilo y este es <style> y </style>, es decir, que nuestro código final para mostrar como funciona CSS es el siguiente:
<html>
<head>
<style>
Body {
background-color: #000;
color: #FFF;
font-family: verdana;
}
</style>
</head>
<body>
TEXTO QUE SE VERA EN VERDANA</body>
</html>
Este código nos mostrará una página con Cuerpo en Negro, Texto en Blanco y la Fuente del texto en Verdana.
Próxima entrega: Como hacer una página con HTML y CSS que funcione como Home.
NOTA: Éste tutorial ha sido escrito por Hades_Ra, quien espero se decida a ser miembro activo del blog Hay ardillas en la red.
