Crea tu Web: Indice de diseño

El manual completo HTML en formato PDF
¡ sólo
4 €!
Tras confirmar el pago recibirá
el archivo en su email
  • Introducción al curso
    • Introducción
    • Requisitos
    • Agradecimiento
  • El HTML
    • Versiones de HTML
    • HTML 2.0
    • HTML 3.0 y 3.2
    • HTML 4.0
    • Estándares en este curso
  • Mi primera página
    • La primera página
    • El código
    • La explicación
    • El cuerpo del documento
  • El documento HTML
    • La página
    • La cabecera
    • El cuerpo
  • Formato del texto
    • Formato básico
    • Formato del párrafo
    • Las 6 cabeceras
    • Cambiando el tipo de letra
    • Formato de frase
    • Otros elemento
  • Tipos de letras
    • Formateo de texto
    • Cambio de color
    • Tamaños del texto
    • Tipo de letra
  • Caracteres especiales
    • Caracteres especiales
    • Caracteres extendidos
    • Caracteres de control
  • Enlaces web
    • Los enlaces
    • La etiqueta <A>
    • Las URLs
    • Anclas
  • Listas
    • Listas
    • Listas desordenadas
    • Listas ordenadas
    • Listas de definiciones
  • Imágenes
    • Imágenes
    • Imágenes y enlaces
    • Alineación respecto al texto
  • Formularios
    • Formularios
    • Cajas de texto
    • Opciones
    • Botones del formulario
    • Otros elemento
  • Formularios avanzados
    • Controles avanzados
    • Etiquetas
    • Agrupación de elementos
    • Desactivación de elementos
  • Mapas
    • Mapas
    • Mapas lado cliente
    • Cómo usar un mapa
  • Tablas
    • Tablas
    • Definir las filas
    • Definir las celdas
    • Título de la tabla
  • Marcos
    • Marcos
    • Etiqueta <FRAMESET>
    • Etiqueta <FRAME>
    • Acceso a otros marcos
  • Hojas de estilo (1)
    • Estilos CSS
    • Clases
    • Etiquetas <SPAN> y <DIV>
  • Hojas de estilo (2)
    • Referencia CSS
    • Propiedades de bloque
    • Propiedades de tipo de letra
    • Propiedades de formato del texto
    • Propiedades de color y fondo
    • Propiedades de clasificación
  • Los scripts
    • Los Scripts
    • Javascript
  • Capas
    • Las capas
    • Definición
    • Propiedades
  • Sonido
    • Sonido en la página
    • Sonido manual
    • Sonido de fondo
  • Trucos
    • Guía de estilo
      • Guía de estilo
      • Contenido
      • Navegación
      • Estructura de las páginas
      • Accesibilidad
      • Diseño
      • Mantenimiento y prueba
    • Enlaces de interés
      • Más HTML
      • Más JavaScript
      • HTML dinámico
      • Otras tecnologías
      Mi primera página
      El código

      Lo mejor para aprender a hacer algo es ... ¡hacerlo!. Así que vamos a la primera página

      mipagina.htm

      <HTML>
      <HEAD>
      <TITLE>Mi primera pagina web </TITLE>
      </HEAD>
      <BODY>
      <H1 align="center" >Mi Primera pagina web </H1>
      <HR>
      <P>Esto tan sencillo es una verdadera página web, aunque le falta el contenido,
      pero todo llegará.</P> </BODY>
      </HTML>

      Si quieres ver como queda esto en el explorador solo tienes que pulsar aquí, y tranquilo que se abrirá en otra ventana

      arriba


      La explicación

      Si te fijas en la página que ves con el explorador solo se ve parte de lo que has escrito, concretamente todo lo que no está encerrado entre los símbolos < y >. Eso es el contenido de la página, pero ¿y lo que está entre esos paréntesis angulares? pues esas son las etiquetas que le dicen al explorador como mostrar el contenido: en grande, con colores, centrado, el título de la página, etc. Si te fijas cada etiqueta tiene un comienzo y un fin:

      <ETIQUETA parámetros> ... </ETIQUETA>

      Como ves una apertura y un cierre. Algunaas etiquetas (como <BR> cambio de línea o <HR> linea horizontal) no llevan cierre. Fijaros que lo primero que tenemos es la etiqueta <HTML> cerrda al final del documento con </HTML>, eso quiere decir que estamos ante un HTML:

      <HTML> ... </HTML>

      Dentro de ese documento vemos una parte llamada cabecera, que la reconocerás porque está limitada con la etiqueta <HEAD> </HEAD>. Él contenido de esta parte no siempre es visible, y si lo es nunca se muestra en la página en si. Contiene por ejemplo el título que se ve en la ventana del explorador, arriba a la izquierda. La cabecera queda por tanto :

      <HEAD>
        <TITLE>Mi página web</TITLE>
      </HEAD>

      Puede contener muchas otras cosas, pero eso lo dejamos para más adelante.

      arriba


      El cuerpo del documento

      La otra parte es el cuerpo o <BODY> </BODY>, es el contenido de la página web. Tiene una etiqueta con cierre:

      <BODY> ... </BODY>

      Y ahora el contenido:

      <H1 align="center"> Mi primera página web</H1>

      Con esto colocaremos el texto en formato <H1> (o cabecera 1) y centrado (align="center"), o sea, en tamaño grande y centrado en la página, una forma de resaltar la frase. Ahora separamos esa frase por medio de una línea horizontal:

      <HR>

      Como ves este es un ejemplo de etiqueta sin cierre. Y por último colocamos un texto escplicativo en un párrafo (<P></P>), o sea, un bloque de texto con un espacio por delante y otro por detrás :

      <P>Esto tan sencillo es una verdadera página web, aunque
      le falta el contenido, pero todo llegará.</P>

      Para empezar no está mal, por supuesto existen muchas más etiquetas con misiones diferentes a la de mostrar texto, pero eso lo iremos viendo poquito a poco.

      arriba


      Comunidad Virtual. Alojamiento gratis