El html es un conjunto de etiquetas que se usan para formatear el contenido de una página web. Hay una etiqueta que se pone al principio del texto a formatear y otra al final (con una barra /) y estas tienen ciertos atributos: <etiqueta atributo="valor">Texto</etiqueta>. Los navegadores interpretan esas etiquetas y visualizan el contenido transformado de la página web. No se necesita ningún programa concreto para crear una página web, se puede usar un editor de texto como el "Notepad" de Windows, o el "vi" de Linux.
Como sugerencia, te recomiendo algunos libros de html, libros de css, libros de javascript y libros de Java que sirven para entrar en detalle en estas materias.
La estructura básica de un documento html consta de una cabecera (entre las etiquetas <head> y </head>) y un cuerpo (entre las etiquetas <body> y </body>). En la cabecera se incluye el título, los ficheros de estilos css, y las etiquetas <meta> que son utilizadas por los motores de búsqueda como Google.
Los archivos que contienen etiquetas html deben tener la extensión .html (aunque .htm se acepta también). Hay que tener especial cuidado con los nombres de los ficheros, ya que los servidores web son sensibles a minúsculas y mayúsculas.
Mira el para ver las etiquetas básicas que definen la estructura de una página web.
Las etiquetas <h1> son encabezados primarios (también hay etiquetas <h2>,<h3>,etc) y la etiqueta <p> es un párrafo de texto. Aprieta el botón para ver el resultado de los ejemplos en el visor HTML.
Pulsa las teclas Mayus+Tab para indentar cada línea del editor html. O selecciona todo el texto y haz lo mismo.
Todo el contenido visible para el usuario debería ir entre la etiqueta <body> y </body>. Html5 contiene un número de etiquetas considerable. Es importante como recomendación: escribirlas en minúsculas (excepto DOCTYPE), cerrar siempre las etiquetas, poner comillas en los atributos de las etiquetas, no omitir las etiquetas básicas (html, head, body).
Hay un conjunto de etiquetas que se utilizan a menudo:
Sin duda los enlaces son una parte indispensable de la web y del html original. Habitualmente el texto en el que se puede hacer click se muestra subrallado al pasar el ratón por encima. Al hacer click sobre un enlace saltamos a otra página web, ya sea de la misma web o a otra web diferente. El atributo href="destino" define la dirección de la página de destino. El atributo target="_blank" especifica que la página web tiene que abrirse en un nueva pestaña. El texto que actúa de enlace va entre la etiqueta <a> y </a>.
Es interesante remarcar que podemos insertar una imágen en vez de un texto para que sea un enlace.
Mira el Ejemplo 2 para ver etiquetas a.
A parte de poner el texto en negrita se puede formatear el texto con otras etiquetas:
Texto más pequeño: <small>texto</small>. texto
Texto en cursiva: <i>texto</i> texto
Texto subrallado: <u>texto</u> texto
Texto emfatizado: <em>texto</em> texto
Texto que ya no es correcto: <s>texto</s> texto
Texto que simula la salida de un programa: <samp>texto de un programa</samp> texto de un programa
Texto de código fuente de lenguajes o programas: <code>var i=0</code> var i=0
Texto pre-formateado: <pre>texto</pre> Es un tipo de etiqueta que conserva los saltos de línea y tabs del texto que engloba.
Texto con saltos de línea Y tabs
Exponentes y sufijos. Se indican con: <sup>texto</sup> y <sub>texto</sub>. Por ejemplo x3 y O2
Los acentos (tildes) y los carácteres especiales se definen con un código entre & y ;. Por ejemplo: á equivale a una á
á es á
é es é
í es í
ó es ó
ú es ú
ñ es ñ
(espacio en blanco) es
< es <
> es >
& es &
" es "e;
© es ©
Las listas son unos de los elementos html más utilizados en las páginas web. Se pueden definir listas ordenadas, no ordenadas, etc. Son las piezas básicas para elaborar los menús.
Las listas no ordenadas se crean con la etiqueta <ul> y cada elemento se crea con la etiqueta <li>. Las lista ordenadas se crean con la etiqueta <ol>.
Aunque antiguamente existía el atributo "type" para cambiar el tipo de viñeta (circle, square, disk) de la lista no ordenada, en html 5 se recomienda hacerlo con una propiedad css (list-style-type: disc). Sin embargo en las listas ordenadas existe todavía el atributo "type" para indicar el tipo de viñeta (un número, una letra, un número romano), incluso se puede indicar que realice la cuenta en el orden inverso con el atributo
Las listas se pueden anidar entre sí, insertando los bloques de <ul>...</ul> dentro de un <li> (o insertando bloques de <ol>...</ol>)
Mira el Ejemplo 3 para ver las listas.
A veces es necesario poner un comentario en el código html para hacerlo más legible o para futuros cambios en la página web. Para ello se utiliza la etiqueta:
<!-- comentario -->
Se utiliza <!-- al inicio de un bloque de etiquetas html que no queramos mostrar y se finaliza con -->. Hay que comentar que se puede agregar estos guiones a las etiquetas habituales para que se muestren como un comentario y no se renderizen en la página final. Por ejemplo:
<!--p>Texto comentado de un párrafo</p-->.
Todo lo que hemos comentado anteriormente hace referencia al texto y a su formato. Pero un parte muy importante de las páginas web es el tema gráfico: las imágenes, y los colores. Podemos incluir imágenes con la etiqueta <img src="ruta de la imagen" > y crear mapas de imagen con <map> y <area> e incluso usar un lienzo para dibujar gráficos con la etiqueta <canvas>. Ademá tenemos la posibilidad de utilizar SVG (ver post) para dibujar gráficos con etiquetas XML.
Para usar un color en html se puede utilizar el nombre en inglés del color o un código hexadecimal (#aabbcc) que define la cantidad de Rojo,Verde y Azul del color (va desde 0 a 255 en decimal o desde 0 a FF en hexadecimal). Así pues el color blanco sería #FFFFFF y el negro #000000. El rojo sería #FF0000, el verde #00FF00, el azul #0000FF, el gris #CCCCCC, etc...
Antiguamente se utilizaba bastante el atributo "bgcolor" para definir los fondos coloreados en algunas etiquetas, pero hoy en día se usan los estilos css para definir el aspecto gráfico. De todos modos prueba a poner un color de fondo de la página modificando la etiqueta <body bgcolor="#AABBCC">.
Del mismo modo antiguamente se especificaba el borde de una imágen con el atributo border="1" pero actualmente se suelen usar los estilos css para ello.
Otros atributos de la etiqueta <img> que se suelen utilizar son el ancho width="100" y alto height="100" de una imágen. Se definen en píxeles.
Existe un atributo muy importante de cara al SEO (Optimizació para motores de búsqueda), y ese es alt="Bombilla idea" que define un texto alternativo a la imagen. Antiguamente se usaba ese texto alternativo cuando los navegadores no podían mostrar la imágen. Pero actualmente se usa principalmente para el SEO.
Otro atributo interesante es title="Tengo una idea" que muestra un pequeño tooltip al pasar el ratón por encima de la imágen..
Mira el Ejemplo 4 para ver esta etiqueta img y sus atributos.
Entre los formatos más usados podemos encontrar: jpg png y gif.
Posiblemente las tablas html sean las etiquetas más antiguas del html original. Actualmente su uso para organizar elementos ha disminuido en frente de los "div", ya que antiguamente se utilizaban para montar todo el esqueleto en bloques de la página web. Gracias a frameworks como Bootstrap, toda esta estructura y organización de contenido, se realiza de un modo más sencillo e intuitivo.
Las etiquetas que definen una tabla son <table> y </table>. Para insertar las filas se usa <tr> y </tr>. Para las columnas se usa <td> y </td> y para los encabezados <th> y </th>.
Habitualmente primero se crea la etiqueta <table> y las filas necesarias con <tr>. Luego se van añadiendo las columnas con <td>. Y si es necesario se añaden encabezados.
Las tablas se pueden alinear a derecha e izquierda o centrarse mediante el atributo align (left - izquierda, center - centrado, right - derecha). Para el contenido de las celdas también se usaba el atributo valign (top - arriba, middle - centro, bottom - abajo). Aunque este último ya no es soportado en html 5.
Las tablas también tienen el atributo border="1" que establece el tamaño del borde.
También se puede establecer el ancho de una tabla con el atributo width="50%", su valor en píxeles o en %.
Otro atributo interesante es nowrap, que se indica a nivel de <td>. Si se especifica entonces el texto no saltará de línea para adecuarse al ancho de la celda.
Es posible especificar la separación entre celdas mediante el atributo cellspacing="2" y la separación entre el contenido y el borde de la celda con el atributo cellpadding="2".
Por último existe el atributo rowspan="2" a nivel celdas para ocupar varias filas, y su complemento colspan="3" para ocupar varias columnas.
Cabe destacar que las tablas se pueden anidar, creando etiquetas <table> dentro de etiquetas <td>.
Inserta el Ejemplo 5 para ver una tabla:
El <canvas> es una nueva etiqueta de html 5 que se utiliza para dibujar en ella, habitualmente mediante Javascript. Se define mediante el ancho, el alto y un atributo "id" al que se hace referencia desde Javascript. El funcionamiento se sale del ámbito de este tutorial y lo veremos en sucesivos tutoriales.
Otra etiqueta para dibujar gráficos vectoriales es <svg>. Se define un ancho y un alto y dentro de esa etiqueta se van escribiendo las diferentes etiquetas que representan ciertas formas geométricas (rect, circle, polygon, ellipse, etc) para dibujar figuras complejas.
Visualiza el Ejemplo 6 para ver un gráfico vectorial.
En html 5 se crean unas nuevas etiquetas pensadas para recursos de video y de audio. En relación al video, el formato MP4 es ampliamente utilizado. En el caso del audio, el formato MP3 es que más se utiliza. Para definir un recurso de video se usa la etiqueta <video> con los atributos "width" y "height". Dentro se especifica la etiqueta source con el atributo src="mivideo.mp4" y type="video/mp4" para definir el archivo que se va a reproducir.
En el caso del audio se usa la etiqueta <audio> y dentro se especifica la etiqueta <source> con el atributo src="blues.mp3" y type="audio/mpeg".
Mira el Ejemplo 7 para ver una muestra de audio
Los estilos posicionan, dan color y tamaño a los elementos html. Los estilos css se pueden definir:
Dentro de las páginas web se pueden utilizar css que permiten modificar el color, el tamaño y la posicón de los elementos. Para definir el estilo de una etiqueta tenemos que definir esa etiqueta (sin el < y >) y entre llaves especificar sus propiedades y sus valores. Las propiedades y valores se separan por ; y el valor se asigna mediante : Cuando se define un estilo de este modo se aplica a todas las etiquetas de la página web (lo verás cuando pinches en el botón "Previsualizar"). Un caso especial es la etiqueta a que tiene pseudo-selector que sólo aplica a cuando esa etiqueta cumple ciertas condiciones, como el hover (pasar por encima).
Pincha para ver un ejemplo y prueba tus propios estilos
Estas etiquetas se indican en el encabezado de una página web (head) y definen ciertas características de las páginas web. No se muestran en el texto de la página pero son útiles para los motores de búsqueda. A continuación vamos a enumerar algunas:
<meta name="refresh" content="10"> - Sirve para refrescar la página cada 10 segundos.
<meta name="author" content="Jose"> - Sirve para indicar el autor de la página web.
<meta name="description" content="Tutorial completo de html 5"> - Sirve para indicar una descripción de la página web.
<meta name="keywords" content="tutoriales,html"> - Sirve para indicar las palabras clave.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - Sirve para indicar el tamaño de la ventana de navegación para pc, tablet, smartphone.
El uso de los frames ha quedado obsoleto en html 5. Antiguamente se usaban para definir la estructura de la navegación: con un frame a la izquierda para el menú, un frame arriba para la cabecera y un frame central para mostrar el contenido. Hoy en día gracias a las etiquetas <div> y a frameworks como Bootstrap, esto ya es cosa del pasado. Mira el tutorial sobre Bootstrap.
No obstante aún queda una etiqueta llamada <iframe> que tiene cierta utilidad. Inicialmente era un frame flotante que se introdujo en Internet Explorer. Se puede insertar en cualquier sitio de la página web. Su uso es bastante común para insertar videos de Youtube en las webs:
<iframe width="300" height="200" src="https://www.youtube.com/embed/rQh0Kt0bpAw?feature=player_embedded" frameborder="0" allowfullscreen></iframe>
Hubo un tiempo donde los applets Java eran los reyes del contenido interactivo en las páginas web. Antiguamente la etiqueta <applet> permitía insertar applets de Java en una página web, pero su uso ha quedado obsoleto en html 5. Actualmente se puede realizar usando las etiquetas <object> o <embed>. La etiqueta <embed> sirve para incrustar contenido interactivo (plugin) como Flash o Applets Java. Pero como decimos tanto Flash como los applets de Java han quedado bastante en desuso, excepto para temas muy puntuales. La etiqueta <object> permite insertar contenido multimedia tal como audio, applets, ActiveX, flash, video, etc...
Sin duda alguna los formularios forman parte de los genes del html. Ya sea para enviar comentarios, buscar texto, registrarse, identificarse, enviar datos de contacto, etc... los formularios son la piedra angular para realizar esas funcionalidades.
La etiqueta necesaria para crear un formulario es <form> y </form>. Existe desde las primeras versiones del html. Uno de los controles más utilizados es el campo de texto, que se crea con la etiqueta <input type="text"> y sirve para introducir cualquier tipo de texto que pueda informar el usuario. Existen además otros controles como la casilla de verificación, las listas desplegables, los botones de envío, o las areas de texto. Todos estos controles se crean con la etiqueta <input> y un atributo type="text" o "radio" o "submit".
Un tutorial en detalle sobre los formularios en html 5 se sale del ámbito de este tutorial. Continuará...
Las etiquetas html 5 que se han descrito en los apartados anteriores nos permiten controlar varios aspectos del texto y del apartado multimedia, pero html 5 es mucho más que eso. Gracias a los scripts podemos crear contenido dinámico, que es una de las piezas clave a la hora de desarrollar aplicaciones web. Para ello es importante continuar el aprendizaje con el lenguaje Javascript y el CSS3.