Post on 16-Feb-2015
Posicionamiento Web Primera Parte: Estructura de una Página Web y
Metadatos
Lluís CodinaUPF
IDEC2010
Cómo vemos nosotros una página web
Octubre 2010 2
Como la ve un buscador
Octubre 2010 3
El código fuente
Texto + Marcado Texto
Contenido textual visible (“para leer”) Marcado
Elementos XHTML Elementos de marcado (<h1>, <h2>, <p>, …) Elementos de sustitución (<a>, <img>, …) Contenido visual no visible directamente: metadatos
En el futuro: HTML 5 + CSS
Octubre 2010 4
Ejemplo de código fuente suficiente
Octubre 2010 5
El código fuente interpretado
Octubre 2010 6
El mismo código completado
Octubre 2010 7
Los metadatos destacados
Octubre 2010 8
Matadatos más importantes
Elemento <title> en <head> Elementos <meta> con atributos name y
content en <head> Ejemplo:
<meta name=«description» content=«Análisis y métodos en documentación» />
Atributo title en elementos <a> (enlaces) Atributo alt en elementos <img>
Octubre 2010 9
Octubre 2010
Práctica - I Crear una página web con el Bloc de Notas Entrar el contenido (archivo anexo):
10
pag01.txt
Práctica - II Marcar la página con elementos estructurales, añadir un
enlace y guardar como pag01.htm
Octubre 2010 11
Práctica - III
Entrar metadatos keyword and description en <head>
Entrar metadato title en el enlace
Octubre 2010 12
Posible solución
Octubre 2010 13
Práctica - IV
Añadir el metadato author (con el elemento <meta> y los atributos name y content)
Añadir un vídeo de YouTube Localizar un vídeo sobre el océano o la vida
marina Identificar la opción para incrustar el vídeo en
nuestra página Añadir o editar el atributo title Poner un encabezado <h2> antes del vídeo
Octubre 2010 14