TRABAJO DE HTML El HTML, es el lenguaje con el que se escriben las páginas web. Podemos decir por lo tanto que el HTML es el lenguaje usado por los navegadores para mostrar las páginas webs al usuario, siendo hoy en día la interfase más extendida en la red. Nos permite aglutinar textos, sonidos e imágenes y combinarlos a nuestro gusto y la introducción de referencias a otras páginas por medio de los enlaces hipertexto. Se creó en un principio con objetivos divulgativos. Algunos de los problemas que ha acompañado al HTML es la diversidad de navegadores presentes en el mercado los cuales no son capaces de interpretar un mismo código de una manera unificada. Para programar en HTML necesitamos un editor de textos. Es recomendable usar el “blog de notas” que viene con windows, u otro editor de textos sencillo.
-Podemos poner en práctica este lenguaje en determinados ejercicios observando paso a paso como se hace:
Ejercicio número 1 <html> <head> </title>clase de informática</title> </head> <body> <p><b>Bienvenido,</b></p> <p>Estás en la página<b> clase de informática</b>.</p> <p>En clase de informática aprenderás cosas nuevas.</p> </body> </html> Ahora se guarda este archivo con extensión .html o .htm en el disco duro y qeda así:
Ejercicio nĂşmero 2 Se trata de repetir el Ejercicio nÂş 1 eliminado la etiqueta <title>.
<html> <head> <title>clase de informática</title> </head> <body> <p><b>Bienvenido,</b></p> <p>Estás en la página<b> clase de informática</b>.</p> <p>En clase de informática aprenderás cosas nuevas.</p> </body> </html>
<html> <head> clase de informática </head> <body> <p><b>Bienvenido,</b></p> <p>Estás en la página <b>clase de informática</b>.</p> <p>En clase de informática aprenderás cosas nuevas.</p> </body> </html> Se diferencian en que cuando el tema de lo que se habla se pone en el ejercicio dos se quita en el ejercicio uno.
Ejercicio número 3 Construir una página que tenga, por este orden: -2 Párrafos centrados -3 Párrafos alineados a la derecha -Un salto de línea triple -1 párrafo alineado a la izquierda
<p align="center">clase de informรกtica</p> <p align="center">clase de informรกtica</p> <p align="right">actividades para hacer</p> <p align="right">el coche es rojo</p> <p align="right">el coche es rojo</p> <br> <br> <br> <p align="left">la casa es bonita</p>
TEXTO: -Testo alineado a la izquierda: <p align="left">Texto alineado a la izquierda</p> -Texto alineado al centro: <p align="center">Texto alineado al centro</p> -Texto alineado a la derecha: <p align="right">Texto alineado a la derecha</p>
SALTO: <div align="right"> <p>Parrafo1</p> <p>Parrafo2</p> <p>Parrafo3</p> </div>
Ejercicio número 4 Construir una página web que contenga todos los encabezados posibles con distintas alineaciones.
<html><body> <h1>la casa es bonita</h1> <h2>la casa está encantada</h2> <h3>la casa es vieja</h3> <h4>la casa nueva</h4> <h5>la casa es roja</h5> <h6>la casa es grande</h6> </html></body>
Ejercicio número 5 Construir una página web que contenga todos los elementos vistos.
<html><body> <sup>13</sup>CC<sub>3</sub>H<sub>4</sub> <u><b>esto está subrayado y en negrita</u></b> </html></body>
Ejercicio número 6 Realizar una página que tenga las siguientes características: • Un titular con encabezado de nivel 1 centrado y color verde oliva. • Un segundo titular con encabezado de nivel 2 centrado, también de color verde oliva. • Todo el texto de la página deberá presentarse con una fuente distinta de la fuente por defecto. Por ejemplo "Comic Sans MS" o “Tahoma” y en caso de que ésta no esté en el sistema que se coloque la fuente "Arial".
<font face="arial"> la casa es grande</font><br> <font sice="3"> el perro negro</font><br> <font color="green"> el caramelo del niño</font><br>
Ejercicio número 7 Añadir a la página del Ejercicio Nº1 un fondo de la carpeta de fondos.
<html> <head>
</title>clase de informática</title> </head> <body background="si.jpg"></body> <p><b>Bienvenido,</b></p> <p>Estás en la página<b> clase de informática</b>.</p> <p>En clase de informática aprenderás cosas nuevas.</p> </body> </html>
Ejercicio número 8 Añadir a la página del Ejercicio Nº1 un color de fondo.
<html> <head> </title>clase de informática</title> </head> <body bgcolor="pink"></body> <p><b>Bienvenido,</b></p> <p>Estás en la página<b> clase de informática</b>.</p> <p>En clase de informática aprenderás cosas nuevas.</p> </body> </html>
Ejercicio número 9 Modificar los márgenes de cualquier ejercicio anterior con los el fin de probar los distintos valores de este atributo.
<htmal> <head> </title>clase de informática</title> </head> <body> <font color="red"> <p><b>Bienvenido,</b></p> <p>Estás en la página<b> clase de informática</b>.</p> <p>En clase de informática aprenderás cosas nuevas.</p> </body> </html>
Ejercicio número 11
Construir una página web que ocupe un espacio mayor que una pantalla y colocar un enlace interno para pasar del principio al final de la página y otro que realice la operación inversa.
<body> <h2> devota & lomba <h2/><a href="#abajo">diseño español de vanguardia</a> <body>Mencionar Devota & Lomba es evocar el diseño creativo y la innovación, y lo más importante, con sello español. Desde que comenzaran su andadura por los inciertos derroteros de la moda allá en 1986, Luis Devota y Modesto Lomba se han erigido como una férrea promesa del diseño hispano. Merecedores de prestigiosos galardones como el Ama al diseño joven en 1988, el Cristóbal Balenciaga para creadores noveles en 1989 o el Pasarela Madrid a la mejor colección de mujer en 1991, esta firma ha seguido cosechando éxitos e insuflando aires renovados al panorama ‘fashion’ actual.Hoy al frente de la firma se encuentra Modesto Lomba —Presidente de la Asociación de Creadores de Moda de España—, y su buen hacer le ha
llevado a ampliar negocio y abarcar otras áreas tan prósperas como el prêtà-porter. Aparte de sus creaciones para pasarela, ha realizado el vestuario para obras de cine y teatro, colaborado con otras firmas de prestigio, creado su propia línea de novias y lo más novedoso, un espacio de arquitectura e interiorismo… Una ‘dilatada’ trayectoria profesional a la que ha exprimido el jugo al máximo. Centrándonos en el prêt-à-porter, tanto masculino como femenino, el rasgo característico de la firma es el juego de volúmenes, la mezcla de texturas y otros detalles arquitectónicos que confiere a sus diseños. Con todo, las creaciones de este prolífico diseñador son más que aceptadas.Una de las ramas del negocio en floreciente expansión es la línea nupcial; para la temporada de 2008 Lomba apuesta por lo ecológico con la inclusión de tejidos de composición natural, para novias, la mezcla de tejidos es la máxima: tafetas, organzas, georgette, rejillas de lino o encajes que se fusionan originando una miscelánea de texturas originales y novedosas. Para novios: chaquetas cortas y estrechas, pantalones pitillo, pajaritas importantes y predominancia de tonos blancos, grises y —cómo no— el sempiterno negro. Para novias y novios poco convencionales y muy originales. Otras vertientes del negocio: línea textil hogar, joyería, accesorios y complementos, óptica, papelería, relojes, perfumes… Y suma y sigue.</body> Devota & Lomba está presente en El Corte Inglés de Pº de la Castellana de Madrid (primera planta) hasta el día 14 de Marzo con una VENTA ESPECIAL del “vestido estrella” de la última Colección, pret à porter de Verano 2009 y como complementos joyas, relojes, bolsos y pañuelos.<a href="abajo"> ir a diseño español en la vanguardia </a> <br></br>
Ejercicio número 12 Construir una página web que en la que aparezcan enlaces a otras páginas web.
<a href="http://www.msn.com"> si quieres ir al buscador msn pincha aquí </a>
Carpeta “RENAULT” y su respectivo fichero index
Dentro de esa carpeta señalada que es la de “Renault” hay cuatro carpetas:
Dentro de cada una de las carpetas hay otras dos carpetas una con fotos de las distintas marcas de coches y la otra con un coche elegido y una serie de tablas junto a él de sus precios, colores, tipos, etc… Ejemplo dentro de la carpeta laguna hay una de fotos y la otra de un coche laguna con sus precios, etc…
Abrimos la carpeta de fotos del laguna:
Ahora vemos el enlace index que lo hemos guardado dentro de la carpeta Renault ya que forma parte del trabajo: