Aprende A Crear Una Página Web Gratis

Ing. Ral A.
Figueroa Mamani Aprende a crear una pgina web gratis
TICS - PUNO
En esta web tienes todo lo necesario para aprender a crear una pgina web desde cero, hacer su diseo, elegir el contenido y ponerla en internet sin necesidad de conocimientos previos de programacin web. Puedes descargar nuestras plantillas prediseadas gratis! Si deseas aprender a crear tu web mediante programacin, tambin puedes encontrar informacin sobre lenguajes de programacin HTML y PHP en nuestra seccin de Tutoriales. Si sta es tu primera web, te recomiendo que leas todo el contenido que te ofrecemos en esta web.
HTML es el lenguaje utilizado como base para crear las pginas web. En este manual explicamos en profundidad cmo utilizarlo, desde lo ms bsico a los temas ms avanzados.
Introduccin a HTML
Introduccin al manual de HTML y al lenguaje de modelado de pginas web. Veremos qu es HTML y las primeras nociones que nos ayudarn a realizar las primeras pruebas de creacin de una pgina web sencilla. la lectura previa de nuestro manual Publicar en Internet. A partir de esta gua, aprenderis los conceptos ms bsicos necesarios para creacin de un sitio web. Tambin os permitir acceder a este manual con unos conocimientos de base sobre HTML imprescindibles y os dejara bien claro lo que su conocimiento aporta con respecto al simple uso de editores de HTML. Adems, en dicho manual sobre la publicacin en Internet, explicamos tambin algo tan importante como qu hace falta para subir una pgina web realizada que tenemos en nuestro ordenador a un servidor de Internet. Si lo deseamos, lo podemos ver en vdeo en el Videotutorial sobre subir una web a Internet. El pblico al que va enfocado este manual es a todos aquellos que, con conocimientos mnimos de informtica, desean hacer mundialmente pblico un mensaje, una idea o una informacin usando para ello el medio ms prctico, econmico y actual: Internet. Lo que necesitis como base para llevar a buen trmino el aprendizaje (aparte de leer el manual Publicar en Internet) es:
Saber escribir con un teclado Saber manejar un ratn Tener ganas de aprender
Como podris ver, cualquier persona que sepa manejar un ordenador tiene los conocimientos bsicos para aprender HTML. Si le pones un poco de ganas y sigues este manual hasta el final, tendrs las siguientes habilidades o conocimientos:
Capacidad para crear y publicar vuestro propio sitio web con un mnimo de calidad. Conocimientos de todo tipo sobre las tecnologas y herramientas empleadas en el mbito de la Red.
Ing. Ral A. Figueroa Mamani
TICS - PUNO
Posiblemente una aficin que puede convertirse en pasin y terminar, en algunos casos, siendo un vicio o un oficio.
Podis formular vuestras cuestiones y, esperamos que en un futuro ayudar a otros compaeros, enviandodiscusiones sobre HTML o bien en la lista de correo de DesarrolloWeb.com. Para quien no sepa nada sobre crear una pgina web, y le gusta que le expliquen las cosas desde cero y de manera visual, recomendamos ver el vdeo donde mostramos el proceso de creacin de la primera pgina bsica. Adems, para complementar las explicaciones de este manual, tambin recomendamos el videotutorial de HTML. Finalmente, antes de comenzar con el temario, queremos daros una referencia importante a la seccin HTML a fondo, donde publicamos todos los contenidos que tienen que ver con HTML y donde encontrars este y otros manuales relacionados con el lenguaje
1.- Prlogo al manual de HTML
A quin va dirigido este manual y las lecturas aconsejadas antes de abordarlo. Entrar
2.- Introduccin al HTML

Las primeras cosas que debes saber sobre HTML: historia, objetivos y dems conocimientos donde sentar las bases del manual. Entrar
3.- Sintaxis del HTML

Descripcin de la sintaxis con la que se trabaja en el lenguaje HTML, as como la estructura que tendr el documento bsico HTML. Entrar
4.- Tu primera pgina

Vamos a ver cmo se hace una pgina muy sencilla en HTML, que sirva de prctica a los debutantes. Entrar
Formatos bsicos con HTML

Cmo realizar el formato de textos que se colocan en una pgina web. Aprende a utilizar tus primeras etiquetas HTML y atributos para definir los contenidos de la pgina y aplicar un formato bsico. 5.- Formato de prrafos en HTML
Cmo colocar prrafos y saltos de lnea en pginas web. Tambin vemos los encabezados como prrafos que sirven de titulo. Entrar
6.- Formateando el texto
Vemos como colocar negritas, itlicas, subrayados, subndices y suprendices. Entrar
7.- Color, tamao y tipo de letra

Seguimos aprendiendo etiquetas que nos sirven para formatear el texto. Entrar
8.- Los colores y HTML

En este reportaje tratamos de acercarte todos los detalles relativos al buen uso de colores en HTML. Colores compatibles con todos los sistemas. Entrar
9.- Atributos para pginas

Explicamos una serie de atributos que se aplican de manera global a toda la pgina, como el color de fondo el del texto, de los enlaces, mrgenes, etc. Entrar

10.- Caracteres especiales
Una referencia til, y una lista completa de los caracteres especiales del HTML. Entrar
TICS - PUNO
Listas en HTML
A continuacin comenzaremos a explicar las listas de HTML que implican varias etiquetas para crear su estructura. Veremos varios tipos de listas que se pueden utilizar para diversos objetivos. 11.- Listas I - Listas desordenadas
Vemos lo que son las listas y sealamos los tres tipos que hay. Estudiamos las listas desordenadas. Entrar
12.- Listas II - Listas ordenadas
Estudiamos otro tipo de listas: las listas ordenadas. Entrar
13.- Listas III - Listas de definicin

Vemos las listas de definicin y aprendemos a anidar listas para crear estructuras lista ms complejas. Entrar
Todo sobre los enlaces en HTML

Los enlaces son los elementos que nos permiten navegar por las pginas HTML y son tan importantes que la web no tendra sentido sin ellos. Dedicaremos varios captulos a explorar los distintos tipos de enlaces, sus usos y diversos consejos para hacer pginas navegables. 14.- Enlaces en HTML
Vemos qu son los enlaces en HTML y los distintos tipos. Entrar
15.- Enlaces internos
Los enlaces HTML que se hacen con otras partes de la misma pgina. Entrar
16.- Enlaces locales
Enlaces HTML con otras pginas del mismo sitio web. Entrar
17.- Enlaces externos, de correo y hacia archivos

Vemos tres tipos de enlaces. Los dirigidos a otras pginas de otros webs, a direcciones de correo y a ficheros externos. Entrar
18.- Atributo nofollow en los enlaces

El atributo rel=nofollow, de los enlaces, sirve para que los buscadores no continen reastreando a partir de esos enlaces.Entrar
Imgenes, formatos grficos e optimizacin

Veremos todo lo que los creadores de webs deben conocer sobre las imgenes, no slo cmo incluir imgenes en las pginas, sino tambin qu formatos grficos son adecuados en cada caso y cmo podemos optimizar las imgenes para reducir el tiempo de carga de las webs. 19.- Imgenes en HTML
Vemos cmo colocar una imagen en una pgina web y algunos atributos bsicos para asignarle estilos a las imgenes en HTML.Entrar
20.- Alineacin de imgenes con HTML

Explica la manera de alinear la imagen dentro de la pgina: centrarla, colocarla a la derecha, a la izquierda, etc. Entrar
21.- Formatos grficos para pginas web

Presenta los formatos grficos utilizados en las pginas web, el GIF, el JPG y PNG. Hace hincapi en los dos primeros, resumiendo sus caractersticas y enseando a optimizar los ficheros. Entrar

22.- Mapas de imgenes con HTML
TICS - PUNO
Explicamos detalladamente el proceso para crear mapas de imgenes, osea, imgenes que tienes varios enlaces asociados en distintas reas. Entrar
Tablas en HTML
Las tablas fueron muy importantes en una poca para maquetar pginas web. Hoy lo adecuado es utilizarlas slo para presentar informacin tabulada, es decir, colocada en una rejilla de filas y columnas. En los siguientes artculos aprenderemos todo sobre las tablas en HTML. 23.- Tablas en HTML
Vemos lo que son las tablas, para que sirven y en qu casos podemos utilizarlas. Vemos la tabla ms simple posible. Entrar
24.- Tablas en HTML. Atributos para filas y celdas
Continuamos con las tablas. Vemos los atributos que podemos colocar en las filas y las celdas. Entrar
25.- Tablas en HTML. Atributos de la tabla y conclusin

Conocemos los atributos principales que le podemos asignar a la tabla de modo general. Adems vemos varios ejemplos prcticos de construccin de tablas. Entrar
26.- Bordes de tabla en HTML 4

Mostramos algunos atributos de table, vlidos en HTML 4, para definir el borde de las tablas: especificar bordes de varios tipos, externos e internos. Entrar
27.- Agrupar filas o columnas de tablas con HTML 4

En HTML 4.0 podemos agrupar filas de una tabla, o columnas. Sirve para especificar estilos especficos a esas filas o columnas. Entrar
Formularios en HTML
El trabajo con formularios es uno de los principales puntos que debemos aprender en HTML. Hacen posible muchas de las utilidades clave de una web, como el contacto de los creadores de las pginas con los visitantes, as como ciertos niveles de interaccin bsica y avanzada con el usuario. 28.- Formularios HTML
Empezamos la explicacin de la creacin de formularios con el lenguaje HTML. Entrar
29.- Elementos de Formularios. Campos de texto
Vemos detenidamente los distintos elementos de formulario que sirven para introducir texto. Entrar
30.- Otros elementos de formulario

Explicamos la sintaxis y el funcionamiento de las cajas y listas de seleccin, casillas de verificacin y botones de radio. Entrar
31.- Envo, borrado y dems en formularios HTML

Enseamos la manera de colocar botones de envo y borrado en formularios HTML. Tambin conocemos los campos invisibles y los botones normales. Adems, hacemos un ejemplo prctico. Entrar
32.- Etiquetas FIELDSET y LEGEND de formularios

Las etiquetas de HTML FIELDSET y LEGEND sirven para crear bloques de elementos dentro de formularios. Entrar
Frames o marcos en HTML

Los frames en HTML, o marcos si preferimos el trmino en espaol, son una manera de mantener fijas algunas partes de la pgina, mientras se navega por las otras. Fueron en el pasado un componente habitual de las pginas aunque hoy en da se han quedado en desuso por diversas razones. Veremos tambin un caso especial de frames, que se crea con la etiqueta IFRAME, que es importante conocer porque s se usa bastante actualmente.

33.- Frames en HTML
Introducin a los frames, un poco de historia y sus utilidades. Entrar
TICS - PUNO
34.- Frames - Explicacin bsica

Explicamos los detalles generales y los ms bsicos sobre la creacin de frames. Etiquetas FRAMESET Y FRAME. Entrar
35.- Frames - Creacin de una estructura simple
Ejemplo de la creacin de un frame simple para ilustrar lo aprendido hasta ahora. Entrar
36.- Frames - Una pgina en cada marco

Vemos cmo seran las distintas pginas independientes que componen un sitio creado con frames. Entrar
37.- Frames - Dirigir los enlaces

Explicacin sobre cmo dirigir el enlace al frame que deseemos que actualice, que no tiene porque ser el mismo donde est situado.Entrar
38.- Frames - Anidar frames
Explicamos como se crean estructuras con frames ms complejas: anidacin de frames. Entrar
39.- Frames - Atributos avanzados

Lista de atributos de las etiquetas frameset y frame con las que podemos configurar la apariencia y caractersticas de los marcos.Entrar
40.- Ventajas e inconvenientes del uso de frames

Veamos una serie de cosas buenas y malas derivadas del uso de marcos o frames a la hora de disear y utilizar un sitio web. Entrar
41.- Etiqueta Iframe

Explicamos detenidamente la etiqueta IFRAME de HTML y todos sus atributos, con algn ejemplo de uso. Entrar
Lo nuevo en HTML 4.0

