1 de 12

Tecnología 3º ESO: Edición web
TEMA 4: INFORMACIÓN EN LA RED: PÁGINAS WEB
4.1.- CONCEPTOS BÁSICOS DE INTERNET
4.2.- CONTENIDOS DE UNA WEB
4.3.- SERVICIO FTP
4.4.- INSTRUCCIONES BÁSICAS EN HTML
4.5.- INSTRUCCIONES BÁSICAS PARA TABLAS XHTML
4.6.- INSTRUCCIONES BÁSICAS PARA FORMULARIOS
4.7.- INSTRUCCIONES BÁSICAS DE HOJAS DE ESTILO CSS
4.8.- EJEMPLOS DE PÁGINAS WEB
4.1.- CONCEPTOS BÁSICOS DE INTERNET
Servidor Web: equipo informático preparado para alojar en su disco duro páginas web públicas y
para atender peticiones de otras máquinas clientes mediante protocolo HTTP
Modem: periférico que sirve para conectar un ordenador a una red, tanto telefónica como de área
local. Es el componente físico que permite acceder a Internet.
Proveedor de servicios (ISP): suele ser una operadora de telefonía que ofrece servicios de
conexión a Internet. Estos incluyen el dar una dirección IP al ordenador (dar de alta) y otros servicios como
cuentas de correo electrónico, alojamiento de páginas web, etc.
En Internet, todos los ordenadores tienen su propia dirección IP con la cual se conectan. Las IP's
son cuatro bloques de ocho bits cada uno separados por un punto (cada bloque podría contar entre 0 y 255)
de forma que una dirección IP podría ser 192.132.34.35. Esto quiere decir que pueden existir 4.294.967.296
posibles dir IP.
Servidor DNS: Son servidores especializados en traducir las dir IP (p.e. 84.121.226.213) en
nombres de dominio (p.e. www.ono.com) y viceversa.
Dirección IP: Es un número asignado automáticamente a una máquina en el momento en que
solicita los servicios de conexión a un proveedor.
Protocolo informático es un conjunto de reglas estándar que utilizan los ordenadores para
comunicarse a través de Internet o de cualquier tipo de red. Es de dominio público y los más importantes
para nosotros son:
– TCP/IP: Es el protocolo base del funcionamiento de todos los servicios de Internet (correo,
páginas web, chats, descargas, streaming, etc), lo implementan todos los sistemas operativos y realiza dos
tareas: establece la identidad del ordenador en la red mediante una dirección IP y permite enviar y recibir
información por Internet.
– HTTP: Es un protocolo utilizado para enviar y recibir páginas web (es decir, implementa el
servicio World Wide Web, más conocido como www)
Una página web consiste en dos tipos de ficheros: por un lado, las imágenes y los gifs animados
que visualiza, y por otro, un fichero de extensión .html (normalmente el fichero index.html) con
instrucciones de cómo debe visualizarse dichas imágenes, del color o imágenes de fondo que han de verse,
del texto que debe aparecer, en qué lugar exactamente y con qué tabulado y, finalmente, las direcciones de
los enlaces que tiene dicha página. Todas estas instrucciones están escritas en lenguaje HTML, un lenguaje
que interpreta un programa instalado en nuestro ordenador llamado navegador web: programa que permite
leer la información de una página web, esté en un servidor web de Internet o un servidor web local.
1 de 12
Tecnología 3º ESO: Edición web
4.2.- CONTENIDOS DE UNA WEB
Contenidos web: Toda información en forma de texto, fotografías, audio o vídeo que presenta una
página web. Cada vez son más complejos y, por eso, el lenguaje en que se escriben las webs deben de ir
añadiendo nuevos elementos.
Hipertexto: es un fragmento de texto (palabra, conjunto de palabras, frase o párrafo) que conduce
a otro texto y que tiene relación con él. Es la base de las webs.
Lenguaje de programación: es un lenguaje con una sintaxis perfectamente definida que se utiliza
para controlar el funcionamiento de una máquina y, en concreto, de un ordenador. Para un site veremos los
siguientes:
HTML (HyperText Markup Language) Lenguaje de programación más utilizado en la
elaboración de páginas web, ya que define la estructura y el contenido de las mismas.
CSS (Cascade Style Sheets): Lenguaje usado conjuntamente con el HTML para definir la
presentación de una web escrita en este último. Se utiliza para separar la estructura de su presentación.
Javascript es otro lenguaje utilizado con HTML que permite mejoras en la interfaz de usuario que
no se consiguen con los anteriores.
Direccionamiento: es el modo que tiene un ordenador de acceder a un contenido dentro de una
estructura de carpetas anidadas. Hay dos tipos:
– absoluto: los contenidos se especifican partiendo de la carpeta raiz mostrando todas y cada una de
las carpetas por donde pasa hasta llegar a ellos
– relativo: los contenidos se especifican partiendo de la carpeta donde está el fichero html que
“invoca” dichos contenidos.
Sistema de colores: codificación que sirve para matizar los colores que queremos mostrar en una
página web y que utiliza dos cifras en código hexadecimal para cada uno de los canales de colores precedidas
del símbolo “#”. Hay dos tipos:
– RGB (Red, Green, Blue) que especifica la intensidad de tonalidades rojo, verde y azul. Es el
utilizado en las páginas web. Un ejemplo sería #5100ff.
– CMYK (Cyan, Magenta, Yellow, Black) que especifica la intensidad de tonalidades Cián,
Magenta, Amarillo y Negro. No se usa en las páginas web sino en edición de fotografía.
4.3.- SERVICIO FTP
El servicio WWW es un servicio que facilita Internet y que se puede realizar gracias al protocolo
HTTP pero se ha hecho tan famoso que la gente confunde este servicio con Internet. Internet es mucho más:
servicios de correo electrónico (y que utiliza los protocolos POP3 y SMTP), el servicio de transmisión de
archivos (protocolo FTP), las conversaciones en línea, telefonía y televisión por Internet, el acceso remoto a
otros dispositivos o los juegos en línea son algunos servicios. Todos estos protocolos funcionan utilizando
como base el TCP/IP.
FTP (File Transfer Protocol) es uno de los servicios que ofrece el protocolo TCP/IP para la
transferencia de archivos entre sistemas conectados a una red de manera que desde un equipo llamado cliente
uno puede conectarse a otro equipo llamado servidor para descargar archivos desde él o para enviarle
archivos, independientemente del sistema operativo utilizado en cada equipo (es lo que se llama arquitectura
cliente-servidor)
Un servidor FTP es un programa especial que se ejecuta en un equipo servidor normalmente
conectado a Internet (aunque puede estar conectado a otros tipos de redes). Su función es alojar datos en su
disco duro y permitir el intercambio de ficheros entre él y una máquina cliente.
2 de 12
Tecnología 3º ESO: Edición web
Por lo general, los programas servidores FTP no suelen encontrarse en los ordenadores personales,
por lo que un usuario normalmente utilizará el FTP para conectarse remotamente a uno y así intercambiar
información con él.
Las aplicaciones más comunes de los servidores FTP suelen ser el alojamiento web en el que sus
clientes utilizan el servicio para subir sus páginas web y sus archivos correspondientes; o como servidor de
backup (copia de seguridad) de los archivos importantes que pueda tener una empresa.
Cuando un navegador no está equipado con la función FTP, o si se quiere cargar archivos en un
ordenador remoto, se necesitará utilizar un programa cliente FTP. Un cliente FTP es un programa que se
instala en el ordenador del usuario, y que emplea el protocolo FTP para conectarse a un servidor FTP y
transferir archivos, ya sea para descargarlos o para subirlos.
Para utilizar un cliente FTP, se necesita conocer el nombre del archivo, el ordenador en que reside
(servidor, en el caso de descarga de archivos), el ordenador al que se quiere transferir el archivo (en caso de
querer subirlo nosotros al servidor), y la carpeta en la que se encuentra.
4.4.- INSTRUCCIONES BÁSICAS EN HTML
Etiquetas o Tags para la cabecera
1.- <HEAD> y </HEAD>
2.-<TITLE> </TITLE> : Para indicar el título de la página
3.- <STYLE TYPE=”text/css”> y </STYLE>: Para hojas de estilo CSS
4.- <LINK TYPE="text/css" rel="stylesheet" href="MiFichero.css"> Para llamar a un fichero externo de hojas
de estilo CSS
5.- <SCRIPT LANGUAJE=”Javascript”> y </SCRIPT> Para código en otro lenguaje de programación
Etiquetas o Tags para el body
1.- <BODY [BGCOLOR=”color”][BACKGROUND=”fichero.jpg”]
[TEXT=”color”] [LINK=”color”] [VLINK=”color”]> y </BODY>
2.- <B> </B> Para intensificar un determinado texto
3.- <I> </I> para escribir en cursiva
4.- <U></U> para escribir el texto subrayado
5.- <BR> para que el texto aparezca en la siguiente linea.
6.- <P ALIGN=”left|center|right”> y </P> establece la alineación del párrafo a la izquierda, centrado o a la
derecha según el parámetro)
7.- <! -- Comentarios -->
8.- <CENTER> y </CENTER> para centrar una parte de la página web
9.- <MARQUEE [direction=”dir”]> y </MARQUEE>
10.- <IMG SRC=”nombrefichero” ALT =”texto”> para poner una imagen de tipo .gif o .jpg y, de forma
alternativa, un mensaje de error
11.- <A HREF=”dir de otro documento” TARGET=”_blank”> </A> sirve para asignar a un trozo de texto un
enlace a otro documento de la red o hipervínculo.
12.- <A HREF =#NombreAncla> y </A> junto con la siguiente…
13.- <A NAME =NombreAncla> y </A> enlaces dentro del documento.
14.-<FONT [FACE="TipoLetra"] [SIZE="número"]> </FONT>
15.- <TABLE [WIDTH="%"] [BORDER="1"] [CELLSPACING="0"]>
<TR [ALIGN=”alineación > y </TR>
<TD [VALIGN=”alineación”]> y </TD>
16.- <UL> y </UL>, junto con <LI> Y </LI>
3 de 12
Tecnología 3º ESO: Edición web
Signos especiales:
 < (Menor que): <

" (comillas dobles): "

ñ: ñ;
 > (Mayor que): >

á: á

¿: ¿
 & (símbolo de and, o
ampersand): &

ü: ü

¡: ¡
4.5.- INSTRUCCIONES BÁSICAS PARA TABLAS XHTML
La estructura para crear una tabla es la siguiente:
<TABLE [WIDTH="95%"] [BORDER="1"] CELLSPACING="0"] >
<TR>
<TD >
</TD>
</TR>
</TABLE>
Y los parámetros a utilizar son los siguientes:
WIDTH: indica cuánto ancho de pantalla ocupará la página Web.
BORDER indica el grosor del borde de la tabla,
CELLSPACING el espacio entre las líneas de las celdas.
CELLPADDING el espacio entre el texto y las líneas de la celda
BACKGROUND: pone una fotografía de fondo en la tabla/fila/celda que se indique.
BGCOLOR: pone la tabla/fila/celda del color que se indique.
TR indica el comienzo y final de una fila (fila=arrow),
TD indica el comienzo y final de una celda (actúa a modo de columna)
ALIGN alineación horizontal de los datos dentro de las celdas. Puede tener tres valores: LEFT (izquierda),
RIGHT (derecha) y CENTER (centro).
VALIGN: Alineación vertical de los datos dentro de las celdas. Puede tener tres valores: TOP (arriba),
BOTTOM (abajo) y MIDDLE (centro).
ROWSPAN:se utiliza en la definición de una celda (<TD>) o cabecera (<TH>) e indica que su anchura o altura
son equivalentes a un determinado número de filas.
COLSPAN se utiliza en la definición de una celda (<TD>) o cabecera (<TH>) para indicar que su anchura o
altura son equivalentes a un determinado número de columnas.
TABINDEX=”<número>”, sirve para poder utilizar el tabulador en una serie de enlaces. Ejemplo:
<a tabindex=”1” href=”#uno”>enlace número 1</a><p>
4 de 12
Tecnología 3º ESO: Edición web
4.6.- INSTRUCCIONES BÁSICAS PARA FORMULARIOS
1.- <FORM ACTION=”mailto:dir_email“ METHOD=”POST”></FORM>
2.- <INPUT TYPE=”Text” NAME=”Un_nombre”>
3.- <INPUT TYPE=”Password” NAME=”Un_nombre” VALUE=””>
4.- <INPUT TYPE=”Radio” NAME=”Tipo” VALUE=”Un_nombre”>
5.- <INPUT TYPE=”Checkbox” NAME=”Tipo” VALUE=”on”>
6.- <TEXTAREA NAME=”Un_nombre” ROWS=”4” COLS=”30” [READONLY]> </TEXTAREA>
7.- <SELECT NAME=”Un_nombre”>
<OPTION> Nombre_de_Opción1
<OPTION> Nombre_de_Opción2
<OPTION> Nombre_de_Opción3
</SELECT>
8.- <INPUT TYPE=”Submit” NAME=”Enviar” VALUE=”Enviar”>
9.- <INPUT TYPE=”reset” NAME=”Un_nombre” VALUE=”Un_nombre” >
10.- <INPUT TYPE=”button” NAME=”Un_nombre” VALUE=”Un_nombre” ONCLICK=”Nombre_JavaScript”>
11.- <INPUT TYPE="button" VALUE="Back" ONCLICK="window.location='/página a la que quieres volver'">
donde NAME es el nombre de la variable donde se guarda el valor y
VALUE es el valor que se asigna a la variable
Excepciones:
 en reset, submit y button, VALUE es el nombre del botón
 en radio, todas las casillas de opción que pertenezcan a la misma opción deben lleva mismo NAME y
