Saltar al contenido
Páginas Web 24

¿Cómo crear una página web en HTML?

Hacer una web en HTML, se asemeja a elaborar cualquier otro documento con cualquier editor de texto. ¿Qué quiere decir esto? Prácticamente consiste en establecer un fichero con extensión “.html” y posterior a esto poder editarlo.

Ahora bien, antes de proponerte y profundizar sobre cómo crear una página web en HTML, debes preguntarte si crear este tipo de páginas es realmente lo que necesitas, si no estás seguro, aquí te informaremos todos los detalles del tema para cubrir esas dudas y puedas así tomar una decisión conveniente.

Existen dos vías de crear una web en HTML

La primera es la vía artesanal, mejor dicho a la antigua, que trata de componer tu web a base de crear a mano el código, de cada una de las páginas que van a formar parte de tu web, para después entrelazarlas entre sí.

La segunda es la vía moderna, que es donde usas un programa CMS, este software está preparado para que cualquier persona pueda crear y administrar su sitio web, sin tener que tocar el código. Ahí varios CMS en el mercado y tú puedes escoger el que más se adapte a tus requerimientos.

Estos son los más conocidos:

Los CMS para sitios web en general:

  • Drupal
  • WordPress
  • Joomla
  • Blogger

Los CMS especializados en tiendas on-line:

  • Shopify
  • Prestashop
  • WordPress + WooCommerce
  • Magento

Pero el punto es aprender a crear un sitio html, pero para eso tenemos que adentrarnos en los orígenes de este lenguaje de programación. Para eso quiero hablarte un poco de su historia.

Antes de continuar, te presento otras formas de crear sitios web

Aquí puedes ver algunas de las más populares, Haz click en la que mas te guste

Historia de HTML

La historia del lenguaje HTML se debe al físico Tim Berners-Lee ¿Y quién era él? Un trabajador de la Organización Europea para la Investigación Nuclear (CERN) quien en el año 1989 propuso este lenguaje junto con el protocolo HTTP.

¿Cuál era su finalidad? Muy sencillo, crear un medio donde se pudiera compartir cualquier tipo de información, entre distintos físicos que en esa época trabajaban para todo el mundo. Y luego se convirtió en una de las mejores herramientas para crear sitios web gratis.

¿Cuáles fueron los orígenes HTML?

En el año 1991 se publicó el primer documento de manera formal, sobre la estructura del HTML, que llevaba por nombre “HTML Tags”. ¿De qué trataba? De un texto que explicaba detalladamente las etiquetas que se usan en este lenguaje. Si quieres leerlo aún se encuentra disponible en el internet.

Pero en resumen, el documento explicaba que los sitios web con HTML utilizan etiquetas que sirven de apertura y cierre, claro no en todas, pues hay algunas excepciones; Estas etiquetas abren colocando corchetes angulares y cierran de la misma manera pero  anteponiendo un /. Ejemplo <Title></Title>.

¿Para qué sirve el HTML?

Básicamente el HTML sirve para representar la estructura básica de una página web y organizarla de  tal manera que se muestre coherentemente su contenido no solo para el usuario, sino también para los navegadores, al mismo tiempo que te permite incluir links hacia otros documentos o páginas. Sus siglas significan “Lenguaje de Marcado de Hypertexto”.

En pocas palabras el HTML es un lenguaje de marcado descriptivo, que se escribe a manera de etiquetas o tags, y esto hace definir la estructura de una página web, al mismo tiempo que su contenido se muestre en imágenes y/o textos. Es decir describe la apariencia que tendrá tu página.

¿Qué versiones hay de HTML?

Para hacer una página web en HTML, existen 5 versiones, la primera en salir fue HTML 1, sin embargo según la historia no fue considerada una estándar. Luego en el año 1995 llega HTML 2 que es considerado como la primera versión de este lenguaje, en esta no se soportaba tablas, y los elementos de body, html y head era opcional.

Luego en 1997 se lanzó la HTML 3.2 el cual venia incorporado los applets de java y texto que fluyen alrededor de las imágenes. Posterior en el año 1998 lanzan HTML 4.0, entre sus novedades estaba la posibilidad de incluir pequeños scripts en las ciberpáginas, además de tener tablas complejas y mejoras en el formulario.

¿Qué es HTML5? y ¿Para qué sirve?

¿Qué es? Es la quinta y última versión para crear sitios web con HTML, sus novedades se basan en que traen nuevas etiquetas, que conllevan ahora a conseguir que estos elementos no solo aporten significado si no contenido. Y además nuevas APIs que permiten nuevas funcionalidades avanzadas de Javascript.

