You are on page 1of 12

Tutorial de HTML y CSS

José Antonio Calleja Esnal

8/19/2008

Publicado bajo licencia Creative Commons 3.0

Tutorial de HTML y CSS - 2

Tabla de Contenidos
Tutorial de HTML y CSS ....................................................................................................................... 3 Introducción .................................................................................................................................... 3 Conceptos Básicos ....................................................................................................................... 3 ¿Qué necesito para hacer una página web? ............................................................................... 3 ¿Qué es HTML? ........................................................................................................................... 3 ¿Qué es CSS? ............................................................................................................................... 3 HTML ............................................................................................................................................... 4 Estructura básica ......................................................................................................................... 4 Etiquetas para contenido ............................................................................................................ 5 Caracteres Especiales .................................................................................................................. 6 Ejercicio Integrador ..................................................................................................................... 6 Tablas .......................................................................................................................................... 8 Estilos en HTML ......................................................................................................................... 11

Tutorial de HTML y CSS - 3

Tutorial de HTML y CSS
Introducción
Este Tutorial tiene como objetivo orientar y acercar a los usuarios al lenguaje HTML y sus usos más comunes, es claramente introductorio pero sienta las bases para que cualquiera puede expanderse tanto como desee. Conceptos Básicos A continuación explicaremos a grandes rasgos los conceptos a tratar, si no lo entiendes, no te agobies, ya lo harás después.

¿Qué necesito para hacer una página web? Lo más básico para hacer una página es saber HTML, incluso si no lo supieras, podrías crear una. Si la pregunta es ¿Qué software necesito? la respuesta es ninguno, simplemente con abrir NotePad o Bloc de Notas se puede comenzar una página, por su puesto que puedes usar editores como Dreamweaver pero si en verdad quieres aprender, hay que hacerlo desde cero.

¿Qué es HTML? -HTML define la estructura de una página web, marcan por ejemplo que paret del documento será un párrafo, una cita, un título, una tabla, una imagen, etc. Los elementos de HTML les llamamos etiquetas y van entre signos <>, la mayoría de éstas son muy intuitivas, ya que se derivan o son palabras en inglés. ¿Qué es CSS? -El CSS le da la forma a una página, es decir, indica si los títulos irán en negritas, Arial, un tamaño de 12 puntos y en mayúsculas. Los comandos pueden colocarse en el mismo documento HTML o crear otro CSS que será llamado dentro del HTML.

Tutorial de HTML y CSS - 4

HTML
El HTML, como habíamos comentado, es un lenguaje que define la estructura de una página web y su nombre viene de las siglas "HyperText Markup Languaje". Existen muchas etiquetas en este lenguaje, y como dijimos se escriben entre <>, por ejemplo para poner un texto en negritas escribiríamos: <B>Texto en Negritas</B>, la "diagonal" o "/" seguida de la etiqueta, indica que ésta se está cerrando, en pocas palabras las etiquetas, ambas las que abren y cierran, delimitan la estructura de lo que escribiremos. Etiquetas más conocidas html, head, title, body, h1, b, i, u, s, table, tr, td, img, a. Estructura básica Para comenzar una página, usualmente comenzamos con la etiqueta html, seguida de head, y title, de ésta forma: <html> <head> <title> Mi primera página </title> </head> <body> Hola Mundo! </body> </html> ¿Qué fue lo que hicimos?1 Abrimos con la etiqueta HTML2 para indicar al navegador que tipo de documento está abriendo (En muchos casos puede omitirse). La etiqueta HEAD, es como lo dice el nombre, la cabecera nuestro documento, dentro de ésta se puede poner el título o la meta-información (información de la información) de la página, el código CSS, scripts, el favicon (ícono que aparece en la barra de direcciones), etc. La etiqueta TITLE, va siempre dentro de la cabecera o HEAD, y lo que se escriba en ésta es precisamente lo que aparecerá en la barra superior del navegador, es en realidad, el "título de la página", en este caso dirá "Mi primera página".

1

Los espacios que dejamos al escribir el código, se llama "indentación", no tiene ningún uso aparte de mantener ordenado nuestro código para poderlo entenderlo más fácil, puede omitirse, pero así se ve “más bonito”
2

