Tag Archive for: html

02Feb 2009 8 Comments

menu usando ul y li

Categories: CSS, Diseño - Tags: , ,

En este tutorial voy a explicar como crear un menu para nuestra página web usando unicamente las etiquetas ul y li

Estructura del la lista ul li

Nuestro código html es muy sencillo únicamente hay que crear un listado (ul) y agregar los items del listado que sería cada li y todo esto dentro de un div al cual llamaremos menu

1
2
3
4
5
6
7
8
<div id="menu">
<ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Nosotros</a></li>
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Contacto</a></li>
</ul>
</div>

Dándole forma al UL con estilos

Si vemos sólo el html veremos un menu vertical bastante alicaido, ahora vamos a hacer que la hoja de estilos se encargue de darle forma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
body {
    color: #333333;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
}
#menu {
    margin:auto;
    padding-left:20px;
    padding-top:5px;   
    height:25px;
    width:320px;
    background-image:url(nav_bg.png);
}
#menu ul{
    list-style:none; /* Eliminamos los bullets */
    margin:0px; /* Quitamos los margenes */
    padding:0px; /* Quitamos el padding */
}
#menu ul li {
    float:left; /* Hacemos que el menu se muestre horizontal */
    padding-left:10px;
    padding-right:10px;
    border-right:1px solid #FFFFFF;
}
#menu ul li a{
    text-decoration:none;
    color:#CCCCCC;
    font-weight:bold;
}
#menu ul li a:hover{
    color:#FFFFFF;
}

Si revisamos el código CSS, vemos que poco a poco defino el fondo, la foma en que mostrarán los items, le aplico colores a los links y va tomando forma nuestro menu.
Si estás buscando un menu con submenus, y menus desplegables, revisa este tutorial

Otros post sobre maquetación CSS

06Jan 2009 5 Comments

Agrega metatags a tu pagina

Categories: Otros, Posicionamiento - Tags: , ,

Cuando buscamos una página web en google o yahoo vemos que aparece una descripción del contenido, sin embargo nuestras páginas no aparecen con la descripción que quisieramos o aparecen cosas sin sentido, ¿Cómo arreglo eso? Pues usando metatags

¿Qué son los metatags?

Las metatags son etiquetas html que se incorporan en el encabezado de una página web y que resultan invisibles para un visitante normal, pero de gran utilidad para navegadores u otros programas que puedan valerse de esta información.
Su propósito es el de incluir información (metadatos) de referencia sobre la página: autor, título, fecha, palabras clave, descripción, etc.
Esta información podría ser utilizada por los robots de búsqueda para incluirla en las bases de datos de sus buscadores y mostrarla en el resumen de búsquedas o tenerla en cuenta durante las mismas y será invisible para un visitante normal.

¿Cómo uso los metatags?

Debemos incluirlos entre las etiquetas “head” (encabezado de nuestra página web), los más importantes son:

1
2
3
<meta name="title" content="Titulo de nuestra página" />
<meta name="keywords" content="palabras, claves, separadas, por, comas" />
<meta name="description" content="Una breve descripcion de nuestra página" />

Es importante recordar que los buscadores usan principalmente la descripcion y el titulo de los metatags para realizar las busquedas por lo que debemos ser muy cuidadosos para elegirlos.

02Dec 2008 1 Comment

Eliminar HTML con PHP

Categories: PHP - Tags: , , ,

Cuando creamos una pequeña aplicacion donde los usuarios puedan dejar comentarios ya sea un blog un guestbook, etc; siempre corremos el riesgo que usuario maliciosos peguen etiquetas html con propaganda, links a otros sitios, codigo javascript etc, etc. En PHP es realmente simple evitar eso basta con usar una funcion PHP que nos hará muy fácil la vida llamada strip_tags().

Por ejemplo:

1
2
3
$saludo= '<strong>Hola mundo!</strong>';
echo strip_tags($saludo) ;
/// Eso nos devuelve Hola mundo!

Hasta ahi bastante util pero que ocurre si deseamos permitir alguna etiquetas inofensivas como <b>, <i>, <p>, etc.

Pues la solucion es:

1
2
// Se permite la etiqueta <p>
echo strip_tags($texto, '<p>');

Suscribete

Ahora también puedes suscribirte via correo electrónico

Ingresa tu dirección de correo:

Delivered by FeedBurner


Facebook

Mi Galeria flickr

[ Ver más ]

© Copyright - Miguel Manchego - Design by Kriesi