Hola Taringueros! hoy les traigo un post de guia de HTML, para que aprendan a hacer una pagina web. Link para descargar editor de texto: http://notepad-plus-plus.org/download/v6.1.2.html INTRODUCCIÓN Las páginas web están armadas usando el lenguaje de marcación de elementos en la pantalla, o sea HTML. Por medio de él, le decimos al navegador qué elementos queremos ver (imágenes, texto, etc), en qué posición de la pantalla y con qué características (color, tamaño, etc). Para armar una página web, necesitamos contar con un editor de texto cualquiera. Recomendamos Notepad++ por ser muy fácil. Para crear tu primera página web, abrí Notepad++ y vas a encontrar en la parte superior una pestaña que dice “Untitled” o “Sin Título”. Ese es el archivo que va a contener las etiquetas HTML, o sea, tu página web. Por lo tanto se lo debe guardar (File – Save). Para guardar archivos que van a ser páginas web, se deben seguir unas reglas como las siguientes: •Los nombres de archivo no deben tener espacios, mayúsculas, tildes, Ñ ni caracteres especiales (@, ¿, etc). •La extensión del archivo debe ser .html Si no le ponés esa extensión, tu archivo no será una página web, sino un archivo de texto .txt Por ejemplo, guardá tu archivo con el nombre pagina1.html De paso, abrilo con el navegador que tengas en tu máquina (Internet Explorer, Google Chrome, etc). Y no lo cierres, así cuando vamos agregando etiquetas en el Notepad++, vamos viendo cómo se ve tu página en el navegador. Para trabajar mejor, recomendamos tener abiertos los dos programas: Notepad++ con tu archivo pagina1.html, y el navegador con ese mismo archivo para ver los cambios. Cada vez que modifiques el archivo en LopeEdit, guardá los cambios que hiciste y luego actualizá tu página en el navegador (F5). El principio esencial del lenguaje HTML (HyperText Markup Language) es el uso de las etiquetas (tags). Las letras de la etiqueta pueden estar en mayúsculas o minúsculas, indiferentemente. Todo el documento HTML debe estar entre las etiquetas y : El documento en sí está dividido en dos zonas principales: •El encabezamiento, comprendido entre las etiquetas y . Dentro del encabezamiento hay información del documento, que no se ve en la pantalla principal, como el título del documento, comprendido entre las etiquetas . El título debe ser breve y descriptivo de su contenido, pues será lo que vean los demás cuando agreguen nuestra página a sus favoritos, por ejemplo. •El cuerpo, comprendido entre las etiquetas y . Dentro del cuerpo están todos los elementos que queremos que aparezca en la página (texto, imágenes, etc.) Por tanto, la estructura queda de esta manera: HTML> [Aquí van las etiquetas que visualizan la página] Como dijimos, lo mínimo que se necesita para crear y ejecutar un documento HTML es un editor de texto (como el block de notas o el LopeEdit) y un explorador web (como el IE). No olvidar que al guardar el archivo en el editor, su extensión debe ser .HTML. Cuando escribimos en el documento el texto que queremos que aparezca en la pantalla se acomoda a ella, sin que tengamos que pulsar Enter. Por qué tenemos que tener cuidado al darle nombre a los archivos: Un sitio del Web es en realidad un conjunto de archivos que vamos a colocar en un servidor, para que sean accesibles a quien quiera visitarlos. Pero debido a que la mayoría de los servidores están basados en sistemas operativos Unix (aunque crecientemente se van utilizando otros sistemas), es muy conveniente, para evitarnos problemas al instalar nuestros archivos en el servidor, considerar una particularidad referente a los nombres de los archivos. En los sistemas más utilizados para confeccionar las páginas del Web (Windows, Mac) es indiferente la utilización de las mayúsculas y minúsculas en los nombres de los achivos. Es decir, es lo mismo Indice.html que INDICE.HTML o que indice.html Pero esto no es así en los sistemas Unix, en donde los ejemplos anteriores se corresponderían a tres nombres distintos. Si no se tiene esto en cuenta, puede ocurrir, por ejemplo, que una referencia que se haga en un documento HTML al archivo Indice.html resulte en un error de que no existe tal fichero debido a que en realidad se llama indice.html Para evitar estos posibles problemas es muy conveniente (como ya dijimos) tomar estas medidas desde que se comienza la confección de una página del Web: •Utilizar exclusivamente las minúsculas para nombrar los documentos HTML, y todos aquellos que forman parte de la web (imágenes, sonido, etc). •Todas las referencias que se hagan dentro de un documento HTML a otros documentos o archivos deben hacerse también siempre en minúsculas. •Evitar los espacios en los nombres de archivos; usar el guión bajo. ETIQUETAS •Para párrafos: se usa la etiqueta

