Más practica menos teoría.: agosto 2018

Que es HTML

Raplido y simple - “HTML es un lenguaje de programación que se utiliza para el desarrollo de páginas de Internet.

HyperText Markup Language (lenguaje de marcas de hipertexto)

Para algunas personas al leer esto, piensan que HTML incluye el diseño gráfico de las páginas web, sin embargo, eso no es cierto ya que HTML sólo sirve para indicar como va ordenado el contenido de una página web.

Hasta el momento ya tenemos una idea sobre lo que hace HTML pero aún no sabemos cómo funcionan las etiquetas.

Para esto vamos a imaginar que estamos haciendo un documento que lleva un título, la introducción, el desarrollo y la conclusión, y podemos considerar que éstas serían las etiquetas porque nos dicen la estructura que lleva, es decir, la forma en que se acomoda el texto en nuestro documento.

Cabe mencionar que las etiquetas no sólo sirven para ordenar nuestro contenido sino que ayudan a los buscadores como Google, Yahoo search y muchos otros a encontrar la información por medio de las etiquetas.

Ahora que entendemos el concepto de etiquetas, necesitamos poder identificarlas. Éstas se caracterizan porque van dentro de los caracteres menor que < y mayor que >, como en este ejemplo: <Aquí dentro va el nombre de la etiqueta>
Aunque eso no es todo debido a que deben tener un inicio y un fin. El inicio de una etiqueta es normal, en otras palabras lleva los dos caracteres que mencioné anteriormente y dentro de estos se encuentra el nombre, sin embargo, existe una diferencia para el fin de la etiqueta ya que antes de escribir el nombre de la etiqueta debemos escribir una diagonal /. Como en este ejemplo:
<Inicio de la etiqueta>
</Fin de la etiqueta>

Si buscas más teoría, conceptos y definiciones este no es el lugar, vayamos a la práctica…

Hola Mundo en HTML.

Hola Mundo en HTML

Antes de empezar necesitamos tener un editor de textos par crear la página. Para ello nos vale cualquiera, ya sea el Notepad++, Sublime Text u otros más avanzados como Dreamweaver.

Lo primero que tenemos que hacer es crear un fichero con la extensión .html. Lo vamos a llamar como holamundo.html. El contenido de dicho documento será texto.

Definición de tipo documento

La primera línea del documento Hola Mundo en HTML va a ser la declaración de documento HTML. Esta declaración lo que indica es que el contenido del fichero es de tipo HTML.

<!doctype html>

Estructura principal

Lo siguiente será la estructura principal del documento, la cual se representa con el elemento HTML.

<html>...</html>

El documento tiene dos partes bien diferenciadas: cabecera y cuerpo.

Cabecera del documento HTML

Por un lado la cabecera del documento HTML la cual representamos con el elemento HEAD. Esta parte no tiene información visible de la página, simplemente contiene información relativa al documento.

<!doctype html>
<html>
<head></head>
</html>

Por ejemplo nos vamos a encontrar la declaración de la codificación del documento. En este caso vamos a indicar que el documento es de tipo utf-8. Esto lo hacemos mediante el elemento meta, al cual le asignamos el atributo charset="uft-8".

<!doctype html>
<html>
<head>
<meta charset="uft-8"/>
</head>
</html>

Otro elemento que encontramos en la cabecera es el título de la página. El título se visualiza, normalmente, en la barra del navegador web. El elemento que define el título es TITLE.

<!doctype html>
<html>
<head>
<meta charset="uft-8"/>
<title>Hola Mundo en HTML</title>
</head>
</html>

Cuerpo del documento HTML

El cuerpo del documento es la parte que se va a visualizar en el navegador web. Para limitar el cuerpo del documento HTML vamos a utilizar el elemento BODY.

<!doctype html>
<html>
<head>
<meta charset="uft-8"/>
<title>Hola Mundo en HTML</title>
</head>
<body>
</body>
</html>

En nuestro primer documento Hola Mundo en HTML vamos a insertar el elemento H1 para poner un titular y un texto que indique Hola Mundo en HTML es nuestro primer documento en HTML.

<!doctype html>
<html>
<head>
<meta charset="uft-8"/>
<title>Hola Mundo en HTML</title>
</head>
<body>
<h1>Hola Mundo</h1>
Mi primera página en HTML.
</body>
</html>

De esta forma ya tenemos completo nuestro primer ejemplo con el Hola Mundo en HTML.

Páginas

HTML - Que es HTML