Aspectos Básicos HTML: Ejercicio 0 Explicación Y Lectura de La Teoría (1 Sesión)

TECNOLOGÍAS DE LA INFORMACION Y LA COMUNICACIÓN
HTML
EJERCICIO 0 EXPLICACIÓN Y LECTURA DE LA TEORÍA

(1 sesión)
Aspectos básicos HTML
Todo documento html se elabora en un procesador de textos planos como es el
bloc de notas.
El lenguaje funciona a base del uso de etiquetas, donde todas se caracterizan
por:
< >Inicio de etiqueta
< / >Fin de etiqueta
Las letras de la etiqueta pueden ir en mayúsculas o minúsculas.
Todo documento se elaborará dentro de las etiquetas
<HTML> Todo el documento </HTML>
El documento consta de dos partes:
 Encabezamiento: <HEAD> y </HEAD>
Dentro del encabezamiento se coloca el título, que da información del
documento y que No aparecerá en pantalla en el navegador. Sus etiquetas son:
<TITLE> y >/TITLE>
 Cuerpo: <BODY> y </BODY>
Dentro del cuerpo está todo lo que queremos que aparezca en la web
Ejercicios de html :
Los siguientes ejercicios siempre se realizan igual.
1. Copia lo que se te indica en el procesador de texto plano (bloc de notas), haz las
modificaciones que se sugieran en cada caso.
2. Guarda el fichero con extensión html. (por ejemplo: ejercicio1.html)
3. Haz entonces doble clic sobre dicho fichero y se abrirá el navegador con dicho
contenido.
HTML
EJERCICIO 1 MI PRIMERA PÁGINA(1 punto) (1 sesión)

Cuando escribimos en el documento debemos considerar:
 El texto se ajustará sin necesidad de poner saltos de línea.
 Para separar párrafos:<P> (No existe etiqueta de cierre)
 Para poner cabeceras(como títulos):<H1> y >/H1> (hasta el número 6)
según el
tamaño.
 Si queremos que algo esté centrado en pantalla: <CENTER> y
>/CENTER>
 Separadores horizontales(línea): <HR> (No existe etiqueta de cierre)
Actividad: Copia el siguiente texto en un bloc de notas. Complétalo con tus datos
<HTML>
<HEAD>
<TITLE> Tu nombre y apellidos </TITLE>
</HEAD>
<BODY>
<H1><CENTER> Bachillerato SSCC </CENTER></H1>
<HR>
Me llamo………… y SSCC es el nombre del colegio dónde estudio.
<P> Está en la dirección Sierrapando, 508
</BODY>
Guardamos el fichero con el nombre tunombreprimerapagina.html
HTML
EJERCICIO 2 FORMATOS (1 punto) (1 sesión)

Las etiquetas relativas al texto son:
 <B> Y </B> Para poner negrita
 < I > Y < /I > Para poner cursiva
 <BR> Para separar párrafos sin dejar línea en blanco
 <BR><P> Para introducir múltiples líneas en blanco
 (non breaking space): Cuando queremos que haya más de un hueco en
blanco entre palabras
 <PRE> y</PRE> El texto entre estas etiquetas aparecerá preformateado, es
decir, como si estuviera creado por una máquina de escribir(tipo Courier). Y
aquí si respetará los espacios tal como se lo indiquemos sin poner etiquetas.
 <TT> y </TT>: Aparece la letra de menor tamaño y en tipo Courier.
 <BLACKQUOTE> y </BLACKQUOTE> Para destacar una cita textual
dentro del texto.
 En las fórmulas matemáticas, pueden interesar:
• <SUP> y <SUP>: Superíndice
• <SUB> y <SUB>: Subíndice
 Listas: A veces nos interesa presentar datos en forma de lista. Cada elemento de
la lista ve precedido de <LI> y entre las etiquetas:
• Lista Ordenada(1,2,3…; a, b, c…): <OL> y </oL>
• Lista Desordenada(*, - …): <UL> y </UL>
Actividad: Crea una página web en la que se incluya la siguiente información:

- Tu nombre en negrita
- Tu nombre en cursiva
- Utiliza <BR> y <P> con diferentes frases
- Escribe tu nombre con <PRE> y </PRE>
- Escribe tu nombre con <TT> y </TT>
- Escribe tu nombre con <BLACKQUOTE> y </BLACKQUOTE>
- Escribe una ecuación en la que utilices <SUP> y <SUP> y <SUB> y <SUB>
- Crea una lista ordenada con tus asignaturas favoritas en orden ascendente
- Crea una lista desordenada con nombres famosos (al menos 6)
HTML
EJERCICIO 3 ENLACES(1 punto) (1 sesión)

