INSTITUCIÓN DE CAPACITACIÓN FUTUROMATERIAL EDUCATIVO AÑO 2012TECNOLOGÍA E INFORMÁTICAJOHN FREDY ORTIZ- Introducción al len...
Para comenzar tan sólo necesitas un editor de texto para escribir las páginas y unnavegador para visualizarlas.   El edito...
- Estructura de una página web.Toda página Web tiene una estructura que permite al programador saber de antemano qué tipod...
dentro del buffer TextBuffer. Las tablas de etiquetas de texto TextTagTable se puedenusar en más de un buffer de texto par...
Escritura pango.STRETCH_CONDENSED.                Lectura /size                      Tamaño de fuente en unidades Pango.  ...
entiendes este parámetro, probablemente no lo necesitas.                    Lectura /tabs                          Tabulac...
indent-set                                            Lectura / Escriturastrikethrough-set                                ...
tag = table.lookup(name)Este método devuelve la etiqueta tag en la tabla que tenga el nombre name o None si no hayninguna ...
Imagen de fondo: background. En otras ocasiones no se necesita que la pagina tenga uncolor solo de fondo, sino que tenga u...
Color de texto: text. Una ves tenemos el fondo definido, tendremos que predefinir ahora elcolor del texto de nuestra web. ...
- Etiquetas para listas (lista ordenada, con viñetas, de definición)Junto con los párrafos y los encabezados, las listas s...
Menús.       Usadas con párrafos cortos.       Listas de directorio.Pronto sabremos como crear cada una de ellas y cuando ...
El último paso, que ya hemos anticipado en este ejemplo, será cerrar la lista, para lo cualusaremos la instrucción de fin ...
Dentro de estas etiquetas insertaremos cada elemento con la etiqueta <LI>. Veamos unejemplo ligeramente más completo que e...
1.3. Listas ordenadasEste tipo de listas numera los elementos de lista en el orden en el que se han introducido enel códig...
Un buen equipo adaptado a las nuevas tecnologías consta de:         <OL>         <LI>CPU rápida         <LI>Impresora a co...
Figura 4.7. En el caso de las listas numeradas la diferencia entre la visualización conLynx y con Explorer es menor.1.4. L...
En la figura 4.9 se muestra la misma vista con el navegador Lynx.- TablasEl modelo de tablas de HTML permite a los autores...
cuerpo independientemente de las secciones de cabecera y pie. Cuando se imprimen tablaslargas, se puede repetir en cada pá...
buena conexión o si es un poco impaciente. Por ello es recomendable siempre optimizar lasimágenes para Internet, haciendo ...
podrán siempre saber de qué se trata el gráfico y eventualmente cambiar a modo conimágenes para visualizarla.Además, deter...
De esta forma podemos recuadrar nuestra imagen si lo deseamos. Es particularmente útilcuando deseamos eliminar el borde qu...
- Vínculos o enlaces (dentro de la página, a otra página, a páginas remotas)Los vínculos son una parte vital del HTML y to...
VistaNota el cierre " />" utilizado en tags vacíos para lograr la compatibilidad con XHTML.Cuando utilizamos texto como co...
de los marcos afirman la inutilidad de subdividir ulteriormente las páginas web, las cuales, en últimainstancia, pueden re...
N3.0b color del borde           <FRAME                                      BORDERCOLOR="#$$$$$$">               N2.0   co...
Próxima SlideShare
Cargando en…5
×

Unidad 1 ciclo 6

599 visualizaciones

Publicado el

