• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar
  • Skip to footer
  • Noticias
  • Aplicaciones
    • Office
    • WhatsApp
    • Hotmail
    • Seguridad
  • Entretenimiento
    • Cine y TV
    • Libros
    • Música
    • Videojuegos
    • Vídeo
  • Móviles
  • Tutoriales
  • Ciencia
cropped tecnologia peque

Tecnología

Blog de tecnología 2021

  • Análisis
  • Hardware
  • Robótica
  • Sistemas operativos
  • Startups
  • Criptomonedas
  • Paypal
    • Calculadora comisiones Paypal en €uros
    • Calculadora Paypal en Dólares
Estás aquí: Inicio / Internet / HTML: ¿Qué es y cómo aprender?

HTML: ¿Qué es y cómo aprender?

Por Felice Rayces

Todo lo que se ve en el mundo de la informática está compuesto por extensas líneas de código que el usuario final no llega a ver. Estas líneas conforman lo que es la imagen que se muestra.

La programación es fundamental para poder llevar a cabo cualquier tarea en el mundo de la informática, y en lo que a contenido web se refiere HTML es uno de los lenguajes de programación más importantes, junto con PHP y Java/JavaScript.

Tabla de contenidos

  • Qué es HTML
  • Cómo funciona HTML
    • Cuáles son las etiquetas HTML
  • Webs para aprender HTML
    • Devcode
    • Codecademy
    • W3Schools

Qué es HTML

Que es HTML

¿Te preguntas qué es HTML? HyperText Mark Lenguage (HTML) es un lenguaje de programación que se utiliza exclusivamente para la creación de webs y su contenido. Se trata de un lenguaje de programación que se centra en realizar marcas para poder organizar el contenido de una página web. Se trata del esqueleto del sitio, pero no sirve para añadir funciones especiales ni para definir el diseño de la web. Esas funciones son llevadas a cabo por otros lenguajes de programación como CSS (para el diseño), PHP y JavaScript (para funciones adicionales), entre otros.

Cómo funciona HTML

Ahora que sabes qué es HTML vamos a explicar un poco el funcionamiento de este lenguaje de marcado. Como su nombre lo indica, se encarga de marcar el contenido de una web haciendo uso de etiquetas. Las etiquetas HTML siempre se abrirán irán dentro de los caracteres menor que ‘<’ y mayor que ‘>’, haciendo que una etiqueta tenga este formato:
<Nombre de la etiqueta>

Si bien todas las etiquetas se colocan dentro de estos símbolos, es imperativo que tengan un inicio y un final, de esta forma tiene que existir una etiqueta que abra el contenido y otra idéntica que lo cierre, haciendo uso de la barra para indicar que es el final de la etiqueta. De esta forma una etiqueta con principio y final sería:

<Comienzo de la etiqueta>
</Final de la etiqueta>

Claro que existen algunas excepciones donde las etiquetas no requieren de un final, puesto que hay algunas que tienen un fin único. Por ejemplo para añadir imágenes haciendo uso de la etiqueta IMG o para añadir saltos de línea, haciendo uso de la etiqueta BR.

Ahora que sabes qué es HTML y cómo funciona este lenguaje de marcado, todo lo que te falta saber es dónde se escribe. Si bien los lenguajes de programación se pueden escribir en cualquier documento de texto, existen editores de código con funciones muy útiles que facilitan el trabajo a los programadores, tanto novatos como avanzados. Ya hablamos de algunos de los mejores editores de código en otro artículo, siendo Sublime Text, Brackets y Atom las opciones preferidas por los programadores.

Cuáles son las etiquetas HTML

HTML tiene muchas etiquetas distintas, cada una con sus propósitos y distintas formas de utilizarse. Aquí tienes una lista con las más utilizadas:

