SlideShare una empresa de Scribd logo
1 de 6
Descargar para leer sin conexión
IESTP “SAN PEDRO DEL VALLE DE
                     MALA”
                                                            UNIDAD DIÁCTICA
                                                TALLER DE PROGRAMACIÓN DISTRIBUÍDA
        ACTIVIDAD DE APRENDIZAJE Nº 1


     Introducción a Internet vs World Wide Web
                      (HTML).

HISTORIA:

Internet    se ha convertido en algo omnipresente que es difícil imaginarse la vida sin ella.
Al mismo tiempo, es difícil imaginarse la vida también si la www. Pero solo porque Internet y la
WWW estén fuertemente entrelazados no significa que sean lo mismo.
Se ha dicho que la guerra ha contribuido a desarrollar invenciones que luego resultaron útiles
para la Humanidad. En el caso de la Guerra Fría (el periodo de tensiones entre Estados Unidos
y el bloque soviético que siguió a la 2ª Guerra Mundial) es bastante cierto. Recordemos la
situación: las dos superpotencias participaban en la escalada atómica. Al tiempo, la carrera
espacial no podía esconder, bajo sus llamadas a la aventura, el interés estratégico de la
ocupación del espacio. En toda guerra la información es vital, y precisamente el origen de
Internet fue la necesidad de un sistema de comunicaciones que sobreviviera a un conflicto.
Para explicarlo todo mejor, volvamos a los comienzos. Todo se inicio en 1958 en la agencia de
proyectos de investigación avanzada, más conocida como ARPA para aumentar los avances
tecnológicos de EEUU en la sombra tras el lanzamiento por parte de Rusia del Sputnik.
A principio de los años 60, la idea flotaba entre diversas instituciones americanas, como el
Massachussetts Institute of Technology y la corporación RAND. Leonard Kleinrock del MIT
publicó en julio de 1961 el primer trabajo sobre "conmutación de paquetes" (la tecnología que
permitía dividir los datos y que recorrieran rutas distintas). El Pentágono, a través de su
Agencia de Proyectos de Investigación Avanzada (ARPA en sus siglas inglesas) financió la
puesta en marcha de una prueba práctica. En 1969, el año que el hombre llegó a la Luna, se
abría el primer nodo de la red ARPANET, en la Universidad de California en Los Angeles.
La primera conexión exitosa se dio el 29 de Octubre de 1969 con una conexión de red
ARPANET entre 2 equipos. Con el tiempo se fueron agregando más y mas ordenadores.




APUNTE:
    ARPANET desapareció como tal en 1989, pero muchas instituciones (de la NASA al
      Departamento de Energía) ya habían creado sus propias redes, que podían
      comunicarse entre sí. El número de servidores en la red superaba los 100.000.

DOCENTE: VICTOR CHUMPITAZ AVALOS.                                                     Página[1]
MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS
IESTP “SAN PEDRO DEL VALLE DE
                     MALA”
                                                          UNIDAD DIÁCTICA
                                               TALLER DE PROGRAMACIÓN DISTRIBUÍDA
        ACTIVIDAD DE APRENDIZAJE Nº 1

    En 1992 - con más de un millón de servidores en la red - se creó la Internet Society, la
     "autoridad" de la red.



      WORLD WIDE WEB Creación del Sistema de Hipertexto
   (HTML: “Hypertext Marcup Language” o “Lenguaje de marcación de
                            Hipertexto”)


En informática, la World Wide Web es un sistema de documentos de hipertexto o
hipermedios enlazados y accesibles a través de Internet. Con un navegador web, un
usuario visualiza sitios web compuestos de páginas web que pueden contener texto,
imágenes, videos u otros contenidos multimedia, y navega a través de ellas usando
hiperenlaces.

La Web fue creada alrededor de 1989 por el inglés Tim Berners-Lee y el belga Robert
Cailliau mientras trabajaban en el CERN en Ginebra, Suiza, y publicado en 1992. Desde
entonces, Berners-Lee ha jugado un papel activo guiando el desarrollo de estándares
Web (como los lenguajes de marcado con los que se crean las páginas web), y en los
últimos años ha abogado por su visión de una Web Semántica.

APUNTE:
    En 1992 - con más de un millón de servidores en la red - se creó la Internet Society, la
      "autoridad" de la red.
    Con la extensión de los ordenadores personales y el lanzamiento del primer navegador
      de la WWW popular, Mosaic, en 1993, ya había llegado el momento de "surfear la
      Web" (la expresión se registró por primera vez ese mismo año).


URL
(Uniform Resource Locator - Localizador Uniforme de Recursos). Forma de organizar la
información en la web.
Una URL es una dirección que permite acceder a un archivo o recurso como ser páginas
html, php, asp, o archivos gif, jpg, etc. Se trata de una cadena de caracteres que identifica
cada recurso disponible en la WWW.
Las URL fueron usadas por primera vez por Tim Berners-Lee en 1991 con el fin de poder
crear enlaces entre distintas páginas en la WWW. Desde 1994 el término URL se
incorpora a un concepto más general, el URI, pero igualmente se sigue utilizando URL.

Las URL de protocolo HTTP son las típicas direcciones a una página web, por ejemplo:




                                     Carpeta    Archivo
  Protocolo
                 Nombre Dominio



DOCENTE: VICTOR CHUMPITAZ AVALOS.                                                  Página[2]
MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS
IESTP “SAN PEDRO DEL VALLE DE
                      MALA”
                                                               UNIDAD DIÁCTICA
                                                  TALLER DE PROGRAMACIÓN DISTRIBUÍDA
         ACTIVIDAD DE APRENDIZAJE Nº 1

     El protocolo HTTP es el conjunto de normas para la que archivos y otros datos se
      transfieran entre equipos.
     Nombre de Dominio es el que ayuda a identificar y localizar computadoras en Internet.
      Para evitar confusiones, cada nombre de dominio es único y se puede considerar como
      un rótulo o un atajo. Detrás de este atajo hay una serie de números, llamada dirección
      IP, que corresponde a la dirección específica del lugar en donde está localizado el Sitio
      que está buscando en Internet.
     Carpeta es la el Directorio que contiene el Archivo o Página Web.
     Archivo es el que contiene una serie de Códigos HTML. Que mas adelante vamos a
      explicar.

      Nota: Aunque muchos URL comienzan con WWW, esto no es indispensable
            Originalmente se usó para identificar a la Word Wide Web en el URL, pero
            ahora se ha convertido en una Práctica Común. Los caracteres antes del primer
            punto en el URL no son parte del dominio registrado y pueden ser casi cualquier
            cosa.


Servidores Web
Los Sitio y las páginas Web también necesitan un servidor Web. En términos muy sencillos un
servidor Web es una Computadora que funciona con un software que siempre está conectado
a Internet.
Cuando usted escribe un URL en su Navegador de la Web, o hace clic en un enlace que se
encuentra en una página Web, envía una solicitud al servidor que recibe la información. El
proceso es similar cuando marca un número Telefónico en su teléfono.
Su solicitud “llama” a la computadora que contiene todos los archivos necesarios para
mostrarle la página Web que usted solicita. Entonces, la computadora le “Sirve” y presenta en
pantalla todas las páginas, usualmente en su navegador.


Sitios
En general, un URL se asocia con un sitio Web. Usted puede haber visto multitud de ejemplos
en carteleras y en publicidad que se presentan por televisión www.yahoo.com es el URL del
sitio Web de Yahoo! www.cbs.com es el URL del sitio Web de la CBS.
Lo más habitual es que estos sitios estén localizado en directorios o carpetas en el servidor, tal
como podrían estarlo en el drive C: de su computadora personal. Luego, dentro de este sitio
principal, puede haber varias carpetas, las cuales alojan otras secciones del sitio Web.

Por ejemplo, Chop Point es un campamento de verano y una escuela de educación media,
ubicado en Maine. Tiene varias secciones en su sitio Web, pero las más conocidas son “camp”
y “school”. Si observa el URL de la sección del campamento de Chop Point, puede ver el
nombre de la carpeta después del nombre del sitio:
www.choppoint.org/camp

Si se dirige a la página principal de la escuela, el URL cambia a:

www.choppoint.org/school




DOCENTE: VICTOR CHUMPITAZ AVALOS.                                                       Página[3]
MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS
IESTP “SAN PEDRO DEL VALLE DE
                     MALA”
                                                            UNIDAD DIÁCTICA
                                                TALLER DE PROGRAMACIÓN DISTRIBUÍDA
        ACTIVIDAD DE APRENDIZAJE Nº 1


Primeros pasos para aprender a hacer una página web
1. Planteamiento de objetivos para tu página web

Esta etapa es muy importante y con frecuencia se pasa por alto. Se trabaja en el papel para
plantearnos el proyecto y qué queremos conseguir al realizar nuestra web. La planificación de
tu web debe incluir:

    Breve descripción de los contenidos de la página, su título principal, etc.
    Finalidad que persigo al hacerla (informar, hacer negocio, entretener, etc.)
    Páginas parecidas a la mía, qué puedo ofrecer yo que no tengan ellas para atraer a mi
    público objetivo, etc.
    Hardware, software, documentación que necesito para realizarla y de qué dispongo
    realmente.
    Describir cuál es mi publico objetivo, nivel informático, idiomas, intereses, problemas
    físicos, etc. para adaptar la página a sus características.
    Dónde se va a visualizar la web; navegadores más utilizados, plugins, elementos
    específicos, etc.

2. Estructurar el contenido de la Página

Es conveniente que dibujemos un organigrama con todas las partes del sitio web,
distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos
multimedia que se consideren pertinentes, mediante el cual ir creando la estructura de la
página web. Antes de empezar a desarrollar tu página web en el ordenador, debes tener muy
claro cuáles serán sus contenidos, su estructura, el nombre de la página, etc. cosas que no se
deben hacer sobre la marcha para evitar rectificaciones innecesarias, trabajo inútil y pérdidas
de tiempo. Hay varias maneras de estructurar el contenido de una web:

     En árbol: Esta estructura está compuesta por una página principal que enlaza con otras
      páginas, las cuales, a su vez, enlazan con otras páginas de nivel inferior. De esta
      manera se agrupan las páginas web en niveles, de tal modo que para llegar del
      primero al último se debe pasar por todos los intermedios. Esta estructura es poco
      navegable si tenemos una web con muchas páginas, porque para ver las páginas de
      otra rama tenemos que retroceder hasta la página principal, haciendo la navegación
      muy pesada.




