Conceptos básicos de HTML

Actualizado el 17/01/2008 < > 16 Cometarios

Resúmen: Conceptos básicos de HTML. Etiquetas fundamentales y estructura básica de una página web.

Meneame Bitacoras

HTML se basa en principalmente en etiquetas, que son como instrucciones para dar formato a las diferentes partes de una página web. Para toda persona interesada en crear páginas web es importante conocer al menos nociones básicas de este lenguaje, de esta forma podemos comprender como están hechas las páginas web, desarrollar sitios con más flexibilidad y mejor construidos.

Por ejemplo, mediante el uso de las etiquetas HTML puedes subrayar textos, ponerlos en negrita, establecer encabezados, estructurar el texto en guiones, en párrafos, añadir imágenes y vínculos a otras páginas, etc. De ahí que el conocimiento de estas etiquetas sea importante para hacer páginas web, mejor dicho imprescindible.

Etiquetas básicas

  • <HTML>: indica el comienzo del documento HTML.
  • <HEAD>: indica que empieza la cabecera de la página. En ella se suele poner el título (<title>) de la web, una descripción y otras informaciones relacionadas con el contenido de la página.
  • <BODY>: es el cuerpo de la página, donde va lo que se ve en el navegador al cargar una web. En el body van los textos, las imágenes y todos los contenidos de la web.
  • <H1>, <H2>, etc.: son los títulos o encabezados. Se utilizan para establecer determinados textos de la página como titulares, suelen tener un tamaño de fuente mayor para diferenciarlos del resto del texto. Son importantes en el posicionamiento en buscadores.
  • <A>: define los enlaces.
  • <TABLE>: es una tabla, y dentro de esta tenemos filas <TR> y celdas <TD>.
  • <P>: el texto dentro de esta etiqueta forma un párrafo.
  • <IMG>: imágenes.
  • <BR>: salto de línea.
  • <UL>: los textos dentro de esta etiqueta se estructuran en listas. Mediante el uso de <LI> definimos cada guión dentro de la lista, y usando <OL> en lugar de <UL> tendremos listas ordenadas.
  • <B> y <STRONG>: se utilizan para resaltar el texto.
  • <U>: texto subrayado.
  • <I>: texto en cursiva.

Ejemplo de página básica

<html>  <head>

  <title>Título de la página</title>

  </head>

<body>

<h1>Encabezado de la página</h2>

<h3>Encabezado de menor tamaño</h3>

<p>Este es el texto de un párrafo.</p>

  <p>Este es el texto de otro párrafo. Dentro de este párrafo,

  pueden ir palabras <b>en negrita</b>, <i>en cursiva</i> o lo

  que quieras.</p>

<p>También podemos poner listas como la siguiente:</p>

  <ul>

     <li>Guión número uno.</li>

     <li>Guión número dos.</li>

     <li>Guión número tres.</li>

     </ul>

</body>

  </html>

Y para que lo entiendas mejor, una página básica con su correspondiente código HTML:

página básica y su código HTML correspondiente
(pincha para agrandar)

Meneame Bitacoras

Publicado el 17/01/2008, última actualización 17/01/2008.

Licencia: Eres libre de distribuir este artículo bajo los términos de la licencia creative commons, siempre que pongas claramente el siguiente texto en la página que publica el artículo (enlaces activos incluidos):

Autor: Verónica M.

URL: Conceptos básicos de HTML

Añadir Comentario (Subir al texto)

