M.C. Rafael A. García Rosas.

1 M.C. Rafael A. García Rosas. [email protected] M...
Author: Manuela Gardon
0 downloads 3 Views

1 M.C. Rafael A. García Rosas. [email protected]HTML M.C. Rafael A. García Rosas.

2 Qué es HTML HTML (HyperText Markup Language ) es el lenguaje que se emplea para el desarrollo de páginas de internet. Este lenguaje está constituido de elementos que el navegador interpreta y las despliega en la pantalla de acuerdo a su objetivo. Para poder crear una página HTML se requiere un simple editor de texto y un navegador de internet.

3 Breve historia de HTML HTML These were the early days; you could fit everything there was to know about HTML into the back of your car. Pages weren't pretty, but at least they were hypertext enabled. No one cared much about presentation, and just about everyone on the Web had their very own "home page.”

4 Breve historia de HTML HTML 3The long, cold days of the "Browser Wars." Netscape and Microsoft were duking it out for control of the world. After all, he who controls the browser controls the Universe, right? At the center of the fallout was the Web developer. During the wars, an arms race emerged as each browser company kept adding their own proprietary extensions in order to stay ahead. Who could keep up? And not only that, back in those days, you had to often write two separate Web pages: one for the Netscape browser and one for Internet Explorer. Not good. 1995

5 Breve historia de HTML HTML 4Ahhh... the end of the Browser Wars and, to our rescue, the World Wide Web Consortium (nickname: W3C). Their plan: to bring order to the Universe by creating the ONE HTML "standard" to rule them all. The key to their plan? Separate HTML's structure and presentation into two languages a language for structure (HTML 4.0) and a language for presentation (CSS) and convince the browser makers it was in their best interest to adopt these standards. But did their plan work? Uh, almost... with a few changes (see HTML 4.01). 1998

6 Breve historia de HTML HTML 4.0.1 Ah, the good life. HTML 4.01 entered the scene in 1999, and is the most current version of HTML. While everyone hoped 4.0 would be the ONE, it's always the case that a few fixes are needed here and there. No biggies and nothing to worry about. Compared to the early days of HTML (when we all had to walk barefoot in 6 feet of snow, uphill both ways), we were all cruising along writing HTML 4.01 and sleeping well at night knowing that almost all browsers (at least the ones anyone would care about) are going to display your content just fine. 1999

7 Breve historia de HTML XHTML 1.0 But, of course, just as we were all getting comfortable, new technologies were created and things changed. HTML and another markup language known as XML got together, and sooner than you can say "arranged marriage," XHTML 1.0 was born. XHTML inherited traits from both parents: popularity and browser-friendliness from HTML, and extensibility and strictness from XML. 2000

8 Breve historia de HTML HTML 5 No termina aquí… 2009

9 Estructura interna de una página HTMLLas instrucciones HTML están encerradas entre los caracteres: < y >. Muchos elementos HTML requieren una marca de comienzo y otra de finalización. Todo aquello que está fuera de las marcas del lenguaje se imprime en la pantalla (dentro del navegador). El lenguaje HTML no es sensible a mayúsculas y minúsculas. La estructura básica de una página HTML es: Cuerpo de la página. pagina1.html

10 Salto de línea
Todo el texto que disponemos en el cuerpo de la página aparece en la misma línea. Para indicarle al navegador que queremos que continúe en la próxima línea debemos hacerlo con el elemento HTML
.
viene de break. PHP
 es lo mismo: PHP

11 Párrafo

Un párrafo es una oración o conjunto de oraciones referentes a un mismo tema. Todo lo que encerremos entre las marcas

y

aparecerá separado por un espacio con respecto al próximo párrafo.

viene de paragraph. Dentro de un párrafo puede haber saltos de línea
. Continúa ejemplo ->

12 Párrafo

ejemplo

SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de programacion para trabajar con base de datos relacionales como MySQL, Oracle, etc.
MySQL es un interpretador de SQL, es un servidor de base de datos.
MySQL permite crear base de datos y tablas, insertar datos, modificarlos, eliminarlos, ordenarlos, hacer consultas y realizar muchas operaciones, etc., resumiendo: administrar bases de datos.

Este tutorial tiene por objetivo acercar los conceptos iniciales para introducirse en el mundo de las bases de datos.

13 Títulos

El título de mayor nivel es

, es decir el que tienen una fuente mayor.

viene de heading. El navegador el responsable de definir el tamaño de la fuente. Requiere la marca de cerrado del título con la barra invertida. Cada título aparece siempre en una línea distinta.

Tipos de datos en MySQL

varchar

 o esto:

Tipos de datos en MySQL

varchar

14 Énfasis ( )Enfatizar algo significa realzar la importancia. Contamos con dos elementos para enfatizar que son ( ). viene de empathize que significa énfasis. viene de strong que significa fuerte. El elemento de mayor fuerza de énfasis es strong y le sigue em. La mayoría de los navegadores muestran el texto enfatizado con con un texto en negrita y para el elemento utilizan letra itálica. Típos de datos

15 Hipervínculo a otra página del mismo sitio El elemento más importante que tiene una página de internet es el hipervínculo. Cargar otra página en el navegador. viene de anchor que significa ancla. Normalmente un navegador al encontrar esta marca muestra un texto subrayado. La marca de hipervínculo a otra página del mismo sitio tiene la siguiente sintaxis: Noticias Una propiedad se incorpora en el comienzo de una marca y tiene un nombre y un valor.

16 Hipervínculo a otra página del mismo sitio El valor de la propiedad debe ir entre comillas dobles. La propiedad href del elemento "a" hace referencia a la página que debe mostrar el navegador si el visitante hace clic sobre el hipervínculo. pagina1.html pagina2.html

Página principal.

 Noticias

Noticias.

 Salir.

17 Hipervínculo a otro sitio de internet Cuando se trata de una página de internet, el protocolo es el http. La sintaxis para disponer un hipervínculo a otro sitio de internet es: Buscador Google -> Selecciona y envía una página que tiene configurada el servidor como página por defecto. Acerca de Google

18 Imágenes dentro de una página Generalmente, la imagen se encuentra en el mismo servidor donde se almacenan nuestras páginas HTML. Los formatos clásicos son los archivos con extensiones gif, jpg y png. Pintura geométrica En la propiedad src indicamos el nombre del archivo que contiene la imagen. Alt describir el contenido de la imagen. viene de image. src viene de source . alt viene de alternative.

19 Imágenes dentro de una página Es bueno practicar con esto ya que cuando implementemos sitios muy grandes seguramente agruparemos cada módulo en distintas carpetas. Pintura geométrica Pintura geométrica Pintura geométrica Pintura geométrica

20 Hipervínculo mediante una imagen y Ahora podemos implementar un hipervínculo pero en vez de mostrar un texto mostraremos una imagen. Se disponer la marca encerrada entre la marca de comienzo y fin del enlace . Pintura Geométrica

21 Apertura de un hipervínculo en otra instancia del navegador.El elemento tiene una propiedad target que nos permite indicar que la referencia del recurso sea abierto en otra página. Debemos asignarle el valor "_blank” Periódico Clarin

22 Hipervínculo a un cliente de correo El elemento permite direccionar un hipervínculo a un programa de envío de correos que tengamos configurado en nuestra computadora. Enviar mail. Podemos inclusive añadir el envío de mail con copia y con copia oculta a otras direcciones. Enviar mail.

23 Anclas llamadas desde la misma página.Disponer una referencia dentro de la página para poder posteriormente disponer un hipervínculo a dicha marca. Un ancla se la define en una parte de la página que queremos que el operador llegue a partir de un hipervínculo. La sintaxis para ir a un ancla desde un hipervínculo es la siguiente: Introducción Ejercicio: Implementa una página con un menú y varias anclas.

24 Anclas llamadas desde otra página.Debemos conocer el nombre de la página a llamar y el nombre del ancla. Luego la sintaxis para la llamada al ancla es: Introducción Ejercicio: Implementa una página con un menú y varias anclas hacia distintas páginas.

25 Tarea 1 Problema 1: Confeccionar una página HTML que muestre tu nombre y apellido, luego en la siguiente línea los nombres de tus padres separados por un guión. Problema 2: Confeccionr una página que muestre en un párrafo datos referentes a tus estudios y en otro párrafo tu nombre y mail.

26 Tarea 1(2) Problema 3: Confeccionar el titular de un periódico con un título de nivel 1. Luego definir dos títulos de segundo nivel con los textos (Noticias políticas y Noticias deportivas),en cada una de estas secciones definir dos titulares de tercer nivel con un párrafo cada una. Al final de la página mostrar un título de cuarto nivel con el nombre de la empresa propietaria del periódico.

27 Tarea 1(3) Problema 4: Crear tres páginas con una foto cada una (foto1.jpg, foto2.jpg y foto3.jpg) luego al ser presionada avanzar a la siguiente página, es decir de la pagina1.html llamar a la pagina2.html, de la pagina2.html pasar a la pagina3.html y de ésta a la primera. Las imágenes se encuentran en una carpeta llamada imágenes que depende directamente de la raíz del sitio.

28 Tarea 1(4) Problema 5: Una empresa que vende pizzas tiene 3 ofertas:1 muzzarella y una bebida cola a 5 pesos, 2 muzzarellas a 6 pesos y 4 muzarrellas a 10 pesos. Confeccionar una página que disponga tres hipervínculos a cada una de esas ofertas. Al ser presionadas abrir el cliente de correo y enviar la promoción correspondiente. En el título indicar si se trata de la promoción 1, 2 o 3. En el cuerpo del mensaje pedir que ingrese la dirección y teléfono de la persona que hace el pedido.

29 Tarea 1(5) Problema 6: Disponer una serie de hipervínculos sobre noticias del día. Enlazar los hipervínculos con anclas que se encuentran en otra página.

30 Lista ordenada (

    )Numera una serie de objetos. La marca
      y su correspondiente marca de cerrado es
    .     En su interior cada uno de los items se los dispone con el elemento
  1. .
    1. Rodriguez Pablo
      2.
    2. Gonzalez Raul
      3.
    3. Lopez Hector
      4.
      viene de ordened list
    1. viene de list item

      31 Lista no ordenada (

        )No utiliza un número delante de cada items sino un pequeño símbolo gráfico. Idéntico a las listas ordenadas.

        Lenguajes de programación.
        • C
          •
        • C++
          •
        • Java
          •
        • C#
          •
          viene de unordered list
        • viene de list item

          32 Listas anidadas. Es posible insertar una lista dentro de otra.Atención -> tener cuidado en la correcta apertura y cerrado de las marcas.

        • Argentina

          33 Lista de definiciones (

          )Asocia un término y la definición del mismo. El navegador se encarga de hacer el sangrado del contenido del elemento.
          C++
          Es un lenguaje de programación, diseñado a mediados de los años 1980, por Bjarne Stroustrup, como extensión del lenguaje de programación C.
          viene de definition list
          viene de definition term
          viene de definition description

          34 Tabla (

          ) Es la marca de comienzo de la tabla.Es la marca de comienzo de una fila.Esta marca debe estar dentro del elemento table. viene de table row que significa fila de la tabla.
          Es la marca de comienzo de una celda. Esta marca debe estar dentro del elemento tr. viene de table data que significa dato de la tabla. Continúa ejemplo ->

          35 Tabla (

          )
          China 1300 millones
          India 1080 millones Estados Unidos 295 millones

          36 Tabla con encabezado (

          		)Para indicar que se trata de una celda de encabezado utilizamos el elemento en lugar de .
          Paises Cantidad de habitantes
          viene de table header cell que significa celda de encabezado de tabla.

          37 Tabla con título (

          )Para disponer un título a una tabla debemos incorporar el elemento caption inmediatamente después que abrimos la marca table. …
          Población de los paises con mayor cantidad de habitantes.
          significa título.

          38 Tabla y combinación de celdas.Ejercicio de clase

          39 Contenido de la cabecera de la página ()<span class='tr'>permite definir el título que aparecerá en la barra del navegador.</span> <span class='tr'>Siempre debemos buscar un título lo más significativo.</span> <span class='tr'><html></span> <span class='tr'><head></span> <span class='tr'><title>Título de la página …

          41 Formulario -

          Permite que el visitante al sitio cargue datos y sean enviados al servidor. El HTML no tiene la responsabilidad de registrar los datos en el servidor, esta actividad está delegada a un lenguaje que se ejecute en el servidor (PHP, ASP, ASP.Net, JSP etc.). Ingrese su nombre:

          42 Formulario - input type="text"/ input type="password"Podemos definir cuadros para el ingreso de una clave y botones para borrar el contenido de todos los controles del formulario. La propiedad name de cada elemento input debe tener un nombre distinto.

          43 Formulario - textarea Nos permite el ingreso de varias líneas a diferencia del cuadro de texto (input/text). Es un elemento que requiere una marca de comienzo y una de finalización. Usa dos propiedades llamadas rows y cols.

          44 Formulario - input type="checkbox"Un checkbox es una casilla de selección que puede tomar dos valores (seleccionado/no seleccionado). Un control checkbox no muestra texto, solo una casilla que el operador puede tildar o destildar.. Java
           C++
           C
           C#
           Atención -> Es importante hacer notar que los caracteres permitidos de la propiedad name son los caracteres alfabéticos y los números siempre y cuando no sea el primero.

          45 Formulario - input type="radio"Aplica cuando tenemos un conjunto de opciones pero sólo una puede ser seleccionada a la vez. Tienen el mismo valor en la propiedad name, con esto se logra que cuando seleccionamos uno se deseleccione el actual. Primaria
           Secundaria
           Universitario

          46 Formulario - select (cuadro de selección individual)Nos permite seleccionar una opción entre un conjunto. Una variante gráfica de este control es inicializar la propiedad size del elemento select con un valor distinto a uno, con esto creamos un cuadro de selección que muestra simultáneamente varios elementos (aunque sólo uno se puede elegir).

          47 Formulario - select (cuadro de selección múltiple)Permitir seleccionar varias opciones al mismo tiempo.

          48 Formulario - select (agrupamiento de opciones)Podemos agrupar las opciones que tiene el cuadro de selección, esto tiene sentido si el cuadro de selección tiene muchos items. La propiedad label del elemento optgroup aparece dentro del control select pero no se puede seleccionar, es un título.

          49 Formulario - button Control visual que se puede utilizar para sustituir los controles: Por Todo lo que está contenido entre las marcas de comienzo y fin del elemento button aparece dentro del botón, como por ejemplo una imagen, un párrafo, enfatizado de una palabra etc. El type=button significará que deberemos codificar una función en javascript para procesar el evento.

          50 Formulario - input type="button"Otro tipo de boton que podemos crear es mediante el elemento input y fijando en la propiedad type el valor "button". Su actividad dependerá de un programa desarrollado generalmente en JavaScript. Atención -> Recordemos que HTML solo tiene Contenido, si queremos funcionalidad deberemos definir los eventos para dichos botones.

          51 Formulario - input type="file"El control de tipo file nos permite enviar un archivo al servidor. El HTML solo indica al navegador que debe enviar el archivo al servidor pero debe haber en el servidor un programa que lo almacene en una carpeta del servidor. Tener en cuenta cuando hacemos upload de archivos al servidor es inicializar la propiedad enctype del elemento form.

          enctype="multipart/form-data">

          52 Formulario - input type="hidden"Es un campo oculto que no se visualiza dentro del formulario. Su utilidad real solo podrá ser comprendida cuando se estudie un lenguaje de servidor. ¿Cuál puede ser la utilidad de este campo?

          53 Formulario - agrupamiento de controles.Tiene el objetivo de recuadrar y agrupar un conjunto de controles de un formulario

          y
          . Además para agregar un título a este recuadro debemos agregar otro elemento HTML llamado legend.
          Datos personales Apellido y nombre:
          Documento de identidad:
          Datos Laborales Nombre de la empresa:
          Actividad:

          54 Formulario - controles con valores iniciales.Un control puede aparecer cargado con un valor por defecto. Para inicializar un control de tipo text debemos dar un valor a la propiedad value: Para inicializar un control de tipo textarea debemos indicar el dato entre el comienzo y el fin de la marca: Para inicializar un control de tipo checkbox debemos disponer la propiedad checked sin asignar valor: Opcion 1

          55 Formulario - controles con valores iniciales.Para inicializar un control de tipo radio debemos definir la propiedad checked sin valor, igual que un checkbox, con la salvedad que solo un un control de tipo radio puede tener definida esta propiedad:

          56 Formulario - orden de foco de controles.Todos los controles de formulario pueden definir una propiedad llamada tabindex que es un valor entero entre 0 y Este número indica el orden en que los controles toman foco. Cuando se presiona la tecla tab el navegador pasa el foco al siguiente control. ¡Ahora practícalo tu usando un formulario con al menos 10 controles!

          57 Formulario - Inhabilitar controles.Los controles button, input, optgroup, option, select y textarea, poden aparecer inhabilitados.

          Seleccione la sección donde desea ingresar:
          Adolescentes
           Mayores
          Esta propiedad tiene mucha aplicación si se aplica javascript en la página. Mediante javascript podemos luego de haber sido cargado el documento modificar el estado de los controles, habilitando y deshabilitando de acuerdo a los datos que carga el visitante al sitio.

          58 Formulario - text/password y maxlengthLos controles de tipo text y password pueden limitar la cantidad de caracteres que puede ingresar el usuario a partir de la propiedad maxlength. Debemos asignarle un valor entero que indica hasta cuantos caracteres está permitido ingresar. No hay que confundir el objetivo de la propiedad size con maxlength. Con la propiedad size sólo indicamos la cantidad máxima de caracteres a mostrar dentro del control antes de hacer scroll de los datos.

          59 Formulario - text/password/textarea y readonlyCuando un control tiene la propiedad readonly el control toma foco pero no se puede cambiar su contenido. La diferencia con la propiedad disabled es que con esta no toma foco el control y generalmente aparece con un color que indica que el control está deshabilitado. Esta propiedad tiene uso cuando mediante un lenguaje de script (generalmente javascript) modificamos el control cambiándolo de estado ante ciertos eventos. Ingrese su nombre: readonly>

          60 Formulario - Envío de datos mediante mail.Es posible enviar los datos mediante el programa cliente de mail que esté configurado en la computadora.

          Si queremos que el correo llegue con un título debemos inicializar subject:

          61 Formulario - Envío de datos mediante mail.

          Reclamos

          Ingrese su nombre:
          Ingrese su dirección: Informe del problema:

          62 Tarea 2 Problema 1: Confeccionar un formulario que solicite el ingreso de mail de una persona y luego pida el ingreso de su clave dos veces (recordar inicializar la propiedad name del elemento input con distintos nombres para cada control). Problema 2: Confeccionar un formulario que permita ingresar el nombre de una persona, su mail, su ife y finalmente su curriculum (este último dato hacerlo utilizando un textarea).

          63 Tarea 2 (2) Problema 3: Confeccionar un formulario que muestre en un control select un serie de mails. Luego permitir que el visitante seleccione uno o varios mail del cuadro de selección. Problema 4: Confeccione un control de tipo select con los nombres de paises de América y Europa. Agrupe los países por continente.

          64 Tarea 2 (3) Problema 5: Definir una matriz de 4 filas y 4 columnas de elementos de tipo text. Luego hacer la carga de todos los elementos del perímetro en orden horario y finalmente los cuatro elementos centrales en orden anti horario.

          65 Tarea 2 (4) Problema 6: Confeccionar un formulario que permita solicitar pizzas a domicilio. Indicando: Tipo de pizza. Cantidad. Dirección de entrega. Enviar el pedido a la dirección de correo

          66 Tarea 2 (5) Problema 7: Confeccionar una tabla que muestreEn la primer columna los nombre de distintos empleados de una compañía y En la segunda el sueldo bruto Considera que la compañía tiene 4 empleados. Además Mostrar los títulos de las columnas como 'Nombre del Empleado' y 'Sueldo Bruto’. Y Disponer en la tabla completa el nombre de la compañía.

          67 Frames Permiten mostrar más de un archivo HTML en la misma ventana del navegador. Solo se aconseja emplear frames cuando la situación lo amerita, hay que tener en cuenta que el uso de frame hace menos accesible el sitio y es mucho más difícil imprimir su contenido. Dividimos la ventana del navegador en dos secciones que mostrarán una página HTML cada una. En el interior del elemento frameset definimos las dos páginas HTML.

          68 Frames (2) Hay situaciones donde queremos que un frame NO se redimensione en base a porcentages, sino que tenga un tamaño fijo en pixeles. Así, la primer y tercer columnas miden 200px La segunda columna tomará la dimensión faltante hasta llenar el ancho de la pantalla.

          69 Frames - Actualización de un frame a partir del enlace de otro frameUna actividad habitual es disponer hipervínculos en uno de los frame y actualizar el contenido de otro frame. Ejercicio: Page1.html prueba de frames </span> <span class='tr'><p>El navegador no soporta frames</p></span> <span class='tr'>

          70 Frames - Actualización de un frame a partir del enlace de otro frameEjercicio (continuación): Page2.html prueba de frames

          Enlaces.

          - Para indicar que frame debe mostrar las páginas de estos hipervínculos agregamos la propiedad target

          71 Frames - Actualización de un frame a partir del enlace de otro frameEjercicio (continuación): Page3.html prueba de frames

          Página A

          Este es el contenido de página del archivo:page3.html

          72 Frames - Actualización de un frame a partir del enlace de otro frameEjercicio (continuación): Page4.html prueba de frames

          Página B

          Este es el contenido de página del archivo:page4.html

           ¿Qué otras propiedades puedes aplicar al elemento frame y que utilidad tienen?

          73 Frames - Anidamiento de framesetEl lenguaje HTML nos permite definir un frameset en la ubicación de un frame, esto se logra anidando frameset. El objetivo es:

          74 Frames - Anidamiento de frameset (2) prueba de frames </span> <span class='tr'><p>El navegador no soporta frames</p></span> <span class='tr'>

          75 iframes El HTML dispone de un elemento llamado iframe que permite disponer un frame con el flujo de la página, similar a disponer una imagen en la página. Le indicamos el ancho y alto que debe tomar el iframe, la ubicación continúa el flujo de la página.

          76 Proyecto 1 Equipos de 2 personas.Objetivo: Implementar el portal de demostración de productos de la empresa X Escoge un tema de tu elección (deportes, películas, video juegos, etc.). Asignar un nombre a tu empresa. Diseñar la versión 1 del sitio web.

          77 “No hay límite para la IMAGINACIÓN”Proyecto 1 (2) El sito debe contar al menos con: De manera general. Color o tema de fondo del sitio. Logotipo y nombre de la empresa como titulo en la parte superior. De manera particular. Una página de bienvenida y motivación. Una página de contacto. Una página de registro de seguidores con sus datos personales. Una página de acerca de… con las fotos de los autores del sitio y comentarios personales. “No hay límite para la IMAGINACIÓN”