DOCENTE: VICTOR CHUMPITAZ AVALOS.                                                    Página[4]
MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS
IESTP “SAN PEDRO DEL VALLE DE
                      MALA”
                                                             UNIDAD DIÁCTICA
                                                 TALLER DE PROGRAMACIÓN DISTRIBUÍDA
         ACTIVIDAD DE APRENDIZAJE Nº 1

     En lista: Esta estructura es la opuesta a la anterior. En ella no existe página principal ya
      que todas están en el mismo nivel. Para llegar a la última página hay que recorrer
      todas las anteriores. Es una estructuración muy adecuada para la presentación de
      manuales o aplicaciones donde el usuario deba recorrer forzosamente una serie de
      páginas web para conseguir su objetivo.




     Mixta: Esta estructura es una combinación de las dos anteriores. Las páginas están
      jerarquizadas en niveles, los cuales a su vez están conectados entre sí en forma de
      lista. Esta estructura es mucho más navegable y práctica, puesto que permite poder
      desplazarse de rama en rama sin necesidad de volver a la página principal para
      hacerlo.




     En red: Esta estructura supone que todas las páginas de la web están conectadas entre
      sí, por lo que es una estructura más compleja y menos ordenada. Su ventaja es que
      desde cada página podemos ir a cualquier otra del sitio. No obstante, requiere mucha
      planificación para evitar ofrecer al visitante un caos de enlaces innecesarios.




Una vez tengas claro lo que quieres hacer y su estructura básica puedes empezar a recopilar
información para confeccionar cada sección de tu página web. Conforme vayas investigando
sobre el tema de la web, casi con seguridad irás realizando modificaciones tanto en su
estructura como en sus contenidos para adaptarla mejor a lo que has aprendido, por lo que es
conveniente que trabajes sobre borradores, no con versiones definitivas, te ahorrarás mucho
trabajo. Por ejemplo, puedes haber decidido hacer una web sobre Ferrari, y en cuanto a su
diseño querer colocar un menú a la izquierda con las secciones principales, un cuerpo central
con el contenido de la sección y una última columna a la derecha donde insertar tu publicidad.
No obstante, puede ocurrir fácilmente que al buscar información sobre su escudería
encuentres tanta y tan diversa que llegues a la conclusión de que es más cómodo para los
visitantes colocar un menú de navegación específico de la sección en la izquierda y el principal
en la derecha para que puedan navegar por la sección con rapidez. Por lo que si ya hiciste la
página definitiva de la sección llamada escudería, tendrás que retocarla para adaptarla a tus
nuevas necesidades, lo que supone un gasto de tiempo y esfuerzo innecesario.

DOCENTE: VICTOR CHUMPITAZ AVALOS.                                                       Página[5]
MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS
IESTP “SAN PEDRO DEL VALLE DE
                     MALA”
                                                           UNIDAD DIÁCTICA
                                               TALLER DE PROGRAMACIÓN DISTRIBUÍDA
        ACTIVIDAD DE APRENDIZAJE Nº 1

3. Diseñar la página web
   Una vez tengas hecha la estructura, recopilada bastante información y completado el
   contenido de varias secciones, tienes suficiente material como para saber con más
   precisión lo que quieres, por lo que puedes empezar a diseñar gráficamente cada una de las
   páginas de tu web, indicando los elementos interactivos y gráficos que van a intervenir en
   cada una. Para esto, y fundamentalmente para manejar los vínculos entre documentos, se
   creó el lenguaje HTML. El HTML es un lenguaje de marcación diseñado para estructurar
   textos y presentarlos en forma de hipertexto, que es el formato estándar de las páginas
   web. A la hora de empezar con el diseño, ten en cuenta que:


      La estructura de la página debe ser lo más lógica posible facilitando la navegación a tus
       visitantes (es importante en este punto la usabilidad). Ninguna página puede quedar
       huérfana, es decir, todas las páginas deben de tener enlaces a otras páginas. Si esto
       ocurre, es probable que el usuario cierre nuestra página y entre en otra en la que le
       sea más fácil navegar por los contenidos.
      Aunque no es un requisito necesario, sí que es muy aconsejable que aprendas HTML,
       ya que así podrás hacer todo lo que quieras sin depender de editores gráficos como
       Dreamweaver (ver manual Dreamweaver), tendrás más flexibilidad y opciones a la
       hora de realizar tus diseños, podrás corregir tu código y saber qué es lo que falla
       cuando te de errores, entenderás cómo funcionan las páginas de otros webmasters,
       etc. En esta misma página, hay un manual HTML muy completo que puedes mirar.
      Aprender a usar otras técnicas, como las hojas de estilo (CSS) te será muy útil para
       crear una página atractiva y bien diseñada. Con las hojas de estilo puedes crear un
       archivo que te sirva para dar una mejor apariencia a todas tus páginas a la vez, y
       siempre que quieras cambiar el aspecto de tu web, sólo tendrás que modificar ese
       archivo en lugar de ir una por una revisando cada página de la misma. Si quieres
       aprender a usar este lenguaje, en esta misma web hay un manual completo de hojas
       de estilo o CSS.




DOCENTE: VICTOR CHUMPITAZ AVALOS.                                                     Página[6]
MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS

Más contenido relacionado

La actualidad más candente

PresentacióN De Power Point Pancho
PresentacióN De  Power Point PanchoPresentacióN De  Power Point Pancho
PresentacióN De Power Point Panchojany
 
Internet Explorer
Internet ExplorerInternet Explorer
Internet Explorervico.com
 
Como nace internet
Como nace internetComo nace internet
Como nace internetAngelica276
 
Herramientas cooperativas
Herramientas cooperativasHerramientas cooperativas
Herramientas cooperativasFershitho96
 
Internet Explorer
Internet  ExplorerInternet  Explorer
Internet Explorerpeblo
 
Seminario De Informatica
Seminario De InformaticaSeminario De Informatica
Seminario De InformaticaEdgar Rodriguez
 
