Antes que nada este curso lo he tomado de la pagina http://www.wikilearning.com/ y el autor intelectual de esta obra es Jorge Ferrer, Víctor García y Rodrigo García yo todavia no se manejar completamente el HTML pero al igual que uds yo estoy aprendiendo y para los interesados que se empiecen por aquí donde se implementará lso siguientes puntos:
1 Introducción al lenguaje HTML
2 Primeros pasos con HTML
3 Parrafos en HTML
4 Cómo insertar imagenes en una pagina
5 Cómo crear enlaces hipertexto
6 PRÁCTICA 1: La pagina web de "La chistera"
7 Anclas (I)
8 Anclas (II)
9 Formato de texto
10 La etiqueta FONT
11 Texto preformateado
12 Acentos y otros caracteres especiales
13 Listas en HTML (I)
14 Listas en HTML (II)
15 Comentarios en HTML
16 Practica 2: Un sitio web completo
17 Usando color en el WWW
18 Cómo cambiar la apariencia de una pagina
19 Imagenes en las paginas Web (I)
20 Imagenes en las paginas Web (II)
21 Imagenes en las paginas Web (III)
22 Cómo cambiar la apariencia de las imagenes
23 Alternativas a las imagenes inline (I)
24 Alternativas a las imagenes inline (II)
25 Mejoras en las imagenes
26 Cómo se crea una tabla HTML (I)
27 Cómo se crea una tabla HTML (II)
28 Alineamiento de tablas
29 Alineamiento de celdas y filas
30 Ancho de tablas y celdas
31 Celdas que abarcan varias filas o columnas
32 Margenes y separación de celdas
33 Anidamiento
34 Practica 3 - Tabla de Datos
35 Practica 4 - Pagina Web con una estructura creada con tablas
36 Practica 4 - Pagina Web con una estructura creada con tablas
37 Practica 4 - Pagina Web con una estructura creada con tablas
38 Estandares y extensiones del lenguaje HTML (I)
39 Estandares y extensiones del lenguaje HTML (II)
40 Extensiones a las listas (I)
41 Extensiones a las listas (II)
42 Alineamiento
43 La etiqueta META
44 Otras etiquetas del lenguaje HTML 3.2
45 El atributo TARGET
46 La etiqueta BASE
47 Creación de paginas con frames
48 Creación del documento de definición de frames (I)
49 Creación del documento de definición de frames (II)
50 Pagina completa con frames
51 Atributos de la etiqueta FRAME
52 Compatibilidad: NOFRAME
53 Anidamiento de framesets
54 Bordes de los frames
55 Valores especiales del atributo TARGET
56 Practica 5: Web de Los Alpes con frames
57 Frames flotantes
58 Sonido vídeo y otros ficheros externos
59 Multimedia Inline (I)
60 Multimedia Inline (I)
61 Plug-ins y objetos incrustados
62 Java en las Paginas Web
63 Inserción de Applets Java (I)
64 Inserción de Applets Java (II)
65 Inserción de Applets Java (III)
66 ActiveX, la tecnología del futuro
67 Formularios en HTML
68 Controles de Formularios (I)
69 Controles de Formularios (II)
70 Controles de Formularios (III)
71 Controles de Formularios (IV)
72 Otros controles
73 Practica 6-Formulario para "Los Alpes"
74 COMO USAR LOS DATOS DE UN FORMULARIO
75 Envío De Ficheros Usando Formularios
Resumen
Este es un curso tremendamente completo, guiado y con ejemplos y prácticas pensadas para convertirlo en una guía didáctica para aprender a hacer páginas web. No se requieren más que conocimientos básicos de informática para llevarlo a cabo y se cubren desde los aspectos más básicos de HTML hasta los más avanzados.
1 - Introducción al lenguaje HTML
""El World Wide Web (WWW) es un sistema que contiene una cantidad de información casi infinita. Pero esta información debe estar ordenada de alguna forma de manera que sea posible encontrar lo que se busca. La unidad básica donde está almacenada esta información son las páginas Web. Estas páginas se caracterizan por contener texto, imágenes, animaciones... e incluso sonido y video.
Una de las características más importantes de las páginas Web es que son hipertexto. Esto quiere decir que las páginas no son elementos aislados, sino que están unidas a otras mediante los links o enlaces hipertexto. Gracias a estos enlaces el navegante de internet puede pulsar sobre un texto (texto al que llamaremos de ahora en adelante activo) de una página para navegar hasta otra página. Será cuestión del programador de la página inicial decidir que palabras o frases serán activas y a donde nos conducirá pulsar sobre ellas.
En algunos ambientes se discute que el World Wide Web ya no es un sistema hipertexto sino hipermedia. Los que defienden el cambio se apoyan en que aunque en sus orígenes el WWW constaba únicamente de texto en la actualidad es un sistema principalmente gráfico y se puede hacer que las zonas activas sean, no sólo texto, sino imágenes, videos, botones,... en definitiva cualquier elemento de una página. Aún así, el término original no ha sido reemplazado todavía y por tanto será el empleado a lo largo de esta obra.
Figura 1.1. Aunque al principio el texto predominaba en el WWW, en la actualidad las imágenes son mayoría como podemos observar en una de las principales webs del proyecto KDE.
Características del lenguaje HTML
Pero empecemos ya con lo que nos interesa. ¿Cómo se hace una página Web? Cuando los diseñadores del WWW se hicieron esta pregunta decidieron que se debían cumplir, entre otras, las siguientes características:
El Web tenía que ser distribuido: La información repartida en páginas no muy grandes enlazadas entre sí.
El Web tenía que ser hipertexto y debía ser fácil navegar por él.
Tenía que ser compatible con todo tipo de ordenadores (PCs, Macintosh, estaciones de trabajo...) y con todo tipo de sistemas operativos (Windows, MS-DOS, UNIX, MAC-OS,...).
Debía ser dinámico: el proceso de cambiar y actualizar la información debía ser ágil y rápido.
Estas características son las que marcaron el diseño de todos los elementos del WWW incluida la programación de páginas Web. Como respuesta a todos estos requisitos se creo el lenguaje HTML (HiperText Markup Language), cuyas siglas significan "lenguaje hipertexto de marcas".
Este lenguaje será el encargado de convertir un inocente archivo de texto inicial en una página web con diferentes tipos y tamaños de letra, con imágenes impactantes, animaciones sorprendentes, formularios interactivos, etc.
Qué se necesita para crear una página web
Una de las características de este lenguaje más importantes para el programador es que no es necesario ningún programa especial para crear una página Web. Gracias a ello se ha conseguido que se puedan crear páginas con cualquier ordenador y sistema operativo. El código HTML, como hemos adelantado en el párrafo anterior, no es más que texto y por tanto lo único necesario para escribirlo es un editor de texto como el que acompañan a todos los sistemas operativos: edit en MS-DOS, block de notas en Windows,vien UNIX, etc. Por supuesto estos no son los únicos editores de texto que pueden ser usados, sino cualquier otro. También se puede usar procesadores de texto, que son editores con capacidades añadidas, compo pueden ser Microsoft Word o WordPerfect pero hay que tener cuidado porque en ocasiones hacen traducciones automáticas del código HTML que no siempre son deseadas. En estos dos últimos casos, también hay que tener en cuenta que deberemos guardar el archivo en modo texto.
Figura 1.2. Un editor de texto simple, como el block de notas de Windows, es todo lo necesario para crear una página Web
Una vez hemos escrito el código deberemos guardar el archivo (con formato de texto) con la extensión .html ( o .htm en MS-DOS, Windows 3.1 o cualquier otro sistema que sólo acepte tres letras en la extensión. Los siguientes son nombres válidos de archivos que contengan código HTML: index.html, index.htm,principal.html, PRINCIPAL.htm, etc...
NOTA: Si el editor o procesador de textos usado para crear la página obliga a usar la extensión .txt al guardar el archivo en modo texto, deberemos guardarlo con esta extensión, por ejemplo como index.txt, y posteriormente cambiar el nombre del archivo desde fuera del programa a index.html o index.htm . Para ello usaremos el comando rename en MS-DOS; en Windows 3.1 lo haremos mediante el administrador de archivos y en Windows 95 con el explorador. En otros entornos, como Linux, es mas raro que se de esta situación.
ATENCIÓN: El World Wide Web es un sistema que diferencia las mayúsculas de las minúsculas. Es un error común llamar a un archivo index.html y luego referirse a él como Index.html. Aunque en nuestro ordenador puede funcionar al publicarlo seguramente no lo hará. Por esta razón es una norma general usar siempre minúsculas para los nombres de los archivos html.
Últimamente han aparecido nuevas alternativas que facilitan la programación de páginas Web. Son los editores HTML. Podemos dividir estos editores en dos grupos:
Asistentes: ayudan a crear el código HTML e incluyen plantillas de código prefabricadas, por ejemplo HotDog (Win), HomeSite(Win),HTML Editor (Mac), Quanta (Linux, KDE) o Bluefish, (Linux, GNOME).
Conversores: son programas con otra función que la de la programación Web pero que permiten convertir a HTML. Son ejemplos de conversores Microsoft Word ,Quark XPress y PageMaker.
Editores WYSIWYG (What You See Is What You Get, lo que ves es lo que obtienes): estos editores permiten crear páginas web sin escribir código HTML como si se tratase de un programa de dibujo por ordenador. Algunos ejemplos de este tipo de editores son Macromedia Dreamweaver, HotMetal o Microsoft Frontpage.
Figura 1.3. Algunos editores WYSIWYG permiten, además, modificar el código HTML directamente.
Algunas razones para usar HTML
Todos estos editores HTML tipos pueden ser de gran ayuda y tienen sus ventajas e inconvenientes, pero la experiencia demuestra que conocer el lenguaje HTML ofrece bastantes ventajas:
Seremos capaces de aprovechar todas las características de este lenguaje, incluso las más nuevas.
Aunque se use inicialmente un editor WYSWYG tendremos los conocimientos suficientes para modificar posteriormente el código que éste ha creado. Así se pueden corregir errores o incluir etiquetas no soportadas por el editor.
No dependeremos de la disponibilidad de una herramienta concreta para poder crear páginas web. Con un simple editor de textos será suficiente.
El principal problema de usar editores conversores y WYSIWYG es la necesidad de trabajar con dos archivos-fuentes por separado, por un lado el archivo del editor y por otro el archivo del código HTML una vez generado, lo que nos complica la vida a la hora de realizar cambios en nuestro Web. Sin embargo su utilidad es innegable y su combinación con un buen conocimiento del lenguaje HTML nos convertirá en unos grandes programadores de páginas Web capaces de realizar creaciones impactantes visualmente y de gran calidad técnica.
HTML es un lenguaje descriptivo
Probablemente el lector ha usado alguna vez un procesador de texto (Abiword, Microsoft Word o KWord) o un programa de descripción de páginas (QuarkXPress). Con este tipo de aplicaciones el usuario tiene un control total sobre los elementos del documento: se le puede decir al programa "pon este texto con este tamaño", "sitúalo a 1 cm. del borde", "usa este sangrado para los párrafos", etc... Con HTML el programador no tiene este tipo de control sobre los elementos que incluirá en su página. El objetivo de este lenguaje será simplemente describir cómo es una página de manera que examinando esa descripción el navegador del usuario final sea capaz de mostrarlo de la mejor manera posible. Con HTML podremos indicarle al navegador que este es un titular, aquí comienza un párrafo, estos son elementos de una lista, etc. posteriormente el navegador decidirá como mostrar esos elementos.
Figura 1.4. Los navegadores en modo texto como Lynx también pueden mostrar páginas Web gracias al carácter descriptivo de HTML.
¿Por qué funciona así? En un principio esta característica del HTML puede resultar molesta para el creador de la página, que no puede saber como será vista su página más que de una forma aproximada. Sin embargo es fundamental para conseguir que el World Wide Web pueda ser navegado con cualquier tipo de ordenador (dicho con otras palabras, que el WWW sea multiplataforma). Debemos tener en cuenta que no todos los sistemas operativos son gráficos, que incluso usando un mismo sistema operativo existen diferentes resoluciones de pantalla, ... Por esta razón el lenguaje necesario para crear páginas debe ser descriptivo y como consecuencia tras crear una página el programador debe ver como es mostrada con varios navegadores distintos como Netscape Navigator o Microsoft Internet Explorer incluyendo algún navegador de texto como Lynx.
Pero una consecuencia más importante aún de esta característica, es que ha permitido que aparezcan navegadores vocales, que leen las páginas en vez de mostrarlas. Gracias a ello personas ciegas también han podido disfrutar del WWW. Es más, esta misma tecnología esta siendo usada para los nuevos navegadores embarcados en coches que leen la página al conductor para que no se distraiga.
NOTA: Una vez creada una página es recomendable probar nuestra página, no sólo con varios navegadores, sino también con varias resoluciones de pantalla distintas como por ejemplo: 640x480, 800x600 y 1024x768. Si existe la posibilidad de probarlo además con un navegador vocal, mucho mejor aún.
Un buen ejemplo de este carácter descriptivo es la definición de titulares, también llamados encabezados, en HTML. Vamos a adelantarnos un poco en esta introducción para mostrar este ejemplo, en él se muestra como poner el titular de una página:
<h1>Bienvenido a la página de La Super Editorial</h1>
Con este código estamos describiendo el texto Bienvenido a la página de La Super Editorial como el texto de máxima importancia en nuestra página, es el titular. En los navegadores más usados como el Netscape Navigator o el Microsoft Internet Explorer este titular será mostrado como un texto en negrita y de tamaño grande (el tamaño más grande posible). Sin embargo repetimos una vez más que existen navegadores como pueden ser Lynx o Emacs-W3 que son bastante usados por la comunidad académica y universitaria que sólo pueden mostrar texto y no pueden variar el tamaño de la letra. Por esta razón la etiqueta <h1> no dice que el texto que encierra debe ser de tal tamaño o si debe ser negrita o no. Esta etiqueta sólo le dice que este texto es el más importante de la página, el titular. Sabiendo esto el navegador que funcione en modo texto puede resaltar dicho titular con los medios de que dispone, como por ejemplo poniéndolo en mayúsculas o usando distintos sangrados.
También podemos encontrar ventajas de la descripción mirando al futuro. Imaginemos que la informática evoluciona hasta tal punto que los monitores de dentro de unos años pueden mostrar objetos en tres dimensiones. Sería muy interesante que el titular de nuestra página fuese en 3-D de manera que resaltase lo máximo posible. Pues bien, si lo hemos definido como cabecera principal (y no como letra de tamaño 20 puntos y en negrita, por ejemplo) el navegador sabe que queremos que ese texto sea el más importante y puede actuar de manera inteligente poniéndolo automáticamente en tres dimensiones, ¡sin que nosotros hayamos cambiado una sola línea de nuestro código! Parece interesante ¿no?
Una vez a quedado claro cual es el espíritu de HTML, hay que decir que últimamente se han introducido métodos para conseguir un mayor control sobre las páginas. Estos métodos permiten controlar aspectos como el tamaño de la letra la disposición (aproximada) de imágenes y texto de manera que se facilita la labor del programador. Pero hay que tener siempre en mente que siempre habrá ligeras diferencias entre como verán las páginas unos usuarios u otros y no debemos pretender poder controlar la presentación y diseño de nuestra página hasta el mínimo detalle.
1.5. Las bases de HTML
Una vez repasadas unas nociones básicas de HTML y de la programación de páginas Web en general entraremos de lleno en la programación con este lenguaje. Pronto nos daremos cuenta de la sencillez de este lenguaje lo que le convierte en un lenguaje muy fácil de aprender y que nos permitirá crear páginas con mayor facilidad aún.
Las órdenes de este lenguaje estarán formadas por unos comandos llamados etiquetas que pueden tener o bien la siguiente estructura:
<NOMBRE_ETIQUETA>
O bien esta otra:
<NOMBRE_ETIQUETA> TEXTO </NOMBRE ETIQUETA>
Como vemos, la primera estructura está formada por una única instrucción y la segunda por dos: una que marca el inicio de la etiqueta y otra que marca el final, con texto entre ambas.
Por ejemplo, para indicarle al navegador que queremos que pinte una línea horizontal debemos escribir:
<hr>
Así de sencillo. Como vemos, el nombre de la etiqueta va delimitado por los símbolos menor que (< y mayor que (>, todas las instrucciones de HTML deben ir encerradas entre estos dos símbolos.
Pero las etiquetas no se limitan a indicar ordenes tan sencillas, estas órdenes tienen en ocasiones parámetros. Por ejemplo la etiqueta <hr> tal y como lo hemos hecho anteriormente daría lugar a la línea que vemos en la figura 1.5, es decir le dice al navegador que dibuje una línea horizontal en la pantalla. Esta línea tiene un grosor predeterminado y un ancho variable en función del tamaño de la ventana del navegador.
Figura 1.5. Uso básico de una etiqueta HTML sin ningún tipo de parámetros. Ejemplo usando la etiqueta <hr> para crear una línea horizontal.
Sin embargo hay muchas formas de pintar una línea y sería deseable poder elegir detalles tales como la anchura y el grosor que va a tener dicha línea. Para especificar este tipo de detalles se crearon los atributos de las etiquetas. Este nuevo elemento se introduce en una etiqueta de la siguiente manera:
<etiqueta atributo="valor">
Es decir, en primer lugar ponemos el nombre de la etiqueta, después el nombre del atributo seguido por un signo igual y posteriormente el valor que queramos darle a ese atributo encerrado entre comillas una etiqueta puede tener tantos atributos como se deseen y en ocasiones son necesarios para que la etiqueta tenga algún significado.
En nuestro ejemplo de la línea horizontal existe un atributo llamado SIZE, que significa tamaño en inglés, que permite controlar el grosor de la línea que será dibujada en pantalla. Veamos un ejemplo, en la figura 1.6 podemos ver la línea horizontal con diferentes grosores.
Figura 1.6. Las etiquetas tienen atributos para cambiar aspectos del efecto que producen. En este ejemplo vemos como se puede cambiar el grosor de una línea con el atributo SIZE.
El valor que toma el atributo size determina el número de puntos de pantalla o pixeles que debe ocupar, en grosor, la línea. En posteriores capítulos estudiaremos en detalle la etiqueta <hr> y todos sus atributos.
En la figura 1.6 vemos que el valor numérico que le damos al atributo size no va entrecomillado, por ejemplo en <hr size=5>. En HTML no es necesario entrecomillar los valores de los atributos cuando están formados únicamente por números [0-9], letras [a-z, A-Z], guiones y puntos. En todo caso es muy recomendable incluir las comillas siempre. De esta forma no tenemos que preocuparnos de cuando ponerlas y cuando no y a la vez cumplimos el nuevo estándar XHTML. Para los curiosos adelantaremos que XHTML es idéntico a HTML pero con algunas restricciones adicionales del mundo de XML.
Antes de empezar con el código HTML básico conviene hacer saber al lector que aunque en todos los ejemplos usados hasta ahora las etiquetas usadas estaban escritas en mayúsculas en realidad es indiferente el uso de estas o de minúsculas. Sin embargo las mayúsculas son de uso común para que sea más fácil distinguirlas del texto y por tanto seguiremos usando este convenio a lo largo del curso.
En los ejemplos también usaremos distinto sangrado (alineación de los párrafos) para los diferentes elementos del código para mostrar los niveles de anidamiento. Este sangrado no es necesario y el lector puede optar por ignorarlo si decide copiar los ejemplos para verlos en su navegador, sin embargo facilita la lectura del código y no afecta al modo en que los objetos de nuestra página serán mostrados Hasta aqui llega. ""
2 - Primeros pasos con HTML
ya Conocidas ya las principales características de HTML estamos listos para aprender sus principales etiquetas y para crear nuestra primera página.
2.1. Estructura de una página
Todo documento HTML está formado por los bloques que podemos apreciar en la figura 2.1. Pasemos a explicar cada uno de ellos.
Figura 2.1. Estructura de bloques de un documento HTML.
En primer lugar deberemos especificar que el archivo de texto que estamos escribiendo es un documento HTML, para ello usamos las instrucciones de inicio y fin de la etiqueta al principio y al final de la página respectivamente:
Código de la página
El código de la página esta formado a su vez por dos grandes bloques, la cabecera y el cuerpo.
La cabecera de la página está delimitada por las instrucciones de inicio y fin de la etiqueta head. Estas instrucciones deben estar dentro de la etiqueta HTML de la siguiente manera:
Elementos de la cabecera
... Resto de código de la página ...
En la cabecera de la página se introduce toda aquella información que afectará a toda la página. En un principio esta información se limitará al título. Este título se indicará con la etiqueta title usando la siguiente sintaxis:
Mi primera página WEB
El resultado de ver esta página con nuestro navegador es el que se observa en la figura 2.2. Como vemos, el área de la pantalla donde suele estar la página está todavía vacía, pero si nos fijamos en la cabecera de la ventana del navegador vemos que el título a pasado de ser Microsoft Internet Explorer a "Mi primera página WEB - Microsoft Internet Explorer". Es decir el título que le demos a nuestra página con la etiqueta pasará a ser el título de la ventana del navegador.
Figura 2.2. El título de la página es mostrado en la parte superior de la ventana del navegador.
Además cuando un usuario vea nuestra página y decida incluirla en su lista de webs preferidos con la opción agregar a favoritos del menú Favoritos del navegador (en este caso el explorer) añadirá el nombre que le hemos dado a nuestra página en dicho menú, tal y como podemos apreciar en la figura 2.3. Aunque el nombre con el que se almacena un Favorito puede ser cambiado por el usuario, si hemos puesto un buen título, lo suficientemente descriptivo a cada una de nuestras páginas le evitaremos esa molestia.
Figura 2.3. Cuando los navegantes incluyan nuestra página a su menú de favoritos en su menú aparecerá el título que le hayamos dado a nuestra página con la etiqueta .
Es importante resaltar que nada de lo que se ponga en la cabecera de la página será mostrado en la zona del navegador dedicada a mostrar el contenido, es decir, en la zona que vemos en blanco en la figura 2.2.
Esto nos induce a pensar que existe otra forma de indicar como será el contenido de la página, pues así es: el cuerpo es el siguiente gran bloque de nuestro documento HTML, éste quedará delimitado por la etiqueta body. En su interior introduciremos todos aquellos elementos de los que queremos que conste nuestra página como pueden ser testo, imágenes, tablas, etc. Conociendo la etiqueta body podemos ampliar el ejemplo anterior para que incluya texto.
Mi primera página WEB
Hola a todos, como han deducido por el titulo esta es la
primera pagina web que hago, espero que les
guste. Fdo. Jorge
En la figura 2.4 podemos apreciar como muestra el Internet Explorer este código. Como vemos todo el texto que hemos escrito entre las instrucciones de inicio y fin forman ahora el cuerpo de nuestra página.
Figura 2.4. En esta figura observamos la zona de la ventana en la que los navegadores mostrarán el texto que pongamos en el cuerpo de la página.
NOTA: Es posible que aunque no incluyamos las etiquetas html o body nuestras páginas sean visualizadas con algunos navegadores. Sin embargo no debemos confiarnos ya que lo más seguro es que con el resto de navegadores no se vean bien. Por esta razón es muy recomendable usar ambas etiquetas tal y como se ha descrito.
Una vez que ya sabemos insertar contenido en una página pasaremos a estudiar las diferentes etiquetas que sirven para darle formato a ese contenido.
2.2. Los encabezados
Usualmente un documento tiene, además de texto llano, una serie de encabezados o titulares. Para ello el lenguaje HTML posee una serie de etiquetas que permiten disponer de titulares de hasta 6 niveles de importancia.
Estas etiquetas son: , , , , y . La letra "h" al principio del nombre de estas etiquetas provien de la abreviatura de la palabra inglesa heading que significa encabezado. Siguiendo a la hache hay un número del uno al seis que indica la importancia del titular siendo el más importante el uno y el menos importante el seis. En la figura 2.5 se puede ver un ejemplo de cómo muestra las cabeceras Internet Explorer.
Figura 2.5. Distintos tipos de encabezados vistos con Microsoft Internet Explorer.
El código usado en este ejemplo es el siguiente:
Encabezado 1
Encabezado 2
Encabezado 3
Encabezado 4
Encabezado 5
Encabezado 6
NOTA: Los encabezados empiezan siempre en una línea nueva y el texto que les sigue comenzará en la línea siguiente. Además el navegador podrá mostrar un espacio vertical adicional entre el encabezado y el texto anterior y posterior.
En él observamos que todos los titulares están en negrita y el tamaño de la fuente usada para cada encabezado va decreciendo conforme decrece la importancia del titular. Pero hay que tener en cuenta, tal y como comentábamos en la introducción, que este es sólo un ejemplo y que otros navegadores pueden mostrar estos encabezados de manera diferente.
Por otro lado los navegadores más usados hoy en día son el Internet Explorer y el Netscape Navigator y es normal prestarles una atención especial (aunque no exclusiva). Y en la figura 2.6 podemos apreciar cómo con este último se muestra los encabezados de una manera prácticamente idéntica. Por esta razón podemos estar casi seguros de que los usuarios verán los encabezados de la forma mostrada en ambas figuras.
Figura 2.6. Distintos tipos de encabezados vistos con Netscape Navigator
Hay que destacar que los encabezados de h1 a h4 pueden ser usados como títulos ya que los navegadores suelen usar un tamaño de letra mayor que el habitual para mostrarlos. Sin embargo los encabezados h5 y h6 suelen ser mostrados con letra más pequeña aún que el texto y por esta razón se usan como notas a pie de página o comentarios de poca importancia.
2.3. El ejemplo mejorado
Ahora que sabemos usar encabezados los utilizaremos para mejorar ligeramente nuestra página. En la figura 2.7 podemos ver cómo se muestran las modificaciones.
Figura 2.7. Ejemplo de página Web con dos tipos de encabezados y dos párrafos.
Esta página ha sido creada con el siguiente código:
Mi primera página WEB
Mi primera página WEB
Bienvenida
Hola a todos, como han deducido por el titulo esta es la
primera pagina web que hago, espero que les guste. Fdo. Jorge
Proposito
En esta página iré practicando con los conocimientos que
adquiera en el curso de HTML
3 - Parrafos en HTML
""
Ha llegado el momento de aprender a introducir un texto en una página web, pero antes es necesario comprender cómo será interpretado este texto. Cuando un navegador lee el código HTML de una página y lo interpreta para mostrar la página, todos los espaciados múltiples, tabulados o saltos de línea que se haya incluido en los textos serán interpretados como un único espacio. Esta característica suele sorprender (e incluso molestar) al principio, pero es innegable que esta forma de actuar es necesaria y concuerda con el carácter descriptivo de HTML.
La mejor manera de habituarse es probar, para ello proponemos los siguientes ejemplos de código que serán mostrados de la misma forma por el navegador aunque algunos contengan saltos de línea, otros tabulados entre las palabras, etc.
<h1>El conductor del coche le pregunto si se encontraba mal</h1>
<h1>
El conductor del coche le preguntó si se encontraba mal
</h1>
<h1>
El conductor del coche
le pregunto si se encontraba mal </h1>
En estos ejemplos podemos observar diversos saltos de línea y separaciones en el texto, sin embargo el navegador mostrará un solo espacio entre las palabras y producirá saltos de línea donde sea necesario en función del tamaño de la ventana. Las figuras 3.1 y 3.2 son ejemplos de cómo muestra el Explorer los códigos anteriores para diferentes tamaños de ventana.
Figura 3.1. Ejemplo de cómo se muestra en el Explorer los códigos anteriores en un tamaño de ventana.
Figura 3.2. Ejemplo de cómo se muestra en el Explorer los códigos anteriores en un tamaño de ventana diferente.
Conocida esta característica es momento de adentrarse en las distintas etiquetas que permiten tener un mayor control sobre el texto de nuestras páginas.
Saltos de línea
En ocasiones puede ser conveniente introducir un punto y aparte cuando estamos escribiendo un texto. En HTML para hacer esto puede usarse la etiqueta <br>. Cuando el navegador se encuentra con esta etiqueta provoca un salto de línea y sigue mostrando el contenido de la página. Veamos un ejemplo:
Estaba internándose en lo desconocido. <br>
Durante todo el trayecto hasta Woodfield no dejó de pensar en los
aspectos económicos, con el temor de estar cometiendo...
En este texto podemos observar cómo tras el primer punto era necesario un cambio de línea, por lo que hemos usado <br>.
Cómo se insertan párrafos
Un párrafo es un conjunto de frases sobre un mismo asunto. En HTML para demarcar un párrafo se usa la etiqueta p, situándose la instrucción de inicio <p> al comienzo del párrafo y la instrucción de fin </p> tras la última frase. Entre ellas pueden insertarse tantos saltos de línea como se deseen así como muchos otros elementos HTML. A continuación se muestra un ejemplo:
<p>
Estaba internándose en lo desconocido.
</p>
<p>
Durante todo el trayecto hasta
Woodfield no dejó de pensar en los aspectos económicos, con el
temor de estar cometiendo...
</p>
Otra opción hubiera sido crear un único párrafo e insertar un salto de línea tras la primera frase:
<p>
Estaba internándose en lo desconocido.
<br>
Durante todo el trayecto hasta
Woodfield no dejó de pensar en los aspectos económicos, con el
temor de estar cometiendo...
</p>
En la figura 3.3 se puede observar la diferencia entre los dos ejemplos en Explorer. Puede observarse que en general los navegadores dejan un espacio vertical antes y después de cada párrafo, algo que no ocurre con los saltos de línea.
Figura 3.3. Ejemplo de un párrafo con un salto de línea y la división del mismo texto en dos párrafos.
Uso incorrecto de la etiqueta p
La etiqueta p es usada en muchas páginas de forma incorrecta. El error consiste en emplearla simplemente para introducir un espacio (vertical) entre líneas. La forma adecuada es introducir las instrucciones de inicio y fin para marcar el comienzo y el fin de un párrafo.
Espacio entre líneas
Para introducir un espacio vertical entre líneas debe usarse la etiqueta <br>. Si se ponen varias seguidas no se mostrará más espacio, pero esto puede solucionarse insertando entre las etiquetas la cadena " ". Por ejemplo para insertar tres líneas en blanco puede usarse:
<br>
<br>
<br>
El atributo 'align' en la etiqueta <p> permite especificar la alineación del párrafo. Puede tener tres valores: "center", "left" y "right", para obtener un párrafo centrado, alineado a la izquierda o alineado a la derecha respectivamente. En la figura 3.4 se muestra el párrafo del código anterior con los tres tipos de alineación.
Figura 3.4. Con el atributo 'align' se pueden crear párrafos alineados a la derecha, centrados o alineados a la izquierda.
Líneas horizontales para separar párrafos
Si lo que se necesita es separar dos secciones diferentes de una página, ya sea texto o no, puede emplearse una nueva etiqueta: <hr>. Su nombre proviene del inglés Horizontal Rule (línea horizontal). Esta etiqueta está formada por una única instrucción y provoca que el navegador inserte una línea horizontal como la mostrada en la figura 3.3 que separaba los dos párrafos que se estaban comparando. Existen cuatro atributos que permiten modificar su apariencia. Estos son:
'align':
Permite cambiar la alineación de la línea. Puede tomar tres valores:"left", "center" y "right" para conseguir alineación a la izquierda, centro y derecha respectivamente.
'noshade':
'noshade', que en inglés significa sin sombra, existe porque algunos navegadores gráficos como Navigator o Explorer muestran las líneas horizontales con un efecto tridimensional con sombra. Al incluir este atributo se elimina este efecto de manera que el navegador sólo mostrará una línea horizontal negra.
'size':
Con este atributo se puede controlar el grosor de la línea. Como valor de este atributo se debe especificar el valor deseado en pixeles (puntos de pantalla).
'width':
Este atributo permite especificar el ancho de la línea. El valor puede ser dado de una manera absoluta, especificando el ancho en pixeles (por ejemplo width=100) o de manera relativa respecto al ancho de la ventana del navegador usando porcentajes (por ejemplo width="90%". Es más que recomendable usar este último sistema de manera que obtengamos un resultado apropiado independientemente del tamaño que cada usuario quiera dar a la ventana de su navegador.
Estos atributos pueden ser usados conjuntamente para combinar sus efectos. En la figura 3.5 podemos ver el efecto de cada uno por separado en Explorer junto con los valores empleados en cada caso.
Figura 3.5. Con los nuevos atributos de la etiqueta <hr> podemos controlar el ancho, grosor alineamiento y sombra de la línea horizontal.
La etiqueta <blockquote>... </blockquote>
Otra etiqueta relacionada con el formato de párrafos en HTML es <blockquote>, que consta de una instrucción de inicio y una de fin y que indica que el párrafo que encierra es un texto parafraseado. Al usar esta etiqueta el navegador mostrará el texto en u nuevo párrafo con márgenes a la izquierda y a la derecha. En la figura 3.6 puede verse un uso típico de esta etiqueta.
No abusar de las líneas horizontales
Es conveniente no usar mucho las líneas horizontales, limitándolas al comienzo y fin de la página. La razón de esto es que las líneas en medio de la página dificultan la lectura de esta. Si se desea separar secciones un espacio vertical del tamaño adecuado es más efectivo.
Figura 3.6. La etiqueta <blockquote> es usada para insertar bloques de texto que citan a otro autor. Los navegadores suelen introducir un sangrado en este texto.
http://www.wikilearning.com/imagescc/9708/fig2-6.png
Que se corresponde con el código:
Que se corresponde con el código:
Mi poema favorito es aquel de Federico García Lorca que reza:
<blockquote>
Mi corazón, como una sierpe<br>
se ha desprendido de su piel,<br>
y aquí la miro entre mis dedos<br>
llena de heridas y de miel<br>
</blockquote>
La etiqueta <address>... </address>
Muy relacionada con la anterior, es la etiqueta <address>, que en inglés significa dirección. Esta etiqueta está compuesta, igualmente, por dos instrucciones y se usa para incluir información sobre el autor de una página WEB o elementos relacionados. Puede encontrarse un ejemplo de su uso en las coletillas existentes al final de muchas páginas en las que se incluye información variada para el usuario como puede ser, además del autor, la fecha de la última modificación, la fecha actual, la URL de la página, etc. como se muestra en la figura 3.7.
Figura 3.7. En esta página se observa como al final de la página se han incluido datos de los autores y de la página. Para ello se ha usado la etiqueta <address>.
La etiqueta <center>... </center>
Acabamos de ver una serie de etiquetas que permiten cambiar de línea, crear distintos tipos de párrafos o insertar líneas que les separen. También hemos visto que alguna de las etiquetas utilizadas tienen el atributo 'align' que permite indicar el alineamiento.
En ocasiones puede ser muy útil indicar que algún texto, imagen o algún otro elemento de la página debía ser centrado. Sin embargo no todas las etiquetas tienen el atributo 'align'. La solución es emplear una nueva etiqueta: center. Ésta está compuesta por una instrucción de inicio y una de fin de manera que todo lo que quedaba entre ellas, fuese lo que fuese, estuviese centrado. Por ejemplo en el ejemplo del verso de Lorca podemos centrarlo escribiendo:
Mi poema favorito es aquel de Federico García Lorca que reza:
<center>
<blockquote>
Mi corazón, como una sierpe <br>
se ha desprendido de su piel,<br>
y aquí la miro entre mis dedos<br>
llena de heridas y de miel <br>
</blockquote>
</center>
Y el resultado obtenido hubiese sido el de la figura 3.8
Figura 3.8. Con la etiqueta <center> es posible centrar cualquier elemento de nuestra página como por ejemplo el verso de Lorca de la figura 3.6.
Actualmente existen alternativas mejores que la etiqueta center para especificar el alineamiento. En particular la etiqueta div y las hojas de estilo en cascada que serán tratadas a lo largo de este curso.
Bueno No se cuanto se alarga el post así que lo dejo hasta aquí y despues sigo con la 2da parte.
COPY/PASTE
1 Introducción al lenguaje HTML
2 Primeros pasos con HTML
3 Parrafos en HTML
4 Cómo insertar imagenes en una pagina
5 Cómo crear enlaces hipertexto
6 PRÁCTICA 1: La pagina web de "La chistera"
7 Anclas (I)
8 Anclas (II)
9 Formato de texto
10 La etiqueta FONT
11 Texto preformateado
12 Acentos y otros caracteres especiales
13 Listas en HTML (I)
14 Listas en HTML (II)
15 Comentarios en HTML
16 Practica 2: Un sitio web completo
17 Usando color en el WWW
18 Cómo cambiar la apariencia de una pagina
19 Imagenes en las paginas Web (I)
20 Imagenes en las paginas Web (II)
21 Imagenes en las paginas Web (III)
22 Cómo cambiar la apariencia de las imagenes
23 Alternativas a las imagenes inline (I)
24 Alternativas a las imagenes inline (II)
25 Mejoras en las imagenes
26 Cómo se crea una tabla HTML (I)
27 Cómo se crea una tabla HTML (II)
28 Alineamiento de tablas
29 Alineamiento de celdas y filas
30 Ancho de tablas y celdas
31 Celdas que abarcan varias filas o columnas
32 Margenes y separación de celdas
33 Anidamiento
34 Practica 3 - Tabla de Datos
35 Practica 4 - Pagina Web con una estructura creada con tablas
36 Practica 4 - Pagina Web con una estructura creada con tablas
37 Practica 4 - Pagina Web con una estructura creada con tablas
38 Estandares y extensiones del lenguaje HTML (I)
39 Estandares y extensiones del lenguaje HTML (II)
40 Extensiones a las listas (I)
41 Extensiones a las listas (II)
42 Alineamiento
43 La etiqueta META
44 Otras etiquetas del lenguaje HTML 3.2
45 El atributo TARGET
46 La etiqueta BASE
47 Creación de paginas con frames
48 Creación del documento de definición de frames (I)
49 Creación del documento de definición de frames (II)
50 Pagina completa con frames
51 Atributos de la etiqueta FRAME
52 Compatibilidad: NOFRAME
53 Anidamiento de framesets
54 Bordes de los frames
55 Valores especiales del atributo TARGET
56 Practica 5: Web de Los Alpes con frames
57 Frames flotantes
58 Sonido vídeo y otros ficheros externos
59 Multimedia Inline (I)
60 Multimedia Inline (I)
61 Plug-ins y objetos incrustados
62 Java en las Paginas Web
63 Inserción de Applets Java (I)
64 Inserción de Applets Java (II)
65 Inserción de Applets Java (III)
66 ActiveX, la tecnología del futuro
67 Formularios en HTML
68 Controles de Formularios (I)
69 Controles de Formularios (II)
70 Controles de Formularios (III)
71 Controles de Formularios (IV)
72 Otros controles
73 Practica 6-Formulario para "Los Alpes"
74 COMO USAR LOS DATOS DE UN FORMULARIO
75 Envío De Ficheros Usando Formularios
Resumen
Este es un curso tremendamente completo, guiado y con ejemplos y prácticas pensadas para convertirlo en una guía didáctica para aprender a hacer páginas web. No se requieren más que conocimientos básicos de informática para llevarlo a cabo y se cubren desde los aspectos más básicos de HTML hasta los más avanzados.
1 - Introducción al lenguaje HTML
""El World Wide Web (WWW) es un sistema que contiene una cantidad de información casi infinita. Pero esta información debe estar ordenada de alguna forma de manera que sea posible encontrar lo que se busca. La unidad básica donde está almacenada esta información son las páginas Web. Estas páginas se caracterizan por contener texto, imágenes, animaciones... e incluso sonido y video.
Una de las características más importantes de las páginas Web es que son hipertexto. Esto quiere decir que las páginas no son elementos aislados, sino que están unidas a otras mediante los links o enlaces hipertexto. Gracias a estos enlaces el navegante de internet puede pulsar sobre un texto (texto al que llamaremos de ahora en adelante activo) de una página para navegar hasta otra página. Será cuestión del programador de la página inicial decidir que palabras o frases serán activas y a donde nos conducirá pulsar sobre ellas.
En algunos ambientes se discute que el World Wide Web ya no es un sistema hipertexto sino hipermedia. Los que defienden el cambio se apoyan en que aunque en sus orígenes el WWW constaba únicamente de texto en la actualidad es un sistema principalmente gráfico y se puede hacer que las zonas activas sean, no sólo texto, sino imágenes, videos, botones,... en definitiva cualquier elemento de una página. Aún así, el término original no ha sido reemplazado todavía y por tanto será el empleado a lo largo de esta obra.
Figura 1.1. Aunque al principio el texto predominaba en el WWW, en la actualidad las imágenes son mayoría como podemos observar en una de las principales webs del proyecto KDE.
Características del lenguaje HTML
Pero empecemos ya con lo que nos interesa. ¿Cómo se hace una página Web? Cuando los diseñadores del WWW se hicieron esta pregunta decidieron que se debían cumplir, entre otras, las siguientes características:
El Web tenía que ser distribuido: La información repartida en páginas no muy grandes enlazadas entre sí.
El Web tenía que ser hipertexto y debía ser fácil navegar por él.
Tenía que ser compatible con todo tipo de ordenadores (PCs, Macintosh, estaciones de trabajo...) y con todo tipo de sistemas operativos (Windows, MS-DOS, UNIX, MAC-OS,...).
Debía ser dinámico: el proceso de cambiar y actualizar la información debía ser ágil y rápido.
Estas características son las que marcaron el diseño de todos los elementos del WWW incluida la programación de páginas Web. Como respuesta a todos estos requisitos se creo el lenguaje HTML (HiperText Markup Language), cuyas siglas significan "lenguaje hipertexto de marcas".
Este lenguaje será el encargado de convertir un inocente archivo de texto inicial en una página web con diferentes tipos y tamaños de letra, con imágenes impactantes, animaciones sorprendentes, formularios interactivos, etc.
Qué se necesita para crear una página web
Una de las características de este lenguaje más importantes para el programador es que no es necesario ningún programa especial para crear una página Web. Gracias a ello se ha conseguido que se puedan crear páginas con cualquier ordenador y sistema operativo. El código HTML, como hemos adelantado en el párrafo anterior, no es más que texto y por tanto lo único necesario para escribirlo es un editor de texto como el que acompañan a todos los sistemas operativos: edit en MS-DOS, block de notas en Windows,vien UNIX, etc. Por supuesto estos no son los únicos editores de texto que pueden ser usados, sino cualquier otro. También se puede usar procesadores de texto, que son editores con capacidades añadidas, compo pueden ser Microsoft Word o WordPerfect pero hay que tener cuidado porque en ocasiones hacen traducciones automáticas del código HTML que no siempre son deseadas. En estos dos últimos casos, también hay que tener en cuenta que deberemos guardar el archivo en modo texto.
Figura 1.2. Un editor de texto simple, como el block de notas de Windows, es todo lo necesario para crear una página Web
Una vez hemos escrito el código deberemos guardar el archivo (con formato de texto) con la extensión .html ( o .htm en MS-DOS, Windows 3.1 o cualquier otro sistema que sólo acepte tres letras en la extensión. Los siguientes son nombres válidos de archivos que contengan código HTML: index.html, index.htm,principal.html, PRINCIPAL.htm, etc...
NOTA: Si el editor o procesador de textos usado para crear la página obliga a usar la extensión .txt al guardar el archivo en modo texto, deberemos guardarlo con esta extensión, por ejemplo como index.txt, y posteriormente cambiar el nombre del archivo desde fuera del programa a index.html o index.htm . Para ello usaremos el comando rename en MS-DOS; en Windows 3.1 lo haremos mediante el administrador de archivos y en Windows 95 con el explorador. En otros entornos, como Linux, es mas raro que se de esta situación.
ATENCIÓN: El World Wide Web es un sistema que diferencia las mayúsculas de las minúsculas. Es un error común llamar a un archivo index.html y luego referirse a él como Index.html. Aunque en nuestro ordenador puede funcionar al publicarlo seguramente no lo hará. Por esta razón es una norma general usar siempre minúsculas para los nombres de los archivos html.
Últimamente han aparecido nuevas alternativas que facilitan la programación de páginas Web. Son los editores HTML. Podemos dividir estos editores en dos grupos:
Asistentes: ayudan a crear el código HTML e incluyen plantillas de código prefabricadas, por ejemplo HotDog (Win), HomeSite(Win),HTML Editor (Mac), Quanta (Linux, KDE) o Bluefish, (Linux, GNOME).
Conversores: son programas con otra función que la de la programación Web pero que permiten convertir a HTML. Son ejemplos de conversores Microsoft Word ,Quark XPress y PageMaker.
Editores WYSIWYG (What You See Is What You Get, lo que ves es lo que obtienes): estos editores permiten crear páginas web sin escribir código HTML como si se tratase de un programa de dibujo por ordenador. Algunos ejemplos de este tipo de editores son Macromedia Dreamweaver, HotMetal o Microsoft Frontpage.
Figura 1.3. Algunos editores WYSIWYG permiten, además, modificar el código HTML directamente.
Algunas razones para usar HTML
Todos estos editores HTML tipos pueden ser de gran ayuda y tienen sus ventajas e inconvenientes, pero la experiencia demuestra que conocer el lenguaje HTML ofrece bastantes ventajas:
Seremos capaces de aprovechar todas las características de este lenguaje, incluso las más nuevas.
Aunque se use inicialmente un editor WYSWYG tendremos los conocimientos suficientes para modificar posteriormente el código que éste ha creado. Así se pueden corregir errores o incluir etiquetas no soportadas por el editor.
No dependeremos de la disponibilidad de una herramienta concreta para poder crear páginas web. Con un simple editor de textos será suficiente.
El principal problema de usar editores conversores y WYSIWYG es la necesidad de trabajar con dos archivos-fuentes por separado, por un lado el archivo del editor y por otro el archivo del código HTML una vez generado, lo que nos complica la vida a la hora de realizar cambios en nuestro Web. Sin embargo su utilidad es innegable y su combinación con un buen conocimiento del lenguaje HTML nos convertirá en unos grandes programadores de páginas Web capaces de realizar creaciones impactantes visualmente y de gran calidad técnica.
HTML es un lenguaje descriptivo
Probablemente el lector ha usado alguna vez un procesador de texto (Abiword, Microsoft Word o KWord) o un programa de descripción de páginas (QuarkXPress). Con este tipo de aplicaciones el usuario tiene un control total sobre los elementos del documento: se le puede decir al programa "pon este texto con este tamaño", "sitúalo a 1 cm. del borde", "usa este sangrado para los párrafos", etc... Con HTML el programador no tiene este tipo de control sobre los elementos que incluirá en su página. El objetivo de este lenguaje será simplemente describir cómo es una página de manera que examinando esa descripción el navegador del usuario final sea capaz de mostrarlo de la mejor manera posible. Con HTML podremos indicarle al navegador que este es un titular, aquí comienza un párrafo, estos son elementos de una lista, etc. posteriormente el navegador decidirá como mostrar esos elementos.
Figura 1.4. Los navegadores en modo texto como Lynx también pueden mostrar páginas Web gracias al carácter descriptivo de HTML.
¿Por qué funciona así? En un principio esta característica del HTML puede resultar molesta para el creador de la página, que no puede saber como será vista su página más que de una forma aproximada. Sin embargo es fundamental para conseguir que el World Wide Web pueda ser navegado con cualquier tipo de ordenador (dicho con otras palabras, que el WWW sea multiplataforma). Debemos tener en cuenta que no todos los sistemas operativos son gráficos, que incluso usando un mismo sistema operativo existen diferentes resoluciones de pantalla, ... Por esta razón el lenguaje necesario para crear páginas debe ser descriptivo y como consecuencia tras crear una página el programador debe ver como es mostrada con varios navegadores distintos como Netscape Navigator o Microsoft Internet Explorer incluyendo algún navegador de texto como Lynx.
Pero una consecuencia más importante aún de esta característica, es que ha permitido que aparezcan navegadores vocales, que leen las páginas en vez de mostrarlas. Gracias a ello personas ciegas también han podido disfrutar del WWW. Es más, esta misma tecnología esta siendo usada para los nuevos navegadores embarcados en coches que leen la página al conductor para que no se distraiga.
NOTA: Una vez creada una página es recomendable probar nuestra página, no sólo con varios navegadores, sino también con varias resoluciones de pantalla distintas como por ejemplo: 640x480, 800x600 y 1024x768. Si existe la posibilidad de probarlo además con un navegador vocal, mucho mejor aún.
Un buen ejemplo de este carácter descriptivo es la definición de titulares, también llamados encabezados, en HTML. Vamos a adelantarnos un poco en esta introducción para mostrar este ejemplo, en él se muestra como poner el titular de una página:
<h1>Bienvenido a la página de La Super Editorial</h1>
Con este código estamos describiendo el texto Bienvenido a la página de La Super Editorial como el texto de máxima importancia en nuestra página, es el titular. En los navegadores más usados como el Netscape Navigator o el Microsoft Internet Explorer este titular será mostrado como un texto en negrita y de tamaño grande (el tamaño más grande posible). Sin embargo repetimos una vez más que existen navegadores como pueden ser Lynx o Emacs-W3 que son bastante usados por la comunidad académica y universitaria que sólo pueden mostrar texto y no pueden variar el tamaño de la letra. Por esta razón la etiqueta <h1> no dice que el texto que encierra debe ser de tal tamaño o si debe ser negrita o no. Esta etiqueta sólo le dice que este texto es el más importante de la página, el titular. Sabiendo esto el navegador que funcione en modo texto puede resaltar dicho titular con los medios de que dispone, como por ejemplo poniéndolo en mayúsculas o usando distintos sangrados.
También podemos encontrar ventajas de la descripción mirando al futuro. Imaginemos que la informática evoluciona hasta tal punto que los monitores de dentro de unos años pueden mostrar objetos en tres dimensiones. Sería muy interesante que el titular de nuestra página fuese en 3-D de manera que resaltase lo máximo posible. Pues bien, si lo hemos definido como cabecera principal (y no como letra de tamaño 20 puntos y en negrita, por ejemplo) el navegador sabe que queremos que ese texto sea el más importante y puede actuar de manera inteligente poniéndolo automáticamente en tres dimensiones, ¡sin que nosotros hayamos cambiado una sola línea de nuestro código! Parece interesante ¿no?
Una vez a quedado claro cual es el espíritu de HTML, hay que decir que últimamente se han introducido métodos para conseguir un mayor control sobre las páginas. Estos métodos permiten controlar aspectos como el tamaño de la letra la disposición (aproximada) de imágenes y texto de manera que se facilita la labor del programador. Pero hay que tener siempre en mente que siempre habrá ligeras diferencias entre como verán las páginas unos usuarios u otros y no debemos pretender poder controlar la presentación y diseño de nuestra página hasta el mínimo detalle.
1.5. Las bases de HTML
Una vez repasadas unas nociones básicas de HTML y de la programación de páginas Web en general entraremos de lleno en la programación con este lenguaje. Pronto nos daremos cuenta de la sencillez de este lenguaje lo que le convierte en un lenguaje muy fácil de aprender y que nos permitirá crear páginas con mayor facilidad aún.
Las órdenes de este lenguaje estarán formadas por unos comandos llamados etiquetas que pueden tener o bien la siguiente estructura:
<NOMBRE_ETIQUETA>
O bien esta otra:
<NOMBRE_ETIQUETA> TEXTO </NOMBRE ETIQUETA>
Como vemos, la primera estructura está formada por una única instrucción y la segunda por dos: una que marca el inicio de la etiqueta y otra que marca el final, con texto entre ambas.
Por ejemplo, para indicarle al navegador que queremos que pinte una línea horizontal debemos escribir:
<hr>
Así de sencillo. Como vemos, el nombre de la etiqueta va delimitado por los símbolos menor que (< y mayor que (>, todas las instrucciones de HTML deben ir encerradas entre estos dos símbolos.
Pero las etiquetas no se limitan a indicar ordenes tan sencillas, estas órdenes tienen en ocasiones parámetros. Por ejemplo la etiqueta <hr> tal y como lo hemos hecho anteriormente daría lugar a la línea que vemos en la figura 1.5, es decir le dice al navegador que dibuje una línea horizontal en la pantalla. Esta línea tiene un grosor predeterminado y un ancho variable en función del tamaño de la ventana del navegador.
Figura 1.5. Uso básico de una etiqueta HTML sin ningún tipo de parámetros. Ejemplo usando la etiqueta <hr> para crear una línea horizontal.
Sin embargo hay muchas formas de pintar una línea y sería deseable poder elegir detalles tales como la anchura y el grosor que va a tener dicha línea. Para especificar este tipo de detalles se crearon los atributos de las etiquetas. Este nuevo elemento se introduce en una etiqueta de la siguiente manera:
<etiqueta atributo="valor">
Es decir, en primer lugar ponemos el nombre de la etiqueta, después el nombre del atributo seguido por un signo igual y posteriormente el valor que queramos darle a ese atributo encerrado entre comillas una etiqueta puede tener tantos atributos como se deseen y en ocasiones son necesarios para que la etiqueta tenga algún significado.
En nuestro ejemplo de la línea horizontal existe un atributo llamado SIZE, que significa tamaño en inglés, que permite controlar el grosor de la línea que será dibujada en pantalla. Veamos un ejemplo, en la figura 1.6 podemos ver la línea horizontal con diferentes grosores.
Figura 1.6. Las etiquetas tienen atributos para cambiar aspectos del efecto que producen. En este ejemplo vemos como se puede cambiar el grosor de una línea con el atributo SIZE.
El valor que toma el atributo size determina el número de puntos de pantalla o pixeles que debe ocupar, en grosor, la línea. En posteriores capítulos estudiaremos en detalle la etiqueta <hr> y todos sus atributos.
En la figura 1.6 vemos que el valor numérico que le damos al atributo size no va entrecomillado, por ejemplo en <hr size=5>. En HTML no es necesario entrecomillar los valores de los atributos cuando están formados únicamente por números [0-9], letras [a-z, A-Z], guiones y puntos. En todo caso es muy recomendable incluir las comillas siempre. De esta forma no tenemos que preocuparnos de cuando ponerlas y cuando no y a la vez cumplimos el nuevo estándar XHTML. Para los curiosos adelantaremos que XHTML es idéntico a HTML pero con algunas restricciones adicionales del mundo de XML.
Antes de empezar con el código HTML básico conviene hacer saber al lector que aunque en todos los ejemplos usados hasta ahora las etiquetas usadas estaban escritas en mayúsculas en realidad es indiferente el uso de estas o de minúsculas. Sin embargo las mayúsculas son de uso común para que sea más fácil distinguirlas del texto y por tanto seguiremos usando este convenio a lo largo del curso.
En los ejemplos también usaremos distinto sangrado (alineación de los párrafos) para los diferentes elementos del código para mostrar los niveles de anidamiento. Este sangrado no es necesario y el lector puede optar por ignorarlo si decide copiar los ejemplos para verlos en su navegador, sin embargo facilita la lectura del código y no afecta al modo en que los objetos de nuestra página serán mostrados Hasta aqui llega. ""
2 - Primeros pasos con HTML
ya Conocidas ya las principales características de HTML estamos listos para aprender sus principales etiquetas y para crear nuestra primera página.
2.1. Estructura de una página
Todo documento HTML está formado por los bloques que podemos apreciar en la figura 2.1. Pasemos a explicar cada uno de ellos.
Figura 2.1. Estructura de bloques de un documento HTML.
En primer lugar deberemos especificar que el archivo de texto que estamos escribiendo es un documento HTML, para ello usamos las instrucciones de inicio y fin de la etiqueta al principio y al final de la página respectivamente:
Código de la página
El código de la página esta formado a su vez por dos grandes bloques, la cabecera y el cuerpo.
La cabecera de la página está delimitada por las instrucciones de inicio y fin de la etiqueta head. Estas instrucciones deben estar dentro de la etiqueta HTML de la siguiente manera:
Elementos de la cabecera
... Resto de código de la página ...
En la cabecera de la página se introduce toda aquella información que afectará a toda la página. En un principio esta información se limitará al título. Este título se indicará con la etiqueta title usando la siguiente sintaxis:
Mi primera página WEB
El resultado de ver esta página con nuestro navegador es el que se observa en la figura 2.2. Como vemos, el área de la pantalla donde suele estar la página está todavía vacía, pero si nos fijamos en la cabecera de la ventana del navegador vemos que el título a pasado de ser Microsoft Internet Explorer a "Mi primera página WEB - Microsoft Internet Explorer". Es decir el título que le demos a nuestra página con la etiqueta pasará a ser el título de la ventana del navegador.
Figura 2.2. El título de la página es mostrado en la parte superior de la ventana del navegador.
Además cuando un usuario vea nuestra página y decida incluirla en su lista de webs preferidos con la opción agregar a favoritos del menú Favoritos del navegador (en este caso el explorer) añadirá el nombre que le hemos dado a nuestra página en dicho menú, tal y como podemos apreciar en la figura 2.3. Aunque el nombre con el que se almacena un Favorito puede ser cambiado por el usuario, si hemos puesto un buen título, lo suficientemente descriptivo a cada una de nuestras páginas le evitaremos esa molestia.
Figura 2.3. Cuando los navegantes incluyan nuestra página a su menú de favoritos en su menú aparecerá el título que le hayamos dado a nuestra página con la etiqueta .
Es importante resaltar que nada de lo que se ponga en la cabecera de la página será mostrado en la zona del navegador dedicada a mostrar el contenido, es decir, en la zona que vemos en blanco en la figura 2.2.
Esto nos induce a pensar que existe otra forma de indicar como será el contenido de la página, pues así es: el cuerpo es el siguiente gran bloque de nuestro documento HTML, éste quedará delimitado por la etiqueta body. En su interior introduciremos todos aquellos elementos de los que queremos que conste nuestra página como pueden ser testo, imágenes, tablas, etc. Conociendo la etiqueta body podemos ampliar el ejemplo anterior para que incluya texto.
Mi primera página WEB
Hola a todos, como han deducido por el titulo esta es la
primera pagina web que hago, espero que les
guste. Fdo. Jorge
En la figura 2.4 podemos apreciar como muestra el Internet Explorer este código. Como vemos todo el texto que hemos escrito entre las instrucciones de inicio y fin forman ahora el cuerpo de nuestra página.
Figura 2.4. En esta figura observamos la zona de la ventana en la que los navegadores mostrarán el texto que pongamos en el cuerpo de la página.
NOTA: Es posible que aunque no incluyamos las etiquetas html o body nuestras páginas sean visualizadas con algunos navegadores. Sin embargo no debemos confiarnos ya que lo más seguro es que con el resto de navegadores no se vean bien. Por esta razón es muy recomendable usar ambas etiquetas tal y como se ha descrito.
Una vez que ya sabemos insertar contenido en una página pasaremos a estudiar las diferentes etiquetas que sirven para darle formato a ese contenido.
2.2. Los encabezados
Usualmente un documento tiene, además de texto llano, una serie de encabezados o titulares. Para ello el lenguaje HTML posee una serie de etiquetas que permiten disponer de titulares de hasta 6 niveles de importancia.
Estas etiquetas son: , , , , y . La letra "h" al principio del nombre de estas etiquetas provien de la abreviatura de la palabra inglesa heading que significa encabezado. Siguiendo a la hache hay un número del uno al seis que indica la importancia del titular siendo el más importante el uno y el menos importante el seis. En la figura 2.5 se puede ver un ejemplo de cómo muestra las cabeceras Internet Explorer.
Figura 2.5. Distintos tipos de encabezados vistos con Microsoft Internet Explorer.
El código usado en este ejemplo es el siguiente:
Encabezado 1
Encabezado 2
Encabezado 3
Encabezado 4
Encabezado 5
Encabezado 6
NOTA: Los encabezados empiezan siempre en una línea nueva y el texto que les sigue comenzará en la línea siguiente. Además el navegador podrá mostrar un espacio vertical adicional entre el encabezado y el texto anterior y posterior.
En él observamos que todos los titulares están en negrita y el tamaño de la fuente usada para cada encabezado va decreciendo conforme decrece la importancia del titular. Pero hay que tener en cuenta, tal y como comentábamos en la introducción, que este es sólo un ejemplo y que otros navegadores pueden mostrar estos encabezados de manera diferente.
Por otro lado los navegadores más usados hoy en día son el Internet Explorer y el Netscape Navigator y es normal prestarles una atención especial (aunque no exclusiva). Y en la figura 2.6 podemos apreciar cómo con este último se muestra los encabezados de una manera prácticamente idéntica. Por esta razón podemos estar casi seguros de que los usuarios verán los encabezados de la forma mostrada en ambas figuras.
Figura 2.6. Distintos tipos de encabezados vistos con Netscape Navigator
Hay que destacar que los encabezados de h1 a h4 pueden ser usados como títulos ya que los navegadores suelen usar un tamaño de letra mayor que el habitual para mostrarlos. Sin embargo los encabezados h5 y h6 suelen ser mostrados con letra más pequeña aún que el texto y por esta razón se usan como notas a pie de página o comentarios de poca importancia.
2.3. El ejemplo mejorado
Ahora que sabemos usar encabezados los utilizaremos para mejorar ligeramente nuestra página. En la figura 2.7 podemos ver cómo se muestran las modificaciones.
Figura 2.7. Ejemplo de página Web con dos tipos de encabezados y dos párrafos.
Esta página ha sido creada con el siguiente código:
Mi primera página WEB
Mi primera página WEB
Bienvenida
Hola a todos, como han deducido por el titulo esta es la
primera pagina web que hago, espero que les guste. Fdo. Jorge
Proposito
En esta página iré practicando con los conocimientos que
adquiera en el curso de HTML
3 - Parrafos en HTML
""
Ha llegado el momento de aprender a introducir un texto en una página web, pero antes es necesario comprender cómo será interpretado este texto. Cuando un navegador lee el código HTML de una página y lo interpreta para mostrar la página, todos los espaciados múltiples, tabulados o saltos de línea que se haya incluido en los textos serán interpretados como un único espacio. Esta característica suele sorprender (e incluso molestar) al principio, pero es innegable que esta forma de actuar es necesaria y concuerda con el carácter descriptivo de HTML.
La mejor manera de habituarse es probar, para ello proponemos los siguientes ejemplos de código que serán mostrados de la misma forma por el navegador aunque algunos contengan saltos de línea, otros tabulados entre las palabras, etc.
<h1>El conductor del coche le pregunto si se encontraba mal</h1>
<h1>
El conductor del coche le preguntó si se encontraba mal
</h1>
<h1>
El conductor del coche
le pregunto si se encontraba mal </h1>
En estos ejemplos podemos observar diversos saltos de línea y separaciones en el texto, sin embargo el navegador mostrará un solo espacio entre las palabras y producirá saltos de línea donde sea necesario en función del tamaño de la ventana. Las figuras 3.1 y 3.2 son ejemplos de cómo muestra el Explorer los códigos anteriores para diferentes tamaños de ventana.
Figura 3.1. Ejemplo de cómo se muestra en el Explorer los códigos anteriores en un tamaño de ventana.
Figura 3.2. Ejemplo de cómo se muestra en el Explorer los códigos anteriores en un tamaño de ventana diferente.
Conocida esta característica es momento de adentrarse en las distintas etiquetas que permiten tener un mayor control sobre el texto de nuestras páginas.
Saltos de línea
En ocasiones puede ser conveniente introducir un punto y aparte cuando estamos escribiendo un texto. En HTML para hacer esto puede usarse la etiqueta <br>. Cuando el navegador se encuentra con esta etiqueta provoca un salto de línea y sigue mostrando el contenido de la página. Veamos un ejemplo:
Estaba internándose en lo desconocido. <br>
Durante todo el trayecto hasta Woodfield no dejó de pensar en los
aspectos económicos, con el temor de estar cometiendo...
En este texto podemos observar cómo tras el primer punto era necesario un cambio de línea, por lo que hemos usado <br>.
Cómo se insertan párrafos
Un párrafo es un conjunto de frases sobre un mismo asunto. En HTML para demarcar un párrafo se usa la etiqueta p, situándose la instrucción de inicio <p> al comienzo del párrafo y la instrucción de fin </p> tras la última frase. Entre ellas pueden insertarse tantos saltos de línea como se deseen así como muchos otros elementos HTML. A continuación se muestra un ejemplo:
<p>
Estaba internándose en lo desconocido.
</p>
<p>
Durante todo el trayecto hasta
Woodfield no dejó de pensar en los aspectos económicos, con el
temor de estar cometiendo...
</p>
Otra opción hubiera sido crear un único párrafo e insertar un salto de línea tras la primera frase:
<p>
Estaba internándose en lo desconocido.
<br>
Durante todo el trayecto hasta
Woodfield no dejó de pensar en los aspectos económicos, con el
temor de estar cometiendo...
</p>
En la figura 3.3 se puede observar la diferencia entre los dos ejemplos en Explorer. Puede observarse que en general los navegadores dejan un espacio vertical antes y después de cada párrafo, algo que no ocurre con los saltos de línea.
Figura 3.3. Ejemplo de un párrafo con un salto de línea y la división del mismo texto en dos párrafos.
Uso incorrecto de la etiqueta p
La etiqueta p es usada en muchas páginas de forma incorrecta. El error consiste en emplearla simplemente para introducir un espacio (vertical) entre líneas. La forma adecuada es introducir las instrucciones de inicio y fin para marcar el comienzo y el fin de un párrafo.
Espacio entre líneas
Para introducir un espacio vertical entre líneas debe usarse la etiqueta <br>. Si se ponen varias seguidas no se mostrará más espacio, pero esto puede solucionarse insertando entre las etiquetas la cadena " ". Por ejemplo para insertar tres líneas en blanco puede usarse:
<br>
<br>
<br>
El atributo 'align' en la etiqueta <p> permite especificar la alineación del párrafo. Puede tener tres valores: "center", "left" y "right", para obtener un párrafo centrado, alineado a la izquierda o alineado a la derecha respectivamente. En la figura 3.4 se muestra el párrafo del código anterior con los tres tipos de alineación.
Figura 3.4. Con el atributo 'align' se pueden crear párrafos alineados a la derecha, centrados o alineados a la izquierda.
Líneas horizontales para separar párrafos
Si lo que se necesita es separar dos secciones diferentes de una página, ya sea texto o no, puede emplearse una nueva etiqueta: <hr>. Su nombre proviene del inglés Horizontal Rule (línea horizontal). Esta etiqueta está formada por una única instrucción y provoca que el navegador inserte una línea horizontal como la mostrada en la figura 3.3 que separaba los dos párrafos que se estaban comparando. Existen cuatro atributos que permiten modificar su apariencia. Estos son:
'align':
Permite cambiar la alineación de la línea. Puede tomar tres valores:"left", "center" y "right" para conseguir alineación a la izquierda, centro y derecha respectivamente.
'noshade':
'noshade', que en inglés significa sin sombra, existe porque algunos navegadores gráficos como Navigator o Explorer muestran las líneas horizontales con un efecto tridimensional con sombra. Al incluir este atributo se elimina este efecto de manera que el navegador sólo mostrará una línea horizontal negra.
'size':
Con este atributo se puede controlar el grosor de la línea. Como valor de este atributo se debe especificar el valor deseado en pixeles (puntos de pantalla).
'width':
Este atributo permite especificar el ancho de la línea. El valor puede ser dado de una manera absoluta, especificando el ancho en pixeles (por ejemplo width=100) o de manera relativa respecto al ancho de la ventana del navegador usando porcentajes (por ejemplo width="90%". Es más que recomendable usar este último sistema de manera que obtengamos un resultado apropiado independientemente del tamaño que cada usuario quiera dar a la ventana de su navegador.
Estos atributos pueden ser usados conjuntamente para combinar sus efectos. En la figura 3.5 podemos ver el efecto de cada uno por separado en Explorer junto con los valores empleados en cada caso.
Figura 3.5. Con los nuevos atributos de la etiqueta <hr> podemos controlar el ancho, grosor alineamiento y sombra de la línea horizontal.
La etiqueta <blockquote>... </blockquote>
Otra etiqueta relacionada con el formato de párrafos en HTML es <blockquote>, que consta de una instrucción de inicio y una de fin y que indica que el párrafo que encierra es un texto parafraseado. Al usar esta etiqueta el navegador mostrará el texto en u nuevo párrafo con márgenes a la izquierda y a la derecha. En la figura 3.6 puede verse un uso típico de esta etiqueta.
No abusar de las líneas horizontales
Es conveniente no usar mucho las líneas horizontales, limitándolas al comienzo y fin de la página. La razón de esto es que las líneas en medio de la página dificultan la lectura de esta. Si se desea separar secciones un espacio vertical del tamaño adecuado es más efectivo.
Figura 3.6. La etiqueta <blockquote> es usada para insertar bloques de texto que citan a otro autor. Los navegadores suelen introducir un sangrado en este texto.
http://www.wikilearning.com/imagescc/9708/fig2-6.png
Que se corresponde con el código:
Que se corresponde con el código:
Mi poema favorito es aquel de Federico García Lorca que reza:
<blockquote>
Mi corazón, como una sierpe<br>
se ha desprendido de su piel,<br>
y aquí la miro entre mis dedos<br>
llena de heridas y de miel<br>
</blockquote>
La etiqueta <address>... </address>
Muy relacionada con la anterior, es la etiqueta <address>, que en inglés significa dirección. Esta etiqueta está compuesta, igualmente, por dos instrucciones y se usa para incluir información sobre el autor de una página WEB o elementos relacionados. Puede encontrarse un ejemplo de su uso en las coletillas existentes al final de muchas páginas en las que se incluye información variada para el usuario como puede ser, además del autor, la fecha de la última modificación, la fecha actual, la URL de la página, etc. como se muestra en la figura 3.7.
Figura 3.7. En esta página se observa como al final de la página se han incluido datos de los autores y de la página. Para ello se ha usado la etiqueta <address>.
La etiqueta <center>... </center>
Acabamos de ver una serie de etiquetas que permiten cambiar de línea, crear distintos tipos de párrafos o insertar líneas que les separen. También hemos visto que alguna de las etiquetas utilizadas tienen el atributo 'align' que permite indicar el alineamiento.
En ocasiones puede ser muy útil indicar que algún texto, imagen o algún otro elemento de la página debía ser centrado. Sin embargo no todas las etiquetas tienen el atributo 'align'. La solución es emplear una nueva etiqueta: center. Ésta está compuesta por una instrucción de inicio y una de fin de manera que todo lo que quedaba entre ellas, fuese lo que fuese, estuviese centrado. Por ejemplo en el ejemplo del verso de Lorca podemos centrarlo escribiendo:
Mi poema favorito es aquel de Federico García Lorca que reza:
<center>
<blockquote>
Mi corazón, como una sierpe <br>
se ha desprendido de su piel,<br>
y aquí la miro entre mis dedos<br>
llena de heridas y de miel <br>
</blockquote>
</center>
Y el resultado obtenido hubiese sido el de la figura 3.8
Figura 3.8. Con la etiqueta <center> es posible centrar cualquier elemento de nuestra página como por ejemplo el verso de Lorca de la figura 3.6.
Actualmente existen alternativas mejores que la etiqueta center para especificar el alineamiento. En particular la etiqueta div y las hojas de estilo en cascada que serán tratadas a lo largo de este curso.
Bueno No se cuanto se alarga el post así que lo dejo hasta aquí y despues sigo con la 2da parte.
COPY/PASTE