Este manual esta orientado a que conozcáis un poco el lenguaje html, en la actualidad hay programas como dreamweaver, frontpage y muchos otros que nos facilita mucho la tarea de hacer una pagina web, pero nunca viene mal conocer aunque sea un poquito el lenguaje usado en una pagina web ya que aunque sea poco pero debemos estar familiarizados con el lenguaje HTML..
Para empezar solo necesitaremos 2 herramientas que seguro disponemos en nuestro PC.
Un editor de texto plano (bloc de notas).
un explorador web (internet explorer,firefox,netscape).
Ya teniendo esto nos ponemos manos a la obra abriendo nuestro bloc de notas y escribimos el texto siguiente:
<html>
<head>
<title>Mi primera Pagina web</title>
</head>
<body>
</body>
</html>
<head>
<title>Mi primera Pagina web</title>
</head>
<body>
</body>
</html>
Una vez escrito esto le damos a "guardar como" y lo llamaremos "index", en vez de guardarlo con la extension *.txt lo aremos con la extension del lenguaje que estamos aprendiendo HTML nos tiene que quedar de la siguiente manera index.html.
Vamos a visualizar nuestra flamante pagina abriendo el archivo index.html con el navegador .
Que es lo que vemos?Nada, una pagina en blanco por que no hemos escrito nada.
Andaaaa, pero en el margen superior izquierdo de nuestro navegador pone "mi primera pagina web", Eso es el titulo de la pagina.
Antes de explicaros este codigo vamos a añadir algo mas para ver resultados.
entre medias de las etiquetas <body> y </body> vamos a escribir "HOLA MUNDO. YA ESTOY AQUI" de tal forma que nos quede el siguiente texto:
<html>
<head>
<title>Mi primera Pagina web</title>
</head>
<body>
HOLA MUNDO. YA ESTOY AQUI
</body>
</html>
<head>
<title>Mi primera Pagina web</title>
</head>
<body>
HOLA MUNDO. YA ESTOY AQUI
</body>
</html>
Le damos a guardar y abrimos el archivo con nuestro navegador.
La estructura de una pagina web esta formada por etiquetas.
Las etiquetas son ordenes que el navegador interpretara según la orden que demos en la etiqueta.
Nosotros en nuestro código tenemos 4 etiquetas:
<html>, <head>, <title> y <body> y el cierre de dichas etiquetas </head>, </title>, </body> y </html>.
La apertura de las etiquetas se pone asi <orden>
El cierre de las etiquetas se pone de la siguiente forma </orden>
<html>
<head>
<title>Mi primera Pagina web</title>
</head>
<body>
HOLA MUNDO. YA ESTOY AQUI
</body>
</html>
<head>
<title>Mi primera Pagina web</title>
</head>
<body>
HOLA MUNDO. YA ESTOY AQUI
</body>
</html>
La etiqueta <html> es todo de lo que consta la pagina web por eso se abre la primera y el cierre esta al final de todo el documento.
La etiqueta <head> es la cabecera ahi siempre se pondrá el titulo de la pagina que la ponemos dentro de la etiqueta <title> para que el navegador sepa interpretar el titulo por eso nada mas acabar el titulo se cierra la etiqueta </title>, los metatags y el enlace al archivo de estilos css.
La etiqueta <body> es el cuerpo de la pagina.Todo lo que escribamos aquí va a salir en el navegador exceptuando las etiquetas.
Una cosa muy importante es cerrar todas las etiquetas que abramos de lo contrario podemos confundir al navegador y que la pagina no se muestre bien.
Ya que sabemos de lo que consta la estructura de una pagina web vamos a darle un poco de formato, para empezar vamos a poner un fondo a nuestra pagina web.
Este es nuestro código:
<html>
<head>
<title>Mi primera Pagina web</title>
</head>
<body>
HOLA MUNDO.YA ESTOY AQUI
</body>
</html>
<head>
<title>Mi primera Pagina web</title>
</head>
<body>
HOLA MUNDO.YA ESTOY AQUI
</body>
</html>
Vamos a cambiar la etiqueta body dejando nuestro código de la siguiente manera:
<html>
<head>
<title>Mi primera Pagina web</title>
</head>
<body bgcolor="#ffff00">
HOLA MUNDO.YA ESTOY AQUI
</body>
</html>
<head>
<title>Mi primera Pagina web</title>
</head>
<body bgcolor="#ffff00">
HOLA MUNDO.YA ESTOY AQUI
</body>
</html>
Os habréis dado cuenta que hemos añadido a la etiqueta body <bgcolor="#ffff00">
bgcolor es la abreviación de backgroundcolor y #ffff00 es el código hexadecimal del color amarillo. También podemos poner el nombre del color en ingles si son los colores básicos como rojo, verde, azul, etc poniéndolo de la siguiente forma <body bgcolor="blue">
Podéis usar un programa como el photoshop para saber los códigos de cada color o bien buscar en internet por "códigos de colores" y saldrán unas cuantas paginas con tablas de colores y sus códigos hexadecimales.
De esta forma ya le hemos puesto fondo a nuestra web con un color. Ahora bien, vamos a suponer que no queremos un color de fondo, si no que queremos una imagen como fondo de nuestra web, pues es tan sencillo como en lugar de el color colocar la ruta de donde tengamos guardada la imagen por ejemplo asi <body bgcolor="image/fondo.jpg">.Es importante que no sobrecarguemos nuestra web con imágenes muy pesadas ya que esto ralentizara la apertura de la pagina y poner las imagines con extension gif o jpeg.
Ahora a nuestra frase le vamos a añadir dos etiquetas mas que serán <h1> y <center> de tal forma que nos quede el siguiente código:
<html>
<head>
<title>Mi primera Pagina web</title>
</head>
<body bgcolor="#ffff00">
<h1><center>HOLA MUNDO.YA ESTOY AQUI<center><h1>
</body>
</html>
<head>
<title>Mi primera Pagina web</title>
</head>
<body bgcolor="#ffff00">
<h1><center>HOLA MUNDO.YA ESTOY AQUI<center><h1>
</body>
</html>
Lo que hemos hecho a sido centrar el texto con la etiqueta <center> y añadirle la etiqueta <h1> y cerrar ambas etiquetas . vamos a profundizar un poco en esta etiqueta por que es importante, ya que esta etiqueta la usan los buscadores para medir la importancia del texto de una web.
Vamos a pasar a explicar un poco las etiquetas <h>.
Estas etiquetas están formadas por la letra <h> y un numero que va del 1 al 6 es decir <h1>, <H2>, <h3> así sucesivamente.
Estas etiquetas se usan para darle una determinada importancia al texto, es decir una etiqueta <h1> es muy importante, una etiqueta <h2> es menos importante y una <h3> es importante.
Normalmente los buscadores hacen caso a las 3 primeras. Vamos a hacer una prueba con nuestra pagina para verlo mejor.
Vamos a añadir el siguiente texto y sus correspondientes etiquetas para que veais un poco en que consiste.
<html>
<head>
<title>Mi primera Pagina web</title>
</head>
<body bgcolor="#ffff00">
<h1><center>HOLA MUNDO.YA ESTOY AQUI</center></h1>
<h2><center>HOLA MUNDO.YA ESTOY AQUI</center></h2>
<h3><center>HOLA MUNDO.YA ESTOY AQUI</center></h3>
<h4><center>HOLA MUNDO.YA ESTOY AQUI</center></h4>
</body>
</html>
<head>
<title>Mi primera Pagina web</title>
</head>
<body bgcolor="#ffff00">
<h1><center>HOLA MUNDO.YA ESTOY AQUI</center></h1>
<h2><center>HOLA MUNDO.YA ESTOY AQUI</center></h2>
<h3><center>HOLA MUNDO.YA ESTOY AQUI</center></h3>
<h4><center>HOLA MUNDO.YA ESTOY AQUI</center></h4>
</body>
</html>
Como podemos ver nos sale el mismo texto en diferentes tamaños según la etiqueta que hallamos colocado y todo lo que etiquetemos con <h> nos lo mostrara en negrita, es por esto que podemos utilizar la etiqueta <h1> para el nombre de nuestra web, la etiqueta <h2> para el titulo de la pagina en la que trabajamos y la etiqueta <h3> para el contenido de nuestra pagina. Pero ahora vamos a añadir 2 etiquetas mas y dejaremos nuestro código de la siguiente manera:
<html>
<head>
<title>Mi primera Pagina web</title>
</head>
<body bgcolor="#ffff00">
<h1><center><u>HOLA MUNDO.YA ESTOY AQUI</strong></u></center></h1>
<h2><center><em>HOLA MUNDO.YA ESTOY AQUI<em></center></h2>
<h3><center>HOLA MUNDO.YA ESTOY AQUI</center></h3>
<h4><center>HOLA MUNDO.YA ESTOY AQUI</center></h4>
</body>
</html>
<head>
<title>Mi primera Pagina web</title>
</head>
<body bgcolor="#ffff00">
<h1><center><u>HOLA MUNDO.YA ESTOY AQUI</strong></u></center></h1>
<h2><center><em>HOLA MUNDO.YA ESTOY AQUI<em></center></h2>
<h3><center>HOLA MUNDO.YA ESTOY AQUI</center></h3>
<h4><center>HOLA MUNDO.YA ESTOY AQUI</center></h4>
</body>
</html>
Lo que le hemos dicho al navegador es que la etiqueta <h1> ademas de centrada la queremos subrayado <u> y que la etiqueta <h2> ademas de centrada la queremos en cursiva.
ahora vamos a complicar un poquito mas el asunto,vamos a suponer que la etiqueta <h3> que es la del contenido de nuestra web queremos que sea el enlace hacia otra pagina de nuestra web o una pagina que nos parece interesante y queremos que todos nuestros visitantes la conozcan.
<html>
<head>
<title>Mi primera Pagina web</title>
</head>
<body bgcolor="#ffff00">
<h1><center><strong>HOLA MUNDO.YA ESTOY AQUI</strong></center></h1>
<h2><center><em>HOLA MUNDO.YA ESTOY AQUI<em></center></h2>
<h3><center>HOLA MUNDO.YA ESTOY AQUI</center></h3>
<a href="http://www.midominio.com/archivo.html">otra pagina de mi web</a>
</body>
</html>
<head>
<title>Mi primera Pagina web</title>
</head>
<body bgcolor="#ffff00">
<h1><center><strong>HOLA MUNDO.YA ESTOY AQUI</strong></center></h1>
<h2><center><em>HOLA MUNDO.YA ESTOY AQUI<em></center></h2>
<h3><center>HOLA MUNDO.YA ESTOY AQUI</center></h3>
<a href="http://www.midominio.com/archivo.html">otra pagina de mi web</a>
</body>
</html>
Lo que hemos hecho a sido añadir la etiqueta <a href>, dentro de la etiqueta se pone la url de la pagina a la que queremos enlazar y seguidamente el texto con el que queramos que aparezca visible en nuestra web, tanto si es una pagina nuestra como si es otra de
otra web que queramos aconsejar a nuestros visitantes.
Para incluir efectos especiales en el texto pondremos el texto a destacar dentro delas etiquetas siguientes:
<b> </b> Negrita
<i> </i> Cursiva
<u> </u> Subrayado
Podemos incluir las 3 etiquetas en una misma frase para mostrar en negrita, subrayado y cursiva.
Para incluir la alineacion de un texto usaremos las siguientes etiquetas:
<center>Este texto está centrado</center>
<left>Este texto está alineado a la derecha</left>
<left>Este texto está alineado a la derecha</left>
Si no ponemos ninguna etiqueta de alineación por defecto se alineara a la izquierda.
Para indicar el tamaño de la letra se utiliza la etiqueta <font></font>. Esta etiqueta tiene varios parámetros. Veremos los dos mas usados [b]size y bgcolor.
Size indica el tamaño "relativo". Para aumentar el tamaño de la letra indicaremos un número positivo, y para disminuirlo indicaremos un número negativo.
bgcolor indica el código de color del texto en el mismo formato que hemos visto anteriormente para el fondo del documento. Por ejemplo :
<font size=+2 bgcolor="#ff0000"> Texto </font>
Escribirá el Texto en un tamaño dos veces superior al normal y en color rojo.
<font size=-2 bgcolor="#0000ff"> Texto </font>
Escribirá el Texto en un tamaño dos veces inferior al normal y en color azul.
Estas son unas pocas etiquetas que podéis usar en vuestras pruebas.
No vamos a entrar mucho mas en detalle ya que el fin de este manual no es otro que os familiaricéis con el lenguaje, no que os lo aprendáis de cabo a rabo.
Cuando usemos nuestro programa de diseño que no nos suene a chino el código fuente de una pagina web.
¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ FIRMA ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬
Webmaster de Todo-Mods -- Webmaster de Todoelbarco.com -- Webmaster de NosQuejamos.com
-------------------------------------------------------------------------------