Enlaces con otras páginas
La gran ventaja de las web es su capacidad para unir unos sitios con otros. Y eso
se hace con los denominados enlaces, cuya estructura general es:
<A HREF=”XXX”> YYY </A>
Y donde XXX e YYY va a ir variando según el tipo de enlace.
Enlace a una página fuera de nuestro sistema.
<A HREF=”http://www.educantabria.es> Página inicial de Educación </A>
Actividad: Crea un enlace a la página web del colegio.

HTML
EJERCICIO 4 IMÁGENES (2 puntos) (2 sesiones)

Imágenes
Los ficheros imagen con los que se suele trabajar en web suelen ser de tipo *.gif
y *.jpg.
El fichero imagen residirá en el lugar donde tengamos nuestro fichero html. En
caso contrario procederemos como en el caso de los enlaces.
En ese caso, el comando para insertar una imagen es:

<IMG SRC=”imagen.gif> ALT=”Descripción de la imagen”>
Si a la imagen le queremos poner un titular, podemos decidir dónde lo ponemos

de la siguiente manera:
<IMG SRC="imagen.gif" ALING=TOP> Para introducir una imagen con un texto

alineado arriba.
<IMG SRC="imagen.gif" ALING=MIDDLE> Para introducir una imagen con un

texto alineado en medio.
<IMG SRC="imagen.gif" ALING=BOTTOM> Para introducir una imagen con un

texto alineado abajo.
Y si queremos alinear la imagen en pantalla:

<IMG SRC="imagen.gif" ALING=RIGHT> Para alinear la imagen a la derecha.
<IMG SRC="imagen.gif" ALING=LEFT> Para alinear la imagen a la izquierda
<IMG SRC="imagen.gif" WIDTH=nº HEIGHT=nº>Para cambiar el tamaño de la
imagen tanto de ancho como de alto.
Y podemos hacer que una imagen sea un enlace a otra página, otra imagen…:
<A HREF="mipag2.html"><IMG SRC="imagen.gif"></A> Para introducir una
imagen como enlace a otra página, en este caso mipag2.html.
En este caso la imagen aparece con un borde del color de los enlaces, que
podemos quitar si queremos para lo cual añadiremos al anterior comando, antes de </A>
el comando BORDER=0
Por último podemos hacer que un texto enlace con una imagen para lo cual:
<A HREF=" imagen.gif ">Texto del enlace</A>
HTML
Actividad
1. Vamos a trabajar con imágenes: Primero, descarga una imagen por cada isla
del archipiélago canario.
2. Crea una carpeta en tu ordenador y guarda ahí las imágenes. Asegúrate de que
tienen formato jpg.
3. Abre un bloc de notas y guárdalo con el nombre:
i. Tunombreimagenes.html
4. Escribe el código general de html
5. Pon como título. Archipiélago canario.
6. A continuación, deben aparecer las imágenes de las islas del archipiélago con el nombre
de cada isla al lado de la imagen.
7. Al pinchar en cada imagen se debe abrir una página web con información adicional
sobre la isla de la imagen.
HTML
EJERCICIO 5 TABLAS (3 puntos) (3 sesiones)

FUENTES
La fuente es la configuración del texto que introducimos, y puede variarse
según:
<FONT SIZE=(nº del 1 al 7)> Y </FONT> Para dar tamaño al texto que va en medio.
<FONT FACE="nombre de fuente"> Y </FONT> Para cambiar tipo de letra.
<FONT COLOR="#XXYYZZ"> Y </FONT> Para cambiar color del texto
FONDOS
También podemos configurar el fondo de la página.
<BODY BGCOLOR="#XXYYZZ"> Para poner un fondo de página con color.
Donde:
XX: Corresponde al rojo
YY: Corresponde al verde
ZZ: Corresponde al azul
Su valor puede ser: 0 1 2 3 4 5 6 7 8 9 A B C D E F
De manera que por ejemplo:
#FF0000-Rojo
#00FF00-Verde
#0000FF-Azul
#FFFFFF-Blanco
#000000-Negro
#FFFF00-Amarillo
También podemos poner una imagen de fondo.
<BODY BACKGROUND="imagen.gif"> Para introducir una imagen como fondo
CREACIÓN DE TABLAS
Se colocan entre las etiquetas: <TABLE> </TABLE>
<TABLE BORDER> Resto de etiquetas </TABLE> Para crear una tabla con bordes
<TABLE BORDER= nº> Para variar el espesor del borde de la tabla.
<TR> y </TR> Para formar cada fila de la tabla
<TD> y </TD> Para formar las celdas de la tabla
También nos puede interesar crear una celda cabecera.
<TH> y </TH> En vez de la normal TD.
HTML
Copia y comprueba
<HTML>
<HEAD>
<TITLE> Creando Tablas</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<TR>
<TD>Fila1-Celda1</TD>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
CONFIGURACIÓN DE TABLAS
2.5 CONFIGURACION DE LAS TABLAS
Podemos poner un color de fondo a toda la tabla.
<TABLE BORDER BGCOLOR=”#00FF00”>
Que sólo queremos que cambie el color de la celda, pondremos delante de la celda, en
lugar de
<TD>
<TDBGCOLOR=”#00FF00”>
Podemos introducir una imagen de fondo de tabla, para ello:
<TABLE BORDER BACKGROUND =”imagen.gif”>
Si el atributo background lo ponemos dentro de la etiqueta de la celda, lo que
obtenemos es que la imagen aparezca dentro de la celda indicada.
Podemos variar la el tamaño de las celdas
<TABLE WIDTH= nº %> Para variar el ancho de las celdas.
<TABLE HEIGHT= nº %> Para variar la altura de las celdas.
separación de las celdas de la tabla, por defecto 2 pixeles.
<TABLE BORDER CELLSPACING= nº> Para variar la separación entre celdas.
<TABLE BORDER CELLPADDING= nº> Para variar la separación entre el borde y
el contenido
dentro de las celdas.
HTML
Podemos alinear el contenido de la tabla:

<TD ALIGN=CENTER> Y </TD> Para alinear el contenido de una celda en el centro.
<TD ALIGN=RIGHT> Y </TD> Para alinear el contenido de una celda a la derecha.
<TD ALIGN=LEFT> Y </TD> Para alinear el contenido de una celda a la izquierda.
<TD VALIGN=TOP> Y </TD> Para alinear verticalmente el contenido de una celda
arriba.
<TD VALIGN=BOTTOM> Y </TD> Para alinear verticalmente el contenido de una
celda abajo.
Se puede combinar varias celdas en una.
<TD COLSPAN= nº> Para que una celda se extienda sobre determinadas columnas.
<TD ROWSPAN= nº> Para que una celda se extienda sobre determinadas filas.
Actividad
Crea utilizando tablas, tu horario de clase, donde introduzcas diferentes formatos a las
celdas. (1 punto)
Las celdas correspondientes a la clase de informática deben estar resaltadas en un color.
(1 punto)
Juega con el grosor de los bordes de celda y con las combinaciones,
como es el caso del recreo. (1 punto)
HTML
EJERCICIO 6 RECETA (2 puntos) (2 sesiones)

CSS: Cascade Style Sheet es lenguaje de hojas de estilo, el cual nos sirve para poder dar
estilos visuales a nuestras páginas web construidas en HTML.
Actividad
1. Crea una carpeta que se llame: tunombreactividad6
2. Crea un archivo .css con el siguiente código CSS. (Guárdalo con la extensión
.css) Por ejemplo: archivo.css
3. En la misma carpeta, crea un archivo que se llame receta.html donde
escribiremos el código html y se incluirá la etiqueta correspondiente en la
cabecera para que se vea como resultado la imagen que se adjunta.
4. (la etiqueta que debes insertar en la cabecera es:
<link rel=”stylesheet” href=”archivo.css” type=”text/css” />
donde archivo.css es el archivo css que has creado)
CÓDIGO CSS:
.receta {
color: darkred;
font-size: 1.8em;
}
.ing {
font-weight: bold;
}
.subra {
text-decoration: underline;
}
.red {
color: red;
}
.green {
color: green;
}
.blue {
color: blue;
}
HTML
RESULTADO:
Aquí tienes la estructura general del código html. Debes añadir información para completar la
receta

Aspectos Básicos HTML: Ejercicio 0 Explicación Y Lectura de La Teoría (1 Sesión)

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Aspectos Básicos HTML: Ejercicio 0 Explicación Y Lectura de La Teoría (1 Sesión)

Cargado por

Copyright:

Formatos disponibles

TECNOLOGÍAS DE LA INFORMACION Y LA COMUNICACIÓN

EJERCICIO 0 EXPLICACIÓN Y LECTURA DE LA TEORÍA

EJERCICIO 1 MI PRIMERA PÁGINA(1 punto) (1 sesión)

EJERCICIO 2 FORMATOS (1 punto) (1 sesión)

Actividad: Crea una página web en la que se incluya la siguiente información:

EJERCICIO 3 ENLACES(1 punto) (1 sesión)

Actividad: Crea un enlace a la página web del colegio.

EJERCICIO 4 IMÁGENES (2 puntos) (2 sesiones)

En ese caso, el comando para insertar una imagen es:

Si a la imagen le queremos poner un titular, podemos decidir dónde lo ponemos

<IMG SRC="imagen.gif" ALING=TOP> Para introducir una imagen con un texto

<IMG SRC="imagen.gif" ALING=MIDDLE> Para introducir una imagen con un

<IMG SRC="imagen.gif" ALING=BOTTOM> Para introducir una imagen con un

Y si queremos alinear la imagen en pantalla:

EJERCICIO 5 TABLAS (3 puntos) (3 sesiones)

Podemos alinear el contenido de la tabla:

EJERCICIO 6 RECETA (2 puntos) (2 sesiones)

También podría gustarte