04.- Ejemplo de Pagina

Nota: Utiliza imágenes y audios que se relacionen con el tema tratado en cada página.


Instrucciones:
Crea una carpeta la cual nombraras con tu nombre completo.
Dentro de la carpeta que acabas de crear, crea las carpetas:

audio
encabezado
imagenes
indice
paginas
pie de pagina
principal
subindice
videos
En cada una de estas 9 carpetas que acabas de crear guarda los archivos necesarios para tu página.

Captura los siguientes códigos:

                               

Guárdalo como Index.html, en la carpeta que nombraste con tu nombre completo.
Los siguientes códigos los guardaras en la carpeta que le corresponda.

Guárdalo como indice.html, en la carpeta indice.

Guárdalo como encabezado.html, en la carpeta encabezado.

Guárdalo como principal.html, en la carpeta principal.

Guárdalo como subindice.html, en la carpeta subindice.
                           
                             

Guárdalo como carreras tecnicas.html, en la carpeta paginas.

Después habré en el navegador el archivo Index.html

03.- Ejemplo de Pagina

Nota: Utiliza imágenes y audios que se relacionen con el tema tratado en cada página.

Instrucciones:
1.- Crea una carpeta la cual nombraras con tu nombre completo.
2.- Dentro de la carpeta que acabas de crear, crea las carpetas:

• audio
• encabezado
• imagenes
• indice
• paginas
• principal
• videos
3.- En cada una de estas 7 carpetas que acabas de crear guarda los archivos necesarios para tu página.

4.- Captura los siguientes códigos:

5.- Guárdalo como Index.html, en la carpeta que nombraste con tu nombre completo.
6.- Los siguientes códigos los guardaras en la carpeta que le corresponda.

7.- Guárdalo como indice.html, en la carpeta indice.

8.- Guárdalo como encabezado.html, en la carpeta encabezado.

9.- Guárdalo como principal.html, en la carpeta principal.

10.- Guárdalo como pagina 1.html, en la carpeta paginas.

11.- Guárdalo como pagina 2.html, en la carpeta paginas.

12.- Después habré en el navegador el archivo Index.html

02.- Ejemplo de Pagina

Nota: Utiliza imágenes y audios que se relacionen con el tema tratado en cada página.

Instrucciones:

1.- Crea una carpeta la cual nombraras con tu nombre completo.

2.- Dentro de la carpeta que acabas de crear, crea la carpeta “Paginas”.

3.- Dentro de la carpeta “Paginas”, crea las siguientes carpetas:

• imagenes

• videos

• audios

4.- En cada una de estas 3 carpetas que acabas de crear guarda los archivos necesarios para tu página.

5.- Captura los siguientes códigos:

6.- Guárdalo como Index.html, en la carpeta que nombraste con tu nombre completo.

7.- Los siguientes 3 códigos los guardaras en la carpeta “Paginas”.

8.- Guárdalo como indice.html

9.- Guárdalo como encabezado.html

10.- Guárdalo como portada.html

11.- Copia a la carpeta “Paginas”, los siguientes archivos: (Son los que capturaste del Blog)

037 Vinculo interno.html

016 Titulos H.html

025 Alineacion de línea.html

032 Color de fondo BGCOLOR.html

12.- Después habré en el navegador el archivo Index.html

01.- Ejemplo de Pagina

1.- Crea una carpeta la cual nombraras con tu nombre completo.

2.- Dentro de la carpeta que acabas de crear, crea la carpeta “Paginas”.

3.- Dentro de la carpeta “Paginas”, crea las siguientes carpetas:

• Imágenes
• Videos
• Audios

4.- En cada una de estas 3 carpetas que acabas de crear guarda los archivos necesarios para tu página.

5.- Captura los siguientes códigos:

6.- Guárdalo como Index.html, en la carpeta que nombraste con tu nombre completo.

7.- Los siguientes 3 códigos los guardaras en la carpeta “Paginas”.

8.- Guárdalo como indice.html

9.- Guárdalo como encabezado.html

10.- Guárdalo como portada.html

11.- Copia a la carpeta “Paginas”, los siguientes archivos: (Son los que capturaste del Blog)

037 Vinculo interno.html

016 Titulos H.html

025 Alineacion de línea.html

032 Color de fondo BGCOLOR.html

