"Lección 2", 2=>"Lección 3"); $ruta=array(1=>"../lec2.html", 2=>"../bases_de_datos_mysql.html"); ?> Titulos de una web - colocar o poner copyright a una web - Curso de creacion de webs

  • En espera
atras

1.10 Finalizando nuestra primera web

adelante

Títulos - Importantes para el posicionamiento

Hasta ahora hemos visto cómo crear los párrafos, pero una web no es sólo el texto con imágenes, sino que también tienes títulos, como los dos naranjas que hay aquí encima. En las webs podemos definir estos títulos, podemos definir hasta 6 títulos. Al igual que los párrafos los hacíamos con la etiqueta <p>, los títulos lo vamos a hacer con las etiquetas <h1>, <h2>, ... hasta <h6>.

Los títulos son un factor importante a la hora de posicionar la web bien en los buscadores y sobre todo en google. Google da más importancia al título h1, menos al h2, y ya casi nada al h3. De esta forma en nuestras páginas el título principal que recoja la temática que en esa página se trata debe ser h1, y debe ser único, nunca más de un h1 por página. Luego los distintos apartados serán h2, y los subapartados serán h3. De esta forma nos sobrarán tres títulos que utilizareis para lo que querais.

En la web que estábamos realizando, las palabras "Menú" y "Enlaces", no son texto normal, sino que son títulos, pero, como hasta el h3 lo reservamos para el contenido, vamos a ponerles un h4. Para ello cambiamos sus etiquetas de párrafo por las de h4, de forma que el menú nos quedará de esta forma:

<td width="160" valign="top" id="menu">
<h4>Menú</h4>
<ul>
<li><a href="#">Sección1</a></li>
<li><a href="#">Sección2</a></li>
<li><a href="#">Sección3</a></li>
</ul>
<h4>Enlaces</h4>
<ul>
<li><a href="http://www.tuwebdeinformatica.com" target="_blank">Tu web de informática</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
</ul>
</td>

Ahora vamos a definir el h4 en la hoja de estilos poniendo que esté en negrita, que sea de color grisáceo y que tenga un tamaño de 20 píxeles (esto último se hace con la característica "font-size: 20px"). De esta forma tendríamos que agregar esta línea en la hoja de estilos:

