Introducción y mi primera página Web

La World Wide Web es la parte más popular de Internet porque permite establecer, para quienes la consultan, una comunicación rica y diversa en contenidos debido a que la información la puede presentar usando recursos tales como: texto, imágenes, gráficos, fotos, animaciones, sonido y video.

add
B@UNAM

Introducción y mi primera página Web

La World Wide Web

La World Wide Web (WWW), también conocida con el nombre de Web es un sistema de navegación que permite fundamentalmente publicar, consultar y dado el caso, extraer elementos de información ubicados en las llamadas "páginas web" o "documentos", las cuales están hospedadas en miles de servidores que se encuentran distribuidos en todo el planeta.

La World Wide Web es la parte más popular de Internet porque permite establecer, para quienes la consultan, una comunicación rica y diversa en contenidos debido a que la información la puede presentar usando recursos tales como: texto, imágenes, gráficos, fotos, animaciones, sonido y video.

Breve historia de la Web

La World Wide Web fue inicialmente desarrollada en 1990 por Tim Berners-Lee en el CERN, el Laboratorio Europeo de Física de Partículas, como un sistema de comunicación de uso sencillo e independiente de la plataforma computacional, basada en el lenguaje HTML (Hyper Text Markup Language, por sus siglas en inglés). HTML es un lenguaje de marcado de etiquetas que describen un documento elaborado con hipertexto (texto con enlaces a otras partes del documento o a otros documentos), lenguaje que profundizarás más adelante.

Actualmente, la Web es administrada por la World Wide Web Consortium (Consorcio de la Web o W3C, en inglés). El W3C centra su trabajo en desarrollar tareas de educación, difusión y desarrollo de software. Con el objetivo de que la Web alcance su máximo potencial, las tecnologías Web más destacadas deben ser compatibles entre sí y permitir que cualquier hardware y software para acceder a la Web funcione conjuntamente.

Características de la web

La Web trabaja bajo el esquema de una arquitectura denominada cliente-servidor. La computadora personal es el cliente y la computadora remota que alberga los archivos electrónicos es el servidor. A continuación te explicamos cómo funciona:

Por ello, se requieren los siguientes elementos técnicos:

  • Una computadora personal.
  • Una conexión a un proveedor de servicios de Internet.
  • Un conjunto de computadoras llamadas servidores que albergan información digital.
  • Los enrutadores y conmutadores, cuya función es dirigir el flujo de la información.
  • Un navegador de Internet.

La Web se mantiene cohesionada gracias a los:

Hipertextos

Permiten al usuario leer y navegar por el texto y la información visual de manera no lineal, saltando fácilmente de un punto a otro, en lugar de leer la información en una estructura rígida y lineal (como en un libro).

Hipervínculos

Los elementos que permiten vincular desde un sitio Web hacia los archivos electrónicos en la Web.

Debido a estas características, en la Web se navega o explora a través de páginas de información, conforme a lo que le desee consultar el usuario en un determinado momento. El acceso a estas páginas se realiza mediante un navegador (browser) el cual se encuentra instalado en el cliente, es decir, en la computadora personal. En la red existen diversos navegadores, siendo los más populares:

Mozilla FireFox

Google Chrome

Microsoft Internet Explorer

Para trabajar, los navegadores necesitan que los documentos o páginas estén en el lenguaje HTML. Es precisamente este lenguaje el que aprenderás en la unidad.

Páginas web

Página web:

Es un documento utilizado para difundir información en Internet con un fin específico: educativo, informático, comercial, etc. Este documento es elaborado con el lenguaje HTML, el cual permite incluir texto, imágenes, audio y video, dándole una forma atractiva y dinámica.

Su consulta la realizamos mediante un navegador.

En Internet puedes obtener información de los más variados temas a cualquier día, hora y sin necesidad de moverte de un espacio físico. La Web permite acceder de forma simple e intuitiva a toda esta información a través de las páginas web. Pero, ¿qué es una página web?

¿Por qué aprender HTML si ya existen en el mercado de software muchos programas de diseño de páginas Web que pueden hacer el trabajo por nosotros?

  • Si conoces y dominas el lenguaje HTML, podrás crear y mantener fácilmente una página Web sin necesidad de depender de ningún otro programa (el software comercial para diseño de sitios web puede ser muy caro).

  • Entenderás por qué y cuándo un programa de diseño Web puede resultar útil.

  • Existen sistemas que interactúan con una base de datos para presentar información en la Web, para ello se ocupa un lenguaje de programación que a su vez genera el código HTML para que el navegador lo pueda mostrar.

  • Podrás corregir el código generado por este tipo de programas de diseño cada vez que lo consideres conveniente.

