Escribir el contenido

Profesores:JAB y Ester Torres
Creación del contenido
Vamos a añadir tanto el contenido básico de la página creada en el punto anterior como un mínimo de etiquetas para darle algo de formato básico (negritas, encabezados, saltos de página).

Lo que está de color rojo son etiquetas HTML (y por lo tanto no se mostrarán como tal), mientras que todo el texto coloreado de color verde es texto de contenido.

<!doctype html>
<html>

  <head>
	<meta charset="utf-8"/>
	<title>Quiénes somos</title>
  </head>

  <body>
     <header>
 	 <h1>Aprende jugando, S.L.</h1>
     </header>

     <nav>
 	 Quiénes somos<br>
 	 Servicios<br>
 	 Contacto<br>
     </nav>

     <section>
 	 <div>
 	      <h2>Quiénes somos</h2>
 	 </div>

 	 <article>
 	     <h3>Con vocación educativa</h3>
 	     Somos una empresa compuesta por <b>maestros, pedagogos,
 	     guionistas y especialistas en las nuevas tecnologías</b>
 	     aplicadas a la educación para ofrecerle los mejores
 	     servicios.
 	     <br>
 	     Anteponemos la educación a la tecnología.
 	 </article>

 	 <article>
 	     <h3>Con larga experiencia</h3>
 	     Llevamos <b>desde 1998</b> ofreciendo propuestas
 	     diferentes y acciones educativas concretas a escenarios
 	     diversos.
 	     <br>
 	     Diseñamos una solución educativa creativa a su problema
 	     cotidiano.
 	 </article>

 	 <article>
 	     <h3>Con entusiasmo y motivación</h3>
 	     La <b>motivación</b> y el <b>entusiasmo personal</b>
 	     mueve montañas y es lo que nos hace diferentes al resto.
 	     <br>
 	     Pruébenos y se convencerá..
 	 </article>
     </section>

     <footer>
 	    <h5>
 	      &copy;2015. Aprende jugando, S.L.<br>
 	      c/ del Álamo rojo, 1, local. Barcelona.
 	    </h5>
     </footer>
  </body>
</html>
Escribimos un título correcto (se mostrará en la pestaña del navegador).


El <header> estará compuesto por una imagen (que colocaremos en el siguiente tema) y un texto que provisionalmente está dentro de un <h1> para que se muestre a un tamaño mayor.

En los enlaces (de manera provisional) hemos añadido al final unos <br> para que no aparezcan todos seguidos.


Al titular de la página le añadimos un encabezado <h2> para resaltarlo.

En cada uno de los 3 textos (3 <article>) hemos colocado encabezados <h3> para resaltar los títulares de cada uno.


y <br> para que ambos textos estén separados.




Hemos encerrado diferentes palabras dentro de etiquetas <b> (bold) para que se muestren en negrita.











Al <footer> le añadidos el encabezado <h5> para que se muestre a un tamaño menor.
El código &copy; equivale al símbolo de copyright ©.
(ver 'listado completo de códigos')

Como podemos apreciar (haciendo clic en el botón azul), el resultado sigue siguiendo horrible, pero no tanto como la primera versión del tema anterior.

En el siguiente tema vamos a darle un toque estético añadiendo imágenes.

En el siguiente tema 3 (Imágenes, listas y enlaces) .