Las etiquetas pueden escribirse en mayúsculas o en minúsculas, es indistinto.

Tutorial de HTML y CSS - 5 La etiqueta BODY indica que se comienza el cuerpo de la página, es decir, la información real de la página, lo que vemos, en este caso un "¡Hola Mundo!"

Prueba éste ejemplo escribiéndolo en el bloc de notas y grabándolo como "ejemplo1.html", ahora ábrelo en el navegador de tu preferencia. Etiquetas para contenido Excelente, acabas de crear tu primera página de internet, aunque es un poco escueta y fea, aceptémoslo. Lo bueno es que hay muchas más etiquetas como la que define los titulares, los párrafos, los links y las imágenes. Los titulares se definen con las etiquetas <H1>,<H2>,<H3>,<H4>,<H5>,<H6> y <H7>, siendo H1 el titular más grande H7 el más pequeño, la H viene del titular en inglés "Heading" (recuerda cerrar cada etiqueta en el orden en que las vas abriendo). Los párrafos se definen con la etiqueta <P> El texto en negritas con <B> (bold) o <Strong>, cursiva con <I> ó <i> (italic) o <em>, subrayado con <U> (underline), para el texto con una línea intermedia se escribe <S> (Stroke). Los enlaces tienen varias partes, para empezar se definen con la letra "A" pero hay que indicar la dirección a donde apuntan con el atributo "href" (hyper reference), para dar más información sobre el vínculo se pone la etiqueta Title, por ejemplo un link que lleve a Google se escribiría así:
<a href="http://www.google.com" title="Buscador Google" >Google</a>

Si copiamos ésta línea a nuestra página, lo único que se vería es la palabra Google en Azul indicando que es un link. Las imágenes funcionan de forma parecida a los links solo que con la etiqueta <IMG> y con el atributo "src" para indicar la ubicación de la imagen, así: <img src="imagen.jpg"> Considera que: -Puedes usar cualquier formato de imagen que quieras, pero toma en cuenta que un BMP es muy pesado y alentaría la página, lo más recomendable es grabarlas en GIF, JPG O PNG. -la etiqueta de la imagen, no se cierra, puesto que nada más se llama, no requiere nada más. -las rutas tanto de la imagen como para los links, si no están antecedidas por el "http://" lo tomará como una ruta relativa, es decir, en el ejemplo anterior, el navegador tratará de poner una imagen de nombre "imagen.jpg" que estaría grabada precisamente en la misma carpeta donde está nuestro archivo html. (ejemplo1.html)

Tutorial de HTML y CSS - 6

El tamaño de las imágenes puede ser modificado con HTML con los atributos WIDTH (anchura) y HEIGHT (altura), seguidas con el número de pixeles que ocuparán las imágenes, los pixeles son la unidad más pequeña en un monitor o pantalla, un monitor común de laptop tiene como medidas 1280x800 pixeles, quiere decir que hay 1280 cuadritos a lo ancho del monitor y 800 de altura, para un total de 1'024,000 pixeles (¿no me creen?, cuéntenlos); también se puede poner uno de los dos atributos nada más, para que el navegador calcule la proporción más adecuada; otro atributo es el ALIGN el cual sirve para alinear la imagen respecto al texto que la rodea y puede ser "left, right o center"; una más es el texto alternativo, es aquel que aparece cuando la imagen no puede ser cargada correctamente y se denota con alt; se pondrían así: <img src="imagen.jpg" alt="imagen número 1"> width="150" height="150" align="right"

Caracteres Especiales Una etiqueta elemental y que no hemos mencionado es <BR> (brake), o en castellano, "salto de línea", así es, no importa cuántos "enters" pongamos en nuestro código, el navegador interpretará todo como texto seguido a menos de que pongamos un <BR> (ésta etiqueta tampoco requiere cerrarse). Otra parecida es la del espacio en blanco, que en realidad no es una etiqueta en sí, sino una "secuencia de escape" y se escribe &nbsp; (blank space), existen secuencias para muchísimos símbolos que no los pondré aquí por obvias razones, pero por mencionar algunos están los de los acentos (en muchos casos es preferible usar las secuencias a las vocales con acento, para evitar errores), ejemplo:

