Informatica

Páginas: 8 (1986 palabras) Publicado: 1 de febrero de 2013
GUÍA DE LABORATORIO 1

“Aplicaciones Web – HTML y JavaScript”
LABORATORIO


Objetivos:


• Reconocer las etiquetas básicas del lenguaje HTML.
• Escribir páginas HTML.
• Escribir formularios HTML.
• Escribir funciones en lenguaje JavaScript para la validación de formularios.

Equipos, Materiales, Programas y Recursos:

• Sistema Operativo Windows.
• Navegador Web.
•Editor de texto.

Introducción:

En este laboratorio crearemos las primeras páginas HTML desde código fuente. Al mencionar desde código fuente hacemos referencia a que no utilizaremos alguna herramienta de diseño Web. En los primeros ejercicios utilizaremos el Bloc de Notas.

Seguridad:

• Ubicar maletines y/o mochilas en el gabinete al final de aula de laboratorio.
• No ingresar conlíquidos ni comida al aula de laboratorio.
• Al culminar la sesión de laboratorio, apagar correctamente la computadora y el monitor.

Preparación:

Durante el desarrollo de los temas de clase se tendrán ejercicios explicativos en cada uno de los puntos, ello le dará a la sesión una interacción de la teoría y la parte práctica, ya que en todo el momento el alumno podrá comprobar en su propia PC, todoslos ítems del manual.

Procedimiento y Resultados:

1. PRIMERA PÁGINA HTML

DESARROLLAR LA PRIMERA PÁGINA HTML LLAMADA PRIMERA.HTML, QUE TENGA COMO CONTENIDO EL TEXTO “PRIMERA PÁGINA HTML”.






2. PROPIEDADES BÁSICAS DE CABECERA


LA CABECERA PERMITE DEFINIR O CONFIGURAR DIFERENTES PARÁMETROS DE UNA PÁGINA HTML. LAS PRINCIPALES ETIQUETAS DE LA CABECERA SON:


:Define el Título de la Página (mostrado en la barra de título)<br /> <br /> <br /> <LINK>: Define una referencia de recurso<br /> <br /> <br /> <META>: Contiene información general de la página (palabras claves, descripción, etc)<br /> <br /> <br /> En la cabecera también podemos agregar información de la página.<br /> <br /> <br /> <meta name="title" content="EMPRESA DESARROLLO WEB PERU”><br /> <meta name="keywords" content="desarrollo phpperu, php5, capacitación, programación”><br /> <meta name="description" content=" Empresa especializada en el desarrollo Web"><br /> <meta name="author" content=" EMPRESA DESARROLLO WEB PERU "><br /> <meta name="DC.Creator" content=" EMPRESA DESARROLLO WEB PERU”><br /> <meta http-equiv="keywords" content=" desarrollo php peru, php5, capacitación"><br /> <meta http-equiv="description" content="Empresaespecializada en el desarrollo Web”><br /> <br /> <br /> <br /> <br /> 3. PROPIEDADeS (ATRIBUTOS) DE CUERPO<br /> <br /> <br /> SI BIEN LA CREACIÓN DEL CUERPO DE HTML COMPRENDE UNA SOLA ETIQUETA (<BODY>) PODEMOS CONFIGURAR ALGUNOS PARÁMETROS COMUNES A TODO EL CUERPO. DEFINA LA FUNCIÓN DE LOS SIGUIENTES PARÁMETROS:<br /> <br /> <br /> • bgcolor<br /> <br /> <br /> • background<br /> <br /> <br /> • leftmargin<br /> <br /> <br /> • topmargin<br /> <br /> <br /> • marginwidth• marginheight<br /> <br /> <br /> <br /> <br /> 4. FORMATO DE TEXTO<br /> <br /> <br /> LA ETIQUETA MÁS UTILIZADA EN EL DISEÑO DE PÁGINAS WEB ES <FONT> (QUE REPRESENTA LAS FUENTES).<br /> <br /> <br /> Existen otras etiquetas que permiten formatear un texto. A continuación defina la función de las siguientes etiquetas:<br /> <br /> <br /> • <B><br /> <br /> <br /> • <I><br /> <br /> <br /> • <U><br /> <br /> <br /> • <S><br /> <br /> <br /> • <SUB><br /> <br /> <br /> • <SUP><br /> <br /> <br /> • <BIG><br /> <br /> <br /> • <SMALL>• <BLINK><br /> <br /> <br /> • <H1><br /> <br /> <br /> <br /> <br /> 5. LISTAS<br /> <br /> <br /> LAS LISTAS HTML PERMITEN ORDENAR ALGUNOS ELEMENTOS. HTML SOPORTA DIFERENTES TIPOS DE LISTAS: LISTAS DE DEFINICIÓN, LISTAS ORDENADAS, LISTAS DESORDENADAS, ETC.<br /> <br /> <br /> Ejercicio: Crear una lista de definición HTML<br /> <br /> <br /> <DL><br /> <LH>Cabecera de Lista</LH><br /> <DT>Elemento 1<br /> <DD>Descripción de Elemento 1.<br /> <DT> Elemento 2<br /> <DD>Descripción de Elemento 2.<br /> </DL><br /> <br /> <br /> Ejercicio: Crear una lista ordenada HTML<br /> <br /> <br /> <ol><br /> <li type="A"> Elemento</li><br /> <li type="a"> Elemento</li><br /> <li type="I"> Elemento</li><br /> <li type="i"> Elemento</li><br /> <li type="1"> Elemento</li><br /> </ol><br /> <br /> <br /> Ejercicio: Crear una lista desordenada HTML<br /> <br /> <br /> <UL><br /> <LI TYPE="CIRCLE"> Elemento<br /> <LI... <div class="paper-body__gradient paper-body__gradient--bottom paper-body__gradient--bottom-abs"></div> <div class="center paper-body__cta--mod paper-body__cta-no-bg"> <a class="button button--large button--orange" onclick="upgradeRedirect()" rel="nofollow"> Leer documento completo </a> <p class="ash-gray text-s"> Regístrate para leer el documento completo. </p> </div> </div> </div> </div> </article> </main> <script>(function(d){var domain='buenastareas.com';if(d.referrer.match('^https?\:\/\/(|www\.)'+domain.replace('.com',"")+'\.com(.*)')){d.getElementById('stm-hero').className+=' stm-hero';d.getElementById('emptyTopicsList').innerHTML=(document.getElementById("topicsList"))?d.getElementById('topicsList').innerHTML:'';d.getElementById('text-header').innerHTML='';var sec=d.createElement('div');sec.className='section no-padding margin-2';var p=d.createElement('p');p.className='text-s uppercase ash-gray';p.innerText='Vista previa del texto';sec.appendChild(p);d.getElementById('text-header').appendChild(sec);}else{d.getElementById('stm-hero').className='';d.getElementsByTagName('article')[0].className='row no-border';}})(window.document);</script><div class="advertBox center margin-2 leaderboard_btf"> </div> <a href="/content/access" rel="nofollow"></a> <section class="row "> <div class="columns position-relative large-12"> <div class=""> <h2 class="heading-m padding-top-1 margin-2"> Estos documentos también te pueden resultar útiles </h2> </div> <section class=""> <ul class="unstyled"> <li class="essayPreview"> <div class="card"> <a class="heading-s black" href="/ensayos/Informatica/1076261.html" title="Informatica"> <h6 class="heading-s"> Informatica </h6> </a> <div class="card__content-footer-container "> <p class="card__content text-s "> ...FACULTADES UNIVERSITARIAS DE SALTILLO, A.C “La imaginación es más importante que el conocimiento “(Albert Einstein) “El hombre nunca sabe de lo que es capaz hasta que lo intenta”. (Charles Dickens) “Los amigos se convierten con frecuencia en ladrones de nuestro tiempo”. (Platón) “Los amigos se convierten con frecuencia en ladrones de nuestro tiempo”. (Platón) La creatividad es más considerable que el entendimiento “(Albert Einstein) “El hombre nunca sabe de lo que es capaz... </p> <div class="row card__footer-links "> <div class="columns small-6"> <a href="/ensayos/Informatica/1076261.html" title="Informatica" class="card__footer text-xs"> <span> Leer más </span> </a> </div> <div class="columns small-6"> <div class="card__caption card__caption weight-300 mid-gray text-s align-right"> <div class="essay-details no-margin--bottom"> <span class="essay-details__item">1336 Palabras</span> <span class="essay-details__item">6 Páginas</span> </div> </div> </div> </div> </div> </div> </li> <li class="essayPreview"> <div class="card"> <a class="heading-s black" href="/ensayos/Informatica/710420.html" title="Informatica"> <h6 class="heading-s"> Informatica </h6> </a> <div class="card__content-footer-container "> <p class="card__content text-s "> ...INTERNACIONAL DE LA <b><i>INFORMÁTICA</i></b> Y EL DERECHO? Se cree que si, y ha tenido un desarrollo en los últimos 20 años en los países industrializados, como seria el caso de Estados Unidos e Inglaterra; España, Francia, Alemania, Italia y Japón; como algunos países latinoamericanos como Argentina y Uruguay, ha sido impresionante. La <b><i>informática</i></b> jurídica y el derecho <b><i>informática</i></b>-, se incluyan en el ámbito universitario, específicamente en las Facultades de... </p> <div class="row card__footer-links "> <div class="columns small-6"> <a href="/ensayos/Informatica/710420.html" title="Informatica" class="card__footer text-xs"> <span> Leer más </span> </a> </div> <div class="columns small-6"> <div class="card__caption card__caption weight-300 mid-gray text-s align-right"> <div class="essay-details no-margin--bottom"> <span class="essay-details__item">794 Palabras</span> <span class="essay-details__item">4 Páginas</span> </div> </div> </div> </div> </div> </div> </li> <li class="essayPreview"> <div class="card"> <a class="heading-s black" href="/ensayos/Informatica/1003218.html" title="Informatica"> <h6 class="heading-s"> Informatica </h6> </a> <div class="card__content-footer-container "> <p class="card__content text-s "> ...Topología de Red Topología: Forma física que adopta el cableado de la red y en segundo plano al modo de las señales eléctricas que viajan a través de él. La elección de la topología debe tener en cuenta los siguientes puntos: a) La cantidad de cableado requerido b) La facilidad de instalación, modificación y adaptación a los cambios de la red c) La forma y velocidad con que viajan los datos en la red d) La facilidad de detectar la causante de un fallo e) La cantidad de... </p> <div class="row card__footer-links "> <div class="columns small-6"> <a href="/ensayos/Informatica/1003218.html" title="Informatica" class="card__footer text-xs"> <span> Leer más </span> </a> </div> <div class="columns small-6"> <div class="card__caption card__caption weight-300 mid-gray text-s align-right"> <div class="essay-details no-margin--bottom"> <span class="essay-details__item">563 Palabras</span> <span class="essay-details__item">3 Páginas</span> </div> </div> </div> </div> </div> </div> </li> <li class="essayPreview"> <div class="card"> <a class="heading-s black" href="/ensayos/Informatica/1041843.html" title="Informatica"> <h6 class="heading-s"> Informatica </h6> </a> <div class="card__content-footer-container "> <p class="card__content text-s "> ...Utilizando IPv6 Por: David Soltero-Lugo, david@nic.pr Objectivos • Al final de este workshop podrás contestar las siguientes preguntas: – ¿ Cuales son las ventajas de IPv6 sobre IPv4 ? – ¿ Como configurar IPv6 para una red utilizando un Router Cisco con Túnel ? – ¿ Como configurar IPv6 para una estación utilizando un Túnel ? – ¿ Como configurar IPv6 para una estación utilizando un Túnel ? ¿Por qué necesito IPv6 hoy? • Mas direcciones de IP. Según los estimados se espera que para... </p> <div class="row card__footer-links "> <div class="columns small-6"> <a href="/ensayos/Informatica/1041843.html" title="Informatica" class="card__footer text-xs"> <span> Leer más </span> </a> </div> <div class="columns small-6"> <div class="card__caption card__caption weight-300 mid-gray text-s align-right"> <div class="essay-details no-margin--bottom"> <span class="essay-details__item">842 Palabras</span> <span class="essay-details__item">4 Páginas</span> </div> </div> </div> </div> </div> </div> </li> <li class="essayPreview"> <div class="card"> <a class="heading-s black" href="/ensayos/Informatica/687621.html" title="Informatica"> <h6 class="heading-s"> Informatica </h6> </a> <div class="card__content-footer-container "> <p class="card__content text-s "> ...CENTRO DE BACHILLERATO TECNOLÓGICO Industrial y de Servicios No. 84 Modulo Ensamble y Mantenimiento de Hardware y Software Submódulo Aplicar Mantenimiento Preventivo y Correctivo a Equipo de Cómputo Diferencias entre mantenimiento preventivo y correctivo Primeramente para yo poder conocer las diferencias que existen entre mantenimiento preventivo y mantenimiento correctivo tengo que comprender lo que significan cada uno. El preventivo... </p> <div class="row card__footer-links "> <div class="columns small-6"> <a href="/ensayos/Informatica/687621.html" title="Informatica" class="card__footer text-xs"> <span> Leer más </span> </a> </div> <div class="columns small-6"> <div class="card__caption card__caption weight-300 mid-gray text-s align-right"> <div class="essay-details no-margin--bottom"> <span class="essay-details__item">1114 Palabras</span> <span class="essay-details__item">5 Páginas</span> </div> </div> </div> </div> </div> </div> </li> <li class="essayPreview"> <div class="card"> <a class="heading-s black" href="/ensayos/Inform%C3%A1tica/540646.html" title="Informática"> <h6 class="heading-s"> Informática </h6> </a> <div class="card__content-footer-container "> <p class="card__content text-s "> ...UNIVERSIDAD TECNICA DE ORURO FACULTAD NACIONAL DE INGENIERIA CARRERA INGENIERIA DE SISTEMAS CONTROL DE ALMACEN AUTOMATIZADO EMPRESA COMERCIAL “ELECTROCASA” POSTULANTE: Rolando Bautista Cala FECHA DEFENSA: 10-10-2006 INTRODUCCION Actualidad de la tesis La institución “ElectroCasa”, en la cual se implemento la aplicación, tiene caracterizado una serie de actividades comerciales, asentando su actividad fundamental en la distribución de artículos domésticos eléctricos. En el... </p> <div class="row card__footer-links "> <div class="columns small-6"> <a href="/ensayos/Inform%C3%A1tica/540646.html" title="Informática" class="card__footer text-xs"> <span> Leer más </span> </a> </div> <div class="columns small-6"> <div class="card__caption card__caption weight-300 mid-gray text-s align-right"> <div class="essay-details no-margin--bottom"> <span class="essay-details__item">653 Palabras</span> <span class="essay-details__item">3 Páginas</span> </div> </div> </div> </div> </div> </div> </li> <li class="essayPreview"> <div class="card"> <a class="heading-s black" href="/ensayos/Informatica/502407.html" title="Informatica"> <h6 class="heading-s"> Informatica </h6> </a> <div class="card__content-footer-container "> <p class="card__content text-s "> ...El derecho mercantil (o derecho comercial) es el conjunto de normas relativas a los comerciantes en el ejercicio de su profesión, a los actos de comercio legalmente calificados como tales y a las relaciones jurídicas derivadas de la realización de estos; en términos amplios, es la rama del derecho que regula el ejercicio del comercio. Uno de sus fundamentos es el comercio libre. Fuentes • La ley: es el ordenamiento con el cual se va regular el derecho mercantil. Es un derecho... </p> <div class="row card__footer-links "> <div class="columns small-6"> <a href="/ensayos/Informatica/502407.html" title="Informatica" class="card__footer text-xs"> <span> Leer más </span> </a> </div> <div class="columns small-6"> <div class="card__caption card__caption weight-300 mid-gray text-s align-right"> <div class="essay-details no-margin--bottom"> <span class="essay-details__item">734 Palabras</span> <span class="essay-details__item">3 Páginas</span> </div> </div> </div> </div> </div> </div> </li> <li class="essayPreview"> <div class="card"> <a class="heading-s black" href="/ensayos/Informatica/1104626.html" title="Informatica"> <h6 class="heading-s"> Informatica </h6> </a> <div class="card__content-footer-container "> <p class="card__content text-s "> ...POLÍTICAS Y NORMAS SOBRE ADQUISICIÓN DE EQUIPOS Y ARRENDAMIENTOS DE BIENES <b><i>INFORMÁTICOS</i></b>. Definición del grado de integración nacional de equipos de cómputo. POLÍTICAS Y NORMAS SOBRE ADQUISICIÓN DE EQUIPOS Y ARRENDAMIENTOS DE BIENES <b><i>INFORMÁTICOS</i></b>. Definición del grado de integración nacional de equipos de cómputo. Dentro del artículo 3° de las políticas en <b><i>informática</i></b>; se entiende por políticas en <b><i>informática</i></b> al conjunto de reglas... </p> <div class="row card__footer-links "> <div class="columns small-6"> <a href="/ensayos/Informatica/1104626.html" title="Informatica" class="card__footer text-xs"> <span> Leer más </span> </a> </div> <div class="columns small-6"> <div class="card__caption card__caption weight-300 mid-gray text-s align-right"> <div class="essay-details no-margin--bottom"> <span class="essay-details__item">563 Palabras</span> <span class="essay-details__item">3 Páginas</span> </div> </div> </div> </div> </div> </div> </li> </ul> </section> </div> </section> <section class="row "> <div class="columns position-relative large-12"> <section class="section no-border"> <div class="container"> <div class="row"> <div class="columns "> <div class="section-heading "> <h2 class="align-left margin-2 heading-m"> OTRAS TAREAS POPULARES </h2> </div> </div> </div> <div class="row" id="popular-tags-visible"> <div class="small-12 columns tag-block columns-small-1 columns-medium-2 columns-large-2"> <ul> <li class="margin-1"> <a href="/ensayos/La-Televisi%C3%B3n-Restringida-En-Mexico/6200541.html" title="La Televisión Restringida En Mexico" class="mid-gray brand-primary--hover">La Televisión Restringida En Mexico</a> </li> <li class="margin-1"> <a href="/ensayos/Parasitos/4686781.html" title="Parasitos" class="mid-gray brand-primary--hover">Parasitos</a> </li> <li class="margin-1"> <a href="/ensayos/Yasun%C3%AD/7548932.html" title="Yasuní" class="mid-gray brand-primary--hover">Yasuní</a> </li> <li class="margin-1"> <a href="/ensayos/Auditoria/4187671.html" title="Auditoria" class="mid-gray brand-primary--hover">Auditoria</a> </li> <li class="margin-1"> <a href="/ensayos/Electricidad/6200542.html" title="Electricidad" class="mid-gray brand-primary--hover">Electricidad</a> </li> <li class="margin-1"> <a href="/ensayos/El-Padre-Espiritual/2763968.html" title="El Padre Espiritual" class="mid-gray brand-primary--hover">El Padre Espiritual</a> </li> </ul> </div> </div> </div> </section> </div> </section> <div class="advertBox center margin-1"></div> <section class="section no-border brand-primary--bg"> <div class="row"> <div class="columns center"> <h3 id="banner_title" class="heading-l white">Únete a millones de otros estudiantes y comienza tu investigación</h3> <h4 class="text-m white">Conviértase en miembro formal de Buenas Tareas</h4> <a class="button--bg-color__white button-fullwidth" onclick="upgradeRedirect()" rel="nofollow"> INSCRÍBETE - ES GRATIS </a> </div> </div> </section> <footer class="section section--footer"> <div class="row"> <div class="medium-3 columns"><div class="copyright-block"> <p class="copyright-block__logo"> <i class="icon icon-sm-logo copyright-block__logo__icon"></i> <span class="copyright-block__logo__span">Buenas Tareas</span> </p> <p class="copyright-block__social"> <a rel="nofollow" href="http://www.facebook.com/BuenasTareas"> <span class="copyright-block__social__circle"> <i class="copyright-block__social__circle__icon icon icon-ui-24-social-fb icon-ui-social-fb"></i> </span> </a> <a rel="nofollow" href="https://twitter.com/buenastareas"> <span class="copyright-block__social__circle"> <i class="copyright-block__social__circle__icon icon icon-ui-social-tw"></i> </span> </a> </p> <small class="copyright-block__copyright text-s"> ©2024 BuenasTareas.com </small> </div> </div> <div class="medium-3 columns"><div class="vertical-nav-list"> <h6 class="vertical-nav-list__heading heading-xxs">Productos</h6> <ul class="vertical-nav-list__container"> <li class="vertical-nav-list__item"> <a class="vertical-nav-list__item__anchor text-m" href="/ojear/">Documentos de investigación</a> </li> <li class="vertical-nav-list__item"> <a class="vertical-nav-list__item__anchor text-m" href="/resumen-de-libros/">Notas de libros</a> </li> <li class="vertical-nav-list__item"> <a class="vertical-nav-list__item__anchor text-m" href="/generador-de-citas/">Generador de citas</a> </li> </ul> </div> </div> <div class="medium-3 columns"> <div class="vertical-nav-list"> <h6 class="vertical-nav-list__heading heading-xxs">Empresa</h6> <ul class="vertical-nav-list__container"> <li class="vertical-nav-list__item"> <a class="vertical-nav-list__item__anchor text-m" href="/about.php">Empresa</a> </li> <li class="vertical-nav-list__item"> <a class="vertical-nav-list__item__anchor text-m" href="/advertise-with-us.php">Haz publicidad</a> </li> <li class="vertical-nav-list__item"> <a class="vertical-nav-list__item__anchor text-m" href="/legal.php">Legal (actualizado 9/9/14)</a> </li> <li class="vertical-nav-list__item"> <a class="vertical-nav-list__item__anchor text-m" href="/sitemap.html">Mapa del sitio</a> </li> </ul> </div> </div> <div class="medium-3 columns"><div class="vertical-nav-list"> <h6 class="vertical-nav-list__heading heading-xxs">Ayuda</h6> <ul class="vertical-nav-list__container"> <li class="vertical-nav-list__item"> <a class="vertical-nav-list__item__anchor text-m" href="/help.php">Ayuda</a> </li> <li class="vertical-nav-list__item"> <a class="vertical-nav-list__item__anchor text-m" href="/about-us/contact">Contáctanos</a> </li> </ul> </div> </div> </div> </footer> </div> <!-- global JS --> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/labjs/2.0.3/LAB.min.js"></script> <script type="text/javascript"> $LAB .script("//cdnjs.cloudflare.com/ajax/libs/aja/0.4.1/aja.min.js") .script("//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js") .script("//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.runtime.min.js") .script("//cdnjs.cloudflare.com/ajax/libs/jquery.payment/1.3.2/jquery.payment.min.js") .script("//assets.buenastareas.com/234d3b97ed2b88737e66b0e02a8e5aa593c7f7c0/_assets/bts/92c1d4e847bc6d93ba58214aa322ee6c.js") ; </script> <script type="text/javascript"> window.SM2_DEFER = true; function downloadJSAtOnload() { $LAB .script("//assets.buenastareas.com/234d3b97ed2b88737e66b0e02a8e5aa593c7f7c0/_assets/bts/76aff662ad8b32c9348bfa0fa9cb8f91.js") .wait(function() { }); } // Check for browser support of event handling capability if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script> </body> </html>