El estndar HTML 4.0 trajo consigo diversas etiquetas que implementan nuevos elementos HTML, que podemos incorporar en pginas web. 42.- Las nuevas etiquetas de HTML 4.0
En este artculo veremos estas nuevas etiquetas del estandar HTML 4.0. Entrar
43.- Las nuevas etiquetas de HTML 4.0 (1)

Veamos una serie de etiquetas para formatear el texto de las pginas HTML, con una breve descripcin de cada una de ellas.Entrar
44.- Las nuevas etiquetas de HTML 4.0 (2)
Explicacin de las nuevas etiquetas de HTML 4.0 para uso en formularios. Entrar
Sonido en HTML
Veremos diversos modos de colocar un sonido de fondo en pginas web y los tipos de archivo sonoro que son adecuados para pginas web. 45.- Sonido en HTML I, introduccin
Este es el primer captulo de un manul de el sonido en la web.Entrar
46.- Sonido en HTML II, caractersticas del sonido digital

Conceptos bsicos del sonido digital. Entrar
47.- Sonido en HTML (III)

Cules son los ficheros que podemos ejecutar desde el navegador y cuales desde un programa especfico. Entrar

48.- Sonido en HTML (IV)
En este captulo veremos la manera de incluir los archivos de msica en el HTML. Entrar
TICS - PUNO
49.- Sonido en HTML (V)
En este captulo veremos el potencil de la etiqueta OBJECT. Entrar
Otros asuntos importantes y el futuro del HTML

Acabamos el manual con esta ltima parte en la que trataremos algunos asuntos de vital importancia a la hora de hacer pginas web profesionales. Adems veremos el futuro del HTML, que vendr con la especificacin de HTML 5. 50.- Doctype HTML
Qu es el Doctype en los documentos HTML y XHTML. Vemos distintos tipos de Doctype disponibles. Entrar
51.- Juego de caracteres, charset, del documento HTML

Cmo y por qu debemos especificar el juego de caracteres, tambin conocido como charset, en los documentos HTML. Entrar
52.- Etiqueta META robots
Explicacin de la etiqueta META robots y diferentes posibilidades de configuracin. Entrar
53.- El futuro del desarrollo web: HTML 5

HTML 5 es una tecnologa creada para modernizar la web y el desarrollo de aplicaciones web, online y offline, que aun tiene bastante camino por recorrer para ser una realidad. Entrar
54.- Qu es HTML 5
Veremos qu es HTML 5, su previsin de tiempo para convertirse en una especificacin recomendada y las novedades ms significativas que proporcionar. Entrar
55.- Nuevos elementos de formularios en HTML5

Conociendo algunos de los nuevos elementos con los que podemos contar en los formularios web a partir de HTML5. Entrar
56.- Las mejoras de los elementos INPUT de HTML5

Una breve descripcin de las nuevas caractersticas presentes en los elementos de formulario INPUT en HTML5. Entrar
57.- Etiquetas nuevas de HTML5

Cules son las etiquetas nuevas del lenguaje HTML5, con una breve descripcin sobre su utilidad y clasificacin. Entrar
TICS - PUNO
Introduccin al HTML.
HTML (HyperText Markup Language) es el primer lenguaje que una persona debe conocer si desea comenzar a realizar pginas web. HTML no es un lenguaje de programacin, sino una lenguaje descriptivo, una serie de etiquetas que el navegador interpretar de una u otra forma para mostrar distintos contenidos por pantalla. Por ejemplo, si creamos un documento de texto que se llame ejemplo.html y que contenga el siguiente texto
<html> <head></head> <body> Hola mundo!<br> <b>Esto es negrita.</b><br> <i>Y esto itálica.</i><br> </body> </html> generar el siguiente resultado: Hola mundo! Esto es negrita. Y esto itlica. Ver ejemplo en una pgina aparte. Por tanto, aprender HTML consiste en conocer y saber utilizar dichas etiquetas. Para realizar este curso no necesitas ningn software especifco, sino que tan slo necesitas un editor de texto, como puede ser el bloc de notas de Windows, aunque se recomienda usar algn otro editor ms especializado que te ayude en la escritura del cdigo, como puede ser el Macromedia Dreamweaver. Este curso consiste en una descripcin de las distintas etiquetas y los distintos atributos que tiene HTML, una explicacin de cmo se emplean y consejos para mejorar el resultado final de las pginas. Para seguirlo crate un fichero de texto con extensin .html o .html (de esta manera con un simple doble clic, se abrir tu navegador, lo que te permitir visualizar todas las pruebas que hagas de manera rpida) y edtalo con cualquier editor de texto. Ves probando los distintos ejemplos que te damos en tu propio ordenador y practica tu mismo con las etiquetas que estudiamos en cada captulo.
Estructura bsica de una pgina web.

La estructura bsica de una pgina web es la siguiente:
<html> <head></head> <body> </body> </html>
Una estructura HTML se empieza con la etiqueta <html> y acaba con </html>. Todo lo que est en medio ser la pgina web. Dentro de <html></html> se encuentran 2 partes diferenciadas. La primera <head></head> es la cabecera de la pgina. Aqu irn cierta informacin que no es directamente el contenido de la pgina. Aqu se pone el ttulo de la pgina, los metadatos, estilos, cdigo javascript (todo esto se estudiar en captulos venideros). La primera que se suele estudiar es <title></title>, que indica el ttulo de la pgina (lo que el navegador pone en la parte superior izquierda). La segunda parte es <body></body>. Aqu va propiamente el contenido de la pgina: fotos, prrafos, formularios, etc. Por ejemplo, siguiendo con el ejemplo de la pgina anterior, el siguiente cdigo
<html>
TICS - PUNO
<head> <title>Esto es el título de la página.</title> </head> <body> Hola mundo!<br> <b>Esto es negrita.</b><br> <i>Y esto itálica.</i><br> </body> </html>
Generar el siguiente resultado (abre la pgina en otra ventana, dale al botn derecho => ver cdigo fuente, y vers as el cdigo HTML de la pgina): No podemos hablar de la estructura bsica de un pgina web sin hablaros de los meta tags. Los meta tags se insertan en la cabecera de la pgina, entre las etiquetas <head></head>. La funcin de estos tags vara. Pueden ser informativos, para los buscadores y usuarios, indicndoles el tipo de contenido de la web, sus palabras claves, etc. o pueden predefinir una actuacin a la pgina.
Meta tags bsicos.

La meta tags no se pueden ver a no ser que sea a travs del cdigo fuente. Es decir, un meta tag no hace variar la apariencia de una pgina web, pero son imprescindibles e importantsimos para los buscadores webs. El esquema de un meta tag es el siguiente: <meta name=" " content=" "/>. El name muestra el nombre de la etiqueta y el content el contenido de esa etiqueta. Los meta ta gs pueden cerrarse de dos formas: > o /> . La segunda es ms correcta aunque los navegadores no muestran diferencia con una u otra. Puede que todo esto te suene a chino, no te preocupes. Ahora vamos a pasar a explicarte los meta tags ms importantes que debes conocer. Meta tag Keywords Este meta indica al buscador las palabras claves de nuestra pgina. Por ejemplo, nuestra pgina al ser un tutorial de html, sus palabras clave sern tutorial y html. Los keywords deben ir separados por comas y sin espacios entre ellos. <meta name="Keywords" content="tutorial,html" /> Meta tag Description Este meta es tambin destinado para los buscadores. En la description escribiremos la descripcin de la pgina, de sus contenidos. Esto lo haremos a travs de frases cortas y separadas entre ellas por puntos. En nuestra pgina este meta quedara de la siguiente manera: <meta name="Description" content="Tutorial html. Meta tags" /> Meta tag language Este meta tag le indica al buscador el idioma en el que est escrita la pgina. En el caso de espaol en content se pone es, en ingls en, en francs fr Nuestra pgina es espaola as que su meta ser el siguiente: <meta http-equiv="Content-Language" content="es"/> Meta tag Distribution Este meta es importante. Marac la distribucin que queremos que se haga de nuestra web en Internet. Si queremos que se distribuya por todo el mundo en content indicaremos global. Escribir este meta en global es lo ms recomendable. As pues nuestra pgina incluir

<meta name="distribution" content="global"/> Meta tag Robots
TICS - PUNO
Puede que no queramos que nuestra pgina sea indexada por los robots de los buscadores Web. En ese caso debemos indicrselo con el meta Robots. En content variar la respuesta dependiendo del valor que escribamos. Los valores all e index indicarn que queremos que se indexe toda la pgina. Los valores none y noindex indicarn que no queremos que se indexe nada. El valor follow indica que queremos que el robot siga los vnculos externos de nuestra web y nofollow indicar lo contrario. Como resumen, y siguiendo el ejemplo del apartado "introduccin al html" aunque cambiando el "title", nuestros meta tags seran los siguientes: <html> <head> <title>Meta tags básicos.</title> <meta http-equiv="Content-Language" content="es"/> <meta name="Keywords" content="tutorial,html"/> <meta name="Description" content="Tutorial html. Meta tags"/> <meta name="Distribution" content="global"/> <meta name="Robots" content="all"/> </head> <body> Hola mundo!<br> <b>Esto es negrita.</b><br> <i>Y esto itálica.</i><br> </body> </html>
Etiqueta body.
Anteriormente os hemos explicado que todo lo que queramos que se vea en nuestra pgina web deberemos escribirlo dentro de la etiqueta body. Eso es lo que llamamos el "cuerpo" del documento. Es la parte visible. Pero debes saber que ese cuerpo, o sea, que la etiqueta body tambin podemos personalizarla para darle el aspecto que nosotros deseemos. Esta personalizacin la conseguiremos a travs de una serie de parmetros que a continuacin te presentaremos. Bien, pues vamos a empezar. Color de fondo: bgcolor El primer parmetro que debes conocer es el del color de fondo, el "bgcolor". A travs de este parmetro podremos definir el color de fondo que queramos que tenga nuestra pgina. Un ejemplo muy simple es el siguiente: Si queremos que nuestra pgina quede con un fondo rojo deberemos escribir: <body bgcolor="#FF0000"></body> Imagen de fondo: background Puede que no quieres que tu pgina tenga un color slo de fondo, sino que quieras que tu pgina tenga una imagen. En ese caso debers indicarlo con la etiqueta "background". La etiqueta quedara de la siguiente manera: <body background="URL"> </body> Dnde leemos "URL" deberemos escribir la direccin de la imagen que queramos que sea nuestro fondo. Una cosa muy importante que debes saber es que si la imagen no es suficientemente grande para rellenar toda la pgina, la imagen se repetir tanto a lo ancho como a lo largo hasta rellenar todo el espacio. Color de texto: text Una vez tenemos el fondo definido, tendremos que predefinir ahora el color del texto de nuestra web. Es
TICS - PUNO
decir, tendremos que decirle al navegador de qu color queremos que sea nuestro texto. Esto lo definiremos con el parmetro "text". Como ejemplo vamos a poner que queremos que nuestro texto sea en negro, con lo que escribiremos lo siguiente: <body text= "#000000"></body> Mrgenes: leftmargin, topmargin, rightmargin y bottommargin Ya sabemos de qu color ser nuestro fondo y nuestro texto, pero tambin podemos predefinir los mrgenes de nuestra pgina web para que queda mucho mejor. Porque no queremos que nuestro texto se quede muy pegada a los mrgenes, verdad? Para especificar los mrgenes utilizaremos el parmetro margin, con su correspondiente indicacin delante. As encontraremos "leftmargin" para el margen izquierdo, "topmargin" para el margen de arriba, "rightmargin" para el margen de la derecha y "bottommargin" para el margen de abajo. Si queremos que nuestros mrgenes sean de 10 pxeles por todas partes escribiremos lo siguiente: <body leftmargin="10px" topmargin="10px" rightmargin="10px" bottommargin="10px"></body> Color de links: link, alink y vlink En body tambin podemos ( y de hecho debemos hacerlo) definir el color de los vnculos de nuestra pginas, definir el color con el que se mostraran los links. Aqu debemos diferenciar tres tipos de instrucciones: Debemos definir el color del link (con la etiqueta "link"), el color del link activo (con la etiqueta "alink") y el color del link ya visitado (con la etiqueta "vlink"). As pues, si queremos que nuestra pgina tenga un color de enlaces (de links) de color rojo y que esos enlaces sean rojos cuando estn activos y se queden en azul cuando estn inactivos deberemos escribir lo siguiente: <body link= "#FF0000" alink= "#FF0000" vlink= "# 0000FF"></body>
El formateo del texto, o sea, el formato del texto, son una serie de etiquetas que escribimos en html rodeando la palabra o el texto y que transforman ese texto en el formato que nosotros le hemos querido dar. Anteriormente ya hemos visto en un pequeo texto introductorio como se pona la negrita y la itlica. Pero eso era solamente introductorio. A continuacin lo vamos a explicar de una forma ms detallada. Las etiquetas deben rodear al texto. Es decir, la etiqueta debe abrirse y cerrarse, conteniendo el texto o la palabra que queramos transformar, entre medias. En el ejemplo de la negrita se abrira <b> y se cerrara </b>. Se pueden combinar diferentes formatos, o sea, diferentes etiquetas. Por ejemplo, si queremos que un texto est en negrita y en cursiva escribiramos esto: <b><i>Este texto est escrito en negrita y en cursiva</i></b>.Cuando combines, ten cuidado a la hora de cerrar las etiquetas. Debes cerrar las etiquetas por orden, de la ms interior a la ms exterior. Por ltimo, recordad que podis escribir las etiqutes en minsculas o en maysculas. Vamos con los diferentes formateos html que podemos encontrar: Negrita Existen dos etiquetas que harn que nuestro texto se convierta en negrita. La utilizacin de cualquiera de ellas es indiferente. Puedes usar la que prefieras. La primera es la etiqueta <b> y la otra es la etiqueta <strong>. Aqu va un ejemplo:
Este palabra la vamos a poner en <b>negrita</b> y esta otra
10
TICS - PUNO
<strong>tambin</strong> Este palabra la vamos a poner en negrita y esta otra tambin Cursiva Para escribir un texto en cursiva debemos utilizar la etiqueta <i> (y por supuesto cerrarla con la etiqueta </i>). Tambin podemos utilizar la etiqueta <em>. Como en el caso de la negrita, es indiferente el uso de una u otra. Aqu os dejo un ejemplo:
Este palabra la vamos a poner en <i>cursiva</i> y esta otra <em>tambin</em> Este palabra la vamos a poner en cursiva y esta otra tambin Subrayado Si queremos que la palabra o el texto quede subrayado, deberemos rodearlo con la etiqueta <u> y cerrarlo con su correspondiente etiqueta. O sea, </u>. As subrayaramos una frase importante:
<u>As subrayaramos una frase importante</u> As subrayaramos una frase importante Texto con espaciado simple o TT TT son las iniciales de teletype. Utilizando esta etiqueta conseguiremos un espaciado simple entre las diferentes letras del texto. Abriremos la etiqueta con <tt> y la cerraremos con </tt>.
<tt>Esta frase la vamos a escribir de forma espaciada </tt>
Esta frase la vamos a escribir de forma espaciada

