Cristalab

Estás en: Cristalab > Tips > Crea tu primera web en HTML y CSS

Crea tu primera web en HTML y CSS

Por: Inyaka + 31.05.2007

Para un concurso o mas bien para mí, hice este tip que espero le pueda servir a quien se inicia en estos pasos y quiere hacerlo por el buen camino.

Espero que no estés nervios@ con empezar este tip, para el cual vamos a usar un texto en latín, claro que tu lo puedes cambiar por un texto de tu interés (ya sea tu cantante favorito, tu linda familia o el diccionario de groserías locales), además un pc común y corriente y por lo menos 4 tazas de café.

Nota: existen muchos editores de html. Tú vas a elegir el que más te acomode. En mi caso yo uso editplus.

Comenzando


Todo escrito tiene un título ("mi novela", "mi gato", "sitio oficial de buenona raider", etc...) y un contenido (bla bla bla bla bla). Aquí vamos a aprender a darle formato a todos estos elementos.

tomemos el siguiente texto:

Código :

Lorem ipsum dolor 
sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur rclassiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincclassunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit class, lorem. Maecenas nec odio et ante tincclassunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincclassunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.


uff que fome
Como vemos, no tiene ningún formato. Esto no lo podemos presentar en la web y esperar que nos lean.

Aplicando formato


"Lorem ipsum dolor" es el título del artículo, y el resto (sit amet, consectetuer adipiscin, etc..) es el contenido, entonces "Lorem ipsum dolor" es el encabezado, en inglés se dice "header", entonces le decimos "header".

Mejor aún, como es el encabezado más grande o principal lo llamamos "h1" y a todo el resto le llamamos "articulo". ¿Por que?, pregunta tonta me extraña, ¡por que es un artículo!. Bien no me sigan interrumpiendo por que pierdo el hilo de laaaa conversación, ¿que tal el vídeo de...? (inyaka concéntrate)...

Bien si a "h1" le decimos "<h1>" y a articulo le decimos "<articulo>" y cuando acaba la palabra o frase dentro de "<h1>" avisamos así "</h1>" a modo de cierre, y cuando acaba "articulo" lo avisamos así "</articulo>", y obtenemos lo siguiente:

Código :


<h1>Lorem ipsum dolor</h1>
<articulo>sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur rclassiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincclassunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit class, lorem. Maecenas nec odio et ante tincclassunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincclassunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. </articulo>


¿Que simple no? jejejejeje es muuuchooooo más complicado de lo que parece, whaaaaahaaa... Sucede que el formato html(o xhtml que es casi lo mismo) conoce ciertas etiquetas(todo lo que este entre < > es una etiqueta) y "artículos" no la conoce, no es una etiqueta de html, la inventaste tú (lo invente yo pero a tí te echo la culpa).

Creando clases


Pero yo quiero que esto se llame artículo, ¿cómo hago?
Bien las etiquetas que tu navegador conoce de html, las conoce por su nombre y sabe lo que son, por ejemplo, sabe que <h1> es un encabezado con una letra muy grande, que <h2> es un encabezado con una letra mas pequeña, también sabe que otras etiquetas pueden hacer cosas especiales, como <img> que puede traer una imagen (si, una foto jpg de tu lindo gatito), <a href> se refiere a un link y te traslada a algún sitio, en fin ¿como esta el clima en tu ciudad? en mi ciudad empieza a hacer calor estamos en primavera (inyaka concéntrate)...

En fin, estábamos en que "artículos" lo inventaste tú. Entonces, existe cierta etiqueta, especialmente hecha para llamarse artículo, o como se te venga en gana (a una etiqueta muy querida la llame pedrito), ésta etiqueta, se llama "<div>" y funciona así: "<div class="LoQueSea">" - que en humano significa: a este div le asignas el nombre de -"LoQueSea"- entonces esto quedaría así:

Código :


<h1>Lorem ipsum dolor</h1>
<div class="articulo">sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur rclassiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincclassunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit class, lorem. Maecenas nec odio et ante tincclassunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincclassunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. </div>


Cabe notar que cuando quiero decir algo que el navegador "internet explorer" o "firefox" ( si te gusta usar un buen navegador usa firefox) no lo tome en cuenta lo digo así:

Código :

<!-- texto que no quiero que se tome en  cuenta -->


A esto se llama comentario. Bien seguimos con tu primera web.

Estructura de nuestra página


¿Qué sentido tiene decir que div se llame artículo?. Buena pregunta, me sorprende tu sagacidad. Sucede que ahora puedo decir que "artículos" se vea de cierta forma y esté donde yo quiera que esté, ¿cómo?, bien sucede que todos tenemos jefes, sí, piensa en el maldito que te paga el pan de cada dia, el jefe de tu html se llama "css" y si éste conoce a su empleado puede hacer lo que quiera con él (sí, escuchaste bien: "lo que quiera"). Vamos entonces a llamar a nuestro jefe, pero antes vamos a decir que nuestro texto es un html:

Código :


<!-- lo que va dentro de estas etiquetas es un comentario -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//ES"> 
<HTML> <!-- le decimos al navegador que esto es un archivo html para que lo interprete como tal --> 
<HEAD>
   <TITLE> Mi Primera Web</TITLE> <!-- el título que aparece arriba en tu navegador  -->
    <!-- aca se pone todo lo que debe ir antes del cuerpo de tu web, por ejemplo indicar cuál es su jefe (css) -->
</HEAD>
<BODY><!-- empieza el cuerpo (o contenido) de tu web -->   

   

</BODY><!-- termina el cuerpo de tu web -->   
</HTML><!-- termina tu web -->

Si bien aún no hemos hecho nada increíble, ten paciencia, que esto va a resultar como que me llamo inyaka (la verdad, es solo mi nick).

ahora ponemos en el cuerpo nuestro contenido:

Código :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//ES">
<HTML>
<HEAD>
   <TITLE> Mi Primera Web</TITLE>
</HEAD>
<BODY>
<h1>Lorem ipsum dolor</h1>
<div class="articulo">sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur rclassiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincclassunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit class, lorem. Maecenas nec odio et ante tincclassunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincclassunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. </div>
</BODY>
</HTML>


Ahora guarda esto como index.html (index es la página que el servidor abre por defecto) en la carpeta primera_web y previsualiza en tu editor o navegador. ¿Ves como empieza a tomar forma?

Aplicando estilos


Ahora vamos a decirle a nuestra web quién es su jefe (CSS), para lo cual tenemos dos métodos:

Código :

<link rel="stylesheet" media="all" type="text/css" href="tu_estilo.css" />

que en humano significa: tu jefe se llama "tu_estilo.css"
el estilo se llama dentro de la cabeza (<HEAD>) así:

Código :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
    <link rel="stylesheet" media="all" type="text/css" href="tu_estilo.css" /> 
   <TITLE> Mi Primera Web</TITLE>
</HEAD>
<BODY>
<!-- contenido-->   
</BODY>
</HTML>

o también puedes colocarlo directamente en tu html dentro de las etiquetas

Código :

<style> </style>

¿y cómo ordena el jefe?
bien, antes de esto aclaremos que css puede ordenar a:
- clases como <div class="mi_clase"> anteponiendo un punto antes del nombre, de esta manera:

Código :

.mi_clase{/*esto es un comentario en css*/}

- id como <div id="mi_clase"> anteponiendo un gato antes del nombre de esta manera:

Código :

#mi_clase{/*acá van todas las ordenes*/}

- o a una etiqueta propia de html tal como <body>, <a>, <img> etc... simplemente así:

Código :

body{/*órdenes a seguir*/}

Para que podamos ir visualizando nuestra web vamos a usar la etiqueta <style> dentro del head.

Los colores se nombran en numeros hexadecimales del 0 al 15 (se representan del 0 al f) en 3 pares representando los paleta RGB (rojo, verde, azul) asi #ff0000 (color rojo), bien manos a la obra:

Contenido de index.html

Código :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//ES">
<HTML>
<HEAD>
   <TITLE> Mi Primera Web</TITLE>
   <style>
   body {
        background:#0080FF ;/* el fondo de todo el cuerpo*/
        padding: 20px; /*el espacio entre el borde y su contenido*/
    }
   h1 {
   color: #CAFD00;
   }
    .articulo {
   font-size: 14px; /*tamaño de la fuente en pixeles*/
   font-family: Verdana; /*tipo de fuente*/
    background: #7400E8; /*color de fondo para artículo*/
   border: 6px solid #CAFD00;/*tamaño, forma y color del borde de artículo*/ 
   color: #FFFFFF;/*color de las letras*/
   padding: 13px; /*ya lo vimos*/
    }
   </style>
</HEAD>
<BODY>
<h1>Lorem ipsum dolor</h1>
<div class="articulo">sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur rclassiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincclassunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit class, lorem. Maecenas nec odio et ante tincclassunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincclassunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. </div>
</BODY>
</HTML>

Puedes previsualizar en tu editor html o navegador y verás lo bonito que está quedando.

Generando la navegación del sitio


Ahora vamos a usar 2 nuevas etiquetas de html para continuar con esto:
- etiqueta <a> para hacer ir a otro lugar (link).

sintaxis:

Código :

<a href="direccion.html">¿dode quieres ir?</a>


- etiqueta <img> para traer una imagen a la web.

sintaxis:

Código :

<img src="ruta_de_tu_foto/imagen.jpg" border=0 alt="comentario hacerca de tu foto" />


Vamos a guardar una foto llamada mi_foto.jpg en la carpeta img, dentro de la carpeta primera_web
y vamos a crear 3 páginas mas: abc.html, cba.html, cab.html. Para que todas utilicen el mismo estilo vamos a crear un archivo de estilo mi_estilo.css para que todas las páginas estén bajo sus órdenes, y para ir a cada página vamos a crear un menú con la etiqueta <a>

Contenido de abc.html

Código :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//ES">
<HTML>
<HEAD>
 <link rel="stylesheet" media="all" type="text/css" href="mi_estilo.css" /> 
 <TITLE> abc </TITLE>
</HEAD>
<BODY>
 <div class="menu">
    <a href="abc.html">abc</a>
    <a href="bca.html">cba</a>
    <a href="abc.html">cab</a>
 </div>
<h1>Estas en abc </h1>
<div class="articulo">eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus etc...
</div>
</BODY>
</HTML>


Contenido de bca.html

Código :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//ES">
<HTML>
<HEAD>
 <link rel="stylesheet" media="all" type="text/css" href="mi_estilo.css" /> 
 <TITLE> bca</TITLE>
</HEAD>
<BODY>
 <div class="menu">
    <a href="abc.html">abc</a>
    <a href="bca.html">cba</a>
    <a href="abc.html">cab</a>
 </div>
<h1>Estas en bca </h1>
<div class="articulo">Nam eget dui. Etiam rhoncus Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. eleifend ac, enim. Curabitur ullamcorper ultricies nisi. etc...
</div>
</BODY>
</HTML>


Contenido de cab.html

Código :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//ES">
<HTML>
<HEAD>
 <link rel="stylesheet" media="all" type="text/css" href="mi_estilo.css" /> 
 <TITLE> cab </TITLE>
</HEAD>
<BODY>
 <div class="menu">
    <a href="abc.html">abc</a>
    <a href="bca.html">cba</a>
    <a href="abc.html">cab</a>
 </div>
<h1>Estas en cab </h1>
<div class="articulo">eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus etc...
</div>
</BODY>
</HTML>


Luego en la carpeta primera_web creamos ,mi_estilo.css :

Código :


body {
    background:#0080FF ;
    padding: 20px; 
}
h1 {
    color: #CAFD00;
}
.articulo {
   font-size: 14px;
   font-family: Verdana; 
     background: #7400E8; 
   border: 6px solid #CAFD00;
   color: #FFFFFF;
   padding: 13px;
}
/*en adelante el estilo del menu y sus botones */
.menu{
    background:#ACD700;
    padding: 10px; 
}
   A:link, A:visited {
  text-decoration: none;/* para evitar el subrayado*/
  color: #CAFD00;
  padding: 0 0.5em;
  font-size: 16px;
  border: 3px groove #003737;
  background: #7400E8;
    font-weight: bold;
} 
 
A:hover, A:active {
  text-decoration: none;/* para evitar el subrayado*/
  color: #CAFD00;
  padding: 0 0.5em;
  font-size: 16px;
  border: 3px groove #003737;
  background: #A851FF;
    font-weight: bold;
}


Ahora ya estamos terminando, para finalizar vamos a modificar nuestro index.html:

Código :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//ES">
<HTML>
<HEAD>
 <link rel="stylesheet" media="all" type="text/css" href="mi_estilo.css" /> 
 <TITLE> mi primera web </TITLE>
</HEAD>
<BODY>
 <div class="menu">
    <a href="abc.html">abc</a>
    <a href="bca.html">cba</a>
    <a href="abc.html">cab</a>
 </div>
<h1>mi primera web</h1>
<div class="articulo">Has finalizado tu primera web ahora incluso puedes poner tu linda foto en la portada (si eres mujer) si eres hombre no pierdas el tiempo y mejor coloca la foto de tu equipo favorito (de volleyball femenino)
<img src="ruta_de_tu_foto/imagen.jpg" border=0 alt="mi equipo favorito" />
</div>
</BODY>
</HTML>


Ahora tú investiga para qué sirven las etiquetas de la wc3 (es quien fija las etiquetas):
http://www.w3c.es/Divulgacion/GuiasReferencia/XHTML1/

Además visita estos links de interés que de seguro te han de servir mucho:
http://www.cssplay.co.uk/
http://www.disenorama.com/

Etiquetas css

Comentarios | Enviar un comentario
Esta fantástico Inyaka. Un gran esfuerzo de concentración.. Riendo

De todas formas no me quedó muy clara la diferencia entre estos 2 elementos:

inyaka :

- clases:

Código :

.mi_clase{/*esto es un comentario en css*/}
- id:

Código :

#mi_clase{/*acá van todas las ordenes*/}
Es decir, como sabemos que hay que usar una o otra?

Bueno, igualmente felicidades, esta todo muy ameno para la lectura. miau
Por: Bleend
Todavía no me he leído el tuto, pero seguro que lo voy a hacer, probablemente esta noche.
Ahora quiero darte las gracias por este esfuerzo que has hecho y tu generosidad para compartirlo con los que no sabemos.
¡Gracias, de verdad!
Por: joseclon_blog

Bleend :

Es decir, como sabemos que hay que usar una o otra?


el id es para un elemento único, la clase se puede usar repetidas veces y en diferentes elementos. básicamente un id solo se usa una vez.
Por: Mariux

Mx :

el id es para un elemento único, la clase se puede usar repetidas veces y en diferentes elementos. básicamente un id solo se usa una vez.
Mmmm... Entonces seria mejor usar siempre clases, no? Sin embargo se usa el id. Aw Crap
Gracias MX
Por: Bleend
Ojo eso es html, no xhtml. Pues el xhtml define que todas las etiquetas deben ser con las letras en minusculas.

Otra cosa que note inyaka, es que debiste usar la etiqueta p en vez de <div class="articulo">, para darle semántica.

Bleend un id solo lo debes usar una vez por documento, las clases tantas veces quieras. Los id se usan muchas veces es para las grandes divisiones de la pagina y elementos del formulario.

saludos






[/b]
Por: Maikel
como quiero ha esta comunidad por comentarios como estos, excelentes acotaciones miau

de todos modos muchas cosas se pasan por alto para no confundir al mas novato, osea es un tuto orientado a mi abuela o madre Riendo
Por: Inyaka

Bleend :

Mmmm... Entonces seria mejor usar siempre clases, no? Sin embargo se usa el id. Aw Crap
Gracias MX


no, porque por ejemplo si tenes un header, este lo usaras solo una vez, a ese le corresponderia un id , y a ese id tambien le podes adherir una clase si lo nesecita.
Por: Mariux
Sin embargo, esto se puede hacer igualmente, ¿no?

Código :

#header {
   //nada
   }

Lo único que debes tener cuidado al asignar las clases a los div para que no se repita y ya. ¿Me equivoco?
Por: Bleend
de poder se puede y quizás hasta puedas validar pero...

si tienes muchas clases ¿no se te seria mas cómodo tener separado en tu css los elementos unicos de las clases?
ademas de el echo que un mismo objeto puede tener un id y una clase

otros puntos importantes que no puse para evitar confundir primerizos es que
a casi cualquier etiqueta la puedes identificar como clase o id.
y que por semántica -esa cosa para que los ciegos y los robotitos de google te vean- el menú debe ir en algún tipo de lista ademas de que si, en vez de div debí usar <p></p> que por semántica significa párrafo
Por: Inyaka
Bleend para que entiendas un poco mejor, y más descriptivos sabes que son los anclas? cuando yo te doy una url de este tipo en clab
http://www.cristalab.com/foros/viewtopic.php?p=273225#273225

Cierto que el scroll bar del navegador se mueve directamente a donde esta ese post?

Pues eso en verdad y por recomendacion de la W3C se hace con los id. Asi que con analizar un poco eso sabemos que un id no se puede repetir, porque sino no nos serviria bien el ancla.

Ahora no estoy diciendo con esto que debes usar id solo cuando vayas a usar ancla, pues tal como te dije y como coloco el ejemplo Mx, un header es una división que no se repite, otras serian content, footer, etc.

saludos
Por: Maikel
hey gracias por el tuto esta bien explicado y me ha ayudado mucho espero que crees una segunda parte explicando mas cosas para un mejor diseño web
Por: Rikardo_blog
Muuy bueno!... hace un par de meses me hubiera servido mas Triste pero bueno jeje..
Por: tomydb
OK, gracias a todos.
Ya lo tengo mas claro.
Sonrisa

Ya dije, buen tip inyaka.
Por: Bleend
Buen trabajo inyaka...

Hace unos meses te hubiera alabado por este tip U_Un
Por: elfleat
no postea mis comentarios
solo quiero darte laas gracias porque ya hice mi web y me quedo hermosa Guiño
Por: ai :(_blog
fantastico, no secasi nada de css, esto es genial
Por: penholder_blog
ta chido
Por: r0cc0_blog
He visto un par de ligeros problemas en todo el tip.

Primero, en XHTML 1 y HTML 4 todas las etiquetas siempre deben estar en minúsculas, cuestión de sintaxis.

Segundo, cuando uno enseña semántica también debe enseñar que el párrafo es la 2da etiqueta más usada en la web.

Código :

<div id="articulo">
<p>Párrafo</p>
</div>


Buen tip inyaka.
Por: neojp_blog
EXCELENTE NO HABIA ENCONTRADO UN BREVE MANUAL KE ME ENSEÑARA LA SINTAXIS DE CSS

GRACIAS EN VERDAD
Por: MORRO_blog

MORRO_blog :

Excelente no había encontrado un breve manual que me enseñara la sintaxis de CSS

Gracias en verdad

La mejor forma de aprender CSS es en el DreamWeaver y trastear y probar los parámetros. U_U
Por: Bleend
en lo personal soy de la escuela de que nada automatico hace las cosas bien, te lo digo por que cuando tengo que maquetear al que ha sido echo por un "genio del DW" me encuentro con atrocidades dignas del gore italiano.

en verdad para aprender xhtml y css lo mejor es ver paginas validadas como la de esta estupenda galeria http://www.csselite.com/ pongo mis manos al fuego por cualquiera de estas paginas *inyaka saca sus guantes de fundición
ademas de por supuesto los links que di al final del tip/tutorial, esta misma web y nuestro siempre fiel google.
Por: Inyaka
jojojo, excelente tip, excelente los comentarios, un muy buen tuto...
Por: Ben-uR_blog
Muy bueno hasta ahora habia visto muchos lugares que me indicaban esto y aquello pero aqui pude entender lo que queria y lo he recomendado a muchos amigos, ojala sigan asi.
gracias Inyaka
Por: Javier R_blog
Gracias, compañero <b>inyaka</b> por este tip. Hasta ahora, no entendí casi nada en otros lugares y con vos pude empezar a trabajar en serio...
Ya sé que hace mucho tiempo que escribiste esto, pero no está demás que a la distancia te manden un saludo. Gracias otra vez.
Además, me gusta mucho e diseño de esta página y por lo que he visto, hay muchísimo por aprender... Allá voy.
Por: chichobey-blog
Muy bueno...un exelente esfuerzo...y un gran tuto....no queda mas que decir GRACIAS... miau
Por: Z3R0
Deja un comentario
IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.