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

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

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

[email protected]


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.


Breve historia de HTMLHTML 1.02.0

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.”

1989 1991


Breve historia de HTMLHTML 3

The 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



Ahhh... 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


Breve historia de HTMLHTML 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


Breve historia de HTMLXHTML 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



No termina aquí…

2009


Estructura interna de una página HTML

• Las 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:<html> <head> </head>

<body> Cuerpo de la página. </body> </html>

pagina1.html


Salto de línea <br>

• 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 <br>.

• <br> viene de break.

PHP<br> es lo mismo: PHP <br>


Párrafo <p>

• Un párrafo es una oración o conjunto de oraciones referentes a un mismo tema.

• Todo lo que encerremos entre las marcas <p> y </p> aparecerá separado por un espacio con respecto al próximo párrafo.

• <p> viene de paragraph.

• Dentro de un párrafo puede haber saltos de línea <br>.

Continúa ejemplo ->


Párrafo <p> ejemplo<html> <head> </head> <body>

<p> SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de programacion para trabajar con base de datos relacionales como MySQL, Oracle, etc.<br> MySQL es un interpretador de SQL, es un servidor de base de datos.<br> 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.</p> <p> Este tutorial tiene por objetivo acercar los conceptos iniciales para introducirse en el mundo de las bases de datos. </p>

</body> </html>


Títulos <h1><h2><h3><h4><h5><h6>

• El título de mayor nivel es <h1>, es decir el que tienen una fuente mayor.

• <h1> 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.

<h1>Tipos de datos en MySQL</h1> <h2>varchar</h2> o esto: <h1>Tipos de datos en MySQL</h1><h2>varchar</h2>


Énfasis (<em> <strong>)• Enfatizar algo significa realzar la importancia.

• Contamos con dos elementos para enfatizar que son (<em> <strong>).

• <em> viene de empathize que significa énfasis.

• <strong> 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 <strong> con un texto en negrita y para el elemento <em> utilizan letra itálica.

<strong>Típos de datos</strong>


Hipervínculo a otra página del mismo sitio <a>

• El elemento más importante que tiene una página de internet es el hipervínculo.

• Cargar otra página en el navegador.

• <a> 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:

<a href="pagina2.html">Noticias</a> Una propiedad se incorpora en el comienzo de una marca y tiene un nombre y un valor.


Hipervínculo a otra página del mismo sitio <a>

• 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 <html> <head></head> <body> <h1>Página principal.</h1> <a href="pagina2.html">Noticias</a> </body> </html>

<html> <head></head><body> <h1>Noticias.</h1> <a href="pagina1.html">Salir.</a> </body> </html>


Hipervínculo a otro sitio de internet <a>

• 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:<a href="http://www.google.com">Buscador Google</a>

• http://www.google.com -> Selecciona y envía una página que tiene configurada el servidor como página por defecto.

<a href="http://www.google.com/intl/en/about.html">Acerca de Google</a>


Imágenes dentro de una página <img>

• 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.

<img src="foto1.jpg" alt="Pintura geométrica">

• En la propiedad src indicamos el nombre del archivo que contiene la imagen.

• Alt describir el contenido de la imagen.

• <img> viene de image. • src viene de source .• alt viene de alternative.


Imágenes dentro de una página <img>

Es bueno practicar con esto ya que cuando implementemos sitios muy grandes seguramente agruparemos cada módulo en distintas carpetas.

<img src="imagenes/foto1.jpg" alt="Pintura geométrica">

<img src="../foto1.jpg" alt="Pintura geométrica">

<img src="../../foto1.jpg" alt="Pintura geométrica">

<img src="../imagenes/foto1.jpg" alt="Pintura geométrica">


Hipervínculo mediante una imagen <a> y <img>

• Ahora podemos implementar un hipervínculo pero en vez de mostrar un texto mostraremos una imagen.

• Se disponer la marca <img> encerrada entre la marca de comienzo y fin del enlace <a>.

<a href="pagina2.html"><img src="/imagenes/foto1.jpg" alt="Pintura Geométrica"></a>


Apertura de un hipervínculo en otra instancia del navegador.

• El elemento <a> tiene una propiedad target que nos permite indicar que la referencia del recurso sea abierto en otra página.

• Debemos asignarle el valor "_blank”

<a href="http://www.clarin.com.ar" target="_blank">Periódico Clarin</a>


Hipervínculo a un cliente de correo <a>

• El elemento <a> permite direccionar un hipervínculo a un programa de envío de correos que tengamos configurado en nuestra computadora.

<a href="mailto:[email protected]?subject=título del mensaje&body=cuerpo del mensaje">Enviar mail.</a>

• Podemos inclusive añadir el envío de mail con copia y con copia oculta a otras direcciones.

<a href="mailto:[email protected]? subject=aquí el título&[email protected]&[email protected]&body=Este es el cuerpo">Enviar mail.</a>


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.

<a name="nombreancla"></a>

• La sintaxis para ir a un ancla desde un hipervínculo es la siguiente:

<a href="#nombreancla">Introducción</a>

Ejercicio: Implementa una página con un menú y varias anclas.


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:

<a href="pagina2.html#introduccion">Introducción</a>

• Ejercicio: Implementa una página con un menú y varias anclas hacia distintas páginas.


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.


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.


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.


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.


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.


Lista ordenada (<ol>)• Numera una serie de objetos.

• La marca <ol> y su correspondiente marca de cerrado es </ol>.

• En su interior cada uno de los items se los dispone con el elemento <li>.

<html> <head> </head> <body> <ol> <li>Rodriguez Pablo</li> <li>Gonzalez Raul</li> <li>Lopez Hector</li> </ol> </body> </html>

• <ol> viene de ordened list • <li> viene de list item


Lista no ordenada (<ul>)• No utiliza un número delante de cada items sino un pequeño símbolo gráfico.

• Idéntico a las listas ordenadas.

<html> <head> </head> <body> <h2>Lenguajes de programación.</h2>

<ul> <li>C</li> <li>C++</li> <li>Java</li> <li>C#</li>

</ul> </body> </html>

• <ul> viene de unordered list • <li> viene de list item


Listas anidadas.• Es posible insertar una lista dentro de otra.

• Atención -> tener cuidado en la correcta apertura y cerrado de las marcas.

<li>Argentina <ul> <li> <a href="http://www.lanacion.com.ar">La Nación</a> </li> <li> <a href="http://www.clarin.com.ar">Clarín</a> </li> <li> <a href="http://www.pagina12.com.ar">Página 12</a> </li> </ul> </li>


Lista de definiciones (<dl>)• Asocia un término y la definición del mismo.

• El navegador se encarga de hacer el sangrado del contenido del elemento.

<dl> <dt>C++</dt> <dd>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.</dd> </dl>

• <dl> viene de definition list • <dt> viene de definition term • <dd> viene de definition description


Tabla (<table><tr><td>)

• <table> Es la marca de comienzo de la tabla.

• <tr> – Es la marca de comienzo de una fila. – Esta marca debe estar dentro del elemento table.– <tr> viene de table row que significa fila de la tabla.

• <td> – Es la marca de comienzo de una celda. – Esta marca debe estar dentro del elemento tr. – <td> viene de table data que significa dato de la tabla.

Continúa ejemplo ->


Tabla (<table><tr><td>)<html>

<head> </head> <body>

<table border="1"> <tr>

<td>China</td><td>1300 millones</td>

</tr> <tr>

<td>India</td><td>1080 millones</td>

</tr> <tr>

<td>Estados Unidos</td><td>295 millones</td>

</tr> </table>

</body> </html>


Tabla con encabezado (<th>)

• Para indicar que se trata de una celda de encabezado utilizamos el elemento <th> en lugar de <td>.

<tr> <th>Paises</th><th>Cantidad de habitantes</th> </tr>

• <th> viene de table header cell que significa celda de encabezado de tabla.


Tabla con título (<caption>)

• Para disponer un título a una tabla debemos incorporar el elemento caption inmediatamente después que abrimos la marca table.

<table border="1"> <caption> Población de los paises con mayor cantidad de habitantes. </caption><tr> …

• <caption> significa título.


Tabla y combinación de celdas.

Ejercicio de clase


Contenido de la cabecera de la página (<title>)

• permite definir el título que aparecerá en la barra del navegador.

• Siempre debemos buscar un título lo más significativo.

<html> <head>

<title>Título de la página</title> </head>…

Comentarios dentro de una página 

• Los comentarios son muy útiles para el desarrollador de la página.

• Un comentario puede abarcar varias líneas.

• El navegador ignora todos los comentarios.

• Atención -> Los comentarios consumen ancho de banda del servidor.

• La sintaxis para definir un comentario es:


Formulario - <form>

• 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.).

<form action="/registrardatos.php" method="post">Ingrese su nombre:

<input type="text" name="nombre" size="20"><br>

<input type="submit" value="enviar"></form>


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.

<input type="password" name="clave" size="12">

<input type="reset" value="borrar">


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.

<textarea name="comentarios" rows="5" cols="60">

</textarea>


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..

<input type="checkbox" name="java">Java<br><input type="checkbox" name="cmasmas">C++<br><input type="checkbox" name="c">C<br><input type="checkbox" name="csharp">C#<br>

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.


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.

<input type="radio" name="estudios" value="2">Primaria<br><input type="radio" name="estudios" value="3">Secundaria<br><input type="radio" name="estudios" value="4">Universitario<br>


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).

<select name="pais"><option value="1">Argentina</option><option value="2">España</option><option value="3">México</option>

</select>


Formulario - select (cuadro de selección múltiple)

Permitir seleccionar varias opciones al mismo tiempo.

<select name="colores[]" size="4" multiple><option value="1">Rojo</option><option value="2">Verde</option><option value="3">Azul</option>

</select>


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.

<select name="articulo"><optgroup label="Frutas">

<option value="1">Naranjas</option><option value="2">Manzanas</option>

</optgroup>

<optgroup label="Verduras"><option value="7">Lechuga</option><option value="8">Acelga</option>

</optgroup>

</select>


Formulario - button• Control visual que se puede utilizar para sustituir los controles:

<input type="submit" value="Enviar"><input type="reset" value="Borrar">

Por<button type="submit">Texto a mostrar dentro del botón.</button>

• 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.


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.

<input type="button" name="boton7" value=" 7 ">

• Atención -> Recordemos que HTML solo tiene Contenido, si queremos funcionalidad deberemos definir los eventos para dichos botones.


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.

<input type="file" name="archi">

• Tener en cuenta cuando hacemos upload de archivos al servidor es inicializar la propiedad enctype del elemento form.

<form method="post" action="/registrardatos.php" enctype="multipart/form-data">


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.

<input type="hidden" value="10:20" name="hora">

¿Cuál puede ser la utilidad de este campo?


Formulario - agrupamiento de controles.

• Tiene el objetivo de recuadrar y agrupar un conjunto de controles de un formulario <fieldset> y </fieldset>.

• Además para agregar un título a este recuadro debemos agregar otro elemento HTML llamado legend.

<form action="/registrardatos.php" method="post"><fieldset><legend>Datos personales</legend>Apellido y nombre:<input type="text" name="nombre" size="30"><br>Documento de identidad:<input type="text" name="dni" size="8"><br></fieldset><fieldset><legend>Datos Laborales</legend>Nombre de la empresa:<input type="text" name="nombreempresa" size="30"><br>Actividad:<input type="text" name="actividad" size="50"><br></fieldset><input type="submit" value="Enviar">

</form>


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:

<input type="text" value="aqui su nombre" name="nombre” size="20">

• Para inicializar un control de tipo textarea debemos indicar el dato entre el comienzo y el fin de la marca:

<textarea rows="10" cols="40" name="curriculum">Ingrese aqui su curriculum</textarea>

• Para inicializar un control de tipo checkbox debemos disponer la propiedad checked sin asignar valor:

<input type="checkbox" name="java" checked>Opcion 1<br>


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:

<input type="radio" name="estudios" value="1” checked>Opción 1<br>

• Para inicializar un control de tipo select con selección múltiple debemos definir la propiedad selected de varios elementos option:

<select name="colores[]" size="4" multiple="multiple"><option value="1" selected>Rojo</option><option value="2">Verde</option><option value="5" selected>Blanco</option>

</select>


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 32767.

• 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!


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

inhabilitados.

<form action="/registrardatos.php" method="post">Seleccione la sección donde desea ingresar:<br>

<input type="radio" name="seccion" value="1” disabled>Niños<br><input type="radio" name="seccion" value="2">Adolescentes<br><input type="radio" name="seccion" value="3">Mayores<br><input type="submit" value="Enviar"></form>

• 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.


Formulario - text/password y maxlength

• Los 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.


Formulario - text/password/textarea y readonly

• Cuando 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:<input type="text" name="nombre" size="30" value="Interpolacion" readonly>


Formulario - Envío de datos mediante mail.

• Es posible enviar los datos mediante el programa cliente de mail que esté configurado en la computadora.

<form action="mailto:[email protected]" method="post” enctype="text/plain">

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

<form action=mailto:[email protected]?subject=pedido de reparación” method="post" enctype="text/plain">


Formulario - Envío de datos mediante mail.

<h2>Reclamos</h2><form action="mailto:[email protected]" method="post" enctype="text/plain">Ingrese su nombre: <input type="text" name="nombre" size="20"><br>Ingrese su dirección: <input type="text" name="dirección" size="30"><br>Informe del problema:<br><textarea rows="5" cols="40" name="problema"></textarea><br><input type="submit" value="enviar"></form>


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).


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.


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.


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 [email protected]


Tarea 2 (5)

Problema 7:• Confeccionar una tabla que muestre

– En 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.


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.

<frameset cols="20%,80%"><frame src="pagina2.html"><frame src="pagina3.html">

</frameset>

• 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.


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.

<frameset cols="200,*,200">

• Así, la primer y tercer columnas miden 200px

• La segunda columna tomará la dimensión faltante hasta llenar el ancho de la pantalla.


Frames - Actualización de un frame a partir del enlace de otro frame

• Una actividad habitual es disponer hipervínculos en uno de los frame y actualizar el contenido de otro frame.

Ejercicio:Page1.html

<html><head><title>prueba de frames</title></head><frameset cols="20%,80%"><frame src="pagina2.html">

<frame src="pagina3.html" name="ventanadinamica"><noframes><p>El navegador no soporta frames</p></noframes></frameset></html>



Ejercicio (continuación):Page2.html

<html><head><title>prueba de frames</title></head><body><h2>Enlaces.</h2><ul>

<li><a href="page3.html" target="ventanadinamica">Enlace 1</a></li>

<li><a href="page4.html" target="ventanadinamica">Enlace 2</a></li></ul></body></html>

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




<html><head><title>prueba de frames</title></head><body><h1>Página A</h1> <h2>Este es el contenido de página del archivo:page3.html</h2></body></html>




<html><head><title>prueba de frames</title></head><body><h1>Página B</h1> <h2>Este es el contenido de página del archivo:page4.html</h2></body></html>

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


Frames - Anidamiento de frameset

• El lenguaje HTML nos permite definir un frameset en la ubicación de un frame, esto se logra anidando frameset.

• El objetivo es:


Frames - Anidamiento de frameset (2)

<html><head><title>prueba de frames</title></head><frameset cols="200,*">

<frame src="pagina2.html" noresize> <frameset rows="70,*"> <frame src="pagina3.html" noresize> <frame src="pagina4.html" noresize>

</frameset><noframes><p>El navegador no soporta frames</p></noframes></frameset></html>


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.

<iframe src="page2.html" width="400" height="200">No tiene disponible el navegador la capacidad de

iframe</iframe>

• Le indicamos el ancho y alto que debe tomar el iframe, la ubicación continúa el flujo de la página.


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.


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”

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

Documents

Transcript of :: M.C. Rafael A. García Rosas :: HTML M.C. Rafael A. García Rosas. [email protected].