Tema 2. Lenguaje de Marcas HTML - Presentación

Lenguaje de marcas
CODIFICACIÓN DE LA INFORMACIÓN Y CARACTERÍSTICAS DE LOS

LENGUAJES DE MARCAS.
Introducción al HTML
HTML es el lenguaje de marcas más utilizado para escribir páginas web.
Las etiquetas o tag describen diferentes elementos de la página, por ejemplo, la etiqueta <p> se utiliza
para delimitar párrafos de texto y la etiqueta <img> para definir imágenes. El encargado de interpretar
estas etiquetas es un programa llamado navegador (browser), por ejemplo, el navegador Chrome de
Google o el Firefox de Mozilla.
Los archivos que contienen el código HTML tienen la extensión .htm o .html, y son archivos de texto
plano (sin formato).
Para facilitarnos el trabajo podemos trabajar con editor o entorno adecuado como Dreamweaver o
Brackets.
Marcas HTML
Evolución del HTML
El precursor de HTML fue el lenguaje SGML de 1986 que es un estándar ISO para el etiquetado de documentos, similar al actual XML. SGML es la
base de HTML y ya contenía el sistema de etiquetas y las etiquetas más usuales como <p>, <li>, ... El principal aporte de HTML fue
el hiperenlace mediante la etiqueta <a>.
En 1993 se define HTML 1.0. que no tenia tablas ni formularios.
En abril de 1993 nace el navegador web Mosaic (2º navegador gráfico de la historia) que extendió el uso de la web.
En noviembre de 1995 vio la luz HTML 2.0 que ya era una versión más madura del lenguaje.
En Diciembre de 1995 aparecieron las hojas de estilo CCS 1 que desde entonces permiten separar el formato del contenido en las páginas web. Hoy
en día se puede especificar todo el formato con CSS, liberando al lenguaje HTML de esa función.
Enero 1997 HTML 3.2 la primera versión estandarizada por W3C.
W3C abandono HTML y creó XML, en enero 2000 nació XHMTL 1.0 que era muy similar a HTML 4.01 pero con unas reglas más estrictas para
considerar que la página web estaba bien escrita. Tras unos años XHTML no tuvo éxito.
En 2004 WHATWG formado por Opera, Apple y Mozilla empezó a crear HTML 5.0, W3C cerró el desarrollo de XHTML y se unió a ellos.
En Octubre de 2014 se publicó la primera versión oficial de HTML 5.
En abril de 2010 Apple declaró de forma pública la guerra a Flash no permitiendo instalarlo en su sistema operativo. Poco a poco Flash ha ido
perdiendo terreno. Ya no viene instalado por defecto en los navegadores.
Debido a este uso creciente de vídeo en la web se han creado etiquetas específicas en HTML 5 para reproducir vídeo y multimedia.
Marcas HTML
Reglas (Etiquetado)
Las etiquetas (marcas) delimitan cada uno de los elementos que componen un documento HTML.
El lenguaje HTML se basa en etiquetas, por eso es importante entender bien la sintaxis de las etiquetas.
La etiqueta de apertura está delimitada por el signo < "menor que", a continuación el propio nombre de la etiqueta (en este
caso p), y opcionalmente, un atributo (en este caso class="fondo"), finalmente el signo > "mayor que".
<HEAD>
La etiqueta de cierre está delimitada por el signo < "menor que", a continuación la barra inclinada /, el propio nombre de la etiqueta
(en este caso p), y finalmente el signo > "mayor que".
</HEAD>
Marcas HTML
Reglas (Etiquetado)
Algunas etiquetas no tienen contenido, y se cierran sobre sí mismas, no tienen etiqueta de cierre, se llaman etiquetas vacías, como la etiqueta <br>.
En estas etiquetas opcionalmente se puede colocar una barra justo antes del signo >, por ejemplo: <br />.
En general las etiquetas se pueden anidar pero no se pueden 'cruzar'.
CORRECTO INCORRECTO
La sintaxís de las etiquetas HTML ha sufido variaciones a lo largo del tiempo y hay etiquetas que ya no está recomendado su uso. Por esto se
pueden encontrar páginas web antiguas cuyo código HTML no se considera correcto hoy en dia, sin embargo, esas páginas siguen funcionando y
mostrando el contenido para el que fueron diseñadas.
Por otro lado, los navegadores pueden obviar pequeños errores y mostrar la página correctamente.
Para ver los errores de una página web existen validadores de código HTML, como el de W3C, que nos muestran los errores indicando su grado
de gravedad.
Marcas HTML
Atributos
Además de etiquetas y contenido, un elemento puede tener atributos y eventos.
Los atributos definen valores o propiedades para ser utilizadas por los navegadores en el procesamiento del documento, los eventos pueden ser
empleados para especificar comportamientos o acciones a ser desempeñadas cuando ciertas condiciones se cumplen, como por ejemplo, cuando el
usuario hace un clic sobre el elemento.
Los atributos se deben insertar dentro de la etiqueta de apertura como una lista de items separados por espacios, luego del nombre del elemento y
precedida por un espacio.
Cada uno de estos ítems se compone de un nombre (para el atributo), el signo igual ("=") y el). valor o función (a veces opcionalmente) encerrado
entre comillas.
Marcas HTML
Comentarios
Los comentarios son líneas que ignorará el navegador.
El comentario empieza por  Todo lo que pongas entre esas etiquetas está comentado.
<html>
<head>
<title>Página</title>
</head>
<body>
<p> Este texto está normal. </p>
<p> Este texto <b>también</b> es normal </p> 
Esto está fuera del comentario.
</body>
</html>
Marcas HTML
Estructura de un documento HTML
La primera línea <!DOCTYPE ... > no es propiamente una etiqueta de HTML, sino una declaración o instrucción al navegador sobre la versión de HTML
que utiliza la página. Para la versión HTML 5, el tipo de documento es html: <!DOCTYPE html>
El resto del documento HTML está contenido dentro de la etiqueta <html></html>. Para indicar el idioma es conveniente añadir el atributo lang="es“
<html lang="es">….</html>
Dentro de la etiqueta <html>, encontramos dos subdivisiones, la cabecera, delimitada por las etiquetas <head></head> y el cuerpo, delimitado por las
etiquetas <body></body>.
Marcas HTML
Estructura de un documento HTML
La etiqueta <head> contiene información sobre la página.
Por ejemplo contiene etiquetas que pueden decir de qué trata la página, el título que debe de mostrar en la barra del navegador, o código javascript y
estilos, que pueden estar en el propio encabezado o como enlaces a otros archivos.
Normalmente, lo que contiene esta etiqueta no se muestra en el navegador, es una etiqueta que contiene declaraciones sobre la página pero no
contenido propiamente dicho como texto o imágenes.
Las etiquetas que pueden ir dentro de <head> son <title> <style> <base> <link> <meta> <script> <noscript>.
De momento sólo comentaremos que obligatoriamente debe de contener la etiqueta <title></title>, que contiene el título de la página, que es lo que se
ve en la barra de título del navegador.
En el <body> encontramos el contenido de la página, lo que se ve a través del navegador: texto, imágenes, enlaces, tablas, etc... Por lo tanto dentro
del <body> pueden ir la gran mayoría de las etiquetas html.
Marcas HTML
Práctica [Marcas_head]
Marcas HTML
Elementos HTML
Elementos de texto de HTML
El texto de la página estará dentro del <body>, debe estar, principalmente, dentro de párrafos.
En HTML, los párrafos se identifican el texto dentro del <body> con la etiqueta <p></p>.
Dentro de los párrafos colocaremos texto e imágenes, y algunas etiquetas que nos permitan dar formato al
texto. Dentro de un párrafo no debe haber otros párrafos anidados.
A su vez, dentro del <body>, disponemos de encabezados que nos permiten organizar los títulos o rótulos del
texto.
Los encabezados van desde el <h1></h1> de mayor tamaño, al <h6></h6>, el más pequeño. Por ejemplo,
utilizaríamos un <h1> para poner el rótulo principal de la página, <h2> para los títulos de los
apartados, <h3> para los apartados de segundo nivel, etc.
Marcas HTML
Una de las peculiaridades del texto, es que los espacios en blanco consecutivos y saltos de línea no se
muestran como en el código fuente.
Si hay varios espacios seguidos, sólo se mostrará uno. Por ejemplo, si en el código fuente
escribimos Bienvenido a Hola se verá Bienvenido a Hola.
Si queremos poner varios espacios seguidos, utilizaremos el código html para el espacio,
El navegador también ignora los saltos de línea. Así si dentro de un párrafo colocamos varios saltos de línea
pulsando Intro, estos no se verán. Para crear un salto de línea dentro de un párrafo, utilizamos la
etiqueta <br />.
Cada etiqueta <p></p> lleva implicito un salto de línea.
Marcas HTML
Otras formas de agrupar el contenido dentro de la página web es con las etiquetas <div> y <span>.
La etiqueta <div> se utiliza a nivel de bloque y la etiqueta <span> a nivel de línea o palabras.
Estas etiquetas son básicamente contenedores genéricos de contenido. El contenido se escribe entre las
etiquetas de apertura y de cierre <div> contenido </div>, el criterio para agrupar contenido no está definido
estrictamente, por lo tanto podemos utilizarlas para lo que queramos, por ejemplo para dar estilo al contenido.
Podríamos decir que las etiquetas <div> y <span> son unas etiquetas neutras dentro de la semántica de
HTML.
Por el contrario, en HTML 5 han surgido nuevas etiquetas semánticas para agrupar el contenido según su
significado.
Marcas HTML
Estas nuevas etiquetas a nivel de bloque son, section para secciones, article para artículos, header para
cabeceras, nav para menús, footer para pies de página y aside para contenido en el lateral. A nivel de línea o
texto tenemos muchas etiquetas semánticas como strong. A lo largo del curso iremos viéndolas con detalle.
El uso de estas nuevas etiquetas semánticas no es obligatorio, pero sí recomendable, sobre todo para tener la
información mejor estructurada y también para que los buscadores sean capaces de identificar mejor el
contenido de nuestra página. Resumiendo, lo recomendable es utilizar las etiquetas semánticas y en los casos
en los que no exista una etiqueta semántica apropiada utilizar etiquetas <div> y <span>
Marcas HTML
Práctica [Marcas_p]
Marcas HTML
Enlaces e imágenes
Enlaces
Los enlaces son etiquetas que sirven para enlazar una parte de la pagina web con otra parte o directamente
una página con otra.
Un hiperenlace se escribe con la etiqueta <a> y permite ir (navegar) a un recurso de internet designado por su
dirección de internet (URL).
El recurso más usual es una página web pero también puede ser un archivo de imagen, vídeo, dirección email,
dirección ftp, punto de ancla, ...
<a href="http://www.as.com">Pagina del enlace</a>
Marcas HTML
Imágenes
Las imágenes son un elemento esencial en las páginas web. Hasta la versión 5 de HTML se utilizaba la
etiqueta <img> para incluirlas en una página web.
Debido a la necesidad de crear páginas web que se adapten a dispositivos de diferente tamaño se ha
incorporado la etiqueta <picture>.
Antes de ver cómo incluir imágenes en una página web conviene distinguir los diferentes tipos de imágenes
que existen: mapas de bits, vectoriales y generadas dinámicamente.
Las imágenes más comunes son las de mapa de bits que están formadas por puntos de colores, por ejemplo
una cámara de fotos digital utiliza imágenes de este tipo, los tipos de archivos más usados son .jpg, y .png;
también se utilizan mucho para gráficos y animaciones las de tipo .gif.
Para crear imágenes de mapa de bits puedes utilizar programas como Photoshop y Gimp (gratis)
Marcas HTML
IMAGEN
La etiqueta <img> representamos imágenes en una página web. Esta etiqueta no tiene etiqueta de cierre, se
cierra con el caracter >, aunque también se puede cerrar con />.
Para indicar el origen de la imagen se utiliza el atributo src="ruta_imagen". Por ejemplo:
<img src="graficos/logo.jpg"/>
La etiqueta img es una etiqueta con el atributo display de tipo inline, es decir, no incluye un salto de línea. Esto
permite colocar imágenes pequeñas o iconos dentro de una línea de texto.
Si queremos que una imagen ocupe toda la línea podemos colocarla dentro de una etiqueta p, div o figure que
tienen display de tipo block. También podemos cambiarle el display a block desde la hoja de estilo.
Marcas HTML
IMAGEN
Atributos
src: (source) indica donde está la imagen.

srcset: permite establecer distintas imágenes en función de la resolución del dispositivo y del ancho de la
pantalla.
<img srcset="img_resol_normal.png 1x, img_resol_alta.png 2x">
alt: contiene texto alternativo, que se mostrará en lugar de la imagen cuando no sea posible verla.
<img src="graficos/logo.jpg" alt="Logo" />
title es un atributo global, puede usarse en la mayor parte de las etiquetas de HTML.
El atributo title proporciona información descriptiva del elemento .Se muestra al colocar el cursor encima del
elemento y es bastante utilizado en las etiquetas img ya que puede ser interesante proporcionar al usuario
información sobre la imagen.
width y height limitan la altura y anchura de la visualización.
Marcas HTML
IMAGEN
<Picture>
La etiqueta picture es la nueva manera de insertar imágenes en una página web de una forma más
flexible que con la etiqueta img.
La etiqueta picture es preferible sobre todo si queremos diseñar páginas web que se adapten a todo tipo de
pantallas. Ya que permite mostrar diferentes imágenes en función de varios parámetros, como las dimensiones
de la ventana, orientación de la ventana, tipo de imagen y resolución del dispositivo.
Podremos mostrar diferentes versiones de una imagen según el ancho de la ventana del navegador con el que
se va a visualizar la imagen; así mostraremos una imagen pequeña en un teléfono móvil, una imagen mediana
en un tablet y una imagen grande en un ordenador.
El formato genérico de la etiqueta picture es el siguiente:
<picture>
<source media="(condición 1)" srcset="imagen_1.jpg">
...
<source media="(condición n)" srcset="imagen_n.jpg">
<img src="imagen_alt" alt="Si no se cumple ninguna condición">
</picture>
Marcas HTML
IMAGEN
<Picture>
Ejemplo de etiqueta adaptable a varias anchuras y con diferentes orientaciones (portrait):
<picture>
<source media="(orientation: portrait) and (max-width: 300px)“ srcset="graficos/en_rio_pequenya_200_portrait.jpg">
<source media="(orientation: portrait)" srcset="graficos/en_rio_mediana_300_portrait.jpg">
<source media="(min-width: 800px)" srcset="graficos/en_rio_grande_800.jpg">
<source media="(min-width: 600px)" srcset="graficos/en_rio_mediana_600.jpg">
<source media="(max-width: 600px)" srcset="graficos/en_rio_pequenya_300.jpg">
<img src="graficos/por_si_acaso.jpg" alt="Si no se cumple ninguna condición">
</picture>
Marcas HTML
Práctica [Marcas_img]
Crea una página web añadiendo varios

enlaces, imágenes, imágenes con enlaces.
Todas las imágenes tendrán diferentes
resoluciones y orientaciones.
Marcas HTML
Listas y tablas
Listas
Las listas son una herramienta que nos permiten insertar una sucesión de etiquetas de manera
ordenada en una web.
Podemos distinguir entre listas ordenadas (orderer list) con la etiqueta <ol> y listas sin ordenar (unorderer list), con la
etiqueta <ul>.
Ambas listas deben de contener una serie de elementos de lista (list items), delimitados por las etiquetas <li></li>.
La diferencia entre ambas, es que al mostrarlas el navegador las enumera en el caso de las listas ordenadas, o muestra
viñetas, en las no ordenadas.
<ol>
<li>Abrir</li>
<li>Editar</li>
<li>Guardar</li>
<li>Cerrar</li>
</ol>
<ul>
<li>Plátanos</li>
<li>Naranjas</li>
<li>Manzanas</li>
</ul>
Marcas HTML
Listas
Las listas pueden estar anidadas, colocando dentro de un elemento otra lista.
<ul>
<li>Elemento</li>
<li>Elemento
<ul> <li>Sub elemento</li>
<li>Sub elemento</li>
</ul>
</li>
<li>Guardar</li>
<li>Cerrar</li>
</ul>
Podemos cambiar el marcador (la marca que se muestra) con la propiedad de estilo list-style-type:
none: No muestra ningún marcador.
disc: Muestra un punto negro.
circle: Un círculo vacío.
square: Un cuadrado.
decimal: Números decimales: 1, 3, 3... 10, 11...
lower-roman: Números romanos en minúsculas: i , ii, iii, iv, v...
upper-roman: Númeors romanos en mayúsculas: I, II, III, IV, V...
lower-alpha: Letras en minúscula: a, b, c, d...
upper-alpha: Letras en mayúscula: A, B, C, D...
Marcas HTML
Práctica [Marcas_listas]
Marcas HTML
Tablas
Una tabla es un conjunto de celdas organizadas que pueden contener elementos, normalmente destinadas a representar
datos.
Antes era muy frecuente utilizar las tablas para maquetar las páginas web, estructurando todo el contenido dentro de una
tabla, lo que hacía sencillo distribuir el espacio. La recomendación actual sugiere el uso de capas y estilos CSS para este
fin.
Las tablas, están divididas horizontalmente en filas, y verticalmente en columnas
Marcas HTML
Tablas
En html, utilizamos la etiqueta <table></table> para crear una tabla.

Dentro de la tabla, debemos de crear filas, utilizando la etiqueta <tr></tr>.
Y dentro de cada fila, creamos las distintas celdas que la componen, con la etiqueta <td></td>. Todas las filas deben de
tener el mismo número de celdas.
Dentro de cada celda, puede ir cualquier elemento html, o podemos escribir texto directamente.
Con lo que hemos visto, podríamos crear una tabla simple, como la del siguiente ejemplo:
<table border="1">
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
</tr>
<tr>
<td>Celda 3</td>
<td>Celda 4</td>
</tr>
</table>
Etiqueta <th>
Dado que es muy común que las tablas tengan una primera fila de cabecera se creó la etiqueta <th>.
Marcas HTML
Tablas
Podemos unir o fusionar celdas adyacentes, para tener celdas de mayor tamaño que otras, siempre que el resultado sea un
rectángulo. Es decir, no podríamos unir las celdas formando una "L" o una "U". Para hacerlo, tenemos los
atributos colspan y rowspan.
El atributo colspan y rowspan extiende la celda tantas celdas como le indiquemos, contando la celda actual.
La etiqueta table admite al atributo bordear Este atributo, cuyo valor es un número sin unidades, expresa el grosor del borde
exterior de la tabla. Si es 0 o no se indica, no se muestra borde, y si es mayor que cero, se muestra también un borde
delgado entre celdas.
Utilizando el atributo width de la etiqueta table podemos establecer el ancho de la tabla, en porcentaje o píxeles, con
respecto al elemento que contiene la tabla.
Marcas HTML
Tablas
Alineación
Por defecto, el contenido de una celda se muestra centrado verticalmente, y alineado horizontalmente a la izquierda.
Podemos cambiar la alineación horizontal de las etiquetas tr, td, th, col, colgroup, tbody, thead o tfoot con el atributo align,
que puede tomar estos valores:
right: a la derecha.
left: a la izquierda.
center: centrado.
justify: justificado.
Para centrar el contenido verticalmente, podemos utilizar el atributo valign, que puede tomar estos valores:
top: arriba.
bottom: abajo.
middle: al medio
baseline: alineado con la primera línea de texto.
Marcas HTML
Práctica [Marcas_tablas]
Marcas HTML
Formularios y javascript
Formularios
Un formulario es un conjunto de controles (botones, cajas de texto, casillas de verificación, botones radio, etc) que permiten
al usuario introducir datos y enviarlos al servidor web para su procesamiento.
Marcas HTML
Formularios
La etiqueta <form> se utiliza para declarar un formulario , no obstante analizaremos los atributos más importantes.
El atributo action indica el tipo de acción que va a realizar el formulario, en concreto el destino de la redirección.
<form action=”dirección completa del archivo que la gestionará” …> </form>
Mediante el atributo method le indicamos al formulario la forma en la que el formulario será enviado. Existen dos valores
posibles: get y post.
“get” indica que los datos enviados se adjuntarán en la barra de direcciones del cliente.
El valor post indica que el método de envío no se hará a través de la url, sino formando parte del cuerpo de la petición.
Marcas HTML
Input
La etiqueta <input> se utiliza para guardar datos de un formulario que serán enviados.
El atributo type indica el tipo de input que se va a generar: button, checkbox, radio,etc.
Otra manera de “meter” información en la página por parte del usuario es con textarea.
<textarea name="textarea" rows="10" cols="50">Write something here</textarea>
Marcas HTML
Javascript
Javascript es un lenguaje de programación capaz de ejecutarse en el navegador (cliente) para descargar de trabajo al
servidor.
Utilizando este lenguaje podemos crear comportamientos (eventos) que no están disponibles en el html, por ejemplo mostrar
un mensaje, abrir una ventana, cerrarla.. también podemos utilizarlo para cambiar la página. Por ejemplo, cambiar el color
de fondo.
JavaScript dispone de una serie de eventos sobre los elementos de la página, es decir, una serie de acciones que permiten
hacer algo cuando son detectadas. Por ejemplo:
onclick. Se produce al hacer clic sobre un elemento.

onmouseover. Se produce al poner el cursor sobre un elemento.
onmouseout. Se produce cuando el cursor está fuera del elemento.
Marcas HTML
Práctica [Marcas_eventos]
Investiga todos los eventos asociados

que puede detectar javascript.
Marcas HTML
Javascript
El código javascript se sitúa dentro del HEAD de la siguiente manera.
<head>
<title>Mi página</title>
<script type="text/javascript">

</script>
</head>
También podemos ejecutar desde un archivo externo llamando al archivo con el siguiente código:
<script type="text/javascript" src="js/nombre_archivo.js"></script>
Marcas HTML
Javascript
La función alert sirve para mostrar mensajes o variables.
alert(Hola mundo');
La función prompt muestra formularios que el usuario puede rellenar.

Se puede guardar el contenido en una variable.
function alerta()
{
var mensaje;
var opcion = prompt("Introduzca su nombre:", "Aner Barrena");
if (opcion == null || opcion == "") {

mensaje = "Has cancelado o introducido el nombre vacío";
} else {
mensaje = "Hola " + opcion;
}
document.getElementById("ejemplo").innerHTML = mensaje;
}
Marcas HTML
Práctica [Marcas_javascript]
Marcas HTML
Frames
Los frames era una manera antigua de separar el espacio de una paǵina web: típicamente se separaba en el
frame menu y el frame datos. Ahora con las capas está obsoleto.
Iframe
Permite incrustrar otra página HTML en la página actual.
<iframe id="inlineFrameExample"
title="Inline Frame Example"
width="300"
height="200"
src="https://www.openstreetmap.org/export/embed.html?bbox=-
0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861
898606&layer=mapnik">
</iframe>
Marcas HTML
Marquesinas
Es otro elemento obsoleto muy típico de las primeras web de los años 90, y principios del 2000. Consiste en
un texto que se va desplazando por la web.
La etiqueta es <marquee> texto </marquee>
Marcas HTML
Elementos multimedia
Video
La etiqueta vídeo incrusta un vídeo en una página web.
El atributo controls hace que aparezca una barra con los controles.
autoplay. Si aparece este atributo el vídeo comenzará a reproducirse automáticamente al cargarse la página,
si no aparece el usuario tendrá que pulsar en el botón Play.
loop. Si aparece este atributo cuando el vídeo llegue al final volverá a reproducirse desde el principio, y así
indefinidamente.
muted. Si aparece este atributo no se oirá el sonido. Si utilizamos este atributo es conveniente incluir el
atributo controls para que el usuario pueda activar el sonido.
poster. Este atributo permite colocar una imagen como portada del vídeo.
<video controls poster="graficos/poster_video.png">

<source src="multimedia/tortola.mp4" type="video/mp4"> Formato de vídeo no soportado.
</video>
Marcas HTML
Video
width y height. Indican la anchura y altura del vídeo en pixels.
preload. Indica cómo se debe cargar el vídeo, tiene estos tres valores:
1) auto, es el valor por defecto, el proceso de carga es optimizado por el navegador, es el valor recomendable.
El vídeo se descargará para estar disponible inmediatamente.
2) none. El autor piensa que no se debe cargar el vídeo inmediatamente para que se minimice la carga.
3) metadata. El autor piensa que no se debe cargar el vídeo inmediatamente, pero que es deseable obtener
sus metadatos (dimensiones, primer fotograma, lista de pistas, duración, etc.).
type. Los tipos mp4, ogg, webm, son los tipos reconocidos oficialmente por html 5 , pero hay otros tipos de
vídeo que se pueden reproducir. Si no conoces el valor del atributo type puedes omitirlo.
track . La etiqueta track permite incluir subtítulos en el vídeo
Marcas HTML
Audio
De manera análoga al video, esta etiqueta incrusta audio a la web.
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Marcas HTML
XHTML
Es una versión avanzada de HTML y basada en XML desarrollada por w3c, las empresas Apple, Mozilla y
Opera mostraron su preocupación por la falta de interés del W3C en HTML y comenzaron a desarrollar HTML
5, aunque XHTML es un referente.
No existen grandes diferencias entre html 4 y xhtml mientras que HTML es más permisivo, XHTML nos
obliga a cerrar todas las etiquetas correctamente, y escribir etiquetas y atributos en minúsculas,
siguiendo las reglas del XML.
Por ejemplo, mientras que escribir <br> o <BR /> sería válido en HTML, en XHTML deberíamos
escribir <br /> o <br></br>.
En la parte declarativa del documento web (en los documentos XHTML es obligatorio declarar el Doctype) indicaremos que se trata
de xHTML mediante la sentencia:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Marcas HTML
Posicionamiento en google
Cuando una persona introduce palabras claves en un buscador, éste realiza complejos procesos para obtener
una lista de resultados con las páginas que mejor responden a esa búsqueda. Estos procesos son secretos y
los buscadores sólo dan una información general de los factores que influyen en los resultados.
Existen robots que buscan nuevas páginas o crawlers, la mejor estrategia es en general facilitar el trabajo al
robot.
Contenido de calidad. Una página con un buen contenido y mal posicionamiento tardará más en alcanzar
una buena posición, pero lo conseguirá.
Sitio bien estructurado y sencillo. Para los robots de Google cuanto más fácil sea extraer la información de
la página tanto mejor. Hay que colocar suficientes enlaces de texto y con las palabras clave adecuadas y huir
de las excesivas florituras.
Lograr enlaces desde otros sitios web. El factor de más peso en el PageRank de Google es el número y la
calidad de los enlaces que apuntan a nuestro sitio. Informa de la existencia de tu página a todo el mundo,
principalmente a los sitios de temática similar.
Marcas HTML
Alta en Google. El primer paso para conseguir una buena posición en Google es aparecer en el buscador.
Para hacerlo visita esta página: http://www.google.com/addurl/?continue=/addurl
No te saltes las reglas de los buscadores, si lo haces y te penalizan perderás muchos meses para recuperar tu
posicionamiento.
En esta página tienes información sobre las directrices de calidad de Google.