Palabras ms grandes o ms pequeas Puede que en una frase queramos destacar un palabra por medio de una variacin de tamao sin necesidad de utilizar los encabezados(los explicaremos ms adelante). Pues esta variacin de tamao la conseguiremos gracias a las etiquetas <big> y <small>. Sus propios nombres en ingls nos indican cules sern sus funciones: <big> agrandar el texto y <small> lo disminuir. Cada vez que escribamos una etiqueta, haremos el texto un punto ms grande. Pero estas etiquetas tambin la podemos combinar, por lo que si escribimos dos veces la etiqueta <big>, haremos crecer la palabra dos puntos. Un ejemplo sera el siguiente:
Esta palabra se va a escribir <small>pequeita</small>, esta se va a escribir <big>ms grande</big> y sta <big><big>ms grande an</big></big>. Esta palabra se va a escribir pequeita, esta se va a escribir ms grande y sta ms grande an. Superndices y subndices Mediante el Html tambin podemos escribir frmulas matemticas. Gracias a las etiquetas siguientes podrs escribir subndices y superndices fcilmente. La etiqueta <sub> te servir para escribir un
11

subndice y <sup> ser tu etiqueta para un superndice. As nos queda un ejemplo como el siguiente:
TICS - PUNO
Gracias a estas etiquetas podemos escribir cualquier formula matemtica como esta: H <sub>2</sub> O o nmeros elevados a potencias 7<sup>3</sup>. Gracias a estas etiquetas podemos escribir cualquier formula matemtica como 3 esta: H 2 O o nmeros elevados a potencias 7 . Texto tachado Existen tres etiquetas diferentes que nos servirn para conseguir que nuestro texto se quede tacahado. Hablamos de las etiquetas <strike>, <s> y <del>. Ambas nos ofrecen el mismo resultado. Aqu tienes la muestra:
Si la palabra no me gusta la puedo tachar <strike>as</strike>, <s>as</s> o <del>as</del>. Lo mismo me da! Si la palabra no me gusta la puedo tachar as, as o as. Lo mismo me da!
Formateo de texto.
En este tema vamos a tratar y a explicaros los prrafos y los saltos de lnea en html. Porque debemos saber que el html los saltos de lnea, es decir, los espacios que hagamos en el cdigo no son interpretados te tal forma.
Prrafos y saltos de lnea.

En html para dejar un salto de lnea debemos utilizar una serie de etiquetas, de cdigo, que el navegador interpretar cmo tal. Esas etiquetas son <br/> </p> o </pre>. A continuacin te explicaremos cada una de ellas.
Ya os hemos comentado anteriormente que en html los saltos de lnea escritos en cdigo no son tal una vez el navegador interpreta el cdigo. Vamos a explicaros esto con un claro ejemplo: Puedes escribir un texto como este y el navegador no lo interpretar as
Y se ver as: Puedes escribir un texto como este y el navegador no lo interpretar as
Existen dos etiquetas para indicar que queremos hacer un salto de lnea normal. Son las etiquetas <br> y <br/> ambas son interpretadas igual por el navegador. Esta etiqueta no hace falta abrirla y cerrarla, slo con escribirla el navegador ya la interpreta.
As pues el texto anterior deberamos escribirlo de la siguiente forma:
12
TICS - PUNO
Puedes escribir un texto como este <br/> y el navegador no lo interpretar as
Prrafos Para indicarle al navegador que queremos poner ese texto en un prrafo, debemos escribirlo entre las etiquetas <p> y su cierre </p>. As el texto quedar dentro de un prrafo, separado por un espacio en blanco por encima y uno por abajo. El texto del prrafo lo puedes alinear utilizando la etiqueta align utilizando los parmetros center (para alinearlo al centro), right (para alinearlo a la derecha), left (para alinearlo a la izquierda) y justify (para justificar el texto). Un ejemplo de esta etiqueta con sus respectivos parmetros es el siguiente: <p align="center">Este texto se alinear al centro</p> <p align="right">Este texto se alinear a la derecha</p> <p align="left">Este texto se alinear a la izquierda</p>
que se ver as: Este texto se alinear al centro Este texto se alinear a la derecha Este texto se alinear a la izquierda
La etiqueta <pre> La etiqueta <pre> la puedes utilizar para que el navegador interprete el texto escrito tal y como est. Como ejemplo es mostraremos este texto: Escribo esta lnea as
Dejo dos lneas de separacin
y escribo tres ms.
Sin poner ninguna etiqueta, el navegador respondera as: Escribo esta lnea as Dejo dos lneas de separacin y escribo tres ms. En cambio utilizando la etiqueta <pre> y cerrndola con su correspondiente etiqueta, el texto se vera como queremos.
13
TICS - PUNO
Comentarios.
Los comentarios html son textos que van dentro del cdigo fuente pero que no son mostrados por los navegadores. Estos comentarios son muy tiles para los editores de la pgina, ya que ayudan a una mayor comprensin del cdigo. La forma correcta de escribir un comentario html es la siguiente:

