 |
| home.html |
Empecé por el final, es decir, mostrando como quedará muestra “home.html”.
La razón de que así sea es por que hay elementos dentro del HTML que aún no he explicado y es una oportunidad genial para hacerlo.
Empecemos…
Lo que puede verse al final de la home (la imagen que dice W3C) es algo muy importante y es en realidad el objetivo de este post.
Esa imagen demuestra que ese documento HTML fue validado por la W3C (eso mismo puede leerse en la home, pues ahí lo aclaro).
La W3C (World Wide Web Consortium) es el organismo que regula los estándares del HTML, CSS, entre otros.
Ella es la que define como se deben abrir y cerrar las etiquetas, cuando usar el “ />” del que tanto hablamos con anterioridad. En definitiva es la entidad que nos dirá como hacer las cosas y nos informará de nuestros errores, si es que así se lo pedimos.
Pero ustedes se preguntarán ¿para que validar mi web?.
La respuesta es muy simple, una web aprobada por la W3C significa que esta cumple con todos los estándares y por ende debería funcionar igual en cualquier navegador, aunque no siempre es así por eso el “debería”.
Dicho esto comencemos con las aclaraciones y agregados para este post.
Comenzaré detallando las cosas que veremos a continuación que son nuevas para nosotros y en esta entrada del blog las aprenderemos:
• La definición de tipo de documento (<DOCTYPE>).
• Atributo “width” en Tablas.
• La etiqueta <meta>.
• La definición del juego de caracteres.
• La etiqueta <s>
• La etiqueta <acronym>.
• La etiqueta <abbr>.
• Caracteres especiales en HTML.
No empezaré por el orden de la lista, eso solo era a modo ilustrativo, comenzaré con las mas simples para finalizar con las mas importantes.
El atributo “width” en las tablas
Como ya deben imaginar es igual al atributos width en las imágenes y otras etiquetas por ende iré directo a su sintaxis:
<table width=”800”>
La etiqueta <s>
Esta etiqueta sirve dentro del HTML para tachar el texto que este contenido dentro de ella, veamos un ejemplo visual de la página home:
 |
| Etiqueta <s> |
Así es la sintaxis:
<s>si leen otros blogs especializados en el tema, tal vez, también</s>
La etiqueta <acronym>
Esta etiqueta es muy interesante y no es muy conocida. Podría decirse que funciona como el atributo “title” dentro de las imágenes, por el solo hecho de desplegar un tooltip con información, pero en este caso la etiqueta tiene como función informarle al usuario que significan determinadas siglas. Veamos un ejemplo visual tomado de la home:
 |
| Etiqueta <acronym> |
La sintaxis es la siguiente:
<acronym title=”Hipertexto Markup Language”>HTML</acronym>
El contenido del atributo “title” es el que se muestra en el tooltip.
La etiqueta <abbr>
Esta etiqueta es similar a la etiqueta <acronym> puesto que también despliega un tooltip con la información contenida en su atributo “title”. La diferencia radica en que <abbr> se utiliza para aclarar abreviaturas. Veamos un ejemplo visual tomado de la home:
 |
| Etiqueta <abbr> |
La sintaxis es la siguiente:
<abbr title=”World Wide Web Consortium”>W3C</abbr>
Como dijimos anteriormente el contenido del atributo “title” es el que se muestra en el tooltip.
La etiqueta <meta>
La etiqueta <meta> se utiliza dentro de HTML para proporcionar meta-datos que poseen cierta información relevante en muchos aspectos. Esta información no será visible para el usuario dentro de la pagina, sin embargo y dependiendo de para que sea, si será tenida en cuenta, por ejemplo, por el navegador, por un buscador, etcétera.
En esta etiqueta se puede ingresar, por ejemplo, el nombre del autor de la página, las keywords o palabras claves, el juego de caracteres que utilizara el documento HTML, etcétera. Más adelante las iremos viendo a medida que las vayamos necesitando.
Definición del juego de caracteres
Como será la primera vez que veamos la utilización de la etiqueta <meta> y para no extendernos demasiado en el asunto iremos directo al código y explicaremos solo lo que respecta al juego de caracteres quizás mas adelante, y en caso de necesitarlo, no extendamos mas en el asunto.
Esta es la sintaxis para definir el juego de caracteres a UTF-8, este formato es capaz de representar cualquier carácter Unicode así como también incluye la especificación US-ASCII de 7 bits, por lo que puede representar cualquier mensaje ASCII sin cambios.
Es la codificación “favorita” de correos electrónicos y paginas web.
La sintaxis es la siguiente:
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”>
Definición del Tipo de Documento [DOCTYPE]
El DOCTYPE es una etiqueta que debe escribirse antes que cualquier otra, en nuestro caso antes que la etiqueta <html>.
Esta etiqueta tiene como función informarle a nuestro navegador que versión del lenguaje de marcado (HTML) estamos usando, así como también proporcionarle la referencia al Documento de Definición de Tipo (Document Type Definition [DTD]). Este documento especifica las reglas para el lenguaje de marcado utilizado, para asé, el navegador, poder mostrar el contenido de la página correctamente.
A continuación les daré los tres tipos de DOCTYPE para HTML, mas adelante veremos otros.
DOCTYPE para HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
DOCTYPE para HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC “-//W3C/DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
DOCTYPE para HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC “-//W3C/DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>
Para nuestra “home.html” utilizamos el HTML 4.01 Transitional
Ahora bien, pero ¿Por qué hay mas de uno?.
La razón es muy simple, con el paso del tiempo los estándares de la W3C van cambiando, sin embargo, otros se mantiene.
Es muy común que cosas que antes se utilizaban mucho después de un tiempo dejan de funcionar o se declaren obsoletas pero para que de pronto todas las paginas que validaban no se queden sin validar existen diferentes DTD.
El DTD para HTML Strict es el que NO permite etiquetas que se hayan declarado en desuso por la W3C, como ejemplos de estas tenemos a <font> una etiqueta que veremos próximamente y sirve para cambiar la fuente del texto.
Este tipo de etiquetas (etiquetas de estilo de párrafo) cayeron en desuso cuando la W3C acepto como nuevo estándar para el diseño de páginas web al CSS.
Pero para todos aquellos que aun no habían comenzado con el CSS y aun poseían sus clásicas etiquetas de <font> se les recomienda utilizar el DTD para HTML Transitional. Este DTD lo podemos usar cuando tenemos páginas viejas y de a poco vamos introduciéndonos en los nuevos estándares, este DTD nos permite convivir lo nuevo con lo viejo., sin embargo no nos permite el uso de Frames
El DTD para HTML Frameset es igual que el Transitional con la diferencia de que este sí permite Frames (Marcos), algo que ya es sumamente obsoleto y no gastaré tiempo en explicarlo.
Caracteres especiales en HTML
En pocas palabras podemos decir que los caracteres especiales de HTML son aquellos que utilizamos mediante códigos.
Un ejemplo de carácter especial podría ser por ejemplo “ó” (O acentuada). Parece algo trivial, sin embargo, anteriormente cuando no existían los juego de caracteres extendidos para el español debíamos utilizar los códigos específicos para HTML con el fin de que el navegador los entienda.
Hoy mediante la utilización de UTF-8 ya no tenemos esa clase de problemas pero de todas formas le mostraré lo siguiente:
La siguiente imagen es de un HTML que no tiene definido el juego de caracteres a UTF-8 vean lo que sucede cuando tratamos de utilizar acentos:
 |
| Sin definición de caracteres |
Veamos el mismo ejemplo pero habiendo definido el juego de caracteres a UTF-8
 |
| Con definición de caracteres |
En este caso ambos “también” como el “así” se ven de manera correcta.
Entonces ustedes me preguntarán ¿Entonces si con UTF-8 se ven bien los acentos para que hacer este apartado?.
Bueno, quizás podríamos decirle “nostalgia”.
Pero en fin a continuación veremos una tabla reducida, puesto que hay muchos símbolos, de los mas “populares”.
Dato a tener en cuenta: cada código comienzo con “&” y finaliza con “;”.
| Nombre | Codigo | Simbolo |
|---|---|---|
| Copyright | © | © |
| Registrado | ® | ® |
| C Cedilla | Ç | Ç |
| c Cedilla | ç | ç |
| A acentuada | Á | Á |
| a acentuada | á | á |
| E acentuada | É | É |
| e acentuada | é | é |
| I acentuada | Í | Í |
| i acentuada | í | í |
| O acentuada | Ó | Ó |
| o acentuada | ó | ó |
| U acentuada | Ú | Ú |
| u acentuada | ú | ú |
| U con diéresis | Ü | Ü |
| u con diéresis | ü | ü |
| N con tilde | Ñ | Ñ |
| n con tilde | ñ | ñ |
| Menor que | < | < |
| Mayor que | > | > |
Como pueden observar la terminación “acute” acentúa la vocal que este delante de ella.
El “Menor que” y “Mayor que” son muy importantes puesto que si se quieren mostrar en un HTML no pueden usar directamente el símbolo “< ó >” por que el navegador los tomará como delimitadores de etiquetas y puede llegar a generar grandes problemas en la carga de la página, por ende, siempre que quiera utilizar el “menor que” o “mayor que” de manera tal que no funcione como delimitador de etiqueta por ejemplo “2 < 3” deben escribir en HTML lo siguiente:
“2 < 3”
Y con eso llegamos al final. A continuación les daré el código fuente de la “home.html” y ustedes solos con todo lo visto anteriormente deberían ser capaces de entender.
Todo lo que explicamos hoy se utiliza dentro de el siguiente código por lo tanto si hay algo que no hayan entendido reléanlo y si aún continúan sin entender pregunten.
Código de “HOME”
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Titulo</title>
</head>
<body bgcolor="black" link="olive" vlink="red" alink="green" text="white">
<table width="800" border="1">
<tr>
<td><img src="encabezado.jpg" alt="encabezado" title="encabezado"></td> <!-- Encabezado -->
</tr>
<tr>
<td align="center"><p>| <a href="home.html">Home</a> | <a href="articulos.html">Artículos</a> | <a href="yomismo.html">Quienes soy</a> | <a href="contacto.html">Contacto</a> |</p></td> <!-- Menu -->
</tr>
<tr>
<td><h1>Bienvenidos a Programando el Destino</h1><br>
<h2>El lugar donde encontraras informacion sobre el desarrollo web.</h2>
<p>Hemos comenzado publicando sobre <strong><acronym title="HyperText Markup Language">HTML</acronym></strong> puesto que es lo primero que se debe aprender para iniciarse en el mundo del <em>desarrollo web</em>. Sin embargo mas adelante veremos <strong><acronym title="Cascading Style Sheets">CSS</acronym></strong>, <strong><acronym title="eXtended HyperText Markup Language">XHTML</acronym></strong> y por supuerto lenguajes de programacion muy poderosos que nos permitirar agilizar tiempos de desarrollo, mejorar las prestaciones y un enorme etc de posibilidades.<br>
Por eso no se pierdan las futuras entradas de este <em>blog</em> por que de seguro les van a servir.<br>
También he de mencionar que cualquier consulta que tenga o inconveniente en el aprendizaje con este <em>blog</em> por favor comenten puesto que así también contribuyen a mejorar este proyecto que esperemos de buenos frutos.<br><br>
Acompañame a descubrir las maravillas del <em>desarrollo web</em> en donde el interior de "<" y ">" es la magia del <strong><acronym title="HyperText Markup Language">HTML</acronym></strong><br><br>
Y recuerden, si leen este <em>blog</em> aprenderán a diseñar páginas validadas por la <strong><abbr title="World Wide Web Consortium">W3C</abbr></strong>. <s>si leen otros blogs especializados en el tema, tal vez, también.</s><br><br>
Y como demostración de lo que anteriormente les dije aquí esta el "distintivo" que la w3 me dió por que mi web está validada:<br><br>
<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" height="31" width="88"></a><br><br></p>
<h4>Bueno, esto es todo por el momento. Hasta la próxima.<h4></td> <!-- Cuerpo -->
</tr>
<tr align="center">
<td>® Todos los derechos reservados - © 2011</td> <!-- Pie -->
</tr>
</table>
</body>
</html>
Les adjunto el código escrito en un editor de texto pues quizas, por estar tabulado, les resulte mas comodo leerlo.
 |
| Código home.html |
Por cierto antes de que me olvide, una cosita mas...
Comentarios en HTML
Para realizar un comentario en HTML deben utilizar la siguiente sintaxis:
<!-- Este es un comentario -->
Es decir, para comenzar un comentario hay que utilizar "<!-- " [Menor Que - Exclamación Cerrada - Menos - Menos - Espacio ] luego todo lo que quieran que quede como comentario y finalizar de la siguiente manera " -->" [ Espacio - Menos - Menos - Mayor Que ].
Ahora si hasta la próxima.
No hay comentarios:
Publicar un comentario