440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)

BACHILLERATO TÉCNICO EN DESARROLLO Y ADMINISTRACIÓN DE APLICACIONES INFORMÁTICAS
Material impreso que debe ser el soporte a los contenidos que trabajarás para
tu perfil profesional

FRANCISCA FELIZ
GUADALUPE VÁSQUEZ ARREDONDO
WANDELSON L. DE LA ROSA M.
YURIKA CAROLINA CONTRERAS MATOS
Módulo: UC_059_3: Diseñar Portales Web Y Recursos Multimedia
UC_059_3: Diseñar portales web y recursos multimedia haciendo uso de
herramientas informáticas de acuerdo con las necesidades presentadas por el
cliente o negocio.
https://materialesdidacticos124.weebly.com/
https://familiainformaticaycomunicacion.blogspot.com/

República Dominicana
Universidad Abierta para Adultos (UAPA)
Programa de Postgrado y Maestría:
Gestión de la Tecnología Educativa
Matrícula(s): Participante(s):
201807573 FRANCISCA FELIZ
2018-07612 GUADALUPE VÁSQUEZ ARREDONDO
2018-07665 WANDELSON L. DE LA ROSA M.
2019-06291 YURIKA CAROLINA CONTRERAS MATOS
Asignatura:
440. Diseño y Elaboración de Materiales impresos
Tema:
Material impreso: Módulo Diseñar Portales Web Y Recursos Multimedia
Blog: https://materialesdidactico.weebly.com/
https://materialesdidacticos124.weebly.com/
Blog:https://familiainformaticaycomunicacion.blogspot.com/
Tutora Virtual:
Dra. IVANOVNNA MILQUEYA CRUZ PICHARDO
Coordinada por:
VILMA DÍAZ CABRERA
Santo Domingo, R. D. 17 de septiembre del 2019

Módulo: UC_059_3: Diseñar Portales Web Y Recursos Multimedia
Índice Por Autores
Unidad I. HTML y Versiones WANDELSON L. DE LA ROSA
Unidad II. Estructura del Documento FRANCISCA FELIZ
Unidad III. Anclas y Tipos en HTML GUADALUPE VÁSQUEZ ARREDONDO
Unidad IV. Sonidos y Multimedia YURIKA C. CONTRERAS MATOS
Unidad I. HTML y Versiones
1. Introducción y orientaciones para el estudio
2. Objetivos
3. Esquema
4. Desarrollo de los contenidos
- HTML y versiones.
- DHTML.
- XML.
- XHTML.
- PHP.
- Java.
- JavaScript.
- Tecnología ASP.
- Tecnologías de desarrollo de Aplicaciones Web.
- Caracteres especiales.
5. Resumen
6. Bibliografía de la Unidad
7. Actividades
8. Ejercicios de autocomprobación
9. Soluciones a los ejercicios de autocomprobación
10. Glosario
11. Anexos y textos