Podemos apreciar que para los comentarios no se usan las etiquetas vistas en casi todo el html, aunque la estructura es prcticamente la misma. Hay una apertura y un cierre, y todo lo que va dentro de estos dos elementos es el comentario. El cdigo de apertura es el siguiente: . Mira el cdigo del siguiente ejemplo:
A continuacin vamos a escribir un comentario, pero aqu no lo podremos ver porque...<br>  ...los comentarios no son visibles para el usuario... <br>  ...slo para los editores de la pgina
Y comprueba a continuacin como no vamos a poder ver los comentarios escritos. Slo podremos hacerlo a travs del cdigo fuente de la pgina.
A continuacin vamos a escribir un comentario, pero aqu no lo podremos ver porque... ...los comentarios no son visibles para el usuario... ...slo para los editores de la pgina
Separadores en html: La etiqueta <hr> Para separar un texto de otro o un prrafo de otro podemos utilizar una lnea horizontal de un tamao o un grosor determinado por nosotros. Esa franja la escribimos con la etiqueta <hr>. La contrario que muchas etiquetas html, sta no necesita ser cerrada. Slo con escribir la etiqueta anterior ya la escribimos. La etiqueta <hr>, como muchas otras etiquetas, puede variar de aspecto dependiendo de una serie de caracteres o parmetros que podemos predefinir. Por ejemplo, podemos definir su grosor mediante el parmetro size. Para escribir este parmetro en la etiqueta escribiremos size=x, siendo x el nmero del grosor de la franja. A continuacin te vamos a ofrecer dos ejemplos de franjas con diferentes grosores, siendo la primera 10 y la segunda dos. La diferencia es abismal <hr size="20" /> <hr size="2" /> Y el resultado sera el siguiente:
Otro parmetro que podemos definir es la anchura de la franja mediante el parmetro width . El parmetro ser width=x %, siendo x el tanto por cien que queremos que ocupe nuestra fnarja.
14
TICS - PUNO
En el caso de no escribir nada (como en los ejemplos anteriores), la franja ser predeterminada del 100%. Si queremos que ocupe ms o menos tendremos que escribirlo con el parmetro width. A continuacin vamos a escribir una franja de 75% de ancho: <hr width=75%"/>
Que quedara de la siguiente manera:
Muchos navegadores hacen esta franja con una sombra exterior que transforma la franja en tres dimensiones. Si quieres que la franja sea simple, sin sombrita debers escribir el parmetro noshade. Tambin podemos predefinir el color que le queremos dar a la franja con el parametro "color". Es muy sencillo. Por ejemplo, si queremos que nuestra franja sea de color rojo slo debemos ponerle la etiqueta: <hr color="#FF0000"/>. Por ltimo, puedes hacer que la franja quede alineada a un lado, a otro, o al centro del prrafo mediante el parmetro que ya vimos con anterioridad: align. align = center para el centro, align = right para la derecha y align = left para la izquierda. Como ejemplos finales vamos a hacer dos franjas. La primera va a ser una franja de grosor 3, de un ancho del 50% y alineada al centro. <hr size=3 width= 50% align=center/> La siguiente va a ser una franja de grosor 2, de ancho 80%, sin sombra y alineada a la derecha. <hr size=2 width=80% noshade=noshade align= right />
Encabezados.
Puede que queramos empezar nuestra web o nuestro texto con un encabezado indicando el ttulo del artculo, categora, etc. Pues bien, para escribir encabezados tenemos que utilizar las etiquetas <h>. Esta etiqueta viene acompaada de un nmero, desde el 1 hasta el 6, predefiniendo stos el tamao del encabezado. As, <h1> sera el encabezado ms grande mientras que <h6> sera el ms pequeo. A continuacin vamos a mostraros el cdigo de los seis diferentes encabezados:
<h1> Texto muy grande</h1> <h2>Texto grande</h2> <h3>Texto algo ms grande de lo normal</h3> <h4>Texto normal</h4> <h5>Texto pequeo</h5> <h6>Texto muy pequeo</h6>
Podis ver el resultado en el siguiente enlace: Si ya habis visto el ejemplo os daris cuenta que cada encabezado est separado del anterior y del siguiente por un salto de lnea y que nosotros en el cdigo no hemos escrito nada. Podis deducir pues, que los encabezados generan por s solos uno salto de lnea. Por ltimo recordaros que la etiqueta <h> podemos escribirla tanto en maysculas como en minsculas. Es decir, lo mismo dara escribir <h1> que <H1>.
15
TICS - PUNO
Caracteres especiales.
Las pginas Web estn abiertas a todo el mundo y a todos los lenguajes. Pero no todos los lenguajes son iguales. En espaol, por ejemplo, tenemos algunas letras que son propias de nuestra lengua y que otras no poseen. Por ello, una en un navegador de un ordenador de fuera de Espaa puede que no se vea. Para evitar ese problema podemos usar los caracteres especiales de html. No todos los ordenadores leen las mismas letras, pero s todos leen el mismo cdigo. Un escrita como tal no se ver en muchos ordenadores del mundo pero, si por el contrario, escribimos ñ (carcter html para la ), seguro que se muestra correctamente. En el siguiente artculo veremos los caracteres especiales html. Caracteres especiales bsicos Estos caracteres son esenciales. No por que no sean interpretados correctamente por el navegador, sino porque estos smbolos mal escritos pueden causar que nuestra web no funcione correctamente. & < Caracteres especiales Ï Ö Ü × ÷ Ã Ñ Õ ã ñ õ ¸ Á É Í ä Î Ô Û ¢ € å Å Ç ç Ý ý » À È Ì â & < " > " >
16
TICS - PUNO
ë ï ö ü Ó Ú á é Ø ø Ð ð ß ¼ ½ ¾ © ® ª ² ³ ¹ ¯ µ ¶ · ° Ë í ó ú Ä ¿
ê î ô û Ò Ù à è ÿ Þ þ Æ æ ¡ £ ¥ § ¤ ¦ « ¬ º ´ ¨ ± Ê ì ò ù Â
Tablas.
17
TICS - PUNO
Una tabla en html viene marcada por las etiquetas <table> </table>. Entre esas dos etiquetas definiremos la tabla, las celdas que queremos, las columnas y las caractersticas de cada uno de estos parmetros. Pero vamos a empezar explicndote la etiqueta <table>. Ya hemos dicho que esta etiqueta nos indica que empieza una tabla, pero podemos predefinir caractersticas de esa tabla? Por supuesto que s. Una tabla admite muchos parmetros. Nosotros vamos a explicarte los principales. La tabla: <table> Como ya ocurre con la etiqueta body, a una tabla tambin lo podemos definir el fondo de la misma. Esto lo podemos conseguir con el parmetro "bgcolor", que nos pondr un color de fondo, o "background" para poner una imagen de fondo. Recuerda que si la imagen es ms pequea que la tabla, sta se repetir tanto a lo ancho como a lo largo. Otro aspecto que podemos definir de la tabla es el borde. Esto lo haremos con el parmetro "border". Como en todas los parmetros que ya hemos visto escribiremos: border= "x" siendo la x un nmero. Ese nmero indicar el grosor del borde. Si no ponemos borde o lo escribimos "0", la tabla no mostrar borde ninguno. Por supuesto, tambin podemos darle color al borde, escribiendo la etiqueta "bordercolor" e indicando el color que queramos para nuestro borde. El parmetro "width" indircar la anchura de la tabla. Esta anchura la podemos poner en pxeles (width= "300") o con porcentaje (width= "100%"). Dos parmetros ms son cellspacing (que define el espacio entre las celdas de la tabla) y cellpadding (que le marca a la tabla el espacio que debe dejar alrededor del texto dentro de una celda). Como ejemplo, escribiremos el hipottico supuesto de querer una tabla que sea ancha al 100%, con un borde azul de un pxel de grosor y con un cellpadding de 10 y con un cellspacing de 10. El cdigo quedara de la siguiente forma. <table width="100%" border="1" bordercolor="#0000FF" cellspacing="10" cellpadding="10"></table> Una vez explicadas las tablas, vamos a pasar a explicarte las partes fundamentales de las mismas. Las filas: <tr> Como hemos visto en el encabezado las filas se escriben gracias a las etiquetas <tr> con su correspondiente cierre </tr>. El contenido de las columnas que estn dentro de la fila lo podemos alnear tanto horizontal como verticalmente. Para alinearlo verticalmente utilizaremos el atributo "valign" para poder alinearlo arriba de la celda ("top"), en el centro ("middle") o debajo ("bottom"). Para alinearlo horizontalmente utilizaremos el atributo "align". Con este atributo podremos alinear el contenido de las celdas en el centro ("center"), a la izquierda ("left"), a la derecha ("right") o justificado ("justify"). Por supuesto a las filas tambin les podemos definir el color de fondo ("bgcolor") y el color del borde ("bordercolor"). Las celdas <td> Las celdas que van dentro de cada fila las tenemos que escribirlas con la etiqueta <td> y su correspondiente cierre </td>. Al igual que en las filas, en las celdas podemos definir el la alineacin del contenido que est dentro con los atributos "valign" y "align". Las celdas poseen unos atributos que nos ayudan a poder agrupar tantas celdas o tantas columnas como indiquemos en l. Para agrupar celdas utilizaramos el atributo "colspan" y para agrupar celdas el atributo "rowspan".
18
TICS - PUNO
Por ejemplo, para agrupar en una celda 2 columnas tenemos que escribir: <td colspan="2"></td>. Y para agrupar dos filas, la indicacin sera la siguiente: <td rowspan= "2"></td>. Las celdas <th> Las celdas escritas con la etiqueta <th> y su correspondiente cierre, admiten los mismos atributos que las etiquetas <td> y funcionan de la misma forma, salvo que el contenido que est dentro de una etiqueta <th> est considerado como el encabezado de la tabla, por lo que se crear en negrita y centrado sin que nosotros se lo indiquemos. A continuacin vamos a ponerte un pequeo ejemplo de una tabla que combina todas las cosas que hemos ido viendo en el artculo. Estdiate primero el cdigo, visualiza cmo quedara la tabla y luego mrala en el enlace siguiente: Ejemplo de tabla.
<table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000"> <tr> <th>Encabezado 1</th> <th>Encabezado 2</th> <th>Encabezado 3</th> </tr> <tr> <td rowspan="2" valign="middle" align="left">Este texto est alineado al centro verticalmente y a la izquierda horizontalmente</td> <td> </td> <td> </td> </tr> <tr> <td colspan="2"> </td> </tr> </table> nowrap nowrap es un atributo que le podemos colocar a la etiqueta de la celda y que obligar al navegador a no romper esa lnea, o sea, a no hacer ningn salto de lnea. Con este atributo en la celda, el navegador no respeta el ancho predefinido de la tabla, si es que lo hubiera, y respeta el ancho de la frase, ya que no puede partirla. Por tanto, si la frase es ms larga que el ancho definido de la tabla, sta se estirar todo lo necesario para albergar la frase sin saltos de lnea. El siguiente cdigo nos mostrar como escribir este atributo en la etiqueta de la celda:
<table width="400" border="1" cellpadding="10" cellspacing="0" bordercolor="#000000"> <tr> <td nowrap>Aunque este texto sea más ancho que los 400 píxeles de la tabla, ésta no puede dividir mediante saltos de línea el contenido de la misma, por lo que se estira para albergar toda la frase.</td> </tr> </table>
Y a continuacin podemos ver el efecto del atributo:
Aunque este texto sea ms ancho que los 400 pxeles de la tabla, sta no puede dividir mediante saltos
19
TICS - PUNO
de lnea el contenido de la misma, por lo que se estira para albergar toda la frase.
Etiqueta caption Esta etiqueta sirve para poder ponerle un ttulo o encabezado a la tabla. Puedes poder el encabezado arriba o abajo, dnde tu prefieras, mediante la etiqueta "align": "align=top" para ponerlo arriba y "align=bottom" para ponerlo abajo. En el siguiente ejemplo nosotros lo hemos puesto abajo.
<table width="50%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000"> <caption align="bottom">Encabezado de la tabla.</caption> <tr> <td align="center">Tablita de ejmplo para la etiqueta "caption"</td> </tr> </table>
Listas.
Listas no ordenadas: <ul> Las listas no ordenadas van dentro de la etiqueta <ul> y de su cierre </ul>. Cada punto que queramos aadir a la lista, lo haremos dentro de la etiqueta <li> y su cierre. Si no le indicamos nada a la etiqueta <li>, sta se generar de forma automtica. Pero si queremos definir nosotros mismo el smbolo del punto, podemos gracias al atributo type. As podemos hacer que la lista est definida por puntos negros (li type="disc"), por puntos con el fondo blanco (li type="circle") o por cuadrados (li type="square"). Aunque esta apariencia depender del navegador. Hay algunos navegadores que dan otras apariencias a estos mismos atributos. Vamos con un pequeo ejemplo en cdigo:
<ul> <li type="circle">Esto es un tipo de punto.</li> <li type="square">Este es otro.</li> <li type="disc">Y este es otro diferente.</li> </ul>
Cuyo resultado visual ser el que veremos a continuacin:
Esto es un tipo de punto. Este es otro. Y este es otro diferente.
Listas ordenadas: <ol> Las listas ordenadas van enmarcadas dentro de las etiquetas <ol> </ol>. Cada punto de la lista se escribe con la misma etiqueta que en las no numeradas: <li>. Pero al ser listas ordenadas los smbolos sern nmeros y stos se irn generando automticamente por orden, conforme escribamos nuevos puntos.
20
TICS - PUNO
En las listas ordenadas podemos hacer que el primer punto comience con el nmero que nosotros queramos. Lo conseguiremos gracias al atributo value. Los siguientes puntos que escribamos se generarn automticamente por orden, partiendo de ese nmero. Por ejemplo, si queremos que nuestra lista empiece por el nmero 20, slo deberemos escribir lo siguiente:
<ol> <li value="20">Este ser el nmero 20. </li> <li>Este ser el 21. </li> <li> Este ser el 22. Y as sucesivamente. </li> </ol>
Y el resultado ser el siguiente:
20. Este ser el nmero 20. 21. Este ser el 21. 22. Este ser el 22. Y as sucesivamente.
Listas de definiciones: <dl>, <dt> y <dd>. Si lo que vamos a hacer es un listado de definiciones, podemos usar las etiquetas <dl>, <dt> y <dd>. Vamos a explicarlas por partes: La etiqueta <dl> viene de los trminos ingleses Definiton list y nos indica que dentro de ella, entre ella y su cierre, va a ir una definicin. La etiqueta <dt> viene de los trminos Definition term y dentro de ella ir el trmino que vamos a definir. Para entendernos mejor, dentro de <dt> ira el ttulo de la definicin. La etiqueta <dd> viene de los trminos Definition description y nos dice que dentro de sta ir la definicin. Si escribimos varios listados de definicin, stas se separarn automticamente entre ellas para facilitar su diferenciacin. Aqu podemos ver un ejemplo de cdigo de dos listado de definicin:
<dl> <dt>Aqu va el trmino que definiremos</dt> <dd>Y aqu dentro ir la definicin propiamente dicha.</dd> </dl> <dl> <dt>Aqu va la segunda definicin</dt> <dd>Y aqu dentro ir la segunda definicin, separada automticamente de la anterior.</dd> </dl>
Cuyo resultado ser el siguiente:
Aqu va el trmino que definiremos Y aqu dentro ir la definicin propiamente dicha. Aqu va la segunda definicin Y aqu dentro ir la segunda definicin, separada automticamente de la anterior.
21
TICS - PUNO
Imgenes.
Poner imgenes en nuestra web produce unos resultados asombrosos de una manera muy fcil. Vamos a mostrarte como puedes incluir una imagen y los atributos que puedes darle a la misma. El tag bsico para colocar una imagen es "img". Este tag, a diferencia de la gran mayora de los tags de html, no necesita un cierre. Va acompaado de diferentes atributos que te vamos a explicar a continuacin. El atributo "src" es imprescindible para poder colocar una imagen. Este atributo es el que indica dnde se encuentra alojada la imagen que queremos mostrar. Se escribe as: <img src="x">, siendo "x" la direccin o la url dnde se encuentra situada la foto. La foto podemos alinearla en la pgina como queramos mediante " align", utilizando los atributos "left" para alinearla a la izquierda, "right" para alinearla a la derecha, "top" para alinearla arriba, "bottom" para alinearla abajo y "middle" para alinearla al centro. Tambin podemos poner una descripcin de la imagen dentro de la misma para que la gente puede leerla al mantener el ratn encima de ella. Esta descripcin podemos escribirla mediante el atributo " alt" y lo escribiramos de la siguiente manera: alt= "x", siendo "x" la descripcin que le gente leer al pasar el ratn por encima. Debemos aclarar que no con todos los navegadores podemos ver el "alt" de manera visual. Hay algunos que no lo representan. Atributos opcionales pero muy recomendables, son el height y el width. El height marca la altura de la imagen, mientras que el width marca la anchura. Son recomendables porque as ayudaremos al navegador a representar la imagen. Y por ltimo, tambin queremos mostrarte que le puedes adjudicar un borde a la fotografa. El atributo ya te lo sabes: "border". Despus solo tendrs que definir cul quieres que sea el grosor del borde. As las cosas, deberemos escribir este cdigo...
<img src="html/imagenes/prueba.jpg" border="1" alt="Este es el ejemplo de un texto alternativo" width="400" height="300">
Mapas de imgenes.
Html nos permite la opcin de crear diferentes enlaces url dentro de una misma imagen. Es decir, podemos hacer que diferentes partes de una imagen tengan enlaces que nos permitan ir a diferentes destinos. Las fotos en las que queramos introducir un mapa de imgenes debern ser de uno de estos tres formatos: .jpg, .gif o .png, que son los tres formatos recomendables para todos los navegadores. A continuacin vamos a explicarte como podemos crear este tag html y los diferentes atributos que posee este tag. Como veremos a lo largo del artculo, lo difcil de crear un mapa de imgenes no es el mapa en s, sino encontrar las coordenadas en la imagen. Aunque existen programas de edicin de imgenes que nos ayudaran en esa tarea. El tag map Cmo ya podemos suponer, <map> es el tag necesario para poder crear un mapa de imgenes en html. Por supuesto, posee un cierre: </map>.
22
TICS - PUNO
Este tag debe ir acompaado del atributo name= x, para indicar el nombre del mapa. Por tanto si queremos hacer un mapa que se llame ejemplo 1, escribiremos: <map name= ejemplo1> Atributo area El mapa de imgenes lleva un rea dentro de la cual podremos pinchar para dirigirnos al destino que hayamos preestablecido. Pero, por supuesto, esa rea se la tenemos que indicar al navegador para que la interprete. La zona del enlace se indica dentro de la etiqueta, estableciendo las coordenadas de dicha rea. Tambin podemos escribirle un texto alternativo, un alt, al rea. Existen tres tipos de reas. Vamos a explicrtelas a continuacin. Atributo shape Este atributo nos indicar el tipo de rea que es. Como hemos dicho existen tres tipos: rectangular (rect), poligonal (poly) o circular (circle) y cada una de ellas tiene unas caractersticas diferentes. Vamos a profundizar un poco ms en ellas.
shape=rect : Este tipo de rea crea un mapa de imagen rectangular. Para definir la zona que incluir ese mapa deberemos definir la esquina superior izquierda del rea y la esquina inferior derecha. shape=circle : Este tipo de rea crea un mapa de imagen circular. Nosotros slo debemos indicarle el centro de la circunferencia y el radio del mismo. shape=poly : Este tipo de rea es la ms verstil de todas, la que ms posibilidades nos ofrece, ya que nos permite crear una zona personalizada. Para crearla debemos indicarle los diferentes puntos del polgono que hagamos y de una forma ordenada, siguiendo el camino que nosotros hemos trazado para hacerlo.
Bien, peroy cmo indicamos las coordenadas? Gracias al siguiente atributo. Atributo coords El atributo coords se escribe de la siguiente forma: coords= x,x,x,x, entendiendo que cada x representa un punto en la imagen. Cada coordenada debe ir separada por comas. Y el dnde nos dirigir esa rea nos lo indicar el atributo href Atributo href Aqu deberemos indicar el destino del rea. usemap Hasta ahora te habamos indicado cmo podas escribir un mapa de imgenes y cmo definir su rea, pero no te habamos dicho cmo indicar qu imagen es la que llevar el mapa. Esta accin se hace gracias al atributo usemap. Este atributo se escribe de la siguiente forma: usemap=#x, siendo x el nombre del mapa de imgenes que queramos utilizar. Nosotros hemos querido hacerte un ejemplo con la imagen que puedes ver ms abajo. Dentro de estas bolas de billar, nosotros hemos hecho un mapa de imgenes con un rea circular que coincide con la bola amarilla. Nuestra href es la pgina de inicio de este tutorial. Tambin hemos hecho un rea poligonal en la bola negra del fondo que te llevar al inicio del tutorial de css y otro rea rectangular en el centro de la imagen, que te redigir al inicio del tutorial de php.
23

El cdigo nos ha quedado de la siguiente manera:
TICS - PUNO
<img src="http://html.hazunaweb.com/html/imagenes/prueba-mapa.jpg" alt="Prueba de mapa de imgenes" width="300" height="214" border="0" usemap="#billar"> <map name="billar"> <area alt="Si clcas aqu irs a la pgina de inicio del tutorial de html" shape="circle" coords="148,154,44" href="http://www.hazunaweb.com"> <area alt="Si clas aqu irs a la pgina de inicio del tutorial de css" shape="poly" coords="148,59,142,49,135,41,128,38,121,34,125,25,135,16,155,11,177,19,188,27,187,36,177,39,168,46 ,162,52,160,61" href="http://css.hazunaweb.com/"> <area alt="Si clas aqu irs a la pgina de inicio del tutorial de php" shape="rect" coords="11,77,288,105" href="http://php.hazunaweb.com/"> </map>
Y el resultado lo vers si clcas en las zonas adecuadas:
Enlaces.
Los enlaces nos permiten de una manera muy cmoda redirigir al usuario a otra parte, cuando ste pinche en dicho enlace. Podemos hacer que el usuario se vaya a otra url distinta a la que est, o podemos hacer que vaya a otra parte pero dentro del mismo archivo en el que est, dentro de la misma url. Esta explicacin la entenders ms fcilmente cuando te presentemos los tipos de enlaces que hay y veas sus caractersticas. As pues, vamos a ello: La etiqueta <a> Es dentro de esta etiqueta y de su cierre (</a>) dnde encontraremos el enlace. Todo lo que est dentro de ella, ya sea texto o una imagen, estar considerado como un enlace y el navegador lo interpretar as. Atributo href Para que un enlace est activo debemos indicar dentro de l el destino del mismo. Para establecer este destino le colocamos a la etiqueta <a> este atributo. La etiqueta completa nos quedara as: <a href=enlace>Pincha aqu para ir al destino del enlace</a> Las urls pueden tener dos tipos de rutas o direcciones: Las urls con direccin relativa y las urls con direccin absoluta. Vamos a explicarlas a continuacin: Direcciones absolutas y relativas: Las direcciones absolutas son aquellas que contienen la url completa. En estas direcciones podemos ver todos los elementos de la direccin. Un ejemplo muy claro es el siguiente: <a href="http://html.hazunaweb.com/112.php">Artculo de enlaces html</a> Si pinchramos en el enlace iramos directamente al artculo de mapas de imgenes del tutorial. Fijaros en lo que hablbamos: podemos apreciar todas las partes de la url. En las direcciones relativas vemos que no est la url completa. En este tipo de direcciones, las partes que faltan de la direccin el navegador las genera de la propia pgina en la que est el enlace. Por ejemplo, si dentro de la pgina http://html.hazunaweb.com/112.php encontrramos la siguiente url... <a href="111.php">Artculo de enlaces html</a> el navegador entiende que dentro de la pgina y de la carpeta en la que se encuntra, debe dirigirse al fichero 111.php.
24

Protocolos
TICS - PUNO
Los enlaces nos pueden llevar a url con diferentes protocolos. Nosotros os vamos a presentar los dos ms importantes:
http: Este es el protocolo bsico de los servidores webs. https: Este protocolo se diferencia del anterior en que es un protocolo cifrado. Es decir, la informacin que se enva y se recibe con esa url esta siendo encriptada para que nadie ms pueda interceptar y usar esa informacin. Las pginas con este protocolo son las conocidas como pginas seguras. Esta encriptacin de los datos produce una pequea ralentizacin de la pgina debido a que los datos se envan cifrados.
Mailto La url mailto es aquella que te lleva directamente a una direccin de correo y, ms concretamente, a redactar un mensaje. Una direccin mailto sera la siguiente: <a href=mailto:correodeejemplo@correodeejemplo.com>correodeejemplo@correodeejemplo.com</a> Fjate en el ejemplo que acabamos de poner. Nosotros, como texto para albergar el enlace, hemos puesto la misma direccin que la que va a abrir la url. Por qu? El programa de correo que abre el navegador es aquel que el usuario tenga como predefinido. Nosotros te aconsejamos que como texto para albergar el enlace pongas la direccin de correo electrnico. Windows por defecto tiene predeterminado el Outlook y al pinchar en el enlace lo abre directamente. Muchos usuarios prefieren copiar la direccin y pegarla en su programa de correo. La etiqueta target: La etiqueta sirve para definir la forma en la que se acceder a la nueva url. Esta etiqueta la escribimos dentro del enlace para predefinirla. Puede ser de diferentes tipos:
_self: Es el valor por defecto del parmetro target. El enlace se abrir en el mismo marco en el que est alojado. _blank: Para hacer que ese enlace se abra en una ventana a parte. _top: Elimina todos los marcos existente y muestra la nueva pgina en la ventana original sin marcos. _parent : Muestra la nueva pgina en el <frameset> que contiene al marco donde se encuentra alojado el enlace. La etiqueta <frameset> la explicamos en otro artculo.
Anclas Un ancla nos sirve para dirigir al usuario a otra parte distinta pero dentro del mismo fichero en el que estamos. Para crear un ancla debemos crear primero el lugar al que queremos acceder. Debemos escribir lo siguiente: <a name=ancla> Y despus debemos escribir un enlace con el cdigo siguiente: <a href= #ancla>Enlace para acceder al ancla</a> Yo he situado un ancla justo al principio de este artculo. Si pinchas en el siguiente enlace acudirs a ella y vers el efecto. Ir al principio del artculo gracias al ancla
25
TICS - PUNO
Y para terminar te mostraremos como podemos hacer que un enlace nos diriga directamente a una imagen. Le hemos indicado al enlace que nos abra la imagen en una ventana diferente gracias al target:blank. El cdigo es el siguiente:
<a href="http://html.hazunaweb.com/html/imagenes/prueba.jpg" target="_blank">Ir a ver el ejemplo de prueba </a>
Y el resultado le vers pinchando en aqu: Ir a ver el ejemplo de prueba Y terminamos con otro tipo de enlace. Esta vez el enlace est en la imagen. Si pinchas en ella, irs al artculo dnde vimos por primera vez esa fotografa. Primero te mostramos el cdigo:
<a href="http://html.hazunaweb.com/112.php" target="_blank"><img src="http://html.hazunaweb.com/html/imagenes/prueba-enlace.jpg" alt="Pincha para ir al enlace" width="300" height="214" border="0"></a>
Y aqu tienes la imagen con el enlace. Se abrir en una ventana nueva gracias al target blank.
Formularios I: introduccin.
Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos permiten recibir informacin de los usuarios de nuestro site. Los formularios html estn compuestos por campos de texto y botones. Una vez el usuario ha rellenado el formulario e introducido los valores en los campos, stos son enviados para poder procesarlos. El envo de estos datos puede hacerse a un correo electrnico o a un programa que procese toda la informacin y nos ayude a hacer un seguimiento. Los formularios son un tag ms de html y, como todos los tags, debe ir indicado mediante una etiqueta. La etiqueta de los formularios es <form> y su cierre </form>. Todo lo que vaya dentro de estas etiquetas, sern partes del formulario. La etiqueta <form> tiene una serie de atributos bsicos que vamos a pasarte a explicar a continuacin. action El atributo action indica el tipo de accin que va a realizar el formulario. Anteriormente indicamos que la informacin poda enviarse a un correo electrnico o a un programa que la gestione. Es mediante esta etiqueta que se gestionan los formularios. Si queremos que el formulario se enve a un correo, la accin quedara escrita de la siguiente manera: <form action=mailto:direcciondelcorreo@correo.com></form>. Este tipo de envos se utilizaran para casos de formularios de contacto, de sugerencias, etc. Si lo que queremos es que la informacin sea enviada a un programa que la gestione, debemos indicarle en la accin, la url del archivo donde se encuentra ubicado el programa que la gestionar. Lo escribiramos de la siguiente manera: <form action="direccin completa del archivo que la gestionar" ...> </form>. Este tipo de envos se utilizaran para casos de formularios de encuestas, cuestionarios, etc. method Mediante este atributo le indicamos al formulario la forma en la que el formulario ser enviado. Existen dos valores posibles: get y post. El valor get es el valor por defecto. Si no concretamos el method, la informacin se enviar a travs de este medio.
26
TICS - PUNO
get indica que los datos enviados se adjuntarn en la barra de direcciones del cliente, al final de la url correspondiente y despus de un signo de interrogacin de cierre. Si se enva ms de un dato, stos irn separados por el smbolo &. Un ejemplo de un formulario enviado por el method=get sera el siguiente: http://www............?nombre1=valor1&nombre2=valor2 El valor post indica que el mtodo de envo no se har a travs de la url, sino formando parte del cuerpo de la peticin. enctype Mediante este atributo indicaremos la forma en la que viajar la informacin que se mande a travs del formulario. La forma puede ser de varios tipos, aunque el ms comn es que la informacin se enve como texto plano (enctype="text/plain"). Una vez vistos estos tres atributos, veremos como quedara el cdigo de un formulario estndar a un correo elctrnico:
<form action="mailto:direcciondelcorreo@correo.com" method="post" enctype="text/plain"> </form>
Formularios II: campos de texto.