h4 {color: #CCCCCC; font-weight: bold; font-size:20px}

De esta forma ya veremos bien nuestro menú. Ahora sólo nos queda dos cosas: el contenido y el copyright de la parte de abajo.

Celda del contenido

En esta celda podeis colocar lo que querais. Primero, antes que nada, vamos a definir los tres tipos de títulos que habrá en las páginas en nuestra hoja de estilos. Sólo tenemos que definirles el tamaño, puesto que ya son de color negro y están en negrita por defecto. De esta forma agregamos estas líneas en nuestra hoja de estilos:

h1 {font-size:25px}
h2 {font-size:20px}
h3 {font-size:15px}

Luego agregais el contenido que querais usando los títulos h1, h2 y h3 y las etiquetas de párrafo p. En la plantilla además si la mirais vereis que tengo puesto un vídeo de youtube. Esto es tan fácil como ir a youtube, y en el vídeo que quereis en la parte derecha os viene el código que teneis que agregar a vuestra web para poder poner ese vídeo.

El problema al agregar el vídeo o al agregar cualquier imagen es que no se centra. Para centrarla podeis hacer dos cosas: o meteis su código entra las etiquetas <div align="center"> y </div>, o meteis su código entre las etiquetas <center> y </center>.

Poner copyright en una web

Ahora vamos a poner debajo nuestro propio copyright, para que sepan que la web está creada por nosotros. Para ello al terminar la tabla en la que está el contenido vamos a poner un div al que le pondremos el estilo llamado copyright,y dentro del cual pondremos el texto de nuestro copyright, lo que nosotros queramos (Para poner el símbolo © usamos el código &copy;):

</td>
</tr>
</table>

<div id="copyright">Copyright&copy; 2008 - Página creada por Juanma - Todos los derechos reservados</div>

</div>
</div>

</body>
</html>

Ahora nos vamos a la hoja de estilos, y vamos a definir ahí nuestro div copyright. En éste vamos a hacer que el texto mida 0.7em (0.7em quiere decir un 70% del texto normal, pero si queremos podemos ponerlo en píxeles), que se centre y que sea de color negro. De esta forma agregamos esta línea en la hoja de estilos:

#copyright {font-size:0.7em; text-align:center; color:#000000}

Código final

Pues ya tenemos acabada nuestra web. Ahora sólo nos queda guardar esa página e irla duplicando con otro nombre, cambiarle el contenido y enlazarla desde el menú, y así ir creando todas las páginas de la web con la plantilla que tenemos.

Finalmente os enseño cómo son los códigos html y css que tenemos hechos, por si hay algo que se os pasó y no os sale:

index.html

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Éste es el título de la página</title>
<link href="estilo.css" media="screen" rel="StyleSheet" type="text/css">

</head>
<body>

<div id="fondo">
<div id="global">

<div id="cabecera">
<div id="logotipo">
<img src="imagenes/site_logo.gif" alt="Tu web de informática"></div>
<div id="banner"></div>
</div>

<div id="navegacion">
<table width="100%" border="0">
<tr>
<td width="25%" align="center"><a href="index.html">Índice</a></td>
<td width="25%" align="center"><a href="#">Sección 1</a></td>
<td width="25%" align="center"><a href="#">Sección 2</a></td>
<td width="25%" align="center"><a href="#">Sección 3</a></td>
</tr>
</table>
</div>

<table width="100%" border="0">
<tr>
<td width="160" valign="top" id="menu">
<h4>Menú</h4>
<ul>
<li><a href="#">Sección1</a></li>
<li><a href="#">Sección2</a></li>
<li><a href="#">Sección3</a></li>
</ul>
<h4>Enlaces</h4>
<ul>
<li><a href="http://www.tuwebdeinformatica.com" target="_blank">Tu web de informática</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
</ul>
</td>

<td valign="top" id="contenido">
<h1>Bienvenidos a "Tu web de informática"</h1>
<p>Esta es una plantilla de ejemplo que se enseñará a hacer en el curso de creación de webs de la misma. Si durante la construcción tienes dudas recuerda que tienes el foro a tu disposición.</p>
<p>Como puedes ver las primeras líneas se meten más para adentro como efecto del text-indent, que si quieres puedes aumentarlo, disminuirlo o incluso quitarlo.</p>
<div align="center">
<object width="425" height="355">
<param name="movie" value="http://www.youtube.com/v/z-8W5BHJT30&hl=es">
</param>
<param name="wmode" value="transparent">
</param>
<embed src="http://www.youtube.com/v/z-8W5BHJT30&hl=es" width="425" height="355" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
</div>
</td>
</tr>
</table>

<div id="copyright">Copyright&copy; 2008 - Página creada por Juanma - Todos los derechos reservados</div>

</div>
</div>

</body>
</html>

estilo.css

body {background-image: url(imagenes/fondo.jpg); text-align: center}

#fondo {background-color:#FFFFFF; width: 820px; margin: 4px auto; padding: 6px 0px; text-align: center}

#global {margin: 0px auto; width: 800px}

#cabecera {background-image:url(imagenes/degradado1.jpg); height: 120px; margin: 0px 0px 4px 0px}

#logotipo {float:left; padding:13px 0px 13px 10px}
#banner {float:right}

#navegacion {margin: 0px 0px 4px 0px; background-color: #000066}

#menu {text-align:center; padding: 10px 0px 15px 0px; background-image:url(imagenes/degradado2.jpg)}
#contenido {padding: 10px 10px 10px 10px; text-indent: 15px; text-align: justify}

#copyright {font-size:0.7em; text-align:center; color:#000000}

#navegacion a {color: #CCCCCC; display:block; text-decoration:none; margin: 1px; font-weight:bold}
#navegacion a:link {}
#navegacion a:hover {color: #FFFFFF; background-color:#000000}
#navegacion a:active {color: #99FFFF}
#navegacion a:visited {}

#menu a {color: #CCCCCC; display:block; text-decoration:none; background-color: #1C1C1C; margin: 1px}
#menu a:link {}
#menu a:visited {}
#menu a:hover {color: #FFFFFF; background-color:#000000}
#menu a:active {color: #99FFFF}

ul {margin: 0px; padding: 0px; list-style: none}
h4 {color: #CCCCCC; font-weight: bold; font-size:20px}
h1 {font-size:25px}
h2 {font-size:20px}
h3 {font-size:15px}

Nuestra página se tendrá que ver así. Ahora las siguientes lecciones del curso las dedicaremos a profundizar en los códigos. Primero veremos los códigos css en la lección 2, y luego en la lección 3 veremos los códigos html. Esta lección nos ha servido como introducción para sentar las bases de estos dos lenguajes de programación y de esta forma en las siguientes lecciones podremos ir más rápido, ya que sólo tendré que nombrar los códigos y explicar para qué valen.

Nos vemos en la próxima lección ;)

atras
adelante

Volver a crear webs>>


Creada el 23/05/08 17:49
Copyright © - Todos los derechos reservados - Página creada por Juanma