investigacion sobre web
investigacion sobre webinvestigacion sobre web
investigacion sobre webjjmqv
 
Copia De A C E R C A D E I N T E R N E T} Mmmmmm
Copia De  A C E R C A  D E  I N T E R N E T} MmmmmmCopia De  A C E R C A  D E  I N T E R N E T} Mmmmmm
Copia De A C E R C A D E I N T E R N E T} MmmmmmEunice
 
Espacios vistuales y generaciones
Espacios vistuales y generacionesEspacios vistuales y generaciones
Espacios vistuales y generacionesMariana Ortega
 
Internet Explorer
Internet ExplorerInternet Explorer
Internet Explorerferckui
 
IMPORTANCIA DEL INTERNET EXPLORER
IMPORTANCIA DEL INTERNET EXPLORERIMPORTANCIA DEL INTERNET EXPLORER
IMPORTANCIA DEL INTERNET EXPLORERcristinos
 
Carasteristicas internet explorer y mozilla
Carasteristicas internet explorer y mozillaCarasteristicas internet explorer y mozilla
Carasteristicas internet explorer y mozillaudalrico
 
Historia de la internet
Historia de la internetHistoria de la internet
Historia de la internetlosdelfrente
 

La actualidad más candente (19)

PresentacióN De Power Point Pancho
PresentacióN De  Power Point PanchoPresentacióN De  Power Point Pancho
PresentacióN De Power Point Pancho
 
Internet Explorer
Internet ExplorerInternet Explorer
Internet Explorer
 
Como nace internet
Como nace internetComo nace internet
Como nace internet
 
Herramientas cooperativas
Herramientas cooperativasHerramientas cooperativas
Herramientas cooperativas
 
Veronica
VeronicaVeronica
Veronica
 
Internet Explorer
Internet  ExplorerInternet  Explorer
Internet Explorer
 
Internet Explorer
Internet ExplorerInternet Explorer
Internet Explorer
 
MiS dI@PoSiTiV@s
MiS dI@PoSiTiV@sMiS dI@PoSiTiV@s
MiS dI@PoSiTiV@s
 
Seminario De Informatica
Seminario De InformaticaSeminario De Informatica
Seminario De Informatica
 
investigacion sobre web
investigacion sobre webinvestigacion sobre web
investigacion sobre web
 
Taller de google.
Taller de google.Taller de google.
Taller de google.
 
Informatica
InformaticaInformatica
Informatica
 
Copia De A C E R C A D E I N T E R N E T} Mmmmmm
Copia De  A C E R C A  D E  I N T E R N E T} MmmmmmCopia De  A C E R C A  D E  I N T E R N E T} Mmmmmm
Copia De A C E R C A D E I N T E R N E T} Mmmmmm
 
Internet y sus servicios
Internet y sus serviciosInternet y sus servicios
Internet y sus servicios
 
Espacios vistuales y generaciones
Espacios vistuales y generacionesEspacios vistuales y generaciones
Espacios vistuales y generaciones
 
Internet Explorer
Internet ExplorerInternet Explorer
Internet Explorer
 
IMPORTANCIA DEL INTERNET EXPLORER
IMPORTANCIA DEL INTERNET EXPLORERIMPORTANCIA DEL INTERNET EXPLORER
IMPORTANCIA DEL INTERNET EXPLORER
 
Carasteristicas internet explorer y mozilla
Carasteristicas internet explorer y mozillaCarasteristicas internet explorer y mozilla
Carasteristicas internet explorer y mozilla
 
Historia de la internet
Historia de la internetHistoria de la internet
Historia de la internet
 

Destacado (8)

32 Php. Etiquetas Html
32 Php. Etiquetas Html32 Php. Etiquetas Html
32 Php. Etiquetas Html
 
Manual 2 HTML
Manual 2 HTMLManual 2 HTML
Manual 2 HTML
 
Clase 2 Desarrollo Web
Clase 2 Desarrollo Web Clase 2 Desarrollo Web
Clase 2 Desarrollo Web
 
Clase 2 de PHP
Clase 2 de PHPClase 2 de PHP
Clase 2 de PHP
 
Diseño de paginas web clase 1 lista
Diseño de paginas web clase 1 listaDiseño de paginas web clase 1 lista
Diseño de paginas web clase 1 lista
 
Primera clase de HTML
Primera clase de HTMLPrimera clase de HTML
Primera clase de HTML
 
Clase Nº 1 - HTML
Clase Nº 1 - HTMLClase Nº 1 - HTML
Clase Nº 1 - HTML
 
Manual sobre Slideshare
Manual sobre SlideshareManual sobre Slideshare
Manual sobre Slideshare
 

Similar a MANUAL 1 HTML VICTOR

Similar a MANUAL 1 HTML VICTOR (20)

Páginas Web
Páginas WebPáginas Web
Páginas Web
 
Diapositivas sirlena
Diapositivas sirlenaDiapositivas sirlena
Diapositivas sirlena
 
Diapositivas sirlena
Diapositivas sirlenaDiapositivas sirlena
Diapositivas sirlena
 
A
AA
A
 
Es cuela de agricultura la fragua
Es cuela de agricultura la fraguaEs cuela de agricultura la fragua
Es cuela de agricultura la fragua
 
Copia de guia de diseño
Copia de guia de diseñoCopia de guia de diseño
Copia de guia de diseño
 
Internet
InternetInternet
Internet
 
La web
La webLa web
La web
 
La web
La webLa web
La web
 
Internet
InternetInternet
Internet
 
La web
La webLa web
La web
 
La web
La webLa web
La web
 
Todo saber-internet-10
Todo saber-internet-10Todo saber-internet-10
Todo saber-internet-10
 
Todo saber
Todo saberTodo saber
Todo saber
 
La web
La webLa web
La web
 
Amiogo Orlando
Amiogo OrlandoAmiogo Orlando
Amiogo Orlando
 
Historia y evolución de internet
Historia y evolución de internetHistoria y evolución de internet
Historia y evolución de internet
 
tics en edu
tics en edutics en edu
tics en edu
 
E:\General\Modulo 1\Trabajos Informatica\Trabajos Power Point\Compu Historia ...
E:\General\Modulo 1\Trabajos Informatica\Trabajos Power Point\Compu Historia ...E:\General\Modulo 1\Trabajos Informatica\Trabajos Power Point\Compu Historia ...
E:\General\Modulo 1\Trabajos Informatica\Trabajos Power Point\Compu Historia ...
 
La historia del internet a
La historia del internet aLa historia del internet a
La historia del internet a
 

Último

5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdfOswaldoGonzalezCruz
 
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdf
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdfTema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdf
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdfDaniel Ángel Corral de la Mata, Ph.D.
 
periodico mural y sus partes y caracteristicas
periodico mural y sus partes y caracteristicasperiodico mural y sus partes y caracteristicas
periodico mural y sus partes y caracteristicas123yudy
 
LA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdf
LA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdfLA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdf
LA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdfNataliaMalky1
 
Día de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundialDía de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundialpatriciaines1993
 
Estrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdf
Estrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdfEstrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdf
Estrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdfAlfredoRamirez953210
 
IV SES LUN 15 TUTO CUIDO MI MENTE CUIDANDO MI CUERPO YESSENIA 933623393 NUEV...
IV SES LUN 15 TUTO CUIDO MI MENTE CUIDANDO MI CUERPO  YESSENIA 933623393 NUEV...IV SES LUN 15 TUTO CUIDO MI MENTE CUIDANDO MI CUERPO  YESSENIA 933623393 NUEV...
IV SES LUN 15 TUTO CUIDO MI MENTE CUIDANDO MI CUERPO YESSENIA 933623393 NUEV...YobanaZevallosSantil1
 
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptxc3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptxMartín Ramírez
 
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdfTarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdfManuel Molina
 
PROGRAMACION ANUAL DE MATEMATICA 2024.docx
PROGRAMACION ANUAL DE MATEMATICA 2024.docxPROGRAMACION ANUAL DE MATEMATICA 2024.docx
PROGRAMACION ANUAL DE MATEMATICA 2024.docxEribertoPerezRamirez
 
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdf
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdfFisiologia.Articular. 3 Kapandji.6a.Ed.pdf
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdfcoloncopias5
 
Metabolismo 3: Anabolismo y Fotosíntesis 2024
Metabolismo 3: Anabolismo y Fotosíntesis 2024Metabolismo 3: Anabolismo y Fotosíntesis 2024
Metabolismo 3: Anabolismo y Fotosíntesis 2024IES Vicent Andres Estelles
 
Técnicas de grabado y estampación : procesos y materiales
Técnicas de grabado y estampación : procesos y materialesTécnicas de grabado y estampación : procesos y materiales
Técnicas de grabado y estampación : procesos y materialesRaquel Martín Contreras
 
PINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).ppt
PINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).pptPINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).ppt
PINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).pptAlberto Rubio
 
CIENCIAS NATURALES 4 TO ambientes .docx
CIENCIAS NATURALES 4 TO  ambientes .docxCIENCIAS NATURALES 4 TO  ambientes .docx
CIENCIAS NATURALES 4 TO ambientes .docxAgustinaNuez21
 

Último (20)

5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf
 
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdf
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdfTema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdf
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdf
 
periodico mural y sus partes y caracteristicas
periodico mural y sus partes y caracteristicasperiodico mural y sus partes y caracteristicas
periodico mural y sus partes y caracteristicas
 
LA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdf
LA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdfLA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdf
LA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdf
 
Earth Day Everyday 2024 54th anniversary
Earth Day Everyday 2024 54th anniversaryEarth Day Everyday 2024 54th anniversary
Earth Day Everyday 2024 54th anniversary
 
Día de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundialDía de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundial
 
Estrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdf
Estrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdfEstrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdf
Estrategias de enseñanza - aprendizaje. Seminario de Tecnologia..pptx.pdf
 
IV SES LUN 15 TUTO CUIDO MI MENTE CUIDANDO MI CUERPO YESSENIA 933623393 NUEV...
IV SES LUN 15 TUTO CUIDO MI MENTE CUIDANDO MI CUERPO  YESSENIA 933623393 NUEV...IV SES LUN 15 TUTO CUIDO MI MENTE CUIDANDO MI CUERPO  YESSENIA 933623393 NUEV...
IV SES LUN 15 TUTO CUIDO MI MENTE CUIDANDO MI CUERPO YESSENIA 933623393 NUEV...
 
Aedes aegypti + Intro to Coquies EE.pptx
Aedes aegypti + Intro to Coquies EE.pptxAedes aegypti + Intro to Coquies EE.pptx
Aedes aegypti + Intro to Coquies EE.pptx
 
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptxc3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
 
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdfTarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
 
PROGRAMACION ANUAL DE MATEMATICA 2024.docx
PROGRAMACION ANUAL DE MATEMATICA 2024.docxPROGRAMACION ANUAL DE MATEMATICA 2024.docx
PROGRAMACION ANUAL DE MATEMATICA 2024.docx
 
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdf
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdfFisiologia.Articular. 3 Kapandji.6a.Ed.pdf
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdf
 