Etiqueta Función
<!–…–> Determina un comentario
<!DOCTYPE> Determina el tipo de documento
<a> Determina un hiper-vínculo
<abbr> Determina una abreviación
<address> Determina la información de contacto del autor / propietario del documento
<area> Determina un área dentro de un mapa de imagen
<article> Determina un artículo
<aside> Determina el contenido lateral del contenedor de una página
<audio> Determina contenido de sonido
<b> Determina texto en negrita
<base> Especifica la base donde se abrirán todas las URL del documento
<bdi> Aísla una parte del texto que puede tener un formato diferente del texto externo
<bdo> Sobrescribe la dirección del texto
<blockquote> Determina una sección que tiene otra fuente
<body> Determina el cuerpo del documento
<br> Determina un salto de línea
<button> Determina un botón cliqueable
<canvas> Se usa para dibujar gráficos en pantalla
<caption> Determina el título de una tabla
<cite> Determina el título de un trabajo
<code> Determina un trozo de código de programación
<col> Especifica las propiedades de la columna para cada columna del elemento <colgroup>
<colgroup> Especifica un grupo de una o más columnas de una tabla
<command> Determina un botón command al que un usuario puede invocar
<datalist> Especifica en un input una lista pre-definida de opciones
<dd> Determina la descripción de un ítem en una lista de definición
<del> Determina un texto que ha sido eliminado en un documento
<details> Determina detalles adicionales que el usuario puede ver o esconder
<dfn> Determina el término de una definición
<dialog> Determina una caja o ventana de dialogo
<div> Determina una sección en un documento
<dl> Determina una lista de definición
<dt> Determina un término (un ítem) en una lista de definición
<em> Determina énfasis en un texto
<embed> Determina el contenedor de una aplicación externa (no html)
<fieldset> Grupo de elementos relacionados en un formulario
<figcaption> Determina el título para una figura <figure>
<figure> Especifica auto-contenido
<footer> Determina el pie de página de un documento
<form> Determina un formulario html
<h1> a <h6> Determina encabezados o títulos
<head> Determina información hacerca del documento
<header> Determina la sección de encabezado del documento
<hgroup> Grupo de encabezado (<h1> a <6>)
<hr> Determina un cambio de temática a partir de una línea dibujada
<html> Determina la raíz del documento
<i> Determina una parte del texto de modo alternativo
<iframe> Determina un cuadro en línea
<img> Determina una imagen
<input> Determina un control de entrada de texto
<ins> Determina texto que ha sido insertado en un documento
<kbd> Determina entrada del teclado
<keygen> Determina un campo generador de claves para formularios
<label> Determina el rótulo para un elemento <input>
<legend> Determina un título para los elementos <fieldset>, <figure>, <details>
<li> Determina un ítem de una lista
<link> Determina la relación entre un documento y un recurso externo (generalmente con hojas de estilo)
<map> Determina un mapa de imagen del cliente
<mark> Determina texto resaltado o marcado
<menu> Determina la lista de un menú
<meta> Determina el metadato de un documento
<meter> Determina una medida escalar en un rango conocido
<nav> Determina un enlace de navegación
<noscript> Determina un contenido alternativo para los usuarios que no soportan scripts del cliente
<objet> Determina un objeto embebido
<ol> Determina una lista ordenada
<optgroup> Determina un grupo de opciones relacionadas en una lista desplegable
<option> Determina una opción en una lista desplegable
<output> Determina el resultado de un cálculo
<p> Determina un párrafo
<param> Determina un parámetro para un objeto
<pre> Determina texto pre-formateado
<progress> Representa el progreso de una tarea en una barra
<q> Determina una cita corta
<rp> Determina que debe mostrar en navegadores que no soportan scripts de Ruby
<rt> Determina una pronunciación de caracteres
<ruby> Determina una notación de Ruby
<s> Determina texto que no es correcto
<samp> Determina un ejemplo de salida de un programa
<script> Determina un script del lado cliente
<section> Determina una sección de un documento
<select> Determina un lista de cascada
<small> Determina texto pequeño
<source> Determina los recursos para elementos multimedia
<span> Determina una pequeña sección de un documento
<strong> Determina un texto en negrita
<style> Determina un estilo para la información de un documento
<sub> Determina un texto que es subíndice
<summary> Determina un encabezado visible para el elemento <details>
<sup> Determina un texto que es superíndice
<table> Determina una tabla
<tbody> Determina el cuerpo de una tabla
<td> Determina una celda en una tabla
<textarea> Determina un control de entrada de múltiples líneas
<tfoot> Agrupa los contenidos del pié de pagina en una tabla
<th> Determina una celda de encabezado en una tabla
<thead> Agrupa los encabezados de una tabla
<time> Determina fecha / hora
<title> Determina un título para el documento
<tr> Determina una fila en una tabla
<track> Determina las pistas de texto para elementos multimedia
<ul> Determina una lista desordenada
<var> Determina una variable
<video> Determina un vídeo
<wbr> Determina un posible salto de linea

