El diseño web es una categoría dentro de la programación web que se encarga de modelar y crear la apariencia de los portales en Internet, es decir, de diseñar la plantilla que todos vemos y que sirve de intermediaria entre el usuario y el servidor.

Los lenguajes de programación son la principal herramienta utilizada para crear los sitios web. Con ellos se escribe un código que será interpretado por el servidor como una página web, y como tal, será mostrado a los usuarios.

HTML es uno de los lenguajes usados en el diseño web. Se trata de un lenguaje de marcado que funciona a través de etiquetas de hipertexto. Muchos informáticos se niegan a catalogar HTML como un lenguaje de programación, pero lo cierto es que es parte fundamental de la programación web en general y es la base de todo sitio en Internet o aplicación móvil.

Cualquiera puede aprender HMTL, es muy sencillo de entender. Tan solo con un bloc de notas podemos diseñar nuestra primera (y sencilla) página web. Solo debemos estructurar muy bien el código y guardar el bloc con la extensión .html en lugar del predeterminado .txt. Ejemplo: miprimeraweb.html.

Ejemplos de HTML

  • Ejemplo de etiquetas

<html> Abrir el documento. Cierra con </html>

<head> Cabecera del documento donde habrá información sobre la identificación de la web y más. Cierra con </head>

<body> Es el cuerpo del documento, donde va el contenido general. Cierra con </body>

<title> Para definir el título de una página.

<link> y <style> Van dentro del <head>, “Style” sirve para agregar estilos CSS a la web y dotar de otros recursos al HTML. Se usa <link>  para vincular un archivo.css, y con <style> se escribe el código directamente dentro del head en el documento HTML.

<h1>, <h2>, <h3>….<h6> Son encabezados que se ordenan según su tamaño, del 1 al 6.

<table>, <tr> y <td> Sirven para crear tablas y distribuir las secciones de la web. Ya poco se usan.

<div> Es un elemento “contendedor” de otras cosas. Dentro del DIV se puede agregar cualquier recurso HTML.

<a> Sirve para añadir enlaces y pueden tener atributos para que tenga un comportamiento determinado, como abrir el enlace en otra pestaña, otra ventana, etc.

<img> Se usa para añadir una imagen al documento.

<li>, <ol>, <ul> Sirven para crear listas ordenadas y desordenadas.

<p> Para crear un párrafo.

<i> Para añadir letras o palabras cursivas.

<b> Para caracteres o palabras en negritas.

<br/> Hace un salto de línea simple dentro de un párrafo o donde quiera que se coloque.

  • Estructura básica de una página con HTML

<html>

<head>

<title>Mi Primera P&aacute;gina</title>

</head>

<body>

&Eacute;sta es la primera p&aacute;gina que he creado.

</body>

</html>

Al usar “&” + vocal + “acute;” se agrega una vocal acentuada. Ejemplo: &aacute; = á.

  • Ejemplo de código HTML con Título 1 (H1), una imagen (IMG), tres párrafos (p), letras en mayúsculas (STRONG), un título 3 (H3), un salto de línea (BR), una línea recta (HR), una lista (UL-LI) y un enlace (A).

<HTML>

<HEAD>

<TITLE>Un t&iacute;tulo principal</TITLE>

</HEAD>

<BODY>

<H1>Otro t&iacute;tulo principal</H1>

<P> <IMG SRC= “…/imagen.png”>

<P>Esto es un p&aacute;rrafo con informaci&oacute;n con un salto de l&iacute;nea.

<BR> después de la etiqueta anterior. Tambien con <STRONG>negritas </STRONG> para complementar.

<P>Otro párrafo corto.

<H3>Un subtitulo<H3>

<P>Otro párrafo con un <a href= “www.ejemplos.net”>enlace</a>

<HR>

<UL>

<LI> Esto es una lista no ordenada.

<LI> Un item de la lista.

<LI> Otro item de la lista.

</UL>

</BODY>

</HTML>

  • Ejemplo con otros recursos HTML

<HTML>

<HEAD>

<TITLE>

Agencia de Marketing

</TITLE>

</HEAD>

<BODY>

<A NAME=”arriba”>

<CENTER>

<IMG SRC=”img/logo.png”>

<IMG SRC=”img/marketing.gif”>

</CENTER>

Contenido de la página

<HR>

<ADDRESS>

Diseño realizado por

<FONT COLOR=”#800000″>

Ejemplos.

</FONT>

<BR>

Última actualización: Octubre de 2018

</ADDRESS>

</BODY>

</HTML>