¡Descarga HTML Incorporando elementos y más Apuntes en PDF de Desarrollo de Aplicaciones Web solo en Docsity!
Incorporando elementos
A continuación aprenderás como se insertan los distintos elementos que puede contener un documento HTML: enlaces, tablas, gráficos, vídeos, etc… Verá cuales son las etiquetas que los definen, sus atributos y como mejoran el aspecto visual de sus páginas Web.
1. La etiqueta : Los enlaces
La etiqueta tiene la función de insertar un enlace en un documento. Necesitamos para ello el atributo href. Hay dos tipos de enlaces:
- A una página externa (enlace externo)
En este caso el contenido del atributo “href” será una página Web.
Ejemplo:
En este ejemplo se va a crear un Home Page, en la cual se incluirá un enlace a un documento ya creado y a una url muy conocida.
Cree el documento índice.html.
Escriba las siguientes líneas de código:
… Home Page del curso HTML Documentos del curso:
Pruébelo en el navegador.
- Dentro de la propia página (enlace interno)
En este caso el atributo href debe contener un #ID, donde ID es el atributo definido para algún elemento (etiqueta) de la página. De este modo nos desplazaremos hasta esa ID definida.
Ejemplo:
Identifique los títulos (nombre de cada planeta). A cada uno de ellos le vamos a añadir un ID, de la forma siguiente:
Cada planeta tendrá como ID su propio nombre.
Completada esta tarea, deberá agregar un índice con los planetas del sistema, este índice contendrá los enlaces que le permitirán acceder a los títulos que ha identificado.
Guarde el documento y visualícelo en el navegador.
2. La etiqueta
Para insertar imágenes y gráficos. Atributos:
Ejemplo
Abre PR3_planetas.html. Vamos a añadir un gráfico.
Con su singular combinación de …
Visualícelo.
Haga lo mismo con el resto de los planetas. Como podrá comprobar las imágenes no quedan correctamente colocadas respecto al texto. En el próximo capítulo veremos como corregir esto gracias a la etiqueta
.
Ahora vamos a jugar con los atributos Height y Width. Investigue que valores puede utilizarse (valores absolutos o con porcentajes). Haga cambios en las imágenes del archivo PR3_planetas.html.
3. Audio en HTML
La etiqueta audio tiene los siguientes atributos:
El problema que hay a la hora de insertar audio son los formatos de los archivos. Hay navegadores que permiten la extensión .ogg pero no .mp3 y viceversa, por lo que hay que tenerlo en cuenta.
Para solucionar este asunto, basta con indicar por código varios archivos. El navegador ejecutará únicamente el primero que sepa interpretar.
Prueba el siguiente ejemplo. En él se ve como no es capaz de ejecutar el archivo “allmyloving.ogg” con lo que pasa a la siguiente fuente:
< audio width="300" height="32" controls="controls" autoplay="autoplay" preload="">
Ejercicio 1
Investiga como insertar vídeos de youtube en una página.
Una vez que sepas cómo hacerlo, crea una página con vídeos de youtube integrados y archivos de música y vídeo tal y como hemos aprendido en las dos secciones anteriores. Trata de poner en práctica todo lo aprendido hasta ahora.
Nota : Si lo necesitas, utiliza la página https://convertio.co/es/ para convertir archivos.
