<head>
<meta name="Description" content="UF1303.2">
<meta charset="utf-8" />
<title>SURF</title>
<style type="text/css">
.vjs-default-skin .vjs-control-bar { font-size: 200% }
</style>
</head>
</br>
<body>
<audio autoplay id="bgsound">
<source src="C:\Users\ETC8\Desktop\ugjyh gfv/Green Day American Idiot.mp3" type="audio/mp3">
</audio>
<link href="http://www.todosurf.com/videos/?id=1587" rel="SURF">
<center> <img src="C:\Users\ETC8\Pictures/surfing.JPG" border="none"> </center>
<center>
<video id="MY_VIDEO_1" class="video-js vjs-default-skin" controls autoplay preload="auto" width="640" height="264" poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
<source src="C:\Users\ETC8\Desktop\Surf.mp4" type='video/mp4'>
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
</center>
<font face="Comic Sans MS" color="BLUE" size=11 >
<center>
<marquee bgcolor="#" width="50%" scrolldelay="100" scrollamount="5" direction="left" loop="infinite" behavior="alternate" >Train Anytime Anyplace
</marquee>
</center>
</font>
</br>
<center>
<img src="C:\Users\ETC8\Pictures/original.JPG" usemap="#mapa" alt="Imagen" >
</center>
<map name="mapa">
<area shape="circle" coords="401,94,60" href="http://www.todosurf.com/" target="YASMIN" alt= "">
<area shape="rect" coords="164,273,263,331" href="http://surferos.info/" target="YASMIN" alt="">
<area shape="poly" coords="90,57,117,66,117,95,90,103,90,3,62,92,63,91" href="mailto:loquesea@todo.es" target="YASMIN" alt="">
</map>
</br>
</body>
</html>
lunes, 30 de junio de 2014
martes, 24 de junio de 2014
ESTRUCTURA DE UNA PAGINA WEB III MF0950_2/MF0950_2
MF0950_2: Construcción de páginas web.
● UF1302: Creación de páginas web con el lenguaje de marcas.
Enlaces
Un
enlace, parecido o link es un lugar en el que, mediante un click,
somos dirigidos a otra parte. Puede ser un texto (normalmente
subrayado) o una imagen (sobre la que podemos hacer click para
ir
a otro lugar de la web). Lo más habitual es que una página tenga
enlaces a lugares de la misma (internos) o a otras páginas
(externos). Ejemplo:
ir
a otro lugar de la web). Lo más habitual es que una página tenga
enlaces a lugares de la misma (internos) o a otras páginas
(externos). Ejemplo:
<a
href="http://www.comocreartuweb.com" target="_blank"
title="Crear páginas web">Crear Paginas Web</a>
- Etiqueta de enlaces
En
el caso de link, hipervínculos etc la etiqueta que se usa sería
ésta:
<a
.....propiedades....> </a>
En este caso,
la etiqueta sí que tendría su parte frecuente de cierre, la cual es
importante no olvidar. No obstante, esta etiqueta no es nada sin sus
propiedades o especificaciones.
caso,
la etiqueta sí que tendría su parte frecuente de cierre, la cual es
importante no olvidar. No obstante, esta etiqueta no es nada sin sus
propiedades o especificaciones.- Ruta de enlaces
La
propiedad que se usa para indicar
al navegador el enlace al cual queremos ir, es href y
tras ella y entre comillas dobles es donde colocamos la ruta y el
nombre del archivo de la página de destino, de este modo:
indicar
al navegador el enlace al cual queremos ir, es href y
tras ella y entre comillas dobles es donde colocamos la ruta y el
nombre del archivo de la página de destino, de este modo:
<a href="ruta-del-enlace/nombre-del-archivo-destino.extension">Texto
del enlace</a>
Se
pueden enlazar tanto otras páginas web como archivos
de música, imágenes etc. En estos casos no se muestra la imagen o
música enlazada, sino que al pulsar sobre el enlace se ofrecerá la
descarga al visitante.
archivos
de música, imágenes etc. En estos casos no se muestra la imagen o
música enlazada, sino que al pulsar sobre el enlace se ofrecerá la
descarga al visitante. El target
El
target es aquello que se encarga de colocar en una pestaña nueva o
en la misma la página de destino.
Target=
_op" se usa esta opción cuando queremos que el archivo
enlazado se muestre en pantalla completa de la ventana eliminando los
frames y los marcos si los hay.
Target="_parent" con
esta, la página se muestra en marco anterior al marco o frame en el
que está el enlace
Target="_self" con
esto, la página se mostrará en la misma ventana del
navegador
Target="_blank"
con esta opción, se abrirá en una nueva ventana.
Textos alternativos
Funciona
igual que con los textos alternativos de las imágenes, en este caso
es
title="texto
alternativo"
Anclajes
Esto
sirve para cuando queremos enviar a las visitas a una parte concreta
de la página. Usando los anclajes puedes hacer que cuando las
visitas pulsen sobre este enlace, la ventana del navegador corra
hacia esta parte concreta de la misma página. Para llevar a la parte
superior sería:
<a
name="arriba"></a>
Si
queremos a la inferior:
<a
name="abajo"></a>
Usando
la lógica, si queremos enviar al visitante a la parte superior, el
enlace deberá estar en la inferior
<a
href="#arriba" title="Ir Arriba">Ir
arriba</a>
Y
vicebersa
<a
href="#abajo" title="Ir Abajo">Ir abajo</a>
En ese caso colocarías al principio (o al final) ese menú, de este modo por ejemplo:
<a
href="#titulouno" title="Ir al título uno">Ir
al título uno</a>
<a href="#titulodos" title="Ir al título dos">Ir al título dos</a>
<a href="#titulotres" title="Ir al título tres">Ir al título tres</a>
<a href="#titulodos" title="Ir al título dos">Ir al título dos</a>
<a href="#titulotres" title="Ir al título tres">Ir al título tres</a>
Y
ahora solo te
faltaría colocar esas 3 anclas justo al lado de esos títulos,
líneas de código como ásta:
te
faltaría colocar esas 3 anclas justo al lado de esos títulos,
líneas de código como ásta:
<h1>Título
Uno</h1><a name="titulouno"></a>
<p>Este es
el texto correspondiente al título uno, aunque debería ser más
largo para que se note el efecto.</p>
<h1>Título Dos</h1><a name="titulodos"></a>
<p>Este es el texto correspondiente al título dos, aunque debería ser más largo para que
se note el efecto.</p>
<h1>Título Tres</h1><a name="titulotres"></a>
<p>Este es el texto correspondiente al título tres, aunque debería ser más largo para que se note el efecto.</p>
<p>Este
es
el texto correspondiente al título uno, aunque debería ser más
largo para que se note el efecto.</p><h1>Título Dos</h1><a name="titulodos"></a>
<p>Este es el texto correspondiente al título dos, aunque debería ser más largo para
que
se note el efecto.</p><h1>Título Tres</h1><a name="titulotres"></a>
<p>Este es el texto correspondiente al título tres, aunque debería ser más largo para que se note el efecto.</p>
Suele
ser muy vistoso poner imágenes a modo de botones para esto,
como por ejemplo flechas, para ello, el código se modificaría
así:
<a href="#arriba" title="Ir Arriba">Ir Arriba</a>
En la última parte en
la que pone ir arriba, lo sustituiríamos por la imagen pertinente y
su ubicación o ruta, quedando así:
<a href="#arriba" title="Ir Arriba"><img src="C:\Users\ETC5\Desktop\melani/203293_top
(1).gif"/></a>
esto,
como por ejemplo flechas, para ello, el código se modificaría
así:<a href="#arriba" title="Ir Arriba">Ir Arriba</a>
En la última parte
en
la que pone ir arriba, lo sustituiríamos por la imagen pertinente y
su ubicación o ruta, quedando así:<a href="#arriba" title="Ir Arriba"><img src="C:\Users\ETC5\Desktop
\melani/203293_top
(1).gif"/></a>Propiedad rel
Sirve
para ayudar a los navegadores a conocer qué tipo de enlaces estamos
incluyendo realmente.
¿dónde
se coloca?
Dentro
de una etiqueta de apertura del enlace o vínculo. Se pueden colocar
varias, una o ninguna. Veamos un ejemplo de dos
<a
href="tema/pagina.html" title="bla bla bla bla"
rel="next" rel="prefetch">Anchor Text</a>
Propiedad
rel="archives" del html 5
Esto
indica que la página a la que se está dirigiendo el navegador está
archivada, que ha dejado de tratar un tema de actualidad, o que ha
podido quedar obsoleto. No se ha eliminado la página por contener
información interesante, pero se avisa que se desea mantener en
estado de archivo, como por ejemplo noticias pasadas, etc.
Propiedad
rel="author"
Se
utiliza para especificar el autor del contenido, como por ejemplo en
blogs etc.
Propiedad
rel="prev", rel="start" y rel="next"
Especifica
al navegador cuál es la página inicial de una sección, la
siguiente y la anterior respecto de la página donde se encuentra el
visitante. Muy útil para colocar las flechas de adelante y atrás.
Propiedad
rel="prefetch"
Esto
indica al navegador que vaya leyendo y memorizando una página
distinta, la que presumimos que será la siguiente que va a leer el
visitante. De este modo, cuando así sea y el visitante pulse ese
enlace, el navegador la tendrá en su caché preparada para mostrarla
en cuanto el enlace sea pulsado, pues ha estado cargando la
información mientras el lector permanece leyendo la página
anterior
Otros
valores para el rel
nofollow:
indica que el destino no tiene nada que ver con la temática de la
web
sidebar:
que no está aún definido
Search:
para páginas que muestran resultados de búsquedas
noreferer:
para que el navegador haga caso omiso de las posibles variables de
referencia añadidas a la url
Advertencia
No
todos los navegadores saben interpretar aún todos estos valores.
Algunos no son reconocidos por ningún navegador todavía, aún así,
no dan error al no ser reconocidos
Imagen clicable
Para
hacer una imagen que al clicar en ella nos lleve a otra página,
habrá que insertar esta etiqueta
<a
href="www.sitio.com"><img src="imagen.gif"
alt="título de enlace" /></a>
En
la primera parte, colocaremos la dirección (o archivo de ser el
caso) deseada, la siguiente, después de scr, será la ruta y nombre
de la imagen con su extensión, por último, el título o nombre que
aparecerá cuando dejemos el cursor sobre ésta.
lunes, 23 de junio de 2014
meta tag keywords
META TAG KEYWORDS
Qué es un meta tag?
Un meta tag es una etiqueta que se encuentra en el código fuente de una página web y describe el contenido de la misma. Hace años el meta tag keyword servía para indicarle al buscador cuales eran las palabras clave de una página. Tiene esta forma:
:meta name="keywords" content="collares para perros peligrosos"
No confundas un META tag de HTML con los tags o etiquetas de WordPress con las que marcas una entrada de un blog. Las tags del blog sirven para organizar el contenido, y si abusas de ellas corres el riesgo de duplicar el contenido de una forma exponencial, pero eso para otro día.
Google no usa el meta tag Keywords
Desde el 2009 la versión oficial de Google sobre el meta tag keywords es que ni lo mira, no lo utiliza y no tiene ningún efecto en el posicionamiento. Se ha usado tanto para hacer spam que han decidido ignorarla.
el 2009 la versión oficial de Google sobre el meta tag keywords es que ni lo mira, no lo utiliza y no tiene ningún efecto en el posicionamiento. Se ha usado tanto para hacer spam que han decidido ignorarla.
Solamente en el caso de portales de noticias deberian usar el meta tag, como decía el ingeniero de Google Matt Cutts
Matt Cutts¿Cómo NO usar las Keywords para optimizar una web?
Hay muchos casos y presumiblemente éste ha sido un motivo importante para este cambio ya que se ha llegado a usar llenándolo de todas las variantes posibles de sus palabras claves: en singular, en plural, en femenino, separado y todo junto, y usando cualquier término relacionado
este cambio ya que se ha llegado a usar llenándolo de todas las variantes posibles de sus palabras claves: en singular, en plural, en femenino, separado y todo junto, y usando cualquier término relacionadoEntonces… ¿cómo decirle a Google cuales son las keywords?
Pues poniendo las keywords donde Google cree que deben ir las palabras clave de un artículo.
1 Si posicionas por una palabra con pocas búsquedas será bueno, pero salir el primero en una búsqueda que nadie hace no trae visitas.
2 Asegúrate de no meterte en un berengenal donde no puedas ganar la guerra, no creo que con el presupuesto de una zapatería de barrio puedas posicionar por delante de BMW, al menos no mucho tiempo.
3 En las keywords, la ortografía Sí afecta al posicionamiento.
4 Tu TITLE, Description, H1 y URL deben ser diferentes para cada una de las páginas de la web, y diferentes entre sí en una misma página.
sí en una misma página.
5 Coloca la palabra clave en el TITLE, Description, y etiquetas h1, h2, etc
6 Úsalo en las imágenes (nombre de archivo, title, y alt)
de archivo, title, y alt)
7 Usa variantes, sinónimos, plurales, y derivados. Pero durante el texto y sin forzarlo
8 Etiquetas ALT y TITLE en todas las imágenes. Recuerda que sin estas etiquetas el buscador no las entiende. Además que una imagen añade peso a tus palabras. No olvides tampoco usar nombres de archivo descriptivos con las palabras claves.
9 Pocas keywords por página. A veces vale la pena usar dos o tres, según lo que estés diciendo, pero no intentes hablar sobre zapatos de todas las clases en la misma entrada. Una para zapatos de montaña, otra para zapatos de charol.
10 Un resumen al inicio de cada entrada te asegura que el bot las lea todas y entienda tu intención, sobretodo si tienes entradas muy largas.
11 Contenido es relevante para la temática de la web-blog-portal. A veces es tentador si un tema está relacionado y te gusta, pero no siempre es bueno irse del tema. Si el blog lo requiere, mejor organizarse.
12 Es bueno tener dos resultados en una primera página, pero es mejor tener un resultado en dos primeras páginas.
13 Asegúrate de que se vea bien en todos los navegadores y no tener codigo HTML roto ni dejar etiquetas abiertas. Eso da muy mala imagen ante Google aunque el buscador sea capaz de repararlo y mostrar la página de forma aceptable.
aceptable.
14 El uso de Flash, Silverlight, JavaScript/AJAX, Java, iframes etc dificulta que los buscadores rastreen y entiendan tu sitio, e impide que el 100% de los usuarios lo carguen correctamente
, iframes etc dificulta que los buscadores rastreen y entiendan tu sitio, e impide que el 100% de los usuarios lo carguen correctamente
15 Si no hay enlaces de texto hacia todas las páginas los robots no podrán ver todo tu contenido, y recuerda que cuanto más contenido tengas más importante pareces a los buscadores.
todas las páginas los robots no podrán ver todo tu contenido, y recuerda que cuanto más contenido tengas más importante pareces a los buscadores.
16 No queda bonito una página de login o un formulario de contacto entre los resultados
entre los resultados
Resumiendo
- Contenido con keywords y sinónimos, pero
- Tu TITLE, Description, H1 y URL deben ser diferentes para
- Usa variantes, sinónimos, plurales, y derivados. Pero durante
- Coloca la palabra clave en el TITLE, Description, y etiquetas h1, h2, etc
- Úsalo en las imágenes (nombre
Estructura de una página web
ESTRUCTURA DE UNA PAGINA WEB III MF0950_2/MF0950_2
MF0950_2: Construcción de páginas web.
● UF1302: Creación de páginas web con el lenguaje de marcas.
Enlaces
Un enlace, vínculo o link es un lugar en el que, mediante un click, somos dirigidos a otra parte. Puede ser un texto (normalmente subrayado) o una imagen (sobre la que podemos hacer click para ir a otro lugar de la web). Lo más habitual es que una página tenga enlaces a lugares de la misma (internos) o a otras páginas (externos). Ejemplo:
. Puede ser un texto (normalmente subrayado) o una imagen (sobre la que podemos hacer click para ir a otro lugar de la web). Lo más habitual es que una página tenga enlaces a lugares de la misma (internos) o a otras páginas (externos). Ejemplo:
<a href="http://www.comocreartuweb.com" target="_blank" title="Crear páginas web">Crear Paginas Web</a>
- Etiqueta de enlaces
<a .....propiedades....> </a>
En este caso, la etiqueta sí que tendría su parte habitual de cierre, la cual es importante no olvidar. No obstante, esta etiqueta no es nada sin sus propiedades o especificaciones.
- Ruta de enlaces
indicar al navegador el enlace al cual queremos ir, es href y tras ella y entre comillas dobles es donde colocamos la ruta y el nombre del archivo de la página de destino, de este modo:
<a href="ruta-del-enlace/nombre-del-archivo-destino.extension">Texto del enlace</a>
Se pueden enlazar tanto otras páginas web como archivos de música, imágenes etc. En estos casos no se muestra la imagen o música enlazada, sino que al pulsar sobre el enlace se ofrecerá la descarga al visitante.
al visitante.
- El target
El target es aquello que se encarga de colocar en una pestaña nueva o en la misma la página de destino.
Target= _op" se usa esta opción cuando queremos que el archivo enlazado se muestre en pantalla completa de la ventana eliminando los frames y los marcos si los hay.
Target="_parent" con esta, la página se muestra en marco anterior al marco o frame en el que está el enlace
Target="_self" con esto, la página se mostrará en la misma ventana del navegador
Target="_blank" con esta opción, se abrirá en una nueva ventana.
- Textos alternativos
Funciona igual que con los textos alternativos de las imágenes, en este caso es
title="texto alternativo"
- Anclajes
Esto sirve para cuando queremos enviar a las visitas a una parte concreta de la página. Usando los anclajes puedes hacer que cuando las visitas pulsen sobre este enlace, la ventana del navegador corra hacia esta parte concreta de la misma página. Para llevar a la parte superior sería:
<a name="arriba"></a>
Si queremos a la inferior:
<a name="abajo"></a>
Usando la lógica, si queremos enviar al visitante a la parte superior, el enlace deberá estar en la inferior
<a href="#arriba" title="Ir Arriba">Ir arriba</a>
Y vicebersa
<a href="#abajo" title="Ir Abajo">Ir abajo</a>
En ese caso colocarías al principio (o al final) ese menú, de este modo por ejemplo:
<a href="#titulouno" title="Ir al título uno">Ir al título uno</a>
<a href="#titulodos" title="Ir al título dos">Ir al título dos</a>
<a href="#titulotres" title="Ir al título tres">Ir al título tres</a>
<a href="#titulodos" title="Ir al título dos">Ir al título dos</a>
<a href="#titulotres" title="Ir al título tres">Ir al título tres</a>
Y ahora solo te faltaría colocar esas 3 anclas justo al lado de esos títulos, líneas de código como ásta:
solo te faltaría colocar esas 3 anclas justo al lado de esos títulos, líneas de código como ásta:
<h1>Título Uno</h1><a name="titulouno"></a>
<p>Este es el texto correspondiente al título uno, aunque debería ser más largo para que se note el efecto.</p>
<h1>Título Dos</h1><a name="titulodos"></a>
<p>Este es el texto correspondiente al título dos, aunque debería ser más largo para que se note el efecto.</p>
<h1>Título Tres</h1><a name="titulotres"></a>
<p>Este es el texto correspondiente al título tres, aunque debería ser más largo para que se note el efecto.</p>
<p>Este es el texto correspondiente al título uno, aunque debería ser más largo para
que se note el efecto.</p><h1>Título Dos</h1><a name="titulodos"></a>
<p>Este
es el texto correspondiente al título dos, aunque debería ser más largo para que se note el efecto.</p><h1>Título Tres</h1><a name="titulotres"></a>
<p>Este es el texto correspondiente al título tres, aunque debería ser más largo para que se note el efecto.</p>
Suele ser muy vistoso poner imágenes a modo de botones para esto, como por ejemplo flechas, para ello, el código se modificaría así:
<a href="#arriba" title="Ir Arriba">Ir Arriba</a>
En la última parte en la que pone ir arriba, lo sustituiríamos por la imagen pertinente y su ubicación o ruta, quedando así:
<a href="#arriba" title="Ir Arriba"><img src="C:\Users\ETC5\Desktop\melani/203293_top (1).gif"/></a>
por ejemplo flechas, para ello, el código se modificaría así:<a href="#arriba" title="Ir Arriba">Ir Arriba</a>
En la última parte
en la que pone ir arriba, lo sustituiríamos por la imagen pertinente y su ubicación o ruta, quedando así:<a href="#arriba" title="Ir Arriba"><img src="C:\Users\ETC5\Desktop
\melani/203293_top (1).gif"/></a>
- Propiedad rel
Sirve para ayudar a los navegadores a conocer qué tipo de enlaces estamos incluyendo realmente.
¿dónde se coloca?
Dentro de una etiqueta de apertura del enlace o vínculo. Se pueden colocar varias, una o ninguna. Veamos un ejemplo de dos
<a href="tema/pagina.html" title="bla bla bla bla" rel="next" rel="prefetch">Anchor Text</a>
Propiedad rel="archives" del html 5
Esto indica que la página a la que se está dirigiendo el navegador está archivada, que ha dejado de tratar un tema de actualidad, o que ha podido quedar obsoleto. No se ha eliminado la página por contener información interesante, pero se avisa que se desea mantener en estado de archivo, como por ejemplo noticias pasadas, etc.
Propiedad rel="author"
Se utiliza para especificar el autor del contenido, como por ejemplo en blogs etc.
Propiedad rel="prev", rel="start" y rel="next"
Especifica al navegador cuál es la página inicial de una sección, la siguiente y la anterior respecto de la página donde se encuentra el visitante. Muy útil para colocar las flechas de adelante y atrás.
Propiedad rel="prefetch"
Esto indica al navegador que vaya leyendo y memorizando una página distinta, la que presumimos que será la siguiente que va a leer el visitante. De este modo, cuando así sea y el visitante pulse ese enlace, el navegador la tendrá en su caché preparada para mostrarla en cuanto el enlace sea pulsado, pues ha estado cargando la información mientras el lector permanece leyendo la página anterior
Otros valores para el rel
nofollow: indica que el destino no tiene nada que ver con la temática de la web
sidebar: que no está aún definido
Search: para páginas que muestran resultados de búsquedas
noreferer: para que el navegador haga caso omiso de las posibles variables de referencia añadidas a la url
Advertencia
No todos los navegadores saben interpretar aún todos estos valores. Algunos no son reconocidos por ningún navegador todavía, aún así, no dan error al no ser reconocidos
- Imagen clicable
Para hacer una imagen que al clicar en ella nos lleve a otra página, habrá que insertar esta etiqueta
<a href="www.sitio.com"><img src="imagen.gif" alt="título de enlace" /></a>
En la primera parte, colocaremos la dirección (o archivo de ser el caso) deseada, la siguiente, después de scr, será la ruta y nombre de la imagen con su extensión, por último, el título o nombre que aparecerá cuando dejemos el cursor sobre ésta.
Suscribirse a:
Entradas (Atom)