Manual Básico de HMTL
Prohibida su reproducción total o parcial sin previo consentimiento del autor
Autor: Germán Tuis (Gracias Germán!)
El HTML es un lenguaje de programación de páginas web's que perdura en el tiempo, si observamos el código de un sitio siempre algo de HTML tiene. A parte son las bases de un sitio, si por ejemplo después pretendes estudiar JavaScript primero debes tener conocimientos básicos de HTML para poder dominar JavaScript. En este curso de HTML Básico vamos a ver las bases de este lenguaje (básico), para ello necesitaremos un editor de texto como puede ser el bloc de notas de Windows y mucha paciencia.
A lo largo de este cursos se desarrollarán los siguientes temas:
- Meta tags
- Estructura de una página
- Tags básicos
Poner titulo
|
|
Cambiar el color de fondo
Formato del texto
Propiedades
Agregar imágenes
Imagen de fondo
Marquesinas
Propiedades
Todo tipo de enlaces
Iniciaremos el bloc de notas archivo>>guardar como a este documento lo llamaremos index.htm lo que estamos haciendo es crear un documento .htm . Y el nombre del archivo se debe a que este será la página principal del sitio. El servidor identifica a “index.htm” como la página que debe mostrar cuando alguien ingresa al sitio.
Luego empezaremos viendo que son los meta-tags. La función que cumplen los meta-tags es más que nada informativa, en ellos puede haber información del autor del sitio, también contiene la fecha de expiración del sitio, una breve descripción del mismo, y palabras separadas por comas. Las palabras separadas por comas sirven únicamente a los buscadores (Google, Yahoo, Altavista, etc.), estas están referidas al contenido del sitio.
Sino incluimos los meta-tags no va a afectar ni en lo mas mínimo al funcionamiento del mismo. También algunos meta-tags indican la categoría del sitio, su distribución y por ultimo su titulo.
Ejemplos:
Este Meta-Tag hace referencia al autor del sitio.
< META HTTP - EQUIV=”Author” CONTENT=”Tu nombre”>
Este Meta-tag contiene la descripción de tu sitio.
<META HTTP – EQUIV=”Description CONTENT=”Breve descripción de tu sitio”>
En este Meta-tag se incluyen palabras las cuales tiene que estar relacionadas con el contenido de tu sitio.
<META HHTP – EQUIV=”Keywords” CONTENT=”Palabra1,Palabra2”>
Este meta-tag indica la fecha de expiración del sitio.
<META HTTP – EQUIV=”Expires” CONTENT=”Mon, 10 Mar 2005 01:00:00 GTM”>
Este indica el titulo del sitio
< META HTTP – EQUIV="Title" CONTENT="SuperScript">
Este la categoria
<META HTTP - EQUIV="Category" CONTENT="Programación">
Y por ultimo este meta-tag indica su distribución.
<meta HTTP - EQUIV="Distribution" CONTENT="global">
Estructura de una página:
Todas las páginas cuenta con una estructura determinada, de no ser así la misma no funcionará a la perfección.
Empezaremos viendo el Tag < HTML >, este indica al navegador que el documento está codificado en ese lenguaje, en nuestro caso HTML. A continuación se incluye el Tag < HEAD > este indica que es el encabezado, por ejemplo dentro del tag < HEAD > se encuentran los Meta Tags
Conclusiones:
<HTML>
<HEAD>
Encabezado del sitio
</HEAD>
</HTML>
Luego veremos el tag <TITLE> este tag encierra el titulo que queramos darle a la página. Y el mismo se visualizará en la parte superior izquierda del navegador.
<TITLE> titulo de mi sitio </TITLE>
Este va entre los tags <HEAD> Y </HEAD>
Resumiendo lo visto:
<HTML>
<HEAD>
< META HTTP - EQUIV=”Author” CONTENT=”Tu nombre”>
<META HTTP – EQUIV=”Description CONTENT=”Breve descripción de tu sitio”>
<META HHTP – EQUIV=”Keywords” CONTENT=”Palabra1,Palabra2”>
<META HTTP – EQUIV=”Expires” CONTENT=”Mon, 10 Mar 2005 01:00:00 GTM”>
<META HTTP – EQUIV="Title" CONTENT="SuperScript">
<META HTTP - EQUIV="Category" CONTENT="Programación">
<TITLE>Titulo de mi sitio</TITLE>
</HEAD>
</HTML>
Pero aquí no termina todo, recién empieza
Ahora veremos el tag <BODY> Y </BODY> dentro de estos tags va el cuerpo de la página, mejor dicho lo que se va a visualizar.
Bueno aquí tienes la estructura completa de un sitio.
<HTML>
<HEAD>
< META HTTP - EQUIV=”Author” CONTENT=”Tu nombre”>
<META HTTP – EQUIV=”Description CONTENT=”Breve descripción de tu sitio”>
<META HHTP – EQUIV=”Keywords” CONTENT=”Palabra1,Palabra2”>
<META HTTP – EQUIV=”Expires” CONTENT=”Mon, 10 Mar 2005 01:00:00 GTM”>
<META HTTP – EQUIV="Title" CONTENT="SuperScript">
<META HTTP - EQUIV="Category" CONTENT="Programación">
<TITLE>Titulo de mi sitio</TITLE>
</HEAD>
<BODY>
Aquí se incluyen las imágenes, colores de fondo, sonidos, enlaces y mucho más.
</BODY>
</HTML>
Ahora vamos a profundizar sobre lo ya visto y más.
Tags básicos:
El salto de carro común es para que el texto pase a la línea de abajo y para que esto suceda debemos poner <BR> . También con esto podemos desplazar imágenes y lo que se nos ocurra hacia abajo.
También para que el texto o las imágenes queden centradas debemos incluir el tag <CENTER> Y no olvidarnos de cerrarlo </CENTER> porque puede afectar al funcionamiento de la página. Para que la página u otro elemento quede alineado a la izquierda debemos copiar el tag
<LEFT> y <LEFT>
o sino a la derecha
<RIGHT> y </RIGHT>.
Para cambiar el color de fondo
Para esto se copia el siguiente tag:
Este debe ser copiado entre el tag <BODY> y </BODY>
<BGCOLOR=”#FFFFFF”>
Para obtener el color que nosotros queramos yo les aconsejo descargarse el detector de códigos de color. ( www.superscript.com.ar/Detector.zip )
Que nos evitara estar probando con las letras y los números.
Para indicar de que color queremos el texto debemos poner:
<TEXT=”#000000”>
Por supuesto dentro del tag body.
Ejemplificando: LEE ATENTAMENTE EL CÓDIGO
<HTML>
<HEAD>
< META HTTP - EQUIV=”Author” CONTENT=”Tu nombre”>
<META HTTP – EQUIV=”Description CONTENT=”Breve descripción de tu sitio”>
<META HHTP – EQUIV=”Keywords” CONTENT=”Palabra1,Palabra2”>
<META HTTP – EQUIV=”Expires” CONTENT=”Mon, 10 Mar 2005 01:00:00 GTM”>
<META HTTP – EQUIV="Title" CONTENT="SuperScript">
<META HTTP - EQUIV="Category" CONTENT="Programación">
<TITLE>Titulo de mi sitio</TITLE>
</HEAD>
<BODY>
<BODY> BGCOLOR=”#FFFFFF”>
<TEXT=”#000000”>
<CENTER>
Aquí se incluyen las imágenes, <BR> colores de fondo, sonidos, enlaces y mucho más.
</CENTER>
</BODY>
</HTML>
Formato del texto:
Una forma sencilla de aumentar el tamaño del texto es poniendo el tag < BIG > y la forma de disminuir su tamaño es incluyendo el tag < SMALL >.
Para que el texto nos quede en negrita ponemos < B >
Para subrayar un fragmento incluimos < U >
Itálica < I >
Texto parpadeante < BLINK >
Letra teletipo < TT >
Texto tachado < S >
Otra marca importante el < FONT > dentro de esta marca podremos cambiar varios de los parámetros del texto, fuente, color y tamaño.
Ejemplo:
<FONT COLOR=”#FFFFFF” SIZE=” 2” FACE=”Fuente1”>
</FONT>
Paso a explicar esta marca, FONT COLOR es el color del texto, size es el tamaño del texto y FACE es la fuente tipográfica.
Debo aclarar que para que estos tags no afecten a todo el documento sino solo a la parte que nosotros decidamos debemos cerrarlos. Poniendo </FONT>
Vean el siguiente ejemplo:
Texto en negrita < B >texto </ B >
Agregar imágenes:
Para esto debemos ingresar
<IMG SRC=”rutadeacceso.jpg”>
En ruta de acceso debemos poner por ejemplo “images/foto.jpg” o también podemos poner http://www.tudominio.com/images/foto.jpg esto le indica al navegador donde se encuentra la imagen.
CONSEJO: cuando titules la imágenes trata de no dejar espacios entre los caracteres o sino utilizá únicamente números.
Dudas?, visita nuestro foro de webmasters!
Por... www.superscript.com.ar
