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:
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/
Esta fantástico Inyaka. Un gran esfuerzo de concentración..
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. 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. 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.
como quiero ha esta comunidad por comentarios como estos, excelentes acotaciones
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 Por:Inyaka
Bleend :
Mmmm... Entonces seria mejor usar siempre clases, no? Sin embargo se usa el id. 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.
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 pero bueno jeje.. Por:tomydb
Hace unos meses te hubiera alabado por este tip n Por:elfleat
no postea mis comentarios solo quiero darte laas gracias porque ya hice mi web y me quedo hermosa 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. 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... Por:Z3R0
JAJAJAJAJAJA La verdad Inyaka se me hace un tip muy bueno para iniciar a las personas que empiezan el desarollo web a tener buenas practicas del aprovechamiento del CSS, lo haces muy digerible, gracioso y facil de entender te felicito, y si bien tiene detalles como los que comenta Maikel, lo importante creo yo es que nos de una buena referencia para aquellos que queremos utiliar las hojas de estilo y no nos animamos, por desconocimiento o por falta de costumbre. Por:rafaelpl
por cierto por que el comentario de *inyaka saca sus guantes de fundición que se me hace curioso al decir que pones tus manos al fuego, y tambien cuando comentas: Si la persona que amas te es infiel y quieres tirarte por la ventana recuerda:
"Te pusieron los cuernos no alas"
Que me hace pensar que disfrutas de las curiosidades de la vida tanto como el desarrollo web Por:rafaelpl
Hola maestros del HTML necesito una pequeña ayudadita, voy empezando a hacer paginas y quisiera que me ayudaran porfavor. Resulta que tengo un boton en una pagina html y al presionarlo me trae otra, pero necesito que la pagina aparezca de un tamaño determinado y que no se pueda modificar digamos de 900x800 como puedo hacerlo?? Por:vick-sparrow
5mentarios Por:Harry-blog
estan jevi los ejmplos pero ,mejor por que no hacer un ejemplo mucho mas claro,como, un ejemplo drastico de una wed supre clara Por:Grabiela-blog
quieroque me ayudena crear un pagina que sea mia por que no se como hacerlo muchas gracias Por:milagros-blog
Hola IntiyaK!! gracias por el tuto, esta muy bueno, y me gustan los comentarios de desconcentracion que haces, como para relajar un ratito
No se si me equivoque, tal vez aun no le he dado un buen uso al DreamWeaver, pero me parece mas facil (o menos dificil ) crear el HTML manual (uso el TextMate en Mac) que en DreamWeaver, me sale todo como quiere, no como quiero.
Bueno... me voy a pasar el dia navegando por el tip que ya lei los titulos y hay muchos que me interesan
) crear el HTML manual (uso el TextMate en Mac) que en DreamWeaver, me sale todo como quiere, no como quiero. 
pero bueno jeje..