Publicado en: Educación
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
599
En SlideShare
0
De insertados
0
Número de insertados
395
Acciones
Compartido
0
Descargas
3
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Unidad 1 ciclo 6

  1. 1. INSTITUCIÓN DE CAPACITACIÓN FUTUROMATERIAL EDUCATIVO AÑO 2012TECNOLOGÍA E INFORMÁTICAJOHN FREDY ORTIZ- Introducción al lenguaje HTML (que es el lenguaje HTML, que se necesita,primera página, como se guarda)¿Qué es el HTML? El HTML ( HiperTextMarkupLanguage ) es el lenguaje utilizado para representardocumentos en la WWW (World Wide Web). Además de texto normal incluye también,elementos multimedia (gráficos, vídeo, audio) y existen enlaces (links) que permiten saltara otras partes del documento o a otro sitio cualquiera de Internet. Otra característica muy importante de este lenguaje es que es portable, es decir, sepueden visualizar las páginas con cualquier sistema operativo y, por supuesto tambiéncrearlas. En la actualidad (noviembre 1999), Netscape y Microsoft siguen sin ponerse de acuerdoen el estándar del lenguaje. Microsoft ha asumido las directrices del ww3, pero no asíNetscape, que implementa etiquetas propias, de modo que las páginas no se visualizan igualen el Navigator y en el Explorer. Las etiquetas constituyen la filosofía de este lenguaje. Por medio de ellas se puedencontrolar los elementos tipográficos del texto: tipo, color y tamaño de las fuentes, el estilo (negrita, cursiva, etc ), así como también la inclusión de tablas, listas, formularios, lainserción de fotos, sonidos, fondos, los enlaces mencionados anteriormente. etc. Las etiquetas se pueden modificar por medio de sus atributos, éstos son del tipoatributo="valor" y se colocan detrás del nombre de la etiqueta El nombre de la etiqueta y sus atributos se colocan entre los símbolos < y > ynormalmente se usan dos, una de inicio y otra final, para conseguir el efecto deseado. Por ejemplo si escribimos<FONT COLOR="#ff0000" size="2">El texto se verá rojo y en tamaño un poco menor delo normal </font> Se verá como El texto se verá rojo y en tamaño un poco menor de lo normal El uso de estas etiquetas, y por ende el aprendizaje del HTML, no es difícil.Precisamente el objetivo de esta pequeña guía es servir de introducción y referencia de lascaracterísticas más usadas del HTML¿Cómo empiezo a escribir HTML?
  2. 2. Para comenzar tan sólo necesitas un editor de texto para escribir las páginas y unnavegador para visualizarlas. El editor no debe formatear el texto. Usa el Bloc de notas ( Notepad ) en Windows 95 o98. Se carga muy rápido y además es el programa que se abrirá por defecto desde elnavegador. Las etiquetas y sus atributos se pueden escribir en mayúsculas o minúsculas. El lenguajeignora, también, los espacios en blanco seguidos, donde sólo cuenta uno de ellos. Una vez que hayas escrito una página, guárdala en un fichero con extensión .htm o .html.Cuando hagas doble click sobre él se abrirá el navegador y te mostrará la página. Para ver el contenido de los ficheros anteriores (los acabados en htm o html ) con el Blocde notas puedes crear un acceso directo al mismo en la carpeta "SendTo" del directorio"Windows" y te aparecerá como opción en "Enviar a " cuando hagas click con el botóndereho del ratón sobre el fichero. Otro modo es abrir el fichero con el Explorer y luego, con el cursor colocado sobre eltexto (no sobre imágenes) pulsar el botón derecho y elegir "Ver código fuente". En elComunicator también se puede "Ver el origen" pero en un visor propio que no permitemodificar el texto Ten cuidado con el nombre de los ficheros, pues los servidores donde se alojan laspáginas sí distinguen mayúsculas de minúsculas y no es lo mismo Inicio.htm que inicio.htm¿Qué necesito para crear una página Web? Lo primero que debes tener claro es qué contenidos va a tener tu página. Por ejemplo, sivas a hacer una página sobre tu Instituto, ¿qué vas a poner?: las enseñanzas que se cursan,los proyectos que estáis llevando a cabo, un poco de historia del pueblo o ciudad donde estéenclavado el centro, las actividades extraescolares que realiza el centro, etc. Una vez decidido esto ¿qué necesitas?. De entrada, el doble de tiempo que calcules pararealizarla. Además necesitarás: Un navegador. Aunque hay más, parece que el Explorer y el Netscape son los mejores. Un editor de Html (que bien puede ser el que viene con los navegadores) o bienescribir todo el código a mano. Hacer las fotos que vas a poner y escanearlas ( esto suele llevar bastante tiempo si nose ha hecho antes) Puedes hacerlo en el CPR. Un programa gráfico para retocar las imágenes, mira en la página de imágenes. Espacio en un servidor que albergue la página. Si tienes cuenta en el PNTIC puedessubir unos 250 KB, que son suficientes para una página sencilla Un programa para subir la página al servidor, puede ser el WS_FTP que localizarás enhttp://www.ipswitch.com Dar de alta la página en algunos buscadores (Alta Vista, Olé, etc) y también en elPNTIC si la página está relacionada con la educación. Si no haces esto, solamente podránvisitar tu página quienes conozcan la dirección exacta. Y sobretodo bastante tiempo para el mantenimiento de la página: comprobar los enlaces,actualizar las fotos, el contenido, etc.
  3. 3. - Estructura de una página web.Toda página Web tiene una estructura que permite al programador saber de antemano qué tipode información necesita introducir. Esto ayuda a que la página que diseña sea claramente legible yse pueda modificar más fácilmente. Si una página Web es complicada en su diseño, habrá muypocos que sepan dar el mantenimiento adecuado. Abajo se muestra la estructura lógica de unapágina Web.<HTML><HEAD><TITLE>Primerapágina</TITLE></HEAD><BODY>.........</BODY></HTML>Estas líneas son permanentes en una página Web. Siempre van a estar presentes noimportando qué tan corta o tan larga sea la página y el contenido.La primera instrucción <HTML> indica al explorador de Internet que ahí comienza unapágina Web. La siguiente instrucción <HEAD> indica el encabezado de la página, es decirel área de la barra de título. <TITLE> indica el título de la página propiamente dicho.<BODY> es una instrucción que indica al explorador de Internet que ahí empieza el área decontenido de la página (es decir el cuerpo de la página).En el lenguaje HTML, muchas instrucciones se cierran con el signo / (diagonal) paraindicar al programa que las propiedades aplicadas con esa instrucción se terminan ahídonde se pone el signo diagonal. Si el signo de cierre (/) no se aplica convenientemente, elprograma seguirá aplicando las propiedades de la instrucción anterior a todas las líneasinferiores, hasta que se encuentre otra instrucción que modifique las propiedades actuales.Las etiquetas de texto TextTags especifican atributos que se pueden aplicar a un rango detexto en un buffer de texto. Cada buffer de texto TextBuffer tiene una tabla de etiquetas detexto TextTagTable que contiene las etiquetas de texto TextTags que se pueden aplicar
  4. 4. dentro del buffer TextBuffer. Las tablas de etiquetas de texto TextTagTable se puedenusar en más de un buffer de texto para ofrecer estilos de texto consistentes.13.6.1. Etiquetas de TextoLas TextTags (Etiquetas de Texto) pueden tener nombre o ser anónimas. Una TextTag secrea usando la función:tag = gtk.TextTag(name=None)Si el name (nombre) no se especifica o si es None la tag (etiqueta) será anónima. LasTextTags también se pueden crear usando el método de TextBuffercreate_tag() quetambién te permite especificar los atributos y añade la etiqueta a la tabla de etiquetas delbuffer (veáse la subsección TextBuffer).Los atributos que pueden aparecer en una TextTag son: Lectura /name Nombre de la etiqueta de texto. None si es anónima. Escriturabackground Escritura Color de fondo como una cadena de textoforeground Escritura Color de frente como una cadena de textobackground- Lectura / Color de fondo como un GdkColorgdk Escrituraforeground- Lectura / Color de frente como un GdkColorgdk Escriturabackground- Lectura / Bitmap a usar como una máscara cuando se dibuje el texto destipple Escritura fondoforeground- Lectura / Bitmap a usar como una máscara cuando se dibuje el texto destipple Escritura frente Lectura / Descripción de la fuente como una cadena de texto, por ejemplo,font Escritura "Sans Italic 12" Lectura /font-desc Descripción de la feunte como un objeto PangoFontDescription Escritura Lectura / Nombre de la familia de la fuente, por ejemplo, Sans, Helvetica,family Escritura Times, Monospace Lectura / Estilo de la fuente como un PangoStyle, por ejemplo,style Escritura pango.STYLE_ITALIC. Lectura / Variante de la fuente como un PangoVariant, por ejemplo,variant Escritura pango.VARIANT_SMALL_CAPS. Lectura / Peso de la fuente como un entero, mira los valores predefinidosweight Escritura en PangoWeight; por ejemplo, pango.WEIGHT_BOLD.stretch Lectura / Estrechamiento de la fuente como un PangoStretch, por ejemplo,
  5. 5. Escritura pango.STRETCH_CONDENSED. Lectura /size Tamaño de fuente en unidades Pango. Escritura Lectura /size-points Tamaño de fuente en puntos Escritura Tamaño de fuente como un factor de escala relativo al tamaño de fuente predeterminado. Esta propiedad se adapta a los cambios Lectura /scale en el tema, etc, por tanto se recomienda su uso. Pango tiene Escritura algunos valores predefinidos tales como pango.SCALE_X_LARGE.pixels-above- Lectura / Píxeles de espacio blanco por encima de los párrafoslines Escriturapixels-below- Lectura / Píxeles de espacio blanco por debajo de los párrafoslines Escriturapixels-inside- Lectura / Píxeles de espacio blanco entre las líneas de un párrafowrap Escritura Lectura /editable Si el texto puede modificarse por el usuario Escritura Lectura / Si las líneas no se ajustan, se ajustan en limites de palabra o sewrap-mode Escritura ajustan en limites de caracteres Lectura /justification Justificación izquierda, derecha o central Escritura Lectura / Dirección del Texto, por ejemplo, derecha a izquierda odirection Escritura izquierda a derecha Lectura /left-margin Ancho del márgen izquierdo en píxeles Escritura Lectura /indent Cantidad de indentado para los párrafos, en píxeles Escritura Lectura /strikethrough Si hay que tachar el texto Escritura Lectura /right-margin Ancho del márgen derecho en píxeles Escritura Lectura /underline Estilo de subrayado para este texto Escritura Lectura / Desplazamiento del texto por encima de la línea base (porrise Escritura debajo de la línea base si es negativo) en píxelesbackground- Lectura / Si el color de fondo rellena la altura completa de la línea o sólofull-height Escritura la altura de los caracteres marcados Lectura / El idioma en el que está el texto, como un código ISO. Pangolanguage Escritura puede usar esto como una ayuda para visualizar el texto. Si no
  6. 6. entiendes este parámetro, probablemente no lo necesitas. Lectura /tabs Tabulaciones personalizadas para el texto Escritura Lectura /invisible Si el texto está oculto. No implementado en GTK 2.0 EscrituraSe pueden establecer los atributos con este método:tag.set_property(name, value)Donde name es una cadena de texto que contiene el nombre de la propiedad y value es elvalor que se le va a poner.De la misma forma, el valor de un atributo se puede recuperar con el método:value = tag.get_property(name)Ya que la etiqueta no tiene un valor para cada atributo hay una serie de propiedadesbooleanas que indican si el atributo ha sido establecido:background-set Lectura / Escrituraforeground-set Lectura / Escriturabackground-stipple-set Lectura / Escrituraforeground-stipple-set Lectura / Escriturafamily-set Lectura / Escriturastyle-set Lectura / Escrituravariant-set Lectura / Escrituraweight-set Lectura / Escriturastretch-set Lectura / Escriturasize-set Lectura / Escriturascale-set Lectura / Escriturapixels-above-lines-set Lectura / Escriturapixels-below-lines-set Lectura / Escriturapixels-inside-wrap-set Lectura / Escrituraeditable-set Lectura / Escriturawrap-mode-set Lectura / Escriturajustification-set Lectura / Escrituradirection-set Lectura / Escrituraleft-margin-set Lectura / Escritura
  7. 7. indent-set Lectura / Escriturastrikethrough-set Lectura / Escrituraright-margin-set Lectura / Escrituraunderline-set Lectura / Escriturarise-set Lectura / Escriturabackground-full-height-set Lectura / Escrituralanguage-set Lectura / Escrituratabs-set Lectura / Escriturainvisible-set Lectura / EscrituraPor tanto, para obtener el atributo de una etiqueta, primero tienes que comprobar si elatributo ha sido establecido en la etiqueta. Por ejemplo, para obtener un valor correcto dejustificación tienes que hacer algo así como:iftag.get_property("justification-set"): justification = tag.get_property("justification")La prioridad predeterminada de una etiqueta es el orden en el que se añade a laTextTagTable. Las etiquetas con prioridad más alta tienen preferencia si hay múltiplesetiquetas para establecer el mismo atributo para un rango de texto. La prioridad se puedeobtener y fijar con los métodos:priority = tag.get_priority()tag.set_priority(priority)La prioridad de una etiqueta debe estar entre 0 y uno menos del tamaño de laTextTagTable.Tablas de Etiquetas de TextoUna TextTagTable (Tabla de Etiquetas de Texto) se crea al crear un TextBuffer .También se puede crear una TextTagTable con la función:table = TextTagTable()Se puede añadir una TextTag (Etiqueta de Texto) a una TextTagTable usando el método:table.add(tag)La etiqueta tag no puede estar ya en la tabla y no puede tener el mismo nombre que otraetiqueta en la tabla.Es posible buscar una etiqueta en una tabla con el método:
  8. 8. tag = table.lookup(name)Este método devuelve la etiqueta tag en la tabla que tenga el nombre name o None si no hayninguna etiqueta con ese nombre.Se puede borrar una TextTag de una TextTagTable con el método:table.remove(tag)El tamaño de la TextTagTable se puede consultar con el método:size = table.get_size()- Etiqueta body (fondo de página, ubicación de archivos)Todo lo que necesitamos que se vea en nuestra pagina web deberemos escribirlo dentro dela etiqueta body. Eso es lo que llamamos el “cuerpo” del documento. Es la parte visible. Laetiqueta body también podemos personalizarla para darle el aspecto que nosotros deseemos.Esta personalización la conseguimos a través de una serie de parámetros que a continuaciónle presentaremos.Color de fondo: bgcolor. El primer parámetro que debe conocer es el del color de fondo,el “bgcolor”. A través de este parámetro podremos definir el color de fondo quenecesitamos que tenga nuestra pagina. Si necesitamos que nuestra pagina quede con unfondo rojo debemos escribir el color en ingles en este caso “red” o con el código de colorasí:<body bgcolor="#ff0000"></body>oasi<bodybgcolor="red"></body>
  9. 9. Imagen de fondo: background. En otras ocasiones no se necesita que la pagina tenga uncolor solo de fondo, sino que tenga una imagen. En este caso debería indicarlo con laetiqueta “background”. La etiqueta quedaría de la siguiente manera:<bodybackground="URL"></body>Donde dice “URL” deberemos escribir la dirección de la imagen que necesitemos que seanuestro fondo. Una cosa muy importante que debe saber es que si la imagen no essuficientemente grande para rellenar toda la pagina la imagen se repetiría tanto a lo anchocomo a lo largo hasta llenar todo el espacio.
  10. 10. Color de texto: text. Una ves tenemos el fondo definido, tendremos que predefinir ahora elcolor del texto de nuestra web. Indicar al navegador de que color necesitamos que seanuestro texto. Esto lo definiremos con el parámetro “text”. Como ejemplo vamos a ponerque queremos que nuestro texto sea negro, con lo que escribiremos lo siguiente:<bodytext="#000000"></body>Margenes: leftmargin, topmargin, rightmargin y bottommargin. Ya sabemos de quecolor sera nuestro fondo y nuestro texto, pero también podemos predefinir los margenes denuestra pagina web para que nos quede mucho mejor. Porque no queremos que nuestrotexto se quede muy pegado a los margenes.Para especificar los margenes utilizaremos el parámetro “margin”, con su correspondienteindicación delante. Asi 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 margenes sean de 10 pixeles por todasparte escribimos lo siguiente:<body leftmargin="10px" topmargin="10px" rightmargin="10px"bottommargin="10px"></body>Color de links: link, alink y vlink. En body también podemos definir el color de losvínculos de nuestra pagina, definir el color con el que se mostraran los links. Aqui debemosdiferenciar 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 visitado (con laetiqueta “vlink”).<body link=""#ff0000 alink="#ff0000" vlink="#0000ff"></body>
  11. 11. - Etiquetas para listas (lista ordenada, con viñetas, de definición)Junto con los párrafos y los encabezados, las listas son uno de los elementos HTML máscomúnmente usados en las páginas web. Tras este capítulo sabremos, no sólo crear listas,sino crear varios estilos de estas, una para cada ocasión. Y no tardaremos en ponerlas enpráctica ya que al final del capítulo crearemos la segunda página de la cual podemos ver unanticipo en la figura 4.1.Figura 4.1. En esta figura podemos apreciar la presentación de la segunda práctica delcurso que realizaremos al final del capítulo.Una lista, o listado, es una enumeración de dos o más elementos y suelen disponerse de talforma que se facilite la distinción entre ellos.El lenguaje HTML define los siguientes tipos de listas: Numerada u ordenada. No ordenada. Listas de glosario o de definición.
  12. 12. Menús. Usadas con párrafos cortos. Listas de directorio.Pronto sabremos como crear cada una de ellas y cuando es conveniente usar una u otras, ycomprobaremos, una vez más, la gran sencillez del lenguaje HTML una vez nos hemoshabituado a él.1.1. Etiquetas necesarias para crear listasLa forma de crear listas difiere ligeramente de los elementos HTML vistos hasta ahora, yaque consta de dos pasos. Primero hay que definir el tipo de lista y después deben insertarsecada uno de los elementos de lista.Al crear una lista deberemos indicar su inicio y su fin. Para empezar la lista usaremos lainstrucción de inicio de la etiqueta de esa lista. Existe una etiqueta para cada tipo distinto delista, por ejemplo, para crear una lista no ordenada será necesario usar la etiqueta UL (suinstrucción de inicio será <UL>). Una vez hemos abierto la lista deberemos insertar, comohemos dicho antes, cada uno de los elementos de lista. Para ello usaremos una nuevaetiqueta (o dos en algún caso) que dependerá del tipo de lista. En el caso de la lista noordenada los elementos se introducen con la etiqueta de una única instrucción LI, porejemplo: Yo practico: <UL> <LI>Fútbol <LI>Baloncesto <LI>Tenis <LI>etc. </UL>En la figura 4.2 podemos ver como muestra Internet Explorer este códigoFigura 4.2. Como aperitivo mostramos una lista no numerada en la que ya se puedenapreciar las características fundamentales que tienen en HTML.
  13. 13. El último paso, que ya hemos anticipado en este ejemplo, será cerrar la lista, para lo cualusaremos la instrucción de fin de UL: </UL>.Y a todo esto, ¿dónde está la diferencia?. Pues bien, la diferencia es la etiqueta LI (En otraslistas se usará también LI o alguna etiqueta similar, como luego veremos). La etiqueta ULno tiene ningún significado por sí sola, necesita a LI. Y por otro lado LI no puede ser usadacomo una etiqueta independiente sino que debe ir dentro de UL. Por esta razón enocasiones se suele llamar a LI subetiqueta. Algunos navegadores permiten el uso de <LI>fuera de ninguna lista como si se tratara de una etiqueta independiente. Estos navegadores mostrarán el elemento de lista como si fuese perteneciese a una lista no numerada pero sin sangrado. Sin embargo esta forma de usar <LI>no está admitida por el estándar y por tanto no es recomendable si queremos que todos los navegadores entiendan nuestras intenciones.Antes de comenzar haremos un comentario más. La etiqueta <LI> tiene instrucción de fin(</LI>) que delimita el final del elemento de lista actual, pero es opcional usarla o no. Sino se hace se considera que el elemento termina cuando empieza el siguiente o cuandotermina la lista. De hecho algunos navegadores al interpretar el código HTML ignorancompletamente esta instrucción y sólo entienden que el elemento de lista ha terminadocuando se empieza otro o se acaba la lista.Vista la teoría nos adentramos en los distintos tipos de listas en las que veremos variosejemplos prácticos.1.2. Listas no ordenadasProbablemente el tipo de listas más usados en las páginas web son las listas no ordenadas.Como hemos adelantado antes a modo de ejemplo, este tipo de lista queda delimitada por laetiqueta <UL>...</UL> (UL proviene de UnorderedList, que significa lista no ordenada).
  14. 14. Dentro de estas etiquetas insertaremos cada elemento con la etiqueta <LI>. Veamos unejemplo ligeramente más completo que el anterior: Mi ordenador tiene las siguientes características: <UL> <LI>Procesador Pentium 166 <LI>CD-ROM 8x <LI>Tarjeta de sonido 16 bits <LI>Tarjeta de vídeo con 2 Mb </UL>En la figura 4.3 podemos ver como muestra esta lista el navegador Explorer. Vemos queestá ligeramente sangrada hacia la derecha y con un símbolo gráfico para distinguir cadaelemento de lista, este símbolo recibe el nombre de viñeta.Figura 4.3. Los elementos de las listas no numeradas van precedidos de una viñeta. EnExplorer esta viñeta es habitualmente un punto grande.En la figura 4.4 vemos como a falta de viñetas gráficas Lynx diferencia cada elemento conun asterisco (*).Figura 4.4. Lista no ordenada en Lynx. Cada uno de los elementos de lista comienzacon un asterisco simulando a los símbolos gráfico que usan Netscape o Explorer.
  15. 15. 1.3. Listas ordenadasEste tipo de listas numera los elementos de lista en el orden en el que se han introducido enel código HTML. La numeración se realiza con números empezando por el 1. Las últimas extensiones de HTML permiten elegir entre distintos tipos de numeración para las listas ordenadas. Estas extensiones serán cubiertas en un capítulo posterior.Este tipo de listas queda delimitado por la etiqueta <OL>...</OL>(OL: OrderedList, Listaordenada), y cada elemento se inserta, al igual que en el caso de listas no ordenadas, con laetiqueta <LI>.En la figura 4.5 vemos un ejemplo de uso de listas ordenadasFigura 4.5. En las listas ordenadas cada uno de los elementos de lista aparecennumerados y sangrados hacia la derecha.que se corresponde con el siguiente código:
  16. 16. Un buen equipo adaptado a las nuevas tecnologías consta de: <OL> <LI>CPU rápida <LI>Impresora a color de buena definición. <LI>Altavoces y cámara de vídeo. <LI>Módem de velocidad 28K o superior. </OL>El navegador automáticamente numera los elementos de lista. Si en algún momentoqueremos insertar un nuevo elemento entre los existentes usando, de nuevo, <LI>, se realizaautomáticamente una renumeración de los elementos de la lista. Tal y como podemos veren la figura 4.6.Figura 4.6. Cuando insertamos un nuevo elemento de lista en una lista ordenada loselementos siguientes son automáticamente renumerados.que se corresponde con este código: Un buen equipo adaptado a las nuevas tecnologías consta de: <OL> <LI>CPU rápida <LI>Impresora a color de buena definición. <LI>Altavoces y cámara de vídeo. <LI>Escaner color <LI>Módem de velocidad 28K o superior. </OL>En el navegador Lynx las listas numeradas se muestran como vemos en la figura 4.7.
  17. 17. Figura 4.7. En el caso de las listas numeradas la diferencia entre la visualización conLynx y con Explorer es menor.1.4. Listas de glosarioEste tipo de listas es usado, como su nombre indica, para crear glosarios, es decir listas dedefiniciones o de descripciones. El principio y final de este tipo de listas se delimitan con laetiqueta <DL>...</DL > (DL: DefinitionList, Lista de definición). La inserción de elementoes ligeramente distinta a la del resto de listas ya que no se usa la etiqueta <<LI>>. Esto esasí porque en este caso cada uno de los elementos de lista está compuesta de dos partes: La palabra que queremos definir: para insertar la palabra usaremos la etiqueta <DT> que proviene de DefinitionTerm (Término de definición). Esta nueva etiqueta funciona de forma muy similar a <LI> y la instrucción de fin (</DT>) es igualmente optativa. La definición o descripción de esa palabra: una vez indicada la palabra es hora de poner su definición. Para ello usamos otra nueva etiqueta: <DD> cuyas siglas significan DefinitionDescriptión (parte de la definición que contiene la descripción). La definición suele ser un párrafo y será mostrado por los navegadores sangrado con respecto al texto anterior.En la figura 4.8 podemos ver un ejemplo de listas de glosario vistas con Internet Explorer.Figura 4.8. Las listas de glosario constan de dos partes la palabra de definición y lapropia de definición que es mostrada como un nuevo párrafo con sangrado.
  18. 18. En la figura 4.9 se muestra la misma vista con el navegador Lynx.- TablasEl modelo de tablas de HTML permite a los autores organizar datos -- textos, textopreformateado, imágenes, vínculos, formularios, campos de formularios, otras tablas, etc. --en filas y en columnas de celdas.Cada tabla puede tener un título asociado (ver el elemento CAPTION) que proporciona unadescripción corta del propósito dela tabla. Se puede proporcionar también una descripción más larga (por medio del atributosummary) para el provecho de las personas que utilicen agentes de usuario basados enBraille o en voz.Las filas de una tabla pueden agruparse en secciones de encabezado, pie y cuerpo, (pormedio de los elementos THEAD, TFOOT y TBODY, respectivamente). Los grupos de filasconllevan información estructural adicional y los agentes de usuario los pueden representarde modo que se enfatice esta estructura. Los agentes de usuario pueden sacar partido de ladivisión entre encabezado, cuerpo y pie para permitir el desplazamiento de las secciones de
  19. 19. cuerpo independientemente de las secciones de cabecera y pie. Cuando se imprimen tablaslargas, se puede repetir en cada página la información de cabecera y pie que contienen losdatos de la tabla.Los autores también pueden agrupar columnas para proporcionar información estructuraladicional de la que pueden sacar partido los agentes de usuario. Además de esto, los autorespueden declarar propiedades de columnas al comienzo de la definición de la tabla (pormedio de los elementos COLGROUP y COL) de tal modo que se permita a los agentes deusuario representar la tabla incrementalmente en lugar de tener que esperar a que lleguentodos los datos de la tabla antes de empezar a representarla.Las celdas de la tabla puede contener o bien información de "encabezado" (ver el elementoTH) o de "datos" (ver el elemento TD). Las celdas pueden ocupar varias filas y columnas.El modelo de tablas de HTML 4 permite a los autores dar un rótulo a cada celda de modoque los agentes de usuario no visuales puedan comunicar más fácilmente información deencabezado de la celda al usuario. Estos mecanismos no sólo ayudan considerablemente alos usuarios con discapacidades visuales, sino que además permiten manejar tablas anavegadores multi-modo sin cables con posibilidades de representación limitadas (p.ej.,teléfonos con soporte web).No deberían usarse tablas con la única finalidad de organizar la presentación de loscontenidos de un documento (es decir, de crear el "layout"), ya que esto puede ocasionarproblemas cuando se represente en un medio no visual. Además, al incluir gráficos, estastablas pueden forzar a los usuarios a hacer desplazar horizontalmente la pantalla para veruna tabla diseñada en un sistema con una pantalla más grande. Para minimizar estosproblemas, los autores deberían usar hojas de estilo en lugar de tablas para organizar lapresentación.- ImágenesSin duda uno de los aspectos más vistosos y atractivos de las páginas web es el grafismo. Laintroducción en nuestro texto de imágenes puede ayudarnos a explicar más fácilmente nuestrainformación y darle un aire mucho más estético. El abuso no obstante puede conducirnos a unasobrecarga que se traduce en una distracción para el navegante, quien tendrá más dificultad enencontrar la información necesaria.El uso de imágenes también tiene que ser realizado con cuidado porque aumentan el tiempode carga de la página, lo que puede ser de un efecto nefasto si nuestro visitante no tiene una
  20. 20. buena conexión o si es un poco impaciente. Por ello es recomendable siempre optimizar lasimágenes para Internet, haciendo que su tamaño en bytes sea lo mínimo posible, parafacilitar la descarga, pero sin que ello comprometa mucho su calidad.En este capitulo no explicaremos como crear ni tratar las imágenes, únicamente diremosque para ello se utilizan aplicaciones como Paint Shop Pro, Photoshop o Gimp. Tampocoexplicaremos las particularidades de cada tipo de archivo: GIF, JPG o PNG y la forma deoptimizar nuestras imágenes. Un capitulo posterior al respecto será dedicado a estemenester: Formatos gráficos para páginas web.Las imágenes son almacenadas en forma de archivos, principalmente GIF (para dibujos) oJPG (para fotos). Estos archivos los podemos obtener desde diversas vías, como porejemplo nuestra cámara digital, aunque también pueden ser creados por nosotros mismoscon algún editor gráfico o pueden ser descargados gratuitamente en sitios webespecializados.Así pues, en estos primeros capítulos nos limitaremos a explicar como insertar y alineardebidamente en nuestra página una imagen ya creada.La etiqueta que utilizaremos para insertar una imagen es <img> (image). Esta etiqueta noposee su cierre correspondiente y en ella hemos de especificar obligatoriamente el paraderode nuestro archivo gráfico mediante el atributo src (source).La sintaxis queda entonces de la siguiente forma:<imgsrc="camino hacia el archivo">Para expresar el camino, lo haremos de la misma forma que vimos para los enlaces. Lasreglas siguen siendo las mismas, lo único que cambia es que, en lugar de una páginadestino, el destino es un archivo gráfico.Aparte de este atributo, indispensable obviamente para la visualización de la imagen, laetiqueta <img> nos propone otra serie de atributos de mayor o menor utilidad, que listamosa continuación:Atributo altDentro de las comillas de este atributo colocaremos una brevísima descripción de la imagen. Estaetiqueta no es indispensable pero presenta varias utilidades.Primeramente, durante el proceso de carga de la página, cuando la imagen no ha sidotodavía cargada, el navegador mostrara esta descripción, con lo que el navegante se puedehacer una idea de lo que va en ese lugar.Esto no es tan trivial si tenemos en cuenta que algunos usuarios navegan por la red con unaopción del navegador que desactiva el muestreo de imágenes, con lo que tales personas
  21. 21. podrán siempre saber de qué se trata el gráfico y eventualmente cambiar a modo conimágenes para visualizarla.Además, determinadas aplicaciones para discapacitados o teléfonos vocales que nomuestran imágenes ofrecen la posibilidad de leerlas por lo que nunca esta de más pensar enestos colectivos.En general podemos considerar como aconsejable el uso de este atributo salvo paraimágenes de poca importancia y absolutamente indispensable si la imagen en cuestión sirvede enlace.Atributos height y widthDefinen la altura y anchura respectivamente de la imagen en píxeles.Todos los archivos gráficos poseen unas dimensiones de ancho y alto. Estas dimensionespueden obtenerse a partir del propio diseñador grafico o bien haciendo clic con el botónderecho sobre la imagen vista por el navegador para luego elegir propiedades sobre el menúque se despliega.El hecho de explicitar en nuestro código las dimensiones de nuestras imágenes ayuda alnavegador a confeccionar la página de la forma que nosotros deseamos antes incluso de quelas imágenes hayan sido descargadas.Así, si las dimensiones de las imágenes han sido proporcionadas, durante el proceso decarga, el navegador reservara el espacio correspondiente a cada imagen creando unamaquetación correcta. El usuario podrá comenzar a leer tranquilamente el texto sin que estese mueva de un lado a otro cada vez que una imagen se cargue.Además de esta utilidad, el alterar los valores de estos dos atributos, es una formainmediata de redimensionar nuestra imagen. Este tipo de utilidad no es aconsejable dadoque, si lo que pretendemos es aumentar el tamaño, la perdida de calidad de la imagen serámuy sensible. Inversamente, si deseamos disminuir su tamaño, estaremos usando unarchivo más grande de lo necesario para la imagen que estamos mostrando con lo queaumentamos el tiempo de descarga de nuestro documento innecesariamente.Es importante hacer hincapié en este punto ya que muchos debutantes tienen esa malacostumbre de crear gráficos pequeños redimensionando la imagen por medio de estosatributos a partir de archivos de tamaño descomunal. Hay que pensar que el tamaño de unaimagen con unas dimensiones de la mitad no se reduce a la mitad, sino que resulta seraproximadamente 4 veces inferior.Atributo borderDefinen el tamaño en píxeles del cuadro que rodea la imagen.
  22. 22. De esta forma podemos recuadrar nuestra imagen si lo deseamos. Es particularmente útilcuando deseamos eliminar el borde que aparece cuando la imagen sirve de enlace. En dichocaso tendremos que especificar border="0".Atributos vspace y hspaceSirven para indicar el espacio libre, en pixeles, que tiene que colocarse entre la imagen y los otroselementos que la rodean, como texto, otras imágenes, etc.Atributo lowsrcCon este atributo podemos indicar un archivo de la imagen de baja resolución. Cuando elnavegador detecta que la imagen tiene este atributo primero descarga y muestra la imagen debaja resolución (que ocupa muy poco y que se transfiere muy rápido). Posteriormente descarga ymuestra la imagen de resolución adecuada (señalada con el atributo src, que se supone queocupará más y será más lenta de transferir).Este atributo está en desuso, aunque supone una ventaja considerable para que la descargainicial de la web se realice más rápido y que un visitante pueda ver una muestra de laimagen mientras se descarga la imagen real.Truco: Utilizar imagenes como enlacesNi que decir tiene que una imagen, lo mismo que un texto, puede servir de enlace. Vista laestructura de los enlaces podemos muy fácilmente adivinar el tipo de código necesario:<a href="archivo.html"><imgsrc="imagen.gif"></a>Ejemplo prácticoResultará obvio para los lectores hacer ahora una página que contenga una imagen varias vecesrepetida pero con distintos atributos. Una de las veces que salga debe mostrarse con su tamaño originar y con un borde de 3 pixeles. En otra ocasión la imagen aparecerá sin borde, con su misma altura y con una anchura superior a la original También mostraremos la imagen sin borde, con su misma anchura y con una altura superior a la original Por último, mostraremos la imagen con una altura y anchura mayores que las originales, pero proporcionalmente igual que antes.
  23. 23. - Vínculos o enlaces (dentro de la página, a otra página, a páginas remotas)Los vínculos son una parte vital del HTML y todo el concepto de World Wide Web.Internet es considerada una red debido a cómo los vínculos conectan piezas separados dedocumentos, basándose en la idea de una simple referencia potenciada por la interactividad.Como resultado, un simple click te lleva del documento referente al mencionado en elvínculo.Un vínculo en un documento HTML puede ser básicamente considerado como unareferencia a otro recurso. Esta referencia establece una relación implícita entre eldocumento referente y el recurso vinculado. Los vínculos pueden ser clasificados comovisuales (ubicados en el contenido del documento) u ocultos (definiendo informaciónrelacional generalizada).El tag HTMLEl elemento HTML a puede ser usado para insertar vínculos dentro del contenido de undocumento. Esto puede ayudar a los autores a recomendar otros recursos relacionados aldocumento actual que los usuarios pueden, generalmente, accesar con un simple click en elcontenido vinculado. El contenido vinculado es simplemente el contenido del elementoHTML a (es decir, la pieza de código HTML que está ubicada entre el tag de apertura y elde cierre). Nota que los vínculos son usualmente representados de manera diferente por losnavegadores para ayudar a los usuarios a reconocerlos.Existen muchas formas de construir un vínculo, pero básicamente un vínculo debe conteneral menos un contenido y la dirección del recurso (definida con el atributo "href"). En elejemplo siguiente definiremos un vínculo básico:CódigoEl <a href="http://www.htmlquick.com/es/reference/tags/a.html">tag HTML a</a> explicadoVistaEn el ejemplo anterior creamos un simple vínculo usando texto como contenido, peropuedes vincular prácticamente cualquier cosa usando el elemento HTML a. En el siguienteejemplo haremos un vínculo con una porción de documento que incluye una imágen ytexto.Código<a href="http://tecnoincaf.webnode.es"><imgsrc=" http://files.tecnoincaf.webnode.es/200000044-b0a85b1a23/200000571.png" alt="Logode INCAF" width="468" height="60" /><br />tag HTML a</a>
  24. 24. VistaNota el cierre " />" utilizado en tags vacíos para lograr la compatibilidad con XHTML.Cuando utilizamos texto como contenido de un vínculo (de ahora en adelante nosreferiremos a este texto como, "texto ancla" o "anchor text") exista una cosa a tomar encuenta: el texto debe describir brevemente (como el elemento HTML title) el contenido delrecurso vinculado. Esto es algo librado a la consideración de cada autor, pero la utilizaciónde textos ancla descriptivos pueden proveer valiosa información a los usuarios y motores debúsqueda (muy importante en la promoción de un sitio).Otra cosa a considerar es que al vincular a un directorio (no a un archivo, por ejemplo,http://www.htmlquick.com) debes agregar siempre una barra al final de la URL (porejemplo, http://www.htmlquick.com/). Aún cuando la mayoría de los navegadores oservidores resuelven automáticamente este problema, es una buena práctica que sumará aun correcto código.El atributo targetEl atributo target permite a los autores decidir dónde se cargará el recurso vinculadomediante el elemento HTML a (por ejemplo, puede ser cargado en una nueva ventana delnavegador, en un "marco" específico si existe un "frameset", o simplemente en la mismaventana). Esto puede resultar útil algunas veces pero también hace al código incompatiblecon el estándar estricto de XHTML. si realmente quieres utilizarlo tendrás que optar por un"Transitional DTD" (en el tag HTML !DOCTYPE).En este ejemplo, mostramos el código para dos vínculos: el primero es abierto en una nuevaventana y el segundo en un marco llamado "principal".Código<a href="http://www.url.com" target="_blank">URL</a><a href="http://www.url.com" target="principal">URL</a>.- Marcos o framesAmados u odiados, útiles o inútiles, excelentes o pésimos, los marcos son instrumentos que formanya parte habitual del web y que los navegadores gestionan hoy día a la perfección. Los detractores
  25. 25. de los marcos afirman la inutilidad de subdividir ulteriormente las páginas web, las cuales, en últimainstancia, pueden resultar poco legibles. Otros, como yo, consideran que los marcos pueden llegara ser muy útiles ya que se evita cargar las mismas imágenes y se mantienen ordenados elcontenido y la estructura del sitio. Naturalmente, abusar de los marcos puede producir comoresultado pésimas impostaciones gráficas, obteniendo un efecto contrario al previsto.Un punto en contra de los marcos es, ciertamente, su incompatibilidad con los programas denavegación gráfica destinados a invidentes, los cuales se bloquean impidiendo la lectura de laspáginas.Una buena solución es crear una versión con marco y una versión sin marco (como esta mismaguía ha hecho).¿Cómo se crean los marcos?Antes de nada, repasemos rápidamente las marcas HTML de gestión de marcos. N2.0 Documento <FRAMESET></FRAMESET> (en lugar de Marco <BODY>) N2.0 altura en filas <FRAMESET (píxeló %) ROWS=,,,></FRAMESET> N2.0 altura en filas <FRAMESET (* = tamaño ROWS=*></FRAMESET> relativo) N2.0 anchura en <FRAMESET (píxeló %) columnas COLS=,,,></FRAMESET> N2.0 anchura en <FRAMESET (* = tamaño columnas COLS=*></FRAMESET> relativo) N3.0b anchura del <FRAMESET BORDER=?> borde N3.0b borde <FRAMESET FRAMEBORDER="yes|no"> N3.0b color del borde <FRAMESET BORDERCOLOR="#$$$$$$"> N2.0 Definición del <FRAME> (contenido de marco cada uno de los recuadros) N2.0 documento que <FRAME SRC="URL"> se debe mostrar N2.0 denominazione <FRAME del frame NAME="***"|_blank|_self| _parent|_top> N2.0 anchura de los <FRAME MARGINWIDTH=?> (margen márgenes izquierdo y derecho) N2.0 altura de los <FRAME MARGINHEIGHT=?> (margen márgenes superior e inferior) N2.0 barra de <FRAME desplazamiento SCROLLING="YES|NO|AUTO"> o no N2.0 no <FRAME NORESIZE> redimensionable N3.0b borde <FRAME FRAMEBORDER="yes|no">
  26. 26. N3.0b color del borde <FRAME BORDERCOLOR="#$$$$$$"> N2.0 contenido en <NOFRAMES></NOFRAMES> (para ausencia de navegadores marco antiguos)- FormulariosLos formularios son una característica del estándar HTML Que permite a los autores recolectarinformación provista por los visitantes. Estos formularios pueden resultar útiles para reunirinformación personal, de contacto, preferencias, opiniones, o de cualquier otro tipo que el autornecesite.Un formulario puede insertarse en un documento HTML a través del elemento HTML form queactuará como contenedor para todos los elementos de entrada. Toda la información recolectadapor un formulario puede ser enviada a un agente procesador (un archivo conteniendo un scripthecho especialmente para procesar esta información) que usualmente va especificado en elatributos "action". Lo que el agente procesador haga con la información y cómo la maneje es untema que no será tratado en este sitio ya que no pertenece al estándar HTML. Para manejar lainformación de un formulario debes usar un script del lado servidor.También puedes especificar cómo la información será enviada en el valor del atributo "method":"post" (los datos del formulario son adjuntados al cuerpo del mismo) ó "get" (los datos delformulario son adjuntados a la URL). Se supone que el agente procesador sabe cuál es el métodode envío del formulario.

×