Los campos de entrada de los formularios se definen mediante el tag <input> y sus diferentes valores. Estos valores nos permiten utilizar varios tipos de cajas y de formas. Vamos a ver a continuacin distintos tipos de cajas y veremos como varan sus caractersticas. Las cajas de texto bsicas: <input type= text> La caja de texto bsica se escribira de la siguiente forma:
<input type="text" name="nombredelacaja">
y su apariencia sera la siguiente:
Hemos visto como el type= text le da a la caja una apariencia sencilla. Este tipo de campos se usan para albergar informaciones cortas y concretas. Podemos completar el estilo de esta caja gracias a los siguientes atributos: size: mediante el atributo size podemos definir el tamao de la caja. Es decir, la apariencia de la misma. Si el texto que vamos a escribir no cabe en la caja, ste se desplazar pero sin que la caja vare su tamao. El texto ir desapareciendo por la izquierda. maxlength: Este atributo nos sirve para definir la cantidad mxima de letras que se pueden escribir en la caja. No se podrn escribir en la caja ms caracteres que los indicados por el maxlength.
27
TICS - PUNO
value: Define si queremos que en la ventana haya un texto ya preescrito. Este texto puede ayudar al usuario a saber cal es el tipo de dato que te piden en ese campo. name: para ponerle un nombre al campo. Esto resulta muy til a la hora de gestionar la informacin que nos llegue. Mira el siguiente cdigo:
<input type="text" size="15" maxlength="30" value="Nombre" name="nombre"> Aqu vemos un tipo de caja text con un tamao de 15 y un lmite de caracteres de 30. Adems, tiene un texto preescrito en l. El resultado sera el siguiente:
Nombre
Campos de texto largo: <textarea> Un <textarea> es como una caja de texto sencilla, tipo text, pero en la que dejamos al usuario espacio de sobra para poder escribir un texto largo. Son tiles para que el usuario contacte con nosotros, plantee sus dudas o sugerencias, etc. Su etiqueta es <textarea> y su correspondiente cierre </textarea>. Todo lo que vaya dentro de estas etiquetas formar parte del texto. Sus atributos bsicos son rows y cols que servirn para definir el tamao del textarea. Adems, no debemos olvidar el atributo name, que servir para definir el nombre de este campo. Un textarea llamado comentarios y con unas dimensiones de 10 filas y de 40 columnas, tendra el cdigo siguiente:
<textarea name="comentarios" rows="10" cols="40">Escribe aqu tus comentarios</textarea>
Y se vera de la siguiente forma:
Textos con passwords En muchos formularios se piden datos personales que el usuario no quiere que se lean a su alrededor: contraseas, etc. Para ello debemos crear una caja que no muestre los datos que se escriben en ella y que los codifique. Esto es ms sencillo de lo que parece. El siguiente cdigo es de un campo con datos codificados:
<input type="password" name="contrasea">
28

Y este sera el resultado obtenido:
TICS - PUNO
Formularios III: listas de opciones.

Las listas de opciones son de gran ayuda para los formularios en los que queremos saber la opinin de un aspecto concreto en nuestra Web, dentro de diferentes opciones planteadas previamente por nosotros. Las listas de seleccin u opciones se escriben gracias a la etiqueta <selection> y a su cierre. Vamos a ponerte un ejemplo de la lista de opciones bsica, la ms sencilla. Si queremos preguntar, por ejemplo, cul es el medio de transporte favorito de nuestro usuarios, el cdigo de la lista de seleccin podra ser el siguiente:
<select name="transporte"> <option>Coche</option> <option>Avin</option> <option>Tren</option> </select>
Y el resultado quedara de la siguiente manera.
Pero podemos personalizar esta lista de opciones mediante una serie de atributos. Por ejemplo, podemos hacer que se vea ms de una opcin a la vez en la lista. Para ello utilizaremos size, indicando el nmero de opciones que queremos que se muestren. En la lista anterior si quisieramos que se vieran dos opciones, deberamos cambiar el cdigo anterior por el siguiente:
<select name="transporte" size="2"> <option>Coche</option> <option>Avin</option> <option>Tren</option> </select>
Para obtener el siguiente resultado:

Coche Avin
Tambin podemos definir si queremos que se pueda elegir ms de una opcin a la vez mediante las teclas ctrl y shift. Para ello utilizaremos el atributo multiple. Mira primero cmo quedara nuestro cdigo.
<select name="transporte" size="2" multiple> <option>Coche</option> <option>Avin</option> <option>Tren</option> </select>
Y aqu comprobars lo que nos permite hacer este atributo.

Coche Avin
29
TICS - PUNO
Otra cosa que podemos predefinir es que la opcin que aparezca seleccionada al principio no sea la primera que est en la lista. Esto se realiza gracias al atributo selected y lo tenemos que poner en la opcin que queramos que aparezca como seleccionada. En el cdigo siguiente, queramos que apareciera seleccionada la opcin del tren.
<select name="transporte"> <option>Coche</option> <option>Avin</option> <option selected>Tren</option> </select>
Y aqu puedes ver cual ha sido el resultado.

Tren
Por ltimo esta el atributo value. Este atributo es muy til para gestionar los datos, sobre todo si le llega a un programa. Con este atributo lo que se le hace es atribuir un nmero o una letra a cada opcin. El atributo se escribe dentro de cada opcin y se define el valor del mismo. Por ejemplo, en la primera lista que te hemos presentado podramos valorar nuestras opciones de la siguiente manera:
<select name="transporte"> <option value="1">Coche</option> <option value="2">Avin</option> <option value="3">Tren</option> </select>
Y en el supuesto de seleccionar por ejemplo la opcin del avin, al programa (o al correo electrnico) le llegara el siguiente dato: transporte=2. si te fijas, transporte es el nombre de esta lista de opciones. Listas de botones: radio A continuacin vamos a ver otro tipo de listas de opciones o de seleccin. Son listas con botones de tipo radio. Estos botones se escriben mediente la etiqueta type=radio. Vamos a transformar la lista anterior en este tipo de lista. Fijaros que a cada opcin le vamos a atribuir una etiqueta nueva, pero todas ellas van a tener el mismo nombre. El cdigo nuevo quedara de la siguiente manera:
<input type="radio" name="transporte" value="1">Coche <br> <input type="radio" name="transporte" value="2">Avin <br> <input type="radio" name="transporte" value="3">Tren
Y el cambio de aspecto es evidente. Aqu lo tenis: Coche Avin Tren Por defecto no saldr ninguna opcin activada. Pero si queremos activar alguna de ellas podemos hacerlo mediante el atributo checked. Por ejemplo, en el cdigo siguiente la lista de opciones tiene activada la opcin avin:
30
TICS - PUNO
<input type="radio" name="transporte" value="1">Coche <br> <input type="radio" name="transporte" value="2" checked>Avin <br> <input type="radio" name="transporte" value="3">Tren Y observa el resultado que obtenemos Coche Avin Tren Listas de cajas: checkbox. Estas listas de opciones son muy parecidas a las vistas anteriormente salvo por dos detalles que vamos a mostrarte a continuacin. El primero de ellos y fundamental es que las cajas son de un tipo diferente y se escriben, por tanto, de forma diferente. Las cajas se escriben mediante type=checkbox. Otra diferencia es que as como las listas de botones tipo radio slo permitian ele gir una opcin (siempre y cuando los nombres de las opciones fueran los mismos), las listas de cajas permiten seleccionar una o varias opciones. Aqu tienes el cdigo de una lista que hemos escrito para demostrarte todo lo que te hemos explicado anteriormente:
<input type="checkbox" name="transporte" value="1">Coche <br> <input type="checkbox" name="transporte" value="2" checked>Avin <br> <input type="checkbox" name="transporte" value="3">Tren
Y observa a continuacin el resultado: Coche Avin Tren
Formularios IV: botones submit y reset.

Botn de envo Para enviar la informacin, el formulario necesita de un botn que le indique que el formulario ha concluido y que pueden enviar la informacin. Los botones de envo se crean con la etiqueta input de tipo submit. Adems, hay que definir el texto que queremos que est escrito en el botn. Esto lo conseguimos con el atributo value. As, el cdigo de un botn sencillo de formulario sera el siguiente:
<input type="submit" value="Enviar informacin">
31

Obteniendo el siguiente resultado en nuestra Web:
Enviar informacin
TICS - PUNO
Botn de resetear la informacin Es posible que el usuario una vez avanzado el formulario, quiera reiniciarlo desde el principio y volver a escribir la informacin. Para ello es muy til el botn para borrar la informacin. El botn se escribe casi igual que el anterior, cambiando el type, que en el caso de estos botones es reset y cambiando el mensaje interno del botn, o sea, el value. El ejemplo sencillo de este botn tendra el siguiente cdigo:
<input type="reset" value="Borrar informacin">
Y el resultado de ese cdigo sera este botn:

Borrar informacin
Formularios V: otros campos.

hidden El hidden es un atributo que se le pone al tag. Gracias a este atributo estamos enviando al programa de gestin de datos, aparte de los datos enviados por el propio usuario, datos predefinidos por nosotros mismos invisibles para el usuario. Estos datos pueden ser tiles para ayudar al programa en su gestin de los datos del formulario. Lo que hacen es comunicar cierta informacin al servidor sobre cmo tratar los datos mantenindose ocultos a la vista de los usuarios. Este tipo de datos ocultos no se muestran en la pgina, aunque s pueden ser detectados solicitando el cdigo fuente. El atributo hidden no se llega a usar en pginas escritas en html, slo en las que empleen tambin otro tipo de lenguajes. Aqu podemos ver el cdigo de un ejemplo:
<form action="mailto: nombredelcorreo@correo.com " method="post" enctype="text/plain" name="mihidden"> <input type="hidden" name="opcion" value="si"> </form> image El atributo image sirve para personalizar un botn. Es decir, este atributo introduce un botn en una imagen, sustituyendo al formato estndar de botones que ya hemos visto en otros artculos del tutorial. La funcin de los botones creados de esta forma es igual que la de submit, pero nos permite personalizar este elemento. Un ejemplo de este tipo de botones sera este:
<form action="mailto:nombredelcorreo@correo.com" method="post" enctype="text/plain" name="image"> <input type="image" name="boton" src="http://html.hazunaweb.com/html/imagenes/boton.jpg"
32
TICS - PUNO
align="middle"> </form> file El atributo file permite al usuario subir archivos. Por supuesto necesitaremos un programa que gestione estos archivos mediante un lenguaje diferente al html. Aqu te hemos escrito un formulario con este tipo de type (type=file) para que veas las diferencias con los otros que habamos visto hasta ahora.
<form method="post" enctype="multipart/form-data"><br> <input type=file size=60 name="file1"><br><br> <input type=file size=60 name="file2"><br><br> <input type=submit value="subir"><br> </form><br>
Fjate como tenemos que cambiar el enctype, la forma de enviar la informacin, ya que ahora no vamos a enviar texto plano, sino archivos. Nosotros tenemos que definir el tamao del campo y su nombre. El botn "Examinar" es creado automticamente por el navegador. Al pinchar en l, podremos examinar nuestro disco duro para encontrar la imagen que deseemos subir.
Formularios VI: ejemplo de formulario.

