Compartir a través de


Conceptos básicos de HTML

La mayoría de los exploradores tienen la capacidad de examinar el origen HTML de las páginas que explora. Al ver el origen, verá una serie de etiquetas HTML (lenguaje de marcado de Hipertexto), rodeadas de corchetes angulares (<>), intercaladas con texto.

En los pasos siguientes se usan etiquetas HTML para crear una página web sencilla. En estos pasos, escribirá texto sin formato en un archivo en el Bloc de notas, realizará algunos cambios, guardará el archivo y volverá a cargar la página en el explorador para ver los cambios.

Para crear un archivo HTML

  1. Abra el Bloc de notas u otro procesador de texto.

  2. En el menú Archivo, elija Nuevo.

  3. Agregue las líneas siguientes:

    <HTML>
    <HEAD>
    <TITLE>Top HTML Tags</TITLE>
    </HEAD>
    </HTML>
    
  4. En el menú Archivo , elija Guardar y guarde el archivo como c:\webpages\First.htm. Deje el archivo abierto en el editor.

  5. Cambie al explorador y, en el menú Archivo , elija Abrir o escriba file://C:/webpages/first.htm en el cuadro de edición de dirección URL del explorador. Debería ver una página en blanco con el título de la ventana "Etiquetas HTML principales".

    Observe que las etiquetas están emparejadas y se incluyen entre corchetes angulares. Las etiquetas no distinguen mayúsculas de minúsculas, pero a menudo se usan mayúsculas y minúsculas para hacer que las etiquetas destaquen.

    La etiqueta <HTML> inicia el documento y la etiqueta </HTML> lo termina. Las etiquetas finales (no siempre necesarias) son las mismas que la etiqueta inicial, pero tienen una barra diagonal (/) delante de la etiqueta. No debe haber espacios entre el corchete angular (<) y el inicio de la etiqueta.

  6. Vuelva al Bloc de notas y, después de la línea </HEAD>, escriba:

    <BODY>
        HTML is swell.
        Life is good.
    </BODY>
    
  7. Desde el menú Archivo, elija Guardar.

  8. Vaya al explorador y actualice la página.

    Las palabras aparecerán en el área cliente de la ventana del explorador. Observe que se omite el retorno de carro. Si desea tener un salto de línea, debe incluir una etiqueta <BR> después de la primera línea.

    Para todos los pasos siguientes, inserte el texto en cualquier parte entre <BODY> y </BODY> para agregar al cuerpo del documento.

  9. Agregar encabezado:

    <H3>Here's the big picture</H3>
    
  10. Agregue una imagen con un archivo .gif guardado en el mismo directorio que la página:

    <IMG src="yourfile.gif">
    
  11. Agregar una lista:

    <UL>Make me an unordered list.
    <LI>One programmer</LI>
    <LI>Ten SDKs</LI>
    <LI>Great Internet Apps</LI>
    </UL>
    
  12. Para numerar la lista en su lugar, use etiquetas <OL> y </OL> emparejadas en lugar de las etiquetas <UL> y </UL>.

Con eso debería poder empezar. Si ve una excelente característica en una página web, puede averiguar cómo se creó examinando el origen HTML. Los editores HTML, como la página principal de Microsoft, se pueden usar para crear páginas sencillas y avanzadas.

Este es el origen HTML completo del archivo que ha estado compilando:

<HTML>
<HEAD>
<TITLE>Top HTML Tags</TITLE>
</HEAD>
<BODY>
HTML is swell.<BR>
Life is good.
<H3>Here's the big picture</H3>
<IMG src="yourfile.gif">
<UL>Make me an unordered list.
<LI>One programmer</LI>
<LI>Ten SDKs</LI>
<LI>Great Internet Apps</LI>
</UL>
</BODY>
</HTML>

Para obtener una descripción completa de las etiquetas, los atributos y las extensiones, consulte la especificación del lenguaje de marcado de hipertexto (HTML):

Última versión publicada de HTML en W3C.org.

Consulte también

Fundamentos de programación para Internet de MFC