COLEGIO INMACULADO CORAZON DE MARIA

MISIONERAS CLARETIANAS
Bogotá D.C.
ÁREA DE ÉNFASIS

ÁREA DE ÉNFASIS EN INFORMÁTICA GRADO

MODULO DE TRABAJO Nº 1
PRIMER PERIODO - Febrero 1 a Abril 10 9°

ESTUDIANTE: _________________________________ CÓDIGO: ____ CURSO: _____

DOCENTE: ANDRES DIAZ PORRAS

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
1
 COMPETENCIAS INSTITUCIONALES GRADO NOVENO

NIVELES DE DESEMPEÑO DE LAS COMPETENCIAS

COMPETENCIAS COGNITIVO METACOGNITIVO

INTERPRETATIVO ARGUMENTATIVO PROPOSITIVO METACRÍTICO

CELEBRATIVA - MISIONERA Distingue e identifica las Analiza casos donde confronta Reestructura su propuesta Analiza su proceso de
Usar y proponer soluciones tecnologías de la los principios y valores concreta de vida frente a reconocimiento e
tecnológicas en pro de su información y la claretianos, sus actuaciones y los valores y principios interiorización de los
propio bien y el de su comunicación y las utiliza los hechos para presentar claretianos y su proyección valores humano –
comunidad vivenciando los vivenciando los valores posibles soluciones ante personal de acuerdo a lo cristiano – claretianos
valores adquiridos. claretianos con los demás problemáticas científicas aprendido en el énfasis de para retroalimentar su
y haciendo el bien en su actuales. Informática. proceso de desarrollo
comunidad. humano.
COMUNICATIVA Comprende la necesidad Expone, explica y expresa los Propone alternativas de Reflexiona sobre la
Comprender la necesidad del de usar adecuadamente el principios y procesos de la solución de problemáticas importancia de la
lenguaje formal informático lenguaje informático para programación que le permiten sobre diseños básicos incorporación de
para describir, enlazar y realizar programas y desarrollar operaciones y para la web integrando lenguajes de etiquetas
construir algoritmos lógicos realizar puentes de emplearlos en el desarrollo de tecnologías html. y lenguajes de
frente a situaciones comunicación entre varios soluciones para la web. programación para el
problemáticas planteadas. programas. diseño web.
ECOLÓGICO - AMBIENTAL Identifica el impacto Declara y sintetiza las Plantea la aplicación de las Reevalúa sus
Reconocer, apropiarse y ambiental generado por la características y los valores pautas para la proyectos y los de los
utilizar adecuadamente las tecnología y los problemas que deben tener el individuo conservación, protección y demás presentados
herramientas tecnológicas éticos, culturales y sociales que se especializa en una mejoramiento del medio por los diferentes
para fortalecer una conciencia si no se le da el uso disciplina como la informática y ambiente por medio de la énfasis para evaluar
ética en la conservación, adecuado. su compromiso con la tecnología. las aplicaciones en la
protección y mejoramiento del naturaleza y su entorno. conservación,
ambiente. protección y
mejoramiento del
medio ambiente.
CIENTÍFICO – Entiende los diversos Sustenta sus explicaciones por Anticipa problemas que Construye proyectos
TECNOLÓGICA códigos y lenguajes medio del funcionamiento puedan surgir en un como páginas web y
Usar la tecnología para necesarios para diseñar y correcto y la explicación planteamiento lógico de animaciones con
localizar, recoger y evaluar construir páginas web coherente de programas programación. diferentes tecnologías
información de una variedad de estáticas y dinámicas. desarrollados bajo un lenguaje informáticas y los
fuentes, para procesar datos, de programación. autoevalúa y socializa
comunicar resultados y diseñar junto con los
proyectos orientados a la web. compañeros.
CRÍTICO – CREATIVA Interpreta, evalúa y Argumenta mediante modelos Plantea pautas de trabajo Reflexiona sobre los
Efectuar lecturas de los últimos reflexiona sobre las descriptivos, lógicos o frente a problemáticas que puntos de vista
avances en tecnología que se propuestas innovadoras y matemáticos, en forma crítica e relacionan hechos planteados y la
relacionen con las temáticas avances tecnológicos que innovadora situaciones científicos y tecnológicos. innovación realizada
abordadas en la estructura se presentan actualmente teóricas o experimentales. en el desarrollo de las
curricular. en su medio. actividades
tecnológicas.
SOCIO – HISTÓRICA Relaciona acontecimientos Explica la influencia social y Analiza las causas y Reflexiona sobre la
Investigar los procesos que científicos – tecnológicos cultural para el avance o consecuencias que para la importancia del aporte
han marcado el desarrollo de la con procesos sociales y estancamiento de la ciencia y sociedad tendría el mal de la tecnología e
ciencia y la tecnología, y la culturales inmersos en una la tecnología. uso e inadecuado manejo informática en el
incidencia de los mismos en el época específica. de los conocimientos desarrollo y avance de
avance social, político, técnico -científicos. las sociedades.
económico y cultural de la
humanidad en pro una
formación de una conciencia
ética y política.

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
2
 NIVELES E INDICADORES DE DESEMPEÑO DE LAS COMPETENCIAS

CONCEPTOS Y COMPETENCIAS Proceso Cognitivo: Saber y Saber Hacer Proceso

Período

CONTENIDOS BÁSICOS Metacognitivo:

Saber Ser

Interpretativo Argumentativo Propositivo Metacritico

REPASO DE HTML5 Y DESARROLLAR Aplica los Construye Reflexiona