, que se cierra con

. Deja un espacio entre cada párrafo. •Para separar un mismo párrafo en varias partes:
sin cerrarla. No deja espacio entre las partes divididas. •Para obtener varias líneas en blanco, se usan ambas:

, una por cada línea a generar. •Si se necesita separar palabras con más de un espacio:   sin usar los signos < y >(non-breaking space). •Cabeceras:

y

,

y

, etc. (hasta el número 6), siendo el número indicativo del tamaño. El tamaño mayor es el correspondiente al número 1. •Centrado: (no la soportan todos los navegadores). Centra todo lo que esté dentro de ella, ya sea texto, imágenes, etc. •Separadores (horizontal rules):

---

(no existe la correspondiente de cierre). Con ella se obtiene una línea horizontal tan ancha como la pantalla. 

---

Ocupa el 75% de su anchura (width) normal. 

---

Tiene una anchura de 300 pixels. 

---

Alinear a la derecha. 

---

Para variar su espesor. 

---

Para que sea una línea sólida. 

---

Para que sea azul. Cuando se quiera usar más de una de las propiedades anteriores, conviene colocarlas dentro de la misma la etiqueta

---

---

•Estilo Negrita: (bold). •Estilo Cursiva: (italic). •Superíndice: •Subíndice: •Listas sin orden (unordered lists): sirven para presentar cosas que, por no tener un orden determinado, no necesitan ir precedidas por un número. Aparecen viñetas sencillas. Su estructura es la siguiente:

• Una cosa
• Otra cosa

•Listas con orden (ordered lists): sirven para presentar cosas en un orden determinado. Su estructura es muy similar a la anterior. Aparecerá un número correlativo para cada cosa.

1. Primera cosa
2. Segunda cosa

