Plantilla HTML para texto e imágenes con scroll

Índice

¿Qué es?

Con esta plantilla podrás añadir texto e imágenes en formato HTML. Este formato tiene la ventaja de que se adapta al tamaño de cada dispositivo para que la letra siempre tenga un tamaño adecuado. Además permite realizar scroll y hacer zoom con una gran nitidez.

Si vas a tener mucho texto o para ti es muy importante la lectura, es muy posible que esta solución se adapte a tus necesidades.

Descargar la plantilla:

Para editar la plantilla necesitarás un editor de textos. Puedes usar el editor que prefieras. Si no tienes un editor favorito a continuación te aconsejamos alguno.

¿Cómo se usa?

En primer lugar, descomprime el fichero de la plantilla en la carpeta Libraries de tu proyecto. Si no sabes dónde está la carpeta Libraries, abre tu proyecto con 480i Manager, dirigete a la pestaña “Añadir contenido” y elige “Abrir carpeta Libraries” situada en la parte superior.

abrir carpeta libraries

Para editar el contenido de la plantilla debes editar el fichero “index.html“. Ábrelo con el editor de textos. Siempre trabajaremos sobre ese fichero para añadir o modificar el contenido.

fichero index.html

La plantilla está preparada para contener un título, seguido de una imagen y finalmente el texto:

plantilla de texto

Editar el título

El título está insertado usando una etiqueta <h1>.

html tíltulo

Simplemente cambia el texto actual por el que quieras y guarda el fichero. No elimines las etiquetas.

Editar la imagen

Para cambiar la imagen simplemente sustituye el fichero llamado “imagen01.jpg” que se encuentra dentro de la carpeta “images“.

La anchura recomendada para la imagen es de 750px. Usa la altura que necesites.

fichero imagen

Editar el texto

Cada párrafo de texto se indica con una etiqueta <p>

html párrafo

Puedes editar los párrafos existentes simplemente cambiando su texto.

Añadir más contenido

Personaliza al máximo tu plantilla añadiendo más contenido.

Añadir un título

Cada uno de los títulos debe empezar con <h1> para indicar que empieza un título y debe terminar con </h1> para indicar dónde termina.

nuevo título

Añadir un párrafo

Cada uno de los párrafos debe empezar con <p> para indicar que empieza un párrafo y terminar con </p> para indicar dónde termina.

nuevo párrafo

Añadir una imagen

Guarda tu imagen en la carpeta “images” de la plantilla

Desde el editor de textos, añade el siguiente código en el punto en el que quieras añadir la imagen.

html imagen

Asegúrate de poner el nombre de tu imagen.

Se recomienda una anchura de 750px y los formatos PNG o JPG.

Personalizar el diseño

Editando el CSS de la plantilla puedes ajustar el diseño a tus necesidades. Si ya sabes como editar código en CSS no tendrás ningún problema en realizar cualquier cambio, símplemente debes saber que toda la configuración está en el fichero “style.css” ubicado dentro de la carpeta “css”.

Si necesitas un poco de ayuda para hacer este tipo de cambios continúa leyendo. En caso contrario, puedes pasar al apartado siguiente.

fichero css

Cambiar el tamaño del texto de los párrafos

      1. Abre el fichero “style.css” con un editor de texto.
      2. Indica el tamaño que quieres usar. Para poner decimales se usa el punto, no la coma.
css tamaño de parrafos
      1. Finalmente guarda el documento.

Cambiar el color del texto de los párrafos

      1. Abre el fichero “style.css” con un editor de texto.
      2. Indica el código del color que quieres usar en código hexadecimal.
css color de los parrafos

Cambiar tamaño de los títulos

      1. Abre el fichero “style.css” con un editor de texto.
      2. Indica el tamaño que quieres usar.
        css tamaño de titulos
      3. Finalmente guarda el documento.

Cambiar color de texto de los títulos

      1. Abre el fichero “style.css” con un editor de texto.
      2. Indica el tamaño que quieres usar.
        css color de los titulos
      3. Finalmente guarda el documento.

Justifica el texto de los párrafos

      1. Abre el fichero “style.css” con un editor de texto.
      2. Cambia “inital” por “justify” tal y como se muestra en la imagen
        css justify
      3. Finalmente guarda el documento.

Añadir plantilla a tu publicación interactiva

Añade la pantilla a tu publicación interactiva usando el Elemento Extra “WebZip”. Para aprender a usar esta funcionalidad sigue los pasos de este tutorial:

Ir al Foro