16 Cometarios

  1. Guia completa de SEO para Wordpress :: LaWebera.es

    [...] etiquetas headings se modifican mediante código HTML y se utilizan para jerarquizar la importancia de los títulos y subtítulos, las mismas van desde [...]

    Miércoles, 9 de abril 2008

  2. Maquetación a 3 columnas usando CSS :: LaWebera.es

    [...] el código para el archivo HTML de la página web va a ser éste. Una vez llamada la hoja de estilos, debemos crear el <body> [...]

    Viernes, 11 de abril 2008

  3. juan

    hola no se exactamente donde puedo postear esto pero me gustaria saber si por medio de un codio HTML podria resolver mi problema que es el siguiente: yo he creado una pagina con dreamweaver y la e subido a un servidor gratuito, la cuestion es que yo me meto en mi pagina por medio de internet y se me ve perfecta, entro desde cualquier otro pc y las letras no se ven en color y algunas cosas de estilo que tiene la pagina tampoco se ven como por ejemplo el orden en los textos. agradeceria mucho vuestra ayuda

    Jueves, 8 de enero 2009

  4. lilian

    yo lo uso el htlm s genial

    Martes, 2 de junio 2009

  5. Como usar distintos colores en un select menu con CSS :: LaWebera.es

    [...] Primero: Creamos una página nueva HTML. [...]

    Jueves, 1 de octubre 2009

  6. cloud

    sus comentarios son muy buenos y he hecho muchas tareas grasias a esta pagina

    Martes, 27 de octubre 2009

  7. Ejemplo de estructura de una página HTML

    [...] Conceptos básicos de HTML. [...]

    Domingo, 3 de enero 2010

  8. Elementos de diseño web: la textura

    [...] la web es muy sencillo, bastando para ello incorporarlo al CSS (tanto si se emplea embebido en el HTML como si se emplea una hoja independiente). Daremos un ejemplo práctico. Si subimos una imagen de [...]

    Lunes, 8 de febrero 2010

  9. Estructura de páginas web: Marcado semántico de contenidos

    [...] la más importante de todo el contenido, ya que define al contenido mismo, por ser su título. El HTML fue pensado desde su origen como una herramienta para jerarquizar los contenidos web. En el ejemplo [...]

    Miércoles, 17 de febrero 2010

  10. Estructura de páginas web: Cómo hacer para que lo importante aparezca primero

    [...] de mayor importancia deben ser los primeros en aparecer, no solo visualmente, sino además en el código HTML. Esto está relacionado con el funcionamiento de los robots de [...]

    Lunes, 22 de febrero 2010

  11. Herramientas para diseñadores web: Editores HTML

    [...] Si bien hoy en día continúa la discusión acerca de la conveniencia o no de emplear editores WYSISYG o no, sin entrar en hacer argumentaciones sobre ello, pasaremos a describir una de las herramientas indispensables para todo diseñador web: los editores HTML. [...]

    Lunes, 1 de marzo 2010

  12. La tipografía en las páginas web

    [...] puede apreciarse en el ejemplo anterior, el código HTML aparece mucho más limpio y simple, lo que, además del beneficio que implica en el ahorro de [...]

    Miércoles, 24 de marzo 2010

  13. Diseño de una página web con Adobe Dreamweaver

    [...] Al aparecer la ventana, haremos clic en la etiqueta body. En la vista de código, aparece la etiqueta body del código CSS, que se muestra de la siguiente [...]

    Miércoles, 31 de marzo 2010

  14. Manejo de fuentes con Adobe Dreamweaver

    [...] las fuentes en el código HTML es inconveniente, ya que extiende el código agregando una gran cantidad de etiquetas, lo que [...]

    Lunes, 5 de abril 2010

  15. Maquetación de páginas web: posición de las capas (primera parte)

    [...] por los valores de posicionamiento respecto del elemento padre, el que en este caso es el body. Como resultado, la capa 2 se superpone a la capa 1 y al texto. El orden de la superposición de [...]

    Miércoles, 21 de abril 2010

  16. Utilización de la repetición y posición de fondos en la maquetación de páginas web

    [...] determinada a algunas capas. Con mucha frecuencia se emplea en la creación de botones de menús, encabezados, ubicación de elementos, [...]

    Viernes, 2 de julio 2010

(Subir al texto)

Añadir Comentario

* Campos obligatorios