DanteCervantes.com

Introducción a HTML

Publicado por : Dante | 10 enero, 2015 | 12:15 am

 

En este artículo de introducción aprenderás a utilizar el lenguaje HTML por sus siglas en inglés HyperText Markup Language, hace referencia al lenguaje de marcado para la elaboración de sitios web.

¿Qué necesitas?

Muchas personas piensan que crear un sitio web requiere de un software sofisticado y costoso, pues esto no tiene que ser así, ya que en la actualidad existen muchos IDE (Entornos de desarrollo) para crear sitios web gratuitamente, algunos de ellos son:

Dreamviewer

Este famoso IDE de desarrollo fue creado por Adobe, el cual puedes descargar desde su sitio oficial por un período de prueba de 30 días, posteriormente debes realizar un pago.

Enlace : Dreamviewer

Notepad++

Este pequeño pero poderoso programa nos permite crear distintos tipos de archivos, no solo para los sitios web sino para otros tipos de lenguajes de programación.

Es totalmente gratuito y tiene un peso inferior a los 20 mb.

Enlace : Notepad++

Sublime Text 2

Para muchos el mejor editor de código, cuenta con una comunidad muy grande y con extensiones que nos facilitarán mucho el desarrollo de nuestro sitio web.

Este último lo uso actualmente para desarrollar lo distintos sitios web.

Enlace : SublimeText

¿Cómo empezar?

Una vez hayas instalado el entorno de desarrollo de tu preferencia, crearemos un nuevo archivo con extensión .html llamado index.html, este archivo es el que por default buscará el servidor una vez hayamos concluido.

Actualmente HTML se encuentra en su versión 5, pero no es obligatorio utilizar esta versión, ya que no todos los navegadores soportan esta tecnología.

Antes de comenzar a crear el cuerpo de nuestro sitio web, aprenderemos para que sirve cada una de las etiquetas que ofrece HTML.

Etiquetas de Texto

<span> : Permite agrupar varios elementos en línea seguidos dentro de un mismo bloque (por ejemplo, varias palabras seguidas en un párrafo), para después darles formato con la hoja de estilo.

Ejemplo :

<p> : Se utiliza para representar un párrafo.

Ejemplo :

</br> : Representa un salgo de linea.

Ejemplo :

<b> : Indica que un texto tiene que estar en negritas, la diferencia entre <b> y <strong> no varía mucho, sirven para darle formato de negrita a cualquier texto.

Ejemplo :

<h1> : Indica que un texto debe tener un tamaño mayor a todos los demás textos, por default el tamaño de la letra encerrada dentro de esta etiqueta es de 32 pixeles.

Ejemplo :

<h2> : Muy similar a la etiqueta anterior pero con un tamaño de 24 pixeles.

Ejemplo :

<h3> : Tamaño de letra 20 pixeles.

Ejemplo :

<h4> : Tamaño de letra 16 pixeles.

Ejemplo :

<h5> : Tamaño de letra 12 pixeles.

Ejemplo :

<h6> : Tamaño de letra 11 pixeles.

Ejemplo :

Etiquetas de división

<div> : Se utiliza para definir una sección dentro del documento.
Esta etiqueta se usa comunmente para agrupar un bloque de elementos, para luego añadirle un estilo determinado.

Ejemplo :

<hr/> : Crea una linea entre contenido y contenido.

Ejemplo :

Tablas

<table> :

Se utiliza para definir una tabla.

Las tablas se componen con las siguientes etiquetas:

  • <table> Define una tabla
  • <tr> Se utiliza para definir una fila dentro de una tabla.
  • Este elemento puede contener una o más etiquetas <th> o <td>.
  • <th> Define una celda de encabezado de una tabla.El texto de esta celda se representa en negrita y centrado.
  • <td> Define una celda que contiene datos dentro de una tabla.
    El texto de esta celda se representa en tamaño regular y alineado a la izquierda.

Las tablas más complejas pueden contener también estas etiquetas:

<caption> Define el título de una tabla.
Esta etiqueta debe ser ubicada inmediatamente despué de la etiqueta de apertura <table>.

<col> se utiliza para especificar diferentes atributos a las columnas de una tabla.
Esta etiqueta es muy útil para aplicar atributos a la columna entera en lugar de usar estilos en cada una de las celdas o en cada una de las filas.

<colgroup> Se utiliza para agrupar columnas de una tabla.
Esta etiqueta es muy útil para aplicar estilos a todas las columnas de una sola vez en lugar de hacerlo en cada una de las celdas por separado.

<thead> Se utiliza para definir una fila como cabecera de tabla.Esta etiqueta debe utilizarse en conjunto con las etiquetas <tbody> y <tfoot>.
Nota: La etiqueta <tfoot> debe ser ubicada antes que la etiqueta <tbody>.

<tbody> Se utiliza para definir una o más filas como cuerpo de tabla.
Esta etiqueta debe utilizarse en conjunto con las etiquetas <thead> y <tfoot>.
Nota: La etiqueta <tfoot> debe ser ubicada antes que la etiqueta <tbody>.

<tfoot> Se utiliza para definir una fila como pie de tabla.Esta etiqueta debe utilizarse en conjunto con las etiquetas <thead> y <tbody>.
Nota: La etiqueta <tfoot> debe ser ubicada antes que la etiqueta <tbody>.

Ejemplo :

<img> : Es utilizada para mostrar imágenes, cuenta con el atributo “src (source)” que indica la ubicación de la imagen deseada.

<input> : Se utiliza para generar campos de texto, cuenta con los atributos, type, entre los cuales se encuentran:

  1. text (texto)
  2. email (correo eletrónico)
  3. password (contraseñas)
  4. number (números)
  5. hidden (campo oculto)
  6. submit (botón de un formulario)
  7. file (permite adjuntar archivos de cualquier formato)

<form> : Esta etiqueta indica que se va a crear una sección que contendrá elementos para almacenar información de texto, imágenes, números, etc.

Etiquetas de HTML 5

<audio> : Permite la reproducción de audio en el sitio web con tan solo darle la ruta del archivo que queremos escuchar

<video> : Como su nombre lo indica permite la visualización de videos en el navegador, cabe destacar que no todos lo navegadores lo soportan.

<aside>: Se utiliza para separar el contenido secundario del sitio web, como publicidad, artículos relacionados, calendarios, etc. Similar a la que se encuentra de tu lado derecho en este artículo.

<section> :  Es usada para separar el cuerpo del sitio web por bloques o secciones muy similar a la etiqueta <div>

<header> : Se utiliza para indicar la ubicación de la cabecera del sitio, es también utilizado para ubicar el menú, widgets, zonas horarias, y secciones del sitio web.

<footer> : Indica la ubicación del pie de página del sitio, normalmente ubicado hasta el final del contenido (similar al de este sitio web)

 

Conclución

Para aprender HTML no tienes que haber estudiado una carrera de desarrollo, solo es cuestión de tener un poco de paciencia y dedicación, en el siguiente tutorial aprenderás a crear tu propio layout.

Recibe los mejores desarrollos y tutoriales

* campos requeridos

redes sociales