Metabolismo 3: Anabolismo y Fotosíntesis 2024
Metabolismo 3: Anabolismo y Fotosíntesis 2024Metabolismo 3: Anabolismo y Fotosíntesis 2024
Metabolismo 3: Anabolismo y Fotosíntesis 2024
 
Técnicas de grabado y estampación : procesos y materiales
Técnicas de grabado y estampación : procesos y materialesTécnicas de grabado y estampación : procesos y materiales
Técnicas de grabado y estampación : procesos y materiales
 
PINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).ppt
PINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).pptPINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).ppt
PINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).ppt
 
Tema 7.- E-COMMERCE SISTEMAS DE INFORMACION.pdf
Tema 7.- E-COMMERCE SISTEMAS DE INFORMACION.pdfTema 7.- E-COMMERCE SISTEMAS DE INFORMACION.pdf
Tema 7.- E-COMMERCE SISTEMAS DE INFORMACION.pdf
 
CIENCIAS NATURALES 4 TO ambientes .docx
CIENCIAS NATURALES 4 TO  ambientes .docxCIENCIAS NATURALES 4 TO  ambientes .docx
CIENCIAS NATURALES 4 TO ambientes .docx
 
VISITA À PROTEÇÃO CIVIL _
VISITA À PROTEÇÃO CIVIL                  _VISITA À PROTEÇÃO CIVIL                  _
VISITA À PROTEÇÃO CIVIL _
 
TL/CNL – 2.ª FASE .
TL/CNL – 2.ª FASE                       .TL/CNL – 2.ª FASE                       .
TL/CNL – 2.ª FASE .
 