distinto VALUE
El correo que se recibe lleva escrito una línea como esta
ValorNAME=VALUE
separados entre si por una interrogación
4.7.- INTRUCCIONES BÁSICAS DE HOJAS DE ESTILO
Página con fichero css aparte:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE> Mi página web con CSS </TITLE>
<LINK TYPE="text/css" rel="stylesheet" href="MiFichero.css">
</HEAD>
<BODY>
<!-- Texto →
</BODY>
</HTML>
5 de 12
Tecnología 3º ESO: Edición web
/*EJEMPLO DE FICHERO CSS*/
body {
margin-left: 10%; margin-right: 10%;
font: 8pt/16pt Georgia;
color: #555753;
background: #fff url(blossom.jpg) no-repeat bottom right fixed;
}
P {
font-family:Verdana;
font-size:8pt;
font-weight:bold;
}
H1 {
font-size:x-small;
font-family: Times New Roman;
font-weight: normal;
text-decoration: blink;
color: #660f00;
}
H2 {
font-size:small;
font-family: Arial;
font-weight: italic;
color: #660f00;
}
a:visited {
font-weight: bold;
color:#800000;
}
a:link {
text-decoration: underline;
color:#000000;
}
a:hover {
font-weight: bold;
color:#800000;
}
Instrucciones CSS
font-family : Indica el tipo de letra. Se recomienda que los tipos de letra sean encerrados entre comillas, a
excepción del último.
font-weight :extra-light | light | demi-light | medium | demi-bold | bold | extra-bold | bolder | lighter
(Los valores bolder y lighter se dan en relación a la opacidad actual, y lo incrementan o decrementan
(respectivamente) en dos unidades)
font-style :normal | italic |small-caps | oblique
line-height : <número> | <porcentaje>
Indican la altura de la línea de texto. Los valores porcentuales se refieren al tamaño de letra en curso.
text-decoration :none | [ underline | overline | line-throught | blink ]+
Indica adornos o cualidades extra de la letra. Los valores son underline (subrayado), overline (línea
por encima del texto), line-throught (tachado) y blink (parpadeo)
6 de 12
Tecnología 3º ESO: Edición web
text-transform :none | capitalize | uppercase | lowercase
Permite cambiar el texto al cual se refiere, poniendo la primera letra en mayúscula, todo en
mayúsculas o todo en minúsculas, respectivamente.
vertical-align :baseline | sub | super | top | text-top | middle | bottom | text-bottom | <porcentaje>
Indica la posición vertical del elemento, con respecto a los límites del texto y los límites de la línea
de texto.
text-align : left | right | center | justify
Se aplica sólo a los elementos de tipo bloque. El valor justify indica que se insertarán espacios extra
entre las letras para que las líneas de texto ocupen todo el ancho permitido para su bloque.
text-indent : <longitud> | <porcentaje>
Indica la sangría en los elementos de bloque. Su valor por omisión es cero, y los valores porcentuales
se refieren a la sangría del elemento padre.
color : <color>
Indica el color de todos los elementos, a menos que subsecuentes reglas asocien color explícito a
algunos elementos.
background : transparent | <color> [ / <color> ]? || <dirección de la mezcla> || <url> || <tipo de repetición> ||
<posición> || <scrolling>
Indica propiedades genéricas para el fondo de un elemento. El fondo puede ser :
transparente { background : transparent }
de un sólo color { background: red }
colores mezclados en degradación: background : yellow / green }
una imagen { background: url( nubes.gif ) 50% repeat fixed }
Cuando se usa una imagen para rellenar el fondo, se pueden especificar dos propiedades adicionales.
1.El tipo de repetición determina cómo se repetirá la imágen: repeat-x (repetir horizontalmente),
repeat-y (repetir verticalmente), no-repeat (no repetir) y repeat (repetir horizontal y verticalmente), que es el
valor por omisión.
2.La posición especifica su localización inicial a lo ancho y a lo alto del elemento, También tenemos
left, center y right para indicar posición horizontal de 0%, 50% y 100% respectivamente, y top, middle y
bottom para indicar posición vertical de 0%, 50% y 100%.
Finalmente, el scrolling indica si el fondo permanecerá fijo al fondo de la ventana (valor fixed), o se
moverá junto con el elemento al cual se está aplicando (valor scrolling).
4.8.- EJEMPLOS DE PÁGINAS WEB
Ejemplo 1: PÁGINA WEB BÁSICA
<HTML>
<HEAD>
<TITLE> La página de Luismi</TITLE>
</HEAD>
<BODY BGCOLOR=”Red” TEXT=”White” LINK=”Blue” VLINK=”Grey”>
<FONT FACE=”Times New Roman” SIZE=”7”>
Esta es mi página y esta es mi fotografía
<BR>
<IMG SRC=”Luismi.jpg”>
</FONT>
</BODY>
</HTML>
7 de 12
Tecnología 3º ESO: Edición web
En el siguiente ejemplo se muestra una serie de instrucciones que hacen el código un poco “difícil de
digerir” pero que los generadores de páginas web lo ponen de forma automática:
La instrucción DOCTYPE es una declaración del tipo de documento que es nuestro fichero XHTML.
Le dice al navegador en el que se vaya a visualizar nuestra página que nuestra página web está escrita en
XHTML definido por el consorcio w3c (entidad internacional que especifica protocolos y lenguajes de
internet). Sin un específico DOCTYPE, la mayoría de los navegadores mostrarían mal las páginas y se verían
en quirks mode o «modo rarillo» y fuera de toda compatibilidad.
También se define un lenguaje humano específico (por defecto, el inglés) modificando un atributo del
tag HTML llamado xml:lang
Ejemplo 2: GENERACIÓN AUTOMÁTICA
<!DOCTYPE html PUBLIC “-//W3C// DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/ xhtml1strict.dtd”>
<HTML xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”es”>
<HEAD>
<TITLE> La página de Luismi</TITLE>
</HEAD>
<BODY BGCOLOR=”Red” TEXT=”White” LINK=”Blue” VLINK=”Grey”>
<FONT FACE=”Times New Roman” SIZE=”7”>
Después de dos meses en <H1> Francia </H1> estas son las fotos de mi <H1>Viaje a París </H1>
incluido el viaje en el <H2> Bateau Mouche</H2> y la escalada a la <H2>Torre Eiffel </H2>
<BR>
<IMG SRC=”Paseo Sena.jpg”>
<BR>
<IMG SRC=”VistaParís.jpg” WIDTH=”70” HEIGHT=”58”>
</FONT>
</BODY>
</HTML>
Ejemplo 3: LISTAS Y REFERENCIAS
<HTML>
<HEAD>
<TITLE> La página de Luismi</TITLE>
</HEAD>
<BODY BGCOLOR=”#0048AA” TEXT=”#000000” LINK=”#000099”
VLINK=”#0000FF”>
<FONT FACE=”Times New Roman” SIZE=”7”>
<P ALIGN=”left”> Esta es mi <H1> página </H1> y esta es mi <H2>fotografía </H2>
</P>
<P ALIGN=”right”>
<IMG SRC=”Luismi.jpg”>
</P>
<BR>
<CENTER>
Alguna de las páginas web que Luismi te recomienda
<!-- lista no numerada →
<UL>
<LI><A HREF=”www.pendragon.mu” > Los pendragon </A>
<LI><A HREF=”http://www.porcupinetree.com"> Porcupine Tree </A>
<LI><A HREF=”http://www.7ieben.de/ “> 7ieben </A>
8 de 12
Tecnología 3º ESO: Edición web
</UL>
</FONT>
</BODY>
</HTML>
Ejemplo 4: CREACIÓN DE UNA TABLA
<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>La página de Gaudí.</title>
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
</head>
<body bgcolor="#808080" text="orange" link="#00ff40" vlink="#0000ff">
<font face="Matisse ITC" size="5" color="#00FF00" > <center>GAUDI </center>
</font>
<font face="Arial" size="2">
<table width="95%" border="1">
<tr>
<!-- Primera fila -->
<td valign="top">
Vistas de la <a href="FBatllo.jpg" target=”_blank”> Casa Batlló </a>
</td>
<td >
<img src="FBatlloPequenia.jpg" alt="Imagen pequeña de la Casa Batlló">
</td>
</tr>
<tr>
<!-- Segunda fila -->
<td valign="top">
Vistas de la <a href="FMila.jpg" target=”_blank”> Casa Milá</a>
</td>
<td >
<img src="FMilaPequenia.jpg" alt="Imagen pequeña de la Casa Milá">
</td>
</tr>
<tr>
<!-- Tercera fila -->
<td valign="top">
Fotos del<a href="PGuel.jpg" target=”_blank”> Park Guell</a>
</td>
<td>
<img src="PGuelPequenia.jpg" alt="Imagen pequeña del Parque Guell">
</td>
</tr>
<tr>
<!-- Cuarta fila -->
<td valign="top">
Algunas vistas de la <a href="FSF.jpg" target=”_blank”> Sagrada Familia</a>
</td>
<td >
<img src="FSFPequenia.jpg" alt="Imagen pequeña de la Sagrada Familia">
</td>
</tr>
</table>
</body>
</html>
9 de 12
Tecnología 3º ESO: Edición web
Ejemplo 5: PÁGINA WEB CON INSTRUCCIONES CSS
<HTML>
<HEAD>
<TITLE> La página de Luismi</TITLE>
<STYLE TYPE=”text/css”>
H1 {
Font-family : Matisse ITC;
Font-size: 35;
text-decoration: blink;
}
H2 {
Font-family: Times New Roman;
color: red;
}
</STYLE>
</HEAD>
<BODY BGCOLOR=”Red” TEXT=”White” LINK=”Blue”
ALINK=”Grey”>
<FONT FACE=”Times New Roman” SIZE=”11”>
Esta es mi <H1> página </H1> y esta es mi <H2>fotografía </H2>
<BR>
<IMG SRC=”Luismi.jpg”>
</FONT>
</BODY>
</HTML>
4.9.- EJERCICIOS DE PÁGINAS WEB
1.- ¿Qué tag se utiliza para poner el nombre de la página en la barra de títulos? ¿Dónde se pone?
2.-¿Para que se utiliza el parámetro Background que se coloca en el tag BODY?
3.- ¿Qué diferencia hay entre los tag <BR> y <B>? ¿Y entre <BR> y <P>?
4- ¿Qué tag utilizarías para poner una fotografía que está en el fichero “PinguinodeLinux.jpg”?
Escribe la instrucción.
5.- Si quieres que una página entera tenga un color gris de fondo y que el tipo de letra de toda la
página sea de tipo “Impact” ¿qué instrucción utilizarías?
6- En una página web quiero que todo el texto aparezca escrito en tamaño 21 y con el tipo de letra
“Bernhard EFFashion” de Word. ¿Qué tag emplearías ? Indica la instrucción completa, con sus parámetros
7.- ¿Qué significan los parámetros LINK, VLINK y BGCOLOR?
8.- Escribe una página web completa en la que se muestre el fichero “SenorAnillos.jpg” centrado y
debajo un texto a tamaño 12 de tipo “Courier” que diga: “el Señor de los Anillos”
9.- Escribe una página web completa en la que se muestre el texto a tamaño 12 y de tipo
“TimesNewRoman”, mientras que el texto escrito entre <H1> y </H1> sea de tipo “Arial” y a tamaño 18.
10.- Define el tipo de letra H2 de forma que el color sea verde y el tamaño 35.
11.- Escribe una página web completa de título “Asterix en Bretaña” en la que se muestre el texto:
“La aldea de los Irreductibles galos” a tamaño 12 y de tipo “TimesNewRoman”, mientras que las palabras
“aldea” e “Irreductibles galos” sean de tipo “Arial” y a tamaño 18. (Nota: utiliza los tags <H1>).
12.- ¿Qué instrucción añadirías a la página anterior para que, al hacer clic con el ratón en la palabra
“Irreductibles galos” el navegador se vaya a la página http://www.asterix.fr)
13.- ¿Qué instrucción añadirías para hacer lo mismo que en el ejercicio anterior, pero haciendo clic
en la foto?
10 de 12
Tecnología 3º ESO: Edición web
14.- Escribe las instrucciones para que el siguiente texto se vea de forma que las frases en negrita
aparezcan con letra Courier a tamaño 32 de color verde y las subrayadas, con letra System de color rojo. Las
demás, con letra Times New Roman de tamaño 11.
“Tras leer emocionado el reportaje de Argentina en LA MIRADA no pude por menos que
preparar las maletas
15.- En una página escribimos el listado de todos los alumnos de la ESO. ¿Qué tags usarías para
poner en el encabezado ocho enlaces del tipo “1ºA”, “1ºB”, “2ºA”, “2ºB”,así hasta “4ºB”, de manera que al
pulsar uno de ellos la página se desplace hasta el primero de los alumnos de ese curso? (Usa un diagrama de
bloques)
16.- En una página ponemos las letras de 8 canciones de los Rammstein y al principio un listado de
las canciones ¿Qué tags usarías para poder pinchar en el listado de canciones y, sin cambiar de página, vaya a
la letra de dicha canción?
17.- Crea una lista no ordenada de enlaces a las siguientes páginas:
www.terra.es/cine
www.radio.cz/es
www.holland.com/es
www.softonic.com/seccion/699/Video
18.- Escribe una pagina web que presente la información en forma de periódico, con el nombre
“DominicasDigital” ocupando toda una fila en la parte superior y abajo tres columnas: una que ocupe el
15%, otra el 50% y la última el 35%.
19.- Escribe las líneas de código HTML para mostrar la siguiente página web cuyo título es “La
página del rey (de mi casa)”. Nota: el color de fondo es #ccccff, el de la letra es #6600CC, el de los enlaces
es rojo, el de los enlaces visitados es verde, el tipo de letra es MattiseITC y el muñeco está en el fichero
“elrey.png”. Además, la primera fila que ocupe el 15%, la segunda el 35% y la última el 50%, que la primera
columna ocupe el 25% y que el título www.soyelrey.com se mueva de izquierda a derecha todo el rato.
Notici
as
Contac
ta con
nosotros
Googl
e
WWW.SOYELREY.COM
20.- Escribe una tabla en HTML como la siguiente. Nota: el color de las celdas es #6600cc, el del
texto es #007866, el ancho de las celdas laterales es 20% cada una y su altura es de 20% cada una excepto la
última, de 60%. Además, el texto de arriba está centrado y en negrita y se desplaza de izquierda a derecha y
el de abajo sea un hiperenlace a www.digitaltext.com
DIGITALTEXT
Pincha aquí
21.- Escribe un formulario para una universidad en el que aparezca un apartado para escribir el
nombre del alumno, otro el apellido, y luego un menú desplegable con las carreras que se estudian en la
facultad. Además, poner algun elemento para indicar si el alumno es repetidor o no, si es traslado de
expediente, si estudia la carrera técnica, la superior o si es un curso de doctorado.
22.- Escribe el formulario de validación de Fresqui donde solicita el nombre de usuario, la clave y
pregunta si quiere “recordarme en este equipo” es decir, si la próxima vez que me conecte, necesito o no
11 de 12
Tecnología 3º ESO: Edición web
poner la clave. Acaba todo con un botón “login” de verificación
23.- Escribe un formulario de reclamaciones en el que los datos se envíen a fernandos@upm.com y
que solicite el nombre y apellidos del demandante y elija de entre los siguientes uno de los motivos de la
reclamación. Los motivos son:
Funcionamiento de la red lento
La red no funciona
Se detiene a medio
Otros motivos (indicar cuales)
Incluir en el formulario un apartado para la opción “Otros motivos”
24.- Si en el anterior ejercicio los motivos se muestran mediante un SELECT, reescribe esa parte
mediante RADIOs y, si es al revés, reescríbelo con un SELECT.
25.- Escribe una página web en la que se vea el logo de la empresa “logo.bmp” y a la derecha haya
dos apartados, uno que diga Acceder que incluya dos cajas de texto, una para el e-mail y otra para la
contraseña. En el otro apartado, que muestre el texto “Crear una cuenta ahora” y que muestre la página
“newuser.html”. Cuando escriba la contraseña que la mande a la dirección luismitecno@mixmail.com.
26.- Escribe la página newuser.html para el ejercicio anterior donde se especifiquen datos como
nombre, apellidos, contraseña, dirección de correo electrónico, estado civil (soltero, casado, viudo,
divorciado), sexo y un botón para enviar todo ello a la dirección nuevacuenta@mixmail.com
12 de 12