Publicado en xhtml el 17/06/09 a las 08:43 am
Utilizo más de cinco, sin embargo hablar de estas es un buen comienzo para lo que sigue, por lo tanto aquí están las 5 etiquetas que más uso en XHTML.
<div>
La etiqueta div, tiene una etiqueta que abre <div>. u otra que cierra </div> es una etiqueta de bloque, que nos permite ordenar contenido dentro de ella. Y me atrevo a decir que es la etiqueta favorita de los estándares, pues le vino a dar killer a la mal usada <table>. Su sintaxis es:
<div>
otras etiquetas...
</div>
<p>
La etiqueta párrafo, tiene una etiqueta que abre <p> y otra que cierra </p> sirve para hacer párrafos, suena obvio pero por increíble que parezca, muchos sitios no la usan. Su sintaxis es:
<p>Aquí va mi párrafo</p>
<a>
La etiqueta de hipervínculo o de link, tiene una etiqueta que abre <a> y otra que cierra </a>. Dentro de la que abre <a> carga un elemento obligatorio href, así como otros elementos que la complementan. Su sintaxis es:
<a title=”Link al index” href=”index.html”>Link al index</a>
<img />
La etiqueta para llamar una imagen, es una sola etiqueta, la cual carga un elemento obligatorio en su interior src, así como otros elementos que la complementan. Su sintaxis es:
<img alt=”la imagen de un ave” src=”ave.jpg” />
<h1>
Las etiquetas de titulo, tiene una etiqueta que abre <h1> y otra que cierra </h1> así como tiene varios niveles h1, h2, h3, etc. Siendo h1 la ideal para utilizar en el titulo de un sitio, y es recomendable que solo exista una h1 por documento, y saber utilizar el resto para darle un nivel jerárquico a los títulos de cada documento. Por desgracia esta práctica poco común y muchas veces nos encontramos con sitios que no utilizan el <h1> para el titulo de su documento. La sintaxis es:
<h1>Este es mi título</h1>
Ahora bien, si hacemos un licuado con estas 5 etiquetas, tendríamos algo así:
<div>
<h1>Mi primer div</h1>
<p>Este es mi primer div, sacado de <a title=”Stanmx.com” href=”http://www.stanmx.com/”>Stanmx.com</a></p>
<p>En la parte inferior pueden ver la imagen de un perfect, ja!:</p>
<img alt=”perfect” src=”http://www.stanmx.com/photos/pablasso.jpg” />
</div>
En un próximo post, veremos la estructura básica de un documento XHTML.
Publicado en xhtml css el 21/07/08 a las 03:49 pm
Después de 3 años de no actualizar Un ejemplo de Formulario con XHTML y CSS me di la tarea este fin de semana, de hacer una nueva versión del mismo.
El nuevo ejemplo puede descargarse en formato Zip y ser utilizado libremente.
Aclaro que no es el formulario definitivo, pero si el estilo que mas me gusta trabajar y bastante cómodo para realizar las modificaciones que nuestro proyecto necesite.
Sugerencias para mejorarlo son bienvenidas.
Publicado en xhtml css el 07/07/08 a las 05:55 pm
El día de hoy me he visto en la necesidad de utilizar la etiqueta <hr /> la cual tenia mucho sin aplicar; y de la cual no recordaba como darle estilo.
Esta necesidad surgió de buscar separar visualmente unos párrafos de información sin la necesidad de hacer un div o aplicar una clase al párrafo o utilizar una imagen como separador.
El codigo XHTML seria:
<p>Parrafo uno</p>
<hr />
<p>Parrafo dos</p>
El codigo CSS seria:
hr {
margin: 0 20px 20px 20px;
background-color: #ccc;
color: #ccc;
height: 1px;
border: 0;
}
Me vi en la necesidad de utilizar background-color y color, para evitar problemas entre Firefox e IE.
Publicado en xhtml css tips el 27/09/07 a las 02:53 pm
Cada que me encuentro trabajando en un nuevo proyecto no puedo evitar consultar de vez en cuando mi viejo cuadernillo que hice con artículos de mini-d sobre XHTML, CSS y otros detalles.
Ese cuadernillo es como una pequeña guía de referencia que de vez en cuando me saca de algún apuro y el cual conservo con mucho recelo.
Pero bueno, no es de eso de lo que quería hablar, si no de una anotación que hice ahí, de un articulo que lei en mini-d y que tiene que ver con las comillas. El cual deseo compartir con ustedes.
Comillas: Se utilizan para indicar que las palabras que se encuentran en ellas son literales o reproducción exacta de algo dicho previamente. Pueden usarse para diferenciar el texto.
Este concepto se puede encontrar mas detallado en la Wikipedia.
Por lo regular cuando estamos desarrollando es muy sencillo agregar las comillas de forma automática junto con el texto. Pero lo cierto es que tenemos en XHTML una etiqueta especial para ello <q>
<q>Esto esta entre comillas</q>
“Esto esta entre comillas”
Unas comillas que me agradan mucho son las Comillas Españolas (« »), pues se escriben muy distintas a las acostumbradas.
Pues bien, una forma de cambiar nuestras comillas <q> a comillas españolas es a través de CSS. Con el siguiente código.
q { quotes:'\00AB''\00BB'; }
Y con ello podríamos tener nuestras comillas españolas presentes en nuestro sitio
.
Solo como ultimo detalle, este codigo no funciona en Internet Explorer (Gracias Microsoft).
Publicado en xhtml css el 05/07/05 a las 01:19 am
La semana anterior y parte de esta, me encuentro dando un curso a un cliente sobre XHTML y CSS, todo esto enfocado para que el cliente pueda al final realizar su sitio Web.
El temario lo hice para 5 horas, llevo 6 horas y media y aun faltan los dos ultimos incisos.
Aqui lo hago publico, principalmente me base en mis primeras experiencias con XHTML, CSS y los elementos que comunmente utilizo.
Espero puedan ayudarme a pulirlo y por que no, hagamos un Wiki online de como hacer un sitio Web, desde cero.
Publicado en xhtml el 19/05/05 a las 05:23 am
El d?a de hoy d?ndome una vuelta por los blogs de mis amigos, me encontr? con que Alejandro recomendaba la extensi?n Aardvark para dise?adores Web.
Hacia rato que ya hab?a visto que varios recomendaban la extensi?n, sin embargo no me hab?a animado a utilizarla, pero pues me anime a probar y me gusto.
Lo curioso es que si le quitas es CSS al sitio (view/page style/no style) en Firefox, la extensi?n no funciona. Yo la utilidad que le vi, es mas bien para personas que buscan ense?ar a otros como esta estructurado un sitio y que partes del mismo utilizan clases; as? como tambi?n para las personas que est?n aprendiendo a hacer c?digo mas estructurado (html/xhtml).
Creo que esta extensi?n es ideal para maestros de dise?o Web, as? que corran la voz, por si conocen a alg?n profesor de dise?o Web. En el tecnol?gico dar?n dise?o Web, seg?n la nueva ret?cula de Ingenier?a en Sistemas Computacionales, sin embargo, aun ignoro cual es el temario.
?Alguien tiene por ah? un temario de desarrollo o dise?o Web?
Publicado en xhtml el 23/04/05 a las 06:46 am
Esta madrugada he estadado jugando un poco con XHTML y CSS, para cambiar esto por esto.
Aun no termino, pero ya quede cansadon, espero me puedan dar sus opiniones y sugerencias, pues no estoy validando codigo.
- Actualización (Abril 23)
- Hoy se aplico el redise?o a la pagina oficial del evento innovatech.tk el dia de hoy y ma?ana continuare modificandola.
- Thanks por los comentarios.
- Actualización 2 (Abril 23)
- el anterior dise?o se encuentra en http://www.freewebs.com/sistemasitt/, para los que ya no lo vieron.
Publicado en xhtml el 13/04/05 a las 03:12 pm
Juan G. Hurtado lleva alg?n tiempo escribiendo unos posts muy interesantes sobre carga sem?ntica en XHTML.
En ellos explica la utilizaci?n de las etiquetas XHTML y su uso, as? como lo que se debe y no se debe de hacer con ciertas etiquetas.
Por mi parte he sacado muy buenos tips y he aprendido varias cosas que desconoc?a, as? que Juan s?guele echando ganas.
Publicado en xhtml el 06/03/05 a las 01:48 am
Leyendo el blog de Pedro, me entero de que ha estado trabajando en un editor WYSIWYG para su proyecto de tesis.
Lo interesante de este editor, es que genera codigo XHTML valido. Cosa que es algo dificil de encontrar en los editores libres que se encuentran disponibles en la red.
Yo actualmente me encuentro escribiendo los actuales Post's a pie, sin embargo estoy pensando seriamente mudarme al editor que esta publicando Pedro.
Una felicitaci?n a Pedro por el trabajo realizado y suerte con esa tesis.