Diseño de Sitios Web (T.U.W., T.U.R.)
Practico N° 2: HTML
Ejercicio N° 1: Completar el siguiente código para poder visualizarlo en el navegador, respetando el formato de HTML5.
<HTML>
<TITLE> AGREGAR NOMBRE </HEAD>
<BODY>
<P>El Hipertexto es <B>una forma de organizar la informaci6n.
Ciertos puntos del texto están unidos con otros mediante relaciones (llamados <I>enlaces o links).
En lugar de leer un texto en forma continua, como se hace normalmente (por ejemplo en un libro).<BR>
El hipertexto da la posibilidad de cambiar el recorrido de la lectura al saltar de un punto a otro del texto, de un tema a otro.
</P> </HTML>
De manera que el texto se vea con el siguiente formato
El Hipertexto es una forma de organizar la información.
Ciertos puntos del texto están unidos con otros mediante relaciones (llamados enlaces links).
En lugar de leer un texto en forma continua, como se hace normalmente (por ejemplo en un libro). El hipertexto da la posibilidad de cambiar el recorrido de la lectura al saltar de un punto a otro del texto, de un tema a otro.
Ejercicio N° 2: Realizar una página web que contenga las siguientes líneas y cuyo título sea "Cabeceras". Donde cada línea debe ser del tipo de cabecera y con la alineaci6n indicada en ella.
Cabecera Hl. La más grande. - centrada Cabecera H2. - Derecha
Cabecera H3. - Izquierda Cabecera H4. - Izquierda Cabecera H5. - Derecha
Ejercic secund secund Ejercic De man a. b. c. pág Ejercic muestre PAINT “URL” Dichas corresp . Funda Par enc pue SO con par Los Li Al ind pág cio N° 3: G darias. En l darias y en es cio N° 4: De
nera tal que: En el direct Dentro del imagen del En el direc gina principa cio N° 5: Us e el texto de T u otro edito ” y deben ins s imágenes pondiente. amentos del ra que el na contrarse en edan ver los O, fue necesa nsiste en un ra todos los u inks (enlace navegar po dicada en letr gina. Generar un a página p stas uno haci efinir un sitio torio raíz se e directorio S directorio Im ctorio Pagin al y a una pá so del BLOC e abajo man or, las cuales sertarse al co deben conte Lenguaje H avegador nos un formato s documento ario crear u n grupo de c usuarios. s) or la web, v ra azul y sub sitio web principal deb ia la pagina p o web con la encuentre la Subpágina mágenes y un na2 exista un ágina en el di CKQUOTE nteniendo el s deben cont omienzo de c ener un enl HTML s muestre en o estandariz os de una fo un lenguaje comandos co veremos que brayada. Est que conste be aparecer principal siguiente Je página prin exista una p na referencia na página c irectorio Pag y MARCAD formato ind tener cada u cada uno de ace (marcad n pantalla un zado. Para q orma parecid e común a onocidos co e en genera to nos indica e de una p r un vincul erarquía de D
ncipal con ref página que a a la página con referenci gina3. DORES. Cr dicado. Adem una los sigui
los siguient dor) de man
< na página, e que esto pud
da aunque t todos. Este omo "Tags" <IMAG al todas las a que en ese página princ lo a cada u Directorios ferencias al tenga como a principal. ias a SubPa
ear una pági más generar ientes textos es párrafos. nera que la <IMAGEN L el texto, los diera ser as tengan difer e lenguaje o "etiquetas GEN URL> páginas tie e lugar hay u cipal y tres una de las resto. o fondo una agina2 y a l ina web en r TRES imá s: “HTML” “ figura lleve LINKS> gráficos etc sí y para qu rentes plataf es el HTM s" y que es enen alguna un vínculo a páginas paginas a la la que se ágenes en “LINKS” e al texto c. deben ue todos formas y ML, que estándar parte a otra
Es una particularidad de la web, su capacidad mediante estos vínculos de "saltar" de una parte a otra ya sea de la misma página, de otra diferente del mismo sitio o bien directamente a otro sitio. Todos los links tienen dos partes:
Una es la referencia al lugar a donde nos llevan
La otra es el direccionamiento a esa referencia que se activa mediante el clic del rat6n.
URL <IMAGEN HTML>
URL significa Uniform Resource Locator. Se trata de una descripci6n completa de un objeto mediante el protocolo necesario para tomarlo. Incluye la direcci6n donde se encuentra el servidor, el lugar dentro del servidor donde se encuentra el objeto, y el nombre del objeto en sí.
Ejercicio N° 6: Crear una página web que contenga la siguiente figura (Ancho = Alto = 172).
Definir un mapa con áreas para las zonas grises de la figura. Asociar a las áreas un vínculo A los siguientes sitios:
http://www.unsl.edu.ar http://sel.unsl.edu.ar http://www.w3c.org http://www.htmlcompendium.org
http://www.yahoo.com
Ejercicio N° 7: Crear una página que muestre una tabla como la siguiente (*) Docentes
Profesor - Auxiliar (*) Materia
(*) Aulas
(*) Teoria (*) Practico
(**) Nbre. del Profesor
(+)Nbre. de la Materia 1 (+)Nro. de Aula (+)Nro./s de Aula/s (***)Nbre. Del Auxiliar
(**) Nbre. del Profesor
(++)Nbre. de la Materia 2 (++)Nro. de Aula (++)Nro./s de Aula/s (***)Nbre. Del Auxiliar
Con los Siguientes formatos
Borde de la Tabla = 3 Borde de la Tabla = 0
Ejercicio 8. Realizar un iFrames el cual debe contener la ubicación de la UNSL, obtener la misma de googlemaps.
Ejercicio N° 9: Crear una página web que muestre las siguientes listas: Tipos de Publicaciones: • Diarios • Revistas o Entretenimiento o Publicaci6n Científica • Libros o Novelas o Poesía o Biográficos • Papers Tipos de Publicaciones: 1. Diarios a. Revistas b. Entretenimiento c. Publicaci6n Científica 2. Libros i. Novelas ii. Poesía 3. Biográficos 4. Papers Glosario HTML
Hypertext Markup Language; formato de los documentos web. HTTP
Hypertext Transfer Protocol; protocolo que define c6mo las páginas web son requeridas y transferidas entre los servidores y los navegadores.
Ejercicio 10. Realizar una página web la cual contiene un formulario de inscripción a la UNSL el cual solicita los siguientes datos.
Nombre (Campo de texto 50 caracteres)
Apellido (Campo de texto 30 caracteres)
Edad (Campo Numérico)
Tipo de documento (Lista desplegable -DNI-LC-PASAPORTE)
Numero de Documento (Campo Numérico)
Fecha de Nacimiento (Campo Date)
Ejercicio 11. Realizar una página la cual contiene un formulario que solicita datos generales de una persona como por ejemplo.
Nombre
apellido
Correo Electrónico
Edad
Hobbies (Música, Arte, Deportes)
Color Preferido (Paleta de colores)
Dicha pagina debe contener una imagen en la parte superior del formulario, en el <aside> debe reproducir un video y en el área de navegación un campo de búsqueda.
Ejercicio 12. Una empresa de contrataciones encargado de dar trabajo a personal ocasional necesita que los interesados en conseguir trabajo ingresen su curriculum para poder armar la base de datos y poder mantenerla actualizada. Los datos que los interesados deben ingresar son: Nombre y apellido; disponibilidad horaria; sueldo pretendido; lugar/s donde prefiere ser ubicado; estado civil; cantidad de hijos: menores de 12 años, entre 12 y
21 años y mayores de 21 años; pasaporte y documento de identidad.