Cambia el
CSS3 PROYECTOS diferentes nuevos sobre la
aspecto de las
UTILIZANDO elementos vistos elementos a importancia de
páginas web
• Estructura HTML 5 en el desarrollo partir de la incorporación
TODOS LOS
Primero

mediante la
• Vínculos y tablas web. conceptos de lenguajes de
CONCEPTOS implementación
• CSS3 previos. etiquetas y
PREVIOS, de hojas de
lenguajes de
CUMPLIENDO CON estilo y marcos.
programación
EL ESTÁNDAR W3C para el diseño
web.

RECURSOS:

1. Bibliografía Libros de Referencia y Textos:

• Carballeiro, G. (2020). Diseño web con HTML y CSS: Manuales Users (Spanish Edition).
Redusers.
• Nixon, R. (2019). Aprender PHP, MySQL y JavaScript (Spanish Edition). MARCOMBO
S.A.

2. Bibliografía Interactiva:

• E. (2018, 16 julio). La teoría del color | estudio de arte collado mediano. escuela de arte
collado mediano. http://www.escueladeartecollado.com/un-repaso-a-la-teoria-del-color/

• Mora, S. L. (s. f.). HTML5 y CSS3: 4 Conceptos Básicos de CSS. HTML. Recuperado 17
de octubre de 2020, de http://desarrolloweb.dlsi.ua.es/cursos/2011/html5-css3-
es/conceptos-basicos-css

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
3
 RECORDEMOS CONCEPTOS BÁSICOS DE HTML

Pasos para crear una página:

• Lo primero es crear un directorio donde va a guardarse toda la información que vamos a

utilizar.
• Abrir un editor de texto (notepad, kwrite).
• Escribir el código fuente.
• Guardar la página en el directorio de página Web colocándole el nombre que se desee
pero con la extensión .html

ACTIVIDAD 1.

1. Escribe mínimo 30 etiquetas de HTML en el cuaderno, su significado

y sintaxis.
2. Crea una página donde implementes al menos 15 etiquetas

TÍTULOS DE NIVEL Y ESTILOS TIPOGRÁFICOS

En HTML pueden presentarse títulos de nivel que empiezan en letra de tamaño grande y en
negrita y de manera gradual reducen el tamaño y el grosor. Para hacer títulos de nivel se
utilizan las etiquetas <H1> hasta <H6>, que sirven para:

<H1>: Permite escribir un título en letra grande y en negrita; define un título de primer nivel.
<H2>: La letra es más pequeña y menos gruesa, define un título de segundo nivel.
<H3>, <H4>, <H5> y <H6>: Definen títulos de tercero, cuarto, quinto y sexto nivel.

Cada etiqueta debe cerrarse con su correspondiente etiqueta </H1>…</H6>.

Otro aspecto importante en la escritura de páginas WEB son los estilos tipográficos; estos son
algunos con su respectivo efecto:

ALINEACIÓN DE TEXTOS

La alineación del texto puede controlarse con la programación HTML. A menos que se
especifique, todos los elementos del documento se alinean a la izquierda, con el margen derecho
sin alinear. Muchos documentos se ven bien de este modo; sin embargo, para tener una página
COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS
Prohibida su reproducción total o parcial
2021
4
diferente, puede elegirse una alineación a la izquierda, a la derecha o centrada.

Algunos visualizadores soportan las etiquetas <LEFT> (izquierda) y <RIGTH> (derecha), que
funcionan del mismo modo que <CENTER> (centrado). Sin embargo, las versiones más recientes
reconocen ALIGN =, en lugar de <LEFT> y <RIGHT>. Se sugiere usar ALIGN = dentro de la
etiqueta de párrafo <P>, y de la etiqueta de título de nivel <HJ>.

ACTIVIDAD 2.

. Diseñar una página web de temática libre donde se aplique las siguientes
características: Fondo en color o imagen, título principal (H1) y aplicación de
los demás tipos de título, textos en negrilla, cursiva, subrayado, imágenes
con borde alineadas en las diferentes posiciones, párrafos con diferentes
colores y tipos de letra.

VÍNCULOS

En una página WEB pueden colocarse uno o más vínculos para hacer contacto con otra página,
con una gráfica, con un sonido, con un video, con un lugar, con un servidor de correo, con un
buzón electrónico y con cada uno de los servicios que ofrece Internet a través de la página WEB.

El texto vinculado permite que, al hacer clic, en una palabra, frase o imagen, pueda irse a otro
archivo o alguna parte de la página. Esta cualidad se conoce con el nombre de hipertexto. El
texto vinculado aparece en otro color y subrayado, de acuerdo con las especificaciones de
preferencias del visualizador.

Las etiquetas de HTML que se encargan de crear vínculos son <A> y </A>. la etiqueta <A> es un
poco diferente de las demás: no se utiliza sola, hay que insertarle el URL con el que se desea
vincular.

<A HREF = “URL”>.

HREF: Hypertext Referente (referencia de Hipertexto).

ENLACE A OTRO LUGAR DEL MISMO DOCUMENTO

En este caso la URL se sustituye por un marcador en la misma página. El marcador puede ser
texto colocado en el lugar al que queremos saltar. No importa lo que sea ya que no se verá.
Veamos un ejemplo para saltar al inicio de esta página. Escribiríamos en el lugar desde el que
queremos saltar:

<A HREF="#inicio"> Ir al Inicio</A>

Y en el sitio exacto adonde queremos saltar, debemos poner la siguiente etiqueta:
<A NAME="inicio"> </A>
Una vez escrito esto y guardada la página veríamos al abrirla con el Navegador
COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS
Prohibida su reproducción total o parcial
2021
5
ENLACE A OTRA PÁGINA LOCAL
En este caso la URL se dará de forma relativa (igual que para poner un fondo a la página). Por
ejemplo, si tenemos dos páginas en el mismo directorio pagina1.html y pagina2.html y
queremos poner un enlace desde la pagina1.html a la pagina2.html debemos escribir:

<a href="pagina2.html">Ir a pagina2</a>

Con esto es suficiente, no hay que crear ningún marcador a no ser que quieras ir a un sitio
concreto de la pagina2.html. En ese caso tendrías que poner en el sitio adonde quieres llegar
de la pagina2.html

<a name="sitio"></a>
y en la pagina1.htm
<a href="pagina2.htm#sitio>Ir a sitio de la página 2</a>

ENLACE A UNA DIRECCIÓN DE INTERNET

Ahora la URL debe darse de forma absoluta, tal como la ves en la ventana de dirección del
navegador, es decir:

<A HREF="http://centros4.pntic.mec.es/ies.de.cistierna">IES Cistierna</A>

ACTIVIDAD 3.

Diseñar y crear una página web con las siguientes características:

• El tema: Marcas de computadores portátiles

• Fondo: gris claro
• Color del texto: rojas
• Una lista (Viñetas) con dada una de las marcas y estas deben tener un
enlace dentro de la misma página donde hablen de las características de
éstos y la imagen.
• Imágenes con bordes y modificarlas en alto y ancho

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
6
 ACTIVIDAD 4.

1. Cree una página y realice un listado en forma de viñetas de 5 aparatos

tecnológicos modernos que usted utilice en su vida cotidiana.

2. A cada uno de estos inventos añada un vinculo que lo dirija hacia otra
pagina en donde se encuentra su ubicación y explicación respectiva . Cada
aparato debe tener una explicación de por lo menos 10 líneas.

TABLAS

Las tablas son parte de los documentos HTML y organizan información en una matriz o cuadricula
de filas y columnas. Cada intercepción entre una fila y una columna se conoce como celda.

Una celda puede contener textos o gráficas, pero no otras tablas. Para organizar el texto dentro
de una celda se utilizan listas. El texto y la gráfica dentro de una celda también pueden ser
vínculos.

Las partes básicas de una tabla son: Titulo, Encabezado y Filas de celdas. Las tablas se
ensamblan celda por celda, una fila horizontal que empieza por la esquina superior izquierda
hasta la esquina inferior derecha. Cada celda debe contener alguna información; por ello utiliza
espacios en blanco para crear celdas vacías.

HTML permite controlar el ancho de una tabla y de cada una de sus celdas. Pues a menos
especificación del ancho, la tabla se despliega hasta abarcar la ventana del visualizador, al igual
que el texto normal. Esto quizá no plantee problemas si la tabla es angosta. Sin embargo, cuando
la tabla es demasiado ancha para la ventana, aparecerá en la pantalla de manera inadecuada,
afectando el diseño y la legibilidad.

El ancho de la tabla se controla de dos maneras: por píxeles o por porcentajes. Cuando se
controlan por píxeles, las tablas siempre tendrán el mismo ancho. Cuando se controlan por
porcentajes, las tablas siempre tendrán la misma proporción.
Una tabla básica

Las tablas se usan con profusión en las páginas Web, muchas veces debido a que son el único
instrumento con el que se cuenta, para asegurarse que las cosas estarán en su sitio.

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
7
Para definir una tabla se usan las etiquetas:

<TABLE> y </TABLE> son las etiquetas donde está contenida la tabla

<TR> y </TR> son las etiquetas que indican el comienzo y fin de una fila (<th> y </th> si es una
fila de cabecera)
<TD> y </TD> señalan una celda.

La tabla se va definiendo declarando una fila y a continuación las celdas que contiene esa fila,
luego otra fila y sus celadas, etc. No es necesario que todas las filas contengan el mismo número
de celdas.

Ejemplo:

La tabla (2x2) más sencilla que podemos hacer es la siguiente

Digita este código y veras el resultado.

<TABLE >
<TR>
<TD>1 </TD> <TD> 2 </TD>
</TR> <TR>
<TD>3 </TD> <TD> 4</TD>
</TR>
</TABLE>

ATRIBUTOS DE LA ETIQUETA TABLE

Todos los atributos son opcionales

• BORDER="4". Indica el tamaño del borde en píxels, en este caso 4. Si no se indica nada
carece de borde

• WIDTH="5" o WIDTH="50%". Es el ancho de la tabla, puede especificarse en valor

absoluto (5 píxels) o como un porcentaje (50% del ancho disponible)

• CELLSPACING="2". Es el espacio entre las celdas, por defecto es 2

• CELLPADDING="5". Es el espacio entre el contenido de las celdas y el borde de las

mismas, por defecto es 1

• ALIGN=" left", "right", "center". Alinea la tabla a la izquierda, derecha o en el centro.

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
8
Ejemplo:

Digita este código y veras el resultado.

<TABLE BORDER="3" CELLSPACING="5" WIDTH="150">

<TR>
<TD>1 </TD> <TD> 2 </TD>
</TR> <TR>
<TD>3 </TD> <TD> 4</TD>
</TR>
</TABLE>

ATRIBUTOS DE LAS ETIQUETAS DE FILA Y CELDA

Las etiquetas que soportan las filas y las celdas son

• WIDTH="30". Ancho de toda la fila o celda. También se puede dar en %

• ALIGN=" left", "right", "center". Alinea el contenido a la izquierda, derecha o centro
• VALIGN="top”, "middle" o "bottom". Alinea el contenido verticalmente arriba, en
medio o abajo
• BGCOLOR="#AACCEE". Pone un fondo del color especificado a la celda o fila
• COLSPAN=3. Especifica el número de columnas que abarca la fila
• ROWSPAN=2. Especifica el número de filas que abarca la columna

Ejemplo:

Fíjate en la etiqueta TH, que sustituye a TR, resalta su contenido con negrita, por eso se usa
para los títulos

Digita este código y veras el resultado.

<TABLE BORDER="3" CELLSPACING="5" WIDTH="200">

<TH COLSPAN=2 BGCOLOR="#6D8FFF> Este es el título</TH>
<TR align="center">
<TD>Esta es la celda de la 1ª fila y de la 1ª columna</TD>
<TD> Esta es de la 1ª fila y de la 2ª columna</TD>
</TR>
<TR BGCOLOR="#6D8FFF>
<TD>Esto está con un fondo azul</TD>
<TD align="right" valign="bottom">Y esto también</TD>
</TR>
</TABLE>

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
9
 ACTIVIDAD 5.

Realizar una pagina web sobre los 10 famosos inventores y diseñar una tabla
donde este en la primera columna los nombre de ellos, la segunda columna
los inventos y la tercera columna el año del invento.

ACTIVIDAD 6.

1. Realizar una página de tema libre donde se implemente el concepto de

marcos.

2. Investigar sobre formularios en HMTL5 y aplicarlos a la pagina web

anterior

HOJAS DE ESTILO EN CASCADA

CSS
Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe
cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a
ser pronunciada la información presente en ese documento a través de un dispositivo de lectura.
Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y
formato de sus documentos.
Ya se han visto algunas formas para darle formato al texto y otros elementos de la página con
HTML, pero son formas limitadas, porque nunca se pretendió convertir este lenguaje en un
programa de diagramación de página. El estándar de W3C para las hojas de estilo en cascada
ofreció nuevas técnicas de formateado para muchos programadores y diseñadores de la Web.
Aunque las CSS no son parte del HTML, trabajan con este para brindar más control sobre la
diagramación y la presentación de las páginas Web. Por ejemplo, si quiere que en cada sitio en
donde aparezca el nombre de una compañía todos los títulos de nivel 2 (h2) tengan un tamaño
de 14 puntos y sean en fuente Verdana, azul e itálicas, se necesitarían 3 etiquetas HTML y tres
atributos. Con las CSS, usted puede darle instrucciones al navegador para presentar todas las
etiquetas h2 de una manera particular, haciendo que, de ese modo, la codificación de la página
sea mucho más limpia y clara. También se podría establecer que todas las etiquetas h2 en todas
las páginas del sitio se presenten en la misma forma, reduciendo de ese modo la cantidad de
trabajo que tiene que hacer, lo mismo que facilitar el mantenimiento de las páginas.

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
10
Existen 3 estilos para aplicar las hojas de estilo:

1. EN EL RENGLÓN: Se crearon dentro del HTML de la página. Las declaraciones en el

renglón están entre paréntesis angulares usando el atributo Style.
<h2 style=”font-family: verdana”>
Se pueden separar múltiples reglas con signos de punto y coma, pero la declaración
completa debe incluirse dentro de comillas.
<h2 style=”font-family: verdana; color: #003366”>
Los estilos en el renglón son mejores para hacer cambios rápidos en una página, pero no
están adaptados para hacer cambios en un documento completo o en un sitio Web.

2. INTERNAS: Cuando quiere cambiar el estilo de todas las etiquetas h2 en una página,
puede usar una hoja de estilo interna o incorporada. En lugar de agregar el atributo style
a una etiqueta, use la etiqueta style que contiene todas las instrucciones para la página.
La etiqueta style se pone en el encabezado de la página, entre las etiquetas head de cierre
y apertura.

<HEAD>
<TITLE>ejemplo CSS</TITLE>
<style type=”text/css”>
h2 {font-family: verdana; color: red}
</style>
</HEAD>

Este juego de reglas puede estar en una sola línea o dividido en múltiples, como en el
siguiente ejemplo:
h2
{font-family: verdana; color: red}

3. EXTERNAS: En esencia, una hoja de estilo externa contiene la misma información que
una interna, salvo que está dentro de su propio archivo de texto y después se hace
referencia dentro de la página web. Las hojas de estilo externas no usan la etiqueta o el
atributo de estilo, sino que simplemente incluyen un listado de juegos de reglas para el
navegador. Una vez que cree su hoja de estilo externa, guárdela como archivo de texto
con la extensión .css Ejemplo: archivo.css

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
11
 Después regrese a su archivo HTML y agregue la etiqueta link al encabezado de la página
para hacer referencia a la hoja de estilo externa, como en el siguiente ejemplo:
<HEAD>
<title>usar una hoja de estilo externa</title>
<link rel=”stylesheet” type=”text/css” href=”archivo.css”>
</HEAD>

CLASES UNIVERSALES

En ocasiones, es posible que no quiera que todas las etiquetas de la página quedan de la misma
forma y quizás desee dividirlas en dos categorías. Con las clases universales podría especificar
que las etiquetas h2 de la primera mitad de la página queden en verdana, 12 puntos, italica y
azul, y que las etiquetas h2 en la segunda mitad queden en verdana, 12 puntos, itálica y rojo.

.blue { font-family: verdana;

color:blue;
font-style:Italic;
font-size:12pt

.red { font-family: verdana;

color:red;
font-style:Italic;
font-size:12pt

Después, usted hace referencia a la clase agregando el atributo class a su etiqueta h2 cada vez
que quiera que aparezca en su página html.

<h2 class=”red”>este encabezado es rojo.</h2>

<h2 class=”blue”>este encabezado es azul.</h2>

Tras hacer esto, también podría aplicar la clase rojo a un párrafo completo, dándole a la
etiqueta p de ese párrafo el atributo class.

<p class=”red”> este parrafo esrojo.</p>

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
12
NUESTRA PRIMERA PÁGINA CON CSS:

<html>
<head>
<title>Mi Primera Página</title>
</head>
<style type="text/css">
body{
color=#ffffff;
background=#009966;
fount-family=arial;
}
</style>
<body>
HOLA MUNDO
</body>
</html>

Ya esta, ya has creado tu primera página Web con CSS.

COLOR

Cuando especifique el color en un valor, puede hacerlo en una de tres maneras:

• Codigo hexadecimal, como #000000.

• Valores RGB, como rgb (0,0,0) ó rgb (0%,0%,0%)
• Una de las 16 palabras clave predefinidas que son: aqua, black, blue, fuchsia, gray, green,
lime, maroon, navy, olive, red, purple, silver, teal, white, yellow.

PORCENTAJE

Los porcentajes relativos pueden ser útiles en CSS cuando se usan para posicionar elementos
en una página. Esto se debe a que los porcentajes permiten que los elementos se muevan,
dependiendo del tamaño de la pantalla y de la ventana. Cuando se usa en CSS un signo de
porcentaje (%), después de un valor numérico, como en 100%, indica que existe una relación
entre los elementos circundantes.

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
13
ACTIVIDAD 7.

CREAR UNA HOJA DE ESTILO EXTERNA

1. Abra su editor de texto y cree un nuevo archivo con el nombre
estilos.css.

2. Con h1 como su selector, especifique lo siguiente:

• Use una fuente sans-serif de 16 puntos
• Cambie el texto a negrilla
• Cambie el color por uno claro

3. Con h2 como su selector, especifique lo siguiente:

• Use una fuente sans-serif de 14 puntos
• Cambie el texto a negrilla
• Cambie el color a uno oscuro

4. Con p como su selector, especifique lo siguiente:

• Use una fuente de 12 puntos
• Indente la primera línea de cada parrafo en 25 pixeles.

5. Use una clase universal llamada “séalos” y especifique lo siguiente:

• Use una fuente sans-serif de 12 puntos
• Utilice el amarillo como color de fondo

6. Guarde el archivo

7. Abra su archivo HTML

8. Agregue la etiqueta link al encabezado de la página para hacer referencia a

la hoja de estilo externa que acaba de crear (estilos.css).

9. Guarde el archivo.

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
14
 CONTENIDOS BÁSICOS
DISEÑO WEB

El diseño web es una actividad que consiste en la planificación, diseño e implementación de sitios
web y páginas web. No es simplemente una aplicación del diseño convencional, ya que requiere
tener en cuenta cuestiones tales como navegabilidad, interactividad, usabilidad, arquitectura de
la información y la interacción de medios como el audio, texto, imagen y vídeo. Se lo considera
dentro del diseño multimedial.

La unión de un buen diseño con una jerarquía bien elaborada de contenidos aumenta la eficiencia
de la web como canal de comunicación e intercambio de datos, que brinda posibilidades como el
contacto directo entre el productor y el consumidor de contenidos, característica destacable del
medio.

El diseño web ha visto amplia aplicación en los sectores comerciales de Internet especialmente
en la World Wide Web. Asimismo, a menudo la web se utiliza como medio de expresión plástica
en sí. Artistas y creadores hacen de las páginas en Internet un medio más para ofrecer sus
producciones y utilizarlas como un canal más de difusión de su obra.

DISEÑO WEB APLICADO

El diseño de páginas web trata básicamente de realizar un documento con información
hiperenlazado con otros documentos y asignarle una presentación para diferentes dispositivos
de salida (en una pantalla de computador, en papel, en un teléfono móvil, etc).

Estos documentos o páginas web pueden ser creadas:

➔ Creando archivos de texto en HTML.

➔ Utilizando un programa WYSIWYG o WYSIWYM de creación de páginas.
COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS
Prohibida su reproducción total o parcial
2021
15
 ➔ Utilizando lenguajes de programación del lado servidor para generar la página web.

ETAPAS

Para el diseño de páginas web debemos tener en cuenta tres etapas:

➔ La primera es el diseño visual de la información que se desea editar. En esta etapa se

trabaja distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos
multimedia que se consideren pertinentes. Es importante que antes de trabajar sobre el
computador se realice un bosquejo o prediseño sobre el papel. Esto facilitará tener un
orden claro sobre el diseño.

➔ La segunda, una vez que se tiene este boceto se pasa a 'escribir' la página web. Para esto,
y fundamentalmente para manejar los vínculos entre documentos, se creó el lenguaje de
marcación de hipertexto o HTML. Los enlaces que aparecen subrayados en este
documento y otros de Wikipedia son ejemplos de hipertexto, puesto que al pulsar sobre
ellos conducen a otras páginas con información relacionada.

➔ La tercera, etapa consiste en el posicionamiento en buscadores o SEO. Ésta consiste en

optimizar la estructura del contenido para mejorar la posición en que aparece la página en
determinada búsqueda.

El HTML consta de una serie de elementos que estructuran el texto y son presentados en forma
de hipertexto por agente de usuario o navegadores. Esto se puede hacer con un simple editor de
textos (debe guardarse como texto plano, sin ningún tipo de formato y con extensión .html o .htm).
Aprender HTML es relativamente fácil, así que es sencillo crear páginas web de este modo. Esta
era la única manera de generarlas hasta que aparecieron, a mediados de 1996, algunos editores
visuales de HTML, como MS FrontPage y Adobe Dreamweaver. Con estas herramientas no es
necesario aprender HTML (aunque sí aconsejable), con lo cual el desarrollador se concentra en
lo más importante, el diseño del documento.

ACTIVIDAD 1.

1. Leer Conceptos Básicos y realizar un resumen en el cuaderno.

2. Investigar en que consiste el marketing digital.
3. Investigar la psicologia del color.

HTML
HTML (Hyper Text Markup Language) es un lenguaje que se utiliza para la creación de páginas
Web. Es muy fácil de usar y está basado en lo que se llaman etiquetas (o tags, en ingles), las
etiquetas definen la forma del documento HTML.
COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS
Prohibida su reproducción total o parcial
2021
16
Las páginas WEB revolucionaron el mundo Internet; ahora es más sencillo acceder a bases de
datos, a bibliotecas y a lugares remotos. También es posible visualizar, mediante una
presentación multimedial, en la mayoría de los casos, la imagen de una institución educativa o
comercial.

Gracias a Internet y a los navegadores del tipo Explorer, Mozilla, Firefox o Netscape, el HTML se
ha convertido en uno de los formatos más populares que existen para la construcción de
documentos. HTML no define la página como lo hacen algunos lenguajes de programación,
definiendo cada elemento gráfico y su posición en la página. Esto incluye las fuentes, el tamaño
de la letra, los colores de pantalla, el grosor de las líneas, el texto y los elementos gráficos,
tampoco su colocación exacta; solo etiqueta el contenido de un archivo con ciertos atributos, que
después interpreta el visualizador utilizado para leerlo. Es como una persona que escribe a mano
un memorando y coloca breves comentarios en algunas secciones para indicarle a quien lo lea
como realizar actividades específicas.
Las etiquetas HTML determinan atributos tipográficos; insertan archivos de gráficas, sonidos y
video en el texto, y crean vínculos de hipertexto y formularios. El hipertexto es la capacidad mas
importante del lenguaje HTML; significa que cualquier parte del texto o de la gráfica puede
vincularse con otro documento HTML.

REQUISITOS BÁSICOS PARA GENERAR UNA PAGINA WEB

Para escribir una página WEB se requieren algunos recursos, según lo que desee hacerse; ellos
son:

SOFWARE HARDWARE
• Procesador de texto, porque los • Computador que pueda ejecutar un
archivos de HTML son de esta índole. procesador de texto y un visualizador.
• Visualizador para interpretar las Aunque si quieren hacerse páginas con
marcas HTML y dar formato en la sonido, con animaciones y con video, el
pantalla. equipo debe estar acondicionado con
• Graficadores para editar y crear tarjeta de sonido y tarjeta de video.
archivos gráficos. • MODEM para ejecutar las páginas que
• Editores de sonido para crear y editar interactúan en la WEB.
archivos de sonido.

FUNDAMENTOS DE PROGRAMACIÓN EN HTML

Los documentos HTML constan de dos partes:

El encabezado y el cuerpo. Ambos utilizan elementos de código llamados etiquetas, que dan
formato al texto, vinculan archivos, insertan gráficas y tablas y crear formularios para ingresar
información.
COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS
Prohibida su reproducción total o parcial
2021
17
La forma estandar de escribir las etiquetas es en mayúsculas. Sin embargo, la mayor parte de
los visualizadores funcionan con etiquetas escritas en mayúsculas, en minúsculas y con una
combinación de ambas.
La mayor parte de las etiquetas en HTML deben ser escritas en parejas, una de inicio y otra de
cierre, así:

<ETIQUETA> texto afectado por la instrucción. </ETIQUETA>

La etiqueta de cierre se reconoce por la diagonal (/) antes del nombre de la etiqueta.

Un archivo de HTML siempre empezara con la etiqueta <HTML>, que debe escribirse en la parte
superior del archivo. Esta etiqueta le indica a cualquier visualizador WEB que intente leer el
archivo que está enfrentado con un archivo que contiene código HTML. Así mismo, la última línea
del documento siempre será la etiqueta </HTML>, que puede considerarse el fin de la página
HTML.

Las siguientes etiquetas sirven para dividir el documento en dos secciones:

encabezado y cuerpo.

El encabezado: es una introducción a la página y para definirlo solo se requieren las

etiquetas <HEAD> y </HEAD> debajo de la etiqueta <HTML>.

El cuerpo: es donde se inserta el texto, las gráficas y los vínculos que aparecerán en
la página WEB, y para definirlo se colocan las etiquetas <BODY> y </BODY>
después de la sección encabezado (abajo de la etiqueta </HEAD>), como se
muestra a continuación:

<HTML>
<HEAD>
<TITLE>Título de la página</TITLE
</HEAD>
<BODY>
Aquí iría el contenido de la página
</BODY>
</HTML>

El título es el nombre general de la página. Al observase la página con un visualizador, el titulo

aparecerá en la barra de título del visualizador.

ETIQUETAS BÁSICAS
• <HTML>: Es la etiqueta que define el inicio del documento HTML, le indica al navegador
que todo lo que viene a continuación debe tratarlo como una serie de códigos HTML.

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
18
 • <HEAD>: Define la cabecera del documento HTML, esta cabecera suele contener
información sobre el documento que no se muestra directamente en el navegador. Como
por ejemplo el título de la ventana de su navegador. Dentro de la cabecera

• <HEAD>: podemos encontrar: <TITLE>: Define el título de la página. Por lo general, el título
aparece en la barra de título encima de la ventana.

• <LINK>: para definir algunas características avanzadas, como por ejemplo las hojas de
estilo (CSS) usadas para el diseño de la página, ejemplo : <link rel="stylesheet" href="/style.css"
type="text/css">

• <BODY>: Define el contenido principal o cuerpo del documento, esta es la parte del
documento Html que se muestra en el navegador, dentro de esta etiqueta pueden definirse
propiedades comunes a toda la página, como color de fondo y márgenes. Dentro del
cuerpo <BODY> podemos encontrar numerosísimas etiquetas. A continuación, se indican
algunas a modo de ejemplo:

o <H1>, <H2>,... <H6>: Encabezados o títulos del documento en diferentes tamaños de

fuente.
o <P>: Parrafo nuevo.
o <marquee>: En esta etiqueta tendremos un texto en movimiento que va de derecha
a izquierda de la pantalla.
o <BR>: salto de línea forzado.
o <TABLE>: comienzo de una tabla (las filas se identifican con <TR> y las celdas dentro
de las filas con <TD>
o <A>: Indica la existencia de un hipervínculo o enlace, dentro o fuera la página Web.
Debe definirse el parámetro de pasada por medio del atributo href ejemplo:
<a href="www.google.es">Google</a> se representa como Google
o <DIV>: comienzo de un área especial en la página
o <IMG>: indica la existencia de una imagen para mostrarse en el navegador

NOTA: Es importante tener en cuenta que se debe cerrar cada una de las etiquetas que se abrió,
pero adicionándole un “/”, de la siguiente manera:
<script> … </script>

ACTIVIDAD 2.

Crear una página web con las siguientes características (en el cuaderno):
Titulo: Nombre del estudiante
Título de la página: Mi Primera Pagina
Escribir un resumen sobre el Diseño Web en mínimo 2 párrafos.

CREANDO UNA PÁGINA

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS
Prohibida su reproducción total o parcial
2021
19
Lo primero que se debe hacer es crear un directorio o carpeta para dejar todos los archivos e
imágenes que vamos a utilizar en la página Web.

Pasos para crear una página:

✔ Abra su editor de texto (notepad, kwrite).
✔ Generar el código fuente.
✔ Guarde la página en su directorio de página Web. Recordar que la extensión de del
archivo debe ser .html (ejemplo zonas.html)

Digitar el siguiente código y seguir los pasos anteriores para generar la primera pagina web
En este ejercicio vamos a darle el nombre de: Actividad1.html

<HTML>
<HEAD>
<TITLE>
ESTUDIANTE
</TITLE>
<BODY><CENTER>DISEÑO WEB</CENTER>
… Aqui van los parrafos...
</BODY>
</HEAD>
</HTML>

Ahora ya solo queda ver como ha quedado la página. Si usas Firefox (linux) en el directorio donde
guardaste tu primera página Web, luego has doble clic sobre el documento Actividad1.html que
creaste. Luego se abrirá tu navegador y mostrará tu página.

ACTIVIDAD 3.
1. Investigar las siguientes etiquetas del manejo de texto. Copiarlas en el
cuaderno.
• Titulos (H1, H2, H3...)
• Estilos, Tamaño, Tipos y Color de Fuentes
• Parrafos y Bloques

2. Etiqueta para insertarle color al cuerpo de las paginas

3. Tabla de colores para utilizar en el diseño de páginas web.

MANEJO DE GRÁFICOS
COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS
Prohibida su reproducción total o parcial
2021
20
Los visualizadores pueden desplegar imágenes gráficas junto con el texto, para que los
documentos se vean mejor y comuniquen información que sería muy difícil transmitir con
palabras.

Las gráficas se insertan con la etiqueta <IMG SRC = “nombre de archivo gráfico”> ejemplo
<IMG SRC = “pepito.gif” )>. Debemos recordar que las imagenes que se insertan en una página
web debe estar dentro del directorio donde se encuentra la imagen.
Ejemplo: <IMG SRC = C:\Imagenes”pepito.gif” >

No todos los visualizadores leen todos los formatos de archivo. Por eso se recomienda usar el
formato .GIF para guardar los archivos gráficos por cuanto pueden leerlo la mayor parte de los
visualizadores gráficos.

En el diseño de páginas WEB, uno de los problemas es el tiempo que tardan en cargarse las
imágenes. Una forma de reducir el tiempo de recuperación es incluyendo las dimensiones Width
(ancho) y High (alto), como parte de la etiqueta <IMG>. Las dimensiones Width y High, que se
miden en píxeles, le indican al visualizador el tamaño de la imagen, sin necesidad de copiar todo
el archivo gráfico. Conociendo las dimensiones, el visualizador bloquea el espacio requerido,
establece el formato del documento, presenta el texto y carga la gráfica.

Ejemplo: <IMG SRC = C:\Imagenes\”pepito.gif” width="28" height="21">

ACTIVIDAD 4.

Diseñar una página web con las siguientes caracteristicas:

• Título de la Página: La naturaleza

• Título: Animales Salvajes centrado y en mayuscula
• Color del Fondo: Verde claro
• Definir los plumiferos e insertarle imagenes alineadas a la derecha e
izquierda.
• El texto debe ir alineado al contrario de la imagen
• La imagen debe tener bordes.
• Cambiar el tamaño de la imagen (alto y ancho)

LISTAS
Con frecuencia se usan listas en los documentos. El lenguaje HTML incorpora unas listas con
viñetas sencillas o también letras o números. Para dar más vistosidad a las páginas, se suelen
emplear también imágenes que se colocan delante de cada párrafo. Vamos a ver algunas de las
posibilidades que tenemos.

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
21
He aquí el ejemplo más sencillo de una de estas listas:

ESCRIBIMOS EN HTML SE VERÁ COMO :

<ul> • Primer término de la lista
<li>Primer término de la lista • Segundo término
<li>Segundo término • Tercer término

<li>Tercer término
</ul>

Como ves, la lista se declara con la etiqueta <UL> y finaliza con el cierre de la misma </UL>.
También podemos modificar las viñetas por medio del atributo TYPE= circle, disc o square
(círculo, disco o cuadrado) y añadir sublistas.

ESCRIBIMOS EN HTML SE VERÁ COMO

<ul>
<li type= disc>Primer término de la lista • Primer término de la lista
<ul> • Sublista
<li>Sublista ◦ Otro elemento
<li>Otro elemento • Segundo término
</ul> • Tercer término
<li type=circle>Segundo término
<li type=square>Tercer término
</ul>

LISTAS CON VIÑETAS ORDENADAS

Estas listas se caracterizan porque aparecen números o ciertos caracteres que ordenan sus
elementos. La etiqueta usada es <OL> junto con su correspondiente de cierre </OL>. El atributo
TYPE toma ahora los valores 1, a, A, i, I. Un ejemplo de estas listas es el siguiente

ESCRIBIMOS EN HTML SE VERÁ COMO

<ol type=i> i. Primer término de la lista
<li >Primer término de la lista ii. Segundo término
<li >Segundo término iii. Tercer término
<li>Tercer término iv. Cuarto
<li>Cuarto v. Quinto
<li>Quinto
</ol>

ACTIVIDAD 5.
COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS
Prohibida su reproducción total o parcial
2021
22
 Basados en la pagina creada en la actividad No. 4 vamos a insertarle listas:

• Animales acuaticos
• Animales terrestres
• Animales carroñeros
• Aminales carnivoros
• Animales Herviboros.

VÍNCULOS

En una página WEB pueden colocarse uno o más vínculos para hacer contacto con otra página,
con una gráfica, con un sonido, con un video, con un lugar, con un servidor de correo, con un
buzón electrónico y con cada uno de los servicios que ofrece Internet a través de la página WEB.

El texto vinculado permite que al hacer clic en una palabra, frase o imagen, pueda irse a otro
archivo o alguna parte de la página. Esta cualidad se conoce con el nombre de hipertexto. El
texto vinculado aparece en otro color y subrayado, de acuerdo con las especificaciones de
preferencias del visualizador.

Las etiquetas de HTML que se encargan de crear vínculos son <A> y </A>. la etiqueta <A> es un
poco diferente de las demás: no se utiliza sola, hay que insertarle el URL con el que se desea
vincular.

<A HREF = “URL”>.

HREF: Hypertext Referente (referencia de Hipertexto).

ENLACE A OTRO LUGAR DEL MISMO DOCUMENTO

En este caso la URL se sustituye por un marcador en la misma página. El marcador puede ser
texto colocado en el lugar al que queremos saltar. No importa lo que sea ya que no se verá.
Veamos un ejemplo para saltar al inicio de esta página. Escribiríamos en el lugar desde el que
queremos saltar:

<A HREF="#inicio"> Ir al Inicio</A>

Y en el sitio exacto adonde queremos saltar, debemos poner la siguiente etiqueta:
<A NAME="inicio"> </A>
Una vez escrito esto y guardada la página veríamos al abrirla con el Navegador

ENLACE A OTRA PÁGINA LOCAL

En este caso la URL se dará de forma relativa (igual que para poner un fondo a la página). Por
ejemplo, si tenemos dos páginas en el mismo directorio pagina1.html y pagina2.html y
queremos poner un enlace desde la pagina1.html a la pagina2.html debemos escribir

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
23
 <a href="pagina2.html">Ir a pagina2</a>

Con esto es suficiente, no hay que crear ningún marcador a no ser que quieras ir a un sitio
concreto de la pagina2.html. En ese caso tendrías que poner en el sitio adonde quieres llegar
de la pagina2.html

<a name="sitio"></a>
y en la pagina1.htm
<a href="pagina2.htm#sitio>Ir a sitio de la página 2</a>

ENLACE A UNA DIRECCIÓN DE INTERNET

Ahora la URL debe darse de forma absoluta, tal como la ves en la ventana de dirección del
navegador, es decir:

<A HREF="http://centros4.pntic.mec.es/ies.de.cistierna">IES Cistierna</A>

ACTIVIDAD 6.

Diseñe una página web en donde se organice en forma de viñetas una lista
de los personajes más famosos de la historia del siglo XIX al XXI. A cada uno
de estos personajes tendrá que crearle un vínculo y su respectiva página con
su respectiva biografía.

ACTIVIDAD 7.

Diseñe una página web en donde se incluya todo lo visto hasta ahora sobre
los 10 mejores inventos para el futuro tecnológico.

COLEGIO INMACULADO CORAZÓN DE MARÍA – MISIONERAS CLARETIANAS

Prohibida su reproducción total o parcial
2021
24