SlideShare a Scribd company logo
1 of 32
Download to read offline
INTRODUCCION
                           A HTML Y

                         JAVASCRIPT




 Ing. Diego J. Arcusin
darcusin@cema.edu.ar
Objetivos del Curso


 Proveer al asistente de conceptos fundamentales que le
  permitan utilizar los lenguajes HTML y Javascript en sus
  proyectos informáticos.
Temas del Curso

   Internet y la WWW.
   HTML.
   Historia del HTML.
   HTML – CSS – Javascript.
    Elementos HTML.
        Tipos
        Atributos
        Estructura
        Contenedores
        Tablas
        Hipervínculos
        Imágenes
        Formularios
   Estilos CSS.
   Javascript.
   El Futuro.
   Conclusiones.
Internet y la WWW

 Internet
 WWW. Sitios Web y páginas Web.
 Otros objetos en la Web.
 ¿Cómo funciona?
HTML

 HTML (Hypertext Markup Language)
 HTML = Hypertext + MarkUp
 Hypertext
  Es texto ordinario al que se le incorporan funcionalidades adicionales
  como:
    Formato,
    Imágenes,
    Multimedia
    Y enlaces a otros documento.
 MarkUp
  Es el proceso de tomar el texto ordinario e incorporarle símbolos
  adicionales. Cada uno de estos símbolos identifica a un comando que le
  indica al navegador como mostrar ese texto.
Historia del HTML

 En 1986 la organización internacional de Estándares publica el
   SGML (Standard Generalized Markup Language)
 En 1990 Tim Berners-Lee crea la WWW y el HTML con base en un
   subconjunto del SGML.
 En 1993 se crea el HTML 2.0 (o HTML+)
 En 1995 el W3C (World Wide Web Consortium) define el HTML 3.0
 El HTML 3.2 abandona las sugerencias del HTML 3.0 y adopta        Tim Berners-Lee
                                                                    Director del W3C
   elementos desarrollados por Netscape. (Incorpora Tablas,
   Applets, Texto alrededor de imágenes)
 En 1997 se define el estándar HTML 4.0
 En 1999 aparece el estándar actual HTML 4.01


 Más información en: http://www.w3.org/
El W3C

 El W3C (World Wide Web Consortiun) es un consorcio internacional
   donde Organizaciones miembro, Personal Full-time y el público en general
   trabajan para desarrollar Estándares Web.
 La misión del W3C es la de maximizar el potencial de la WWW
   desarrollando protocolos y guías que aseguren el crecimiento futuro de la
   Web.
 Algunas Organizaciones miembro del W3C
    Adobe                  Ericsson                  Nokia
    Apple                  Google, inc.              Opera Software
    AT&T                   HP                        Sun Microsystems
    Cisco                  IBM Corporation           Telefónica de España
    Citigroup              Microsoft                 Yahoo, inc.
    Deutsche Telekom       Mozilla Foundation        VeriSign
    …Y decenas de universidades de todo el mundo
HTML – CSS – Javascript


         Página Web
             • Párrafos    •Tablas
Estructura   • Encabezados • Capas
             • Listas      • Etc.               HTML
             • Textos
Contenido    • Imágenes
             • Enlaces
             • Colores       • Fondos
Apariencia   • Tipografías   • Tamaños         CSS
             • Alineación    • Etc.
                       • Efectos
Comportamiento         • Validaciones          Javascript
                       • Automatización
Elementos HTML

 Los elementos son los componentes fundamentales del HTML
 Cuentan con 2 propiedades básicas:
     Atributos
     Contenido
 En general se conforman con una Etiqueta de Apertura y otra Cierre.
 Los atributos se colocan dentro la etiqueta de apertura, y el contenido
   se coloca entre la etiqueta de apertura y la de cierre.


                               Elemento
        Etiqueta de Apertura          Contenido              Etiq. de Cierre

      <p class=“texto”>Curso HTML CEMA</p>
          Nombre       Valor
                Atributo
Atributos

 Los atributos de un elemento son pares de nombres y valores separados por un
   ‘=‘ que se encuentran dentro de la etiqueta de apertura de algún elemento. Los
   valores deben estar entre comillas.
   Ejemplos:


   <span id=‘iddeesteelemento' style='color:red;' title=‘Curso de HTML'>
          Curso de HTML
   </span>


   <a href=“http://www.cema.edu.ar” class=“milink” target=“_blank”>
          Universidad del Cema
   </a>
Tipos de Elementos

 Algunos tipos de Elementos
    Estructurales
        Describen el propósito del texto y no denotan ningún formato específico.
        Por ejemplo:
            <h1>Curso HTML</h1>
    De Presentacion
        Describen la apariencia del texto, independientemente de su función.
        Por ejemplo:
            <b>Curso HTML</b>
        Los elementos de presentación se encuentran obsoletos desde la aparición
         del CSS.
    De HiperTexto
        Relaciona una parte del documento a otros documentos.
        Por ejemplo:
            <a href=“http://www.cema.edu.ar”>Universidad del Cema</a>
Estructura de un Documento HTML

 <HTML>… </HTML>
    Delimita el Documento HTML
 <HEAD> … </HEAD>
    Delimita el encabezado del Documento HTML
    En general incluye los metadatos del documentos y Scripts.
 <BODY> … </BODY>
    Delimita el Cuerpo del Documento HTML.
    Es donde se incluyen los contenidos visibles del documento.
 Ejemplo
   <html>
      <head>
                 Aquí se incluyen os distintos elementos del encabezado
      </head>
      <body>
                 Aquí se incluyen los distintos elementos contenedores o scripts
      </body>
   </html>
Elementos del HEAD

Alguno de los elementos factibles de incluir en el HEAD son:
 <TITLE> … </TITLE>
     Define el título del documento HTML
 <SCRIPT> … </SCRIPT>
     Se utiliza para incluir programas al documento. En general se tratan
       de Javascripts.
 <STYLE> … </STYLE>
     Especifica un estilo CSS para ser utilizado en el documento.
 <META> … </META>
     Permite especificar información de interés como: autor, fecha de
       publicación, descripción, palabras claves, etc.
Contenedores (Block-Level Elements)

 Parrafos
     Es el contenedor mas común.
     Su sintaxis es: <P> … </P>
 Encabezados
     Indican una jerarquía de secciones dentro del documento
     Su sintáxis: <h1>…</h1>, <h2>…</h2>, <h3>…</h3>,.. <h6>…</h6>,
 Listas
     Listas de Definiciones (consistente de pares de términos y definiciones)
            <dl>…</dl> Crea la lista
            <dt>…</dt> Crea un nuevo término
            <dd>…</dd> Crea una nueva definición
     Lista Ordenada Enumerada
            <ol> … </ol> Crea una nueva lista
            <li> … </li> Crea un nuevo ítem en la lista
     Lista Ordenada No Enumerada
            <ul> … </ul> Crea una nueva lista
            <li> … </li> Crea un nuevo ítem en la lista
 Capas
     Permiten agrupar y diagramar contenidos en los documentos.
     Su sintaxis es: <DIV> … </DIV>
Contenedores (Tablas)

 <table> … </table>       Crea la tabla
 <tr> … </tr>             Crea una nueva fila
 <td> … </td>             Crea una nueva celda dentro de la fila

Por ejemplo: Creación de una tabla de 2 x 2
<table>
    <tr>
          <td> … </td>
          <td> … </td>
    </tr>
    <tr>
          <td> … </td>
          <td> … </td>
    </tr>
</table>
Tablas


 Qué son y para qué sirven.
 Atributos de las Tablas
 Atributos de las Celdas y Filas
 Prioridades en los formatos
 Tablas anidadas
 Tablas Irregulares (Atributos colspan y rowspan)
 Anchos (Pixels Vs. Porcentajes)
Hipervínculos

 ¿Qué es un hipervínculo?
 Ubicación y rutas de documentos.
    Rutas Absolutas
    Rutas Relativas
    Rutas relativas a la raíz del sitio
 Vínculos a otras páginas. Etiqueta <A>.
 Uso del atributo target (Destino).
 Anclaje de nombre. Atributo name.
 Comportamientos del Navegador ante distintos tipos de
  archivos enlazados.
Imágenes

 Elemento <IMG>
 ¿Qué imágenes se pueden usar?
 Ventajas y desventajas de cada formato.
 Imágenes e Hipervínculos
Formularios

 ¿Para qué sirven?
 Elementos para Formularios
      Campos de Texto
      Casillas de Verificación
      Botones de opción
      Menús
      Botones
      Campos ocultos
      Campos de carga de archivos
 ¿Cómo se envía la información?
 ¿Se pueden validar los Campos?
Formularios


 Elemento <FORM>
     Atributos: method, action
 Elemento <INPUT>
     Atributo: type (text, checkbox, radio, button, hidden)
 Elemento <SELECT>
 Elemento <TEXTAREA>
Más Elementos


 Otros Elementos
   Nueva linea <BR>
   Línea Horizontal <HR>
   Comentarios. <!- - xxxxx - ->
Estilos CSS

 Antes de la aparición de los estilos, la presentación se manejaba directamente
  dentro de los elementos HTML por medio de atributos. Por ejemplo:
  <h2 align="center">
        <font color=“blue" size=“3" face="Times New Roman, serif">
                   <i>Seminario de HTML UCEMA</i>
        </font>
  </h2>
 CSS permite separar el contenido de un documento de su presentación.

  En el documento HTML:               En la hoja de estilos se define el formato de los
  <h2>Seminario de HTML UCEMA</h2>    encabezados h2:
                                      h2 {
                                                 text-align: center;
                                                 color: blue;
                                                 font: italic large "Times New Roman", serif;
                                      }
Ventajas del uso de CSS


 Estandarizar la presentación de un sitio web completo.
  Haciendola fácil de mantener.
 Diferentes usuarios pueden contar con diferentes estilos
  acordes a sus necesidades. Ejemplos:
    Estilos para personas con dificultades visuales,
    Estilos para dispositivos móviles,
    Estilos para dispositivos monocromos,
    Estilos para impresión,
    Etc.
 Los documentos HTML se reducen en tamaño y complejidad.
Formatos CSS

 Propiedades de fuentes
 Propiedades de color y fondo
                                 Margin (Margen)
 Propiedades de texto
                                  Border (Borde)
    espaciado de palabras
                                 Padding (Relleno)
    alineación
                                    Contenido
 Propiedades de caja
    Margen
    Borde
    Relleno
 Estilos de listas
Estilos CSS
Una hoja de estilos consiste en un conjunto de reglas.
                                          h2 {
Cada regla esta formada por:
                                                       text-align: center;
     El Selector (nombre del estilo)                  color: blue;
     La Declaración (define el estilo)                font: italic large "Times New Roman", serif;
                                          }
          Propiedad                      .textoresaltado {
          Valor                               font-family: Arial, Helvetica, sans-serif;
                                               font-size: 12px;
                                               font-style: normal;
¿Qué podemos hacer con los estilos?            font-weight: bold;         /* Esto es un comentario */
                                               color: #000000;
 Redefinir estilos de Etiquetas HTML.
                                          }
 Crear Estilos Personalizados para       #logo {
                                               background-image: url("/img/logo.gif");
   uso genérico (Clases)
                                               background-position:center;
 Crear Estilos para un elemento               background-repeat:no-repeat;
                                               height: 50px; width: 150px;
   HTML específico (por Id)
                                               position: absolute; left: 0px; top: 0px;
                                          }
Como incluir estilos CSS

 Inline Styles                                  <h2 style="color: blue; background: green;">
                                                     Curso HTML UCEMA
   Utilizando el atributo “style” se define el   </h2>
   estilo de un elemento HTML en forma
                                                 <head>
   individual.                                       <style type="text/css">
                                                             h2 {
 Embedded Style                                                          font-style: italic;
                                                                          font-weight: bold;
   Se define la regla CSS dentro de un
                                                                          color: blue;
   documento HTML. Se puede aplicar a                        }
                                                     </style>
   cualquier elemento de ese documento.          </head>
                                                 <body>
 Hojas de Estilos externas                          <h2>Curso HTML UCEMA</h2>
                                                 </body>
   Un archivo CSS independiente que se
   encuentra referenciado en cada uno de
                                                 <head>
   los documentos HTML que desean                <link rel=stylesheet type="text/css“ href=“estilos.css">
                                                 </head>
   utilizarlo.
Javascript


 Creado por Brendan Eich para Netscapa aparece
  en Netscape 2.0B3 en 1995.
 Es un lenguaje de programación interpretado con
  base en la sintaxis del lenguaje C.
 Está basado en objetos y guiado por eventos.
 No tiene nada que ver con Java
 Las funciones Javascript se incluyen en los
  documentos HTML interactuando con el DOM
  (Document Object Model) de la página para realizar
  tareas no factibles de hacer con HTML sólo.                  Brendan Eich
                                                           Creador del Javascript

    DOM:
      Es una interface (independiente del lenguaje) que permite a los scripts
      acceder dinámicamente y actualizar el contenido, la estructura y el estilo
      de los documentos.
Capacidades de Javascript

 Algunas de las cosas que se pueden hacer con Javascript:
     Abrir nuevas ventanas controlando su tamaño, look & feel, controles, etc.
     Incorporar validaciones a los formularios.
     Cambios de imágenes al colocar el mouse sobre algún objeto de la página
       web.
     Generar respuestas ante distintos eventos
     Efectos visuales en la página.
     Crear, Eliminar o cambiar atributos de elementos de una página HTML en
       forma dinámica.
     Crear o Leer Cookies
     Detectar la configuración del Browser.
