Diccionario
Hiperenlace
- Definición:
-
Elemento de una página que hace que el navegador acceda a otro recurso o página web.
- Ejemplo:
-
Cuando navegas por una página y haces clic en una imagen o palabra para ir a otro sitio.
Computación y Robótica para todos
4.3. Nuestras primeras páginas
Diccionario
Hiperenlace
Ya conoces las características fundamentales de un documento HTML.
Ahora te voy a enseñar a crear diferentes páginas web.
Pero no os preocupéis, iremos poco a poco y al final seréis capaces de crear vuestra propia página web.
Hay actividades en grupo y otras individuales, es importante hacerlas todas.
¡Seguro que os lo vais a pasar genial!
1. Hola Mundo
Aquí tenéis la información para:
- Crear la estructura HTML.
- Incluir el tipo de caracteres que vamos a utilizar en nuestra página.
- Utilizar la etiqueta "párrafo".
- Guardar el trabajo y previsualizar nuestra página en un navegador.
En las siguientes pestañas, está todo explicado de forma ordenada:
Crear la estructura HTML
Ya conocéis cómo debe ser la estructura de un documento HTML.
Ahora os voy a enseñar una forma rápida de crear esta estructura de etiquetas.
Obervad que fácil es:
Haz clic para ver la imagen ampliada
Etiqueta de párrafo
En el cuerpo de la página escribimos el texto Hola Mundo. Para ello debemos utilizar las etiquetas de párrafo. Mirad como el editor al escribir <p nos ofrece una ayuda para completar la etiqueta. En la siguiente imagen podéis verlo:
Guardar y previsualizar
En la aplicación Bluefish, debes guardar el archivo y previsualizar en el navegador. En la siguiente imagen podéis verlo mejor:
En la siguiente imagen podéis ver cómo quedaría el código y la previsualización en el navegador:
Video
Aquí puedes ver un video muy interesante sobre los primeros pasos para crear un documento HTML.
Recuerda que si lo necesitas puedes activar los subtítulos, incluso poder traducirlos automáticamente al español, con la opción transcripción.
Por cierto, este video es de Kahnacademy, una plataforma para la formación online, totalmente libre y gratuita, muy interesante y muy conocida a nivel mundial. Si quires, puedes hacer clic aquí, para conocer los demás videos que conforman un curso sobre Introducción a html de esta famosa plataforma.
Lumen dice ¿Otra forma de hacerlo?
Desde la barra de herramientas de HTML en la opción Estándar puedes acceder a esta opción.
Para más información, ver el apartado 4. Conoce el editor Bluefish de la página 4.1. El editor Bluefish de este documento.
Kardia dice ¿Quieres saber un truco?
Los atajos de teclado son una estrategia que te pueden ahorrar mucho tiempo, nos ayudan a escribir más rápido con el ordenador.
Si quieres escribir la etiqueta de párrafo, puedes pulsar simultáneamente las teclas: Ctrl+Alt+P
2. Creamos nuestra primera página
En esta actividad, vuestro grupo debe crear una página web que muestre el mensaje Hola Mundo.
A continuación os indico los pasos a seguir:
- Entrar en la aplicación Bluefish.
- Crear la estructura de nuestra página utilizando la ventana de Inicio rápido...
- Poner un nombre a la página que estáis creando. Por ejemplo, Hola mundo.
- Guardar el documento y ponerle un nombre. Importante, el nombre debe terminar en .html. Por ejemplo, HolaMundo.html.
Vuestra página debe quedar así:
Clavis dice Piensa en lo que has hecho
Antes de seguir, para un momento y reflexiona sobre lo que has hecho.
Para ello es muy adecuado que intentes identificar qué procedimientos has tenido que poner en marcha para realizar esta actividad; cuáles eran estrategias necesarias y con qué recursos contabas para resolverla.
Piensa también en cuáles han sido las dificultades que te has encontrado a la hora de dar respuesta.
¡Todo esto te será muy útil cuando tengas que enfrentarte a alguna actividad parecida!
Entonces, estarás preparada o preparado para poder resolverla sin problemas con tu experiencia previa.
3. Un tamaño para cada apartado
HTML cuenta con unas etiquetas que permiten ajustar el tamaño de un texto dentro de la página web. Estas etiquetas definen los titulos.
Disponemos de seis niveles de títulos. Están ordenados, de mayor a menor tamaño, por: h1, h2, h3, h4, h5 y h6.
En la siguiente imagen se puede ver un ejemplo de código HTML y el resultado de cómo se vería en la pantalla de un navegador.
Haz clic sobre la imagen para verla ampliada
Ver un vídeo
Video muy interesante sobre la creación de títulos para resaltar el texto de una página HTML.
Recuerda que si lo necesitas puedes activar los subtítulos y su transcripción al español.
Lumen dice ¿Necesitas ayuda con las barra de herramientas?
Desde la barra de herramientas de HTML en la opción Estándar puedes acceder a esta opción.
Para más información, ver el apartado 4. Conoce el editor Bluefish de la página 4.1. El editor Bluefish de este documento.
Kardia dice ¿Quieres conocer la forma más rápida?
Para los títulos, en la aplicación Bluefish, también existe un atajo que facilita la escritura en HTML.
En este caso sería:
- H1: Ctrl+Alt+1
- H2: Ctrl+Alt+2
- H3: Ctrl+Alt+3
- H4: Ctrl+Alt+4
- H5: Ctrl+Alt+5
- H6: Ctrl+Alt+6
4. Añade las etiquetas de títulos
En esta actividad se muestran diferentes líneas de texto, cada una en un tamaño diferente. Ya sabéis que existen unas etiquetas en HTML que permiten hacer esto.
Ahora, de forma individual deberás arrastrar las etiquetas que están en la zona inferior a cada línea para que el tamaño del texto sea el correcto. Recuerda que las etiquetas deben ir al comienzo y al final de cada línea.
Cuando completes la actividad anterior, escribe el código HTML para asignarle al texto Hola Mundo el título de mayor tamaño.
Puedes hacerlo en:
- Tu cuaderno de clase siempre es una opción.
- Un documento de texto en el ordenador.
- También puedes hacerlo en la aplicación Bluefish.
5. Insertar imágenes
Las imágenes son lo primero que vemos al abrir una página web. Le dan a nuestra página un aspecto diferente y atractivo.
Aquí tenéis la información que os permitirá insertar imágenes en un documento HTML.
Para que sea más fácil, os muestro la información de forma ordenada y con ejemplos visuales.
Etiqueta < img scr=" " width=" " height=" " alt= " " / >
Al principio puede parecer un poco complicado, pero con la siguiente imagen se entenderá mucho mejor:
Haz clic sobre la imagen para ampliarla
A continuación os muestro una breve descripción de la imagen anterior:
- Esta etiqueta no necesita la etiqueta de cierre < /img > .
- En src se pone la dirección de la imagen que queremos mostrar en nuestra página.
- Dentro de width y height se especifican las dimensiones de la imagen. Puede ser en píxeles o en %.
- Con alt, asignamos una descripción a la imagen. Esto es muy importante cuando la imagen no se pueda ver.
La dirección de la imagen es...
Las imágenes que queráis insertar en vuestro documento HTML pueden estar en:
- Vuestro propio ordenador. Recordad colocar la imagen en la misma carpeta de vuestro documento html.
- Imágenes que están en otras páginas web. Si esas páginas fallan, tus imágenes no se verán.
Nosotros vamos a utilizar en este ejemplo la segunda opción:
Imaginaros que queréis copiar la dirección de la imagen de la izquierda. ¿Cómo se haría?:
La etiqueta quedaría de la siguiente forma:
Incluir una imagen propia en la página web
Otra posibilidad es que queramos incluir en nuestra página web una imagen que hemos realizado nosotros.
Para incluir una imagen debemos situar el archivo de la imagen en la misma carpeta que nuestro archivo.html.
Si la imagen se llama “robot.jpg” bastará con que en el código incluyamos:
- < img scr=”robot.jpg” />
Recuerda que podemos añadirle las dimensiones con la que queremos que se muestre la imagen con width y height y en alt una descripción. Por ejemplo:
- < img scr=”robot.jpg” width=”600” height= “400” alt=”Imagen de nuestro robot” />
Ver un vídeo
Puedes ver este vídeo muy interesante sobre cómo insertar una imagen en documento HTML.
Recuerda que si lo necesitas, puedes activar los subtítulos del video y su transcripción al español.
Lumen dice ¿Necesitas ayuda con las barra de herramientas?
Desde la barra de herramientas de HTML en la opción Estándar puedes acceder a esta opción.
Para más información, ver el apartado 4. Conoce el editor Bluefish de la página 4.1. El editor Bluefish de este documento.
Kardia dice ¿Otra forma de hacerlo?
Hay otro camino para insertar una imagen en la aplicación Bluefish. Debes realizar la siguiente pulsación de teclas: Shift+Alt+I
Después de hacerlo, aparecerá la siguiente imagen:
6. El hiperenlace
Gracias a este elemento nuestra página adquiere otra dimensión.
El hiperenlace permite acceder a contenidos que están en otras páginas.
Imaginaros que queremos incluir el siguiente contenido. El procedimiento para crear el hiperenlace es muy sencillo. Te lo puedo explicar en tres pasos.
Recordad que estamos utilizando la aplicación Bluefish.
Paso 1
Necesitamos la dirección del recurso o contenido digital que queremos incluir en nuestro hiperenlace. Es muy sencillo, entramos en la página correspondiente y copiamos su dirección. En la siguiente imagen tenéis un ejemplo de cómo se hace:
Recuerda, es importante que copies la dirección completa.
Paso 2
Ahora, vamos a crear el hiperenlace en nuestro documento HTML. Debes hacer lo siguiente:
1. Seleccionamos el texto o imagen de nuestro documento que será el hiperenlance. Recordad que sobre este elemento haremos clic con el ratón para acceder al contenido. En la siguiente imagen se aprecia en azul el texto seleccionado para crear el hiperenlace.
Haz clic sobre la imagen para agrandarla
2. Creamos el hiperenlace, lo puedes hacer pulsando simultaneamente las teclas Shift+Alt+A, o desde la barra de herramientas HTML del editor.
Paso 3
Para terminar, debemos rellenar los argumentos o datos del hiperenace.
A continuación te muestro un ejemplo de cómo quedaría:
A continuación tienes un resumen de la imagen anterior:
- HREF: Aquí se coloca la dirección del recurso que queremos utilizar en nuetro hiperenlace.
- Objetivo: Elegimos la forma en la que se abrirá el recurso. La opción _blank hará que el recurso se abra en una nueva ventana del navegador. Esta opción es la recomendable.
- Título: Incluimos el título de nuestro enlace.
Al hacer clic en el botón de OK, nuestro documento HTML quedará como muestra la siguiente imagen:
Haz clic sobre la imagen para agrandarla
Definición:
Elemento de una página que hace que el navegador acceda a otro recurso o página web.
Ejemplo:
Cuando navegas por una página y haces clic en una imagen o palabra para ir a otro sitio.
Lumen dice ¿Necesitas ayuda con la barra de herramientas HTML?
Desde la barra de herramientas de HTML en la opción Estándar puedes acceder a esta opción.
Para más información, ver el apartado 4. Conoce el editor Bluefish de la página 4.1. El editor Bluefish de este documento.
Kardia dice ¿Quieres saber más sobre la opción target?
Como hemos visto anteriormente, la opción "Target" en Bluefish se conoce como "Objetivo".
Si visitas la siguiente página web puedes conocer mucho más sobre esta opción.
7. Las listas
Las listas son un recurso que nos permiten crear un conjunto de elementos. Las listas pueden ser:
De la imagen anterior observamos que:
- Las listas ordenadas crean un conjunto de elementos numerados: 1, 2, 3,...
- Las listas desordenadas utilizan viñetas para los elementos que contiene la lista. Aquí tenéis un ejemplo de viñetas:
- Segundo nivel.
- Tercer nivel.
- Segundo nivel.
Seguro que utilizáis a menudo esta forma de presentar la información. Ahora os voy a enseñar cómo podéis hacerlo en HTML.
Lista ordenada
En la siguiente imagen podéis ver un ejemplo de este tipo de lista:
Si os fijáis en el código de la imagen anterior, estas etiquetas tienen el siguiente significado:
- ol, viene de ordered list, (lista ordenada).
- li, viene de item list, (elemento de la lista).
Ahora será más fácil de recordar.
Lista desordenada
En la siguiente imagen podéis ver un ejemplo de este tipo de lista:
Si os fijáis en el código de la imagen anterior, estas etiquetas también tienen un significado:
- ul, viene de untidy list, (lista desordenada).
- li, viene de item list, (elemento de la lista).
Así se recuerda mucho mejor.
Ver un vídeo
En este vídeo podrás ver los primeros pasos para crear un documento HTML
Recuerda que si lo necesitas puedes activar los subtítulos y la transcripción automática al español.
Lumen dice ¿Recuerdas cómo se hacía desde el editor Bluefish?
Desde la barra de herramientas de HTML en la opción Estándar puedes acceder a esta opción.
Para más información, ver el apartado 4. Conoce el editor Bluefish de la página 4.1. El editor Bluefish de este documento.
Kardia dice ¿Te interesa conocer un atajo?
Para estas etiquetas también disponemos de una pulsación de teclas que nos facilite el trabajo.
A continuación os lo enseño:
- Crear lista ordenada, debemos pulsar al mismo tiempo las siguientes teclas: Ctrl+Alt+O
- Crear lista ordenada, debemos pulsar al mismo tiempo las siguientes teclas: Ctrl+Alt+L
- Añadir un elemento a la lista, debemos pulsar al mismo tiempo las siguientes teclas: Ctrl+Alt+M
Cuando lo probéis veréis lo rápido que se escribe el código.
8. No olvides el vídeo y la música
Para que nuestra página sea más vistosa, puede ser interesante incluir algún vídeo de vuestro trabajo o incluso reproducir sonidos.
A continuación os muestro la información de cómo se puede hacer:
Incluir un vídeo
Incluir este tipo de recursos da mucha más vistosidad a vuestras páginas web.
Para incluir un vídeo debes seguir los siguientes pasos:
- Sube tu vídeo a un sitio web dedicado a compartir vídeos. Por ejemplo, YouTube.
- Desde el ordenador, ve al vídeo que has subido a YouTube y que quieras insertar.
- Haz clic en la opción compartir.
- De la lista de opciones que se muestran, haz clic en Insertar.
- Copia el código HTML que aparece. Hay un botón para ello.
- Pega el código en la posición de tu página que desees.
También puedes ver el siguiente vídeo:
Recuerda que puedes activar los subtítulos del video
Incluir sonido
Si queréis incluir un sonido en vuestra página web, debéis seguir los siguientes pasos:
- Localiza tu fichero de audio, recuerda que sólo debes utilizar músca libre, sin derechos de autor.
- Desde el editor Bluefish, selecciona la opción Sonido... de la barra de herramientas HTML.
- Se abrirá la siguiente ventana:
Kardia dice ¿Música libre para tus páginas?
Aquí tenéis la página fiftysounds donde podéis encontrar música, libre de derechos de autor, para incluir en vuestra página web.
Para poder utilizar la música debéis dar crédito a FiftySounds. Incluye esta información en tu proyecto (copia y pega):
- Obra: Nombre de la obra
- Música de https://www.fiftysounds.com/es/
9. Un truco para no olvidar
Hasta ahora habéis aprendido las etiquetas más usadas en HTML.
Sé que estáis pensando que son muy difíciles de recordar. Pero, ¿qué os sugiere la siguiente imagen? 
Estaréis pensando, ¿qué significa todo esto? No os preocupéis, es algo que estudiaréis en cursos superiores. Pero si os puedo adelantar, que se trata de un truco que permite aprender algo que es difícil de recordar.
Pensad un momento en la imagen anterior. ¿Qué es más fácil de recordar, el texto de arriba o el de abajo? Creo que todos estamos de acuerdo que el texto de abajo.
De esto trata esta actividad.
Vuestro grupo deberá buscar estrategias que permitan recordar las etiquetas HTML que habéis estudiado hasta ahora.
Podéis hacer esta actividad en:
- Vuestro cuaderno de clase.
- Utilizando un documento de texto del ordenador.
Un consejo, utiliza diferente color para las etiquetas y para vuestras estrategias.
10. Buscando parejas
En esta actividad, vuestro grupo deberá relacionar el código de la derecha con su pareja de la izquierda.
Es tan fácil como pinchar, arrastrar y soltar.
¡Seguro que lo hacéis fenomenal!
11. Practicamos HTML
Ahora vuestro grupo debe intentar crear un documento HTML que incluya:
- Una imagen.
- Una lista ordenada o desordenada.
- Un hiperenlace a otra página web.
- También os propongo incluir un vídeo o un sonido.
Para entrar en la aplicación debéis:
Lumen dice ¿Necesitas ayuda con las etiquetas?
Si necesitas ayudas con las etiquetas, vuelve a ver los siguientes apartados de esta página:
- 5. Insertar imágenes.
- 6. El hiperenlace.
- 7. Las listas.
- 8. No olvides el vídeo y la música.
12. Nos hacemos una "chuleta"
Nuestra "chuleta" no es para copiarnos en un examen, es para ayudarnos a buscar la información de una forma más rápida.
A lo largo de esta página, hemos visto muchas etiquetas y también los atajos que hacen el trabajo más fácil. Pero es verdad, estos atajos son difíciles de recordar.
Os propongo, crear un resumen con:
- Las etiquetas que hemos estudiado.
- A cada etiqueta le vamos a añadir:
- El atajo que permita acceder de forma más rápida.
- Una breve descripción de lo que hace la etiqueta.
De esta forma, cuando tengamos que crear un documento HTML, nuestro resumen será de gran ayuda.
Para hacerlo, podéis utilizar:
- El cuaderno de clase.
- En un documento de texto usando el ordenador.
- También disponéis de un documento rellenable, que podréis guardar e imprimir.
Documento rellenable
Disponer de un documento rellenable es una forma de trabajar más rápida y además, nos puede servir de inspiración para futuros trabajos.
A continuación, podéis ver el documento rellenable:
Haz clic aquí para descargar el documento rellenable
13. Demuestro mis conocimiento en HTML
En esta actividad vas a trabajar los contenidos relacionados con las etiquetas HTML que tan importantes son para la creación de páginas web.
Deberás trabajar de forma individual. Pero no te preocupes, vas a disponer de diferentes opciones que podrás elegir según tus necesidades. Además, ¿por qué no intentar hacerlas todas?
Opción A: Empezamos recordando
A lo largo de este apartado hemos visto muchas etiquetas de HTML. Por ejemplo, al inicio del documento siempre se escribe la etiqueta es: < html >
En esta actividad, debes intentar hacer un esfuerzo y escribir aquellas etiquetas que seas capaz de recordar.
Sería interesante ordenarlas en una lista. Por ejemplo:
- ...
- ...
- ...
Opción B: Verdadero o falso
En esta actividad nos plantean unas afirmaciones y debes decidir si son verdaderas o falsas.
Es importante leerlas detenidamente antes de contestar.
Retroalimentación
Falso
Ten encuenta que src son las siglas de source, que podemos traducir como fuente y alt sería la descripción, por ejemplo de una imagen.
Retroalimentación
Falso
En el caso de la etiqueta de imagen, no se necesita cerrarla.
Retroalimentación
Verdadero
Recuerda que href son las siglas de hyper reference.
Opción C: Añade las etiquetas
Te han presentado el siguiente texto:
1. Las páginas web
1.1. Las etiquetas HTML
Las etiquetas son fundamentales para poder hacer una página web. Por lo tanto, es necesario conocerlas.
Copia el texto anterior en tu cuaderno y añade las etiquetas que permitan diferenciar el tamaño de los títulos anteriores.
Opción D: Explica las diferencias
En este apartado has visto que la información se puede presentar en forma de listas.
¿Podrías explicar las diferencias entre las listas ordenadas y desordenadas?
Obra publicada con Licencia Creative Commons Reconocimiento No comercial Compartir igual 4.0