Como ejercicio final hemos hecho un formulario intentando reunir en l todo lo que hemos dado y, sobre todo, todas las opciones que tenemos a la hora de confeccionar un formulario. El formulario lo tienes en el siguiente enlace: ejemplo de formulario. Lo idneo es que lo observes y trates de hacerlo t, sin tener que mirar el cdigo que nosotros hemos utilizado. Por si necesitars hacerlo, aqu te dejamos el cdigo:
<form action="mailto:emaildelaempresaquehaceelformulario@email.com" method="post" enctype="text/plain"> Nombre: <input type="text" name="nombre" size="25" maxlength="50"><br><br> Apellidos: <input type="text" name="apellidos" size="35" maxlength="100"> <br><br> Correo electrnico: <input type="text" value="@" name="correo" size="40" maxlength="100"> <br><br> Poblacin: <input type="text" name="poblacion" size="15" maxlength="50"> <br><br> Provincia: <input type="text" name="provincia" size="15" maxlength="50"> <table width="100%" border="0" cellspacing="0" cellpadding="10"> <tr> <td>Edad: <br> <input type="radio" name="edad" value="020"> 0-20 <br> <input type="radio" name="edad" value="2040" checked> 20-40 <br> <input type="radio" name="edad" value="4060"> 40-60 <br> <input type="radio" name="edad" value="60100"> 60-100</td> <td>¿Cómo nos conociste?<br> <input type="checkbox" name="conocer"> A través de un amigo.<br>
33
TICS - PUNO
<input type="checkbox" name="conocer"> A través de un buscador.<br> <input type="checkbox" name="conocer"> Navegando por la red.<br> <input type="checkbox" name="conocer"> Otros</td> </tr> </table> Opinin sobre nuestra página web<br> <textarea cols="40" rows="5" name="opinion">Escriba aqu su opinin...</textarea> <br><br> Tiene alguna sugerencia... <br> <textarea cols="40" rows="5" name="sugerencias">Escriba aqu sus sugerencias...</textarea> <br><br> ¿Cúanto navegas por intenet? (Señala la opción que más se acerque)<br> <select name="frecuencia" size="2"> <option value="1">2 horas al da. <option value="2">4 horas al da. <option value="3">10 horas a la semana. <option value="4">20 horas al mes. </select> <br> <br> <table width="50%" border="0" align="center" cellpadding="10" cellspacing="0"> <tr> <td><div align="center"> <input type="submit" value="Enviar formulario"> </div></td> <td><div align="center"> <input type="Reset" value="Borrar formulario"> </div></td> </tr> </table> </form>
Frames.
Un Frame (en castellano "marco"), es una ventana independiente dentro de la propia ventana del navegador. Cada frame tiene sus propios bordes y tambin sus barras de desplazamiento. Mediante un frame conseguimos dividir la ventana del navegador en varias subventanas independientes entre ellas. Cada una de estas subventanas posee un documento html propio. Vamos a ver cmo es el cuerpo de un frame y su estructura para posteriormente explicar cada parte del marco. Podemos ver como es diferente al tipo de estructura que habamos visto hasta ahora:
<html> <head> <title>Ejemplo de frame.</title> </head> <frameset cols="150,100%"> <frame name="indice" src="frame-ejemplo-2.html"> <frame name="principal" src="frame-ejemplo.html"> <noframes> <p>Si tu navegador no acepta frames, estars viendo este mensaje. Lo sentimos!</p> </noframes> </frameset> </html>
34
TICS - PUNO
Lo primero que salta a la vista es que no encontramos la habitual etiqueta html <body>. sta es sustituida por <frameset> que indica que esa ventana va a dividirse en diferentes marcos. Dentro de la etiqueta frameset debemos indicar el nmero de marcos que van a haber (ya sea en columnas cols o en filas rows) y el tamao de cada uno de ellos. Este tamao puede asignarse por porcentaje, por nmeros absolutos o sobre el espacio sobrante. Esta forma de tamao se indica mediante un asterisco y le estamos indicando al marco que coja el espacio sobrante que dejan los dems marcos. Podemos tambin colocar un frameset dentro de otro. Es decir, podemos dividir un marco de frameset en otros submarcos. Esto se hace colocando la etiqueta dentro de otra de ellas. Otra parte destacable de la estructura es <frame>. Como vemos, debemos escribir tantos <frame> como nmeros de stos hayamos creado en <frameset>. En nuestro caso eran dos, as que hemos escrito dos <frame>. <frame> tiene dos atributos bsicos y obligatorios. El primero es el atributo name, en el que debemos indicar el nombre de cada uno de los marcos. El segundo es la fuente o la direccin del documento html que ocupar dicho <frame>. Vemos que tambin hemos escrito la etiqueta <noframes>. Esto es para el supuesto de que el navegador no acepte frames. Es muy poco probable, pues hoy en da casi todos los navegadores los aceptan, pero por si acaso debemos ponerlo. En caso de no aceptarlos, saldr el texto que hayamos puesto para esos supuestos. La estructura de los frames poco a poco se va usando menos. De todas formas, aqu te dejamos un pequeo ejemplo de un frame para que te hagas una idea aproximada de cmo es su estructura. Ejemplo de frame. A continuacin te vamos a presentar el cdigo del documento del ejemplo. Primero te mostraremos el cdigo del frame:
<html> <head> <title>Ejemplo de frame.</title> </head> <frameset cols="150,100%"> <frame name="indice" src="frame-ejemplo-2.html"> <frame name="principal" src="frame-ejemplo.html"> <noframes> <p>Si tu navegador no acepta frames, estars viendo este mensaje. Lo sentimos!</p> </noframes> </frameset> </html>
Este sera el cdigo de frame-ejemplo-2.html:
<html> <head> <title>Pgina indice del ejemplo de frames</title> </head> <body> Aqu puedes ver la pgina ndice del ejemplo de frames que te estamos presentando. </body> </html>
35

Y este el cdigo de frame-ejemplo.html:
TICS - PUNO
<html> <head> <title>Documento introduccin del ejemplo de frames</title> </head> <body> Y aqu ira el artculo de introduccin. Nosotros hemos querido dejarte este pequeo texto a modo de ejemplo. </body> </html>
Iframes.
En otro artculo de la Web te presentamos lo que eran los frames y vimos su estructura y sus utilidades. Ahora te vamos a presentar los iframes. stos tambin nos permiten mostrar otras urls dentro de nuestra ventana principal, pero con un mayor control y con unas ventajas mayores que te mostraremos a lo largo del artculo. Los frames requeran de una pgina vaca para insertar all los marcos. Esto provocaba una ralentizacin para el usuario, ya que primero deba cargarse la pgina principal y luego ya se cargaban los marcos. Con los iframes no pasa eso ya que la pgina principal, donde va albergado nuestro iframe, est lleno de contenido, por lo que el usuario recibe informacin desde el principio. El uso habitual de los iframes es para mostrar publicidad o Webs de colaboracin. Vamos a mostrarte el cdigo de la estructura bsica de un iframe para poder explicarte sus partes.
<html> <head> <title>Iframes</title> </head> <body> <iframe src="http://html.hazunaweb.com/" width="600" height="400" scrolling="auto"> Texto alternativo para navegadores que no aceptan iframes </iframe> </body> </html>
Como vemos, la estructura es similar a cualquier documento html que hemos visto anteriormente, con su cabecera (<head>), su ttulo (<title>) y su contenido visual dentro de <body>. Como vemos en el cdigo anterior, debemos definir el tamao del marco del iframe y definir si queremos que haya barra desplazadora o no. sta opcin la especificamos gracias al atributo "scrolling". Su valor por defecto es "auto", aunque podemos definir si queremos barras desplazadoras ("yes") o si no las queremos ("no"). El iframe debe tener una fuente, que ser la url que muestre en el marco que hemos creado. En nuestro caso hemos puesto la pgina de inicio de este tutorial html. Hemos querido presentarte un ejemplo de iframe. Podrs verlo si pinchas en el siguiente enlace: Ver ejemplo de iframe. Para ver su cdigo selecciona en el navegador la opcin de ver el cdigo fuente de la pgina.
Marquee.
36
TICS - PUNO
La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra pgina Web. Gracias a ella podemos conseguir texto en movimiento. Para aplicar este efecto a los textos, stos deben estar dentro de la etiqueta marquee, entre su inicio "<marquee>" y su cierre "</marquee>". El movimiento, la direccin de desplazamiento, la velocidad del mismo,todo es configurable gracias a los siguientes atributos: align: Este atributo nos indicar si el texto dentro de la etiqueta se alinear en la zona alta del marquee ("top"), en el medio ("middle") o en la parte baja ("bottom"). bgcolor: Con este atributo definiremos el color de fondo que le queremos dar a la marquesina donde est el texto en movimiento. height y width: El primero marca la altura que tendr la marquesina y el segundo la anchura de la misma. scrollamount: Este atributo define la cantidad de pxeles que queremos que se desplace el texto en cada movimiento. Por ejemplo: <marquee scrollamount="3"> </marquee> significar que el texto que vaya dentro de esa etiqueta se mover a razn de tres pxeles por movimiento. scrolldelay: ste nos define la velocidad del texto que est dentro de la marquesina. A menor numeracin, mayor velocidad. Es decir, un texto ir ms rpido si el scrolldelay es 5, que si el scrolldelay es 20. loop: Este atributo nos determina si el movimiento se repetir o no. Si queremos que el movimiento slo se repita unas veces determinadas debemos indicrselo con un nmero, que ser el nmero de veces que se repita. Si queremos que se repita slo 10 veces, su loop ser el siguiente: <marquee loop="10"> </marquee> Si queremos que se repita debemos usar "infinite" o "-1". Si no especificamos nada, se repetir constantemente. direction: Sirve para definir la direccin del movimiento: "left" para la izquierda, "right" para la derecha, "top" para arriba y "down" para abajo. behavior: Gracias a este atributo podemos dar nuevos efectos a la marquesina. Si no especificamos este atributo, el texto se mover de forma circular en el sentido que le hayamos marcado. Con behavior="scroll" conseguiremos el mismo efecto: el texto se mover circularmente. Con behavior="slide" haremos que el texto se detenga al llegar al final de la marquesina. Y con el behavior="alternate" el texto ir y volver de un lado a otro de la marquesina. Nosotros hemos querido mostrarte un ejemplo de marquee. Aqu lo puedes ver:
Y el cdigo de nuestro marquee es el siguiente:
<marquee bgcolor="#FFFFFF" width="50%" scrolldelay="100" scrollamount="5" direction="left" loop="infinite">Ests viendo el ejemplo que hemos hecho nosotros. </marquee>
Fieldset y legend.
Fieldset La etiqueta fieldset suele usarse principalmente en formularios para poder agrupar campos que estn relacionados entre s. Aunque tambin podemos utilizarlo para agrupar una serie de definiciones o de textos relacionados entre s.
37
TICS - PUNO
Fieldset se escribe con la etiqueta <fieldset> y su cierre (</fieldset>). Debemos advertir que tanto la etiqueta de apertura como la de cierre son obligatorias. El efecto que conseguimos gracias a la etiquetas fieldset es un rectngulo enmarcando el texto que est incluido dentro de l. Hay una cosa importante que debemos tener en cuenta del fieldset: ste se ensanchar todo lo que pueda en la pgina. Es decir, su ancho por naturaleza ser del 100%. Si queremos darle una anchura predeterminada o limitar su expansin lo que deberemos hacer incluir la etiqueta dentro de una tabla a la que s le indicaremos la anchura que queremos darle. A continuacin vamos a ofrecerte un fieldset bsico, sin limitacin ninguna:
<fieldset> Esto es un fieldset bsico </fieldset>
Y aqu puedes apreciar como quedar en nuestra pgina:
Esto es un fieldset bsico
Y a continuacin te mostramos el cdigo de un fieldset incluido dentro de una tabla, con una anchura del 75% y alineada al centro:
<table width="75%" align="center" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <fieldset> Esto es un fieldset dentro de una tabla </fieldset> </td> </tr> </table>
Obteniendo el siguiente resultado: Esto es un fieldset dentro de una tabla Legend La etiqueta legend nos resulta muy til dentro de la etiqueta fieldset. Legend nos permite titular o etiquetar el conjunto de campos que estn incluidos dentro de legend. Por ejemplo, si el conjunto de datos son los datos personales de la persona, en legend escribiremos Datos personales. Legend se abre con la etiqueta <legend> y se cierra con </legend>. Por supuesto, estas dos etiquetas deben estar dentro de la etiqueta <fieldset>. Podemos alinear el ttulo del legend como queramos, mediante el parmetro align. En la siguiente muestra veremos un fieldset con su etiqueta alineada al centro:
<fieldset> <legend align= "center">legend alineado al centro</legend> Este es un ejemplo de un fieldset con el legend alineado al centro </fieldset>
Y la muestra es la siguiente:
38
TICS - PUNO
legend alineado al centroEste es un ejemplo de un fieldset con el legend alineado al centro

