Manual De Pagina Web Html.pdf
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
More details
- Words: 17,245
- Pages: 63
COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE MANUAL DEL DOCENTE
ELABORACIÓN DE PÁGINAS WEB PRIMER PARCIAL BLOQUE I: UTILIZAR LOS ELEMENTOS FUNDAMENTALES DEL DISEÑO. BLOQUE II: MANEJAR LOS ELEMENTOS BÁSICOS DE UN
LENGUAJE UTILIZABLE EN LA ELABARACIÓN DE PÁGINAS WEB.
SEGUNDO PARCIAL BLOQUE III: DISEÑAR UNA PÁGINA WEB CON UN SOFTWARE DE APLICACIÓN. BLOQUE IV: PUBLICAR PÁGINAS WEB.
CICLO 2019-A
PRIMER PARCIAL BLOQUE I: UTILIZAR LOS ELEMENTOS FUNDAMENTALES DEL DISEÑO.
Antes de iniciar con el diseño de páginas Web, es importante conocer alguno conceptos importantes que se utilizan para el diseño de un sitio web.
1.1 TERMINOLOGÍA BÁSICA: World Wide Web: El servicio World Wide Web (La Telaraña Mundial), también conocido como WWW o simplemente Web, es un Sistema de Información distribuido por Internet basado en la tecnología hipertexto/hipermedia, que proporciona una interface común a los distintos formatos de datos (texto, gráficos, vídeo, audio, etc.) y a los servicios de Internet existentes (FTP, telnet, etc.). Todo esto hace que el servicio Web sea el servicio de más utilizado en Internet.
Página web: Se conoce como página web al documento que forma parte de un sitio web y que suele contar con enlaces (también conocidos como hipervínculos o links) para facilitar la navegación entre los contenidos. Las páginas web están desarrolladas con lenguajes de marcado como el HTML, que pueden ser interpretados por los navegadores. De esta forma, las páginas pueden presentar información en distintos formatos (texto, imágenes, sonidos, videos, animaciones), estar asociadas a datos de estilo o contar con aplicaciones interactivas.
¿Qué es un sitio web? Un sitio web (en inglés: website), es un conjunto de páginas HTML relacionadas entre sí por hiperenlaces, gestionadas por una única entidad o persona, accesibles desde Internet a partir de una dirección URL de su página índice (Index) y con una unidad de contenido y de estilo gráfico. Incluye textos, imágenes, archivos de audio, vídeo y enlaces a otros sitios web. Normalmente no se diseña una página web aislada sino más bien un sitio completo donde a partir de una página principal o índice se enlazan el resto de páginas.
COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 2
URL: Localizador de Recursos Uniformes (Uniform Resource Locator), en otras palabras a dirección global de documentos y de otros recursos de Internet.
Protocolo de Transferencia de Hipertexto, su función principal es transferir hipertexto de forma segura en la Web, gracias a este protocolo el usuario y los servidores pueden
Dirección IP, nombre de la empresa,
interactuar.
personal que hace referencia en Internet
Tipo de dominio, educativo, comercial
http://www.cobacam.edu.mx
gubernamental etc., así como las siglas del país que pertenece.
La World Wide Web, mejor conocido como telaraña mundial, es un conjunto de protocolos que permite de forma sencilla la consulta de archivos de hipertexto.
1.2 TIPOS DE SITIOS WEB: La Web ofrece ejemplos de casi todas las estrategias de comunicaciones conocidas por la humanidad, exitosas o no. Pero no todas las páginas Web que se encuentre en línea se pueden aplicar a su situación. En primer lugar; los recursos de diferentes editores de la Web pueden disentir drásticamente, desde un individuo que crea un sitio para publicar fotos familiares, hasta una empresa de gran envergadura que crea un sitio de comercio en línea. En segundo lugar, existen varios tipos de sitio Web y no todas las lecciones sobre cómo crear un sitio Web de un tipo se aplican los demás tipos. La mayoría de páginas Web son los sitios Web personales, temáticos, comerciales y de entretenimiento.
SITIOS PERSONALES Los sitios Web personales pueden tener muchas metas. A menudo, su fin es solo compartir algo sobre usted con los compañeros del trabajo, amigos o familiares. Las páginas Web personales son una gran forma para que unas personas conozcan a otras con intereses similares y para que las personas de una cultura aprendan sobre culturas. También puede usar un sitio Web personal para COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 3
compartir fotos familiares y acontecimientos como una carta de día festivo que siempre está actualizada. Crear un sitio Web personal es muy divertido y de buena práctica para poder hacer algún otro trabajo. Pero los sitios Web personales a menudo se dejan tal como han sido creados, luego de que la emoción creativa se acaba. ¡Sea diferente, mantenga su sitio Web actualizado! Conforme los sitios Web personales evolucionan, sus creadores tienden a añadir más información acerca de un solo interés, en cuyo caso las páginas pueden convertirse en sitios Web temáticos. En otros casos, el creador del sitio Web añade más información sobre metas y logros profesionales, en cuyo caso la página Web se convierte en una especie de sitio Web comercial.
SITIOS TEMÁTICOS Una página temática de inicio es un recurso sobre un tema específico. Un tema puede ser in interés o un grupo voluntario al cual pertenece el autor, en cuyo caso la página puede crecer con el tiempo y convertirse en algo muy parecido a un sitio web comercial. También su página Web temática puede estar dedicada a cualquier interés, causa, motivo, obsesión o locura que tenga. En el sentido, la Web es como la prensa amarilla descontrolada, la cual les permite a todos decir lo que sea, algunas veces ofrece cosas de gran valor, pero la mayoría del tiempo, no. El área de interés temática mejor respaldada de la Web es el área de la publicación misma.
SITIOS COMERCIALES Los sitios Web comerciales constituyen el peso fuerte de la Web y se les dedica una cantidad tremenda de tiempo, energía y dinero. Los sitios Web comerciales cubren una gran variedad de estilos porque sus cometidos y sus recursos varían mucho. La primera pregunta que se debe hacer sobre un sitio Web comercial es “¿Quién puede acceder a él?” Algunos sitios son pensados para la World Wide Web, pero están protegidos con una contraseña o con algún otro método para restringir el acceso; otros incluso están en redes privadas y son inaccesibles a personas ajenas. Estas redes inaccesibles indican que están “detrás de un firewall o barrera de protección. Cualquier página Web que no sea accesible a todo el mundo se considera que está en una intranet o extranet.
COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 4
SITIOS DE ENTRETENIMIENTO El entretenimiento es una de las razones más importantes por las cuales la gente usa la Web, el número de sitios de entretenimiento está aumentando. Páginas humorísticas y servicios tales como los calabozos multiusuarios (MUD) y los servicios de juegos compartidos ahora se están expandiendo por la Web. Las altas expectativas que la gente tiene de los sitios de entretenimiento pueden hacer que estos sitios estén entre los más difíciles de crear. Estas son algunas sugerencias para crear sitios de entretenimiento: - No empiece aquí. No intente iniciarse en publicación de sitios Web creando uno de entretenimiento. Es una tarea muy exigente. Trate con otro tipo de sitio primero y, luego, ábrase camino hasta llegar al de entretenimiento. - Manténgalo fresco. ¿Qué tan divertido es un chiste la segunda vez que lo escucha? Es necesario que actualice rápidamente el contenido de su sitio o, de lo contrario, permita a los participantes brindar el contenido interactuando entre sí, ninguna de las dos opciones es fácil. - Aproveche la tecnología. La interactividad es también clave para el entretenimiento, lo cual significa ir más allá de HTML y de los gráficos estáticos. Necesita usar al menos alguna tecnología avanzada de la Web para crear un sitio Web fresco e interesante. - Deje que la tecnología le ayude. La tecnología puede darle ideas muy divertidas. Intente usar Java para crear rutinas animadas al estilo de los Tres Chiflados o use ActiveX para crear un ambiente de realidad virtual que incluya algo parecido
1.3 ELEMENTOS BÁSICOS DE DISEÑO WEB: ILUSTRACIÓN La ilustración o imagen es uno de los recursos más usados en el diseño de páginas web, pues al no estar sometidas férreamente a un modelo natural, permiten al ilustrador dibujar libremente el motivo que más se adapte a la composición de su sitio web, en una página se pueden insertar imágenes con los formatos: JPG, GIF, PNG entre otros, según las especificaciones del sitio.
Para insertar una imagen basta con utilizar la etiqueta IMG y el e atributo SRC. La
etiqueta
no
necesita
cierre y
su
sintaxis
correcta
es:
SRC="immagine.gif">
Donde SRC corresponde a la ubicación donde se encuentra la imagen, normalmente se ubica en la
COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 5
carpeta denominado IMAGES, (en este caso "immagine.gif"). Como hemos señalado, esta etiqueta es única en el sentido de que NO lleva como cierre el correspondiente .
TIPOGRAFÍA Una tipografía, es un conjunto de signos, referenciado al tipo de diseño que se está realizando, su característica principal es el tamaño, apariencia y otros atributos asociados a todo el conjunto, y una asignación de signos abstractos por cada carácter. Es importante usar fuentes llamativas pero sencillas de leer. También es importante variar el tamaño de una misma fuente para resaltar secciones interesantes del contenido y del texto. Algunas fuentes que se puede utilizar en HTML es: Font Face (hace referencia al tipo de letra que se insertara en el documento, Helvética, Tahoma Arial etc.) Font Size (Hace referencia al tamaño de la fuente que se insertará en el documento) Para insertar un texto en el documento Web se utiliza la etiqueta Font:
Mi Primera página Atributos: Face: Nombre de la fuente Color: color del texto, número hexadecimal o color predefinido Size: tamaño del texto.
TEORÍA DEL COLOR Esta parte es únicamente para que considere los colores a utilizar en su página, pues no se le puede poner cualquier color solo por el hecho de que alguno sea nuestro color favorito. Combinación de tonos suaves sobre fondos fríos, nos da el efecto de tranquilidad. Colores vivos combinados con negro, blanco o gris perla, da el efecto de alta tecnología. Unión de rojos, magentas y naranjas, produce excitación. Tonos suaves de azules, verdes y marrones, da la sensación de limpieza. Combinación de naranjas y rojos, amarillos, marrones y rosas, produce calor. Para más información consulte la página: http://www.webusable.com/coloursMix.htm
COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 6
MULTIMEDIA Multimedia en sitios web se refiere al uso de la mezcla de medios (texto, imágenes, video, audio y animación) para comunicar un mensaje. En web, el mensaje puede ser mediante una presentación narrativa lineal como en una película que no permite al usuario alterar la narración, o puede ser no-linea ofreciendo al usuario interactuar con el
medio.
La elección de cuál multimedia utilizar siempre estará sujeta a las necesidades de los clientes y como ellos mejor satisfacen estas necesidades de información y entrega de contenido. Además de considerar las características de su propio negocio.
Algunas formas comunes de publicar contenido con multimedia en web son: - Animaciones de GIF - Flash - Streaming de audio y streaming de video Los formatos de audio comunes que se puede insertar en una página web son: MP3, WAV y MIDI. El navegador Internet Explorer puede reconocer la etiqueta
En ocasiones puede interesar incluir algún vídeo en una página web, pero hay que tener en cuenta que los vídeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse. Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV. La etiqueta <embed> es la que se utiliza para insertar archivos de vídeo. Puede incluirse la etiqueta de cierre, pero en realidad no es necesaria, ya que entre las etiquetas <embed> y no hay que insertar nada. A través del atributo SRC hay que especificar la ruta y el nombre del archivo de vídeo.
COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 7
BOTONES Los botones gráficos son elementos exclusivos de las aplicaciones informáticas, en las que tienen básicamente la misión de capturar eventos realizados por el usuario para lanzar acciones de respuesta adecuadas.
Es común ver en las páginas web botones que permiten al usuario interactuar con la aplicación, informándole de la acción que se va a producir si pincha sobre ellos. Funcionan de esta forma como iconos ampliados, que permiten ejercer las mismas funcionalidades que estos elementos pero sin estar tan limitados en aspectos como formas, tamaños, colores, etc. También es frecuente utilizar los botones gráficos para sustituir a los botones típicos de los formularios. Cuando aparecieron los formularios sus botones de acción eran todos rectangulares, de color gris y con el texto en negro, diseño que muchas veces se hacía demasiado aburrido con el estilo general de la página. La solución a este problema de diseño fue la sustitución de estos botones estándares por botones gráficos que realizaran las mismas funcionalidades, generalmente apoyándose en lenguajes de cliente como JavaScript.
Posteriormente, con la aparición de las Hojas de Estilos en Cascada (CSS), fue posible configurar el aspecto de los botones de formulario, aunque sólo admiten esta funcionalidad los navegadores más recientes. A pesar de ello, el uso de botones gráficos a continuado, ya que sus posibilidades de diseño que ofrecen son mucho mayores; como contrapartida, es necesario a veces un fuerte apoyo de programación, ya que los botones gráficos no responden por si solos a los eventos propios de los botones
de
formulario.
Otro uso común de los botones gráficos es el de representación de opciones en un menú de COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 8
navegación. Los sistemas de navegación suelen estar formados por enlaces textuales, a los que, como mucho, se les cambia el estilo propio de este tipo de elementos (color azul y subrayado cuando están inactivos, color morado y subrayado cuando han sido ya visitados). Este sistema es muy efectivo, permitiendo configurar los textos como deseemos, trabajar cómodamente con capas y DHTML, etc., pero presenta ciertas limitaciones que conviene evitar.
La forma normal de los botones gráfico es la rectangular (sobre todo la de los que sustituyen botones de formulario), que a veces puede tener las esquinas redondeadas. También pueden presentarse circulares o elípticos, trapezoidales, en forma de estrella, etc. Dentro de esta forma primaria se incluye un texto corto (una o dos palabras) que indican la funcionalidad del botón.
BANNERS Un banner es un anuncio en que habitualmente se presenta en una página web. Es el equivalente a los anuncios de las vallas publicitarias del mundo real.
Los banners se suelen colocar en una página web para anunciar una empresa, producto o servicio, cobrando el propietario del sitio web una cantidad variable por ello. El precio de colocar un banner es variable, dependiendo fundamentalmente del tipo de página que lo presenta y del número de visitantes de la misma, siendo la forma más habitual de contratación la de cantidad por miles de impresiones (veces que se carga la página con el banner).
Un banner se presenta como una imagen que muestra información muy concreta sobre un producto o servicio, imagen que al ser pulsada abre una nueva ventana del navegador conteniendo una página web del sitio del anunciante, en la que el visitante puede obtener más información sobre el producto ofrecido y, generalmente, comprarlo. Físicamente, los banners son ficheros gráficos (imágenes), en formato GIF simple, JPG o PNG si son estáticos, o en formato GIF animado o SWF si son animados (lo más frecuente). Su tamaño es variable, aunque existen unas dimensiones que se han convertido en estándares de facto y que son COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 9
las que normalmente se utilizan para establecer el precio de la contratación de espacio para los mismos.
LOGOS Un logotipo es un distintivo o emblema formado por letras, abreviaturas, objetos gráficos, etc., peculiar de una empresa, marca o producto, a los que representa e identifica de forma unívoca.
Los logotipos, también conocidos como logos, son uno de los trabajos más importantes y difíciles que puede realizar un diseñador gráfico, y representan un ejemplo perfecto de la esencia misma del diseño, pues en un objeto único se concentran todas las consideraciones de comunicación, estilo y técnica que se manejan para proyectos de mayor envergadura.
Para una empresa, producto o institución, el logotipo es una pieza clave de su identidad pública, ya que la representa en todos y cada uno de los elementos comunicativos de la misma (sobres, tarjetas de los empleados, publicaciones, publicidad, etc.). Es por lo tanto muy importante que el logotipo simbolice lo más acertadamente la esencia e identidad propia de la empresa o producto.
Los logotipos no son elementos de diseños estáticos, fijos, sino que evolucionan con el tiempo para adaptarse a las tendencias sociales, comerciales, culturales y técnicas de cada época concreta. Estos cambios deben ser siempre muy sutiles, modificando apenas pequeños elementos del diseño del logotipo (pequeños cambios en las formas o en la tipografía), ya que la personalidad propia del mismo
debe
mantenerse
COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 10
siempre.
Un logotipo debe reunir una serie de características generales para ser funcional y efectivo. Entre ellas podemos citar las siguientes:
Debe corresponderse con a un tiempo: Su concepción y diseño debe estar inspirado en una época, en una cultura. Posteriores cambios en sus elementos pueden ir adaptándolo a los tiempos nuevos, pero deben ser tan imperceptibles que se conserve siempre su estilo original.
Debe ser simple: Los elementos gráficos que lo componen deben ser pocos, claros y estilizados.
Debe ser fácil de recordar: Su impacto visual debe ser inmediato y perdurable, un objetivo difícil de cumplir en el ambiente de saturación visual en que vivimos.
Debe ser único y diferenciador: La función clave de un logotipo es la de identificar. Su diseño, sus colores y formas, deben ser únicas en el mercado, permitiendo que los espectadores lo reconozcan inmediatamente y de forma inequívoca.
Debe funcionar en diferentes medios: Su diseño deber permitir su correcta visualización en medios impresos y en pantalla, en diferentes resoluciones y distancias, en color o en blanco y negro.
Debe ser coherente con el resto de la identidad corporativa: El logotipo ha de estar perfectamente integrado con el resto de materiales que utilice la compañía para sus comunicaciones: material de papelería, envoltorios, material promocional, la página web, los anuncios televisivos y carteles, etc.
Debe resistir el paso del tiempo: El logotipo debe ser funcional y válido independientemente de las modas o gustos temporales de las diferentes épocas y movimientos sociales y culturales.
HIPERVÍNCULOS Un hipervínculo es un enlace, normalmente entre dos páginas web de un mismo sitio, pero un enlace también puede apuntar a una página de otro sitio web, a un fichero, a una imagen, etc. Para navegar al destino al que apunta el enlace, hemos de hacer clic sobre él. También se conocen como hiperenlaces, enlaces o links. Normalmente el destino se puede saber mirando la barra de estado del navegador cuando el ratón esté sobre el hipervínculo. Dependiendo de cuál sea el destino, hacer clic en un hipervínculo puede hacer que ocurran varias cosas. Si el destino es otra página web, el navegador la cargará y la mostrará, pero si el destino es un COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 11
documento de Word, el navegador nos dará la posibilidad de abrir una sesión de Word para visualizarlo o de guardar el archivo. Por lo tanto, podemos usar los hipervínculos para conducir a los visitantes de nuestro sitio web por donde queramos. Además, si queremos que se pongan en contacto con nosotros, nada mejor que ofrecerles un hipervínculo a nuestro correo electrónico.
TEMA 1.4. Tipos de lenguaje para desarrollo Web. (HTML, DHTML, ASP,JAVA SCRIPT,CSS) HTML es un lenguaje sencillo pensado para presentar información en la WWW. HTML (HyperText Markup Languaje), como su nombre indica es un lenguaje de marcas para la creación de hipertextos. Por hipertexto entenderemos texto con una presentación agradable, con inclusión de elementos multimedia (gráficos, video, audio) y con la presencia de hiperenlaces que permiten relacionar otras fuentes de información en documentos hipertextos. Es el lenguaje utilizado para representar documentos en la WWW (World Wide Web). Como se ha dicho es un lenguaje de marcas ya que en el las instrucciones son trozos de texto resaltados convenientemente que definirán la estructura lógica del documento. Por tanto un documento HTML constará de texto que será el contenido y la información del documento y de instrucciones HTML que resaltarán este contenido y le darán un formato fácil y agradable de leer y con la posibilidad de relacionar documentos y fuentes de información mediante hiperenlaces.
El HTML Dinámico o DHTML (del inglés Dynamic HTML) designa el conjunto de técnicas que permiten crear sitios web interactivos utilizando una combinación de lenguaje HTML estático, un lenguaje interpretado en el lado del cliente (como JavaScript), el lenguaje de hojas de estilo en cascada (CSS) y la jerarquía de objetos de un Document Object Model (DOM). Una página de HTML Dinámico es cualquier página web en la que los scripts en el lado del cliente cambian el HTML del documento, después de que éste haya cargado completamente, lo cual afecta a la apariencia y las funciones de los objetos de la página. La característica dinámica del DHTML, por tanto, es la forma en que la página interactúa con el usuario cuando la está viendo, siendo la página la misma para todos los usuarios.
En contraste, el término general "página web dinámica" lo usamos para referirnos a alguna página específica que es generada de manera diferente para cada usuario, en cada recarga de la página o por valores específicos de variables de entorno. Este término no debe ser confundido con DHTML. Estas páginas dinámicas son el resultado bien de la ejecución de un programa en algún tipo de COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 12
lenguaje de programación en el servidor de la página web (como por ejemplo ASP.NET, PHP o Perl), el cual genera la página antes de enviarla al cliente, o bien de la ejecución en la parte cliente de un código que crea la página completa antes de que el programa cliente (usualmente, un navegador) la visualice.
Active Server Pages (ASP), también conocido como ASP clásico, es una tecnología de Microsoft del tipo "lado del servidor" para páginas web generadas dinámicamente, que ha sido comercializada como un anexo a Internet Información Services (IIS). La tecnología ASP está estrechamente relacionada con el modelo tecnológico y de negocio de su fabricante. Intenta ser solución para un modelo de programación rápida ya que "programar en ASP es como programar en Visual Basic Script con algunas ventajas específicas en entornos web. Lo interesante de este modelo tecnológico es poder utilizar diversos componentes ya desarrollados como algunos controles ActiveX así como componentes del lado del servidor, tales como CDONTS, por ejemplo, que permite la interacción de los scripts con el servidor SMTP que integra IIS.
JavaScript (abreviado comunmente "JS") es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico. Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas aunque existe una forma de JavaScript del lado del servidor (Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es también significativo. JavaScript se diseñó con una sintaxis similar al C, aunque adopta nombres y convenciones del lenguaje de programación Java. Sin embargo Java y JavaScript no están relacionados y tienen semánticas y propósitos diferentes. Todos los navegadores modernos interpretan el código JavaScript integrado en las páginas web. Para interactuar con una página web se provee al lenguaje JavaScript de una implementación del Document Object Model (DOM). Las hojas de estilo en cascada o (Cascading Style Sheets, o sus siglas CSS) hacen referencia a un lenguaje de hojas de estilos usado para describir la presentación semántica (el aspecto y formato) de un documento escrito en lenguaje de marcas. Su aplicación más común es dar estilo a páginas
COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 13
webs escritas en lenguaje HTML y XHTML, pero también puede ser aplicado a cualquier tipo de documentos XML, incluyendo SVG y XUL. La información de estilo puede ser adjuntada como un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "<style>".
COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 14
BLOQUE II: MANEJAR LOS ELEMENTOS BÁSICOS DE UN LENGUAJE UTILIZABLE EN LA ELABORACIÓN DE PÁGINAS WEB.
2.1 Introducción: Para diseñar una página Web es importante tener conocimientos previos sobre el lenguaje HTML, y sobre las herramientas a utilizar. Para comenzar sólo son necesarios dos elementos: • Un editor de texto. Vale cualquiera, siempre que no formatee el texto. Por ello, los más adecuados son los más sencillos (como por ej., el block de notas de Windows, o el notepad++). Si se utilizan procesadores como el Word, se deben guardar los ficheros como 'Sólo Texto', para que no introduzca órdenes de formateo, que pueden provocar errores al cargarlo en el navegador. • Un visualizador o navegador del Web: Netscape, Microsoft Explorer, Mosaic, Opera, Mozilla Firefox, Google Chrome etc. El editor de texto lo usaremos para ir escribiendo los documentos HTML, que será posteriormente interpretado por el navegador, con lo que iremos comprobando los cambios y añadidos que vayamos efectuando. Existen ciertos programas que nos ayudan a automatizar este proceso, pero es muy conveniente comenzar a hacerlo de una manera manual, para comprender bien la estructura del lenguaje HTML.
2.1.1 LENGUAJE HTML: es un lenguaje sencillo pensado para presentar información en la WWW. HTML (HyperText Markup Languaje), como su nombre indica es un lenguaje de marcas para la creación de hipertextos. Por hipertexto entenderemos texto con una presentación agradable, con inclusión de elementos multimedia (gráficos, video, audio) y con la presencia de hiperenlaces que permiten relacionar otras fuentes de información en documentos hipertextos. Es el lenguaje utilizado para representar documentos en la WWW (World Wide Web). HTML se compone de una serie de comandos, que son interpretados por el visualizador, o programa que utilizamos para navegar por el WWW. En última instancia es el visualizador el que ejecuta todas las órdenes contenidas en el código HTML, de forma que un visualizador puede estar capacitado para unas prestaciones, pero no para otras. Así, podremos especificar que una página tenga una imagen de fondo, o un texto parpadeando, pero si nuestro visualizador no está capacitado para esas funciones, no podremos verlas.
2.1.2 MI PRIMER DOCUMENTO: COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 15
Es recomendable crear un directorio en su computadora para almacenar las páginas web que vaya haciendo al aprender; y que practique un tiempo antes de poner páginas en Internet. 1. Abra el editor de textos: en Windows abra el Block de Notas 2. Teclee lo siguiente:
<TITLE>Ejemplo 1 - Mi primera pagina Web
Hola Mundo Web
Esta es mi primera página,
Como el lenguaje HTML no es difícil, pronto estaré en condiciones de hacer cosas más interesantes.
Aquí va un segundo párrafo.
3. Grabe este archivo con el nombre: Index.html 4. Abra el visualizador. No necesita conectarse a Internet para ver las páginas en su computadora. Puede trabajar en local. 5. Elija "Archivo/Abrir página" en la barra de menú del navegador. 6. Seleccione el archivo Index.html que acaba de crear, y debe de ver la siguiente pantalla:
COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 16
2.1.3 Características Generales del Lenguaje HTML. Marcas y atributos: El lenguaje HTML se estructura utilizando marcas o etiquetas o comandos (a partir de ahora utilizaremos indistintamente uno de 3 términos para denominar a los elementos que se estructura HTML). La forma general de una marca es la de un comando HTML encerrado entre dos signos de menor y mayor como a continuación se muestra: <marca [atributos]> ......................................[] Hay marcas que se aplican a todo el documento HTML, o sólo desde el punto en que son insertadas hasta el final del documento. Otras se aplican exclusivamente a un fragmento del texto. En ese caso, el final de la aplicación se especifica con la misma marca precedida de la barra inclinada hacia atrás (/). Las marcas pueden contener de forma opcional u obligatoria, lo que se denominan atributos o modificadores. Los atributos matizan el significado de la marca, y que se expresan de la siguiente forma: <marca atrib1=“valor1” atrib2=“valor2”..............> El valor de los atributos se expresan encerrados entre comillas.
COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 17
Concatenación de marcas. Las marcas se pueden anidar o encadenar una a continuación de otra, de forma que se pueden aplicar simultáneamente varias propiedades a una misma porción de documento. Así el texto encerrado en las marcas: <MARCA1><MARCA2> Texto Queda afectado tanto por las propiedades de la MARCA1 como por los de la MARCA2. Todas las marcas son independientes entre sí, por los las siguientes líneas de código HTML, tiene efectos idénticos, sean cuales sean las marcas concretas.
2.1.4 NORMAS FUNDAMENTALES DE HTML HTML es simplemente texto Lo primero es saber que un documento HTML es un archivo de texto simple, luego, se puede editar con cualquier editor de texto sencillo, como por ejemplo el Block de Notas de Windows.
Igualdad de mayúsculas y minúsculas. HTML no distingue entre mayúsculas y minúsculas en la especificación de marcas y sus atributos. Sin embargo, por legibilidad, es aconsejable codificar tanto marcas como atributos en mayúsculas.
No importan los tabuladores, ni los saltos de línea Los visualizadores no toman en cuenta las tabulaciones, los saltos de línea ni los espacios en blanco extra. Esto tiene ventajas y desventajas. La principal ventaja es que permite obtener resultados uniformes y de buena presentación de manera bastante fácil. La principal desventaja es que un documento HTML, por lo menos se debe usar las marcas
...
opara evitar que quede todo el texto en una sola línea.
Caracteres especiales En HTML existen algunos caracteres que son especiales porque juegan un papel dentro del mecanismo del funcionamiento de HTML, como sucede con los símbolos mayor que (>) y menor que (<), y otros porque en los primeros tiempos de HTML, no formaban parte del juego de caracteres internacionales del alfabeto, como sucede con los acentos.
COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 18
2.1.5 ESTRUCTURA BÁSICA DE UN DOCUMENTO Un documento HTML, no es más que el texto definido entre las marcas: ..................... Un documento HTML siempre se compone de las siguientes 2 partes: Cabecera del documento Contenido del documento Cabecera: Se inicia mediante el comando y se termina con . Dentro de la cabecera hay información del documento, que no se ve en la pantalla principal, y que precisa las características del documento, principalmente el título del documento. El título del documento se declara entre las etiquetas <TITLE> y . El título debe ser breve y descriptivo de su contenido, pues será lo que vean los demás cuando añadan nuestra página a su bookmark (o libro de direcciones favoritas). Cuerpo: se inicia mediante el comando y se termina con el comando . Este comando acepta numerosos modificadores. Dentro del cuerpo del documento se incluye cualquier carácter imprimible.
2.2 COMANDOS BÁSICOS DE HTML COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 19
A continuación se describen las marcas básicas de HTML que se pueden incluir en el cuerpo de un documento HTML. Definición de párrafos: P La marca
sirve para separar párrafos en HTML. Deja un espacio en blanco entre párrafos haciendo legible el texto de la página. En esta marca la etiqueta de fin es opcional. Por defecto, el párrafo de un documento HTML está justificado a la izquierda. Pero podemos modificar la alineación horizontal de un párrafo mediante el atributo ALIGN de la marca
, que puede tomar los valores siguientes. • LEFT: el párrafo es justificado a la izquierda. Valor por defecto. • CENTER: el párrafo es centrado. • RIGHT: el párrafo es justificado a la derecha.
Salto de líneas: BR La marca
introduce un retorno de carro (o salto de línea) en el punto del documento en el que es colocada. Es equivalente al punto y aparte de un texto normal. Esta marca es vacía de manera que no necesita de la etiqueta de fin de marca.
Título de encabezado: H1 HTML dispone de seis cabeceras, o tipos de letra predefinidos de distinto tamaño, que se utilizan para marcar los títulos o resaltes en las páginas. Se activan con el comando Nivel de encabezado 1
Nivel de encabezado 2
Nivel de encabezado 3
Nivel de encabezado 4
Nivel de encabezado 5
Nivel de encabezado 6
Los títulos de encabezado requieren la marca de fin, y siempre provocan un salto de línea, aunque no se le indique.
Estilo al texto:
COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 20
Las marcas de estilo de texto especifican el tipo de letra (negrita, cursiva, ..), tamaño, color que se desea que aparezca el texto. Tipos de letras Algunas de las marcas que permiten especificar la tipografía de los caracteres son las siguientes: Negrita (Bold) Cursiva (Italic) Tamano fijo (TypeWriter) <EM>énfasis (Emphasis) <STRONG>Gran énfasis (Strong) Subrayado (Underline) Todas estas marcas requieren etiquetas de comienzo y fin. Tamaño del texto. Para modificar el tamaño se utiliza el atributo SIZE de la marca , de la manera siguiente: Texto El comando requiere la etiqueta de cierre. HTML define siete tamaños de letra distintos, siendo el tamaño 3 el que se adopta por defecto. Sin embargo, la mayoría de los navegadores permiten establecer cuál es la correspondencia real del tamaño 3. Así, se puede hacer que el tamaño 3 corresponda a una fuente Arial de 16, o a una Times de 8. Colores del texto. Para dar color a un texto se utiliza el comando siguiente: Texto En un principio la forma de especificar un color en HTML, era mediante el formato hexadecimal. Consistía en tres números hexadecimales (números expresados en base 16) de dos dígitos cada uno. Con un número hexadecimal de dos dígitos podemos expresar hasta 256 valores distintos. El primer número hexadecimal nos va a indicar la cantidad de rojo que tiene nuestro color, el segundo la cantidad de verde, y el tercero la cantidad de azul (el blanco será FFFFFF, el negro 000000). Esta forma de definir los colores como combinación de los colores rojo, verde, y azul se denomina RGB (red - green - blue). Para dar color a todo el texto del documento podemos hacerlo con: Para especificar el color de fondo del documento deberemos utilizar: COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 21
O en su caso en vez de utilizar el nombre del color en Ingles se puede poner números hexadecimales.
Listas Las listas en HTML proporcionan una forma de clasificar la información, y hacer que ésta sea más inteligible por parte del visitante de las páginas. Listas ordenadas: OL. También llamadas listas numeradas son aquellas en las que cada elemento tiene delante un número que indica el orden del elemento dentro del conjunto de la lista. La marca para crear una lista ordenada es ....
. Son obligatorias las etiquetas de comienzo y fin de estas marcas. Cada elemento de la lista ordenada se identifica escribiéndolo dentro de la marca
Listas desordenadas: UL. También llamadas listas no numeradas son listas en las que no es necesario numerar de alguna manera los elementos que la componen, sino que cada elemento tiene delante un símbolo (un punto, un cuadrado, etc..). La forma de especificar una lista desordenada es mediante la marca . Las etiquetas de comienzo y fin de esta marca son obligatorias. Cada elemento de la lista se identifica mediante la marca
Listas de definición: DL.
COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 22
A diferencia de los dos tipos anteriores de listas, las listas de definición, se utilizan para presentar la información sin marcas, ni números, sino que utiliza los sangrados de los párrafos. Las listas de definición están constituidas por términos y su subsiguiente definición. La forma de implementar las listas de definición es con la marca de la siguiente forma:
Cada término de la lista de definición se indica con la marca
Centrado de texto Para centrar una parte del documento, se delimita lo que se desea centrar mediante el comando
Líneas horizontales La marca
permite trazar unas líneas horizontales para separar distintas secciones de una página HTML. Por defecto, las líneas horizontales van de la parte izquierda de la ventana del visualizador a la derecha. Por otro lado tienen la parte superior oscura y la inferior clara, por lo que dan una sensación de relieve. Esta marca sólo requiere la etiqueta de comienzo.
Comentarios no visibles en la pantalla A veces es muy útil escribir comentarios en el documento HTML sobre el código que escribimos, que nos pueden servir para recordar posteriormente sobre lo que hicimos, y que no queremos que se vean en pantalla. Esto se consigue encerrando dichos comentarios entre estos dos símbolos: Ejemplo: 2.2.1 ENLACES
COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 23
Los enlaces (o links) proporciona al que visita las páginas un mecanismo muy sencillo para moverse entre distintos documentos, permitiéndole moverse en aquellos aspectos que considere más importantes, mientras que desde el punto de vista del que crea las páginas permite distribuir de forma transparente al visitante el lugar o lugares en los que se van a almacenar los distintos documentos. Para definir enlaces hipertexto se utiliza la marca de la manera siguiente: Texto del enlace Donde:
color especial y subrayado. requiere de la marca de fin. Vamos a distinguir tres tipos de enlaces: 1. Enlaces a otras zonas de la misma página 2. Enlaces a otras páginas. 3. Enlaces a otras zonas de otras páginas.
Enlaces a otras zonas de la misma página A veces, en el caso de documentos (o páginas) muy extensos, nos puede interesar dar un salto desde una posición a otra determinada. Así es posible hacer enlaces que lleven al usuario de una parte del documento a otra dentro del mismo documento con solo hacer click. A este tipo de enlaces los llamaremos enlaces locales. Estos enlaces constan de dos objetos: El enlace: Corresponde a la zona en la cual el usuario hará click, para viajar a otra parte del documento. Esta zona aparece subrayada en el documento. Un enlace local se crea delimitando la zona con el comando ... , en que nombre es la etiqueta que se está referenciando.
El nombre enlazado o referenciado Corresponde a la zona del documento a la cual el usuario llegará al hacer click en la referencia correspondiente. Un nombre local se crea delimitando la zona con el comando ... , en que nombre es la etiqueta que asignamos a esta zona. Enlaces a otras paginas COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 24
Para enlazar a otro documento, es necesario conocer la ubicación exacta del documento que se referenciará. Una ubicación, puede ser referenciada en forma relativa o absoluta Ubicación relativa: Se indica especificando la posición del documento en la estructura de subdirectorios a partir de la ubicación del documento actual. Sólo se puede usar para documentos ubicados en el mismo ordenador. Una referencia relativa a otro documento se hace usando el comando: ... Ubicación absoluta: Se indica especificando el URL (uniform resurce locator) de la página que se está referenciando. Los URL son una manera universal de especificar una dirección. La forma más básica de referenciar un hypertexto es usar el comando: ... El ordenador indica la máquina donde se encuentra el documento. El directorio y archivo indican su posición dentro de ese ordenador. Los URL tienen muchas formas distintas para referenciar distintos objetos. Enlace a una zona de otra página Para este tipo de enlaces se utiliza una mezcla de las dos formas anteriores. Se indica el URL de la página a referenciar, luego un signo # y luego el nombre de la zona a referenciar.
2.2.2 TABLAS Una tabla en HTML se entiende como un conjunto de filas (fila=horizontal), apiladas una sobre otra. Cada fila contiene a su vez un conjunto de celdas, puestas una al lado de la otra. Una tabla se declara usando el comando ...
. Dentro de la tabla, se usa .. para indicar una fila y dentro de una fila, ... para delimitar el contenido de una celda. El elemento de cierre de fila y de celda es optativo. El texto incluido dentro de cada celda puede ser formateado con cualquiera de las etiqueta vistas anteriormente Todos estos comandos aceptan numerosos modificadores. Se pueden, entre otras cosas, unir celdas, especificar la alineación del contenido de la celda, y mucho más. Para entender mejor el comando ...
, está disponible una muy amplia gama de ejemplos.
COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 25
Título de la tabla Es conveniente que las tablas tengan un título que las identifique y aclare su contenido. Aunque ese título puede ser contenido colocando texto formateado antes de la tabla, HTML dispone de la etiqueta
Bordes de la tabla Para colocar bordes a una tabla en HTML se utiliza el modificador BORDER dentro de la etiqueta . La sintaxis es:
……….
Donde anchura indica la anchura en pixeles del borde exterior de la tabla. El modificador BORDER coloca bordes externos e internos en la tabla, pero la anchura que se especifica solo afecta a los bordes externos. Tamaño de la tabla Por defecto el tamaño de la tabla viene dado por el texto o los gráficos que contiene. Sin embargo, es posible que en ocasiones queramos cambiar la anchura de nuestra tabla. La forma de establecer una anchura fija en una tabla es utilizar el modificador WIDTH dentro de la etiqueta . La sintaxis es:
………
Espacio entre las celdas Es posible que queramos que nuestro texto no quede apretado dentro de las celdas, sino que exista más espacio entre los textos de las celdas contiguas de forma que pueda leerse mejor. Esto puede hacerse mediante los dos siguientes modificadores: • CELLPADDING: establece la distancia mínima en pixeles entre los bordes de cada celda y el texto que va encerrado en ellas. Su valor por defecto es 1. • CELLSPACING: establece la anchura en pixeles de los bordes de cada celda.
COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 26
Justificación del texto de las celdas. HTML permite justificar horizontal y verticalmente el texto dentro de cada celda. Para ello implementa los modificadores ALIGN y VALIGN dentro de la etiqueta . La forma de hacerlo es:
Donde: • Horizontal puede tomar los valores CENTER, LEFT y RIGHT. Por defecto vale LEFT. • Vertical: puede tomar los valores TOP, MIDDLE, BOTTOM, y BASELINE. Por defecto vale CENTER. ………. …..
Celdas de diferentes tamaños. Por defecto, todas las celdas que constituyen una tabla en HTML tienen el mismo tamaño. Sin embargo, es posible establecer los tamaños de una determinada celda mediante dos modificadores de la etiqueta , que son WIDTH y HEIGHT: WIDTH: especifica la anchura del texto en una celda concreta. Se puede especificar como valor absoluto o bien como relativo en forma de porcentaje de la anchura de la tabla. HEIGHT: establece la altura de una celda individual. No es posible usar los modificadores WIDTH y HEIGTH para aplicarlos a toda una fila. La única forma de hacerlo es poniendo en cada celda de la fila los valores correspondientes de WIDTH y HEIGHT.
2.2.3 FRAMES (MARCOS) Los FRAMES (marcos) es una técnica que se utiliza para subdividir la pantalla del visualizador en diferentes ventanas, con la característica de que cada una de ellas se podrá manipular por separado, es como si cada una de ellas fuera una página Web. Esto es muy útil para, por ejemplo, para mostrar
COLEGIO DE BACHILLERES DEL ESTADO DE CAMPECHE Página 27
permanentemente en una ventana los diferentes contenidos de nuestra página y, en la otra mostrar el contenido seleccionado. Para definir las diferentes subventanas o FRAMES su utilizan las marcas: y . Con