Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Mi primera web

Aprender a hacer una sencilla web paso a paso partiendo de cero.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

12. El contenido (I)

12.1. El texto

Insertar el texto

Em esta lección vamos a rellenar el div "contenido", que es donde va el cuerpo principal de la Web. Pondremos texto y alguna imagen.

Empezaremos por un título y un subtítulo, y además un par de párrafos. Abre el archivo plantilla.html y en la etiqueta del div de "contenido". borraremos el texto provisional que pusimos: (borrar texto en rojo)

......
<div id="contenidos">
   Aqui irán los contenidos.
</div>
......

En su lugar insertaremos una serie de líneas que serán el título, subtítulo y algún párrafo.(texto en azul)

......
<div id="contenidos">
   <h1>Título de Sección</h1>
      <h2>Título de Apartado</h2>
      <h4>Este será un Subtítulo </h4>
         <p>Esta es una página de plantilla que 
           servirá para hacer las páginas internas de mi sitio Web. 
           Es curioso cómo se parece esta página a la de Anyelguti. Sin embargo, 
           ahora puedo cambiar muchas cosas y personalizarla. Para ello 
           lo único que tengo que hacer es sustituir los textos que ahora ves
           escritos por otros que yo quiera. Támbién puedo cambiar
           los colores de fondo. Cambiar el tipo, tamaño y forma de la letra, 
           la alineacion del texto y otras cosas para ponerlo a mi gusto.</p> 
         <p>También debo cambiar los enlaces en cuanto
           tenga hechas varias páginas de mi Web, para enlazarlas todas entre sí.
           Y si tengo alguna duda o quiero poner alguna cosa más, siempre se 
           puede consultar el "Curso de HTML" y el "Curso de CSS" que hay en 
           "Aprende Web".</p>
         <p> Por último, como esta Web no la tengo todavía
           muy acabada, le pondré un letrero que lo indique: Éste es el letrero:</p>
</div>
......

Aunque el texto a insertar es un poco largo, es fácil de escribir, ya que las etiquetas que usamos son conocidas. Lo hemos hecho así para rellenar más espacio, ya que el div del "contenido" se va alargando conforme le pongamos más texto, imágenes, etc.

Una vez hayas escrito el texto, guardas el archivo, y abrimos luego el archivo plantilla.html con el navegador para ver el cambio:

La página quedará así: Ver mi página

Como ves todavía nos queda dar formato al texto mediante el estilo CSS, pero antes insertaremos una imagen.

Insertar imagen

Tal como acabamos de decir, vamos a insertar la siguiente imagen en nuestra página plantilla.html.

Recuerda, para copiar la imagen debes pulsar con el botón derecho del ratón sobre la imagen y pulsar en "Guardar imagen como...". En el cuadro que se abre debes buscar la carpeta objetos dentro de la carpeta raíz de la Web (ruta: Mis documentos / mi_web / objetos) y pulsar en guardar. Guardaremos la imagen con el nombre "enconstruccion.gif".

Una vez guardada la imagen, abrimos el archivo plantilla con el HTML-Kit y después del texto que hemos escrito anteriormente, escribimos la etiqueta de la imagen (escribir texto en azul):

......
        <p> Por último, como esta Web no la tengo todavía
           muy acabada, le pondré un letrero que lo indique: Éste es el letrero:</p>
        <img src="objetos/enconstruccion.gif" alt="Página en Construcción"/>
</div>
......

Una vez que hayamos copiado el texto anterior guardamos el archivo, y abrimos después el archivo plantilla.html con el navegador para ver los cambios.

La página quedará así: Ver mi página

Ahora que tenemos la imagen, lo que nos falta en este div es aplicar estilo al texto pero eso lo haremos en el siguiente paso.

ir al siguiente paso: Estilo del contenido

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com