<p>Esta casa est&aacute; muy peque&ntilde;a.&nbsp;&nbsp;&nbsp;Y algo fr&iacute;a.<br>Mejor, busquemos otra.</p> Esto nos mostraría un párrafo con lo siguiente: Esta casa está muy pequeña. Y algo fría. Mejor, busquemos otra. Ejercicio Integrador ¿Fácil no?, para practicar crea una página con 2 párrafos y una imagen alineada a la derecha en el primero y otra a la izquierda en el segundo, usa negritas, cursivas, vínculos y todo lo que repasamos en éste capítulo, no olvides ponerle de título a tu página "Ejercicio Integrador - 1", prueba recrear lo que se muestra en la figura 1.1

Tutorial de HTML y CSS - 7

Figura 1.1 3

Después de haber practicado las etiquetas más básicas de HTML, es hora de ver algunas que complementan la estructura de las páginas. (Recuerda que cada etiqueta se cierra con una /, salvo excepciones) <Blockquote> Ésta etiqueta crea un bloque de texto; se usa para citas textuales, porque crea una pequeña separación a la izquierda del texto. Se cierra con / </blockquote> <hr> dibuja una línea horizontal. No necesita cerrarse.

3

Texto obtenido de Barrapunto el día 19 de Agosto del 2008 <http://barrapunto.com/article.pl?sid=08/08/19/1935242&from=rss>

Tutorial de HTML y CSS - 8 Tablas Las tablas suelen ser complicadas de entender al principio pero en realidad es un concepto muy sencillo, primero hay que declarar que comienza una tabla, luego declarar que comienza un renglón y después declarar cada columna por separado, Un ejemplo de una tabla de 2x3 celdas sería así. <table> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </table> ¿Demasiado código para algo tan sencillo no?, afortunadamente llevan un esquema muy estructurado. Ahora, una de las variaciones que podemos tener en las tablas es que una celda ocupe dos o más columnas o que una celda ocupe dos o más renglones. Esto se usa por ejemplo en los títulos de las tablas y en infinidad de otros casos, pero para lograrlo hay que agregar los atributos rowspan o colspan dependiendo si lo que queremos es abarcar varios renglones o varias columnas respectivamente. Ejemplo, una tabla de 2x2 con un título <table border="4"> <tr> <td colspan="2"><b>título</b></td> </tr> <tr> <td>1</td> <td>2</td> </tr> </table> Nótese que seguido del colspan se coloca el número de columnas que abarcará nuestra celda alargada. En el caso de las filas sería algo así: <table border="1"> <tr> <td rowspan="2">1</td> <td>2</td> </tr> <tr>

Tutorial de HTML y CSS - 9 <td>3</td> </tr> <tr> <td>4</td> <td>5</td> </tr> </table> Observaciones Por defecto, el borde que se le asigna a las tablas es de 0, pero puede ser modificado escribiendo el atributo border seguido del número de borde a usar. Otra etiqueta que entra dentro de las tablas es el th (Table Heading), y se usa en lugar de un TD, para indicar el título o cabecera de la tabla, por ejemplo, la misma tabla que usamos con colspan pero ahora un th: <table border="4"> <tr> <th colspan="2">Table Heading</th> </tr> <tr> <td>1</td> <td>2</td> </tr> </table>

¿Sencillo no?; Ahora, veremos las alineaciones dentro de las celdas. Dentro de las tablas al igual que en muchas etiquetas en HTML para alinear la información se usan principalmente dos atributos: align y valign, el primero puede ser: left, right, center o justify; mientras que para el segundo (alineación vertical) puede ser: top, middle o bottom. En el caso de las tablas, se puede usar tanto el align como el valign, ambos se escriben dentro de las etiquetas de las columnas, es decir, en los TD's o TH's. El mismo ejemplo pero alineando los números: <table border="4"> <tr> <th colspan="2">Table Heading</th> </tr> <tr> <td align="right">1</td> <td align="center">2</td> </tr> </table>