Webs para aprender HTML

HTML es el comienzo para muchas personas que quieren comenzar en el mundo de la programación o simplemente crear su propia página web. El lenguaje de marcado requiere de la compañía de otros lenguajes como CSS y PHP para poder crear una página web completa con todo tipo de funcionalidades, pero es el punto de partida de toda aquella persona para crear su primera web.

Existe documentación a montones en internet para poder conocer todas las etiquetas, como utilizarlas y cómo han de combinarse con otros lenguajes de programación. Si bien puede parecer algo tedioso, afortunadamente existen muchas plataformas, tanto en español como en inglés, que permiten aprender a programar una página web haciendo uso de HTML de una forma muy intuitiva y sencilla.

Devcode

Devcode

Devcode es un sitio web que ofrece decenas de lecciones para aprender a programar de forma completamente gratuita, amén de muchos cursos de pago con funciones específicas o para aprender lenguajes de programación avanzados.

El método de enseñanza de esta web se basa en lecciones de vídeo acompañadas de archivos prácticos que te permitirán entender el funcionamiento del lenguaje y te mostrarán cómo utilizar las etiquetas.

Codecademy

Codecademy

Para los entendidos en inglés, Codecademy también hace uso de lecciones en vídeo, muy detalladas, junto con lecciones escritas, en las que podrás aprender a utilizar todas las etiquetas y a estructurar correctamente una página web en cuestión de pocas horas.

Esta plataforma es gratuita pero también cuenta con cursos de pago para seguir aprendiendo y complementar los conocimientos de HTML si es necesario una vez que hayas terminado con el curso.

W3Schools

W3Schools

Quizás la más sencilla de todas pero de las mejores plataformas para aprender a programar en HTML. Se trata de un sitio web en inglés que ofrece ejercicios de forma escrita y muy sencilla. Las explicaciones del funcionamiento de las etiquetas, así como de cómo se ha de estructurar el documento son simples y directas al grano.

Para enseñar, W3Schools introduce en todo momento ejercicios prácticos para que puedas aprender el funcionamiento de las etiquetas haciendo uso de la razón y pensando en cómo se pueden aplicar. La mejor forma de entender rápidamente cómo utilizar HTML y conseguir que se quede grabado en tu mente.

Hablamos de: Internet

Artículos Relacionados

  • Intergoles: alternativa para ver fútbol online gratis
  • ¡Descubre qué es lo más buscado del 2020 en internet!
  • Cómo acceder e iniciar sesión en el correo Movistar
  • Cómo liberar espacio en Gmail
  • MejorEnVo: qué es, historia y mejores alternativas

Primary Sidebar

Síguenos en…

  • Correo electrónico
  • Facebook
  • LinkedIn
  • YouTube

Blog de Tecnología

Blog con información útil y de calidad para que aprendas a desenvolverte con las nuevas tecnologías, Internet, Redes Sociales, aplicaciones móviles, herramientas Web, Tecnologia.net es sinónimo de pasión por la tecnología.

Lo más buscado

  • Entrar en YouTube si está restringido
  • NBA online gratis: Mejores páginas para ver los partidos
  • Cantera de las descargas
  • Mejores antivirus gratis en 2019 para Windows
  • Eliminar virus de acceso directo
  • OffLiberty

Más temas

Productividad

Actualidad

Todo Android

Trucos

Economía y empresa

Criptomonedas

Seguridad

Internet

Redes sociales

Artículos Relacionados