12.- Después habré en el navegador el archivo Index.html

Rutas de archivo

Insertar una imagen en el documento HTML

Para insertar una imagen dentro de una página web con HTML debemos utilizar la etiqueta <img>, la cual, no tiene etiqueta de cierre.
Generalmente, la imagen se encontrará en el mismo servidor donde se almacenan nuestras páginas HTML. Los formatos clásicos son los archivos con extensiones gif, jpg y png.
La sintaxis de esta etiqueta es:
<img src="imagen.jpg" alt="texto descriptivo"> 

Como mínimo, debemos emplear los atributos src y alt de la etiqueta HTML img.
<img> viene de image
src viene de source
alt viene de alternative

Atributo src

En el atributo src indicamos la ruta y el nombre del archivo de imagen.
Es muy recomendable no emplear ni espacios, ni símbolos, ni tildes, ni eñes ni mayúsculas en los nombres de archivo para evitar dificultades.
Si la imagen se encuentra en el mismo directorio donde se almacena la página HTML, con indicar el nombre de archivo es suficiente, en ese caso, como se ve en el ejemplo, no es necesario indicar ninguna ruta de carpetas.

Atributo alt

El atributo alt lo usamos para especificar un texto que verán los usuarios cuando la imagen no se pueda mostrar.
También es lo que lee una aplicación de lectura de pantalla como las que usan las personas deficientes visuales e invidentes, de modo que el texto debe describir el contenido de la imagen.

Uso de la ruta y forma de referenciar a los archivos

Rutas relativas

Si la imagen se encontrara en una subcarpeta llamada imagenes, la ruta para obtenerla sería:
<img src="imagenes/imagen.jpg" alt="Imagen">

Es decir, anteponemos al nombre del archivo de la imagen el nombre de la carpeta y la barra /.
Si la imagen se encuentra en una carpeta padre de donde se encuentra la página HTML, la sintaxis será:
<img src="../imagen.jpg" alt="imagen">

Es decir, le anteponemos .. y la barra / al nombre del archivo de la imagen.
Los dos puntos seguidos, por tanto, sirven para dirigirnos a una capeta padre. De tal modo que si tuviéramos que subir dos niveles quedaría así:
<img src="../../imagen.jpg" alt="imagen">

En la imagen anterior nos encontramos en articulo1.html y debemos subir dos niveles para llegar a la imagen.
Por último, si queremos acceder a una imagen que se encuentra en una carpeta llamada imagenes y el archivo HTML desde el que referenciamos en otra carpeta que está al mismo nivel que la de imágenes, primero deberíamos subir un nivel y luego acceder a la carpeta imágenes, quedando del siguiente modo:
<img src="../imagenes/imagen.jpg" alt="imagen">

Esta forma de emplear rutas de archivos es por referencias relativas, es decir, que determinamos la ruta respecto al elemento desde el que solicitamos el recurso externo.

Práctica No. 76. PELÍCULAS O VIDEOS EN LA PÁGINA

01 Estructura Básica	04 Listas	07 Fondo de pagina	10 Tablas
02 Formato de Párrafo	05 Líneas	08 Multimedia	11 Marquesinas
03 Formato de Texto	06 Imagen	09 Hipervínculos	12 Frames

Práctica No. 75. PELÍCULAS O VIDEOS EN LA PÁGINA

01 Estructura Básica	04 Listas	07 Fondo de pagina	10 Tablas
02 Formato de Párrafo	05 Líneas	08 Multimedia	11 Marquesinas
03 Formato de Texto	06 Imagen	09 Hipervínculos	12 Frames

Práctica No. 73.1 MÚSICA DE FONDO A LA PÁGINA

01 Estructura Básica	04 Listas	07 Fondo de pagina	10 Tablas
02 Formato de Párrafo	05 Líneas	08 Multimedia	11 Marquesinas
03 Formato de Texto	06 Imagen	09 Hipervínculos	12 Frames

Práctica No. 73. MÚSICA DE FONDO A LA PÁGINA

01 Estructura Básica	04 Listas	07 Fondo de pagina	10 Tablas
02 Formato de Párrafo	05 Líneas	08 Multimedia	11 Marquesinas
03 Formato de Texto	06 Imagen	09 Hipervínculos	12 Frames

00 Marquesina