Estructura de una web en HTML
En este mi segundo post, vamos a intentar ver mas o menos gráficamente la estructura de una página web realizada sin ningún editor, es decir en código HTML.
De momento lo único que necesitamos es abrir el Bloc de notas para ir escribiendo nuestro código y poder realizar nuestras pruebas. Una vez abierto escribe lo siguiente:
<html>
</html>
y ahora guardalo como miprimeraweb.html
¿Qué hemos hecho? pues hemos creado el principio y el final de una web. Toda web debe empezar con un tag (etiqueta) de apertura <html> y terminar con una de cierre </html>. Con esto le hemos dicho al navegador "este es el principio del documento <html>" y "este es el final </html>". Todo el contenido de nuestra web debe ir entre estos dos tags. Si pinchas en este fichero verás que lo abre tu navegador y sale una página en blanco.
Pues bien, ahora a "nuestro documento" le vamos a incluir un encabezado, como en los trabajos del instituto.
<html>
<head>
</head>
</html>
Ahora hemos utilizado otras etiquetas nuevas <head> y </head> para decirle al navegador que todo lo que hay dentro de esas etiquetas será el encabezado. Pues bien dentro de ellas colocaremos nuestro título, pero antes hay que indicar que empieza el título con otras etiquetas.
<html>
<head>
<title>Mi gran Web</title>
</head>
</html>
A estas alturas ya sabrás que los navegadores son algo tontos, hay que decirles todo.
Ya tenemos la "hoja" hemos puesto nuestro título pero....¿donde escribimos nuestro trabajo? pues hay que crear un espacio para ello y decirselo al navegador. Lo hacemos con otras etiquetas nuevas <body> y </body>.
<html>
<head>
<title>Mi gran Web</title>
</head>
<body>
</body>
</html>
Todo el contenido de nuestra web debe ir dentro de las etiquetas <body>. Ahora vuelve a guardar el documento del bloc de notas y ejecútalo. ¡Ya tienes tu web!. De momento solo está tu titulo y el resto está en blanco....pero ahí está.
Este sería un ejemplo gráfico de la estructura de la web que hemos creado. Quizás esta sea una buena manera de estructurar y entender como se construye una web y aprender a diferenciar las distintas partes de las que está compuesta.
Ahora vamos a incluir algo de contenido. Primero vamos a darle un poco de color para que no sea tan sosa. El color se introduce mediante un código hexadecimal con este formato "#000000"que podemos encontrar en muchos sitios.
Para evitar escribir constantemente las mismas etiquetas, vamos abviar todas excepto las de body, pero recuerda que en tu bloc tienes que mantenerlas.
<body bgcolor="#ffff66">
Lo que quieras poner
</body>
¿Te gusta mas verdad? Ahora vamos a probar a darle otro formato mas curioso
<body bgcolor="#ffff66">
Lo que quieras poner
Esta es tu
WEB
</body>
Prúebalo. Pasa algo raro...el navegador no nos lo escribe igual. Efectivamente, el navegador es tonto y no le hemos dicho como lo queremos. Vamos a incluir unos saltos de línea <br/>
<body bgcolor="#ffff66">
Lo que quieras poner <br/>
Esta es tu<br/>
WEB<br/>
</body>
Ahora si verdad. También podiamos emplear la etiqueta <p> y </p> auque su uso es mas normal para indicar párrafos.
Con los espacios entre palabras ocurre algo similar, el navegador solo reconoce un espacio. Para conseguir separar palabras con mas de un espacio tendríamos que hacerlo con " ". El signo & indica que empieza un caracter especial y el ; indica que ha terminado. Te voy a dar algunos caracteres especiales para control de líneas y espacios:
(espacio en blanco)
< (símbolo menor qué "<")
> (símbolo mayor qué ">")
& (signo "&")
" (comilla ")
­ (guión )
Coje tu bloc de notas y realiza pruebas con texto y estas etiquetas (tag). No te preocupes "cagandola" muchas veces es como se aprende.
Para centrar un texto en la pantalla usariamos el tag <center> y </center>. Bueno ya tenemos muchas herramientas para organizar y dar formato a nuestra Web. Ahora un pasito mas, vamos a incluir una imagen de tu gatito, por ejemplo. Para ello usamo el tag <img> pero ahora la cosa se complica un poco, pero no mucho. A esta etiqueta hay que añadirle el nombre de la imagen y donde está, su ruta completa.
<img scr="imagen.jpg" width="150" heigth="100"</img>
Ademas del nombre de tu imagen, hemos añadido las dimensiones que queremos que tenga la imagen. Como observacion decirte que en este caso el navegador buscará la imagen en la misma carpeta donde tu página. Si no fuese así, tendríamos que especificar la ruta completa.
Si te gusta ver tu imagen en el centro puedes usar la etiqueta <center> antes y después de la imagen.
Ahora imagina que tenemos una página de animales y queremos remitir a nustro visitante a una web distinta, para ello tenemos que crear un enlace. Hay muchas formas de crear enlaces pero no nos vamos a liar mucho porque creo que este no es el lugar adecuado, de manera que lo haremos sencillo.
<a href="http://www.otraweb.com"</a>
Hemos colocado un ancla <a seguido de donde queremos el enlace con href . Esto quizásqueda un poco soso mejor si añadimos algo de texto , ¿no?
Visita <a href="http://www.otraweb.com"</a> esta Web
Imagino que vas haciendo pruebas con todo lo que vamos añadiendo, si no es así empieza a probar.
Seguramente esto es mejorable porque yo he visto la web de un amigo y el enlace es una imagen. Pues si, se puede hacer de manera muy sencilla. Imaginemos que la pagina en cuestion se llama www.gatos.com y queremos hacer un enlace con una foto de un gatito. Por ejemplo ¡Visita! gatos nos gustaría que en lugar de gatos apareciera una imagen. Lo que hacemos es sustituir la palabra gatos por la imagen elegida.
¡Visita! <a href="http://www.gatos.com"><img scr="gato.jpg"/></a>
Con esta información creo que de momento es suficiente (visita este sitio si necesitas un tutorial de html mas completo) para entender el concepto de la estructura de una web en html.
Naturalmente existe muchiiiiiiisimas mas tags que te permiten obtener un control completo de una web, pero el objeto de este blog es hacer que entiendas los príncipios básicos de una web y con ello hacer que crezca tu interes por este apasionante mundo.
Mi consejo es que si de verdad te interesa adquieras un buen libro sobre este lenguaje de programación.
Gracias por tu visita y tu atención prestada, espero ser de ayuda.
Para evitar escribir constantemente las mismas etiquetas, vamos abviar todas excepto las de body, pero recuerda que en tu bloc tienes que mantenerlas.
<body bgcolor="#ffff66">
Lo que quieras poner
</body>
¿Te gusta mas verdad? Ahora vamos a probar a darle otro formato mas curioso
<body bgcolor="#ffff66">
Lo que quieras poner
Esta es tu
WEB
</body>
Prúebalo. Pasa algo raro...el navegador no nos lo escribe igual. Efectivamente, el navegador es tonto y no le hemos dicho como lo queremos. Vamos a incluir unos saltos de línea <br/>
<body bgcolor="#ffff66">
Lo que quieras poner <br/>
Esta es tu<br/>
WEB<br/>
</body>
Ahora si verdad. También podiamos emplear la etiqueta <p> y </p> auque su uso es mas normal para indicar párrafos.
Con los espacios entre palabras ocurre algo similar, el navegador solo reconoce un espacio. Para conseguir separar palabras con mas de un espacio tendríamos que hacerlo con " ". El signo & indica que empieza un caracter especial y el ; indica que ha terminado. Te voy a dar algunos caracteres especiales para control de líneas y espacios:
(espacio en blanco)
< (símbolo menor qué "<")
> (símbolo mayor qué ">")
& (signo "&")
" (comilla ")
­ (guión )
Coje tu bloc de notas y realiza pruebas con texto y estas etiquetas (tag). No te preocupes "cagandola" muchas veces es como se aprende.
Para centrar un texto en la pantalla usariamos el tag <center> y </center>. Bueno ya tenemos muchas herramientas para organizar y dar formato a nuestra Web. Ahora un pasito mas, vamos a incluir una imagen de tu gatito, por ejemplo. Para ello usamo el tag <img> pero ahora la cosa se complica un poco, pero no mucho. A esta etiqueta hay que añadirle el nombre de la imagen y donde está, su ruta completa.
<img scr="imagen.jpg" width="150" heigth="100"</img>
Ademas del nombre de tu imagen, hemos añadido las dimensiones que queremos que tenga la imagen. Como observacion decirte que en este caso el navegador buscará la imagen en la misma carpeta donde tu página. Si no fuese así, tendríamos que especificar la ruta completa.
Si te gusta ver tu imagen en el centro puedes usar la etiqueta <center> antes y después de la imagen.
Ahora imagina que tenemos una página de animales y queremos remitir a nustro visitante a una web distinta, para ello tenemos que crear un enlace. Hay muchas formas de crear enlaces pero no nos vamos a liar mucho porque creo que este no es el lugar adecuado, de manera que lo haremos sencillo.
<a href="http://www.otraweb.com"</a>
Hemos colocado un ancla <a seguido de donde queremos el enlace con href . Esto quizásqueda un poco soso mejor si añadimos algo de texto , ¿no?
Visita <a href="http://www.otraweb.com"</a> esta Web
Imagino que vas haciendo pruebas con todo lo que vamos añadiendo, si no es así empieza a probar.
Seguramente esto es mejorable porque yo he visto la web de un amigo y el enlace es una imagen. Pues si, se puede hacer de manera muy sencilla. Imaginemos que la pagina en cuestion se llama www.gatos.com y queremos hacer un enlace con una foto de un gatito. Por ejemplo ¡Visita! gatos nos gustaría que en lugar de gatos apareciera una imagen. Lo que hacemos es sustituir la palabra gatos por la imagen elegida.
¡Visita! <a href="http://www.gatos.com"><img scr="gato.jpg"/></a>
Con esta información creo que de momento es suficiente (visita este sitio si necesitas un tutorial de html mas completo) para entender el concepto de la estructura de una web en html.
Naturalmente existe muchiiiiiiisimas mas tags que te permiten obtener un control completo de una web, pero el objeto de este blog es hacer que entiendas los príncipios básicos de una web y con ello hacer que crezca tu interes por este apasionante mundo.
Mi consejo es que si de verdad te interesa adquieras un buen libro sobre este lenguaje de programación.
Gracias por tu visita y tu atención prestada, espero ser de ayuda.