https://support.google.com/webmasters/answer/35769?hl=es
Sobre el diseño de la página ten en cuenta estas recomendaciones, si utilizas demasiado Flash, frames,
DHTML, JavaScript y mucha programación web harás más difícil el trabajo de los robots.
Es conveniente utilizar títulos cortos y claros, con los estilos de encabezados (h1, h2). Los títulos son
fundamentales en las búsquedas, procura utilizar el sinónimo más común, por ejemplo, coches, vehículos,
autos, automóviles, carros. Hay herramientas para ver cuáles son las palabras más buscadas. Google no
reconoce el texto incluido en imágenes, no utilices imágenes para los títulos ni para los enlaces principales del
sitio web. Si utilizas imágenes, usa el atributo ALT para poner el texto relevante.
Marcas HTML
Dar de alta en directorios importantes como Dmoz. (http://www.dmoz.org) Aunque han perdido importancia
todavía son una forma de conseguir enlaces.
Para conocer las palabras clave más usadas hay herramientas como la proporcionada por Google AdWords.
Con ella podemos ver la relevancia de palabras clave y las búsquedas que se han hecho con esas palabras.
Enlazar las páginas desde el propio sitio web de forma bien estructurada.
Informar a Google de la actualizaciones con Sitemaps.
Marcas HTML

Tema 2. Lenguaje de Marcas HTML - Presentación

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tema 2. Lenguaje de Marcas HTML - Presentación

Cargado por

Copyright:

Formatos disponibles

Lenguaje de marcas

CODIFICACIÓN DE LA INFORMACIÓN Y CARACTERÍSTICAS DE LOS

En 1993 se define HTML 1.0. que no tenia tablas ni formularios.

Enero 1997 HTML 3.2 la primera versión estandarizada por W3C.

En Octubre de 2014 se publicó la primera versión oficial de HTML 5.

En general las etiquetas se pueden anidar pero no se pueden 'cruzar'.

La etiqueta <head> contiene información sobre la página.

Cada etiqueta <p></p> lleva implicito un salto de línea.

<a href="http://www.as.com">Pagina del enlace</a>

Para indicar el origen de la imagen se utiliza el atributo src="ruta_imagen". Por ejemplo:

src: (source) indica donde está la imagen.

Ejemplo de etiqueta adaptable a varias anchuras y con diferentes orientaciones (portrait):

Crea una página web añadiendo varios

En html, utilizamos la etiqueta <table></table> para crear una tabla.

<textarea name="textarea" rows="10" cols="50">Write something here</textarea>

onclick. Se produce al hacer clic sobre un elemento.

Investiga todos los eventos asociados

El código javascript se sitúa dentro del HEAD de la siguiente manera.

<script type="text/javascript" src="js/nombre_archivo.js"></script>

La función alert sirve para mostrar mensajes o variables.

La función prompt muestra formularios que el usuario puede rellenar.

if (opcion == null || opcion == "") {

Permite incrustrar otra página HTML en la página actual.

La etiqueta es <marquee> texto </marquee>

<video controls poster="graficos/poster_video.png">

width y height. Indican la anchura y altura del vídeo en pixels.

track . La etiqueta track permite incluir subtítulos en el vídeo

De manera análoga al video, esta etiqueta incrusta audio a la web.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

En esta página tienes información sobre las directrices de calidad de Google.

Informar a Google de la actualizaciones con Sitemaps.

También podría gustarte