como ver futbol en intergoles
Intergoles: alternativa para ver fútbol online gratis
lo más buscado del 2020
¡Descubre qué es lo más buscado del 2020 en internet!
entrar en correo movistar
Cómo acceder e iniciar sesión en el correo Movistar
gmail scaled
Cómo liberar espacio en Gmail
mejorenvo
MejorEnVo: qué es, historia y mejores alternativas
comprar
Las Ventas por Internet en Mexico
windows 10 pro windows 10 home
¿Cómo hacer que Windows 10 sea más rápido?
intel
La Inteligencia Artificial y su Importancia en el Marketing Digital

Análisis de productos

termo

Una de las dudas acerca de los termos eléctricos de agua, ciertamente es su capacidad, por lo tanto, si te preguntas ¿Cuántos litros debería tener mi trono eléctrico?, ¡No te preocupes! Acabas de llegar a un lugar correcto.  Hoy en día, las personas no saben cual es la capacidad correcta de sus termos eléctricos de […]

samsung portada

El polémico móvil de la marca surcoreana, tratará de buscar una nueva oportunidad en este 2020; el Samsung Galaxy Fold no solo busca cerrar las bocas de millones críticos, sino revolucionar el mercado de móviles.  En la pasada primavera, conocíamos el primer dispositivo plegable, y es que Samsung Galaxy Fold sacudía el mercado con la […]

termo3

¡Ya basta de agua congelada! Es hora, de dejar calentar el agua en hornillas, y entrar al mundo de los termos eléctricos, por eso, vamos a responder esa gran duda que tienes en este momento, ¿Qué termo eléctrico de agua debe elegir?, ¡Tranquilo! A continuación, tendrás la respuesta.  No obstante, debes recordar, porque es importante […]

Aplicaciones y servicios

campanas e commerce scaled

El SEM, en inglés Search Engine Marketing, se basa en campañas de marketing desarrolladas en motores de búsqueda o páginas web. Este tipo de campañas son ventajosas para los E-commerce, ya que consiguen captar tráfico de calidad de una manera efectiva, al tiempo que incrementan la visibilidad online de un negocio de forma rápida. Para […]

ahorrar aplicacion

Las aplicaciones son algo fundamental para el uso de los smartphones. Ya sea porque estamos hablando de mensajería o algo similar, las aplicaciones en los teléfonos definen en parte lo que podemos hacer con nuestros smartphones. Sin embargo, la mayoría de los apps que son realmente útiles, o que ofrecen servicios adicionales, son pagas. Ya […]

Compra online mercadona scaled

El servicio de Mercadona compra online se mantenía cerrado tras una difícil decisión que le tocó tomar a la empresa dada las circunstancias del momento.

Tutoriales

Consejos para elegir una impresora

En el mercado existen una infinidad de impresoras, por lo que puede resultar una ardua tarea decidirse por una. Además, existen muchos tecnicismo acerca de este tipo de herramientas. Por lo tanto, a la hora de comprar una impresora es importante tener en cuenta algunos aspectos atendiendo a nuestras necesidades y uso. Por ello, en […]

Hablamos de: Tutoriales

iniciar sesion pinterest

Vamos a aprender todo lo necesario para poder iniciar sesión en Pinterest, incluyendo las distintas alternativas para entrar en nuestra cuenta, así como la solución a algunos de los principales problemas que nos podemos encontrar a la hora de acceder a ella. Tabla de contenidos Qué necesito para iniciar sesión en PinterestCómo iniciar sesión en […]

Hablamos de: Redes Sociales, Android, APPLE, Tutoriales

Calcular ruta en coche

Aprende a cómo compartir y calcular ruta en coche en Google Maps con tus amigos y familiares. Disfruta de armar un trayecto desde tu ordenador o móvil.

Hablamos de: Tutoriales, Android, APPLE Etiquetas: Google Maps

Footer

Favoritos

Servidores VPS VS Servidores dedicado

Que es el Digital Marketing

Que es Facebook business

Crer APPS sin saber programar

Configurar el correo de ONO

Trabaja con nosotros

Somos un equipo joven en expansión y necesitamos constantemente nuevos talentos en áreas de redacción de contenidos y marketing.

Si te interesa colaborar con nosotros, puedes contactarnos en:info@tecnologia.net

Buscar artículos

Copyright © 2020 · Tecnologia.net - Acerca de - Autores - Contacto - Política de privacidad