¿Para qué sirve? Nos permite tener una mayor interacción entre nuestras páginas digitales, igualmente con el contenido media que son el video, audio, entre otros. Esta nueva versión se basa en el diseño más común de las páginas, para llegar a un estándar de etiquetas que realizan el mismo papel pero más rápido y eficiente.

Ventajas de HTML5

Entre las principales ventajas que tiene esta versión de HTML,  es la nueva estructura mejorada de sus etiquetas. Además puedes incluir etiquetas de audio y video sin generar errores,  también tiene la capacidad de realizar ejecuciones offline de las páginas creadas con este código HTML5.

Al mismo tiempo también puedes incluir una nueva etiqueta de dibujo sobre la página web, que son llamadas canvas que es como dibujar en Paint. Por otro lado elimina el total de las etiquetas obsoletas y por último ofrece la posibilidad de obtener un código más fácil y limpio.

HTML5 tutorial

En este punto empezaremos a hablar sobre un pequeño tutorial sobre páginas web hechas con HTML5, ya que este es un lenguaje basado en etiquetas, no es un lenguaje de programación. Si no que por medio de etiquetas ir construyendo sitios web, que por medio de editores de texto podemos hacerlo, un ejemplo de esto es el block de notas.

¿Cómo usar HTML5?

  • Lo primero que debes abrir es un editor de texto, cualquiera que tengas, en este caso puede ser el Bock de Notas o WordPad, el de tu preferencia.
  • Luego en la computadora, abres una carpeta que contenga el nombre de la Página web que realizaras.
  • Una vez culminado el paso anterior, te vuelves a parar en el editor de texto que utilizaras y pegas la siguiente estructura:

<!doctype html>
<html>
<head>
<meta charset=»utf-8″/>
<title>Título de la web</title>
</head>
<body>
Contenido de la web
</body>
</html>

Video que muestra como usar html5

Como podrás ver las etiquetas son fáciles, un menor que (<) que abre y un mayor que (>) que cierra. Rellenas toda la información que pidan las etiquetas y que requiera las páginas digitales que crearas. Y lo que se verá en la página es todo lo que este dentro de las etiquetas.

Procedes a guardar el documento dentro de la carpeta que creamos al principio, y al hacerlo asegúrate que sea guardado en formato HTML. Después abrimos la carpeta, y nos ubicamos en el archivo guardado y lo podemos ejecutar bajo cualquier navegador. ¡Listo así de sencillo! Básicamente debes dominar la estructura básica.

 Plantillas en HTML, Gratis y de Pago

Para finalizar el tema de cómo crear una web con HTML,  quiero que sepas que hay miles de plantillas en este lenguaje disponibles, tanto gratis como de pago, con diseños bellísimos y espectaculares que puedes utilizar.

Puedes comprar esta plantilla, optimizarla para el tipo de negocio y colocarla para que todos los posibles usuarios puedan verla. ¿Qué queremos decir? Que dispondrás de una página sencilla con imágenes y animaciones, por medio de la cual puedes recibir contactos de potenciales clientes.

Así mismo, si para las páginas web con HTML, empleas otros recursos como el posicionamiento SEO para buscadores, podrías recibir muchas visitas y por tal razón potenciales ventas. Pero, debes tener muy en claro que un sitio web en este lenguaje, no es para nada suficiente. Por eso tener conocimiento de programación en lenguajes como mySQL, PHP y Javascript, es de suma importancia si quieres que tu sitio web sea dinámico, en pocas palabras, si quieres que ofrezcas soluciones a las necesidades de tus potenciales clientes.

Todas las páginas web hoy en día usan HTML, ya que es el elemento esencial para dar formato a los contenidos. Pero te lo volvemos a aconsejar que no te limites únicamente a este. Amplia un poco tus conocimientos y veras que hay muchas más cosas que podrías hacer. Esperamos que este artículo te sirva para crear páginas web con HTML.

Crear páginas web en HTML, ¿Es gratis?

Utilizar el lenguaje HTML es gratuito y los editores de texto en donde creas el lenguaje son gratuitos de igual forma, algunos editores son mejores que otros. Básicamente, se crea el contenido, es decir, el texto de los títulos, los párrafos, los formularios HTML, entre otras cosas. Así como también las tags o etiquetas, que son necesarias para definir la estructura del documento HTML.

Igualmente para crear un sitio web en HTML, se puede hacer en modo texto trabajando directamente con el código, o de modo más visual y amigable con un editor especializado. Trabajar en estos editores suele parecerse a trabajar con Microsoft Word.

