sábado 28 de marzo de 2009

Tutorial HTML 2 - Estructura

Ser: Bueno, al final he decidido hacer el siguiente tutorial ahorita xD Ya que no tengo nada mejor que hacer, y estoy algo ocioso, aprovecho y no los hago esperar más. xDD

La clase pasada vimos lo básico: cómo se escribe el HTML, algunas etiquetas, las diferencias que tienen, y que es indistinto usar o no mayúsculas.

Lo que hoy veremos es la estructura básica de la que se componen todas las páginas web. Es algo sencillísimo, la verdad xD Quizás ya sepan de qué hablo, pero nunca viene mal echarle un repaso xD Así que comencemooos ~


 


Las páginas HTML se componen básicamente de dos partes: la cabecera (HEAD) y el cuerpo (BODY).


Lo que se incluye dentro de las etiquetas <head> y </head> es lo que compondrá toda la cabecera de nuestra web, y allí se coloca toda la información, configuración, descripciones y demás cosas de la web.


No crean que la cabecera es el banner o algo así, que ya muchos se confunden XDD La cabecera no es algo que se verá en los navegadores. Si uno entra a una página, lo que ve es el contenido del Body. Pero en la cabecera pueden incluirse cosas que se verán (como por ejemplo, de qué tamaño será tal estilo de texto, qué color tendrá tal fuente, el título en la Barra de títulos del navegador, etc.).


Lo que vaya dentro de <body> y </body> será el cuerpo de la página. Allí sí se pone todo lo que va a ser visto en cuanto alguien entre a una web: Imágenes, enlaces, textos de colores, tamaños y estilos diversos, etc.


Un ejemplo de página web podría ser:


 


<html>
   <head>
      <title> Página web de prueba </title>
   </head>
   <body>
Texto, imágenes y lo que sea que se ponga aquí
   </body>
</html>


Como podemos observar, todo el documento está entre las etiquetas <html> y </html>. Eso quiere decir que el documento entero estará escrito en ese lenguaje.


Ahora, si uno ve el código fuente de las páginas web (Ver > Código fuente), va a notar que al comienzo tienen esta leyenda, todas (excepto mi blog, porque es super rebelde xDD):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://w3.org/TR/REC-html40/loose.dtd">




Eso significa que la página cumple el estándar de HTML 4.0.


Nota: W3C significa World Wide Web Consotrium, y es el consorcio que regula todo lo que tiene que ver con las Webs: normas y más cosas que no sé. xDD


El código anterior puede variar un poco. A veces, se encuentran cosas como:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://w3.org/TR/REC-html40/strict.dtd">


Eso significa que la web, además de cumplir con los estándares HTML 4.0, no contiene elementos que se consideran desaconsejables.


Dosu: ¿Qué es un elemento desaconsejable? ^o^


Ser: Recuerden que los elementos son las cosas que van en las etiquetas xD La W3C considera desaconsejables los elementos que, si bien el navegador los puede soportar, quizás en un futuro sean reemplazados por otros, y entonces sean eliminados en un futuro.


Dosu: ¿Puedes darme algún ejemplo? ^.^


Ser: Bien, por ejemplo, la etiqueta de negritas <b>, puede que sea reemplazada más adelante por la etiqueta <strong>. Es lo mismo, y no tengo la más remota idea de por qué lo reemplazarán, si B es más corta de escribir y todo eso xD Pero en fin, que es posible xD Lo mismo pasaría con la etiqueta de itálica <i>; sería reemplazada por <em>. Pero es igual xD Actualmente, los navegadores soportan ambas etiquetas.


En fin, siguiendo con el contenido de la página. Lo que se puso entre las etiquetas de <title> y </title> es el título que se verá en los navegadores, en la barras de títulos. También es el nombre con el que quedará guardada una página si la pones en tus Marcadores. En el caso de este blog, el título es ..:: |InuShiSan Blog| ::.. Super genial, lo se (H) xD

Muchas veces es útil incluir comentarios en nuestros códigos HTML, para orientarnos a la hora de buscar errores, o de encontrar determinada parte de la web, o para lo que sea que necesites.


¿Cómo se escriben los comentarios? Sencillo xD De esta forma:



<!--  Aqui va tu comentario   -->


Se pone entre <!-- para comenzar, y luego --> para finalizar.


Los comentarios no se verán en el navegador, pero sí se verán en el código fuente, así que nunca pongas en un comentario información valiosa, como puede ser alguna contraseña, por ejemplo.





Algo importante que no les dije, pero quizás ya sepan: Los documentos HTML se pueden escribir fácilmente en el Bloc de Notas, y cuando guardas lo haces con extensión .html, es así de sencillo xD Obviamente, el hacerlo en el bloc implica tener más conocimiento sobre el lenguaje, ya que no hay ninguna ayuda ahí. xD


Bueno, y con esto terminamos la segunda clase de HTML =D!


Espero que les haya ayudado a aprender un poco más xD Ya en las siguientes lecciones iremos viendo distintas etiquetas que nos ayudarán a organizar la página, agregar imágenes, etc., etc.


Les voy adelantando: En la siguiente lección profundizaremos en la cabecera de las páginas: lo veremos todo bien a fondo (bueno, quizás tan a fondo no xD) y les enseñaré a agregar palabras para que los buscadores los muestren como ustedes deseen, y más cosas xD No se preocupen si suena confuso (sobre todo porque son casi las 23 hs, y estoy terminando la clase velozmente escribiendo lo primero que me surge xDD), porque la próxima lo veremos y les explicaré mejor :3


Adioss! =D


Mensaje publicado por: Ser
Fecha de Publicación: sábado, marzo 28, 2009




    DESHABILITADO :D
¡Hola! Bienvenid@ a mi blog, ojalá te guste. ¡Postea en el tag! xDD - ISS BLOG