MANUAL 1 HTML VICTOR

  • 1. IESTP “SAN PEDRO DEL VALLE DE MALA” UNIDAD DIÁCTICA TALLER DE PROGRAMACIÓN DISTRIBUÍDA ACTIVIDAD DE APRENDIZAJE Nº 1 Introducción a Internet vs World Wide Web (HTML). HISTORIA: Internet se ha convertido en algo omnipresente que es difícil imaginarse la vida sin ella. Al mismo tiempo, es difícil imaginarse la vida también si la www. Pero solo porque Internet y la WWW estén fuertemente entrelazados no significa que sean lo mismo. Se ha dicho que la guerra ha contribuido a desarrollar invenciones que luego resultaron útiles para la Humanidad. En el caso de la Guerra Fría (el periodo de tensiones entre Estados Unidos y el bloque soviético que siguió a la 2ª Guerra Mundial) es bastante cierto. Recordemos la situación: las dos superpotencias participaban en la escalada atómica. Al tiempo, la carrera espacial no podía esconder, bajo sus llamadas a la aventura, el interés estratégico de la ocupación del espacio. En toda guerra la información es vital, y precisamente el origen de Internet fue la necesidad de un sistema de comunicaciones que sobreviviera a un conflicto. Para explicarlo todo mejor, volvamos a los comienzos. Todo se inicio en 1958 en la agencia de proyectos de investigación avanzada, más conocida como ARPA para aumentar los avances tecnológicos de EEUU en la sombra tras el lanzamiento por parte de Rusia del Sputnik. A principio de los años 60, la idea flotaba entre diversas instituciones americanas, como el Massachussetts Institute of Technology y la corporación RAND. Leonard Kleinrock del MIT publicó en julio de 1961 el primer trabajo sobre "conmutación de paquetes" (la tecnología que permitía dividir los datos y que recorrieran rutas distintas). El Pentágono, a través de su Agencia de Proyectos de Investigación Avanzada (ARPA en sus siglas inglesas) financió la puesta en marcha de una prueba práctica. En 1969, el año que el hombre llegó a la Luna, se abría el primer nodo de la red ARPANET, en la Universidad de California en Los Angeles. La primera conexión exitosa se dio el 29 de Octubre de 1969 con una conexión de red ARPANET entre 2 equipos. Con el tiempo se fueron agregando más y mas ordenadores. APUNTE:  ARPANET desapareció como tal en 1989, pero muchas instituciones (de la NASA al Departamento de Energía) ya habían creado sus propias redes, que podían comunicarse entre sí. El número de servidores en la red superaba los 100.000. DOCENTE: VICTOR CHUMPITAZ AVALOS. Página[1] MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS
  • 2. IESTP “SAN PEDRO DEL VALLE DE MALA” UNIDAD DIÁCTICA TALLER DE PROGRAMACIÓN DISTRIBUÍDA ACTIVIDAD DE APRENDIZAJE Nº 1  En 1992 - con más de un millón de servidores en la red - se creó la Internet Society, la "autoridad" de la red. WORLD WIDE WEB Creación del Sistema de Hipertexto (HTML: “Hypertext Marcup Language” o “Lenguaje de marcación de Hipertexto”) En informática, la World Wide Web es un sistema de documentos de hipertexto o hipermedios enlazados y accesibles a través de Internet. Con un navegador web, un usuario visualiza sitios web compuestos de páginas web que pueden contener texto, imágenes, videos u otros contenidos multimedia, y navega a través de ellas usando hiperenlaces. La Web fue creada alrededor de 1989 por el inglés Tim Berners-Lee y el belga Robert Cailliau mientras trabajaban en el CERN en Ginebra, Suiza, y publicado en 1992. Desde entonces, Berners-Lee ha jugado un papel activo guiando el desarrollo de estándares Web (como los lenguajes de marcado con los que se crean las páginas web), y en los últimos años ha abogado por su visión de una Web Semántica. APUNTE:  En 1992 - con más de un millón de servidores en la red - se creó la Internet Society, la "autoridad" de la red.  Con la extensión de los ordenadores personales y el lanzamiento del primer navegador de la WWW popular, Mosaic, en 1993, ya había llegado el momento de "surfear la Web" (la expresión se registró por primera vez ese mismo año). URL (Uniform Resource Locator - Localizador Uniforme de Recursos). Forma de organizar la información en la web. Una URL es una dirección que permite acceder a un archivo o recurso como ser páginas html, php, asp, o archivos gif, jpg, etc. Se trata de una cadena de caracteres que identifica cada recurso disponible en la WWW. Las URL fueron usadas por primera vez por Tim Berners-Lee en 1991 con el fin de poder crear enlaces entre distintas páginas en la WWW. Desde 1994 el término URL se incorpora a un concepto más general, el URI, pero igualmente se sigue utilizando URL. Las URL de protocolo HTTP son las típicas direcciones a una página web, por ejemplo: Carpeta Archivo Protocolo Nombre Dominio DOCENTE: VICTOR CHUMPITAZ AVALOS. Página[2] MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS
  • 3. IESTP “SAN PEDRO DEL VALLE DE MALA” UNIDAD DIÁCTICA TALLER DE PROGRAMACIÓN DISTRIBUÍDA ACTIVIDAD DE APRENDIZAJE Nº 1  El protocolo HTTP es el conjunto de normas para la que archivos y otros datos se transfieran entre equipos.  Nombre de Dominio es el que ayuda a identificar y localizar computadoras en Internet. Para evitar confusiones, cada nombre de dominio es único y se puede considerar como un rótulo o un atajo. Detrás de este atajo hay una serie de números, llamada dirección IP, que corresponde a la dirección específica del lugar en donde está localizado el Sitio que está buscando en Internet.  Carpeta es la el Directorio que contiene el Archivo o Página Web.  Archivo es el que contiene una serie de Códigos HTML. Que mas adelante vamos a explicar. Nota: Aunque muchos URL comienzan con WWW, esto no es indispensable Originalmente se usó para identificar a la Word Wide Web en el URL, pero ahora se ha convertido en una Práctica Común. Los caracteres antes del primer punto en el URL no son parte del dominio registrado y pueden ser casi cualquier cosa. Servidores Web Los Sitio y las páginas Web también necesitan un servidor Web. En términos muy sencillos un servidor Web es una Computadora que funciona con un software que siempre está conectado a Internet. Cuando usted escribe un URL en su Navegador de la Web, o hace clic en un enlace que se encuentra en una página Web, envía una solicitud al servidor que recibe la información. El proceso es similar cuando marca un número Telefónico en su teléfono. Su solicitud “llama” a la computadora que contiene todos los archivos necesarios para mostrarle la página Web que usted solicita. Entonces, la computadora le “Sirve” y presenta en pantalla todas las páginas, usualmente en su navegador. Sitios En general, un URL se asocia con un sitio Web. Usted puede haber visto multitud de ejemplos en carteleras y en publicidad que se presentan por televisión www.yahoo.com es el URL del sitio Web de Yahoo! www.cbs.com es el URL del sitio Web de la CBS. Lo más habitual es que estos sitios estén localizado en directorios o carpetas en el servidor, tal como podrían estarlo en el drive C: de su computadora personal. Luego, dentro de este sitio principal, puede haber varias carpetas, las cuales alojan otras secciones del sitio Web. Por ejemplo, Chop Point es un campamento de verano y una escuela de educación media, ubicado en Maine. Tiene varias secciones en su sitio Web, pero las más conocidas son “camp” y “school”. Si observa el URL de la sección del campamento de Chop Point, puede ver el nombre de la carpeta después del nombre del sitio: www.choppoint.org/camp Si se dirige a la página principal de la escuela, el URL cambia a: www.choppoint.org/school DOCENTE: VICTOR CHUMPITAZ AVALOS. Página[3] MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS
  • 4. IESTP “SAN PEDRO DEL VALLE DE MALA” UNIDAD DIÁCTICA TALLER DE PROGRAMACIÓN DISTRIBUÍDA ACTIVIDAD DE APRENDIZAJE Nº 1 Primeros pasos para aprender a hacer una página web 1. Planteamiento de objetivos para tu página web Esta etapa es muy importante y con frecuencia se pasa por alto. Se trabaja en el papel para plantearnos el proyecto y qué queremos conseguir al realizar nuestra web. La planificación de tu web debe incluir: Breve descripción de los contenidos de la página, su título principal, etc. Finalidad que persigo al hacerla (informar, hacer negocio, entretener, etc.) Páginas parecidas a la mía, qué puedo ofrecer yo que no tengan ellas para atraer a mi público objetivo, etc. Hardware, software, documentación que necesito para realizarla y de qué dispongo realmente. Describir cuál es mi publico objetivo, nivel informático, idiomas, intereses, problemas físicos, etc. para adaptar la página a sus características. Dónde se va a visualizar la web; navegadores más utilizados, plugins, elementos específicos, etc. 2. Estructurar el contenido de la Página Es conveniente que dibujemos un organigrama con todas las partes del sitio web, distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos multimedia que se consideren pertinentes, mediante el cual ir creando la estructura de la página web. Antes de empezar a desarrollar tu página web en el ordenador, debes tener muy claro cuáles serán sus contenidos, su estructura, el nombre de la página, etc. cosas que no se deben hacer sobre la marcha para evitar rectificaciones innecesarias, trabajo inútil y pérdidas de tiempo. Hay varias maneras de estructurar el contenido de una web:  En árbol: Esta estructura está compuesta por una página principal que enlaza con otras páginas, las cuales, a su vez, enlazan con otras páginas de nivel inferior. De esta manera se agrupan las páginas web en niveles, de tal modo que para llegar del primero al último se debe pasar por todos los intermedios. Esta estructura es poco navegable si tenemos una web con muchas páginas, porque para ver las páginas de otra rama tenemos que retroceder hasta la página principal, haciendo la navegación muy pesada. DOCENTE: VICTOR CHUMPITAZ AVALOS. Página[4] MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS
  • 5. IESTP “SAN PEDRO DEL VALLE DE MALA” UNIDAD DIÁCTICA TALLER DE PROGRAMACIÓN DISTRIBUÍDA ACTIVIDAD DE APRENDIZAJE Nº 1  En lista: Esta estructura es la opuesta a la anterior. En ella no existe página principal ya que todas están en el mismo nivel. Para llegar a la última página hay que recorrer todas las anteriores. Es una estructuración muy adecuada para la presentación de manuales o aplicaciones donde el usuario deba recorrer forzosamente una serie de páginas web para conseguir su objetivo.  Mixta: Esta estructura es una combinación de las dos anteriores. Las páginas están jerarquizadas en niveles, los cuales a su vez están conectados entre sí en forma de lista. Esta estructura es mucho más navegable y práctica, puesto que permite poder desplazarse de rama en rama sin necesidad de volver a la página principal para hacerlo.  En red: Esta estructura supone que todas las páginas de la web están conectadas entre sí, por lo que es una estructura más compleja y menos ordenada. Su ventaja es que desde cada página podemos ir a cualquier otra del sitio. No obstante, requiere mucha planificación para evitar ofrecer al visitante un caos de enlaces innecesarios. Una vez tengas claro lo que quieres hacer y su estructura básica puedes empezar a recopilar información para confeccionar cada sección de tu página web. Conforme vayas investigando sobre el tema de la web, casi con seguridad irás realizando modificaciones tanto en su estructura como en sus contenidos para adaptarla mejor a lo que has aprendido, por lo que es conveniente que trabajes sobre borradores, no con versiones definitivas, te ahorrarás mucho trabajo. Por ejemplo, puedes haber decidido hacer una web sobre Ferrari, y en cuanto a su diseño querer colocar un menú a la izquierda con las secciones principales, un cuerpo central con el contenido de la sección y una última columna a la derecha donde insertar tu publicidad. No obstante, puede ocurrir fácilmente que al buscar información sobre su escudería encuentres tanta y tan diversa que llegues a la conclusión de que es más cómodo para los visitantes colocar un menú de navegación específico de la sección en la izquierda y el principal en la derecha para que puedan navegar por la sección con rapidez. Por lo que si ya hiciste la página definitiva de la sección llamada escudería, tendrás que retocarla para adaptarla a tus nuevas necesidades, lo que supone un gasto de tiempo y esfuerzo innecesario. DOCENTE: VICTOR CHUMPITAZ AVALOS. Página[5] MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS
  • 6. IESTP “SAN PEDRO DEL VALLE DE MALA” UNIDAD DIÁCTICA TALLER DE PROGRAMACIÓN DISTRIBUÍDA ACTIVIDAD DE APRENDIZAJE Nº 1 3. Diseñar la página web Una vez tengas hecha la estructura, recopilada bastante información y completado el contenido de varias secciones, tienes suficiente material como para saber con más precisión lo que quieres, por lo que puedes empezar a diseñar gráficamente cada una de las páginas de tu web, indicando los elementos interactivos y gráficos que van a intervenir en cada una. Para esto, y fundamentalmente para manejar los vínculos entre documentos, se creó el lenguaje HTML. El HTML es un lenguaje de marcación diseñado para estructurar textos y presentarlos en forma de hipertexto, que es el formato estándar de las páginas web. A la hora de empezar con el diseño, ten en cuenta que:  La estructura de la página debe ser lo más lógica posible facilitando la navegación a tus visitantes (es importante en este punto la usabilidad). Ninguna página puede quedar huérfana, es decir, todas las páginas deben de tener enlaces a otras páginas. Si esto ocurre, es probable que el usuario cierre nuestra página y entre en otra en la que le sea más fácil navegar por los contenidos.  Aunque no es un requisito necesario, sí que es muy aconsejable que aprendas HTML, ya que así podrás hacer todo lo que quieras sin depender de editores gráficos como Dreamweaver (ver manual Dreamweaver), tendrás más flexibilidad y opciones a la hora de realizar tus diseños, podrás corregir tu código y saber qué es lo que falla cuando te de errores, entenderás cómo funcionan las páginas de otros webmasters, etc. En esta misma página, hay un manual HTML muy completo que puedes mirar.  Aprender a usar otras técnicas, como las hojas de estilo (CSS) te será muy útil para crear una página atractiva y bien diseñada. Con las hojas de estilo puedes crear un archivo que te sirva para dar una mejor apariencia a todas tus páginas a la vez, y siempre que quieras cambiar el aspecto de tu web, sólo tendrás que modificar ese archivo en lugar de ir una por una revisando cada página de la misma. Si quieres aprender a usar este lenguaje, en esta misma web hay un manual completo de hojas de estilo o CSS. DOCENTE: VICTOR CHUMPITAZ AVALOS. Página[6] MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS