Desarrollado por Tim Berners-Lee en 1990, HTML es la abreviatura de Hypertext Markup Language. HTML se utiliza para crear documentos electrónicos , llamados páginas, que se muestran en la Web. Cada página contiene varias conexiones con otras páginas llamadas hipervínculos. Todas las páginas web que usted puede ver han sido escritas utilizando alguna de las versiones de HTML.
El código HTML garantiza el formato adecuado del texto y las imágenes para su navegador de Internet. Sin HTML, un navegador no sabría cómo mostrar el texto o cargar imágenes u otros elementos. HTML también proporciona una estructura básica de la página, sobre la que se superponen las Hojas de Estilo en Cascada (CSS) para cambiar su apariencia. Se podría pensar en HTML como los huesos (estructura) de una página web, y en CSS como su piel (apariencia).
Contenido
Estructura básica de HTML
Por ejemplo, las páginas web más básicas construidas con HTML pueden contener:
- <html>: Marca el principio y el final de un archivo HTML.
- <head>: Marca el comienzo y el final de la información de la cabecera de la página web.
- <title>: Etiqueta el título que debe aparecer en la barra de título del navegador.
- <body>: Marca el comienzo y el final del contenido de la página web.
- <h1> a <h6>: Tamaños de los encabezados en todo el documento desde grandes (h1) hasta muy pequeños (h6).
- <p>: Inserta un salto de párrafo (un espacio entre líneas).
- <br>: Inserta un salto de línea (sin espacio entre líneas).
- <b>: Pone en negrita el texto entre las etiquetas.
- <em>: Pone en cursiva el texto entre las etiquetas.
- <img src>: Inserta una imagen donde exista esta etiqueta.
- <a href>: Inserta un enlace a otra página web dentro del documento
No hace falta tener grandes conocimientos de programación para crear tu propia página web. De hecho, puedes abrir el Bloc de notas ahora mismo, escribir un texto sencillo y guardarlo como un archivo .html. Y esta podría ser la primera página web que creas, y todo lo que necesitas es tu propio PC.
El siguiente es un ejemplo de un archivo HTML muy sencillo:
<!DOCTYPE html> <html> <title>Ttiulo de la pagina Web</title> <body> <h1>Esto es la Cabecera</h1> <p>Esto es el primer parrafo<br> Y esta es la segunda linea<br></p> <p>Aqui tenemos otro parrafo</p> </body> </html>
Esta es una breve explicación sobre cómo funcionan estas marcas de hipertexto:
- La primera línea indica al navegador que el documento está en formato HTML.
- El título de la página encerrado por <title> y </title> establece la página web para que el navegador la muestre como «Título de la página web».
- La sección encerrada con <body> y </body> indica al navegador que estas líneas contienen el contenido a mostrar en la página web.
- El encabezado encerrado con las etiquetas <h1> y </h1> crea «Esto es la Cabecera» en la fuente de encabezado más grande disponible en HTML.
- Las etiquetas <p> y </p> insertan un espacio después de la etiqueta.
- La etiqueta <br> inserta un único salto de línea después de esa frase.
- </html> termina el documento, y la página web dejará de cargarse en este punto.
Para visualizar este ejemplo solo debes guardar el documento de texto con formato .html y abrirlo en tu navegador. Como puedes ver, es sencillo crear una página web. Todo lo que necesitas es crear un archivo HTML y cargarlo con tu navegador.
Cómo funciona HTML
Lógicamente, la mayoría de las páginas no se almacenan en tu ordenador. En su lugar, se almacenan en servidores web en Internet. Así, cuando visitas un artículo u otro contenido en cualquier sitio web, el servidor envía a tu navegador el archivo .html que tiene el contenido de esa página.
Puedes ver el código HTML de cualquier página web en el navegador Chrome haciendo clic con el botón derecho del ratón en cualquier lugar de la página y seleccionando “Ver código fuente de la página».
Esto le mostrará el código detrás de la página web. Podrás ver que es un archivo HTML por la primera etiqueta en la parte superior del archivo.
Sin embargo, también podrás observar que el código fuente contiene otro tipos de etiquetas que no son en absoluto etiquetas HTML.
Scripts incrustados en archivos HTML
Un ejemplo de esto, es que puedes ver código que llama a archivos .php o .js. Se trata de scripts PHP y Javascript que permiten que las páginas web dinámicas carguen contenidos diferentes en función de las entradas del usuario o de la salida de otros scripts que se ejecutan en el servidor web o en el navegador, y entregan contenidos en el mismo archivo HTML que lee el navegador.
Dado que el HTML es un método «estático» utilizado para dar formato al contenido de una página web, los diseñadores de páginas web necesitan una forma más dinámica de cambiar el contenido de la página en función de los lugares en los que los usuarios pasan por encima o hacen clic.
Los navegadores pueden leer e interpretar el código Javascript, alterando el formato u otros elementos de una página web en función de la interacción del usuario.
Por ejemplo, así es como los menús de una página cambiarán de color cada vez que se pase el ratón por encima de cada elemento del menú.
El código PHP incrustado en la página web permite que cosas como los botones dinámicos funcionen correctamente. Por ejemplo, un botón de comentarios, puede estar impulsado por un código PHP que se ejecuta en el servidor y que entregará los comentarios publicados.
PHP también permite a los desarrolladores de la web crear funciones innovadoras, como el desplazamiento infinito, que sigue cargando nuevos artículos a medida que se desplaza por la página principal del sitio.
Gracias a los modernos lenguajes de scripting, las páginas web de hoy ya no son sólo estáticas, que es lo único que permite el código HTML.
Otras etiquetas HTML
Si estás preparado para empezar a crear tus propios archivos HTML, necesitarás saber cómo utilizar las etiquetas HTML más comunes, además de las básicas detalladas anteriormente.
A continuación se presentan algunos ejemplos de otras etiquetas HTML que puedes utilizar cuando programes tus propias páginas web.
HREF para insertar enlaces.
Para incrustar un enlace dentro de su página web, utilice un href. A continuación un ejemplo:
<a href=”https://www.infranetworking.com/”>Ingresa a Infranetworking</a>Esto enlazará el texto «Ingresa a Infranetworking» con el enlace URL que quieras incluir entre comillas dobles después de «href=» en este caso Infranetworking.com.
IMG SRC para insertar imágenes.
Puedes insertar imágenes en una página web utilizando img src.
<img src="mi-imagen.jpg" alt="mi foto de perfil" style="width:150px;height:120px">Esto extraerá la imagen mi-foto.jpg del servidor web y la mostrará en la página donde hayas colocado esta etiqueta, con un ancho de 150 píxeles y un alto de 120 píxeles.
El parámetro alt muestra el texto «mi foto de perfil» en los navegadores que no pueden mostrar la imagen. Si no incluyes el parámetro «style», la imagen se mostrará con su resolución original, que puede ser demasiado grande o demasiado pequeña para el área de la página donde la estás insertando.
UL y OL para crear listas
Si desea utilizar viñetas o listas numeradas en su contenido, hay dos etiquetas que le permiten hacerlo.
El siguiente código insertará una lista no numerada (unnumbered list):
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
Usar <UL> en el comienzo de la lista y </UL> al final de la lista. Encierra cada elemento dentro de las etiquetas <LI> y </LI>.
Puede utilizar el mismo método para una lista numerada utilizando <OL> que quiere decir “Lista ordenada” (Ordered List):
<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>
Insertar tablas.
Los diseñadores web solían utilizar grandes tablas para dar formato a las páginas web. Pero con la llegada de las hojas de estilo en cascada (CSS), esto ya no es necesario.
En su lugar, los archivos CSS se almacenan en el servidor web, y las páginas HTML llaman a esos archivos para determinar cómo formatear cosas como los márgenes, el tamaño y los colores de las fuentes, etc.
Sin embargo, las tablas siguen siendo útiles para mostrar distintas cosas, como datos por ejemplo.
Para insertar una tabla, encierra el principio del contenido con <TABLE> y termina con </TABLE>.
Encierra cada fila con <TR> y </TR>, y cada cabecera de columna individual con <TH> y </TH>. Y cada celda regular se encierra con <TD> y </TD>.
Aquí un ejemplo:
<table border=1> <tr> <th>Nombre</th> <th>Apellido</th> <th>Numero de telefono</th> </tr> <tr> <td>Angel</td> <td>Aldecoa</td> <td>000-111-222</td> </tr> </table>
Conclusión
Con sólo estos elementos básicos, puedes crear páginas web estáticas útiles para mostrar tu contenido en Internet. Todo lo que necesitas si quieres que sea público y visible para el mundo es contratar alojamiento web y almacenar tus archivos en la carpeta dentro de tu cuenta. De hecho, lanzar tu propio sitio web es sorprendentemente fácil, especialmente si optas por utilizar una plataforma de gestión de contenidos como WordPress.
