En este mini manual veremos los principios básicos del código html y sus diferentes etiquetas y atributos.
html es un lenguaje de marcado (o etiquetas) usado para la creación de páginas webs, con este lenguaje podemos cambiar la forma en el que el texto o contenido se muestra en pantalla. Para ello disponemos de diferentes etiquetas y atributos con los cuales podremos llevar a cabo la presentación de nuestra web.
Etiqueta:
Una etiqueta es una palabra que se encuentra en el interior del signo mayor y menor (< y >), estas etiquetas tienen principio y fin, la etiqueta de apertura seria: <etiqueta> y la de cierre </etiqueta>
El texto que se encuentre entre la etiqueta de apertura y la de cierre se vera afectado por la función de esa etiqueta. Por ejemplo si queremos poner la palabra hola en negrita deberemos de usar la etiqueta b (b de bold, ya que todas las etiquetas son o hacen referencia a palabras en ingles) de tal forma: <b>hola</b>
Debemos de recordar el cerrar siempre las etiquetas pues el no hacerlo podría ocasionar una mala presentación de nuestra web.
Atributo:
Un atributo es una “función” a parte para la etiqueta a la que afecte, los atributos se ponen dentro de la etiqueta de apertura y añaden funcionalidades a esta. Por ejemplo, si queremos que la palabra hola se vea de color rojo deberemos de abrir la etiqueta font y dentro de ella especificar el atributo que queremos cambiar, en este caso color y le especificaremos el valor red, de tal forma que quedara así: <font color="red">hola</font>
Como podemos observar, el valor (red) de nuestro atributo (color) se coloca entre comillas y se separa con un igual entre medio del atributo y el valor.
No todas las etiquetas soportan los mismos atributos, de hecho lo normal es que cada una disponga de unos atributos en concreto o pueda hacer uso de algún atributo común entre todas las etiquetas. Esto se va aprendiendo según vamos cogiendo practica a base de probar.
Las páginas web físicamente se guardan en ficheros .htm o .html, que no son otra cosa más que un fichero de texto plano que puede ser creado con el blog de notas por ejemplo.
Dentro de este fichero la página se divide en dos partes, head y body.
La etiqueta head debe contener en su interior toda aquella información sobre la página, como puede ser el titulo de esta, diferentes palabras o tags para mejorar los resultados de los buscadores, etc.
La etiqueta body contendrá todo el contenido de la página, es aquí donde deberemos de colocar todo lo que queramos y será lo que se muestre al cargar la página.
<html>
<head>
<title>Titulo de nuestra web</title>
</head>
<body>
Todo el contenido de nuestra web.
</body>
</html>
Si nos fijamos en el ejemplo superior se ha ido introduciendo hacia la derecha todo el código que se encuentre en el interior de otra etiqueta, de esta forma nos será mucho más simple situarnos y entender nuestra estructura. Todos estos espacios o tabulaciones no afectan de ningún modo a la visualización de la web.
Sin embargo no todo podía ser tan bonito, uno de los inconvenientes que tiene html es que se ha de emplear mucho código para mostrar todo tal y como lo queremos, y se tarda bastante tiempo en escribir todo, por ejemplo, ahora mismo en esta página se están mostrando 17.000 caracteres, sin embargo, para que todo se muestre correctamente se han empleado 52.000 caracteres... es por ello que existen programas para facilitarnos esta labor, en los que siguiendo unos sencillos pasos se consigue un resultado parecido o incluso mejor en un tiempo menor y con un esfuerzo menor, claro, que así no se aprende ; )
A continuación se mostrara una lista de las etiquetas y atributos más comunes junto a las funciones que realizan; en la columna Etiqueta se mostrara la etiqueta de apertura, a la de cierre sólo hay que añadirle una barra (/), en el caso de que la etiqueta de cierre cambiase se mostraran ambas etiquetas, en la columna Función habrá una pequeña descripción de esta, en la columna de Ejemplo se mostrara el resultado, salvo en el caso de no haberlo, entonces se mostrara el texto tal cual se escribe o nada, y por ultimo en la columna Atributos se mostraran los atributos básicos que se pueden usar dentro de esa etiqueta, cada atributo es un enlace que le llevara a la descripción sobre la función que realiza.
| Etiqueta: | Función: | Ejemplo: |
| <title> | Indica el nombre de la web |  |
| <meta> /> | Añade informacion sobre el documento, para ello hace uso de diferentes atributos, ver ejemplo: | <meta name="author" content="Manolo Garcia" /> <meta name="keywords" lang="es" content="html, manual, basico" /> |
| Etiqueta: | Función: | Ejemplo: | Atributos: | ||||||
| Texto: | |||||||||
| <b> | Texto en negrita | negrita | A. comunes | ||||||
| <i> | Texto en cursiva o italica | cursiva | A. comunes | ||||||
| <u> | Texto en subrallado | subrallado | A. comunes | ||||||
| <del> | Texto tachado | A. comunes | |||||||
| <blink> | Texto parpadeante | A. comunes | |||||||
| <marquee> | Texto en movimiento | ¡Muahahahaa! |
A. comunes width height behavior bgcolor direction scrollamount scrolldelay |
||||||
| <sup> | Texto en sup-índice | Sup-índice | A. comunes | ||||||
| <sub> | Texto en sub-índice | Sub-índice | A. comunes | ||||||
| <small> | Muestra el texto en letra pequeña. | Letra pequeña. | A. comunes | ||||||
| <big> | Muestra el texto en letra grande. | Letra grande. | A. comunes | ||||||
| <code> | Representa texto de computadora | Letra estilo computadora |
A. comunes | ||||||
| <pre> | Muestra el texto tal y como lo hemos escrito, respetando todos los espacios y tabulaciones. | T e x t o |
A. comunes | ||||||
| Parrafos y titulos: | |||||||||
| <p> | Permite definir párrafos que se separaran entre si con un pequeño espacio. | Primer parrafo. Segundo parrafo. |
A. comunes |
||||||
| <br> | Fuerza un quiebre de línea permitiendo partir un párrafo o línea de texto por la mitad y que continúe en la parte de abajo. También se puede usar para insertar líneas de espacio. ¡Esta etiqueta no tiene etiqueta de cierre! | Érase una vez un lobo feroz que... |
|||||||
| <blockquote> | Sirve para citar párrafos, el texto que se encuentre en su interior aparecerá desplazado ligeramente a la derecha y tendrá unos ligeros márgenes de espacio en su parte superior e inferior. | Linea de texto normal.Linea de texto con blockquote.Linea de texto normal. |
A. comunes | ||||||
| <font> | Esta etiqueta con la ayuda de varios atributos nos permite cambiar el estilo del texto, ver ejemplo: | Texto con una fuente "Brush Script Std", tamaño de letra de +1 y color azul. | A. comunes face size color |
||||||
| <h1> <h2> <h3> <h4> <h5> <h6> |
La etiqueta h más un número del 1 al 6, nos permite introducir un titulo en la pagina, siendo 1 el tamaño más grande/importante y 6 el más pequeño o con menor importancia. Además de cambiar el tamaño del texto también cambia el espaciado proporcionalmente. | Titulo con h3Titulo con h5 |
A. comunes align |
||||||
| Enlaces e imagenes: | |||||||||
| <a> | Esta etiqueta más sus correspondientes atributos nos permite crear hipervínculos a nuestra propia página a modo de índice, a subpáginas, a páginas externas, etc. | Al pulsar aquí se abrira la página de google. | A. comunes href target shape coords |
||||||
| <img> | Permite insertar imágenes, el enlace lo introduciremos con el atributo src |  |
A. comunes src usemap width height |
||||||
| <a> <img> Código |
La combinación de las etiquetas <a> y <img> permite que una imagen sea el propio enlace, para ello sólo hay que colocar el código correspondiente a la imagen entre las etiquetas <a> y </a> |  |
|||||||
| <map> Código |
Esta etiqueta permite hacer divisiones en una imagen y que al hacer clic en cada división te abra una página diferente, ver ejemplo y código: Para su funcionamiento hay que usar la etiqueta <area> en su interior. (+info) |
|
A. comunes | ||||||
| <area> | Permite diferenciar zonas de una imagen. | Ver ejemplo de la etiqueta <map> | A. comunes href target rel shape coords |
||||||
| Listas: | |||||||||
| <ul> | Esta etiqueta inicia una lista con símbolos, en su interior se encuentra la etiqueta <li> |
|
A. comunes | ||||||
| <ol> | Permite introducir una lista ordenada por números, usa también la etiqueta <li> para definir las líneas de la lista. |
|
A. comunes | ||||||
| <li> | La etiqueta <li> añade una línea a la lista, deberemos de usar tantas etiquetas de apertura y cierre como puntos en la lista queramos poner. | A. comunes type value |
|||||||
| <dl> | Sirve para iniciar una lista de definición. En su interior se usan las etiquetas <dt> y <dd> |
|
A. comunes | ||||||
| <dt> | Nos permite poner el titulo o palabra a definir. | A. comunes | |||||||
| <dd> | Añade la definición de la palabra anterior. | A. comunes | |||||||
| Tablas: | |||||||||
| <table> Código |
Esta etiqueta inicia una tabla, dentro deberemos de usar las etiquetas <tr> y <td> |
|
A. comunes border cellspacing width |
||||||
| <tr> | Introduce una fila en la tabla, dentro deberemos de usar la etiqueta <td> por cada celda que queramos dibujar. | A. comunes | |||||||
| <td> | Esta etiqueta va dentro de <tr>, y deberemos de colocar tantas como columnas queramos mostrar, el primer <td> hará referencia a la primera celda de la fila, el segundo <td>, a la segunda celda de la fila, y así sucesivamente. Ver código de ejemplo. | A. comunes align valign width rowspan colspan bgcolor |
|||||||
| <caption> | Permite introducir un titulo o texto sobre la tabla, esta etiqueta esta dentro de las etiquetas table de apertura y cierre. | A. comunes align |
|||||||
| Frames: | |||||||||
| <frameset> Código |
Permite dividir la página en varias partes, de forma que en cada una se cargue un html distinto, esto nos puede servir para poner un titulo en la parte superior y un menú a un lado, después el contenido se mostrara en el centro. La etiqueta <frameset> hace una división, esta etiqueta siempre ha de contener el atributo rows o cols para indicarle si ha de hacer la división en horizontal o vertical, además deberán de tener un valor que variara según el número de divisiones, este valor puede ser un número de pixeles, un porcentaje o un asterisco (*) para indicarle que use el resto de pantalla, estos valores irán separados por una coma y cada uno de ellos hará referencia a una división en concreto, el valor que se encuentre primero será el que hará referencia a la primera división, el segundo valor con la segunda división, y sucesivamente. En su interior se encuentra la etiqueta <frame>, que es la encargada de mostrar el contenido en cada división. |
Si te fijas esta página web esta hecha a base de frameset y frames: La página esta partida en tres filas, en la primera, la que esta arriba del todo es en la que se carga el html del titulo, la segunda fila a su vez se divide en dos columnas, la primera para el menú y el resto para el contenido. Y por ultimo en la parte inferior se encuentra nuestra última fila sobre la compatibilidad de los navegadores. |
A. comunes rows cols |
||||||
| <frame> | Se encuentra en el interior de <frameset> y sirve para cargar el contenido en las diferentes divisiones. Tendremos que usar tantos <frames> como divisiones tengamos, además, si lo necesitamos podemos hacer más divisiones dentro del <frameset> principal, de forma que la primera división se dividirá de nuevo. Esta etiqueta no tiene etiqueta de cierre | A. comunes src noresize scrolling frameborder marginwidth marginheight |
|||||||
| <noframes> | Si el navegador de internet usado en el ordenador o móvil no supiera mostrar contenidos con <frameset> podremos usar esta etiqueta para, en esos casos, ofrecer un contenido alternativo para mostrar. | ||||||||
| <iframe> | Esta etiqueta nos permite crear un frame (marco/ventana) en la que podremos cargar el contenido de un html. Es parecido al <frameset> pero en este caso el frame se muestra con el resto de la web. | A. comunes src scrolling frameborder width height marginwidth marginheight |
| Etiqueta: | Función: | Ejemplo: | Atributos: |
| <!-- --> | Permite insertar comentarios ocultos. En ocasiones no se pueden introducir comentarios dentro de algunas etiquetas o estas no hacen su función correctamente, por ejemplo esto sucede con la etiqueta <script> | <!--La etiqueta b sirve para poner el texto en negrita--> | |
| <hr> | Dibuja una línea o regla horizontal, no tiene etiqueta de cierre. | color | |
| <background> | Nos permite colocar una imagen como fondo de la página web. | <background="images/wallpaper.jpg"> | |
| <fieldset> | Esta etiqueta aunque esta orientada para formularios nos puede ser útil para mostrar el contenido que queramos con un ligero borde alrededor. |
|
A. comunes |
| Código | El contenido del enlace permite cambiar los colores de la barra de scroll, no en todos los navegadores funciona. Se coloca dentro de head. |  |
| Atributo: | Función: | Ejemplo: | Codigo del ejemplo: | ||||||||||||
| Atributos comunes: | |||||||||||||||
| id | Permite dar un nombre unico a cada elemento para poder hacer referencia a él. | <img id="imagen1" src="img/map/naranja.gif"></img> <a id="urlgoogle" href="http://google.com/">Pulse aquí</a> |
|||||||||||||
| title | Permite agregar una pequeña descripción para que al pasar el ratón por encima se muestre. |  |
<img title="Lapiz naranja" src="img/map/naranja.gif"></img> | ||||||||||||
| class | Asigna un nombre de clase. | ||||||||||||||
| style | Define un estilo visual para el elemento. | ||||||||||||||
| Atributos específicos: | |||||||||||||||
| Atributo: | Función: | Valores posibles: | Ejemplo con su correspondiente etiqueta: | ||||||||||||
| align | Permite alinear el texto a la izquierda, centro o derecha | left center right |
izquierda centro derecha |
||||||||||||
| behavior | Permite definir que efecto de movimiento ha de tener el texto. | scholl slide alternate |
|||||||||||||
| bgcolor | Permite cambiar el color del fondo, podemos usar el nombre en ingles o el código hexadecimal correspondiente. | Mirar tabla | |||||||||||||
| border | Permite elegir el grosor del borde, 0 seria sin borde. | 0 - ~ | |||||||||||||
| cellspacing | Define el espacio entre celdas | 0 - ~ |
|
||||||||||||
| color | Permite cambiar el color del texto o de <hr> | Mirar tabla | rojo azul verde | ||||||||||||
| cols | Hace la división del <frameset> en columnas. | Número de pixeles: 0 - ~ Porcentaje: 0% a 100% El resto: * |
|||||||||||||
| colspan | Indica el número de columnas que ocupará la celda. | 0 - ~ |
|
||||||||||||
| coords | Son un grupo de valores que determinan las coordenadas de un objeto, se usa en los mapas de imágenes. | ||||||||||||||
| direction | Sirve para definir la dirección del movimiento | left right down |
|||||||||||||
| face | Permite cambiar el tipo de letra que se usara. | arial times new roman comic sans ms etc. |
arial times new roman comic sans ms |
||||||||||||
| frameborder | Permite elegir el grosor del borde, 0 seria sin borde. | 0 - ~ | |||||||||||||
| height | Indica la altura del elemento. | 0 - ~ | |||||||||||||
| href | En el introduciremos el enlace a una página web o a una zona de nuestra página haciendo referencia con el id. | Enlace externo Enlace interno |
google Subir hasta el titulo |
||||||||||||
| marginheight | Define el margen vertical que queramos que haya dentro del frame. | Número de pixeles: 0 - ~ Porcentaje: 0% a 100% |
|||||||||||||
| marginwidth | Define el margen horizontal que queramos que haya dentro del frame. | Número de pixeles: 0 - ~ Porcentaje: 0% a 100% |
|||||||||||||
| noresize | Hace que el visitante no pueda cambiar el tamaño de las divisiones a través del ratón. | ||||||||||||||
| rel | Describe la relación que existe entre el documento actual y el recurso de destino. | ..descripción.. | |||||||||||||
| rows | Hace la división del <frameset> en filas. | Número de pixeles: 0 - ~ Porcentaje: 0% a 100% El resto: * |
|||||||||||||
| rowspan | Indica el número de filas que ocupará la celda. | 0 - ~ |
|
||||||||||||
| scrollamount | Especifica la cantidad de pixeles que queramos que se desplace el texto en cada movimiento. | 0 - ~ | |||||||||||||
| scrolldelay | Especifica la velocidad a la que queramos que se desplace el texto, mientras menor sea el número más rapido ira. | 0 - ~ | |||||||||||||
| scrolling | Especifica si queremos que aparezcan las barras de scroll, podemos elegir tres valores. | yes no auto (predeterminado) |
|||||||||||||
| shape | Especifica la forma de la figura a delimitar para la etiqueta <area>. | default (toda la región) rect (rectangulo) circle (circulo) poly (poligono) |
|||||||||||||
| size | Permite cambiar el tamaño del texto | Del 1 al 7 O con +1,+2,-3,-5, etc. |
1 2 3 4 5 6 7 | ||||||||||||
| src | Define la ruta en la que se encuentre el elemento | ||||||||||||||
| target | Especifica en que zona de la pantalla se ha de abrir el enlace, si no lo ponemos por defecto se abrirá a pantalla completa, si lo usamos podemos elegir en un determinado frame o en una ventana nueva. | Ventana nueva: _black Determinado frame: (id de nuestro frame) |
|||||||||||||
| type | Indica el símbolo a mostrar | disc (por defecto) circle square |
|
||||||||||||
| usemap | Especifica el mapa de imagen al cual este elemento esta relacionado. | ||||||||||||||
| valign | Especifica la alineación vertical. | top bottom |
|
||||||||||||
| value | Indica el número por el que ha de empezar a numerar. | 0 - ~ |
|
||||||||||||
| width | Indica la anchura del elemento. | 0 - ~ | |||||||||||||
| Caracter: | Codigo: | Color: | Nombre: | Codigo: | |
| espacio | | Black | #000000 | ||
| < | < | Green | #008000 | ||
| > | > | Silver | #C0C0C0 | ||
| & | & | Lime | #00FF00 | ||
| © | © | Gray | #808080 | ||
| ª | ª | Olive | #808000 | ||
| « | « | White | #FFFFFF | ||
| » | » | Yellow | #FFFF00 | ||
| µ | µ | Maroon | #800000 | ||
| º | º | Navy | #000080 | ||
| € | € | Red | #FF0000 | ||
| ☺ | ☺ | Blue | #0000FF | ||
| ☻ | ☻ | Purple | #800080 | ||
| ● | ● | Teal | #008080 | ||
| ☏ | ☏ | Fuchsia | #FF00FF | ||
| ← | ← | Aqua | #00FFF | ||
| ↑ | ↑ | Orange | #FFA500 | ||
| → | → | ||||
| ↓ | ↓ | ||||
| ↖ | ↖ | ||||
| ↗ | ↗ | ||||
| ↘ | ↘ | ||||
| ↙ | ↙ |