Esta es la forma en que creas tu primera página web – Parte 2

¡Te quedó muy bien tu primera página web!

Hoy te explicaré con más detalles qué es HTML y cómo podemos hacer uso de él para crear las mejores páginas web.

¿Qué NO es HTML?

¡HTML no es un lenguaje de programación!

Un lenguaje de programación tiene funcionalidades (opciones) que HTML no tiene.

Por ejemplo, con un lenguaje de programación podemos realizar operaciones matemáticas tales como sumar, restar, multiplicar, dividir, etc. Con HTML no podemos hacer lo anterior.

Ahora bien, saber a programar nos ayudaría a crear aplicaciones y páginas webs avanzadas como lo son Facebook e Instagram. Pero, quiero que sepas que no tienes que saber programación para crear páginas webs.

¿Qué SÍ es HTML?

HTML es el lenguaje de las páginas web.

HTML es en realidad un lenguaje de marcado.

Un lenguaje de marcado es una forma de codificar texto usando etiquetas o marcas que muestren información adicional acerca de la estructura del texto.

¿Recuerdas esto?

<h1>Mi Primer Título</h1>

¿Y qué tal esto?

<p>Esta es mi primer párrafo. Estoy muy feliz porque tendré mi primera página web.</p>

Estos son elementos de HTML. Conoceremos más sobre ellos a continuación.

Elementos y Etiquetas

HTML está formado por elementos que marcan diferentes partes del contenido para que aparezca o actúe de cierta manera.

Un elemento es un conjunto de marcas.

Podemos ver que un elemento HTML está formado por:

  • Etiqueta de Apertura y de Cierre: las etiqueta establecen dónde empieza y termina el elemento.
  • Atributo: sirve para agregar más información al elemento.
  • Contenido: texto que contiene el elemento.

Fijémonos en otro ejemplo código:

<h1 id=”main-title” class=”red”>Esto es un titular</h1>

Esto está conformado por tres elementos.

<h1>– Etiqueta de apertura.

Esto es un titular – Es el contenido

</h1> – Etiqueta de cierre.

id y class – Ya sabemos que las etiquetas tienen atributos. En este ejemplo usamos los atributos id y class (hablaremos más sobre estos luego).

Más sobre las Etiquetas

Las etiquetas son las palabras claves ocultas que nos ayudan a organizar nuestro texto. Las etiquetas le dicen al navegador lo que debe mostrar en la pantalla. Por tanto, son MUY importantes.

¿Qué es eso de palabras claves ocultas?

Son palabras claves ocultas porque el navegador no las muestra en la pantalla del usuario. Pero sí forman parte de nuestro código HTML – y vamos usar muchas etiquetas durante este proceso de aprendizaje.

¡A practicar!

Vamos a crear la siguiente página.

¡Es muy simple!

Usemos nuestro snippet ! (el signo de exclamación).

Borremos las líneas 5 y 6. Las que dicen:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

Por tanto, nuestro documento tendrá el siguiente código:

<!DOCTYPE html>
  <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
<body>

</body>
</html>

Ahora, hagamos unos cambios en la línea 5. Usa este código:

<title>Mi Segunda Página Web</title>

Finalmente, agreguemos estas dos líneas en la línea 8.

<h1>Mi nuevo titular</h1>

<p>El nuevo párrafo es espectacular y, además, <a href=»http://google.com»>¡tiene un enlace!</a></p>

Nuestro código debe verse así:

<!DOCTYPE html>
  <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Mi Segunda Página Web</title>
  </head>
<body>
  <h1>Mi nuevo titular</h1>
  <p>El nuevo párrafo es espectacular y, además, <a href="http://google.com">¡tiene un enlace!</a></p>
</body>
</html>

Nuevo elemento: <a>

Revisemos la línea 9.

<p>El nuevo párrafo es espectacular y, además, <a href="http://google.com">¡tiene un enlace!</a></p>

¡Notarás que tenemos un elemento nuevo!

<a> es el elemento que crea los hipervínculos.

Los hipervínculos (a quienes llamaremos links de ahora en adelante) son textos que enlazan a otras partes de la página web (fuera o dentro de ellas misma). Además, sirven para enlazar documentos, archivos, multimedia (fotos, videos, audio) y otras páginas.

Veamos nuestro ejemplo nuevamente.

<a href="http://google.com">¡tiene un enlace!</a>

Notaremos que el elemento <a> tiene un atributo llamado href.

href es el atributo que indica hacia dónde debe dirigirse el explorador cuando el usuario haga clic en el link.

En este caso, nuestro link nos llevará a la página web de Google.

Nota: todos los enlaces hacia otras páginas deben iniciar con http:// o https://. De lo contrario, el explorador NO te llevará a dicha página. Luego hablaremos más sobre los links.

En el próximo tutorial descubriremos por qué el elemento <p> tiene al elemento <a> dentro de sí.

José Rosado
José Rosado

Soy José Rosado, Diseñador Web con residencia en Santo Domingo, República Dominica.. He trabajado en el desarrollo de páginas para artistas, empresas sin fines de lucro, colegios, firmas de abogados, laboratorios clínicos y distintas empresas de E.E.U.U y R.D. Conoce más sobre mi en Rosa.do

Artículos: 19