Dónde incluir el Javascript

 En general se utiliza el elemento script
 Las funciones Javascript pueden estar en archivos independientes. Por ejemplo:
         <script language="JavaScript" src ="archivo.js"> </script>
 También se pueden incluir las instrucciones dentro del elemento Script. Por ejemplo:
         <script language="JavaScript" type="text/JavaScript">
         <!--
         function AbroVentana (URL,nombre,features) { //Esto es un comentario
             window.open(URL,nombre,features);
         }
         //-->
         </script>
 El código Javascript también se puede incluir directamente en un evento asociado a algún
    elemento del documento. Por ejemplo:
         <input type=“button" onclick="alert(‘Gracias por su click');return false;"
         value="Click">
El Futuro

 XHTML (Extensive Hyper Text MarkUp Language)
 Es la versión XML de HTML
 Tiene las mismas funciones que el HTML pero con una sintáxis más
   estricta (como el XML).
 Surge para facilitar el acceso a la web de nuevos dispositivos
   (Por ejemplo: dispositivos móviles).
 La sintaxis más estricta obliga a un formato correcto, liberando a los
   navegadores de “tratar de interpretar” documentos mal creados, lo que
   hace más rápida la carga de documentos bien hechos.
Conclusiones


         Página Web
             • Párrafos    •Tablas
Estructura   • Encabezados • Capas
             • Listas      • Etc.          HTML
             • Textos
Contenido    • Imágenes
             • Enlaces
             • Colores       • Fondos
Apariencia   • Tipografías   • Tamaños     CSS
             • Alineación    • Etc.
                       • Efectos
Comportamiento         • Validaciones      Javascript
                       • Automatización
Preguntas




?

More Related Content

What's hot (20)

Html, Css y JavaScript
Html, Css y JavaScriptHtml, Css y JavaScript
Html, Css y JavaScript
 
Conceptos basicos
Conceptos basicosConceptos basicos
Conceptos basicos
 
Manualrapido css
Manualrapido cssManualrapido css
Manualrapido css
 
05 Introduccion a HTML
05 Introduccion a HTML05 Introduccion a HTML
05 Introduccion a HTML
 
Html
HtmlHtml
Html
 
Css básico
Css básicoCss básico
Css básico
 
Investigacion de html y xml
Investigacion de html y xmlInvestigacion de html y xml
Investigacion de html y xml
 
Html presentacion
Html presentacionHtml presentacion
Html presentacion
 
Html - Tema 1
Html - Tema 1Html - Tema 1
Html - Tema 1
 
Curso css
Curso   cssCurso   css
Curso css
 
Acerca de html
Acerca de htmlAcerca de html
Acerca de html
 
Html
HtmlHtml
Html
 
Html - Tema 2: Enlaces, Imágenes y Listas
Html - Tema 2: Enlaces, Imágenes y ListasHtml - Tema 2: Enlaces, Imágenes y Listas
Html - Tema 2: Enlaces, Imágenes y Listas
 
Html - Tema 3
Html - Tema 3Html - Tema 3
Html - Tema 3
 
Taller 1 mariana barreto
Taller 1 mariana barretoTaller 1 mariana barreto
Taller 1 mariana barreto
 
Tutor javawebparte2
Tutor javawebparte2Tutor javawebparte2
Tutor javawebparte2
 
Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y Validaciones
Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y ValidacionesDesarrollo de Aplicaciones Web II - Sesión 03 - Formularios y Validaciones
Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y Validaciones
 
Tags actividad 11 jmar 180112
Tags actividad 11 jmar 180112Tags actividad 11 jmar 180112
Tags actividad 11 jmar 180112
 
Tarea weeb
Tarea weebTarea weeb
Tarea weeb
 
Html power
Html powerHtml power
Html power
 

Viewers also liked

Viewers also liked (7)

Domando al escritor 2
Domando al escritor 2Domando al escritor 2
Domando al escritor 2
 
Eapisi Finales 2009 2 B
Eapisi Finales 2009 2 BEapisi Finales 2009 2 B
Eapisi Finales 2009 2 B
 
2. html
2. html2. html
2. html
 
So use
So useSo use
So use
 
Diseño grafico
Diseño graficoDiseño grafico
Diseño grafico
 
El Caminante Revista - Junio 2014
El Caminante Revista - Junio 2014El Caminante Revista - Junio 2014
El Caminante Revista - Junio 2014
 
Plan de clase 7
Plan de clase 7Plan de clase 7
Plan de clase 7
 

Similar to Tipo

Similar to Tipo (20)

Camilo diaz
Camilo diazCamilo diaz
Camilo diaz
 
HTML.ppt
HTML.pptHTML.ppt
HTML.ppt
 
Html
HtmlHtml
Html
 
Pres 2
Pres 2Pres 2
Pres 2
 
Html
HtmlHtml
Html
 
CLASE DE HTML
CLASE DE HTML CLASE DE HTML
CLASE DE HTML
 
HTML y CSS
HTML y CSSHTML y CSS
HTML y CSS
 
Presentación Introducción al lenguaje HTML
Presentación Introducción al lenguaje HTMLPresentación Introducción al lenguaje HTML
Presentación Introducción al lenguaje HTML
 
05introduccionhtml 100901142734-phpapp02
05introduccionhtml 100901142734-phpapp0205introduccionhtml 100901142734-phpapp02
05introduccionhtml 100901142734-phpapp02
 
Desarrolla aplicaciones-web
Desarrolla aplicaciones-webDesarrolla aplicaciones-web
Desarrolla aplicaciones-web
 
Lenguaje HTML y CSS
Lenguaje HTML y CSSLenguaje HTML y CSS
Lenguaje HTML y CSS
 
¿Qué es el lenguaje HTML?
¿Qué es el lenguaje HTML?¿Qué es el lenguaje HTML?
¿Qué es el lenguaje HTML?
 
Taller Wordpress Nivel II
Taller Wordpress Nivel IITaller Wordpress Nivel II
Taller Wordpress Nivel II
 
Introducción a HTML y CSS
Introducción a HTML y CSSIntroducción a HTML y CSS
Introducción a HTML y CSS
 
Deber de htmly xml
Deber de htmly xmlDeber de htmly xml
Deber de htmly xml
 
Presentación HTML
Presentación HTML Presentación HTML
Presentación HTML
 
Tema2(1)
Tema2(1)Tema2(1)
Tema2(1)
 
Tema2(1)
Tema2(1)Tema2(1)
Tema2(1)
 
Html juan miro y manuel poveda acabado
Html juan miro y manuel poveda acabadoHtml juan miro y manuel poveda acabado
Html juan miro y manuel poveda acabado
 
Html
HtmlHtml
Html
 

Recently uploaded

Ejemplo de trabajo de TIC´s CON VARIAS OPCIONES DE LAS TAREAS
Ejemplo de trabajo de TIC´s CON VARIAS OPCIONES DE LAS TAREASEjemplo de trabajo de TIC´s CON VARIAS OPCIONES DE LAS TAREAS
Ejemplo de trabajo de TIC´s CON VARIAS OPCIONES DE LAS TAREASJavier Sanchez
 
Kirpi-el-erizo libro descargar pdf 1 link
Kirpi-el-erizo libro descargar pdf 1 linkKirpi-el-erizo libro descargar pdf 1 link
Kirpi-el-erizo libro descargar pdf 1 linkMaximilianoMaldonado17
 
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTOCIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTOCEIP TIERRA DE PINARES
 
Semana Santa en Popayán para el año 2024
Semana Santa en Popayán para el año 2024Semana Santa en Popayán para el año 2024
Semana Santa en Popayán para el año 2024yaco173
 
21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf
21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf
21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdfceeabarcia
 
Evaluacion Diagnostica Matematica 5to C2 Secundaria Ccesa007.pdf
Evaluacion Diagnostica Matematica 5to  C2 Secundaria Ccesa007.pdfEvaluacion Diagnostica Matematica 5to  C2 Secundaria Ccesa007.pdf
Evaluacion Diagnostica Matematica 5to C2 Secundaria Ccesa007.pdfDemetrio Ccesa Rayme
 
Evaluacion Diagnostica Matematica 2do C2 Secundaria Ccesa007.pdf
Evaluacion Diagnostica Matematica 2do C2 Secundaria Ccesa007.pdfEvaluacion Diagnostica Matematica 2do C2 Secundaria Ccesa007.pdf
Evaluacion Diagnostica Matematica 2do C2 Secundaria Ccesa007.pdfDemetrio Ccesa Rayme
 
Presentación contribuciones socioeconómicas del SUPV 2023
Presentación contribuciones socioeconómicas del SUPV 2023Presentación contribuciones socioeconómicas del SUPV 2023
Presentación contribuciones socioeconómicas del SUPV 2023Ivie
 
EL ECLIPSE DE LA PAZ (cuento literario). Autor y diseñador JAVIER SOLIS NOYOLA
EL ECLIPSE DE LA PAZ (cuento literario). Autor y diseñador JAVIER SOLIS NOYOLAEL ECLIPSE DE LA PAZ (cuento literario). Autor y diseñador JAVIER SOLIS NOYOLA
EL ECLIPSE DE LA PAZ (cuento literario). Autor y diseñador JAVIER SOLIS NOYOLAJAVIER SOLIS NOYOLA
 
Escrito administrativo técnico y comerciales
Escrito administrativo técnico y comercialesEscrito administrativo técnico y comerciales
Escrito administrativo técnico y comercialesmelanieteresacontrer
 
la forma de los objetos expresión gráfica preescolar
la forma de los objetos expresión gráfica preescolarla forma de los objetos expresión gráfica preescolar
la forma de los objetos expresión gráfica preescolarCa Ut
 
Evaluacion Diagnostica Matematica 5to C1 Secundaria Ccesa007.pdf
Evaluacion Diagnostica Matematica 5to  C1 Secundaria Ccesa007.pdfEvaluacion Diagnostica Matematica 5to  C1 Secundaria Ccesa007.pdf
Evaluacion Diagnostica Matematica 5to C1 Secundaria Ccesa007.pdfDemetrio Ccesa Rayme
 
La Gatera de la Villa nº 51. Revista cultural sobre Madrid..
La Gatera de la Villa nº 51. Revista cultural sobre Madrid..La Gatera de la Villa nº 51. Revista cultural sobre Madrid..
La Gatera de la Villa nº 51. Revista cultural sobre Madrid..La Gatera de la Villa
 
PROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍA
PROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍAPROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍA
PROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍAJoaqunSolrzano
 
CIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCERO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCEROCIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCERO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCEROCEIP TIERRA DE PINARES
 
UNIDAD DE APRENDIZAJE MARZO 2024.docx para educacion
UNIDAD DE APRENDIZAJE MARZO 2024.docx para educacionUNIDAD DE APRENDIZAJE MARZO 2024.docx para educacion
UNIDAD DE APRENDIZAJE MARZO 2024.docx para educacionCarolVigo1
 
Tema 4 Rocas sedimentarias, características y clasificación
Tema 4 Rocas sedimentarias, características y clasificaciónTema 4 Rocas sedimentarias, características y clasificación
Tema 4 Rocas sedimentarias, características y clasificaciónIES Vicent Andres Estelles
 

Recently uploaded (20)

Ejemplo de trabajo de TIC´s CON VARIAS OPCIONES DE LAS TAREAS
Ejemplo de trabajo de TIC´s CON VARIAS OPCIONES DE LAS TAREASEjemplo de trabajo de TIC´s CON VARIAS OPCIONES DE LAS TAREAS
Ejemplo de trabajo de TIC´s CON VARIAS OPCIONES DE LAS TAREAS
 
Kirpi-el-erizo libro descargar pdf 1 link
Kirpi-el-erizo libro descargar pdf 1 linkKirpi-el-erizo libro descargar pdf 1 link
Kirpi-el-erizo libro descargar pdf 1 link
 
EL PROCESO DE INVESTIGACIÓN CUALITATIVA. ENFERMERÍA
EL PROCESO DE INVESTIGACIÓN CUALITATIVA. ENFERMERÍAEL PROCESO DE INVESTIGACIÓN CUALITATIVA. ENFERMERÍA
EL PROCESO DE INVESTIGACIÓN CUALITATIVA. ENFERMERÍA
 
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTOCIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE CUARTO
 
Tema 5.- BASES DE DATOS Y GESTIÓN DE LA INF. PARA EL MARKETING.pdf
Tema 5.- BASES DE DATOS Y GESTIÓN DE LA INF. PARA EL MARKETING.pdfTema 5.- BASES DE DATOS Y GESTIÓN DE LA INF. PARA EL MARKETING.pdf
Tema 5.- BASES DE DATOS Y GESTIÓN DE LA INF. PARA EL MARKETING.pdf
 
Semana Santa en Popayán para el año 2024
Semana Santa en Popayán para el año 2024Semana Santa en Popayán para el año 2024
Semana Santa en Popayán para el año 2024
 
21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf
21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf
21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf
 
Evaluacion Diagnostica Matematica 5to C2 Secundaria Ccesa007.pdf
Evaluacion Diagnostica Matematica 5to  C2 Secundaria Ccesa007.pdfEvaluacion Diagnostica Matematica 5to  C2 Secundaria Ccesa007.pdf
Evaluacion Diagnostica Matematica 5to C2 Secundaria Ccesa007.pdf
 
Evaluacion Diagnostica Matematica 2do C2 Secundaria Ccesa007.pdf
Evaluacion Diagnostica Matematica 2do C2 Secundaria Ccesa007.pdfEvaluacion Diagnostica Matematica 2do C2 Secundaria Ccesa007.pdf
Evaluacion Diagnostica Matematica 2do C2 Secundaria Ccesa007.pdf
 
Presentación contribuciones socioeconómicas del SUPV 2023
Presentación contribuciones socioeconómicas del SUPV 2023Presentación contribuciones socioeconómicas del SUPV 2023
Presentación contribuciones socioeconómicas del SUPV 2023
 
Power Point E. Sab: Adoración sin fin...
Power Point E. Sab: Adoración sin fin...Power Point E. Sab: Adoración sin fin...
Power Point E. Sab: Adoración sin fin...
 
EL ECLIPSE DE LA PAZ (cuento literario). Autor y diseñador JAVIER SOLIS NOYOLA
EL ECLIPSE DE LA PAZ (cuento literario). Autor y diseñador JAVIER SOLIS NOYOLAEL ECLIPSE DE LA PAZ (cuento literario). Autor y diseñador JAVIER SOLIS NOYOLA
EL ECLIPSE DE LA PAZ (cuento literario). Autor y diseñador JAVIER SOLIS NOYOLA
 
Escrito administrativo técnico y comerciales
Escrito administrativo técnico y comercialesEscrito administrativo técnico y comerciales
Escrito administrativo técnico y comerciales
 
la forma de los objetos expresión gráfica preescolar
la forma de los objetos expresión gráfica preescolarla forma de los objetos expresión gráfica preescolar
la forma de los objetos expresión gráfica preescolar
 
Evaluacion Diagnostica Matematica 5to C1 Secundaria Ccesa007.pdf
Evaluacion Diagnostica Matematica 5to  C1 Secundaria Ccesa007.pdfEvaluacion Diagnostica Matematica 5to  C1 Secundaria Ccesa007.pdf
Evaluacion Diagnostica Matematica 5to C1 Secundaria Ccesa007.pdf
 
La Gatera de la Villa nº 51. Revista cultural sobre Madrid..
La Gatera de la Villa nº 51. Revista cultural sobre Madrid..La Gatera de la Villa nº 51. Revista cultural sobre Madrid..
La Gatera de la Villa nº 51. Revista cultural sobre Madrid..
 
PROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍA
PROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍAPROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍA
PROGRAMACIÓN CURRICULAR ANUAL DE CIENCIA Y TECNOLOGÍA
 
CIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCERO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCEROCIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCERO
CIENCIAS SOCIALES SEGUNDO TRIMESTRE TERCERO
 
UNIDAD DE APRENDIZAJE MARZO 2024.docx para educacion
UNIDAD DE APRENDIZAJE MARZO 2024.docx para educacionUNIDAD DE APRENDIZAJE MARZO 2024.docx para educacion
UNIDAD DE APRENDIZAJE MARZO 2024.docx para educacion
 
Tema 4 Rocas sedimentarias, características y clasificación
Tema 4 Rocas sedimentarias, características y clasificaciónTema 4 Rocas sedimentarias, características y clasificación
Tema 4 Rocas sedimentarias, características y clasificación
 

Tipo

  • 1. INTRODUCCION A HTML Y JAVASCRIPT Ing. Diego J. Arcusin darcusin@cema.edu.ar
  • 2. Objetivos del Curso  Proveer al asistente de conceptos fundamentales que le permitan utilizar los lenguajes HTML y Javascript en sus proyectos informáticos.
  • 3. Temas del Curso  Internet y la WWW.  HTML.  Historia del HTML.  HTML – CSS – Javascript.  Elementos HTML.  Tipos  Atributos  Estructura  Contenedores  Tablas  Hipervínculos  Imágenes  Formularios  Estilos CSS.  Javascript.  El Futuro.  Conclusiones.
  • 4. Internet y la WWW  Internet  WWW. Sitios Web y páginas Web.  Otros objetos en la Web.  ¿Cómo funciona?
  • 5. HTML  HTML (Hypertext Markup Language)  HTML = Hypertext + MarkUp  Hypertext Es texto ordinario al que se le incorporan funcionalidades adicionales como:  Formato,  Imágenes,  Multimedia  Y enlaces a otros documento.  MarkUp Es el proceso de tomar el texto ordinario e incorporarle símbolos adicionales. Cada uno de estos símbolos identifica a un comando que le indica al navegador como mostrar ese texto.
  • 6. Historia del HTML  En 1986 la organización internacional de Estándares publica el SGML (Standard Generalized Markup Language)  En 1990 Tim Berners-Lee crea la WWW y el HTML con base en un subconjunto del SGML.  En 1993 se crea el HTML 2.0 (o HTML+)  En 1995 el W3C (World Wide Web Consortium) define el HTML 3.0  El HTML 3.2 abandona las sugerencias del HTML 3.0 y adopta Tim Berners-Lee Director del W3C elementos desarrollados por Netscape. (Incorpora Tablas, Applets, Texto alrededor de imágenes)  En 1997 se define el estándar HTML 4.0  En 1999 aparece el estándar actual HTML 4.01  Más información en: http://www.w3.org/
  • 7. El W3C  El W3C (World Wide Web Consortiun) es un consorcio internacional donde Organizaciones miembro, Personal Full-time y el público en general trabajan para desarrollar Estándares Web.  La misión del W3C es la de maximizar el potencial de la WWW desarrollando protocolos y guías que aseguren el crecimiento futuro de la Web.  Algunas Organizaciones miembro del W3C Adobe Ericsson Nokia Apple Google, inc. Opera Software AT&T HP Sun Microsystems Cisco IBM Corporation Telefónica de España Citigroup Microsoft Yahoo, inc. Deutsche Telekom Mozilla Foundation VeriSign …Y decenas de universidades de todo el mundo
  • 8. HTML – CSS – Javascript Página Web • Párrafos •Tablas Estructura • Encabezados • Capas • Listas • Etc. HTML • Textos Contenido • Imágenes • Enlaces • Colores • Fondos Apariencia • Tipografías • Tamaños CSS • Alineación • Etc. • Efectos Comportamiento • Validaciones Javascript • Automatización
  • 9. Elementos HTML  Los elementos son los componentes fundamentales del HTML  Cuentan con 2 propiedades básicas:  Atributos  Contenido  En general se conforman con una Etiqueta de Apertura y otra Cierre.  Los atributos se colocan dentro la etiqueta de apertura, y el contenido se coloca entre la etiqueta de apertura y la de cierre. Elemento Etiqueta de Apertura Contenido Etiq. de Cierre <p class=“texto”>Curso HTML CEMA</p> Nombre Valor Atributo
  • 10. Atributos  Los atributos de un elemento son pares de nombres y valores separados por un ‘=‘ que se encuentran dentro de la etiqueta de apertura de algún elemento. Los valores deben estar entre comillas. Ejemplos: <span id=‘iddeesteelemento' style='color:red;' title=‘Curso de HTML'> Curso de HTML </span> <a href=“http://www.cema.edu.ar” class=“milink” target=“_blank”> Universidad del Cema </a>
  • 11. Tipos de Elementos  Algunos tipos de Elementos  Estructurales  Describen el propósito del texto y no denotan ningún formato específico.  Por ejemplo: <h1>Curso HTML</h1>  De Presentacion  Describen la apariencia del texto, independientemente de su función.  Por ejemplo: <b>Curso HTML</b>  Los elementos de presentación se encuentran obsoletos desde la aparición del CSS.  De HiperTexto  Relaciona una parte del documento a otros documentos.  Por ejemplo: <a href=“http://www.cema.edu.ar”>Universidad del Cema</a>
  • 12. Estructura de un Documento HTML  <HTML>… </HTML>  Delimita el Documento HTML  <HEAD> … </HEAD>  Delimita el encabezado del Documento HTML  En general incluye los metadatos del documentos y Scripts.  <BODY> … </BODY>  Delimita el Cuerpo del Documento HTML.  Es donde se incluyen los contenidos visibles del documento.  Ejemplo <html> <head> Aquí se incluyen os distintos elementos del encabezado </head> <body> Aquí se incluyen los distintos elementos contenedores o scripts </body> </html>
  • 13. Elementos del HEAD Alguno de los elementos factibles de incluir en el HEAD son:  <TITLE> … </TITLE>  Define el título del documento HTML  <SCRIPT> … </SCRIPT>  Se utiliza para incluir programas al documento. En general se tratan de Javascripts.  <STYLE> … </STYLE>  Especifica un estilo CSS para ser utilizado en el documento.  <META> … </META>  Permite especificar información de interés como: autor, fecha de publicación, descripción, palabras claves, etc.
  • 14. Contenedores (Block-Level Elements)  Parrafos  Es el contenedor mas común.  Su sintaxis es: <P> … </P>  Encabezados  Indican una jerarquía de secciones dentro del documento  Su sintáxis: <h1>…</h1>, <h2>…</h2>, <h3>…</h3>,.. <h6>…</h6>,  Listas  Listas de Definiciones (consistente de pares de términos y definiciones)  <dl>…</dl> Crea la lista  <dt>…</dt> Crea un nuevo término  <dd>…</dd> Crea una nueva definición  Lista Ordenada Enumerada  <ol> … </ol> Crea una nueva lista  <li> … </li> Crea un nuevo ítem en la lista  Lista Ordenada No Enumerada  <ul> … </ul> Crea una nueva lista  <li> … </li> Crea un nuevo ítem en la lista  Capas  Permiten agrupar y diagramar contenidos en los documentos.  Su sintaxis es: <DIV> … </DIV>
  • 15. Contenedores (Tablas)  <table> … </table> Crea la tabla  <tr> … </tr> Crea una nueva fila  <td> … </td> Crea una nueva celda dentro de la fila Por ejemplo: Creación de una tabla de 2 x 2 <table> <tr> <td> … </td> <td> … </td> </tr> <tr> <td> … </td> <td> … </td> </tr> </table>
  • 16. Tablas  Qué son y para qué sirven.  Atributos de las Tablas  Atributos de las Celdas y Filas  Prioridades en los formatos  Tablas anidadas  Tablas Irregulares (Atributos colspan y rowspan)  Anchos (Pixels Vs. Porcentajes)
  • 17. Hipervínculos  ¿Qué es un hipervínculo?  Ubicación y rutas de documentos.  Rutas Absolutas  Rutas Relativas  Rutas relativas a la raíz del sitio  Vínculos a otras páginas. Etiqueta <A>.  Uso del atributo target (Destino).  Anclaje de nombre. Atributo name.  Comportamientos del Navegador ante distintos tipos de archivos enlazados.
  • 18. Imágenes  Elemento <IMG>  ¿Qué imágenes se pueden usar?  Ventajas y desventajas de cada formato.  Imágenes e Hipervínculos
  • 19. Formularios  ¿Para qué sirven?  Elementos para Formularios  Campos de Texto  Casillas de Verificación  Botones de opción  Menús  Botones  Campos ocultos  Campos de carga de archivos  ¿Cómo se envía la información?  ¿Se pueden validar los Campos?
  • 20. Formularios  Elemento <FORM> Atributos: method, action  Elemento <INPUT> Atributo: type (text, checkbox, radio, button, hidden)  Elemento <SELECT>  Elemento <TEXTAREA>
  • 21. Más Elementos  Otros Elementos  Nueva linea <BR>  Línea Horizontal <HR>  Comentarios. <!- - xxxxx - ->
  • 22. Estilos CSS  Antes de la aparición de los estilos, la presentación se manejaba directamente dentro de los elementos HTML por medio de atributos. Por ejemplo: <h2 align="center"> <font color=“blue" size=“3" face="Times New Roman, serif"> <i>Seminario de HTML UCEMA</i> </font> </h2>  CSS permite separar el contenido de un documento de su presentación. En el documento HTML: En la hoja de estilos se define el formato de los <h2>Seminario de HTML UCEMA</h2> encabezados h2: h2 { text-align: center; color: blue; font: italic large "Times New Roman", serif; }
  • 23. Ventajas del uso de CSS  Estandarizar la presentación de un sitio web completo. Haciendola fácil de mantener.  Diferentes usuarios pueden contar con diferentes estilos acordes a sus necesidades. Ejemplos:  Estilos para personas con dificultades visuales,  Estilos para dispositivos móviles,  Estilos para dispositivos monocromos,  Estilos para impresión,  Etc.  Los documentos HTML se reducen en tamaño y complejidad.
  • 24. Formatos CSS  Propiedades de fuentes  Propiedades de color y fondo Margin (Margen)  Propiedades de texto Border (Borde)  espaciado de palabras Padding (Relleno)  alineación Contenido  Propiedades de caja  Margen  Borde  Relleno  Estilos de listas
  • 25. Estilos CSS Una hoja de estilos consiste en un conjunto de reglas. h2 { Cada regla esta formada por: text-align: center;  El Selector (nombre del estilo) color: blue;  La Declaración (define el estilo) font: italic large "Times New Roman", serif; }  Propiedad .textoresaltado {  Valor font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; ¿Qué podemos hacer con los estilos? font-weight: bold; /* Esto es un comentario */ color: #000000;  Redefinir estilos de Etiquetas HTML. }  Crear Estilos Personalizados para #logo { background-image: url("/img/logo.gif"); uso genérico (Clases) background-position:center;  Crear Estilos para un elemento background-repeat:no-repeat; height: 50px; width: 150px; HTML específico (por Id) position: absolute; left: 0px; top: 0px; }
  • 26. Como incluir estilos CSS  Inline Styles <h2 style="color: blue; background: green;"> Curso HTML UCEMA Utilizando el atributo “style” se define el </h2> estilo de un elemento HTML en forma <head> individual. <style type="text/css"> h2 {  Embedded Style font-style: italic; font-weight: bold; Se define la regla CSS dentro de un color: blue; documento HTML. Se puede aplicar a } </style> cualquier elemento de ese documento. </head> <body>  Hojas de Estilos externas <h2>Curso HTML UCEMA</h2> </body> Un archivo CSS independiente que se encuentra referenciado en cada uno de <head> los documentos HTML que desean <link rel=stylesheet type="text/css“ href=“estilos.css"> </head> utilizarlo.
  • 27. Javascript  Creado por Brendan Eich para Netscapa aparece en Netscape 2.0B3 en 1995.  Es un lenguaje de programación interpretado con base en la sintaxis del lenguaje C.  Está basado en objetos y guiado por eventos.  No tiene nada que ver con Java  Las funciones Javascript se incluyen en los documentos HTML interactuando con el DOM (Document Object Model) de la página para realizar tareas no factibles de hacer con HTML sólo. Brendan Eich Creador del Javascript DOM: Es una interface (independiente del lenguaje) que permite a los scripts acceder dinámicamente y actualizar el contenido, la estructura y el estilo de los documentos.
  • 28. Capacidades de Javascript  Algunas de las cosas que se pueden hacer con Javascript:  Abrir nuevas ventanas controlando su tamaño, look & feel, controles, etc.  Incorporar validaciones a los formularios.  Cambios de imágenes al colocar el mouse sobre algún objeto de la página web.  Generar respuestas ante distintos eventos  Efectos visuales en la página.  Crear, Eliminar o cambiar atributos de elementos de una página HTML en forma dinámica.  Crear o Leer Cookies  Detectar la configuración del Browser.
  • 29. Dónde incluir el Javascript  En general se utiliza el elemento script  Las funciones Javascript pueden estar en archivos independientes. Por ejemplo: <script language="JavaScript" src ="archivo.js"> </script>  También se pueden incluir las instrucciones dentro del elemento Script. Por ejemplo: <script language="JavaScript" type="text/JavaScript"> <!-- function AbroVentana (URL,nombre,features) { //Esto es un comentario window.open(URL,nombre,features); } //--> </script>  El código Javascript también se puede incluir directamente en un evento asociado a algún elemento del documento. Por ejemplo: <input type=“button" onclick="alert(‘Gracias por su click');return false;" value="Click">
  • 30. El Futuro  XHTML (Extensive Hyper Text MarkUp Language)  Es la versión XML de HTML  Tiene las mismas funciones que el HTML pero con una sintáxis más estricta (como el XML).  Surge para facilitar el acceso a la web de nuevos dispositivos (Por ejemplo: dispositivos móviles).  La sintaxis más estricta obliga a un formato correcto, liberando a los navegadores de “tratar de interpretar” documentos mal creados, lo que hace más rápida la carga de documentos bien hechos.
  • 31. Conclusiones Página Web • Párrafos •Tablas Estructura • Encabezados • Capas • Listas • Etc. HTML • Textos Contenido • Imágenes • Enlaces • Colores • Fondos Apariencia • Tipografías • Tamaños CSS • Alineación • Etc. • Efectos Comportamiento • Validaciones Javascript • Automatización