Crear desde cero con HTML5

HTML5 desde que lo lanzaron ha dado mucho de qué hablar, por las mejoras y novedades que ha traído consigo. Ya que ahora es mucho más fácil para un individuo crear una página digital con HTML5 desde cero, aprendiendo la codificación de manera más rápida.

Es importante resaltar que aquí te lo explicaremos en el siguiente orden:

  • Estructuración
  • Cabecera
  • Menú
  • Contenido
  • Barra lateral
  • Pie de página y los extras.

Estructuración básica de HTML5

Como podrás ver para crear páginas web gratis en HTML5, la estructura básica es como visualizas en la imagen de arriba. Ya que estas secciones ya tienen su propia etiqueta, ya identificadas como “Header” que es la cabecera, “Nad” para el menú, “section” que es el contenido. Y otras más como “Aside” para barra lateral y “Forte” como el pie de página.

Antes de dar estilo a las secciones, necesitas primero poder visualizar cada una de ellas. Y lo que debes hacer es colocar una línea de texto, en cada una de ellas ¿Para qué? Para poder hacerlas visibles con el siguiente código de CSS.

Colócale estilos a las secciones con CSS

Para las páginas web con HTML, tienes la herramienta de CSS, ya que esta le aportan estilos a las secciones, porque al principio todas se muestran en bloques, cosa que no debería ocurrir ni con la barra lateral, ni con la sección o cualquier otro. Existen muchos estilos, elige el que va con tu personalidad, solo tienes que buscar en internet: “hojas de estilos para HTML” . Y veras que pasaras de una página fea y aburrida, a algo espectacular con los códigos CSS.

HTML 5 Etiquetas

Ahorita te hablaremos de algunas de las etiquetas que existen para crear tu página con  HTML. Te aconsejo que los tengas a la mano o las almacenes en algún lugar, para que puedas utilizarlas la hora de crear tu página. Obviamente te daremos solo algunas etiquetas, y aquí estan:

  • <Header> es la que permite mostrar la información introductoria de tu sitio, ejemplo: titulos, subtitulos, logos, entre otros.
  • <hgroup> es el que permite colocar varios títulos dentro del header, ejemplo h1, h2 y h3, sin afectar en ningún momento el SEO.
  • <nav> igual que la primera etiqueta, está diseñado para que coloques la botonera de navegación.
  • <section> es la que define el área de contenido dentro de la página web.

Otras etiquetas de HTML5 que debes tomar en cuenta

Otras etiquetas importantes también son <article> es la que define las zonas de contenido independiente. Al igual que <aside> que es donde vas a colocar cualquier contenido que no tenga relación con el objetivo central de la página.

Además <footer> es más que obvio, representa el pie de página y todo lo que debe contener él. Y por último <div> esta solo puedes usarla cuando necesitas una caja de objetivos con diseños gráficos o de significado semántico.

Las anteriores etiquetas no son las únicas, entre las novedades de esta versión también tenemos etiquetas de  audio, video, animación y otras más complejas. Aquí abajo te las pongo en detalle:

  • <video> obviamente para insertar videos sin necesidad de usar plugins.
  • <audio> igual que el del video, pero con formatos mp3.
  • <input> inserta cajas de texto y botones, como email.
  • <canvas> un área para dibujar y bitmaps con JavaScript.
  • <svg> para insertar animación y dibujos al estilo Flash.

Códigos de HTML5

A continuación sabrás  la recopilación de códigos HTML5 para crear tus páginas, estos códigos te permitirán incorporar pequeñas funcionalidades a tu página ya sea una estática, un blog, una tienda o cualquier otro tipo.

Estos códigos te ayudaran a ampliar la interactividad con el usuario. En pocas palabras transforma los documentos simples, en aplicaciones útiles para tus visitantes. La desventaja es que perjudica el tiempo de carga de la página.

Entre estos códigos te recomendamos:

·    Para que te libere de los copiones <BODY oncontextmenu=»return false» onselectstart=»return false» ondragstart=»return false»> </body>

·    Para mostrar al visitante un mensaje de alerta al ingresar al sitio <BODY onLoad=»alert(‘Bienvenido a mi Página Web. Disfruta el contenido’);» onUnLoad=»confirm(‘Gracias por tu visita, espero que no sea la última’);»>

·    Le coloca una marquesina al texto que quieras <center> <div class=»n»><p>    <b><font color=»#000000″ face=»georgia» size=»4″><marquee width=»400″ scrollamount=»5″ bgcolor=»#FFFFFF»>Aquí tu texto</marquee>    </font></b></p><center>

·    Coloca tu sitio web en movimiento de arriba abajo <marquee id=»ejemplo» direction=»up»>AQUI VA EL TEXTO QUE DESEES </marquee><a href=»javascript:void(0);» onclick=»getElementById(‘ejemplo’).direction=’down’;»>Hacia abajo</a>—<ahref=»javascript:void(0);»onclick=»getElementById(‘ejemplo’).direction=’up’;»>Hacia arriba</a>

HTML5 formularios

Hasta hace poco tiempo, un formulario tenía entre 4 o 5 campos, y debías usar javascript para hacerlos más funcionales. Pero en esta oportunidad vamos a hablar del nuevo formulario que presenta el HTML5, este te permite conceptualizar los datos que se ingresan y si usas otros dispositivos que te lo va a mostrar en pantalla.

En fin nos trae una gran cantidad de campos útiles para que puedas mejorar la experiencia del usuario cuando estén llenando tu formulario, no solo en los ordenadores como lo dije anteriormente, si no en cualquier dispositivo móvil que tengas, sea teléfono o Tablet.

Aparte de los campos básicos como el nombre y la fecha, mejoraron el manejo de los campos numéricos como son number y range, el campo de email, el campo de búsqueda, el cual funciona como texto, este aparece justo al escribir apenas accedes al sitio.

También está el campo para URLS que sirve para escribir una dirección web, por otro lado puedes seleccionar color, ya que te muestra una paleta decolores según el navegador o sistema operativo que uses. Y por último el teléfono de casa, solo funciona para dispositivos móviles, este te muestra el teclado virtual con el formato de teléfono.

Ejemplo de HTML 5

Te he recopilado una pequeña lista con ejemplo de sitios reales hechos en HTML5, espero que esto te dé una idea de lo que puedes crear.

  • El primer ejemplo es la página web W3haus.com.br, esta es una agencia de publicidad que ha implementado HTML5 para su sitio web.
  • El segundo ejemplo es Spokespedicabs.com, en esta web implementaron imágenes coloridas y animaciones.
  • El tercer ejemplo es Mcom/lookbook que es un tipo de blog donde venden accesorios desde relojes y ropa online.
  • El cuarto ejemplo es Rcom/ que es la página personal de un tenista muy famoso.

Revelaciones de HTML5 en Wikipedia 

Wikipedia define a el termino HTML5 en su página como la quinta versión del lenguaje básico de World Wide Web y HTML. Ellos especifican que en el existen dos variantes de sintaxis una clásica que es la HTML o también conocida como HTML5, y otra que es una variante conocida como XHTML o también conocida como XHTML5, es la primera vez que estas dos se han desarrollado en paralelo. Esta versión (XHTML5) según Wikipedia se publicó en octubre del año 2014, además el desarrollo de este lenguaje es marcado por W3C consorcio.

Nuevos elementos de HTML5 que revela Wikipedia

Obviamente este no es reconocido en versiones viejas de navegadores, debido a las nuevas etiquetas, por lo cual para disfrutar de todo el potencial del HTML5, tienes que utilizar la versión más nueva de tu navegador. Además dicen que el establece una serie de nuevos elementos y atributos que hacen resaltar los sitios web.

Estos son muy parecidos a las etiquetas antes mencionadas, como lo son <div> y <span>, pero lo importante aquí es que tiene un significado semántico. Ejemplo de esto <nav> que bloquea el sitio web y también el de <footer>.

Novedades de HTML5 que revela Wikipedia

Estas novedades del HTML5 son:

  • Te permite incorporar etiquetas de canvas 2D y también 3D, al mismo tiempo que audio y video, que muestra los contenidos multimedia.
  • Igual con las etiquetas puedes manejar grandes conjuntos de datos, como lo son Datagrid, Menú, Details y Command. Que permite generar tablas dinámicas que permiten ocultar, ordenar y filtrar contenido.
  • También mejora los formularios, como los datos de email, number, url, datatime, entre otros. Además de las facilidades para validar el documento sin usar Javascript.
  • Una nueva funcionalidad para arrastrar objetos como lo son las imágenes.

 

Video curso completo que explica como crear una página web con html5

Referencias:

Por favor, ayúdanos a difundir esta información a la mayor cantidad posible de personas. Solo haz clic en estos botones que veras aquí abajo y compártelo en alguna de tus redes sociales. Muchísimas gracias por tu ayuda, un abrazo.

error: Content is protected !!