Cómo aprender a programar en html desde cero, aquí puedes encontrar todos tus preguntas.

Aprender a programar es el primer paso para poder crear todo tipo de aplicaciones informáticas. Cada página web que has visto ha sido escrita en un lenguaje básico llamado HTML, podría decirse que es el esqueleto que forma la estructura básica de cada página web. Por tal motivo, aprender a programar en html desde cero es esencial si quieres integrarte al mundo de la tecnología, del diseño y desarrollo web. Conocer este lenguaje te permitirá crear páginas web de calidad tanto a nivel funcional como de diseño.

Cómo-aprender-a-programar-en-html-desde-cero Cómo aprender a programar en html desde cero

¿Qué es HTML y qué necesitarás para aprender a programar en html desde cero?

HTML es el acrónimo de Hyper Text Markup Languaje, o lenguaje de marcas de hipertexto, y no es más que el lenguaje que se usa para la creación de sitios web. En palabras más sencillas, HTML se refiere al conjunto de etiquetas que el navegador interpretará para mostrar los diferentes contenidos de una web sean estas texto, imágenes o audio. Para aprender lo básico de HTML solo necesitarás de alguna aplicación de texto, un navegador web y una carpeta donde puedas ir guardando los documentos que vayas creando.

Conceptos básicos de HTML

Un documento HTML está formado por diferentes estructuras, como texto y una serie de etiquetas que le indicarán al navegador cómo deberá mostrar el texto y demás elementos que conforman la página web.

Las etiquetas son la estructura principal del lenguaje, luego están los atributos que dan especificaciones del comportamiento de dichas etiquetas permitiendo estas ser parametrizadas. Dichas etiquetas empiezan con los símbolos ‘menor que’ y ‘mayor que’. 

Ejemplo: Para indicar el principio y el final de un documento las instrucciones son: <html> y </html>. Las etiquetas de cierren van casi igual que las de apertura solo que se agrega la barra invertida /.

Estructura básica de un documento HTML

En un documento HTML se distinguen dos partes primordiales:

  1. La cabecera del documento: Que está delimitada por las etiquetas <HEAD> y </HEAD>, que se usa para colocar información de carácter informativo como el título de la página, que va entre las etiquetas <TITLE> y </TITLE> y se mostrará en la barra de título de la ventana del navegador. Seguidamente, estarán las etiquetas <META> usadas para que los buscadores den de alta la página de manera eficiente. Luego están los Scripts, que dan dinamismo a la página y las Hojas de estilo.
  2. El cuerpo del documento: Identificado entre las etiquetas <body> y </body>, que será la parte donde se introducirán las demás partes que se visualizarán en pantalla, tales como texto, enlaces, imágenes, tablas, formularios entre otros elementos.

En resumen, el documento básico tendrá la siguiente estructura:

<HTML>

<HEAD>
<TITLE>Estructura básica de la página</TITLE>
Aquí se colocan etiquetas como las META, los Scripts y los estilos.
</HEAD>

<body>

<p>Este es el cuerpo de mi primera página HTML</p>

<p>Como aprender a programar en html desde cero</p>

Aquí va lo que se mostrará en pantalla del documento HTML.
</body>

</HTML>

Etiquetas de HTML para párrafos

Para hacer un cambio o salto de línea está la etiqueta <br> no necesita cierre con la /. Para delimitar párrafos tienes la etiqueta <p> y </p>. Para alinear el texto del párrafo tienes el atributo align que definirá hacia donde querrás ubicar el texto a mostrar, si a la izquierda, hacia la derecha, centrado o justificado. Por ejemplo:

Este sería el código para alinear el texto a la izquierda: <p aling= “left”> Texto alineado hacia la izquierda </p>

Si queremos colocar el texto centrado: <p align=”center”> Texto alineado al centro </p>

Y para alinear hacia la derecha este es valor de aling: <p align=”right”> Texto alineado a la derecha </p>

Para alinear el texto hacia los dos márgenes: <p align=”justify”> Texto justificado </p>

Elementos de encabezado

Estas etiquetas sirven para colocar títulos en las distintas secciones de tu web. Así <hx> y </hx> se usa para destacar titulares que pueden variar de tamaño o modificarse con el número que va desde el 1 al 6. <Hr> pondrá una línea donde se coloque que abarcará toda la página, sin necesidad de colocar la instrucción final con la barra /. Por ejemplo: 

<h1>Titulo de nivel 1</h1>

<h2> Titulo de nivel 2</h2>

Etiquetas para darle formato al texto

Para modificar el tipo, tamaño y color de las letras o líneas se usará la etiqueta <font> y </font>. Asimismo, dentro de estas etiquetas se especifican las características de la fuente como el tipo de letra, face, el tamaño de la fuente size y el color de la letra. Ejemplo: <font face “Arial” color=”red” size=5> se cambia el tipo de letra texto que viene a continuación hasta la orden </font>. 

Para subrayar un texto están las etiquetas <u> y </u> lo que se escriba entre las dos instrucciones aparecerá subrayado. Si quieres destacar en negritas un determinado texto con <b> y </b> lo conseguirás. Para poner en cursiva o itálica un texto deberás colocarlo entre las etiquetas <i> y </i>. Igualmente, si requieres de subíndices tienes los elementos <sub> </sub>. Y para poner un texto centrado <center> y </center>.

Insertar imágenes en HTML

Antes de hacer uso de una imagen esta deberá estar previamente guardada en la misma carpeta donde estas guardando los documentos html que estas creando. La etiqueta usada en este caso es <img src=”nombre del archivo de la imagen.jpg”>. Donde la etiqueta img le indica al navegador que se va cargar una imagen, y la orden src señala donde está localizada la imagen, sino se indica una ruta se considera que la imagen esta guardada en la misma carpeta.  Se puede trabajar el tamaño de la imagen con height señalando la altura, y width para indicar el ancho de la misma.

Hipervínculos o enlaces a otras páginas

Los enlaces suelen visualizarse en azul, pero se puede manipular el color con alink=color, para cuando se le dé clic y vlink=color para especificar el color que deberá quedar después de ser clickeado. La etiqueta que usarás para colocar un enlace es <a> seguido de href= para colocar la dirección entre comillas finalizando con </a>. Ejemplo:

<a href=http://www.nombre de una página web.com>Nombre del enlace que quieres mostrar</a>. 

En fin, la clave para aprender a programar en html desde cero consiste en poner en práctica cada código que conozcas y juegues con los diferentes atributos que este pueda ofrecer. Haciéndolo así en poco tiempo estarás creando tu propio sitio web e implementando nuevos estándares de HTML.

Reader Interactions

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Share This