El diseño web es una de las actividades web 2.0 que consiste en la
planificación, diseño, implementación y manteamiento del sitio web.
El diseño web es una actividad que consiste en la planificación, diseño,
implementación y mantenimiento de sitios web. No es simplemente la
implementación del diseño convencional ya que se abarcan diferentes aspectos
como el diseño gráfico web, diseño de interfaz y experiencia de usuario, como.
la navegabilidad, interactividad, usabilidad, arquitectura de la
información; interacción de medios, entre los que podemos
mencionar audio, texto, imagen, enlaces, video y la optimización de motores de
búsqueda. A menudo muchas personas trabajan en equipos que cubren los
diferentes aspectos del proceso de diseño, aunque existen algunos diseñadores
independientes que trabajan solos.
2.
3.
4.
5.
6.
7.
4. Desarrollo de los contenidos
1-HTML y versiones
.
HTML (HTML significa "Lenguaje de Marcado de Hypertexto" por sus siglas en
inglés "HyperText Markup Language", es un lenguaje que pertenece a la familia
 Identificar y explicar los diferentes Anclas sobre estructura del
documento, HTML.
 Conocer la sintaxis que componen los Anclas en las páginas HTML.
 Describir las estructura del documento y sus componentes.
 Identificar para que sirve un Anclas y selecciona los esquemas más
usados.
 Mostrar el proceso de un formato, esquema y sintaxis de los Anclas.
Objetivos de la Unidad I:

de los "lenguajes de marcado" y es utilizado para la elaboración de páginas web.
El estándar HTML lo define la W3C (World Wide Web Consortium) y actualmente
HTML se encuentra en su versión HTML5.
Cabe destacar que HTML no es un lenguaje de programación ya que no cuenta
con funciones aritméticas, variables o estructuras de control propias de los
lenguajes de programación, por lo que HTML genera únicamente páginas web
estáticas, sin embargo, HTML se puede usar en conjunto con diversos lenguajes
de programación para la creación de páginas web dinámicas.
Fig.1.1-Estructura De HTML
¿Para qué sirve HTML?
Básicamente el lenguaje HTML sirve para describir la estructura básica de una
página y organizar la forma en que se mostrará su contenido, además de que
HTML permite incluir enlaces (links) hacia otras páginas o documentos.
HTML es un lenguaje de marcado descriptivo que se escribe en forma de
etiquetas para definir la estructura de una página web y su contenido como texto,
imágenes, entre otros, de modo que HTML es el encargado de describir (hasta
cierto punto) la apariencia que tendrá la página web.

¿Qué son las etiquetas HTML?
Las etiquetas HTML son fragmentos de texto rodeados por corchetes
angulares <>, que se utilizan para escribir código HTML, en HTML existen
etiquetas de apertura y etiquetas de cierre, tienen la
forma: <etiqueta></etiqueta>. Donde <etiqueta> es la etiqueta de apertura
y </etiqueta> es la etiqueta de cierre indicada por la diagonal. HTML tiene
definidas gran variedad de etiquetas para distintos usos.
¿Qué es un documento HTML?
Para desarrollar una página web en HTML es necesario crear un documento
HTML. Básicamente un documento HTML es un archivo de texto que tienen la
extensión .html o .htm, en este documento se escriben todo el texto y las
etiquetas HTML necesarias para la creación de una página, al texto escrito en el
documento HTML se le llama código HTML. Un documento HTML se puede
generar con cualquier editor de
Identificación de versiones, editores y convertidores y utilización de caracteres
extendidos en HTML y de control.
Ejemplo de etiquetas 1
<html> Abrir el documento. Cierra con </html>
<head> Cabecera del documento donde habrá información sobre la
identificación de la web y más. Cierra con </head>
<body> Es el cuerpo del documento, donde va el contenido general. Cierra con
</body>
<title> Para definir el título de una página.
<link> y <style> Van dentro del <head>, “Style” sirve para agregar estilos CSS
a la web y dotar de otros recursos al HTML. Se usa <link> para vincular un
archivo.css, y con <style> se escribe el código directamente dentro del head
en el documento HTML.

<table>, <tr> y <td> Sirven para crear tablas y distribuir las secciones de la
web. Ya poco se usan.
<div> Es un elemento “contendedor” de otras cosas. Dentro del DIV se puede
agregar cualquier recurso HTML.
<a> Sirve para añadir enlaces y pueden tener atributos para que tenga un
comportamiento determinado, como abrir el enlace en otra pestaña, otra
ventana, etc.
<img> Se usa para añadir una imagen al documento.
<li>, <ol>, <ul> Sirven para crear listas ordenadas y desordenadas.
<p> Para crear un párrafo.
<i> Para añadir letras o palabras cursivas.
<b> Para caracteres o palabras en negritas.
<br/> Hace un salto de línea simple dentro de un párrafo o donde quiera que
se coloque.
¿Qué se necesita para realizar el ejercicio?
Lo primero que debemos aclarar aquí es que el ejemplo siguiente
mostrará cómo crear una página web sin ninguna herramienta auxiliar,
trabajando directamente con el "código fuente" de la página. Existen numerosos
programas, tal como se mencionó antes, que nos permiten crear páginas webs
sin tener que ver todos los códigos incluidos y que son tan simples de usar como
un procesador de palabras. Esos programas van desde sencillos auxiliares,
hasta completos paquetes de diseño y es recomendable obtener uno de acuerdo
con nuestras habilidades en la computadora y las expectativas para crear
nuestras páginas web. Incluso las versiones recientes de los programas
procesadores de palabras incluyen opciones que nos permiten crear páginas
webs a partir de nuestros documentos (ver opción Save as HTML o Guardar
como HTML en Microsoft Word por ejemplo).
<h1>, <h2>, <h3>….<h6> Son encabezados que se ordenan según su
tamaño, del 1 al 6.

De todos modos, el ejemplo a continuación es un interesante ejercicio que le
permitirá conocer y entender un poco mejor la naturaleza de las páginas web.
Esto es importante además porque lo que los programas de diseño de páginas
web hacen en todo caso es generar un código similar al de nuestro ejemplo.
Para el ejercicio, necesitaremos apenas:
Un editor de texto.
No importa cual, basta con que grabe los archivos como texto puro o ASCII
. Los usuarios de Windows pueden usar el Notepad incluido en el sistema
operativo. Si lo desea, puede usar también su procesador de palabras
favorito, pero tendrá que asegurarse de grabar los archivos como "archivos
de texto" o "archivos ASCII" ("text files" o "ASCII files" en inglés).
Un programa navegador.
Para poder ver las páginas creadas. Basta con el mismo programa que
usamos para navegar por Internet, ya sea Netscape, Internet Explorer o
cualquier otro.
Etiquetas que se abren y se cierran
Todas las instrucciones o códigos que colocamos en las páginas HTML se
insertan en el texto enmarcadas por los símbolos < y >. Por ejemplo, el código o
etiqueta para indicar letras itálicas o cursivas es <I>. Buena parte de estos
códigos tienen su correspondiente etiqueta para cancelar o cerrar el comando,
usándose generalmente el mismo código, precedido de un "/". Así, por ejemplo
para mostrar la frase "la potenciación de la mujer debe ser parte integral de los
programas de desarrollo" con potenciación de la mujer en cursivas, escribiríamos
"la <i>potenciación de la mujer</i> debe ser parte integral de los programas de
desarrollo".
El uso de mayúsculas o minúsculas no tiene relevancia alguna al usar los
códigos HTML.

Estructura de una página HTML
Toda página HTML inicia con la etiqueta <html>, indicando así a los programas
navegadores que no se trata de un simple archivo texto sino de una página web
y que debe ser interpretada como tal. Correspondientemente, la última etiqueta
o código insertado en una página web debe ser </html>.
Entre ambas etiquetas (o tags en inglés) se deben encontrar las dos áreas
principales que componen la página:
La Cabecera (head).
Demarcada por las etiquetas <head> y </head> (head significa cabeza en
inglés), contiene información sobre el título de la página, su contenido, su
autor, temas tratados, etc.
El cuerpo del documento (body).
Es aquí donde colocamos la información que será desplegada en nuestra
página web, delimitada por las etiquetas <body> y </body> (body significa
cuerpo en inglés).
Veamos entonces un ejemplo simple del texto que conforma una página web
típica:
<html>
<head>
<title>
Mi Página de prueba
</title>
</head>
Fig. 19. Resultado del ejercicio, visualizado en Internet Explorer.

DHTML.
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 algún lenguaje de marcado estático (como HTML), 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 más 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 de la ejecución de un programa en algún tipo de
lenguaje de programación en el servidor de la página web (como por
ejemplo Java , ASP.NET, PHP, 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.

En una página DHTML, una vez ésta ha sido cargada completamente por el
cliente, se ejecuta un código (como por ejemplo en lenguaje JavaScript) que
tiene efectos en los valores del lenguaje de definición de la presentación (por
ejemplo CSS), logrando así una modificación en la información presentada o el
aspecto visual de la página mientras el usuario la está viendo.
XML.
¿QUÉ ES XML?
XML es un subconjunto de SGML(Estándar Generalised Mark-up Language),
simplificado y adaptado a Internet
XML no es, como su nombre puede sugerir, un lenguaje de marcado.
XML, es meta-lenguaje que nos permite definir lenguajes de marcado
adecuados a usos determinados.

¿Qué no es XML?
No es una versión mejorada de HTML
HTML es una aplicación de SGML por lo tanto de XML
No es un lenguaje para hacer páginas WEB y sobre todo no es difícil
¿Por qué XML?
Es un estándar internacionalmente conocido. No pertenece a ninguna
compañía. Permite una utilización efectiva en Internet para sus diferentes
terminales.
Definición
Especificación para diseñar lenguajes de marcado, que permite definir
etiquetas personalizadas para descripción y organización de datos.
¿Para qué sirve XML?
Representar información estructurada en la web (todos documentos), de
modo que esta información pueda ser almacenada, transmitida,
procesada, visualizada e impresa, por muy diversos tipos de aplicaciones y
dispositivos.
Ventajas de XML
 Fácilmente procesable
 Separa radicalmente el contenido y el formato de presentación
 Diseñado para cualquier lenguaje y alfabeto. (encoding)
Características
 XML es un subconjunto de SGML que incorpora las tres
características más importantes de este:
o Extensibilidad
o Estructura
o Validación
 Basado en texto.
 Orientado a los contenidos no presentación.

 Las etiquetas se definen para crear los documentos, no tienen un
significado preestablecido.
 No es sustituto de HTML.
 No existe un visor genérico de XML.
Aplicaciones de XML
 Publicar e intercambiar contenidos de bases de datos.
 Formatos de mensaje para comunicación entre aplicaciones (B2B)
 Descripción de meta contenidos.
Documento XML
 Conjunto de datos con sus respectivas etiquetas de marcado XML.
 Se almacena como texto en archivo con extensión .xml.
 Un documento XML puede incluir cualquier flujo de datos basado en
texto: un artículo de una revista, un resumen de cotizaciones de
bolsa, un conjunto de registros de una base de datos, etc.
Estructura de un documento XML
 Un documento XML está formado por datos de
caracteres y marcado, el marcado lo forman las etiquetas:
Estructura
Componentes de un documento XML
 En un documento XML existen los siguientes componentes:
o Elementos: Pieza lógica del marcado, se representa con
una cadena de texto (dato) encerrada entre etiquetas.
Pueden existir elementos
vacíos (<br/>). Los elementos pueden contener atributos.

o Instrucciones: Ordenes especiales para ser utilizadas por
la aplicación que procesa
<?xml-stylesheettype=“text/css” href=“estilo.css”>
o Las instrucciones XML. Comienzan por <? Y terminan por
?>.
o Comentarios: Información que no forma parte del
documento. Comienzan por .
o Declaraciones de tipo: Especifican información acerca del
documento:
<!DOCTYPE persona SYSTEM “persona.dtd”>
o Secciones CDATA: Se trata de un conjunto de caracteres
que no deben ser interpretados por el procesador:
<![CDATA[ Aquí se puede meter cualquier carácter, como <, &, >,
... Sin que sean interpretados como marcación]]>
EJEMPLO
Sintaxis de XML
 Representa las normas a seguir para la construcción de documentos
XML.
 Estas reglas son dictadas por el organismo W3C
(http://www.w3.org/XML). Entre ellas destacan:
 El XML es Case - Sensitive.
 Todo elemento tiene que tener su correspondiente etiqueta de inicio
y de cierre, o una sola etiqueta vacía.
 Todo documento, debe haber un elemento (llamado raíz de
documento) que contenga a los demás.

 Todos los elementos deberán estar correctamente anidados.
 Todos los valores de los atributos deberán ir entre comillas.
Normas de buena construcción
 La primera letra de los nombre se escribirá en mayúscula
 Los nombres compuestos se escribirán juntos o separados por
guión bajo Saca_corchos
 Los elementos han de comenzar por un carácter o “_” no numérico
Normas de buena construcción II
 Existen 2 tipos de construcciones
XHTML
XHTML (Extensible Hypertext Markup Language), a grandes rasgos, es un
lenguaje de marcado que te permite editar webs. Está basado en HTML 4.01,
pero sus reglas son mucho más estrictas y versátiles que HTML. XHTML es una
nueva formulación de HTML que utiliza el meta lenguaje de marcado XML, lo
cual es una ventaja clave en su usabilidad porque muchos formatos de datos
están basados en XML y los dispositivos modernos requieren una versión estricta
del lenguaje de marcado porque no pueden mostrar mal el código fuente.
XHTML ha sido diseñado para extender HTML y permitir la compatibilidad con
nuevos formatos de datos como videos, imágenes o lenguajes de scripting. Dado
que HTML siempre se basó en SGML y, por lo tanto, era relativamente complejo,
se encontró que un lenguaje meta de marcado limitado, como XML, era
adecuado para definir la estructura básica y las posibilidades sintácticas del
XHTML. Las especificaciones de XHTML 1.0 fueron publicadas por el W3C en
2002. A finales de 2009 se interrumpió el trabajo sobre la versión 2.0 porque el
Grupo de Trabajo de Tecnología de Aplicación de Hipertexto Web (WHATWG)
estaba trabajando en HTML5 al mismo tiempo, y este último fue el que al final
prevaleció.

XHTML se utiliza para marcar contenido como texto, imágenes y enlaces en
forma de hipervínculos para crear una cierta estructura que puede ser mostrada
por los navegadores. Los documentos pueden ser estructurados con XHTML
para hacerlos legibles para un analizador. El analizador interpreta los elementos
de marcado especificados en las definiciones del lenguaje XHTML y reproduce
el contenido de estos elementos de una manera específica.
En última instancia, el usuario ve lo que contienen estos elementos y no la forma
en que se anotan o estructuran los elementos. Este último se llama código fuente
XHTML y puede ser editado con diferentes editores de texto, por ejemplo, con
un editor WYSIWYG. La notación separa el contenido y el diseño. El contenido
está encerrado por los elementos. La forma en que se muestra este contenido
está determinada por los elementos y sólo la muestra el navegador.
Antes de crear un documento XHTML, debe seleccionar una Definición de tipo
de documento. Hay tres tipos, cada uno con ciertas ventajas y desventajas,
transicional, estricto y frameset. Al mismo tiempo, la versión del lenguaje debe
ser especificada, como XHTML 1.0 o 2.0. El marco básico de un archivo
XHTML debe ajustarse exactamente a las reglas, de lo contrario no es WFF
(fórmula bien formada), que es un código fuente válido que cumple con los
requisitos de lenguaje y definiciones de documentos y que puede ser leído por
un navegador.
Las diferencias importantes entre XHTML y HTML son, por ejemplo, la
declaración XML, la definición del tipo de documento, que está en minúsculas, la
conformidad exacta con el marco básico y el hecho de que cada elemento abierto
debe cerrarse de nuevo. Si una de estas reglas no se adhiere en XHTML, el
navegador no puede mostrar el documento, lo que probablemente pueda hacer
con HTML.
Ejemplo de un documento XHTML válido
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>An XHTML document</title>
</head>
<body>
< h1 >Headline of the first order< /h1 >
< p >A paragraph with any text content< /p >
< h2 >Secondary heading< /h2 >
< p >Another paragraph with any text content< /p >
</body>
</html>
ojo link https://es.ryte.com/wiki/XHTML
PHP.
¿Qué es PHP?
PHP (acrónimo recursivo de PHP: HypertextPreprocessor) es un lenguaje de
código abierto muy popular especialmente adecuado para el desarrollo web y
que puede ser incrustado en HTML.
Bien, pero ¿qué significa realmente? Un ejemplo nos aclarará las cosas:
Ejemplo #1 Un ejemplo introductorio
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo</title>
</head>
<body>
<?php
echo "¡Hola, soy un script de PHP!";

?>
</body>
</html>
En lugar de usar muchos comandos para mostrar HTML (como en C o en Perl),
las páginas de PHP contienen HTML con código incrustado que hace "algo" (en
este caso, mostrar "¡Hola, soy un script de PHP!). El código de PHP está
encerrado entre las etiquetas especiales de comienzo y final <?php y ?> que
permiten entrar y salir del "modo PHP".
Lo que distingue a PHP de algo del lado del cliente como Javascript es que el
código es ejecutado en el servidor, generando HTML y enviándolo al cliente. El
cliente recibirá el resultado de ejecutar el script, aunque no se sabrá el código
subyacente que era. El servidor web puede ser configurado incluso para que
procese todos los ficheros HTML con PHP, por lo que no hay manera de que
los usuarios puedan saber qué se tiene debajo de la manga.
Lo mejor de utilizar PHP es su extrema simplicidad para el principiante, pero a
su vez ofrece muchas características avanzadas para los programadores
profesionales. No sienta miedo de leer la larga lista de características de PHP.
En unas pocas horas podrá empezar a escribir sus primeros scripts.
Aunque el desarrollo de PHP está centrado en la programación de scripts del
lado del servidor, se puede utilizar para muchas otras cosas. Siga leyendo y
descubra más en la sección ¿Qué puede hacer PHP?, o vaya directo
al tutorial introductorio si solamente está interesado en programación web.
Ejemplo de Fecha y Tiempo en PHP
Para imprimir la fecha y tiempo en pantalla en PHP utilizamos la función date().
Podemos manejar el formato a mostrar pasándolo como primer argumento Aquí
vea el ejemplo Es demasiado simple, y también podemos manejar el formato
como por ej. Día/Mes/Año. O Día-Mes-Año, el tipo de números, por ejemplo,
Enero = 1, o Enero = 01. Mostrar el nombre del mes directamente. Aunque luego
se necesitaría traducirlo. Ya que generalmente se usa el idioma del...

Ejemplo de Leer contenido de un archivo
En este ejemplo veremos como guardar en una variable el contenido de algún
otro archivo y mostrarlo. Código:<?php$texto = file_get_contents("texto.txt");
//Leemos y guardamos en $texto el archivo texto.txt$texto = nl2br($texto);
//Reemplazamos $texto con un nuevo $texto, pero cambiando los saltos de linea
( ) por un salto de linea en html (br)echo $texto; //Mostramos el texto?> La verdad
es bastante simple, y usando file_get_contents, podriamos leer...
Ejemplo de Leer y mostrar archivo de texto en PHP
En este ejemplo veremos cómo mostrar un archivo de texto en PHP. Tenemos
dos formas, el método del include, y el otro el de lectura de file, usando file o
file_get_contents. El método include es para incluir normalmente el texto, y con
el otro método podremos guardar el contenido del texto en una variable y poder
darle formatos, o remplazar palabras por otras, poner mayúsculas en todas las
letras, etc. Necesitaremos tener un archivo.txt, podremos usar otro nombre,
solo...
Ejemplo de Bucle While en PHP
Anteriormente hemos visto el Ejemplo de Bucle While en Javascript, ahora
veremos un Ejemplo de Bucle While en PHP El Bucle While en PHP se utiliza
para ejecutar un pedazo de código mientras la condición siga siendo verdadera.
Generalmente se suelen usar para contadores, o para mostrar registros de una
base de datos. En este ejemplo, el bucle finalizará cuando el contador llegué a
10. Lo haremos mediante una variable llamada $i, que se suele identificar como...
El concepto clave: completando las páginas HTML en el acto
Vamos a crear, probar y tratar de entender nuestro primer código PHP
Escribamos el siguiente código, dentro de un archivo nuevo creado con nuestro
editor favorito, asegurándonos de guardarlo con un nombre cuya extensión sea
.php, por ejemplo: hola.php

Este será el código de hola.php:
<html>
<head>
</head>
<body>
<p>Esto estaba escrito en HMLT</p>
<?php
print (“<p>Hola mundo! Esto lo escribió el intérprete de PHP</p>”);
?>
</body>
</html>
Este archivo deberá guardarse dentro de la carpeta raíz del servidor Web que
hayamos instalado.
Encendemos el software servidor local.
El software servidor Web quedará a la espera de que le pidamos, a través de un
navegador (Explorer, Firefox, Opera), alguno de los archivos que tiene listos para
servirnos. En este caso le pediremos el archivo hola.php
Para ello, abriremos el navegador y escribiremos la URL necesaria para
solicitarle al servidor Web el archivo hola.php. Este es un tema clave.
En una PC con un servidor Web local deberemos escribir:
http://localhost/ejercicio1/hola.php
o bien usando la dirección IP local
http://127.0.0.1/ejercicio1/hola.php
Atención:
No funcionará ir al menú Archivo à Archivo del navegador, ya que nuestro archivo
PHP necesita ser procesado por el programa intérprete de PHP instalado en el
servidor Web, que debe estar encendido.
Tampoco funciona para quienes tienen Dreamweaver, pulsar F12, por la misma
razón. Ni tampoco funciona darle doble clic al archivo PHP.

En todos esos casos erróneos, si mira la URL, no mencionará en ningún
lado http://localhost/ejercicio1/hola.php. Por esta razón, el software servidor Web
y el intérprete de PHP no procesarán ese archivo.
Una vez solicitada la URL del archivo desde nuestro navegador, y luego de
esperar unos segundos, llegará al navegador el código fuente que fue procesado
en el servidor. A partir de este momento, en el que el código generado llegó a
nuestro navegador, podemos acceder al código fuente que fue entregado a
nuestro navegador (usando el menú: Ver à Código fuente) y, en este ejemplo,
veremos que le ha llegado lo siguiente:
<html>
<head>
<title>Hola</title>
</head>
<body>
<p>Esto estaba escrito en HMLT</p>
<p>Hola mundo! Esto lo escribió el intérprete de PHP</p>
</body>
</html>
Es decir: el intérprete PHP borró todas las órdenes que encontró entre las
marcas <?php y ?>, que son las que indican el comienzo y el fin –
respectivamente – de una zona en la que se va a dar órdenes al intérprete de
PHP y, en lugar de lo que había escrito allí, escribió, mediante la función print, el
texto:
<p>Hola mundo! Esto lo escribió el intérprete de PHP</p>

Java.
Ava fue diseñado por James Gosling, de Sun Microsystems, en 1990, como
software para dispositivos electrónicos de consumo, como calculadoras y
microondas. Inicialmente se llamó Oak (roble en inglés), aunque tuvo que
cambiar debido a que dicho nombre ya estaba registrado por otra empresa.
Gosling observó que muchas de las características que ofrecían C o C++ para
este tipo de dispositivos aumentaban de forma alarmante el gran coste de
pruebas y depuración. Por ello en los sus ratos libres creó un lenguaje de
programación donde intentaba solucionar los fallos que encontraba en C++. Es

decir, en lugar de tratar únicamente de optimizar las técnicas de desarrollo y dar
por sentado la utilización de C o C++, el equipo de Gosling se planteó que tal
vez estos lenguajes eran demasiado complicados como para conseguir reducir
de forma apreciable la complejidad asociada a este campo. Por este motivo, su
primera propuesta fue idear un nuevo lenguaje de programación lo más sencillo
posible, con el objeto de que se pudiese adaptar con facilidad a cualquier entorno
de ejecución. Basándose en el conocimiento y estudio de gran cantidad
de lenguajes, ste grupo decidió recoger las características esenciales que debía
tener un lenguaje de programación moderno y potente, pero eliminando todas
aquellas funciones que no eran absolutamente imprescindibles.
El fracaso comercial de FirstPerson, la filial creada por Sun para este mercado,
llevó al lenguaje al olvido. Tuvo que ser Bill Joy, cofundador de Sun y uno de los
desarrolladores principales del sistema operativo Unix de Berkeley, quien lo
sacara de él, ya que juzgó que Internet podría llegar a ser el campo de juego
adecuado para disputar a Microsoftsu primacía casi absoluta en el terreno del
software, y vio en Oak el instrumento idóneo para llevar a cabo estos planes.
Para poderlo presentar en sociedad se tuvo que modificar el nombre de este
lenguaje de programación y se tuvo que realizar una serie de modificaciones de
diseño para poderlo adaptar al propósito mencionado. Y así Java fue presentado
en sociedad en agosto de 1995.
El éxito de Java reside en varias de sus características. Java es un lenguaje
sencillo , o todo lo sencillo que puede ser un lenguaje orientado a objetos,
eliminando la mayor parte de los problemas de C++, que aportó su granito (o
tonelada) de arena a los problemas de C. Es un lenguaje independiente de
plataforma, por lo que un programa hecho en Java se ejecutará igual en un PC
con Windows que en una estación de trabajo basada en Unix. También hay que
destacar su seguridad, desarrollar programas que accedan ilegalmente a la
memoria o realizar caballos de troya es una tarea propia de titanes.
Cabe mencionar también su capacidad multihilo, su robustez o lo integrado que
tiene el protocolo TCP/IP, lo que lo hace un lenguaje ideal para Internet. Pero es
su sencillez, portabilidad y seguridad lo que le han hecho un lenguaje de tanta
importancia.

JavaScript.
Javascript es un lenguaje que puede ser utilizado por profesionales y para
quienes se inician en el desarrollo y diseño de sitios web. No requiere de
compilación ya que el lenguaje funciona del lado del cliente, los navegadores son
los encargados de interpretar estos códigos.
Muchos confunden el Javascript con el Java pero ambos lenguajes son
diferentes y tienes sus características singulares. Javascript tiene la ventaja de
ser incorporado en cualquier página web, puede ser ejecutado sin la necesidad
de instalar otro programa para ser visualizado.
Java por su parte tiene como principal característica ser un lenguaje
independiente de la plataforma. Se puede crear todo tipo de programa que puede
ser ejecutado en cualquier ordenador del mercado: Linux, Windows, Apple, etc.
Debido a sus características también es muy utilizado para internet.
Como síntesis se pude decir que Javascript es un lenguaje interpretado, basado
en prototipos, mientras que Java es un lenguaje más orientado a objetos.
¿Qué es Javascript?
Javascript es un lenguaje con muchas posibilidades, utilizado para crear
pequeños programas que luego son insertados en una página web y en
programas más grandes, orientados a objetos mucho más complejos. Con
Javascript podemos crear diferentes efectos e interactuar con nuestros usuarios.
Este lenguaje posee varias características, entre ellas podemos mencionar que
es un lenguaje basado en acciones que posee menos restricciones. Además, es
un lenguaje que utiliza Windows y sistemas X-Windows, gran parte de la
programación en este lenguaje está centrada en describir objetos, escribir
funciones que respondan a movimientos del mouse, aperturas, utilización de
teclas, cargas de páginas entre otros.
Es necesario resaltar que hay dos tipos de JavaScript: por un lado está el que
se ejecuta en el cliente, este es el Javascript propiamente dicho, aunque
técnicamente se denomina Navigator JavaScript. Pero también existe un

Javascript que se ejecuta en el servidor, es más reciente y se denomina
LiveWireJavascript.
¿Cómo nace Javascript?
Javascript nació con la necesidad de permitir a los autores de sitio web crear
páginas que permitan intercambiar con los usuarios, ya que se necesitaba crear
webs de mayor complejidad. El HTML solo permitía crear páginas estáticas
donde se podía mostrar textos con estilos, pero se necesitaba interactuar con los
usuarios.
En los años de 1990, Netscape creo Livescript; las primeras versiones de este
lenguaje fueron principalmente dedicadas a pequeños grupos de diseñadores
Web que no necesitaban utilizar un compilador, o sin ninguna experiencia en
la programación orientada a objetos.
A medida que estuvieron disponibles nuevas versiones de este lenguaje incluían
nuevos componentes que dan gran potencial al lenguaje, pero lamentablemente
esta versión solo funcionaba en la última versión del Navigator en aquel
momento.
En diciembre de 1995, Netscape y Sun Microsystems (el creador del lenguaje
Java) luego de unirse objetivo de desarrollar el proyecto en conjunto,
reintroducen este lenguaje con el nombre de Javascript. En respuesta a la
popularidad de Javascript, Microsoft lanzo su propio lenguaje de programación
a base de script, VBScript (una pequeña versión de Visual Basic).
Tecnología ASP
ASP
Primero que nada, debemos definir lo que es ASP, esta no es otra cosa que una
tecnología de desarrollo web creada por la compañía Microsoft en el año de 1996
y que forma parte del Internet Information Server (IIS), que viene incluido en
las versiones de Windows NT.

El nombre ASP son unas siglas de la frase inglesa Active Server Pages o
servidor activo de páginas web y., tiene como principal objetivo, ofrecer al
desarrollador la capacidad de incluir características dinámicas a sus sitios web,
de forma que pueda combinar perfectamente el código tradicional
de HTML (lenguaje de hipertexto), con cualquier tipo de script que nos permita
obtener el resultado que deseamos.
Figura 2: Funcionamiento de ASP
Podemos decir entonces que ASP, es una especie de ambiente de aplicación
abierta y gratuita que combina elementos de ActiveX, scripts y HTML, para lograr
una combinación poderosa que permitirá al desarrollador web obtener un
acabado completamente profesional con poco esfuerzo.
Dónde se ejecuta ASP
Una de las principales características que hacen destacar ASP frente a otras
opciones de desarrollo web dinámico, es que se ejecuta directamente desde el
lado del servidor, es decir, el usuario final no tiene que instalar absolutamente
nada en su ordenador. De esta manera, sólo tiene que acceder al sitio web y
podrá disfrutar de las comodidades dinámicas dispuestas por el desarrollador de
forma automática.

Figura 3: Diagrama de funcionamiento de tecnología ASP
El funcionamiento de esta tecnología es simple: Una vez que el cliente solicita el
sitio web al servidor (documento ASP), los programas y las órdenes creadas en
scripts se realizan en el servidor y los resultados son devueltos al cliente de
manera que el usuario sólo visualiza las ejecuciones de estos programas viendo
los efectos dinámicos en su PC, sin necesidad de tener que instalar nada en su
equipo.
En la primera parte de este artículo, estuvimos viendo cómo funciona la
tecnología ASP, así como, su definición y cuando fue creada. En esta segunda
parte, estaremos revisando las tecnologías que son utilizadas en el desarrollo de
aplicaciones con ASP, cómo se incluye este tipo de código en nuestro HTML
principal y cuáles son los principales usos y tareas que podemos realizar con
este tipo de tecnología.
Tecnologías que utiliza ASP
ASP trabaja principalmente con el lenguaje de hipertexto o HTML, que a su vez
es combinada en un principio con scripts de VBScript. Pero, en la actualidad
puede trabajar con diferentes lenguajes interpretados, como
JavaScript, Perl, Python, entre otras.

Figura 4: Ejecución de ASP
También debemos destacar que se puede ir adicionando controles ActiveX, lo
que nos permitirá ofrecer aspectos visuales bastante interesantes. De esta
manera, el desarrollo de aplicaciones dinámicas será mucho más simple, ya que
combina tecnologías eficientes y no utiliza una sola vía como ofrecen otras
alternativas de desarrollo web.
Qué tareas se pueden realizar con ASP
Figura 5: Activando ASP

ASP permite realizar diversas tareas dese el servidor, muchas de estas
complicadas, lo que nos permite crear aplicaciones orientadas a web de gran
calidad. Entre las tareas más comunes tenemos las siguientes:
 Generar gráficos dinámicos.
 Enviar e-mail.
 Acceso al sistema de archivos del servidor.
 Realizar búsquedas en base de datos.
 Acceder a cualquier tabla de base de datos.
 Realizar cálculos.
 Acceder a servicios de red.
Estas tareas, son sólo algunas de las que se pueden desarrollar con ASP, ya
que al dominar un lenguaje interpretado, como Perl, VBScript o JS el cielo será
el límite para el desarrollador web.
Usos de ASP
Figura 6: ASP
ASP Puede utilizarse para generar sitios web dinámicos o aplicaciones
cliente/servidor que requieran acceso a base de datos. Así, podremos contar con
una herramienta versátil que cuente con un sistema simple de solución de
problemas corporativos, o con un sitio agradable y dinámico para los usuarios
de Internet.

Cómo se adicionan órdenes ASP al código
Las órdenes ASP, pueden ser incluidas en un simple código HTML dentro de
unas etiquetas limitadas por los símbolos “<% y %>” cómo las órdenes de PHP
u otros lenguajes de programación script, asegurándose así, que se ejecuten
sólo del lado del Server y que el usuario final no tenga acceso a dichas órdenes
Tecnologías de desarrollo de Aplicaciones Web
Conceptos básicos sobre tecnologías de desarrollo web
Los modelos y tecnologías de desarrollo web han evolucionado mucho en la
última década, existen multitud de aplicaciones, frameworks, librerías,
arquitecturas y sistemas de publicación en diferentes versiones que a su vez
reciben cambios o mejoran con el tiempo.
El progreso también ha tenido lugar en lo relacionado con la administración de
sistemas, servicios de alojamiento, técnicas de escalabilidad, monitorización y
gestión de centros de procesos de datos.
Esta evolución ha dado lugar a la convergencia de una gran cantidad de
tecnologías, herramientas y estilos arquitectónicos para desarrollar sitios web y
aplicaciones, te contamos los aspectos más importantes relacionados con ellos,
y la manera en la que interactúan entre sí.
Contenidos de esta publicación
1 Arquitectura básica de una aplicación web
2 Tecnologías del lado del cliente o del lado del servidor
3 Arquitecturas web de contenido estático o dinámico
4 Tecnologías estándar del lado cliente
5 Tecnologías no estándar para desarrollo web
6 Tecnologías de servidor
7 Bases de datos

8 Sistemas gestores de contenidos
9 Conclusiones
Arquitectura básica de una aplicación web
Para que un sitio o aplicación web funcione mostrándose al público es necesaria
una arquitectura que disponga como mínimo los siguientes elementos:
El navegador: Representa el concepto de cliente realizando peticiones
solicitando recursos a diferentes servidores web a través de URL.
El Servidor: Almacena de forma organizada la estructura de la información del
sitio web para servir los contenidos en relación a las peticiones del navegador.
El protocolo http: Es el protocolo basado en TCP/IP a través del cual el
navegador realiza peticiones al servidor para que este responda.
HTML: Es el formato básico de los documentos que componen las páginas web,
está basado en etiquetas y sirve para estructurar la forma de mostrar los
contenidos de las páginas.
CSS: Las hojas de estilo en cascada sirven para favorecer estéticamente los
elementos y contenidos estructurados a través de las etiquetas HTML,
dotándoles de personalidad en cuanto a su diseño, forma y colores.
Tecnologías del lado del cliente o del lado del servidor
Además de reunir los requisitos anteriores básicos para funcionar, un sitio o
aplicación web puede crearse utilizando diferentes tecnologías que se dividen en
dos grandes categorías:
Tecnologías de cliente: Son aquellas que permiten crear interfaces de usuario
y establecer comunicación con el servidor basadas en HTML, CSS y JavaScript,
en este caso, el navegador actúa como intérprete.

Tecnologías de servidor: Permiten implementar comportamientos de la
aplicación web en el servidor, los lenguajes de programación más utilizados son
Java EE, .NET, PHP, Ruby onRails, Python, Django, Groovy, Node.js, etc…
Arquitecturas web de contenido estático o dinámico
Se dice que el contenido que muestra una determinada página o sitio web al
completo es contenido estático cuando no permite la interacción del usuario de
ninguna forma, por el contrario las páginas que invitan a interactuar con el
visitante a través de diferentes elementos como formularios, botones, mapas,
etc… ofrecen contenido dinámico.
Cliente estático y servidor estático: En este modelo el navegador hace una
petición al servidor mediante el protocolo http, el servidor transforma la URL a
ruta de disco y devuelve el fichero al navegador que lo dibuja o renderiza
mostrando la estructura de la página en HTML y su contenido como fotos y
vídeos, también la estética de su diseño gracias a los estilos CSS.
En este caso no existe ningún tipo de interacción utilizando JavaScript, el
servidor devuelve siempre los mismos recursos, así que desde este punto de
vista la web es estática.
Cliente estático y servidor dinámico: Este modelo se compone de 3 capas, ya
que intervienen por un lado el navegador y el servidor web, pero también una
base de datos asociada a este último.
Cuándo el servidor recibe una petición, devuelve contenido del disco o ejecuta
código para generar el recurso dinámicamente, este código normalmente realiza
consultas a la base de datos para recuperar la información, generando la página
HTML y contenidos de forma dinámica.
Cliente dinámico y servidor estático: En contenido está alojado en el disco
duro del servidor de forma estática, pero el cliente es dinámico porque las
páginas incluyen código JavaScript que se ejecuta en el navegador.

Este código JavaScript puede realizar acciones y efectos gráficos, mostrar y
ocultar información, desplegar elementos interactivos, adaptar los contenidos,
etc…
Cliente dinámico y servidor dinámico: Se combinan los conceptos de los dos
casos anteriores, utilizando JavaScript para efectos gráficos y comportamientos
interactivos, pero también para realizar peticiones en segundo plano (AJAX) y
aplicaciones de página única con API REST.
JavaScript se puede utilizar para no tener que recargar completamente la página
al pulsar un enlace, realizando peticiones al servidor web en segundo plano
(ocultas al usuario). Cuando llega al navegador el resultado de la petición, el
código JavaScript actualiza solo las partes necesarias de la página.
A esta técnica se la conoce como AJAX (Asynchronous JavaScript And XML) y
mejora mucho la experiencia de usuario ya que al realizar las peticiones el
servidor puede devolver fragmentos de HTML generados dinámicamente,
recursos estáticos en disco como imágenes, PDF, mostrar errores, cambiar
colores, información estructurada en XML o JSON, etc…
Tecnologías estándar del lado cliente
El W3C (World Wide Web Consortium) es una comunidad internacional que
desarrolla estándares abiertos que aseguran el crecimiento de la web a largo
plazo, tales como HTML5&CSS, Scripting and AJAX, normas de accesibilidad,
gráficos, audio y vídeo, web semántica, XML y muchos más.
HTML: (HypertextMarkupLanguaje) proporciona la información estructurada en
secciones, párrafos, título, imágenes, etc… la versión actual el HTML5, y ofrece
muchas librerías avanzadas para la inserción de contenidos multimedia, canvas,
comunicaciones y concurrencia.
CSS: (Cascading Style Sheets) se encarga de la distribución de los elementos y
su estilo con colores, tipos de letra, fondos, efectos, etc…en documentos HTML,
XML, SVG o incluso interfaces de usuario de otras tecnologías.

Scripting: Gracias al scripting las páginas pueden programarse con distintos
lenguajes de script, aunque principalmente se utiliza JavaScript, que modifica la
página gracias a su capacidad de ejecutar código cuando se interactúa con ella.
JavaScript inicialmente era un lenguaje interpretado pero actualmente también
se ejecuta con máquinas virtuales en los navegadores aumentando la velocidad
de ejecución y eficiencia de memoria. Es de tipado dinámico y funcionalmente
orientado a objetos (basado en prototipos).
Existen multitud de bibliotecas (APIS) para el desarrollo web y de aplicaciones,
pero las más utilizadas son JQuery y Underscore.js.
DOM: Es el modelo de objetos del documento (Document Object Model) y consta
de una librería (API) para manipular el documento HTML cargado en el
navegador, permitiendo la gestión de eventos, o la inserción y eliminación de
elementos.
Tecnologías no estándar para desarrollo web
Durante bastante tiempo la carencia de tecnologías abiertas para realizar
diferentes acciones asociadas a comportamientos y contenidos multimedia hizo
que algunas tecnologías propietarias ocuparan este hueco, siempre por iniciativa
de empresas de desarrollo de software, a continuación destacamos algunas de
las más conocidas.
Adobe Flash: Se trata de una tecnología utilizada para incrustar contenido
multimedia interactivo en páginas web que predominó durante mucho tiempo,
gratuita para el usuario pero de carácter propietario y cerrado para los
desarrolladores, que deben pagar licencia para poder usarla, motivo principal por
el que está cada vez más en desuso.
Java Applets: Los Applets de Java fueron los precursores de Flash, pero debido
a prácticas anticompetitivas de Microsoft y de Sun Microsystems estaba más
centrada en los servidores de aplicaciones, así que también hace tiempo que se
encuentra en desuso.

Microsoft Silverligth: Fué durante tiempo la apuesta de Microsoft para competir
con Adobe Flashs, pero el soporte era muy limitado en plataformas diferentes a
Windows.
Tecnologías de servidor
Los estándares son muy importantes en los navegadores web (cliente) ya que
es importante que la web sea compatible con cualquier dispositivo, sin embargo
estos estándares no son necesarios en el servidor, por que cada organización
desarrollará su servidor con la tecnología que crean conveniente.
En el servidor se utilizan tecnologías propietarias o abiertas para el desarrollo de
aplicaciones web, existen multitud de ellas, entre ellas las más usadas son PHP,
Java EE y ASP.NET, y las menos usadas Ruby onRails, Grails (Groovy), Django
(Phyton), Perl, ColdFusion, hay muchas más, pero entre ellas comentamos a
continuación las más destacadas.
Java EE: Es una tecnología basada en Java desarrollada por una coalición de
empresas lideradas por Oracle, IBM, Red Hat, etc… muy utilizada a nivel
empresarial, la mayoría de implementaciones y herramientas para desarrollo son
software libre, y existen comunidades de desarrolladores y empresas que
realizan complementos.
PHP: Es una tecnología con lenguaje propio, desarrollada por PHP Group y con
licencia libre. Es la tecnología de lado de servidor con la que se han
implementado más servidores en Internet, es multiplataforma y se integra
normalmente con Apache y MySQL en entornos Linux gracias a un paquete
llamado LAMP.
ASP.NET: Se trata de una versión evolucionada del ASP clásico, está integrada
en la tecnología .NET de Microsoft junto con el lenguaje C#, tiene licencia
propietaria y para plataformas Windows y una comunidad de desarrolladores má
limitada que otras alternativas.
Bases de datos

Las bases de datos más populares y utilizados para el desarrollo de aplicaciones
web son las bases de datos relacionales. Hay muchas bases de datos
relacionales tanto comerciales como de software libre como MySQL, Derby,
Oracle, MS SQL Server, PostgreSQL.
Actualmente el sistema gestor de bases de datos más utilizado es MySQL, es
multiplataforma y está desarrollado en C, tiene licencia de código abierto GPL y
consta de una herramienta interactiva para hacer consultas y crear bases de
datos, en su conjunto se ha hecho muy popular en el desarrollo web.
Las aplicaciones web tienen necesidad de escalabilidad y tolerancia a fallos, es
por esto que se está haciendo hueco una nueva familia de bases de datos
denominadas NoSQL, entre las que se encuentran Cassandra, mongoDB, riak,
redis.
Sistemas gestores de contenidos
Desde hace tiempo se imponen los sistemas de gestión de contenidos o CMS
(Content Management System), que son de aplicaciones web prediseñadas y
configuradas inicialmente para crear y administrar contenidos online.
Los CMS utilizan conjuntamente varias de las tecnologías anteriormente
descritas, y han evolucionado para convertirse en un nuevo modelo de
desarrollo de sitios web, configurando y adaptando módulos por medio de una
interfaz web.
El sistema también permite manejar de manera independiente el diseño y el
contenido, modificando su estructura por medio de plantillas o temas.
Existen multitud de CMS con enfoques y objetivos diferentes como Drupal (PHP),
Joomla (PHP), WordPress (PHP), Plone (JavaScript), Moodle (PHP), Liferay
(Java), PrestaShop (PHP), etc…
.

Resumen
La unión de un buen diseño con una jerarquía bien elaborada de contenidos,
aumenta la eficiencia de la web como canal de comunicación e intercambio de
datos, que brinda posibilidades como el contacto directo entre el productor y
el consumidor de contenidos.
El diseño web ha visto amplia aplicación en los sectores comerciales de Internet
especialmente en la World Wide Web. A menudo la web se utiliza como medio
de expresión plástica en sí. Artistas y creadores hacen de las páginas en Internet
un medio más para ofrecer sus producciones y utilizarlas como un canal más de
difusión de su obra.
Referencia de la Unidad I
1. https://es.wikipedia.org/wiki/Dise%C3%B1o_web
2. http://www.onu.org.do/instraw/practica/index.html
3. https://es.wikipedia.org/wiki/HTML_dinámico
4. https://disenowebakus.net/mezclando-php-y-html.php
5. http://www.ciberaula.com/cursos/java/que_es_java.php
6. https://www.ingeniovirtual.com/conceptos-basicos-sobre-
tecnologias-de-desarrollo-web/
7. http://www.maestrosdelweb.com/que-es-javascript/
8. Actividades
 Los estudiantes realizan un esquema de las principales funciones de la
web.
 Seleccionan el lenguaje de programación de su preferencia de los que
hemos tratados en la unidad para el diseño de la web y así se perfilan
para su futuro.
Ejercicios - Conceptos básicos 1
Enunciado
En el código base que se te proporciona debes realizar los siguientes cambios:

 Las siglas HTML deben aparecer como texto destacado en toda la página.
 Tim Berners-Lee debe aparecer como texto enfatizado en toda la página.
 Debes añadir el siguiente contenido:
o Un encabezado de nivel 1 con el texto "HTML" antes de "HTML son las siglas
de..."
o Un encabezado de nivel 2 con el texto "Historia de HTML" antes de "Los inicios
del lenguaje HTML..."
o Un encabezado de nivel 2 con el texto "Versiones de HTML" antes de dos
nuevos párrafos que contienen el texto "Tim Berners-Lee definió la primera
versión de HTML en el año 1991" y "En la actualidad, la última versión de
HTML es HTML5".
El resultado final debe ser una página web que tenga el mismo aspecto que la
siguiente imagen:
Código base
<!DOCTYPEhtml>
<html>
<head>
<title>El título de la página</title>
</head>
<body>
<p><strong>HTML</strong> son las siglas de
<em>HyperTextMarkupLanguage</em>, que puede traducirse como lenguaje
de marcas o marcado de hipertexto.

</p>
<p>El lenguaje HTML se emplea para crear las páginas web. Es muy fácil ver
el código HTML de una página web, la opción exacta cambia de un navegador
a otro y también puede cambiar de una versión a otra de un mismo navegador,
pero suelen tener un nombre similar.
</p>
<p>HTML se compone de etiquetas que se escriben entre los símbolos menor
que y mayor que.</p>
<p>Los inicios del lenguaje HTML se remontan al año 1990, cuando Tim
Berners-Lee creó la primera página web.</p>
</body>
</html>
Solución
<!DOCTYPEhtml>
<html>
<head>
<title>HTML</title>
</head>
<body>
<h1>HTML</h1>

<p><strong>HTML</strong> son las siglas de
<em>HyperTextMarkupLanguage</em>, que puede traducirse como lenguaje
de marcas o marcado de hipertexto.
</p>
<p>El lenguaje <strong>HTML</strong> se emplea para crear las páginas web.
Es muy fácil ver el código <strong>HTML</strong> de una página web, la
opción exacta cambia de un navegador a otro y también puede cambiar de una
versión a otra de un mismo navegador, pero suelen tener un nombre similar.
</p>
<p><strong>HTML</strong> se compone de etiquetas que se escriben entre
los símbolos menor que y mayor que.</p>
<h2>Historia de HTML</h2>
<p>Los inicios del lenguaje <strong>HTML</strong> se remontan al año 1990,
cuando <em>Tim Berners-Lee</em> creó la primera página web.</p>
<h2>Versiones de HTML</h2>
<p><em>Tim Berners-Lee</em> definió la primera versión de
<strong>HTML</strong> en el año 1991.</p>
<p>En la actualidad, la última versión de <strong>HTML</strong> es
HTML5.</p>
</body>
</html>

10.Glosario de la Unidad I
A
ADSL: abreviatura de Asymmetric Digital Subscriber Line. Se trata de un método
de transmisión de datos a través de la línea telefónica de cobre tradicional a
velocidad alta. Los datos pueden ser descargados a distinta velocidad que son
cargados, esta es la razón por la cual se le denomina asimétrico. Esta tecnología
es adecuada para la Web, ya que es mucho mayor la cantidad de datos que se
envían del servidor a un ordenador personal, que a la inversa. Existen distintas
velocidades y en diferentes países se han implantado tecnologías como ADSL 2
y ADSL+2 que permiten un gran ancho de banda con capacidades para la
transmisión de televisión y vídeo de alta calidad.
Agente: tipo de software programado para rastrear Internet y realizar una función
específica para el usuario. También se denomina robot. Los tipos más comunes
de agentes son los programas llamados spiders y worms (arañas y gusanos),
que transitan por Internet, recolectan la información e indizan los contenidos para
crear sus propias bases de datos. Existen también agentes inteligentes con
funciones más complejas, que son capaces de reconocer las preferencias de los
usuarios para ayudarles de forma inteligente.
Ancla/anclaje: en un hipertexto, es el punto de partida y de destino de un enlace.
ANSI: American National Standards Institute. El banco de datos para el
desarrollo voluntario de estándares en los EE.UU.
Applet: pequeño programa hecho en lenguaje Java que se introduce en un
archivo HTML.
Archie: permite la búsqueda de información en los servidores de FTP anónimos.
Se basa en la arquitectura cliente/servidor y da un nombre a ambos.
ARP: Address Resolution Protocol. Protocolo que realiza la conversión de
direcciones IP a direcciones de hardware de los dispositivos asociados.
ARPANET: abreviatura de Advanced Research Projects Administration Network,
el sistema de red informática del cual nació Internet. ARPANET comenzó en

1969 como un experimento del Ministerio de Defensa de los EE.UU. que probaba
las redes de comunicación por medio de paquetes de información.
B
Banner: imagen, gráfico o texto utilizado con fines publicitarios que generalmente
presenta un pequeño tamaño, aparece en una página web y habitualmente la
enlaza con el sitio web del anunciante.
Base de datos: formato estructurado para organizar y mantener informaciones
que pueden ser fácilmente recuperadas.
BIT: dígito binario. Unidad mínima de almacenamiento de la información cuyo
valor puede ser 0 ó 1; o bien verdadero o falso.
BICI: Book Item and Contribution Identifier. Un estándar que está desarrollando
la NISO con el fin de identificar a los autores de obras en línea.
Blog: también denominado bitácora o weblog. Es un sitio web con anotaciones
hechas en forma cronológica y escrita por una persona o un grupo de personas.
Se trata de un diario o registro discontinuo de notas y opiniones sobre los temas
más variados: personales (opiniones, impresiones, pensamientos, sucesos, etc.)
o grupales (hay blogs referentes a todo tipo de materias: tecnológicos, literarios,
políticos, sociales, informativos, etc.) y que abarcan desde aspectos muy
generales hasta los sumamente especializados.
C
CD-R: Compact Disc Grabable es un CD que permite una única escritura, es
decir, permite grabar datos una sola vez. Tiene capacidad de grabar 700 MB u
80 minutos a una velocidad de 48X. Los datos grabados no pueden ser borrados.
CD-ROM: Compact Disc ReadOnlyMemory es un medio de almacenamiento
óptico de sólo lectura.
CD-RW: Compact Disc Rewriter. CD regrabable, esto es, que ofrece la
posibilidad de grabar y borrar información.
CERN: el CERN, Laboratorio de Física de Partículas fue el centro donde se
desarrolló la World Wide Web, buscando construir un sistema de hipertexto e

hipermedia. Actualmente la iniciativa en el desarrollo de especificaciones
y software la lleva a cabo el W3C Consortium.
CGI: Common Gateway Interface. Es un interfaz para que programas externos
(pasarelas) puedan funcionar bajo un servidor de información. Actualmente, los
servidores de información soportados son servidores HTTP (hypertext Transfer
Protocol). Se trata de una interfaz escrita en un lenguaje de programación
(PERL, C, C++, Visual Basic, etc) y posteriormente ejecutada o interpretada por
un servidor con la finalidad de contestar a pedidos del usuario, el cual la visualiza
desde una computadora con una aplicación cliente; casi siempre desde la WWW.
Esta interfaz permite obtener los resultados pedidos, como los que resultan al
consultar una base de datos; y está formada por ventanas, botones, menús e
iconos, entre otros elementos.
Chat: Abreviatura de Internet Relay Chat. Es un servicio basado en el modelo
cliente-servidor que permite que múltiples usuarios en red conversen sobre un
tema común, normalmente los temas de discusión dan nombre a los diferentes
canales que ofrece un mismo servidor. Se trata también de un protocolo mundial
para conversaciones simultáneas que permite comunicarse por escrito entre sí
a través del ordenador a varias personas en tiempo real. El servicio IRC está
estructurado mediante una red de servidores, cada uno de los cuales acepta
conexiones de programas cliente, uno por cada usuario. Los términos chat y
chatear se han convertido en términos muy comunes para describir la
comunicación simultánea entre usuarios en tiempo real.
Ciber (cyber): prefijo utilizado en la comunidad Internet para denominar
conceptos relacionados con las redes (cibercultura, ciberespacio, cibernauta,
etc.). Su origen proviene del griego "cibernao" que significa "pilotar una nave".
D
Dato: unidad mínima que compone cualquier información.
DejaNews: uno de los índices más completos de los grupos de noticias de la
WWW.
DHTML o HTML Dinámico: extensiones del lenguaje HTML que permiten crear
páginas web más animadas y expresivas.

Dirección de Correo Electrónico (e-mail address): Serie de caracteres,
numéricos o alfanuméricos, por medio de los cuales se puede enviar un mensaje
al correo electrónico de un usuario dado. Dicha dirección es única para cada
usuario y se compone por el nombre (log in) de un usuario, arroba y el nombre
del servidor de correo electrónico (socios@hipertexto.info).
Dirección IP: dato de 32 bits dividido en octetos que identifican unívocamente
nodos de una Internet.
Disco Compacto (CD): disco óptico de 12 cm de diámetro para almacenamiento
binario. Su capacidad de "formateado" es de 700/800 Mb. y era usado en
principio para almacenar audio. Cuando se utiliza para almacenamiento de datos
genéricos es llamado CD-ROM.
E
EAD: EncodingArchivalDescription. Método de descripción de metadatos para
archivos.
E-book (libro electrónico): libro en formato digital que, en algunos casos, requiere
programas específicos para su lectura. Suele aprovechar las posibilidades del
hipertexto, de los enlaces y del multimedia, y puede estar disponible en la red .
E-mail: correo electrónico. Sistema de comunicación que permite el intercambio
de mensajes, archivos y cualquier otra información, entre usuarios conectados
a una red de ordenadores Internet o Intranet. Sólo es necesario un buzón y una
dirección electrónica. Utiliza el protocolo de comunicación TCP/IP.
Emoticón: símbolo gráfico que normalmente, si se mira de lado, representa un
rostro humano en sus diversas expresiones, mediante el cual una persona puede
mostrar su estado de ánimo en un medio "frío" como es el ordenador. Se
construye por la combinación de varios signos de puntuación que se encuentran
en el teclado. El más común es smiley : - ) este símbolo nació de la utilización
de los caracteres ASCII (American StándarCodeforInformationInterchange).
En Línea (on Line): condición de estar conectado a una red.
Enlace o link: conexión entre los nodos de un hipertexto.
G

Gateway: puerta de enlace entre dos o más redes.
GOPHER: sistema de búsqueda de información en Internet a base de menús,
que permite navegar por directorios FTP y bases de datos.
GIF (Graphics Interchange Format): Graphics Interchange Format. Formato de
archivo gráfico que utiliza un esquema de compresión desarrollado por Compu
Serve en 1987. Los archivos pueden ser transmitidos de manera rápida y fácil
por la red gracias al hecho que éstos están comprimidos. Es el formato más
utilizado en la World Wide Web.
GIF animado: la versión GIF89a permite gráficos animados al almacenar varios
archivos con formato GIF de manera que un navegador puede desplegar cada
una de las imágenes en orden. Muy utilizado en los banners.
GNU: La Fundación para el Software Libre (Free Software Foundation-FSC) se
dedica a eliminar las restricciones de uso, copia, modificación y distribución
del software. Promueve el desarrollo y uso del software libre y ofrece un sistema
de software libre llamado GNU.
GOPHER: sistema de entrega de información distribuido, ya casi no se utiliza en
la red.
11. Anexos y textos

Unidad II. Sonidos y Multimedia Francisca Feliz
Introducción y Orientaciones para el estudio
Hoy día sin proponérnoslo todos hacemos usos de los URLs al enviar los
videos, documentos, imágenes o textos, vía Gmail, WhatsApp, Facebook, de
alguna forma lo hemos utilizados sin saber qué hacemos uso de este importante
concepto de la Web, el identificador de recursos, es el tema que nos ocupa en
esta unidad II.
Para conocer y manejar eficientemente los URLs y sus tipos les invitamos
a seguir con sus estudios sobre los tópicos que nos mantienen unidos y
motivados a desarrollar las páginas Web al eficientizarlas con cada uno de los
URLs, que nos simplifican la vida a la hora de consultar en la web.
2.2. Objetivos de la Unidad II:
 Elaborar y explicar los diferentes conceptos sobre estructura del
documento, enlaces y URLs.
 Analizar las distintas secciones que componen las páginas HTML.
 Identificar para que sirve una URL y seleccionar los esquemas más usados.
 Describir el proceso de un formato, esquema y sintaxis de las direcciones
URL.

Esquema de los Contenidos
2.0 Estructura del documento.
2.1.1. Bgcolor
2.1.2. Backgroud
2.2. Enlaces.
2.3. URLs. (Tipos).
2.3.1 Concepto de URL
2.3.2 ¿Para qué sirve una URL?
2.3.3 ¿Cómo y porqué surge la URL?
2.3.4. Formatos, esquemas y sintaxis de las direcciones URL.
3. Resumen
4. Bibliografía de la Unidad
5. Actividades
8. Glosario
2.0 ESTRUCTURA DEL DOCUMENTO.
Todos los documentos HTML tienen la estructura que se muestra a continuación,
aunque la etiqueta <body>puede ser sustituido por <frameset> para un tipo de
páginas que dividen la ventana del navegador en varios cuadros (frames).
<HTML>
<HEAD>
<TITLE>Título de la página</TITLE>
...
</HEAD>
<BODY>
Aquí iría el contenido de la página
</BODY>
</HTML>

Entre las etiquetas <html> y <head> se suelen colocar otras opciones, como por
ejemplo:
En este caso las etiquetas le indican a los buscadores el contenido de nuestras
páginas (description) y algunas palabras clave (keywords) para su localización.
La cabecera es la sección comprendida entre head y head. En ella se encuentra
necesariamente el titulo (entre las etiquetas title y title).
El título de la página debe describir su contenido por ejemplo:
<TITLE> Colegio Público de Villamañan
Ámbito de Influencia-</TITLE> no valdría en cambio
<TITLE>Pagina de Inicio-</TITLE>ya que esto no dice nada por sí solo.
Dentro de la cabecera también suele incluir código de JavaScript, que se
reconoce porque va comprendido entre las etiquetas.
El cuerpo (body) del documento html es normalmente lo más importante. Es aquí
donde debemos colocar el contenido de nuestra página: texto, fotos, etc.
El cuerpo está delimitado por las etiquetas <body> y </body> la etiqueta <body>
suele contener algunos atributos, a saber:
2.1.1 BGCOLOR
Parámetro usado para especificar el color de fondo de la página. El color se
define como una terna de números en base hexadecimal en el orden rojo, verde,
azul (Red, Green, Blue). También se puede usar el nombre en inglés de los
colores predefinidos en los navegadores.
<BODY BGCOLOR=#0000FF> o <BODY BGCOLOR=blue>
Una buena ayuda para la selección de colores con #rrggbb la puede encontrar
en: Paletas de Colores.
Text, parámetro usado para definir el color de texto por omisión. Su formato es
el mismo que el de BGCOLOR. Si no se pone nada es negro.
Link, VLINK, ALINK, parámetro usado para especificar el color por omisión de:
texto con enlace, enlace ya visitado y enlace activo.
Los colores por omisión son LINK= blue, VLINK= purple y ALINK= red. El
formato es el mismo que BGCOLOR.
2.1.2 BACKGROUD, parámetro usado para especificar la ruta y nombre de
archivo (URL) de la imagen que será usada como fondo del documento. Esta se
verá como mosaico para cubrir toda la ventana si es pequeña (lo habitual).

<BODY BACKGROUND="ruta/archivo.gif">
Es conveniente especificar la ruta de modo relativo, esto quiere decir que si
cambiamos el directorio completo donde están nuestras páginas, desde C: a C:
/ webs por ejemplo, la ruta especificada debe seguir siendo válida.
Por ejemplo si la página desde la que hacemos enlace se
encuentra en el directorio aprendiendo Html y queremos poner
como fondo la imagen fondo.gif, que se encuentra en gifs, se
debe poner:
<BODY BACKGROUND="gifs/fondo.gif">
Si la página estuviese en ejemplos se podría: <BODY
BACKGROUND="gifs/fondo.gif">
Fíjate en:../ Pues es lo que indica al navegador que debe acudir al directorio
superior.
2.2 Enlaces.
Los enlaces s, links o vínculos, son los elementos más característicos de un
hipertexto, ya que a ellos se debe la posibilidad de conectar la información. El
world Web consortuin en Hypertextterms, define un enlace como:
Un relación entre dos anclas (anchos), guardadas en la misma o diferentes bases
de datos.
Los enlaces son los que permiten una estructura no secuencial o multisecuencial
del hipertexto al ofrecer la posibilidad de ir de un nodo a otro. Así, es posible
saltar de un nodo A al Nodo C sin pasar por el nodo B, al contrario de lo que
ocurre en una estructura secuencial que inevitablemente, obliga a pasar del nodo
B y del nodo B al C.
Al activar un enlace se puede dar lugar a una gran variedad de resultado, como
son: trasladarse a un nuevo tema: mostrar una referencia, una definición o una
anotación; presentar un esquema o una ilustración; ver un índice o una tabla de
datos; activar un sonido o un video, etc.
2.2.1 Tipos de Enlaces
Pueden existir múltiples tipos de enlaces, la clasificación de los enlaces no solo
varía de unos autores a otros, sino que también se puede establecer una
tipología dependiendo del punto de vista o del aspecto concreto en

consideración. Así pues, podemos distinguir los siguientes tipos de enlaces, que
no son excluyentes unos de otros.
2.3. URLS (Tipos)
2.3.1 Concepto de URL
A pesar de que el llamado URL es un mecanismo que usamos cada segundo
que permanecemos delante de la pantalla de la PC usando un navegador, lo
cierto es que muchos de nosotros ignoramos casi por completo qué es y cómo
funciona, y desconocemos que sin su presencia, encontrar lo que estamos
buscando en la intrincada telaraña de la gran red de redes sería una tarea
imposible de realizar. Tal es
su importancia.
Básicamente, la URL es una
dirección única que poseen
todos los elementos en
Internet, es decir que
literalmente existe una URL
por cada página, imagen,
video y documento en
Internet, lo que nos permitirá
ubicarlos fácilmente gracias
a que la información que
contiene. Siempre que visitemos una página web, será a través de su URL y en
cada oportunidad en que pulsemos sobre cualquier enlace que contenga la
página o sitio, también nos dirigirá a otra URL.
2.3.2 Para qué sirve una URL
URL son las siglas en inglés de “UniformResourceLocator”, cuyo significado en
español es Localizador Uniforme de Recursos, y que sirve, como mencionamos
más arriba en estas líneas, para nombrar recursos en Internet. Para ello la URL
contiene cierta información que será usada por el navegador para hallar lo que
estamos buscando.
En este sentido, la URL combina el protocolo o esquema que será necesario
utilizar para recuperar los datos, el nombre de la computadora que provee del
recurso, el directorio o subdirectorio donde se encuentra y el documento que
será accedido.
2.3.3 Cómo y porqué surge la URL?

Como hemos visto hasta aquí, la URL nos brinda la posibilidad de acceder a los
sitios webs a través de estas direcciones establecidas, es por ello que es
importante también que conozcamos cómo surge y se conforma una URL. Por
ello haremos un repaso de los componentes que conforman una URL.
Pues bien, en líneas generales podemos mencionar que una URL está
conformada por dos componentes principales, por un lado un identificador de
protocolo, y por otro un nombre de fuente. A continuación mostramos un ejemplo
claro de ello.
Identificador de protocolo: https://tecnologia-informatica.com En este caso el
identificador es http y este se utiliza para indicar el nombre del protocolo que va
a ser utilizado para buscar la
fuente. Básicamente, el http es un
protocolo de comunicación entre el
navegador y el servidor web.
Nombre de la fuente: https://tecnologia-
informatica.com En este caso el
dominio el nombre de la fuente es
tecnología-informatica.com y el formato
que posee el nombre de la fuente
dependerá también del identificador de protocolo utilizado, que en la mayoría de
los casos será HTTP, por lo que además incluirá otros elementos.
En este sentido, debemos decir que además de estos dos componentes
principales, las URLs se completan con otros elementos que podemos visualizar
en todas las direcciones URL, los cuales son imprescindibles para que podamos
acceder al sitio correspondiente a la dirección web a la que apunta la URL.
A continuación enumeramos el resto de los elementos que conforman una URL.
Dos puntos: En todas las URL, luego del identificador de protocolo encontramos
dos puntos (:), los cuales básicamente actúan como un mecanismo de
separación entre el protocolo y el resto de la dirección web.

Barras inclinadas: En todos los casos una URL incluye dos barras inclinadas
(//), las cuales se ubican separando el identificador de protocolo y el nombre de
la fuente, a continuación de los dos puntos que se escriben después del http. Su
función principal es la de ser una iniciación para el contacto, es decir que
notifican la dirección de internet para lograr el contacto con otro servidor.
Index.html: En muchos casos podemos encontrar el llamado index.html, que es
el nombre de un archivo solicitado, el cual por lo general suele ser una página
por defecto dentro de un determinado sitio web. Este index.html puede llamarse
también default.html
Sufijo: En la mayoría de los casos las direcciones URL incluyen el sufijo .com,
aunque también podemos encontrar otros muy utilizados como .net .info .gob
.org y demás, siendo el más habitual el .com, y este se refiere al dominio
utilizado.
Nombre de dominio: Cuando hablamos del nombre de dominio completo nos
referimos a una dirección web completa, es decir www.nombredelafuente.com,
que en muchos casos puede llegar a prescindir del www. Y aparecer de la
siguiente manera: tecnología-informatica.com, ese es el nombre de dominio, que
se refiere puntualmente a la última parte de la dirección web.
2.3.4 Formatos, esquemas y sintaxis de las direcciones URL

Los componentes más corrientes de los que se encuentra compuesta una URL
son los siguientes:
esquema://host.dominio:puerto/ruta/documento
Es decir: ../aprender-informatica/articulointeresante.php
Ahora, debemos entender por esquema al sistema de clasificación que se utiliza
para definir el tipo de modo en que los datos y recursos contenidos en la dirección
deben ser recuperados, es decir el protocolo que deberá usarse en cada caso
específico. En este caso, “http”.
Luego de ello se posiciona el host, para esta dirección “www” y por último se
ubica el dominio, en este caso, www.sitioquedeseamosvisitar.com. Cabe
destacar que el valor de puerto suele ser omitido, pero por regla general para
http el puerto es el 80.
Ruta” define, como su nombre lo indica, la ruta que deberá tomar el navegador
para llegar al directorio en donde se encuentra alojado el elemento que
deseamos acceder en el servidor, sea documento, imagen, video o cualquier
otro.
En el caso de que este valor sea omitido, los elementos deberán ser
almacenados en el directorio principal del sitio, de otra manera los mismos no
podrán ser localizados, y por lo tanto no accedidos.

Al terminar la cadena, nos encontramos con el nombre del documento que
deberá ser accedido. En este caso los más habituales son html, php, asp o
similares, pero también pueden ser extensiones de archivos de imagen como
jpg, gif, png u otras, siempre dependiendo del esquema o protocolo con que se
accede a esta información.
Bibliografía
(15 de Sept 2019.). ¿Qué es una URL?. Tecnología e Informática. Tecnología e
Informática Recuperado de https://tecnologia-informatica.com/.
(13 sept 2019). Localizador de recursos uniforme. Chorme Google. Wikipedia.
Recuperado dehttps://es.wikipedia.org/wiki/Localizador_de_recursos_uniforme
Lamarca. M. J. (29/07/2018). Hipertexto, el nuevo concepto de documento en la
cultura de la imagen.Chorme Google. Universidad Complutense de Madrid.
Recuperado de http://www.hipertexto.info.
Actividades de la Unidad
Ejercicio I
Evalúa tus conocimientos en relación a los siguientes conceptos.
1. ¿Qué es una estructura de documento, Enlaces y URL?
2. ¿Cuáles son las funciones de cada uno de ellos?
Ejercicio II
Comenta en el foro la importancia de los enlaces.
Ejercicio III

Elabora un cuadro comparativo de los diferentes tipos de enlaces.
Ejercicio IV
Identifica las características de los siguientes enlaces:
1. Enlaces semánticos
2. Enlaces referenciases
3. Enlaces asociativos
4. Enlaces de comando
5. Enlace predeterminado
Ejercicio V
1. Desarrolla un ensayo corto que resuma la importancia de los enlaces y
elabora un mapa conceptual de los enlaces más importantes.
2. Elabora un cuadro de los diferentes autores que dieron su definición sobre
enlaces.

Unidad III. Anclas y Tipos en HTML Guadalupe Vásquez Arredondo
Vamos a conocer como nos podemos desplazar dentro de una
página web sin la necesidad de estar cliqueando en las barras de
direcciones o con la rueda del mouse, gracias a las integraciones de los
anclas en HTML, conoceremos lo fácil que será poder elaborarlo en
nuestra web para llevar a los usuarios justo donde les interesa en el
contenido en el cual están interesado.
Para lograr los objetivos que propusimos para esta unidad
deberás mantener el entusiasmo y el interés por tu desarrollo personal
y profesional, ya que en parte dependerás mucho de todo el empeño
que le dedique a tu preparación y perfección, ya que sólo con la práctica
ha de lograrse.
Éxitos para todos los que se han adentrado al fascinante mundo
de las computadoras y todas las posibilidades que nos permiten llevar
a cabo, eres un genio si te apasiona con él. ¡Que los disfrute !
3.2. Objetivos de la Unidad III:
 Identificar y explicar los diferentes Anclas sobre estructura del
documento, HTML.
 Conocer la sintaxis que componen los Anclas en las páginas HTML.
 Identificar para que sirve un Anclas y selecciona los esquemas más
usados.
 Mostrar el proceso de un formato, esquema y sintaxis de los Anclas.

3.1. Introducción y orientaciones para el estudio
3.2. Objetivos
3.3. Esquema
3.4. Introducción a los anclajes #
3.4.1. Anclas (Tipos).
3.4.1. Listas.
3.4.1. Imágenes.
3.4.1. Formato.
3.4.1. Formulario.
3.4.1. Controles avanzados para un formulario.
3.4.1. Mapa.
3.4.1. Tablas.
3.4.1. Videos.
3. 5. Resumen
3. 6. Bibliografía de la Unidad
3. 7. Actividades
3. 8. Ejercicios de autocomprobación
3. 9. Soluciones a los ejercicios de autocomprobación
3. 10. Glosario
3. 11. Anexos y textos
3.4. Introducción a los anclajes #
Comúnmente las etiquetas de anclaje se utilizan para vincular páginas web
separadas, además se pueden usar para vincular diferentes, lugares en un sólo
documento, a menudo dentro de la tabla de contenido o incluso para lanzar las
aplicaciones externas. Dentro del tema se explica la implementación y la
aplicación de etiquetas de anclaje HTML en varias funciones.
Sintaxis
<a href=” URL or anchor”>< Link Tex/a>

Parámetros
Parámetros
Detalles
Href
Especifica la dirección de destino. Puede ser una URL absoluta o
relativa, o el name de un ancla. Una URL absoluta es la URL completa
de un sitio web como http://example.com/. Una URL relativa apunta a
otro directorio y / o documento dentro del mismo sitio web, por
ejemplo, /about-us/ apunta al directorio "about-us" dentro del directorio
raíz ( / ). Cuando se apunta a otro directorio sin especificar
explícitamente el documento, los servidores web normalmente
devuelven el documento "index.html" dentro de ese directorio.
Hreflang
Especifica el idioma del recurso vinculado por el atributo href (que
debe estar presente con este). Utilice los valores de idioma de BCP
47 para HTML5 y RFC 1766 para HTML 4.
Rel
Especifica la relación entre el documento actual y el documento
vinculado. Para HTML5, los valores deben definirse en la
especificación o registrarse en la wiki de Microformats.
Target
Especifica dónde abrir el enlace, por ejemplo, en una nueva pestaña o
ventana. Los valores posibles
son blank , self , parent , top y framename (en desuso). No se
recomienda forzar dicho comportamiento, ya que viola el control del
usuario sobre un sitio web.
Title
Especifica información extra sobre un enlace. La información se
muestra con mayor frecuencia como un texto de información sobre
herramientas cuando el cursor se mueve sobre el enlace. Este atributo
no está restringido a enlaces, se puede usar en casi todas las etiquetas
HTML.
Download
Especifica que el destino se descargará cuando un usuario haga clic en
el hipervínculo. El valor del atributo será el nombre del archivo
descargado. No hay restricciones en los valores permitidos, y el
navegador detectará automáticamente la extensión de archivo correcta
y la agregará al archivo (.img, .pdf, etc.). Si se omite el valor, se usa el
nombre de archivo original.

Especifica la dirección
Prosiguiendo con más código Html, ahora veamos un ejemplo el que
aplicamos todo lo que hemos visto hasta el momento. Revísalo a fondo y
pregunta todo lo que no entiendas en el grupo de WhatsApp, antes de continuar
para ir más suelto con el resto de las explicaciones que vamos a colocar, tus
facilitadores?
El resultado del ejemplo es de lo más sencillo y muy poco vistoso. No te
preocupes por eso, pues como te he dicho antes, el darle un aspecto más
profesional, con márgenes adecuados, colores de fondo y todo tipo de adornos,
lo veremos en el curso de CSS. Así que todos los ejemplos que veamos del curso
de Html van a ser así de sosos. Eso no significa que estemos aprendiendo muy
poco o que lo aprendido no sirva de mucho, de veras. Estamos colocando sólo
el contenido y en el curso de CSS aprenderemos a adornarlo hasta obtener un
aspecto totalmente profesional, sin nada que envidiar a cualquiera otra página
web. ¡Tengamos la confianza y la fe!
El resultado de este ejemplo cuyo código te coloco más abajo es este:
Ver resultado del ejemplo.
y este es su código:

Ya hemos aprendido a enviar a las visitas a una página u otra de nuestra
web. Pero en ocasiones, tenemos páginas con un contenido tan grande que nos
interesa enviar a estas visitas no a una página sino a una "parte" concreta de
una página de nuestra web. Para que sepas de qué te hablo, me refiero con esto

al tipo de enlace que tienes en la parte inferior de las páginas de
ComoCrearTuWeb, la flecha de en medio que te dirige hacia la parte superior de
la página (Ir arriba). Para estos casos Html ha definido un enlace especial que
denomina Ancla o Anclaje. Vamos a ver cómo podemos colocarlos en nuestro
sitio.
Usando las anclas o anclajes puedes hacer que cuando las visitas pulsen
sobre ese enlace, la ventana del navegador corra hacia esa parte concreta de la
misma página o bien, pase a otra página distinta, pero no a su comienzo, sino a
la parte media o a la parte que tú desees de esa otra página.
Para verlo más claro aún. Imagina que en una misma página de tu web
hablas de películas de acción, y luego, debajo, de películas de humor, y bajo
ésta parte, de películas de ciencia ficción. Si defines un ancla o un anclaje en
cada uno de sus títulos puedes luego colocar vínculos de modo que al pulsarlos
se dirija justo a esa parte de la página. Si defines un ancla al principio del
contenido y colocas un enlace en la parte inferior indicando "Ir al principio de la
página", al pulsarlo se dirigirá automáticamente a la parte superior, aun siendo
la misma página.
Lo verificas ahora? Bien, pues vamos a ver cómo se hace esto.
Para empezar hay que definir esa parte a la que quieres enviar a las
visitas cuando hagan clic sobre ese enlace que pondremos después. Por
ejemplo, veamos cómo se define un ancla en la parte superior.
Basta con colocar esta línea de código en la parte correspondiente:

<!DOCTYPE html>
<htmllang="es">
<head>
<meta charset="utf-8" />
<title>Mi Nueva Web</title>

</head>
<body>
<a name="arriba"></a>
<imgsrc="imagenes/logotipo.gif" alt="En ComoCrearTuWeb puedes aprender a diseñar páginas web"
width="270px" height="80px" />
<h1>Menú de Contenidos</h1>
<a href="#titulouno" title="Ir al título uno">Ir al título uno</a>
<a href="#titulodos" title="Ir al título dos">Ir al título dos</a>
<a href="#titulotres" title="Ir al título tres">Ir al título tres</a>
<h2>Título Uno</h2>
<a name="titulouno"></a>
<p>Este es el <u>texto correspondiente</u> al título uno, aunque debería ser más largo para que se note el
efecto.</p>
<p>Este es el texto correspondiente al título uno, aunque debería ser más largo para que se note el efecto.</p>
<p>Este es el texto correspondiente al título uno, aunque debería ser más largo para que se note el efecto.</p>
<h2>Título Dos</h2>
<a name="titulodos"></a>
<p>Este es el <i>texto correspondiente</i> al título dos, aunque debería ser más largo para que se note el
efecto.</p>
<p>Este es el texto correspondiente al título dos, aunque debería ser más largo para que se note el efecto.</p>
<p>Este es el texto correspondiente al título dos, aunque debería ser más largo para que se note el efecto.</p>
<h2>Título Tres</h2>
<a name="titulotres"></a>
<p>Este es el <b>texto correspondiente</b> al título tres, aunque debería ser más largo para que se note el
efecto.</p>
<p>Este es el texto correspondiente al título tres, aunque debería ser más largo para que se note el efecto.</p>
<p>Este es el texto correspondiente al título tres, aunque debería ser más largo para que se note el efecto.</p>
<a href="http://www.comocreartuweb.com" target="_blank" title="Como hacer páginas
web">ComoCrearTuWeb</a>
<p>Adios<b>Amigos</b>!</p>
<a href="#arriba" title="Ir Arriba">Ir Arriba</a>
</body>
</html>
<a name="arriba"></a>
Con esto definimos un lugar al que podemos enviar a las visitas si pulsan el
enlace que luego veremos cómo colocar. Si ahora en la parte inferior colocamos
otra línea como esta:
<a name="abajo"></a>
Tendremos la posibilidad de poder enviarlas también a la parte baja de esa
página web.
Ahora falta colocar el propio enlace. Si queremos enviar a las visitas a la parte
superior, lo normal es colocar el enlace en la parte inferior (si el usuario está

440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)

440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Semelhante a 440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)

Semelhante a 440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1) (20)

440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)