Estructura de una página html

Las etiqeutas que hemos estado viendo son solo introductorias para tener una idea de lo más básico en html; ahora esas etiquetas no van sueltas, html tiene una estructura a seguir (como todo), html tiene una estructura de árbol ¿que quiere decir esto?, haciendo una analogía con nuestro cuerpo, imaginemos que tuvieramos que escribirlo en formato de etiquetas primero tendríamos una etiqueta raíz que llamaré persona, esta raíz contendrá nuestra cabeza y cuerpo, asi mismo dentro de nuestra cabeza tendríamos ojos, boca, etc y dentro de nuestro cuerpo, podríamos considerar, extremidades, tronco, etc.  estas etiquetas tendrian atributos como puede ser capacidad de vision par alos ojos, tamaño de dientes para la boca, grosor de pecho y medida de extremidades, en codigo de etiquetas quedaría algo asi:

<persona>
          <cabeza>
                    <ojos capacidaddevision="buena">Visión</ojos>
                    <boca tamanodedientes="grandes">Dientes de nuestra Boca</boca>
          </cabeza>
          <cuerpo>
<tronco grosorpecho="40cm">pecho</tronco>
                    <extremidades largo="70cm">largo de extremidades</extremidades>
          </cuerpo>
</persona>

Bien la analogía no es del todo buena porque nosotros nos dividimos en cabeza, tronco y extremidades, pero sirve :p

en Html sucede lo mismo hay que seguir una extructura, la raiz es la etiqueta <html>, esta contiene a las etiqeutas <head> y <body> en la parte de la head (cabeza del html) irán etiquetas, que sirven para definir propiedades del archivo html como ubicación de otros archivos auxiliares como css o js, mientras que en la etiqueta body se encuentr todo lo que queremos que se muestre a través del navegador, las etiquetas básicas que hemos visto deben estar entonces dentro de body (cuerpo del html), de este modo :

<html>
          <head>
                    <title>Esto se verá en la barra de Título de nuestro navegador</title>
          </head>
          <body>
                     <h2>Titulo de nuestra Página</h2>

                     <p>Este será un primer párrafo de nuestra  página</p>
                    
                     <p>Este será el segundo párrafo de nuestra página, que lo haremos mas extenso</p>
                    <a href="http://www.ubuntu.com">este será un enlace a ubuntu</a>
                    <img src="http://www.ubuntu.com/themes/ubuntu07/images/ubuntulogo.png"/> <!--aca pondremos una imágen-->
          </body>
</html>

Copiemos esto en un nuevo archivo html (archivo.html) y en nuestro navegador se debe mostrar del siguiente modo:

Titulo de nuestra Página

Este será un primer párrafo de nuestra página

Este será el segundo párrafo de nuestra página, que lo haremos mas extenso

este será un enlace a ubuntu

Ahora si podemos decir que ta tenemos una primera página html, lo nuevo aca es la etiqeuta que creo no necesita mayor explicación, otra observación es: mientras uno edita código a veces es necesario indicar algo, para ello se utiliza estos tags: , esto es propio de cada lenguaje, en html va de el modo mostrado.

Aunque claro aún faltan algunas etiqeutas y atributos muy importantes. cabe resaltar que mi manera ade trabajar co html es desde un editor de textos o desde algún ide como eclipse que me proporcione alertas, o me muestre sugerencias, no utilizo dreamweaver por considerarlo nocivo contra el conocimiento, sin embargo el que decide el modo de aprender es uno mismo. la filosofía que sigo es aprender y divertirse haciendolo.

Anuncios

Etiquetas: ,

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s


A %d blogueros les gusta esto: