MF0950_2/UF1302 Mapa de imágenes.

Hemos creado un mapa de imágenes.

<p>
  <img src="C:\Users\ETC12\Desktop\menu.jpg" usemap="#mapa de imágenes" alt="pincha">:Hay que poner la ubicación del menú que hemos creado y luego el nombre que tu quieras darle.

<map name="mapa de imágenes"> : El nombre que hemos querido darle.
 
<area shape="circle" coords="83,75,75" target=blog4 href="http://ornelaifcd0110castrourdiales.blogspot.com.es/"alt="bolso y manoletinas prueba 1"> : Le decimos que es un círculo, le damos las coordenadas después le añadimos el "target" para vincularlo al iframe y luego le añadimos el enlace donde le queremos enviar y en "alt" le damos el nombre del círculo.

    <area shape="circle" coords="286,73,73" target=blog4 href="http://itziarifcd0110castrourdiales.blogspot.com.es/" alt="bolso y manoletinas prueba 2"> : El mismo procedimiento.
 
 <area shape="circle" coords="460,73,73" target=blog4 href="http://omarifcdo0110castrourdiales.blogspot.com.es/"" alt="bolso y manoletinas prueba 3"> : El mismo procedimiento.

<area shape="circle" coords="660,73,73" target=blog4 href="http://ymsifcd0110castrourdiales.blogspot.com.es/" alt="bolso y manoletinas prueba 4"> : El mismo procedimiento.

 </map>
</p>

MF0950_2/UF1302 Atributos y propiedades de ubicación de las imágenes.

ATRIBUTOS DE IMÁGENES.

src="imagen.gif". : Es obligatorio e indica el nombre del archivo imagen (entre comillas) o la URL (ruta o dirección en la que esta la imagen que se va incluir en el documento).

align="left / right / top / middle / bottom". : Permite controlar la alineación de una imagen con respecto a una línea de texto adyacente o a otras imágenes en esa línea.

alt="Texto explicativo". Mensaje que sale al pasar el ratón sobre la imágen. Este texto se mostrará en caso de que la imágen no se cargara. 

width="n" n en pixels. Atributo opcional siendo recomendable usarlo para ayudar al navegador a representar la imagen, define el ancho de la imagen que vamos a representar.

height="n" n en pixels. Este es opcional y recomendable ponerlo, define la altura de la imagen. 

border= "n", n en pixels. Con este designamos el ancho del borde que rodea la imagen. 

Atributo lowsrc: Podemos indicar un archivo de la imagen de baja resolución. Cuando el navegador detecta que la imagen tiene este atributo primero descarga y muestra la imagen de baja resolución (que ocupa muy poco y que se transfiere muy rápido).Luego descarga y muestra la imagen de resolución adecuada (señalada con el atributo src, que se supone que ocupará más y será más lenta de transferir).




Usemap: referencia de hash-nombre 

Especifica una referencia a un hash-nombre a un elemento de mapa al que desea asociar el objeto.

Ismap: boolean 
Especifica que el elemento img proporciona acceso a un mapa de imagen del lado del servidor.

TIPOS DE ARCHIVOS DE IMAGENES:

TIFF/TIF: Es el formato de archivo más común para imprimir y guardar imágenes comprimidas sin perder calidad. 

EPS (Encapsulated PostScript, PostScrip encapsulado): Es el formato nativo de photoshop. Úselo para todos sus archivos de trabajo; guardará todas las capas, canales, notas u perfiles de color. También es posible imprimir este formato en Adobe InDesign. (Asegúrese de convertir al modo CMYK para impresiones comerciales).

PSB (Photoshop Large Format, formato extendido de Photoshop): Use este formato para guardar una imagen mayor a 300 000 píxeles y para trabajar con imágenes mayores a 2 GB.

GIF (Graphical Interchange Format, formato de intercambio gráfico): Es el mejor formato para imágenes con patrones repetitivos o tipo caricuratura. También soporta transparencia y animación.

JPG (Joint Photographic Experts Group, grupo conjunto de expertos en fotografía): Es el formato más popular para imágenes. Reduce la calidad de la imagen (a menudo de manera indetectable para el ojo humano). 

PNG (Potable Network Graphics, imágenes transportables en red): Formato sin perdidas para Web que soporta hasta 16 millones de colores y 256 niveles de transparencia. 

MF0950_2/UF1302 Marcos y Capas.

LOS MARCOS:

    -ETIQUETA FRAME

Es divir la página en marcos en el número de marcos que quieras.Este además tiene distintas propiedas: (Name, Align, Src, Height, Width, Frameborder, Scrolling, Marginwidth, Marginheight, Allowtransparendy.)

   -ETIQUETA FRAMESET

Es el conjunto de "Frame".

   -ETIQUETAS IFRAME

Crear un marco dentro de una propia página.


CAPAS:

Las capas van conjuntamente con los estilos css,unamanera de aplicar estilos concretos sin necesidad de añadir código HTML a cada frase o zona de nuestro sitio web al que queramos darle un estilo diferente. Hay dos tipos, la absoluta y la relativa. La absoluta la aplicas a una zona de la pagina concreta y todo lo que pase por ahi adoptara ese estilo; la relativa la aplicas a la etiqueta que tu quieras una por una.

MF0950_2/UF1302 Palabras clave.

¿QUE ES UN MAVEGADOR?

Un Explorador Web o Navegador es un programa que permite ver páginas web en la red y acceder a otros recursos, documentos almacenados y guardar información.

¿QUE ES UN BOT?

Un bot es un programa informático, imitando el comportamiento de un humano. En sitios wiki, comowikipedia, puede realizar funciones rutinarias de edición. En otros sitios, como youtube, puede responder a cuestiones sobre el propio contenido del sitio (bots conversacionales).



NAVEGADOR MODO TEXTO LYNX.

Lynx es un navegador en modo texto para la World Wide Web. Tiene soporte para varias características HTML, marcadores y cockies, pudiendo también navegar por archivos locales y usar protocolos FTP. 
Para navegar podemos usar las teclas de dirección o activando una opción podemos enumerar los enlaces.



DIFERENCIAS VISUALES ENTRE LOS NAVEGADORES.

<title>Tiendas de inform&aacute;tica y electr&oacute;nica Media Markt - Yo no soy tonto</title>
Esto quiere decir que media markt tiene puesto que a la hora de que alguien ponga en el buscador: "tiendas de informática y electrónica yo no soy tonto" salga su página de las primeras.

Otras opciones seria poner tecnologia ofertas ordenadores moviles
<title>tecnologia oferrtas ordenadores moviles</title>

MF0950_2/UF1302 Listas,Anclajes, Rel, color, estilo y tamaño de letra.

GOOGLE NO USA EL META TAG KEY WORDS.

Desde el 2009 la versión oficial de Google sobre el meta tag keywords efecto en el posicionaes que ni lo mira, no lo utiliza y no tiene ningun miento. Se ha usado tanto para hacer spam que han decidido ignorarla.

SEO: 
Posicionamiento en motores de búsqueda.

LISTAS:

Las listas es un listado de frases por llarmarlo de alguna manera, que pueden ser desordenadas y ordenadas. 

• Las desordenadas al principio del texto hay que poner <ul> y al final </ul>, para abrir y cerrar la etiqueta y aparecen con un círculo al principio.
• Las ordenadas al principio del texto hay que poner  <ol> y al final  </ol>, para abrir y cerrar la etiqueta, y aparecen por enumeración o letras.

    -DESORDENADAS: 

<ul>

<li><a href="C:\Users\ETC12\Desktop\mono\menu 2.html" target="_blank" title="pincha">menú 2</a></li> : 

<li><a href="C:\Users\ETC12\Desktop\mono\menu 3.html" target="_blank" title="pincha">menú 3</a></li> : 

<li><a href="C:\Users\ETC12\Desktop\mono\menu 4.html" target="_blank" title="pincha">menú 4</a></li>

</ul>

Saldrán con un punto delante.
Se utiliza el <ul> y cerrar </u>. Y entre las etiquetas colocamos <li></li>.

   -ORDENADAS: 

<ol>

<li><a href="C:\Users\ETC12\Desktop\mono\menu 2.html" target="_blank" title="pincha">menú 2</a></li>

<br />

<li><a href="C:\Users\ETC12\Desktop\mono\menu 3.html" target="_blank" title="pincha">menú 3</a></li>

<br />

<li><a href="C:\Users\ETC12\Desktop\mono\menu 4.html" target="_blank" title="pincha">menú 4</a></li>

</ol>

El mismo procedimiento pero en vez de <ul></ul>
utilizaremos <ol></ol>.

REL:

Sirve para decirle al ordenador que vaya cargando la siguiente página.

<li><a href="C:\Users\ETC12\Desktop\mono\menu 2.html" target="_blank" title="pincha"rel="prefetch">menú 2</a></li>
<br />
<li><a href="C:\Users\ETC12\Desktop\mono\menu 3.html" target="_blank" title="pincha"rel="prefetch">menú 3</a></li>
<br />
<li><a href="C:\Users\ETC12\Desktop\mono\menu 4.html" target="_blank" title="pincha"rel="prefetch">menú 4</a></li>



ANCLAJE: 

Debajo de body se escribe <a name="arriba"></a> y abajo del todo <a href="#arriba" title="Ir Arriba">Ir arriba</a> : Sirve para que al pincharlo nos lleve direcamente arriba.


COLOR, ESTILO Y TAMAÑO DE LETRA:

<font color="purple" size="20" face="comic sans MS"><h2>BIENVENIDOS</h2></font> : En font color hay que escribir el color que quieras tu, en size pones la enumeración del tamaño de letra que necesites y en face el tipo de letra que deseemos.



PALABRAS CLAVE DE UNA EMPRESA: MEDIAMARKT

title>Tiendas de inform&aacute;tica y electr&oacute;nica Media Markt - Yo no soy tonto</title> : Si tu escribes en el buscador "Tiendas de inform&aacute;tica y electr&oacute;nica Media Markt - Yo no soy tonto" te sale directamente la página de Mediamarkt.

Un ejemplo de las palabras clave que pondría yo:

<title>tecnología,informática,ofertas ordenadores,móviles,...</title>

MF0950_2/UF1302 Enlazar fotos e imágenes con otras páginas.

Todo lo que hemos aprendido días anteriores le añadimos esto: Hemos conseguido pinchar en una foto y que nos lleve a otra página, el mismo procedimiento con las tres páginas. En resumen, hemos enlazado las cuatro páginas entre sí mediante imágenes.

Después lo hemos hecho a través de texto.


<a href= : Quiere decir que es un enlace.

<a href="C:\Users\ETC12\Desktop\mono\menu 2.html"><img src="C:\Users\ETC12\Desktop\mono\nuria.jpg" width="330px" height="450px" alt="error"> : "C:\Users\ETC12\Desktop\mono\menu 2.html" Significa donde lo queremos mandar, el destinatario.Y "C:\Users\ETC12\Desktop\mono\nuria.jpg"es la imagen que queremos pinchar para mandarnos a otro enlace,primero ponemos la ubicación de la foto, luego el nombre de la foto y el formato de ella, en este caso "jpg".

<a href="C:\Users\ETC12\Desktop\mono\menu 3.html"><img src="C:\Users\ETC12\Desktop\mono\nuria y galder.jpg" width="659px" height="450px" alt="error"> : El mismo procedimiento.

<a href="C:\Users\ETC12\Desktop\mono\menu 4.html"><img src="C:\Users\ETC12\Desktop\mono\nuria mallorca.jpg" width="330px" height="450px" alt="error"> : El mismo procedimiento.

<a href="C:\Users\ETC12\Desktop\mono\menu 1.html" target="_blank" title="pincha">menú 1</a> : Aquí hacemos lo mismo a través de texto."C:\Users\ETC12\Desktop\mono\menu 1.html" es la dirección del menú al que queremos que nos lleve al pinchar en el texto."title="pincha">menú 1" El titulo es lo que queremos que salga al poner el ratón encima y entre comillas el nombre del título.

<a href="C:\Users\ETC12\Desktop\mono\menu 3.html" target="_blank" title="pincha">menú 3</a> : El mismo procedimiento.

<a href="C:\Users\ETC12\Desktop\mono\menu 4.html" target="_blank" title="pincha">menú 4</a> : El mismo procedimiento.

MF0950_2/UF1302 Texto en la página,imágenes y enlaces.

<!DOCTYPE html>

<html lang="es">

 <head>

   <meta charset="utf-8" />

      <title>ITZIAR</title>

 

    <!-- Insertar aquí mas Metatags-->  Para apuntar notas.

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <meta name="Description" content="itziar palacio carasa">

 </head>

 <body bgcolor="#FD01A9">

  

    <P> hola esta es mi pagina web </P> Para escribitr un texto.

  

    <P><B>hola<P><B> Para escribir el texto en negrita.

  

    <P><B><U>hola me llamo itziar</U></B></P> Para ponerlo subrayado.

  

    <h1>probandoooooo</h1> Tamaño de la letra.

    <p>funciona?</p>

    <h2>buenassss</h2> Tamaño de la letra.

   

    <h3>adiossss</h3> Tamaño de la letra.

   

    <img src="D:\verano.gif" width="222px" height="222px" alt="error"> : Pinchamos en la       imagen y le damos a propiedades y vemos la ubicación. \verano: es el titulo de la foto. .gif" es el formato de la foto. width y heigtt son los megapixels de la foto y alt="error"> la palabra que sale si por algo no se carga la foto.

    <P></P> 

    <img src="D:\yeah.jpg" width="111px" height="222px" alt="fallo">

    <P></P>

    <a href="http://www.youtube.com" target="_blank" title="titiriririri">quiero     musica</a> youtube la direccion web a donde quiero ir, title es lo que sale al poner el ratón encima del enlace y quiero música es el titulo del enlace.

  </body>
</html>