Publicidad
Curso Tutorial de xHTML
Conceptos Básicos de xHTML - Parte 1
Tutorial por Jorge Oyhenard (elQuique)
Comenzamos en esta entrega a conocer el HTML, que es la base de toda página web y por tanto, debería ser conocido por todos los webmasters, diseñadores y programadores web.
La Web o WWW o World Wide Web, necesitaba desde sus inicios una forma de presentar información en los navegadores, para esto justamente nace xHTML, por las siglas de “Hyper Text Markup Lenguage” o en español “Lenguaje de Marcas Hipertextuales”.
Este lenguaje fue diseñado para la presentación estructurada de textos en nuestros navegadores (FireFox, Internet Explorer, Opera, etc) y como tal es el Estándar de las paginas Web.
Si alguna vez curioseamos en nuestro navegador en la opción, Ver, Código Fuente, quizás nos ahuyentamos con una serie de palabras raras y símbolos, la idea es desmitificar un poco esto a lo largo de este Tutorial.
Formato del xHTML
Como mencionamos hace un momento, el xHTML nació para dar forma a la presentación de información en los navegadores, para esto fue necesario definir una serie de palabras, que llamaremos TAGs que son las que determinaran la forma, color, y tamaño de la información presentada. Estos TAGs tendrán cada uno su formato, y nombre, de esta manera el navegador, que conoce previamente lo que debe hacer según cada TAG, presentara la información.
El formato básico de un TAG es:
<tag>información</tag>
Por ejemplo:
<letra negrita>Creación de Paginas Web</letra negrita>
Lo que hace este TAG es decirle a nuestro navegador que muestre el titulo “Creación de Paginas Web”, pero en Negrita.
Aclaremos que ese TAG no existe y fue solo para facilitar el ejemplo, ya que los TAGs están en ingles, como la gran mayoría de los lenguajes de programación. Para hacer las cosas bien el TAG correcto para ese titulo en negrita es:
<strong>Creación de Paginas Web</strong >
Como ven, este tipo de TAGs comienza y terminan iguales pero agregando el TAG de cierre la barra / antes de la palabra. De esta forma el navegador sabrá hasta donde debe aplicar la Negrita, por si el texto es como el siguiente:
Bienvenido a <strong>Taller Webmaster</strong >
Como ven ahí el “bienvenido” se presentara sin negrita, y “Taller Webmaster” en negrita ya que es lo que esta entre el TAG strong.
Etiquetas Básicas de xHTML
Axial como una oración o frase dentro el xHTML tiene una forma de presentación (como vimos en la negrita), todo el documento o pagina Web, tiene también un formato general básico, y es el que vemos a continuación:
<head>
</head>
<body>
</body>
</html>
Expliquemos estos TAGs,
<html> indica que comienza un documento xHTML o pagina Web, por tanto el </html> indica que termina ahí esta pagina.
<head> indica que comienza la cabecera de la pagina, dentro de la cabecera van definiciones como el Titulo, y otras que veremos mas adelante. también termina con </head>
<body> es la que indica que comienza ahí el contenido, o cuerpo del documento, o sea la información que realmente se mostrara en el navegador. también termina con </body>
Debe tenerse en cuenta que estos 3 TAGs estarán presente en todos los documentos Web, o Paginas Webs.
Como vemos, los TAGs pueden estar “anidados”, esto quiere decir uno dentro de otro (para quienes no estén familiarizados con este término, usado por gente del mundo de la programación). Esta animación, es obvia ya que dentro de TODO el documento (<html>) vamos a tener dos partes internas, la Cabecera (<head>) y el Cuerpo (<body) mismo de la información.
Axial mismo, y a su vez cada parte, puede contener otros elementos internos, como por ejemplo el Titulo de la página que debe ir dentro de la Cabecera, quedando algo así:
<head>
<title>Nuestra primer pagina Web</title>
</head>
…..
O por ejemplo los dos párrafos de texto que conforman esa página Web, que debe ir así:
<body>
<p>Este es el primer párrafo de mi primer pagina Web</p>
<p>Este es el segundo párrafo de mi primer pagina Web</p>
</body>
….
Hemos utilizado 2 nuevos TAGs, cuya finalidad definimos a continuación:
<title> define en la cabecera (head) el titulo de nuestra página, será el que se ve en la barra de titulo de nuestro navegador.
<p> define un párrafo de texto dentro de nuestra página Web.
Código completo de nuestra primera página Web
<head>
<title>Nuestra primer pagina Web</title>
</head>
<body>
<p>Este es el primer párrafo de mi primer pagina Web</p>
<p>Este es el segundo párrafo de mi primer pagina Web</p>
</body>
</html>
Click acá para ver nuestra primer pagina Web on line
Como generamos el archivo en nuestro PC, bueno sencillo, para comenzar por ahora podemos usar el mismo Bloc de Notas, así:
Inicio, Ejecutar
Notepad
En el escribiremos el código completo de nuestra primera pagina Web, y luego haremos así:
Archivo
Guardar como
primerpagina.html
Guardándolo en alguna carpeta de nuestro disco, por ejemplo c:\CursoxHTML
Para probarlo localmente en nuestro navegador, basta con hacer:
Archivo
Abrir
Y buscar el archivo guardado, o sea c:\CursoxHTML\primerpagina.html
Que se mostrara tal como indica la imagen en nuestro navegador.
Hasta aquí llegamos con esta primera entrega del Curso Tutorial de xHTML, Conceptos Basicos
Comentarios de Curso Tutorial de xHTML
↑ Tutorial
racson
2007-03-05 15:31
chon
2007-04-11 02:30
chon
2007-04-11 03:07
ksdepor
2007-06-01 19:37
bakkilla
2008-07-07 09:53
jenoe
2010-03-09 13:59