I. Introducción
II. Texto
|
| El HTML, acrónimo inglés de HyperText Markup Language (lenguaje de marcas hipertextuales), lenguaje de marcación diseñado para estructurar textos y presentarlos en forma de hipertexto, que es el formato estándar de las páginas web. Gracias a Internet y a los navegadores del tipo Internet Explorer, Opera, Firefox o Netscape, el HTML se ha convertido en uno de los formatos más populares que existen para la construcción de documentos y también de los más fáciles de aprender. |
| · Con HTML podras crear tus propias páginas web fácilmente, ya que es un lenguaje web muy simple y siguiendo este manual no tardarás mucho en dominarlo perfectamente. El HTML no distingue Mayúsculas y Minúsculas! . Tampoco distingue entre espacios así que se pueden dejar tantos espacios como quieras!! |
| Para crear un documento HTML abre el Menú de Inicio y luego abre Programas y
dirigete a Accesorios
Allí encontrarás el Bloc de Notas, con el cual vamos a trabajar y crear los documentos HTML. Para tener todos los archivos que vas a ir creando en una misma carpeta es recomendable que crees una Nueva Carpeta en Mis Documentos y que le des un nombre como por Ejemplo:"html". Dentro de esta carpeta puedes ir guardando todo lo que crees con HTML siguiendo este tutorial. Vuelve a abrir ahora el Bloc de Notas y guarda tu documento en blanco como (Nombre:) index.htm en vez de guardarlo como un documento de texto (index.txt) . Los documentos HTML pueden tener las extensiones .htm o .html En este manual utilizamos la extensión .htm (Es recomendable utilizar siempre la misma y si decidís aprender con este manual utilizad la extensión .htm). Abre el documento que has guardado desde tu carpeta! |
| Abre (el archivo creado previamente [index.htm] con) el Bloc de Notas [Click derecho del ratón => Abrir con...] y escribe lo siguiente: |
| <html>
//--> Aquí empieza tu documento HTML
<head> //--> Aquí empieza la cabecera (En ella puedes incluir un título y scripts) </head> //--> Aquí acaba la cabecera <body> //--> Aquí empieza el cuerpo (En él vas a escribir todo lo que los lectores van a ver [título, texto...]) Bienvenidos a mi página web //--> Escribe aquí tu texto </body> //--> Aquí acaba el cuerpo </html> //--> Aquí acaba el documento HTML |
Guarda el documento y ábrelo desde tu carpeta (verás que es ahora un documento web)! |
|
<html>
<head> <title>Tu Título</title> //--> Aquí escribes el título de tu página </head> <body> Bienvenidos a mi página web </body> </html> |
| Los colores se definen con números hexadecimales, pero en HTML podemos escribir los nombres en ingles [ Ejemplo: orange, yellow, red green, black...] y podemos especificar si queremos que el color sea claro u oscuro [Ejemplo: lightgreen, darkred...]. Puedes encontrar todos los colores en numeros hexadecimales [ Ejemplo: #0099CC ] en algunos de los editores HTML, pero si trabajas con el Bloc de Notas, puedes ver todos los colores hexadecimales haciendo click >>aquí<< |
|
<html>
<head> <title>Tu Título</title> </head> <body> <font color="red">Bienvenidos a mi página web</font> <!-- definimos en "font" el color de texto que queremos // cierra font </font> al acabar de escribir el texto que quieres del color especificado. En este ejemplo [abajo] el texto aparecerá rojo--> </body> </html> |
| //Ejemplo: Bienvenidos a mi página web |
| Para cambiar el tamaño y el tipo de letra vamos a definir lo siguiente dentro de <font>: "size" (tamaño) y "face" (tipo de letra) añadiéndolo al color que has definido en el capítulo anterior. El color, el tamaño y la fuente son solamente ejemplos, tú pon el que quieras. En el tamaño podemos dar un número [también puede llevar coma: 1.5, 2.2...] o especificar si el texto es más grande o más pequeño que el texto del resto del documento [size="-1" || size="+1"...]. Para definir el tipo de letra [ Ejemplo: Times New Roman ] busca en el word la que más te guste. Si no lo comprendes mira bien los siguientes ejemplos: |
|
//Ejemplo 1: <font color="red" face="Comic Sans MS" size="4.5">Bienvenidos a mi página web</font> <!--// fijate que no hace falta ordenarlas, lo unico que hay que poner entre color, font y size es un espacio --> //Ejemplo 2: <font color="blue" face="Verdana" size="-1">Bienvenidos a mi página web</font> <!--// al escribir size="-1" el tamaño de la letra sera el actual en tu página menos 1--> //Ejemplo 3: <font color="green" face=" courier new" size="+2">Bienvenidos a mi página web</font> <!--// al escribir size="+2" el tamaño de la letra sera el actual en tu página más 2 // fijate en que al definir el tipo de letra (face) da igual si escribes mayúsculas o minúsculas--> //Ejemplo 4: <font color="black" face="arial black" size="3">Bienvenidos a< /font><font color="purple" face="times new roman" size="4">mi página web</font> <!--// ahora la palabra Bienvenidos aparecerá de color negro, en arial black y tamaño 3 y mi página web aparecera en color lila, times new roman y tamaño 4, la palabra bienvenidos aparece más grande, ya que arial black es, ya de por si, más grande que times new roman--> |
|
Este sería el resultado de los ejemplos, puedes probarlo escribiendo varios documentos, uno con cada color,
fuente y tamaño, ya que de momento aún no has aprendido a separar párrafos (capítulo 5 de este tema):
//Ejemplo 1: Bienvenidos a mi página web //Ejemplo 2: Bienvenidos a mi página web //Ejemplo 3: Bienvenidos a mi página web //Ejemplo 4: Bienvenidos a mi página web |
| Ahora que ya entiendes el funcionamiento
básico de HTML avanzaremos más deprisa, sin dar tantos rodeos: Para remarcar tu texto o palabra en negrita usa el comando <b>Tu texto aquí</b> => para acordaros aprended las palabras en inglés que iré poniendo entre paréntesis [<b> => Negrita; en inglés => Bold]. Para escribir en cursiva [en inglés => Italic] escribe lo siguiente: <i>Tu texto aquí</i> Para subrayar [en inglés => Underline] una o varias palabras: <u>Tu texto aquí</u> · Como puedes ver, representan la primera letra de la palabra inglesa. Es por eso útil que entendáis bien la lengua, ya que entenderéis la mayoría de lenguajes web. Si no acabas de entenderlo todo mira el siguiente ejemplo: |
|
//Ejemplo 1:<b>Bienvenidos a mi página web</b> //Ejemplo 2:<i>Bienvenidos a mi página web</i> //Ejemplo 3:<u>Bienvenidos a mi página web</u> //Ejemplo 4:<b>Bienvenidos</b> <i>a mi</i> <u>página web</u> |
|
//Ejemplo 1: Bienvenidos a mi página web //Ejemplo 2: Bienvenidos a mi página web //Ejemplo 3: Bienvenidos a mi página web //Ejemplo 4: Bienvenidos a mi página web |
|
En este apartado vamos a crear una página web con un título y un texto separado en párrafos.
Vamos a aprender también a alinear el texto. Hay dos maneras de separar tu texto:
|
| //Ejemplo 1: Mi página web <br><br> //equivale a pulsar en el word dos veces la tecla "Enter" | No hace falta separar <br> del texto pero es más cómoda la lectura de este modo. Bienvenidos!!! <br><br> Lo siento pero la página tardará aún un tiempo en ser acabada... //Ejemplo 2: Mi página web <p>Bienvenidos!!!</p> <!-- // escribimos el texto dentro de <p> y </p> cómo hemos hecho anteriormente con <b></b>, ya que designa una cualidad del texto, en cambio <br> significa simplemente cambio de línea. Lo siento pero la página tardará aún un tiempo en ser acabada... //Ejemplo 3: Mi página web <p> // empieza el párrafo El HTML, acrónimo inglés de HyperText Markup<br> Language (lenguaje de marcas hipertextuales), lenguaje<br> de marcación diseñado para estructurar textos y<br> presentarlos en forma de hipertexto, que es el formato<br> estándar de las páginas web. Gracias a Internet y a los<br> navegadores del tipo Internet Explorer, Opera, Firefox<br> o Netscape, el HTML se ha convertido en uno de los<br> formatos más populares que existen para la construcción<br> de documentos y también de los más fáciles de aprender.<br> </p> Lo siento pero la página tardará aún un tiempo en ser acabada... |
| // Los resultados del primero y segundo son iguales;
aunque es más practico definir un párrafo en el que también podemos incluir breaks (3). //Ejemplo 1: Mi página web Bienvenidos!!! Lo siento pero la página tardará aún un tiempo en ser acabada... //Ejemplo 2: Mi página web Bienvenidos!!! Lo siento pero la página tardará aún un tiempo en ser acabada...//Ejemplo 3: Mi página web El HTML, acrónimo inglés de HyperText Markup |
|
· Ahora vamos a probar de alinear el párrafo largo del tercer ejemplo al centro y a la derecha Para conseguirlo, no teneis mas que escribir dentro de <p> lo siguiente:
|
| //Ejemplo de alinear texto al centro:
El HTML, acrónimo inglés de HyperText Markup |
|
· Vamos a acabar este tema introduciendo un título [headline] en nuestra Página web.
Podéis hacerlo mediante <font>, pero vamos a utilizar un método más
cómodo y práctico para los títulos.<h1></h1> separa al igual que <p></p>
el título del texto El método es el siguiente: <h1>Tu título</h1> Este sería el título más grande y el más pequeño sería: <h6>Tu título</h6>. Como podeis ver el tamaño funciona al revés que en el <font> Dentro de <h1>; <h2>; <h3>; <h4>; <h5>; <h6> podemos definir dónde los alineamos: Ejemplo: <h1 align="center">Tu título</h1> [no os olvideis que podeis convertirlo en negrita y cambiarle el color añadiendo <font> y <b> --> Repaso: <b><font color="blue"><h2>Tu título</h2></font></b> Veamos ahora cómo se vería cada título: |
//Ejemplo 1 <h1></h1>: Mi página web//Ejemplo 2 <h2></h2>:Mi página web//Ejemplo 3 <h3></h3>:Mi página web//Ejemplo 4 <h4></h4>:Mi página web//Ejemplo 5 <h5></h5>:Mi página web//Ejemplo 6 <h6></h6>:Mi página web//Ejemplo 7 <h2></h2>: Mi página web//en el último ejemplo hemos combinado el <b>; el <u>; el <font> el <h2> de la siguiente manera: [el orden no importa] :<b><font color="red"><u><h2>Mi página web</h2></u></font></b> |
Los Arqueros>>Poema de García Lorca Los arqueros oscuros Guadalquivir abierto. Anchos sombreros grises, ¡Ay, Guadalquivir! Vienen de los remotos Guadalquivir abierto. Y van a un laberinto. ¡Ay, Guadalquivir! |
| Para definir el color de fondo de un documento sólo tienes que hacer lo siguiente:
Dentro del tag <body> vamos a definir el color de fondo con bgcolor="red" (rojo por ejemplo) Si no estás seguro de haberlo entendido del todo mira el siguiente ejemplo y su resultado: |
| //Ejemplo 1 <html> <head></head> <body bgcolor="lightgreen"><!--verde claro es en este caso nuestro color de fondo, tu pon el que quieras--> <font color="blue" size="4" face="Arial Black>Bienvenidos a mi página web</font> <!--aplicamos lo que hemos aprendido en el tema anterior--> </body> </html> |
| Bienvenidos a mi página web
|
|
Añadimos el color del texto de este modo: Ejemplo: <body bgcolor="red" text="blue"> Probad con colores de fondo y de texto vosotros mismos. |
| Vamos a sustituir la palabra "bgcolor" por "background" y el color
por una imágen. De todas formas no hace falta que quitéis el color de fondo, podéis dejarlo
por si la imágen no funciona.Recuerda que la imágen tiene que estar en la misma carpeta que el documento HTML. Podéis descargar las texturas mostradas en los ejemplos haciendo click >> aquí <<. Escribiríamos lo siguiente: <body background="nombreimagen.extensión" text="lightyellow"> // las extensiones más comunes son gif y jpg, pero tú mira que extensión tiene tu imágen. De todas formas si no lo acabas de entender mirate los ejemplos. Veámos los siguientes ejemplos: |
| //Ejemplo 1 <body background="azul.jpg" text="white"> // recuerda que la imágen tiene que estar en la misma carpeta que el archivo <h1 align="center"><b>Bienvenidos a mi página web</b></h1> </body> //Ejemplo 2 <body background="piedras.jpg" text="darkred"> <h1 align="center"><b>Bienvenidos a mi página web</b></h1> </body> //Ejemplo 2 <body background="estrellas" text="yellow"> <h1 align="center"><b>Bienvenidos a mi página web</b></h1> </body> |
//Ejemplo 1Bienvenidos a mi página web |
// Ejemplo 2 Bienvenidos a mi página web |
// Ejemplo 3 Bienvenidos a mi página web |
Descargar Texturas de los ejemplos
| Para crear un hipervínculo externo [a una página web] escribe el siguiente código: <a href="el_nombre_de_la_pagina">Tu Texto Aquí</a> Puedes escribir un hipervínculo en medio de tu texto y puedes aplicar a los links todo lo que has aprendido a hacer con el texto [alineación, color... fíjate en el siguiente ejemplo]: Ejemplo >> Para entrar en mi página web haz click <a href="http://www.marcbosch.110mb.com">aquí</a><br> Para ir a google haz click <a href="http://www.google.es"><font color="red">aquí</font></a> <br> Para ir al manual HTML haz click <a href="http://www.marcbosch.110mb.com/htmlmanual/tutorial.htm">aquí</a> |
| //Veámos pues el resultado del ejemplo; Ignora el efecto al pasar el
cursor por encima, es un script y no vamos a aprenderlo en este manual (ccs): Para entrar en mi página web haz click aquí Para ir a google haz click aquí Para ir al manual HTML haz click aquí |
|
Para este capítulo es esencial entender los temas anteriores. >> En el tag <body> de nuestro documento vamos a especificar el color de los links en todos sus estados: - Link en su estado normal => link="tucolor" - Link activo => alink="tucolor" - Link visitado => vlink="tucolor" >> Veamos un ejemplo: <body bgcolor="yellow" link="green" alink="red" vlink="blue"> <a href="http://www.google.es">Página Web de Google</a> </body> |
|
//Veámos pues el resultado del ejemplo [Nota: puede que no funcione al 100% en este ejemplo] Página Web de Google // Al hacer click se volverá de color rojo y al volver a la página después de haber pulsado sobre el link este será azul. |
|
1. Links a páginas que estén en la misma carpeta: Simplemente escribe el nombre de la página htm / html que vinculas(esta debe estar en la misma carpeta). Ejemplo: <a href="help.htm">Ir al libro de visitas de ayuda</a> 2. Links dentro de tu misma página web A veces tu página puede ser muy larga [como es el caso de este manual] y puedes necesitar vínculos para que la gente no tenga que pasarse el dia buscando por la página. Tienes que añadir al lugar que quieres acceder el siguente código: <a name="nombre"></a> El vínculo al lugar "nombre" será entonces: <a href="#nombre">Ir a nombre</a> //nota: No olvides poner la almohadilla (#) 3.Combinar También puedes combinar las dos cosas: Ejemplo => <a href="help.htm#nombre">Ir a help => nombre</a> |
| Pruébalo tu mismo. Crea una página con tu diario personal por ejemplo y crea hipervínculos
desde otra página. Recuerda que ha de estar en la misma carpeta !!. En esta página cuando pulsas volver al manual o cualquiera de los capítulos no son más que vínculos internos!!! |
|
Código para crear un hipervínculo a una subcarpeta:
<a href="/tusubcarpeta/tuarchivo.htm"> Ejemplo: <a href="/misarchivos/futbol.htm">Futbol</a> // En este ejemplo el resultado obtenido sería http://tupaginaweb.com/misarchivos/futbol.htm Si el archivo es movido de subdominio has de cambiar el hipervínculo. Recuerda que si mueves el archivo vinculado de carpeta tendrás que canviar el nombre del hipervínculo. También puedes, claro está, escribir la página completa al escribir el hipervínculo. Ejemplo: <a href="http ://tupaginaweb.com/misarchivos/futbol.htm"> Futbol</a>. Entonces podrías acceder al archivo futbol.htm desde cualquier lugar. Si quieres probarlo tendrás que buscar alojamiento web. Yo recomiendo 4444 MB, 110 MB y Awardspace , ya que no tienen publicidad. También incluyen PHP y Ajax para usuarios más avanzados. La otra opción es Geocities de Yahoo. La ventaja de Geocities es que puedes editar con más facilidad los archivos que has subido o crear nuevos. Con los otros dominios tienes más problemas. Otra ventaja de Geocities es que tiene un Wizard para crear páginas web básicas sin saber HTML y en poco tiempo, pero los temas y diseños son escasos. Pero yo dejé de alojarme en Yahoo Geocities por la publicidad que molesta mucho y por lo incómodo que resulta acceder a tu página. En Awardspace y los otros dos tu dominio sería asi: http://www.tunombre.110mb.com || http://www.tunombre.4444mb.com || http://www.tunombre.awardspace.com... En cambio en Geocities es más incómodo: http://es.geocities.com/tunombre Los cuatro servicios de alojamiento web son bastante rápidos. |