Documentos de Académico
Documentos de Profesional
Documentos de Cultura
IMAGENES
Etiqueta <img> “no contiene
etiqueta de cierre, esta se <img src="nombre de la imagen.extensión(logo.jpg) "/>
sustituye con />”
ATRIBUTOS DE LA ETIQUETA – IMAGEN
Cambiar el ancho y alto de la
<img src=" logo.jpg" width="100" height="40" />
imagen.
Alinear la imagen a la
<img src="logo,jpg" align=right>
derecha y centro
(right,center)
Asigna un borde alrededor
<Img src="logo.jpg"border=18/>
de la imagen,
Aplicando conocimientos.
En la historia anterior agregar atributos a
los párrafos y agregar 3 imágenes
6
<b> </b>
El Explorador de Windows
El Explorador es una herramienta indispensable en un Sistema Operativo ya que con ella
podemos organizar y controlar los archivos y carpetas de los distintos sistemas de almacenamiento que
dispongamos, como puede ser el disco duro, la unidad de CD, la unidad de DVD, la memoria USB, etc.
El Explorador de Windows también es conocido como el Administrador de Archivos, a través de
él podemos ver, eliminar, copiar o mover archivos y carpetas.
Puedes abrir el Explorador de varias formas, por ejemplo:
Hacer clic en el programa en la barra de tareas.
Pulsando las teclas rápidas Windows + E.
El Explorador en definitiva es una ventana que contiene a su izquierda todas las carpetas del
sistema en orden jerárquico. Por lo que cualquier acceso a una carpeta nos remitirá a él. La diferencia entre
acceder desde una carpeta u otra será simplemente los archivos que visualizaremos en la ventana. Por ejemplo,
si accedemos pulsando Equipo, veremos los dispositivos y si accedemos desde la opción Imágenes, veremos
nuestra biblioteca de imágenes personales.
El Explorador es una ventana que se utiliza constantemente, puesto que todos nuestros
documentos están en él. Puede ser recomendable anclarlo al menú Inicio o a la barra de tareas.
Crear carpetas
6
En ocasiones nos puede resultar útil crear una carpeta para organizar los archivos. Hay distintas
formas de hacerlo.
Para crear una carpeta, primero hay que situarse en el lugar donde deseamos crearla,
luego hacer clic en el botón Nueva carpeta.
Podremos observar una nueva carpeta que tiene como nombre Nueva Carpeta, este es el
nombre que Windows les aplica por defecto a las carpetas que creamos, en el caso de encontrar otra carpeta
con ese nombre la llamará Nueva Carpeta (2), Nueva Carpeta (3), así sucesivamente.
El nombre de la carpeta se puede cambiar. Cuando la creamos vemos el nombre en azul y en estado
de edición, eso significa que podemos escribir directamente su nombre. Para
aceptar el nuevo nombre o el propuesto por Windows, podemos hacer clic
sobre la ventana, en cualquier parte excepto en la nueva carpeta o pulsar las
teclas ESC o ENTRAR.
Otra forma de crear una carpeta es situarse en el lugar que se quiere crear la
carpeta y pulsar el botón derecho del ratón, se abrirá un menú contextual, elegir la
opción Nuevo y luego la opción Carpeta. Esta opción es muy útil, porque nos permite
crear carpetas cuando la barra de herramientas no está disponible, por ejemplo, en los
cuadros de diálogo Guardar en ciertas aplicaciones.
Eliminar archivos y carpetas
A la hora de eliminar, trataremos de la misma forma los archivos (documentos, accesos directos,
imágenes, etc.) y las carpetas. Aunque sí debemos de tener en cuenta que si borramos una carpeta, también se
borrarán todos los archivos y subcarpetas que contenga.
Para eliminar un elemento podemos:
Seleccionar el archivo o carpeta y pulsar el botón Organizar. Escoger la opción Eliminar.
Pulsar el botón derecho del ratón sobre él y, en el menú contextual, elegir la opción Eliminar. Si
queremos eliminar más de un elemento, primero deberemos seleccionarlos y hacer el clic derecho sobre
cualquiera de los elementos seleccionados.
Otra forma de eliminar es seleccionar los documentos a eliminar y pulsar la tecla Supr (Del).
Al intentar eliminar el documento aparece un cuadro de diálogo preguntándonos si estamos seguros
de que queremos eliminar el elemento.
Cuando eliminamos una carpeta o un archivo, por defecto Windows lo moverá a la Papelera de
reciclaje. La papelera de reciclaje no es más que un espacio reservado en el disco duro para que en caso de
haber eliminado algún elemento que nos era necesario podamos recuperarlo. Una vez vaciemos la papelera
ya no podremos recuperar los archivos.
Si no queremos que lo mande a la papelera y preferimos borrar el elemento permanentemente,
podemos pulsar la tecla especial Mayúsculas (Shift) cuando eliminamos el archivo, es decir, a la vez que
pulsamos Eliminar en el menú o la tecla Supr. Nos aparecerá un cuadro de diálogo similar al de la imagen
anterior, pero sin el dibujo de la papelera y con la frase: ¿Está seguro de que desea eliminar el archivo de
forma permanente?
Ruta completa o absoluta: Es la ruta desde la unidad hasta la carpeta o archivo al que nos referimos.
Por ejemplo: C:\Windows\system32\StikyNot sería la ruta hasta las notas rápidas.
Ruta relativa: Es la ruta que depende de dónde estemos situados. Se obvia la información desde la
unidad hasta la carpeta donde estamos situados. Por ejemplo, si en un ejercicio estamos situados en la
carpeta Windows sería más sencillo que referenciemos a las notas rápidas con su ruta relativa: \system\
StikyNot que indicar la ruta completa.
Aplicando conocimientos.
Crear una carpeta para la siguiente página WEB, con el nombre de HTML 2… , dentro de
esta crear 3 carpetas más con el nombre de videos, Imágenes, audio y animaciones.
Dentro de cada carpeta con 3 archivos respectivos en cada una.
ETIQUETA Video
La etiqueta vídeo incrusta un vídeo en una <video controls>
página web, dentro de la etiqueta se debe <source src="multimedia/tortola.mp4"
6
type="video/mp4">
especificar la fuente del vídeo mediante la Formato de vídeo no soportado.
etiqueta source, por ejemplo: </video>
Aplicando conocimientos.
Crear una página con 3 párrafos y 3 videos, la página debe de llevar el nombre de índex con
un nombre distinto como titulo
Cuestionario
¿Qué es el Explorador de Windows?
6
¿Para qué se utiliza este complemento de etiqueta <source src="multimedia/tortola.mp4"
type="video/mp4">
¿Qué hace la siguiente etiqueta <video controls muted loop autoplay >?
ETIQUETA Video 2
POSTER
Este atributo permite colocar una imagen como portada del vídeo, es decir, cuando se cargue el vídeo y
antes de empezar a reproducirse aparecerá la imagen que indiquemos en lugar de la primera imagen
(frame) del vídeo.
WIDTH Y HEIGHT
Indican la anchura y altura del vídeo en pixels. Si no se especifican, por defecto, estos atributos toman los
valores originales del vídeo
Vídeos de YouTube
Buscar el video relacionado en YouTube y dar clic en el botón compartir y después en el objeto Integrar y
la ventana resultante copiar el código, pegarlo en el block de notas
6
<iframe width="560" height="315"
src=https://www.youtube.com/embed/XA9cRa_yOOg?
controls=”0”; rel=”0”;star=”3”
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-
media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Etiqueta <audio>
Para reproducir <audio controls src="multimedia/audio_prueba.mp3" >
sonido disponemos Audio no soportado </audio>
de la etiqueta audio.
Cuestionario 2° Trimestre
Explique con que acción realiza este código:
1. <video controls poster="graficos/poster_video.png">
<source src="multimedia/tortola.mp4">
type="video/mp4"> Formato de vídeo no soportado.
</video>
¿Qué significa este código:?
2. <source src="multimedia/tortola.mp4">
6
Que etiqueta se utilizaría para que la imagen y el video se muestren del mismo tamaño.
5.
¿Cuál es el primer paso para integrar un video de YouTube en una página WEB?
6.
¿Que botón se utiliza para integrar el video de Youtube a nuestra página?
7.
Tablas
Las tablas nos permiten organizar la información en filas y columnas. Cada
fila se divide en celdas. La información se introduce en las celdas. Una columna está
formada por las celdas agrupadas verticalmente, en HTML no existe una etiqueta para
definir columnas. Las tablas se definen en base a las filas y a las celdas, como veremos
a continuación.
Inicialmente las tablas se crearon para introducir información en forma
tabular como, por ejemplo, las ventas de coches por años y marcas. En cada celda se
colocan las ventas de un año y una marca, en las filas tenemos los años y en las columnas las diferentes
marcas.
Sin embargo, los diseñadores de páginas web empezaron a utilizarlas para definir la estructura de
la página ya que era la forma más fácil de distribuir el espacio con las etiquetas disponibles en los comienzos
de la web.
6
<tr>
<td>Celda 1.1.</td> Celda 1.1.
</tr>
</table>
Ejercicio 1 Tabla B…
No existe una etiqueta para definir las columnas, en su lugar, el número de celdas define el
número de columnas. Todas las filas deben tener el mismo número de celdas.
Dado que es muy común que las tablas tengan una primera fila de cabecera se creó la etiqueta
<th>. Esta etiqueta se aplica a las celdas de cabecera en lugar de la etiqueta td y el efecto fundamental
es que tiene un formato diferente, normalmente letra negrita y alineación centrada. Como ya sabemos,
este formato se puede cambiar con las hojas de estilo. La etiqueta <th> se puede colocar tanto en las
filas como en las columnas.
<table>
Produce este resultado:
<tr>
<th>Marcas</th>
<th>Seat</th> Marca
Seat Ford BMW
<th>Ford</th> s
<th>BMW</th>
</tr> 2016 23900 21500 11500
<tr>
<th>2016</th> 2017 24600 23500 13400
<td>23900</td>
<td>21500</td>
<td>11500</td>
</tr>
<tr>
<th>2017</th>
<td>24600</td>
6
<td>23500</td>
<td>13400</td>
</tr>
</table>
Actividad 1 Tabla C
Crear una tabla, el nombre del archivo será Actividad 1 Tabla C…., el cual debe de tener el título
Béisbol Mexicano con la siguiente forma:
Equipo Acerero Bravos Algodonero
s s s
1960 102456 583542 152348
1970 154789 654824 152364
1980 158625 259634 256348
Actividad 2 Tabla
Cuaderno MOLESK MUJI LEUCHTTU
s INE RM
1960 $12.00 $13:20 $12.50
1970 $14.60 $15.50 $15.00
1980 $20.00 $30.00 $25.00
El archivo llevara el nombre de Actividad 1 Tabla …., con el título de Marcas de Cuadernos con a
las siguientes características.
6
Formato de tablas
Como vemos, por defecto, las tablas no tienen borde. Podemos manejar los bordes desde las hojas
de estilo. Con las siguientes etiquetas y atributos de las misma.
<table border>
<tr>
table border, <td>Celda</td>
Se agregaran borde en <td>Celda</td>
<td>Celda</td>
todas las celdas <td>Celda</td>
</tr>
<table border=”10”>
table border="10" <tr>
Agrega un borde exterior <td>Celda</td>
<td>Celda</td>
de tamaño dependiente <td>Celda</td>
al numero <td>Celda</td>
</tr>
El atributo "rules", podemos especificar las líneas de división entre las celdas.
Los valores posibles son los siguientes:
all: Muestra líneas de división entre todas las filas y columnas
none: No muestra ninguna línea de división. Este es el valor por defecto
rows: Sólo mostrará líneas de división entre filas
cols: Sólo mostrará líneas de división entre columnas
6
<td>Celda 2</td> <td>Celda 2</td>
<td>Celda 2</td> <td>Celda 2</td>
<td>Celda 2</td> <td>Celda 2</td>
<td>Celda 2</td> <td>Celda 2</td>
</tr> </tr>
<table border=10
style="width:100%"
>
<tr>
<td>Celda 1</td>
style="width:100% <td>Celda 1</td>
<td>Celda 1</td>
" <td>Celda 1</td>
Muestra la tabla a </tr>
pantalla completa. <tr>
<td>Celda 2</td>
<td>Celda 2</td>
<td>Celda 2</td>
<td>Celda 2</td>
</tr>
En las etiquetas TH y TR se puede agregar texto, imágenes y videos, con todas las
etiquetas y atributos de las tablas.
Hiperenlaces
Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos. Son un elemento muy
común en cualquier página web, de hecho, podríamos decir que el hiperenlace o hipertexto es la instrucción o
etiqueta más importante del lenguaje HTML.
Hiperenlaces. Definición
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, ...
Un hiperenlace tiene dos partes fundamentales, el destino y el elemento que activa el enlace. Vamos
a explicarlo sobre el siguiente ejemplo.
La forma más usual de utilizar la etiqueta <a> es para enlazar con otra página web mediante un
texto:
Aprende Idiomas
El código correspondiente es este:
<a href="https://www.wattpad.com/?locale=es_ES">Aprende Idiomas</a>
El elemento que activa el enlace es el texto Aprende Idiomas que al ser pulsado nos lleva
al destino del hiperenlace. El destino se indica con el atributo href que en este caso es una dirección de
internet (URL). Al colocar el cursor en el texto del hiperenlace el cursor toma la forma de una mano para
indicarnos que se trata de un hiperenlace. Si hacemos clic con el botón derecho aparecerá un menú contextual
con varias opciones (Abrir en una pestaña nueva, Guardar enlace, ...). En los dispositivos táctiles, al no
existir cursor, el comportamiento es diferente. No hay forma de saber si un texto contiene un enlace hasta que
demos una pulsación corta, con lo cual se activará; o demos una pulsación larga para que aparezca el menú
contextual.
(aquí) También es frecuente que el elemento que activa el enlace sea una imagen, como en el
siguiente ejemplo: