ACTIVIDADES
TEMA 2
ACTIVIDAD 1: estructura de una página web
• Crea una página web llamada pá[Link]
• Crea la estructura de una página web básica
• Pon un título en la cabecera
• Pon tu nombre y apellidos en el cuerpo de la página
• Inserta algo de contenido (tu nombre y apellido, aficiones…)
• Comprueba el resultado
• Entrega en Moodle
ACTIVIDAD 2: texto y colores
• Responde el cuestionario que tienes en Moodle centros llamado “Actividad 2”
ACTIVIDAD 3: imágenes
• Crea una página web llamada pá[Link]
• Crea la estructura de una página web básica
• Pon un título en la cabecera
• Pon tu nombre y apellidos en el cuerpo de la página
• Descarga las fotos para esta actividad
• Inserta la imagen [Link]
• Inserta la imagen [Link] de la carpeta fútbol
• Inserta la imagen [Link]
• Inserta de nuevo la imagen [Link] pero con tamaño 200x300
• Inserta de nuevo la imagen [Link] centrada con las esquinas redondeadas
• Inserta de nuevo la imagen [Link] alineada a la derecha con una descripción
• Comprueba el resultado
• Entrega en Moodle
• A partir de esta actividad debes recordar que hay que hacer una estructura de
carpetas cuando insertas contenido en tu página (imágenes, iconos,
documentos…), por lo que deberás hacer un comprimido de la carpeta y
entregarla entera para que no se pierda nada por el camino 😉
ACTIVIDAD 4: imágenes de fondo
• Crea una página web llamada pá[Link]
• Crea la estructura de una página web básica
• Pon un título en la cabecera
• Pon tu nombre y apellidos en el cuerpo de la página
• Necesitamos que la página tenga mucho scroll, por lo que deberán insertar
muuuuchoooossss <br/>
• Inserta una imagen de fondo (recuerda que se inserta en la etiqueta body)
• Indica un color de fondo para tu página
• Contesta en el cuadro de texto…
o ¿Puedes ver el color de fondo? ¿Puedes ver la imagen? Una de las dos no se ve… ¿Por
qué?
o ¿Tiene sentido usar las dos propiedades simultáneamente?
o ¿Qué propiedad se usa para definir que la imagen de fondo aparezca una sola vez sin
repetirse?
o ¿Con qué parámetros podemos indicar que la imagen de fondo se vea en el centro
de la página (tanto horizontal como vertical)?
o ¿Qué sucede con la imagen y el texto de tu página si la imagen está centrada y
hacemos scroll?
o Modifica la imagen para que siempre se vea la imagen pese al scroll
• Comprueba el resultado a medida que pruebas
• Entrega en Moodle las respuestas en el cuadro de texto y tu [Link] adjunta
ACTIVIDAD 5: enlaces
• Crea una página web llamada pá[Link]
• Crea la estructura de una página web básica
• Pon un título en la cabecera
• Pon tu nombre y apellidos en el cuerpo de la página
• Usa la página para insertar el código de las siguientes cuestiones
• Contesta las siguientes preguntas en el cuadro de texto
o ¿Qué es una página local? Indica un ejemplo
o ¿Qué es una página remota? Indica un ejemplo
o ¿Qué se indica en HREF?
o ¿Qué ocurre si no se cierra la etiqueta A?
o El texto sensible de un enlace es el texto en el que podemos hacer clic… haz que la
palabra aquí tenga un enlace a Google en la siguiente frase y que se abra en una
pestaña nueva: Haz clic aquí para ir a Google.
o Crea un documento PDF y haz un enlace en tu página para que se abra
o Crea un enlace a la web del ayuntamiento en color rojo
o Usa la imagen del escudo del equipo de fútbol para acceder a la web del Granada CF
o Crea un enlace LOCAL y un enlace EXTERNO a los recursos que quieras
• Crea la estructura de carpetas de la siguiente imagen en tu disco local (usa tu nombre).
• Descarga un icono de una carpeta, de una imagen, de un favicon y de un documento HTML.
• Crea una página web llamada [Link] y guárdala en la carpeta con tu nombre.
• Guarda en la misma carpeta el icono favicon que te has descargado y llámalo [Link]
• Crea y coloca en la carpeta portfolio 3 páginas html
• Haz 2 copias del icono de la imagen, llámalos [Link] y [Link]. Guárdalos en la
carpeta imágenes
• Haz 2 copias del icono del favicon, llámalos [Link] e [Link]. Guárdalos en la carpeta
iconos
• Deberá tener algo así como la estructura de la imagen:
• Edita la pagina [Link] y replica la imagen anterior…
o Inserta los iconos (imagen, carpeta, html) y los textos de la imagen, con el espaciado
necesario para crear la estructura de carpetas que se muestra (de forma aproximada,
puedes usar guiones ----- y barras |||| para simular las líneas)
o Usa los textos (portfolio, proyecto, iconos, etc.) para crear enlaces locales a los
recursos de tus carpetas y que al hacer clic sobre ellos se abran
[Link]
• Comprueba el resultado a medida que pruebas
• Entrega en Moodle las respuestas en el cuadro de texto y tu [Link] adjunta. Haz un
comprimido de la carpeta con tu nombre y adjúntala también
ACTIVIDAD 6: anclas
• Crea una página web llamada pá[Link]
• Crea la estructura de una página web básica
• Pon un título en la cabecera
• Pon tu nombre y apellidos en el cuerpo de la página
• Copia el siguiente texto en tu página:
Formalización y características del contrato de trabajo
¿Quién tiene capacidad para contratar?
Las personas mayores de edad (18 años).
Los menores de 18 años legalmente emancipados.
Las personas mayores de 16 y menores de 18:
Si viven de forma independiente con el consentimiento expreso o tácito de sus padres o tutores.
Si tienen autorización de los padres o de quien los tenga a su cargo.
Los extranjeros de acuerdo con la legislación que les sea aplicable.
Forma del contrato
El contrato de trabajo puede celebrarse por escrito o de palabra. Deberán constar por escrito los contratos de trabajo cuando así lo exija
una disposición legal, y en todo caso, los de prácticas y para la formación y el aprendizaje, los contratos a tiempo parcial, fijos-
discontinuos y de relevo, los contratos para la realización de una obra o servicio determinado, los de los trabajadores que trabajen a
distancia y los contratados en España al servicio de empresas españolas en el extranjero. Igualmente constarán por escrito los contratos
por tiempo determinado cuya duración sea superior a cuatro semanas. De no observarse tal exigencia, el contrato se presumirá celebrado
por tiempo indefinido y a jornada completa, salvo prueba en contrario que acredite su naturaleza temporal o el carácter a tiempo parcial
de los servicios. Cualquiera de las partes podrá exigir que el contrato se celebre por escrito, incluso durante el transcurso de la relación
laboral.
Duración del contrato
El contrato de trabajo puede concertarse por tiempo indefinido o por una duración determinada, en los supuestos legalmente previstos.
Período de prueba
Su establecimiento es optativo y de acordarlo deberán fijarlo por escrito en el contrato. Su duración máxima se establecerá en los
convenios colectivos y en su defecto la duración no podrá exceder de: Seis meses para los técnicos titulados. Dos meses para el resto de
los trabajadores. En las empresas con menos de 25 trabajadores, el período de prueba no podrá exceder de tres meses para los
trabajadores que no sean técnicos titulados. En el supuesto de los contratos temporales de duración determinada del artículo 15 del
Estatuto de los Trabajadores concertados por tiempo no superior a seis meses, el periodo de prueba no podrá exceder de un mes, salvo
que se disponga otra cosa en convenio colectivo. Durante el período de prueba la persona trabajadora tendrá los mismos derechos y
obligaciones correspondientes al puesto de trabajo que desempeñe como si fuera de plantilla, excepto los derivados de la resolución de la
relación laboral que podrá producirse a instancia de cualquiera de las partes durante su transcurso. Durante este período se podrá
rescindir la relación laboral por voluntad de cualquiera de las partes sin alegar causa alguna y sin preaviso, salvo pacto en contrario. La
resolución a instancia empresarial será nula en el caso de las trabajadoras por razón de embarazo, desde la fecha de inicio del embarazo
hasta el comienzo del período de suspensión a que se refiere el artículo 48.4, o maternidad, salvo que concurran motivos no relacionados
con el embarazo o maternidad. El período de prueba se computa a efectos de antigüedad. La situación de incapacidad temporal,
nacimiento, adopción, guarda con fines de adopción, acogimiento, riesgo durante el embarazo, riesgo durante la lactancia y violencia de
género, que afecten a la persona trabajadora durante el periodo de prueba, interrumpen el cómputo del mismo, siempre que se produzca
de acuerdo entre las partes. Será nulo el pacto que establezca un período de prueba cuando el trabajador haya desempeñado las mismas
funciones con anterioridad en la empresa, bajo cualquier modalidad de contratación.
Información a los trabajadores
El empresario, cuando la relación laboral con el trabajador sea superior a cuatro semanas, deberá informarle sobre los elementos
esenciales del contrato de trabajo y las principales condiciones de ejecución de la prestación laboral, de forma escrita y en el plazo de dos
meses a contar desde la fecha de comienzo de la relación laboral. No será necesario facilitar nuevamente la información que ya figure en
el contrato formalizado por escrito que obre en poder del trabajador. Están excluidas de tal obligación las relaciones laborales especiales
de los penados en instituciones penitenciarias y la de los menores internos incluidos en el ámbito de aplicación de la Ley Orgánica 5/2000,
de 12 de enero, reguladora de la responsabilidad penal de los menores. Los aspectos que deben recogerse son los siguientes: Con carácter
general La identidad de las partes del contrato de trabajo. La fecha de comienzo de la relación laboral y, en caso de que se trate de una
relación laboral temporal, la duración previsible de la misma. El domicilio social de la empresa o, en su caso, el domicilio del empresario y
el centro de trabajo donde el trabajador preste sus servicios habitualmente. Cuando el trabajador preste sus servicios de forma habitual
en diferentes centros de trabajo o en centros de trabajo móviles o itinerantes se harán constar estas circunstancias. El grupo profesional
del puesto de trabajo que desempeñe el trabajador o la caracterización o la descripción resumida del mismo, en términos que permitan
conocer con suficiente precisión el contenido específico del trabajo. La cuantía del salario base inicial y de los complementos salariales, así
como la periodicidad de su pago. La duración y la distribución de la jornada ordinaria de trabajo. La duración de las vacaciones y, en su
caso, las modalidades de atribución de determinación de dichas vacaciones. Los plazos de preaviso que, en su caso, estén obligados a
respetar el empresario y el trabajador en el supuesto de extinción del contrato o, si no es posible facilitar este dato en el momento de la
entrega de la información, las modalidades de determinación de dichos plazos de preaviso. El convenio colectivo aplicable a la relación
laboral, precisando los datos concretos que permitan su identificación.
En los supuestos de prestación de servicios en el extranjero
Cuando la prestación de servicios en el extranjero fuera superior a cuatro semanas, el empresario deberá dar, además de la información
de carácter general indicada anteriormente, la información adicional siguiente con anterioridad a su partida al extranjero: La duración
del trabajo que vaya a prestarse en el extranjero. La moneda en que se pagará el salario. Las retribuciones en dinero o en especie, tales
como dietas, compensaciones por gastos o gastos de viaje, y las ventajas vinculadas a la circunstancia de la prestación de servicios en el
extranjero. En su caso, las condiciones de repatriación del trabajador. Sin perjuicio de lo anterior, respecto de algunos de los extremos
señalados, será suficiente una referencia a las disposiciones legales, reglamentarias o convenio colectivo aplicable, siempre que esta sea
precisa y concreta y permita al trabajador el acceso a la información correspondiente Cuando la relación laboral se extinguiera antes del
transcurso de los plazos indicados, con independencia de si los servicios se prestan en el ámbito nacional o extranjero, el empresario
deberá facilitar la información antes de la extinción del contrato de trabajo.
Derecho de información de los representantes legales de los trabajadores en materia de contratación
Una copia básica de los contratos que deban formalizarse por escrito, a excepción de los contratos de relaciones especiales de alta
dirección, para los que es suficiente su notificación, debe ser entregada en el plazo de diez días a los representantes legales de los
trabajadores, quienes la firmarán a efectos de acreditar que se ha producido la entrega. Igualmente se les notificarán en el mismo plazo
las prórrogas de dichos contratos, así como las denuncias de los mismos. La copia básica contendrá todos los datos del contrato, a
excepción del número del documento nacional de identidad o del número de identidad de extranjero, domicilio, estado civil y cualquier
otro que pudiera afectar a la intimidad personal del interesado. Dicha información estará a disposición de los representantes legales de
los trabajadores, a través de los órganos de participación institucional de los mismos en los correspondientes Servicios Públicos de
Empleo.
Comunicación de las contrataciones a los Servicios Públicos de Empleo
Los empresarios están obligados a comunicar a los Servicios Públicos de Empleo, en el plazo de los diez días hábiles siguientes a su
concertación, el contenido de los contratos de trabajo que celebren o las prórrogas de los mismos, deban o no formalizarse por escrito.
Dicha comunicación se realizará mediante la presentación de copia del contrato de trabajo o de sus prórrogas. También debe remitirse a
los Servicios Públicos de Empleo la copia básica de los contratos de trabajo, previamente entregados a la representación legal de los
trabajadores, si la hubiese. La comunicación del contenido de los contratos de trabajo o de sus prórrogas y el envío o remisión de las
copias básicas podrá efectuarse mediante la presentación en los Servicios Públicos de Empleo de copia de los contratos o de sus
prorrogas. También podrá comunicarse a través de medios telemáticos. (Ver a continuación epígrafe “Comunicación por medios
telemáticos"). Los Servicios Públicos de Empleo están obligados a incorporar a la base de datos del Servicio Público de Empleo Estatal,
compartida con dichos Servicios, todos los datos definidos como obligatorios por el Ministerio de Trabajo, Migraciones y Seguridad Social.
Los trabajadores podrán solicitar de los Servicios Públicos de Empleo información del contenido de los contratos en los que sean parte. Las
referencias efectuadas a los Servicios Públicos de Empleo se entenderán realizadas al Servicio Público de Empleo Estatal y a los
correspondientes Servicios Públicos de Empleo de las Comunidades Autónomas que hayan asumido el traspaso de la gestión realizada por
el Servicio Público de Empleo Estatal en el ámbito del trabajo, el empleo y la formación.
Comunicación por medios telemáticos. Contrat@
La comunicación de los datos a que se refiere el apartado anterior se podrá realizar por medios telemáticos por los empresarios o
personas o entidades que legalmente les representen. La utilización de los medios telemáticos la podrán realizar los sujetos obligados a
comunicar el contenido de la contratación laboral y las empresas y profesionales colegiados que ostenten la representación de las
empresas en cuyo nombre actúen. La autorización administrativa para el uso de medios telemáticos tendrá validez en todo el territorio
estatal y deberá contener los datos de la empresa contratante y los datos personales de su representante. La solicitud deberá resolverse
en un plazo máximo de quince días. La autorización concedida permitirá al autorizado realizar las comunicaciones sea cual fuere la
ubicación de los puestos de trabajo, y se mantendrá mientras duren las condiciones fijadas en la resolución de la concesión. La
comunicación por medios telemáticos se efectúa mediante la comunicación de la contratación on-line a través de la aplicación Contrat@.
Esta aplicación permite a los empresarios que actúan en nombre propio y a las empresas y profesionales colegiados que actúen en
representación de terceros, comunicar el contenido de la contratación laboral a los Servicios Públicos de Empleo desde su propio
despacho o sede profesional. A través de Contrat@ se pueden comunicar los datos de Contratos, Copias Básicas, Prórrogas, Llamamientos
de fijos discontinuos y Pactos de horas complementarias, y puede hacerse por una de las cuatro opciones disponibles: a través de la
comunicación de datos, a través del modelo de la comunicación, a través del envío de ficheros XML o a través de Servicios Web. La
utilización de este servicio requiere disponer de una Autorización de los Servicios Públicos de Empleo. Para ello se debe cumplimentar una
Solicitud de Autorización y presentarla con la documentación precisa en dichos Servicios Públicos. Una vez concedida la Autorización, se
podrá acceder a Contrat@ bien con Certificado Digital o DNI electrónico, o con el Identificador de la Empresa y la clave personal que se
asignó al realizar la solicitud.
• Como ves, el contrato tiene 9 apartados (9 títulos en negrita). Crea un menú bajo el título
del contrato (Formalización y características del contrato de trabajo) con los nombres de los 9
apartados.
• Desde cada elemento del menú, ponle un enlace que te lleve a cada sección
• Inserta una imagen de una flecha debajo de cada párrafo y alineada a la derecha
• Usa las flechas para volver arriba
• Comprueba el resultado a medida que pruebas
• Entrega en Moodle tu [Link] adjunta (no olvides que la flecha es una imagen y hay
que adjuntarla en su carpeta…).
ACTIVIDAD 7: párrafos
• Crea una página web llamada pá[Link]
• Crea la estructura de una página web básica
• Pon un título en la cabecera
• Pon tu nombre y apellidos en el cuerpo de la página
• Crea 4 párrafos (largos) usando el texto Lorem ipsum ([Link] Puedes
juntar varios para hacerlos más largos 😉.
• Aplica a cada párrafo las siguientes características:
Párrafo 1:
Fondo: color rojo
Texto: blanco y en negrita
Anchura: 500px
Alineación del texto: justificado
Bordes: arriba y abajo punteados, izquierda y derecha sólidos
Tamaño del borde: 3px
Color de los bordes: arriba y abajo negros, izquierda y derecha azules
Interlineado: 1.7
Padding: 20px
Párrafo 2:
Fondo: color celeste
Texto: azul oscuro
Anchura: 75%
Alineación del texto: derecha
Bordes: todos rayados
Tamaño del borde: 10px
Color de los bordes: arriba amarillo, derecha marrón, abajo: negro, izquierda rosa
Interlineado: 25px
Margin: 60px
Párrafo 3:
Fondo: gris claro
Texto: negro y en cursiva
Alineación del texto: centrado
Bordes: en 3D
Color de los bordes: todos negros
Margin: 20px
Padding: 15px
Párrafo 4:
Fondo: gris oscuro
Texto: blanco y en negrita
Alineación del texto: justificado
Bordes: sólidos redondeados 25px y 10px
Color de los bordes: negros 2px
• Utiliza el contenedor <span> para realizar una modificación en partes del texto de cada
uno de los párrafos. Puedes modificar el tipo de letra en uno de ellos, en otro el tamaño de
la letra, el color de fondo, etc.
• Comprueba el resultado a medida que pruebas
• Entrega en Moodle tu [Link] adjunta
ACTIVIDAD 8: listas
• Crea una página web llamada pá[Link]
• Crea la estructura de una página web básica
• Pon un título en la cabecera
• Pon tu nombre y apellidos en el cuerpo de la página
• Crea las siguientes listas en tu página en el orden que quieras:
• Comprueba el resultado a medida que pruebas
• Entrega en Moodle tu [Link] adjunta
ACTIVIDAD 9: tablas
• Crea una página web llamada pá[Link]
• Crea la estructura de una página web básica
• Pon un título en la cabecera
• Pon tu nombre y apellidos en el cuerpo de la página
• Crea una tabla con tu horario de clase. Une las celdas del recreo y aquellas que tienen varias
horas seguidas
• Crea las siguientes tablas:
• Comprueba el resultado a medida que pruebas
• Entrega en Moodle tu [Link] adjunta (recuerda que las imágenes hay que adjuntarlas
en su carpeta!)
ACTIVIDAD 10: formularios
• Crea una página web llamada pá[Link]
• Crea la estructura de una página web básica
• Pon un título en la cabecera
• Pon tu nombre y apellidos en el cuerpo de la página
• Inserta en tu página los siguientes elementos (indica qué insertas en cada caso) y cada
elemento en una fila:
o 4 botones: enviar, resetear y general y uno a partir de una imagen
o Una caja de texto de tamaño 50 pero con limitación de 15 caracteres
o Una caja de texto con un valor predeterminado
o Una caja de texto de tipo contraseña
o Selección de fecha
o Dos grupos de radio button que deben ser independientes entre sí
o Una lista desplegable con 4 opciones, una de ellas debe estar inhabilitada
o Un área de texto con los colores y tamaño modificados
▪ Dos formularios, cada uno con 2 campos y botón agrupados en un fieldset. El
formulario 1 debe recoger y enviar los datos por email y el formulario 2 debe
recoger y mostrar los datos por pantalla
• RECUERDA: Cada formulario debe tener su propio nombre y debes cerrar los formularios
Si no, no funcionarán…☹
• A continuación, crea el siguiente formulario, que deberá recoger los datos, validarlos y
enviarlos por email.
• Comprueba el resultado a medida que pruebas
• Entrega en Moodle tu [Link] adjunta
ACTIVIDAD 11: bloques, audio y video
• Crea una página web llamada pá[Link]
• Crea la estructura de una página web básica
• Pon un título en la cabecera
• Pon tu nombre y apellidos en el cuerpo de la página
• Crea una estructura con las etiquetas semánticas con contenidos que permita identificar
adecuadamente cada una de las zonas en las que se divide una página web en HTML 5.
• Aplica sobre ella los conocimientos adquiridos (colores de fondo, tipos de letra, párrafos,
imágenes, enlaces, listas, tablas…)
• Inserta un vídeo de YouTube, un mapa de Google Maps y un audio en tu página
• Comprueba el resultado a medida que pruebas
• Entrega en Moodle tu [Link] adjunta. Recuerda que si pones contenido local, debes
adjuntarlo en la estructura de carpetas correspondiente