Ms etiquetas.
blockquote La etiqueta blockquote se escribe gracias a la apertura <blockquote> y a su cierre </blockquote>. Todo lo que est dentro de est etiqueta estar sujeto a su accin. El blockquote se usa para escribir una cita textual o un prrafo exacto y que ste se diferencie del resto del texto. El efecto que nos muestra es que crea unos espacios a la derecha y a la izquierda del texto, para que se diferencie de los dems. En el siguiente texto vamos a poder observar el efecto del blockquote. Es un texto sacado del primer libro del Seor de los Anillos: La noche pas lentamente. Sali el sol. Los hobbits se levantaron bastante tarde y la maana prosigui. Se solicit el concurso de gente, que recibi orden de despejar los pabellones y quitar mesas, sillas, cucharas, cuchillos, botellas, platos, linternas, macetas de arbustos en flor, migajas, papeles, carteras, pauelos y guantes olvidados, y alimentos no consumidos, que eran muy pocos. El cdigo del texto es el siguiente:
<blockquote>La noche pas lentamente. Sali el sol. Los hobbits se levantaron bastante tarde y la maana prosigui. Se solicit el concurso de gente, que recibi orden de despejar los pabellones y quitar mesas, sillas, cucharas, cuchillos, botellas, platos, linternas, macetas de arbustos en flor, migajas, papeles, carteras, pauelos y guantes olvidados, y alimentos no consumidos, que eran muy pocos.</blockquote>
Podemos agrupar varias de estas etiquetas para conseguir un espacio mayor por los costados. Vamos a ver el resultado, en el siguiente texto, de dos etiquetas juntas de <blockquote>: La noche pas lentamente. Sali el sol. Los hobbits se levantaron bastante tarde y la maana prosigui. Se solicit el concurso de gente, que recibi orden de despejar los pabellones y quitar mesas, sillas, cucharas, cuchillos, botellas, platos, linternas, macetas de arbustos en flor, migajas, papeles, carteras, pauelos y guantes olvidados, y alimentos no consumidos, que eran muy pocos. Observad como vara el resultado de un texto a otro. Y aqu veremos el cdigo del segundo texto:
<blockquote><blockquote>La noche pas lentamente. Sali el sol. Los hobbits se levantaron bastante tarde y la maana prosigui. Se solicit el concurso de gente, que recibi orden de despejar los pabellones y quitar mesas, sillas, cucharas, cuchillos, botellas, platos, linternas, macetas de arbustos en flor, migajas, papeles, carteras, pauelos y guantes olvidados, y alimentos no consumidos, que eran muy pocos.</blockquote></blockquote>
nobr La etiqueta <nobr> obliga al navegador a que muestre esa frase sin saltos de lnea. El texto que queremos que no se parta debe ir dentro de las etiquetas de apertura (<nobr>) y de cierre (</nobr>). Aqu os dejamos el cdigo de una frase con nobr para que veis cmo se debe escribir:
<nobr>sta sera una frase que no se puede partir </nobr> center
39
TICS - PUNO
La etiqueta <center> nos permite centrar prrafos, imgenes o tablas dentro de nuestra Web. Para centrar un elemento, ste debe estar entre las etiquetas de apertura y cierre. Este sera el cdigo de un texto centrado:
<center> Este texto est centrado en la pgina. </center>
Y su resultado sera el siguiente: Este texto est centrado en la pgina. span
La etiqueta <span> nos permite agrupar un conjunto de elementos y as poder establecer unas reglas de estilo comunes para el conjunto. Los elementos que queramos agrupar con span deben ir dentro entre <span> y </span>, su etiqueta de apertura y cierre respectivamente. Como podemos comprobar la etiqueta <span> se parece mucho a la etiqueta <div> ya que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas caractersticas comunes para todos esos elementos. Tanto uno como el otro son etiquetas ms propias de css. Hay una diferencia clara entre ambas. Con la etiqueta span podemos agrupar unos elementos, sin que stos sufran ninguna variacin respecto al resto del texto, a no ser que le indiquemos un estilo al span. En cambio con div los elementos que forman parte de un grupo sufren una variacin de salto de lnea con respecto a los dems elementos. <div> crea un salto de lnea al principio y otro al final. Vamos a ver el cdigo del ejemplo del efecto del span en un grupo de elementos.
Esto es un prrafo <span style="color:red">con unas letras en rojo</span> para que veas lo que se puede hacer con la etiqueta span.
Y aqu podemos ver el resultado del efecto: Esto es un prrafo con unas letras en rojo para que veas lo que se puede hacer con la etiqueta span.
CSS.
Las hojas de estilo completan Html, dndole mayores posibilidades. Nosotros te explicamos CSS en su tutorial especfico, pero en este artculo queramos mostrarte algunas de las posibilidades que nos ofrecen las hojas de estilo. Observa el siguiente texto de Gustavo Adolfo Becquer:
Volvern las oscuras golondrinas en tu balcn sus nidos a colgar, y otra vez con el ala a sus cristales jugando llamarn.
Volvern las tupidas madreselvas de tu jardn las tapias a escalar, y otra vez a la tarde an ms hermosas sus flores se abrirn. Pero aquellas, cuajadas de roco
40

cuyas gotas mirbamos temblar y caer como lgrimas del da... esas... no volvern!
TICS - PUNO
Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se pueden llegar hacer. Si quieres saber cmo lo hemos hecho, aqu te dejamos el cdigo para que lo observes.
Javascript.
Como hemos visto a lo largo del tutorial, el html tiene una importante limitacin: es un lenguaje esttico, sin interactividad con el usuario. Javascript es un lenguaje que nos ayuda a salvar esa barrera y que nos ofrece un mayor dinamismo. Los programas del lenguaje Javascript se escriben dentro del html. Nosotros no vamos a ensearte a utilizar este lenguaje, pero s queremos mostrarte como incluirlo en tu pgina Web, dentro del lenguaje html. Aunque existen diferentes formas de incluir Javascript en un documento html, nosotros vamos a mostrarte la ms comn: mediante la etiqueta <script> y su correspondiente cierre: </script>. Adems deberemos indicar dentro de esa etiqueta el lenguaje (language="Javascript") y el tipo (type="text/javascript").Dentro de esta etiqueta ir el programa Javascript. En un mismo documento html podemos incluir varias etiquetas <script>. El nico requisito es que todas ellas estn convenientemente cerradas. En el siguiente ejemplo vers una de las muchas cosas que se pueden hacer mediante el Javascript. Nosotros hemos hecho una ventana de alerta. Ejemplo de Javascript. Y a continuacin te mostramos el cdigo:
<html> <head> <title>Alerta en Javasrcipt.</title> </head> <body> Aquí tienes nuestra ventana de alerta en Javascript. ¿Qué te parece? <script language="Javascript" type="text/javascript"> window.alert("Esta alerta la hemos hecho con Javascript") </script> </body> </html>
Viendo detenidamente el cdigo nos damos cuenta de cmo el programa Javascript est escrito dentro de las etiquetas <script> correspondientes. Este programa en concreto es una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente.
41

Aprende A Crear Una Página Web Gratis

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Aprende A Crear Una Página Web Gratis

Cargado por

Copyright:

Formatos disponibles

Ing. Ral A.

Figueroa Mamani Aprende a crear una pgina web gratis

Ing. Ral A. Figueroa Mamani

1.- Prlogo al manual de HTML

2.- Introduccin al HTML

3.- Sintaxis del HTML

4.- Tu primera pgina

Formatos bsicos con HTML

6.- Formateando el texto

Vemos como colocar negritas, itlicas, subrayados, subndices y suprendices. Entrar

7.- Color, tamao y tipo de letra

8.- Los colores y HTML

9.- Atributos para pginas

Ing. Ral A. Figueroa Mamani

12.- Listas II - Listas ordenadas

Estudiamos otro tipo de listas: las listas ordenadas. Entrar

13.- Listas III - Listas de definicin

Todo sobre los enlaces en HTML

Vemos qu son los enlaces en HTML y los distintos tipos. Entrar

15.- Enlaces internos

16.- Enlaces locales

17.- Enlaces externos, de correo y hacia archivos

18.- Atributo nofollow en los enlaces

Imgenes, formatos grficos e optimizacin

20.- Alineacin de imgenes con HTML

21.- Formatos grficos para pginas web

Ing. Ral A. Figueroa Mamani

24.- Tablas en HTML. Atributos para filas y celdas

25.- Tablas en HTML. Atributos de la tabla y conclusin

26.- Bordes de tabla en HTML 4

27.- Agrupar filas o columnas de tablas con HTML 4

Empezamos la explicacin de la creacin de formularios con el lenguaje HTML. Entrar

29.- Elementos de Formularios. Campos de texto

30.- Otros elementos de formulario

31.- Envo, borrado y dems en formularios HTML

32.- Etiquetas FIELDSET y LEGEND de formularios

Frames o marcos en HTML

Ing. Ral A. Figueroa Mamani

34.- Frames - Explicacin bsica

35.- Frames - Creacin de una estructura simple

36.- Frames - Una pgina en cada marco

37.- Frames - Dirigir los enlaces

38.- Frames - Anidar frames

39.- Frames - Atributos avanzados

40.- Ventajas e inconvenientes del uso de frames

41.- Etiqueta Iframe

Lo nuevo en HTML 4.0

43.- Las nuevas etiquetas de HTML 4.0 (1)

44.- Las nuevas etiquetas de HTML 4.0 (2)

46.- Sonido en HTML II, caractersticas del sonido digital

47.- Sonido en HTML (III)

Ing. Ral A. Figueroa Mamani

49.- Sonido en HTML (V)

En este captulo veremos el potencil de la etiqueta OBJECT. Entrar

Otros asuntos importantes y el futuro del HTML

51.- Juego de caracteres, charset, del documento HTML

52.- Etiqueta META robots

Explicacin de la etiqueta META robots y diferentes posibilidades de configuracin. Entrar

53.- El futuro del desarrollo web: HTML 5

55.- Nuevos elementos de formularios en HTML5

56.- Las mejoras de los elementos INPUT de HTML5

57.- Etiquetas nuevas de HTML5

Ing. Ral A. Figueroa Mamani