Tutorial de HTML y CSS - 10 Para modificar el ancho o alto de las celdas, filas o tabla completa podemos usar los atributos WIDTH y HEIGHT al igual que en las imágenes y en éstas, los valores también pueden ser relativos, así que podemos usar porcentajes en lugar de medidas de pixeles fijas; ejemplo:
<table border="1" width="100" height="100"> <tr> <td rowspan="2" width="70%" align="right" valign="bottom">1</td> <td height="30%">2</td> </tr> <tr> <td height="70%" valign="top">3</td> </tr> <tr> <td align="center">4</td> <td align="right">5</td> </tr> </table>

Parece un poco complicado pero en realidad no lo es, simplemente hay que llevar muy claro en qué orden estamos creando las celdas para poder manipularlas al gusto, hay que recordar que las filas siempre se crean de arriba a abajo y las columnas de izquierda a derecha. Para que estos conceptos queden clarísimos, necesitaremos hacer una segunda práctica integradora, por supuesto que incluyendo los conceptos de la primera parte

El código para el ejemplo anterior es:

Tutorial de HTML y CSS - 11

Excelente, acabamos la segunda parte de HTML. En este momento ya sabes cómo acomodar información en HTML de una forma muy sencilla, pero algo falta ¿no?, las tablas y texto que has creado se ven muy aburridas todas en blanco y negro; lo bueno, es que podemos cambiarlo, pero en eso ya tiene que ver el estilo de la página. Estilos en HTML Hasta este momento hemos aprendido solamente la estructura, de las páginas, pero no le hemos dado forma todavía. Eso porque semánticamente el HTML se debería encargar tan solo declarar qué es cada cosa, no de darle forma (aunque algunos diseñadores muy malos, no lo hagan). Si bien podemos darle forma al texto en HTML colocando atributos a las etiquetas no es lo más recomendable. Bien, primero aprenderemos una forma en que no es muy recomendable pero en muchos casos nos saca del apuro, la otra forma es CSS y la veremos más adelante. Para cambiar el color de fondo del Body o de una tabla por ejemplo usamos el atributo bgcolor seguido del color a usar. Otros colores permitidos son red, turquoise, light blue, dark blue, light purple, dark purple, yellow, pastel green, pink white, light grey, dark grey, black orange, brown, burgundy, forest green grass green, hot pink.. y muchos otros más. Pero yo no se en qué estaban pensando los que crearon las secuencias de los colores, porque son realmente horribles y además es una gama muy limitada.

Tutorial de HTML y CSS - 12 Por eso no se usan, en lugar de poner el nombre del color lo que hacemos es escribir el código del color en hexadecimal en la secuencia RGB.... ¿Qué es todo ese palabrerío? Bien, Hexadecimal quiere decir que es una base de números que va del 0 al 15, es decir cuenta con 16 guarismas que serían: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f . Ahora, cada color está compuesto por tres partes: el nivel de Rojo, el Verde y el Azul, de ahí las siglas RGB (Red, Green, Blue). Cada uno de esos colores primarios puede tomar valores que van del 0 al 225, que sería del 00 al FF (FxF=255). De esta forma el color negro en lugar de escribir "black" podríamos cambiarlo por un sofisticado "#000000" es decir, todos los colores en el mínimo o 0. Un rojo no tan molesto sería "#880000" y así podríamos seguir sin terminar, las opciones son muchas.

Para darle formato al texto, está la etiqueta FONT, que tiene como atributos: size, color, face; Size, como se imaginarán es para cambiar el tamaño, pero debe ir en un rango entre 1 y 7, face es para indicar el tipo de letra que se usará. Ejemplo:

Hola Mundo! C l a
variaciones:

Inténtalo, escribe tu nombre con un montón de

a

lej

Otras etiquetas que no son muy usadas por sus cuestiones de usabilidad, ya que dificultan en muchos casos la lectura de la información, en lugar de hacerla más clara... son MARQUEE, que nos crea una marquesina y BLINK, crea un texto parpadeante.
<marquee>Hola</marquee><br><blink>Yo parpadeo</blink> Un tip... Puedes ver cómo está hecha cualquier página web, para esto simplemente hay que dar clic derecho en ésta, luego seleccionar Ver código Fuente. Seguro habrá etiquetas que no hemos visto pero con la ayuda de Google puedes averiguar su significado.