Como puedes comprender, las ventajas que se pueden tener al aprender HTML son diversas, y particularmente, ser la base para el estudio de otros lenguajes más versátiles y complejos para el diseño de páginas Web.

Para crear una página web se requiere una planeación y el conocimiento de su estructura:

  • ¿Qué elementos conforman una página web?

  • ¿Qué terminología u órdenes requiere HTML?

  • ¿Qué requisitos se deben cumplir?

Requisitos mínimos

Hardware

Tener 168 Megabytes en Memoria RAM.

Contar con 560 Megabytes de capacidad en disco duro.

Tener 560 Megahertz de velocidad en el microprocesador.

Software

Tener instalado en tu computadora alguno de los siguientes Sistemas Operativos: Windows 95 o 98, Windows 2000, Windows XP, Windows Vista, Windows 7, Windows 8, Windows 10, Linux (en cualquiera de sus distribuciones, Mac OS o UNIX).

Tener instalado alguno de los navegadores web mencionados (nos permite visualizar el proceso de elaboración de las páginas, ya que se encarga de interpretar el documento fuente –el código de la página-).

Tener instalado un procesador de texto básico, como de bloc de notas (Wordpad, en Windows). Se recomienda instalar Notepad.

Requisitos óptimos

Software

Tener instalado en tu computadora alguno de los siguientes Sistemas Operativos: Windows 98, Windows Vista, Windows 7, Windows 8, Windows 10., Linux (kernel 2.6), Mac OS 10.4.8. o UNIX.

Tener instalados alguno de los navegadores web mencionados anteriormente u otro siempre y cuando sea la versión más reciente y soporte los estándares del W3C.

Tener instalado un editor de HTML, este puede ser un procesador de textos básico como el bloc de notas (Notepad) o algún programa de diseño de páginas web como Dreamweaver o Frontpage.

Estructura básica de una página web

Las etiquetas siempre utilizan palabras clave en Ingles como Body (cuerpo), title (título), head (encabezado), etcétera.

Salvo contadas excepciones, las etiquetas siempre se presentan por pares:

Una para abrir Una para cerrar
<body> </body>
<title> </title>
<head> </head>

Observa que la segunda etiqueta incorpora el signo de la diagonal “/” para indicarle al navegador donde termina el par de etiquetas. En este sentido, se habla de etiquetas de apertura y de cierre.

La sintaxis general de la etiqueta es: <etiqueta> Contenido por mostrar <etiqueta>

Atributos

Las etiquetas pueden llevar atributos o modificaciones, cuyos valores se delimitan por comillas dobles y se colocan al final de la etiqueta de apertura (dentro del primer juego de corchetes). Su sintaxis es: < etiqueta atributo=”valor”> contenido </etiqueta>

Autoevaluación

Con el propósito de que lo aprendido hasta el momento te quede más claro, realiza la siguiente actividad.

Mi primera página web

Crea una página web que muestre una frase sencilla en pantalla.

Instrucciones

Sigue los pasos que a continuación se indican para que diseñes tu primera página web.

  1. Crea una carpeta con el nombre paginasweb en el directorio raíz de tu computadora para que allí guardes todas las páginas web que elabores.

  2. Accede al bloc de notas, desde el escritorio de la pantalla de tu computadora, en la parte inferior izquierda, escribe bloc de notas y da clic.

  3. Al abrir el Bloc de notas se despliega su pantalla con el cursor vertical parpadeando, en espera de que escribas las etiquetas correspondientes a tu primera página Web:

  4. Escribe el siguiente código:

  5. Guarda o salva en tu carpeta paginasweb el código que acabas de escribir con el nombre pagina01.html siguiendo la ruta establecida en el bloc de notas: Archivo/Guardar como, como se indica en la siguiente pantalla:

    Nota: es importante recordar que los nombres de archivos deben escribirse con minúsculas, sin acentos, sin espacios en blanco, sin caracteres especiales y siempre asigna manualmente la extensión html para que el navegador Web pueda reconocer al archivo como página Web.

  6. Ahora accede al contenido de la carpeta paginasweb y podrás ver que el archivo pagina01.html que acabas de salvar tiene asociado el icono del explorador que hayas predefinido como principal (Netscape, Firefox, Explorer, etc.). Esto significa que el navegador Web ya lo puede reconocer.

  7. Finalmente haz doble clic en el archivo pagina01.html y observa cómo el navegador despliega el mensaje:

    Esta acción te permitirá previsualizar cómo ha quedado tu página. ¡Ya tienes tu primer página web!. Ahora, cierra el navegador haciendo clic en el icono localizado en el ángulo superior derecho de la pantalla.

menu