•Comentarios no visibles en la pantalla: se consiguen encerrando dichos comentarios entre •Enlaces (Links): La característica que más ha influido en el éxito del Web ha sido, aparte la de su carácter multimedia, la posibilidad de unir los distintos documentos por medio de enlaces de hipertexto. En general, los enlaces tienen la siguiente estructura: marcador donde: página es el destino del enlace. marcador es el texto indicativo en la pantalla del enlace (con un color especial y generalmente subrayado) Vamos a distinguir varios tipos de enlaces: 1.Enlaces dentro de la misma página: En el caso de documentos muy extensos, nos puede interesar dar un salto desde una posición a otra determinada. YYY En este caso, el destino del enlace (que sería el sitio dentro de la página a donde queremos saltar) se sustituye por #marca (la palabra marca puede ser cualquier palabra que queramos). Lo que hemos llamado antes YYY es el marcador (palabras subrayadas) que aparecerán en la pantalla. Y en el sitio exacto a donde queremos saltar, debemos poner la siguiente etiqueta: Por ejemplo, si quiero saltar desde aquí a la pantalla final, pongo la siguiente etiqueta: Pulsa para ir al final Y en el final del documento he puesto esta otra etiqueta: 2.Enlaces con otra página nuestra: Ir a la Página 2 Estamos suponiendo que la página en la que estamos escribiendo esta etiqueta y la otra página a la que queremos saltar están en el mismo directorio. Si la página a la que queremos saltar está, p. ej. en el subdirectorio subdir, entonces en la etiqueta tendría que haber puesto "subdir/mipag2.html". Y a la inversa, si queremos saltar desde una página a otra que está en un directorio anterior, en la etiqueta tendríamos que haber puesto "../mipag2.html". Esos dos puntos hace que se dirija al directorio anterior. 3.Enlaces con una página fuera de nuestro sistema: es necesario conocer su dirección completa, o URL (Uniform Resource Locator). Página inicial de Netscape •Imágenes: Con el comando IMG SRC (image source, origen de la imagen) se indica que se quiere cargar una imagen llamada imagen.gif (o el nombre que tenga). La imagen debe estar en la misma carpeta que la página, sinó se debe usar “/”, como en los enlaces. Dentro de la etiqueta se pueden añadir otros comandos, tal como ALT, para colocar un texto alternativo (una palabra o una frase breve). A la imagen se le puede agregar un titular y alinearlo arriba (TOP), en medio (MIDDLE) o abajo (BOTTOM) del lado de la imagen. Para ello se añade el comando ALIGN a la etiqueta, de la siguiente manera: Titular alineado arriba Otra posibilidad muy interesante es la de utilizar una imagen como enlace a otra página. Aquí al formato del enlace se le anida la imagen, la cual funcionará como marcador del enlace: La imagen queda rodeada de un rectágulo del color normal en los enlaces. Para quitarlo, agregar dentro del tag IMG  BORDER=0 •Fuentes: Para cambiar la fuente de los textos, se usa En la etiqueta de apertura, se especifica qué se quiere modificar de dicha fuente (el tamaño, el tipo, el color): Tamaño: Texto en tamaño 5 Los tamaños del texto van, de menor a mayor, del 1 al 7. El tamaño normal es el 3. Se puede cambiar incluso el tamaño base para toda la página, poniendo a continuación de la etiqueta Tipos de las fuentes: Este texto se verá con la fuente Verdana Los navegadores utilizan por defecto Times New Roman. Quien no tenga la fuente Verdana instalada, por ejemplo, verá el texto en Times New Roman. USAR SIEMPRE LAS FUENTES QUE TRAE WINDOWS. Color: Texto en color donde: oXX es un número indicativo de la cantidad de color rojo oYY es un número indicativo de la cantidad de color verde oZZ es un número indicativo de la cantidad de color azul Estos números están en hexadecimal. El número menor es el 00 y el mayor el FF. Así, por ejemplo, el color rojo es el #FF0000, porque tiene el máximo de rojo y cero de los otro dos colores. De esta forma usamos la paleta de colore RGB (Red Green Blue), especial para monitores y TV. •Fondos: Se puede cambiar el fondo de dos maneras distintas: 1.Con un color uniforme: Se pueden elegir los colores del texto y de los enlaces, añadiendo a la etiqueta los siguientes comandos: Donde: TEXT - color del texto LINK - color de los enlaces VLINK - color de los enlaces visitados ALINK - color de los enlaces activos (el que adquieren en el momento de ser pulsados) 2.Con una imagen: Se pueden combinar ambos; si la imagen no se puede cargar, toma el color de fondo: •Alineación y dimensionado de imágenes 1.Para alinearla: 2.Para cambiar su tamaño en ambas dimensiones: Se corre el riesgo de deformar la imagen. Para que esto no ocurra y se respeten sus proporciones, solamente se debe usar uno de ellos: o WIDTH, o HEIGHT. La otra dimensión se ajusta a la que fue modificada. •Tablas: La etiqueta general, que engloba a todas las demás es y . Es decir: [resto de las etiquetas] Para ver los bordes: [resto de las etiquetas] Para formar cada fila (row) de la tabla, se usa y . Hay que repetirlas tantas veces como filas queremos que tenga la tabla. [etiquetas de las distintas celdas de la primera fila] En el último nivel (dentro de las anteriores) están las etiquetas de cada celda, que son y , que engloban el contenido de cada celda concreta (texto, imágenes, etc.). Hay que repetirla tantas veces como celdas queremos que haya en esa fila. celda1 celda2 Ejemplo de una tabla con dos filas. Cada fila va a tener tres celdas. Dentro de cada celda vamos a poner un texto indicativo de la posición de dicha celda:

fila1-celda1	fila1-celda2	fila1-celda3
fila2-celda1	fila2-celda2	fila2-celda3

Se puede añadir un titular (caption) a la tabla: Titular de Tabla Normalmente, el contenido de una celda está alineado a la izquierda. Pero se puede cambiar: Al centro A la derecha El alineamiento por defecto en el sentido vertical es en el medio. También se puede cambiar: Arriba Abajo oPara cambiar el ancho y el alto de la tabla: Como se ve, se puede usar el % que va a ocupar con respecto al ancho de la pantalla, o una medida en pixels. oColor de fondo en toda la tabla: oColor de fondo en una celda: oImágenes de fondo en las tablas:

celda1

oSeparación entre las celdas de una tabla: oSeparación entre el borde y el contenido dentro de las celdas: •Sonidos: Una página del Web puede tener sonidos incorporados, bien sea como un fondo sonoro que se ejecuta automáticamente al cargar la página, o como una opción para que la active el propio usuario. Fondo sonoro: El archivo de sonido puede estar en formato .mid o .wav. LOOP sirve para especificar el número (n) de veces que se debe ejecutar el archivo Si se escoje el número n=-1 o se pone LOOP=infinite, el sonido se ejecutará indefinidamente. Se puede omitir este atributo, y entonces el fichero se ejecutará una sola vez. Activación del sonido por el propio usuario: Consiste en poner un enlace a un archivo de sonido, de tal manera, que al pulsarlo se ejecute. Ejemplo: Escucha esta musica Al pulsar el enlace se activa, en una ventana aparte, el programa que ejecuta el sonido. •Para ejecutar videos y animaciones: •Marquesinas (Marquees): Una marquesina (en inglés, marquee) es una ventana en la que se desplaza un texto. La etiqueta básica es: Texto que se desplaza En este caso el comportamiento de la marquesina es el que tiene por defecto: ocupa todo el ancho de la pantalla, tiene la altura de una línea y el texto se desplaza lentamente de derecha a izquierda. Para ajustar la anchura y altura: Cambiamos el ancho y el alto Para cambiar la alineación del texto se coloca ALIGN seguido de TOP (arriba), MIDDLE (en medio) o BOTTOM (abajo). Ejemplo: ¡Hola! BEHAVIOR (Comportamiento): Sirve para definir de cómo se va a efectuar el desplazmiento del texto. Si es igual a SLIDE, aparece por un lado y se desplaza hasta llegar al otro extremo, y se para ahí. Si es igual a ALTERNATE se desplaza alternativamente hacia un lado y otro, siempre dentro de los límites de la marquesina. Ejemplo: Este texto rebota Para cambiarle el color de fondo: Esta marquesina tiene un fondo de color rosa Para modificar la dirección del texto: Este texto se dirije hacia la derecha Para definir la cantidad de desplazamiento del texto en cada movimiento de avance: Doy saltos grandes Para definir el tiempo entre cada movimiento de avance (en milisegundos): Espero mucho entre cada salto Cuanto mayor es el número más lento avanza. Para subir la pagina web a internet pueden subirla mediante el host gratuito http://000webhost.com/ que para mi es el mejor host gratuito que he encontrado. Cualquier Duda que tengan pueden consultarme por mensaje privado, suerte y saludos! SI TE GUSTO EL POST RECOMENDALO!