4to Año - I Bim

UNIDAD DE GESTIÓN EDUCATIVA LOCAL ÁREA/SUB EPT - DISEÑO WEB - HTML
“SANTA” – CHIMBOTE
4°
I.E.P. “VIRGEN DE GUADALUPE”
PRACTICA DE CLASE
GRADO
RDZ 1740–75; RD 120–78; RD 0624–91 BIMESTRE I BIM – 2020
NIVEL ED. SECUNDARIA TEMA ¿QUÉ ES HTML?
PROFESOR Mario Luis, TOVAR QUIÑONES FECHA 2020 Nro. 1°
MARCO TEORICO
INTRODUCCION AL HTML
HTML es un lenguaje de marcas orientado a la publicación de documentos en Internet. La mayoría de las
marcas son semánticas. Los documentos HTML están formados por una serie de bloques de texto con una
entidad lógica (titulares, párrafos, listas,...). La interpretación de estas entidades se deja al navegador, lo cual
da una gran flexibilidad a la presentación del documento, que puede ser mostrado, por ejemplo, en terminales
gráficos o de texto.
Características del lenguaje HTML
 Elementos
Cada elemento de un documento HTML consta de una marca de comienzo, un bloque de texto y una marca
de fin.
<MARCA>bloque de texto</MARCA>
Por ejemplo,
<H1>Titular de nivel 1</H1>
Estos elementos se denominan contenedores, porque contienen un bloque de texto entre las dos marcas.
También existen elementos vacíos, que no afectan a bloques de texto y, por tanto, no contienen marca de
fin:
<MARCA>
Por ejemplo,
línea 1 <BR> línea 2
 Atributos
Muchos elementos tienen atributos que definen propiedades del elemento:
<MARCA ATRIBUTO="VALOR"> bloque de texto </MARCA>
Por ejemplo,
<H1 ALIGN="CENTER">Titular de nivel 1 centrado</H1>
Es recomendable encerrar los valores de los atributos entre comillas dobles. En algunos casos es además
obligatorio (por ejemplo, si contienen espacios en blanco).
 Distinción entre mayúsculas y minúsculas

HTML no distingue entre mayúsculas y minúsculas. Cuando es importante hacerlo, cosa que puede ocurrir
con los valores de algunos atributos (por ejemplo, nombres de ficheros), es preciso encerrar el valor entre
comillas dobles. Por ejemplo,
<IMG ALT="" SRC="BolaRoja.gif">
 Comentarios
Los comentarios se escriben en HTML de la siguiente forma:
<!-- Esto es un comentario -- >
Los caracteres de inicio del comentario, <!-- deben ir juntos, pero se permiten espacios entre los -- y el > del
final. Los comentarios pueden expandirse varias líneas, aunque no es conveniente porque algunos
visualizadores pueden no interpretarlos.
 Interpretación de espacios, tabulaciones y retornos de carro
Los espacios, tabulaciones, líneas en blanco y retornos de carro del documento HTML se ignoran,
tomándose como un único espacio en blanco. Esto permite añadir espacios para aumentar la claridad del
documento.
Cuando se quiere forzar un espacio en blanco, se hace de la siguiente forma:

 Estructuración
HTML es un lenguaje estructurado. Existen unas reglas estructurales sobre dónde pueden y no pueden ir
los elementos. Por ejemplo,
 Ciertos elementos no pueden contener otros elementos. Por ejemplo, no es correcto colocar un titular
dentro de otro. Además, tampoco tiene sentido hacerlo.
<H1><H2>Texto</H2></H1>
 Los elementos no se pueden solapar. No es correcto escribir
<EM><H1>Texto</EM></H1>
ELEMENTOS BÁSICOS DE HTML

 Estructura
Estructura de un documento HTML:
<HTML>
<HEAD>
... Encabezamiento del documento
</HEAD>
<BODY>
... Cuerpo del documento
</BODY>
</HTML>
 Realzado de caracteres
Existen distintos estilos para realzar caracteres. La mayoría de ellos son semánticos.
Estilos Físicos:
Negrita
Sintaxis <B>texto en negrita</B>
Resultado texto en negrita
Itálica
Sintaxis <I>texto en itálica</I>
Resultado texto en itálica
Subrayado
Sintaxis <U>texto subrayado</U>
Resultado texto subrayado
Fuente de máquina de escribir

Sintaxis <TT>texto en fuente de máquina de escribir</TT>
Resultado texto en fuente de máquina de escribir
 Centrado de Texto
Para centrar texto se utiliza el elemento CENTER:
Sintaxis <CENTER>texto centrado</CENTER>
Resultado texto centrado
 Párrafos
La marca P indica un comienzo de párrafo.
<P>Texto del párrafo alineado a la izquierda</P>

<P ALIGN="RIGHT">Texto del párrafo alineado a la derecha</P>
 Espaciado vertical y horizontal

Espaciado vertical:
<BR>
Espaciado horizontal:
<P>Primer párrafo, sin indentación</P>
<BLOCKQUOTE>Segundo párrafo, con indentación</BLOCKQUOTE>
<P>Tercer párrafo, sin indentación</P>
Primer párrafo, sin indentación
Segundo párrafo, con indentación
4°
PRACTICA DE CLASE
GRADO
NIVEL ED. SECUNDARIA TEMA LISTAS EN HTML
MARCO TEORICO
LISTAS EN HTML
Las listas representan uno de los instrumentos más difundidos para organizar la información dentro de los sitios
web. Una de sus características principales es la de proporcionar un cuadro claro y sintético del tema tratado.
HTML pone a disposición distintos tipos de listas.
LISTAS
Existen dos tipos de listas: la lista de definiciones o glosario y las listas regulares (numeradas y sin numerar).
Lista de definiciones
Sirve para definir listas de tipo glosario, en las cuales aparecen una serie de elementos con sus
correspondientes definiciones.
Sintaxis Resultado
<DL>
<DT>Primer elemento a definir
<DD>definición del primer elemento Primer elemento a definir
<DT>Segundo elemento a definir definición del primer elemento
<DD>definición del segundo elemento Segundo elemento a definir
definición del segundo elemento
<DT>Tercer elemento a definir
Tercer elemento a definir
<DD>definición del tercer elemento
definición del tercer elemento
<DT>Cuarto elemento a definir
Cuarto elemento a definir
<DD>definición del cuarto elemento definición del cuarto elemento
<DT>Quinto elemento a definir Quinto elemento a definir
<DD>definición del quinto elemento definición del quinto elemento
</DL>
LISTA REGULAR
Permite enumerar una serie de elementos. Cada elemento de la lista comienza con la marca LI ( list item) y
termina con /LI, aunque ésta no es necesaria. La lista regular puede ser numerada o sin numerar.
 Lista Numerada
Sintaxis Resultado
<OL>
<LI>Primero 1. Primero
<LI>Segundo 2. Segundo
<LI>Tercero 3. Tercero
<LI>Cuarto 4. Cuarto
<LI>Quinto 5. Quinto
</OL>
 Lista sin Numerar

Sintaxis Resultado
<UL>
<LI>Primero  Primero
<LI>Segundo  Segundo
<LI>Tercero  Tercero
<LI>Cuarto  Cuarto
<LI>Quinto  Quinto
</UL>
Las listas se pueden anidar unas dentro de otra, aunque sean de tipos distintos, como se muestra en el
siguiente ejemplo
Sintaxis Resultado
<OL>
<LI>Primero
<UL>
<LI>Primero a 1. Primero
<LI>Primero b o Primero a
</UL> o Primero b
<LI>Segundo 2. Segundo
<UL> o Segundo a
<LI>Segundo a o Segundo b
<LI>Segundo b o Segundo c
<LI>Segundo c 3. Tercero
</UL> 4. Cuarto
<LI>Tercero 5. Quinto
<LI>Cuarto
<LI>Quinto
</OL>
Una lista sólo puede contener elementos LI, que a su vez pueden contener otros elementos HTML.
Es importante no poner espacios entre <LI> y el texto, porque este espacio sí es significativo y modifica la
indentación del ítem añadiendo un espaciado extra. En general, nunca se debe poner espacio entre una marca
de comienzo y el texto que le sigue.
UNIDAD DE GESTIÓN EDUCATIVA LOCAL ÁREA/SUB EPT – DISEÑO WEB - HTML
4°
PRACTICA DE CLASE
GRADO
NIVEL ED. SECUNDARIA TEMA DISEÑO DE PÁGINAS EN HTML
 Diseñar las siguientes páginas web, haciendo uso de código HTML
 Resultado final de la página ejecutada
 Resultado final de la página ejecutada
PRESENTÓ SI NO NOTA FIRMA DEL PP.FF.

4°
“SANTA” – CHIMBOTE PRACTICA DE CLASE
I.E.P. “VIRGEN DE GUADALUPE” GRADO
NIVEL ED. SECUNDARIA TEMA HIPERVINCULOS EN HTML
MARCO TEORICO
HIPERVÍNCULOS O ENLACES EN HTML
Los enlaces o hipervínculos, también llamados hipertextos son los textos o los objetos sobre los que podemos
hacer clic para que nos lleven a otra parte del documento, a otra página web en el mismo sitio o a otra página
de Internet, entre otras funciones.
 LÍNEAS HORIZONTALES
Una línea horizontal se dibuja mediante el elemento vacío HR:
<HR SIZE="altura en puntos" WIDTH="anchura en puntos">
Ejemplos:
<HR>
<HR SIZE="20">
<HR WIDTH="300">
<HR SIZE="20" WIDTH="300">
 IMÁGENES
Las imágenes se colocan con el elemento IMG:
<IMG SRC="fichero imagen" WIDTH="anchura" HEIGHT="altura"
ALIGN="alineación">
Ejemplo de página con imágenes.
 ENLACES DE HIPERTEXTO
Permiten conectar un documento con otros documentos u objetos. Los enlaces se colocan mediante el
elemento ancla, A:
<A HREF="url del documento">texto del enlace</A>
Ejemplo: Curso de Diseño de Páginas web para Internet
La parte activa del ancla puede ser también una imagen:
<A HREF="url del documento"><IMG SRC="fichero imagen"></A>
Ejemplo:
Curso de Diseño de Páginas web para Internet
 URL (UNIFORM RESOURCE LOCATOR)

El URL de un documento es el nombre que identifica unívocamente al documento en la red. El URL se
compone de varias partes:
 Protocolo mediante el cual se accede al documento.
 Nombre de dominio.
 Nombre de la carpeta de la máquina donde se encuentra el documento. Este nombre indica la ruta
desde la carpeta raíz de la web hasta la carpeta donde se encuentra el documento.
 Nombre del fichero.
Ejemplo:
http://www.lsi.us.es/cursos/cursoweb/index.html
No todas las partes tienen por qué estar presentes.
Ejemplos
Enlace con url absoluto
Curso de diseño de páginas web

<A HREF="http://www.lsi.us.es/cursos/cursoweb/index.html">Curso de
diseño de páginas web</A>
Enlace con url relativo
Elementos básicos de HTML

<A HREF="cap0304.html">Elementos básicos de HTML</A>
Enlace a un punto del interior de una página
Inclusión de imágenes en una página web

<A HREF="http://www.lsi.us.es/cursos/cursoweb/cap0304.html#imagenes">
Inclusión de imágenes en una página web</A>
Enlace asociado a una imagen
Con borde Sin borde
<A HREF="http://www.lsi.us.es/cursos/cursoweb/index.html">
<IMG SRC="imagenes/logo_s.gif" WIDTH="70" HEIGHT="70"></A> Con borde
<A HREF="http://www.lsi.us.es/cursos/cursoweb/index.html">
<IMG SRC="imagenes/logo_s.gif" WIDTH="70" HEIGHT="70" BORDER="0"></A>
 SIN BORDE
Enlace a un punto del interior de una página
Se puede establecer un enlace a un punto del interior de un documento. Para ello se escribe el URL del
documento seguido del símbolo # y una etiqueta, que es una combinación de caracteres:
<A HREF="url del documento#etiqueta">texto o imagen del enlace</A>
En un lugar del documento debe existir un ancla de la forma:
<A NAME="etiqueta">texto</A>
Este es el punto al que se saltará cuando se active el enlace. El texto es opcional y puede no aparecer si lo
único que interesa es marcar el punto de destino del salto.
Por ejemplo, el siguiente enlace lleva al comienzo de la sección denominada imagenes del documento
cap3.html:
Inclusión de imágenes en una página web
<A HREF="cap0304.html#imagenes">Inclusión de imágenes en una página web</A>
En el comienzo de la sección a la que se quiere saltar se deberá colocar lo siguiente:
<A NAME="imagenes"></A>
El URL puede omitirse si el enlace se refiere al propio documento:
<A HREF="#imagenes">Inclusión de imágenes en una página web</A>
Enlaces a otros documentos

Un enlace no sólo puede llevar a otro documento HTML; también puede llevar a una imagen, un sonido, un
video, etc. En general, puede llevar a cualquier tipo de documento. Por ejemplo,
<A HREF="imagenes/torreoro.jpg">La Torre del Oro de Sevilla</A>

La Torre del Oro de Sevilla
<A HREF="sonidos/bosque.wav">Sonidos del bosque</A>
Sonidos del bosque
Descarga la <A HREF="programa.zip">última versión</A> del programa
Descarga la última versión del programa
 DIRECCIÓN
El elemento ADDRESS se suele utilizar para proporcionar información sobre el autor de la página y permitir
contactar con él para hacerle comentarios acerca de ella.
Sintaxis <ADDRESS>dirección</ADDRESS>
Resultado dirección
En la dirección se suele incluir la dirección de correo del mismo, a veces con un enlace que permite enviarle un
mensaje con sólo hacer click sobre él. La forma es la siguiente:
<A HREF="MAILTO:dirección de correo">texto del enlace</A>
Por ejemplo, puedes comentarme cualquier cosa que se te ocurra a propósito de esta página.
<A HREF="MAILTO:mariano@lsi.us.es">comentarme</A>
Precaución: mostrar una dirección de correo en una página web facilita el contacto con los visitantes de la
misma, pero también contribuye al aumento del correo basura (spam) ya que existen programas creados
específicamente para recorrer páginas web y 'recolectar' todas las direcciones de correo presentes en ellas.

4°
NIVEL ED. SECUNDARIA TEMA IMÁGENES EN HTML
MARCO TEORICO
LAS IMÁGENES
Para insertar imágenes en un sitio usaremos la etiqueta <img>.
Esta etiqueta debe ir acompañada del atributo src que es el que contiene el URL de la ubicación del archivo de
la imagen.
FUENTES Y COLORES
El tipo y tamaño de la fuente de letra que se utiliza en la pantalla están predefinidos por el navegador, pero se
pueden modificar con el elemento FONT:
<FONT FACE="tipo" SIZE="tamaño" COLOR="color">texto</FONT>
Ejemplos:
<FONT FACE="ARIAL" SIZE="20" COLOR="RED">Arial, tamaño 20, color rojo</FONT>
Arial, tamaño 20, color rojo
<FONT FACE="COURIER" SIZE="5" COLOR="RED">Courier, tamaño 5, color rojo</FONT>

Courier, tamaño 5, color rojo
<FONT SIZE="3" COLOR="RED">tamaño 3, color rojo</FONT>

Tamaño 3, color rojo
<FONT SIZE="1" COLOR="RED">tamaño 1, color rojo</FONT>

Tamaño 1, color rojo
IMÁGENES
Las imágenes se colocan con el elemento IMG. Sus atributos son:
 ALIGN: alineación de la imagen con respecto al texto que la rodea.
 ALT: texto alternativo a mostrar cuando no se pueda visualizar la imagen.
 BORDER: anchura en pixels del borde de la imagen. Por defecto no existe borde (tamaño 0), a no ser
que la imagen sea la parte activa de un ancla de hipertexto.
 HSPACE, VSPACE: espacio horizontal y vertical a izquierda y derecha o encima y debajo,
respectivamente, de la imagen.
 LOWSRC: URL de una versión de baja resolución de la imagen, que se cargará antes de la imagen
definitiva.
 SRC: URL de la imagen a incluir.
 WIDTH, HEIGHT: anchura y altura, en pixels, de la imagen.
Por ejemplo,
<IMG SRC="imagenes/logo.gif" HEIGHT="178" WIDTH="178" ALT="Logotipo">
ATRIBUTOS DE LAS IMÁGENES

Alineación del texto con la imagen
Alineación superior: ALIGN="TOP"

Alineación al medio: ALIGN="MIDDLE"
Alineación inferior: ALIGN="BOTTOM" (alineación por defecto). La alineación sólo afecta a una
línea; el resto de las líneas fluyen por debajo de la imagen.
La alineación a la izquierda (ALIGN=LEFT) coloca la imagen a la izquierda de la ventana y el
texto fluye a la derecha de ella, mientras que la alineación a la derecha (ALIGN=RIGHT) coloca
la imagen a la derecha de la ventana fluyendo el texto a su izquierda. En ambos casos el flujo
es más natural, puesto que al llegarse al final de la línea el texto no pasa debajo de la figura.
Únicamente pasará debajo de ella cuando el espacio ocupado por el texto sea mayor que el
ocupado por la figura.
La misma imagen, pero ahora alineada a la derecha. En este caso, la imagen

aparece pegada a la parte derecha de la ventana, y el texto fluye por su izquierda.
Por otra parte, se ha utilizado el atributo HSPACE para dejar espacio entre la
imagen y el texto que la rodea.
La alineación por defecto es BOTTOM
 TAMAÑO DE LA IMAGEN
Los atributos WIDTH y HEIGHT indican la anchura y altura de la imagen en pixels, respectivamente. Si sólo
se especifica uno de ellos, el otro se calcula de forma que se mantenga la relación de aspecto de la imagen
Tamaño real
WIDTH=200, HEIGHT=100
WIDTH=50 (la altura se calcula automáticamente)
 TEXTO ALTERNATIVO
El atributo ALT permite especificar un texto alternativo que aparecerá cuando la imagen no pueda
mostrarse.
<IMG SRC="imagenes/log.gif" ALT="Logo" WIDTH="178" HEIGHT="178">

UNIDAD DE GESTIÓN EDUCATIVA ÁREA/SUB EPT - COMPUTACIÓN - HTML
LOCAL
4°
“SANTA” – CHIMBOTE PRACTICA DOMICILIARIA
NIVEL ED. SECUNDARIA TEMA EFECTOS EN HTML
 Diseñar la siguiente página web en código HTML, haciendo uso de los formatos vistos en clase.

4°
PRACTICA DE CLASE
GRADO
NIVEL ED. SECUNDARIA TEMA CARACTERISTICAS DE LAS IMAGENES
MARCO TEORICO
CARACTERÍSTICAS DE LAS IMÁGENES EN LA WEB
Las imágenes para la web se presentan en resoluciones muy variadas (desde los 640x480x256 colores hasta
los 1.280x1.024x16.8 millones de colores).
TIPOS ESPECIALES DE IMÁGENES

 Imágenes transparentes
El formato GIF permite especificar uno de los colores de la paleta de la imagen como color transparente.
Los puntos de este color no aparecerán en la pantalla y en su lugar se mostrará el fondo del navegador.
Imagen no transparente Imagen transparente
Cuando se trabaja con imágenes transparentes hay que evitar dos efectos indeseados: los bordes dentados
y el efecto de halo.
 Imágenes entrelazadas
Para acelerar la visualización de una imagen en formato GIF ésta puede grabarse en modo entrelazado.
Las líneas de la imagen no se graban consecutivamente (1, 2, 3, ...), sino a saltos.
Las líneas se graban en cuatro pasadas: en la primera pasada se graban las líneas en incrementos de 8 (1,
9, 17, ...); en la segunda, en incrementos de 4 (5, 13, 21); en la tercera se graban las restantes líneas
impares (3, 7, 11, ...) y en la cuarta las restantes líneas pares (2, 4, 6, ...).
De esta forma la imagen se dibuja por bandas, aumentando progresivamente su resolución, produciendo la
impresión de que la carga es más rápida.
Imagen no entrelazada Imagen entrelazada
El entrelazado tiene tanto mayor interés cuanto mayor sea el tamaño de la imagen.
JPEG también admite el entrelazado: es el JPEG progresivo.
Algunos navegadores (I.E.) muestran las imágenes entrelazadas igual que las demás, y todos suelen
expandir las líneas de las sucesivas pasadas para ocupar toda la imagen, por lo cual no es conveniente
usar simultáneamente el entrelazado y la transparencia.
 IMÁGENES DE FONDO
Una imagen se puede colocar como fondo de una página por medio del atributo BACKGROUND del elemento
BODY:
<BODY BACKGROUND="fichero imagen">
...
</BODY>
La imagen se coloca formando un mosaico hasta completar toda la página.
Ejemplos típicos de imágenes de fondo:
 Textura
 Línea bicolor
 Logotipo
 Banda vertical
Recomendaciones sobre las imágenes de fondo:
 Utilizar imágenes de bajo contraste.
 Utilizar imágenes con poca profundidad de color. Es recomendable usar la paleta de colores web.
 Modificar si es preciso el color del texto para que contraste con el fondo.
 Asegurarse de que los colores quedan bien en distintas máquinas y con distintos navegadores (sobre
todo en pantallas de baja resolución).
 Utilizar conjuntamente los atributos BACKGROUND y BGCOLOR en fondos oscuros.
APLICACIONES DE LAS IMÁGENES
Barras de navegación
 Iconos
Los iconos son muy utilizados en las páginas web, bien por su carácter meramente decorativo o bien porque
resultan familiares al usuario y simplifican la navegación por las páginas.
 Formateado de párrafos
El espaciado horizontal y vertical no es fácil de controlar en HTML.
Una solución simple y práctica de este problema consiste en utilizar un gif transparente de 1 pixel de ancho
x 1 pixel de alto. Mediante los atributos WIDTH y HEIGHT se puede ajustar su tamaño, con lo cual se puede
conseguir el espaciado que se desee.
Este ejemplo ilustra la utilización del gif de 1x1 para conseguir un sangrado de párrafo y para distribuir
imágenes.
 Botones
 Rótulos de texto
Garantizan que un texto se visualizará de la misma manera en todos los navegadores.

4°
NIVEL ED. SECUNDARIA TEMA TABLAS EN HTML
MARCO TEORICO
TABLAS
Las tablas sirven principalmente para colocar información en forma tabular, aunque tradicionalmente han sido
utilizadas para la composición de las páginas web dadas las limitaciones a este respecto del lenguaje HTML.
Esta situación ha empezado a cambiar con la aparición de las hojas de estilo en cascada (CSS), aunque aún
existen muchas páginas que utilizan con profusión las tablas para maquetar sus contenidos.
 Ejemplo de una Tabla en HTML
Asignaturas
Curso Asignatura Titulación Cuatrimestre Créditos
II, ITIG, ITIS Primero 7,5

Introducción a la Programación 1
Primero
Lenguajes
y Sistemas II, ITIG, ITIS Segundo 7,5
Informáticos
Introducción a la Programación 2
Libre
II, ITIG, ITIS Segundo 6
Configuración
Diseño de Interfaces Hombre
Máquina
 Una tabla se define como una colección de celdas agrupadas en filas y columnas. Las tablas se crean con
el elemento TABLE.
<TABLE BORDER>
<CAPTION>Asignaturas de programación</CAPTION>
<TR><TH>asignatura</TH>
<TH>cuatrimestre</TH>
<TH>créditos</TH></TR>
<TR><TD>IP1</TD>
<TD>primero</TD>
<TD>7,5</TD></TR>
<TR><TD>IP2</TD>
<TD>segundo</TD>
<TD>7,5</TD></TR>
</TABLE>
Asignaturas de programación
asignatura cuatrimestre créditos
IP1 primero 7,5
IP2 segundo 7,5
 Título de una tabla
El título de una tabla se define mediante el elemento CAPTION. El atributo ALIGN especifica dónde se
coloca el título con respecto a la tabla: top (encima, valor por defecto) y bottom (debajo).
 Filas y columnas
El elemento TR define las filas que forman la tabla. Cada fila comienza por <TR> y termina por </TR> y está
formada por celdas que pueden ser de dos tipos: celdas de encabezamiento, TH, y celdas de datos, TD.
Por defecto las tablas se dibujan alineadas a la izquierda, interrumpiendo el flujo del texto, y su borde no es
visible.
ATRIBUTOS DE LAS TABLAS
Los atributos del elemento TABLE son los siguientes:
 ALIGN: alineación de la tabla. Permite crear tablas flotantes, alineadas a la izquierda (left) o derecha (right)
y con el texto alrededor. El valor center coloca el texto a izquierda y derecha, aunque no es soportado por
muchos navegadores.
 BACKGROUND: imagen de fondo. Se coloca en forma de mosaico dentro de cada celda, como la imagen
de fondo de una página.
 BGCOLOR: color de fondo de las celdas de la tabla. Su formato es BGCOLOR=color (expresado en formato
#RRGGBB o dado por su nombre).
 BORDER: especifica la anchura, en número de pixels, del borde de la tabla. Su valor por defecto es 1,
aunque el borde no será visible salvo que se indique expresamente de la forma <TABLE BORDER>. Un
valor 0 indica que no existe borde.
 BORDERCOLOR: color del borde de la tabla.
 CELLSPACING: anchura de la línea divisoria entre celdas. Su valor por defecto es 2 píxeles.
 CELLPADDING: espacio entre el contenido de la celda y los bordes de ésta. Su valor por defecto es 1 píxel.
 WIDTH: anchura de la tabla. Puede venir expresada de manera absoluta, en número de píxels, o en
porcentaje respecto a la anchura total de la ventana del navegador.
Ejemplo 1: Tabla que ocupa toda la anchura de la ventana.
item 1 item 2 item 3

 Ejemplo 2: ejemplo de tabla flotante alineada a la izquierda con el atributo
item 1 item 2 item 3 ALIGN=left. El texto se distribuye en la parte derecha de la tabla, como se puede apreciar.
item 4 item 5 item 6 Por otra parte, se ha utilizado el atributo BGCOLOR para dotar a la tabla de un color de
fondo, en concreto el color lightblue. Por último, se ha suprimido el borde de la tabla
eliminando el atributo BORDER. Obsérvese el espacio que queda entre las celdas. Este espacio se puede
modificar mediante el atributo CELLSPACING.
 Ejemplo 3: la misma tabla anterior alineada a la derecha con el atributo item 1 item 2 item 3
ALIGN=right. En esta ocasión, la tabla queda a la derecha y el texto se distribuye a su
izquierda. Por otra parte, se ha suprimido el espacio entre las celdas mediante el atributo CELLSPACING=0.
 Ejemplo 4: colocación de una imagen de fondo en una tabla. La imagen aparece en forma de mosaico y,
según el navegador utilizado, puede fluir de una celda a otra o comenzar de nuevo en cada una de ellas.

UNIDAD DE GESTIÓN EDUCATIVA LOCAL ÁREA/SUB EPT – DISEÑO WEB - HTML

4°
PRACTICA DOMICILIARIA
GRADO
NIVEL ED. SECUNDARIA TEMA MARCOS
ARCHIVO: ENLACES.HTML
<HTML>
<HEAD>
<TITLE>INDICE</TITLE>
</HEAD>
<BODY BGCOLOR="YELLOW">
<FONT FACE="ARIAL" SIZE=5>INDICE</FONT>
<HR>
<P>
<P><A HREF="H:\HTML\COMPUTACION.HTML" TARGET="PRINCIPAL">PÁGINA 1</A>
<P><A HREF="H:\HTML\AUTOCAD.HTML" TARGET="PRINCIPAL">PÁGINA 2</A>
<P><A HREF="H:\HTML\ELECTRONICA.HTML" TARGET="PRINCIPAL">PÁGINA 3</A>
<P><A HREF="H:\HTML\ENSAMBLAJE.HTML" TARGET="PRINCIPAL">PÁGINA 4</A>
</BODY>
</HTML>
 Resultado Final de Página Ejecutada:
ARCHIVO: FRAME.HTML
<HTML>
<HEAD>
<TITLE>EJEMPLOS DE FRAMES</TITLE>
</HEAD>
<FRAMESET COLS="130,*">
<FRAME SRC="H:\HTML\ENLACES.HTML">
<FRAME SRC="H:\HTML\COMPUTACION.HTML" NAME="PRINCIPAL">
<NOFRAMES>
<P><A HREF="H:\HTML\COMPUTACION.HTML" TARGET="PRINCIPAL">PÁGINA 1</A>
<P><A HREF="H:\HTML\AUTOCAD.HTML" TARGET="PRINCIPAL">PÁGINA 2</A>
<P><A HREF="H:\HTML\ELECTRONICA.HTML" TARGET="PRINCIPAL">PÁGINA 3</A>
<P><A HREF="H:\HTML\ENSAMBLAJE.HTML" TARGET="PRINCIPAL">PÁGINA 4</A>
</NOFRAMES>
</FRAMESET>
</HTML>
 Resultado Final de Página Ejecutada:

4°
PRACTICA DE CLASE
GRADO
NIVEL ED. SECUNDARIA TEMA PROPIEDADES DE CELDAS
MARCO TEORICO
PROPIEDADES DE LAS CELDAS
Las celdas se colocan con los elementos TR, TD y TH y poseen las siguientes propiedades:
 Tamaño (anchura y altura)
 Alineación (horizontal y vertical)
 Color/imagen de fondo
 Tamaño de las celdas

El navegador calcula automáticamente el tamaño de las celdas de la tabla. No obstante, se puede
especificar el tamaño de las celdas mediante los atributos WIDTH y HEIGHT de los elementos TH y TD (y
no de TR).
WIDTH especifica la anchura de la celda. Puede expresarse de tres maneras:
 Valor absoluto, en pixels: WIDTH=número.
 Porcentaje respecto a la anchura total de la tabla: WIDTH=número%. La suma debe ser 100 en
caso de que todas las celdas de la fila tengan este atributo.
 Valor relativo a la anchura de otras celdas: WIDTH=número*. El valor por defecto de una celda es 1.
Por tanto, 1.5 indica un 50% más de lo normal, y 2 el doble de lo normal.
Todas las celdas de una misma columna deben tener la misma anchura. Si se especifican distintos valores
de anchuras se toma el mayor de ellos.
HEIGHT especifica la altura de la celda en pixels. Todas las celdas de una misma fila deben tener la misma
altura. Si se especifican distintos valores de alturas se toma el mayor de ellos.
item 1 WIDTH=200 item 2 WIDTH=40% item 3
item 4 HEIGHT=100 item 5 item 6
 Alineación del contenido de las celdas

El atributo ALIGN permite alinear horizontalmente el contenido de la celda. Los valores pueden ser left
(izquierda), center (centro) y right (derecha). El valor por defecto es left.
El atributo VALIGN permite alinear verticalmente el contenido de la celda. Los valores pueden ser top
(arriba), middle (centro) y bottom (abajo). El valor por defecto es middle.
Ambos atributos pueden aparecer en los elementos TR, TH y TD. Si aparecen en TR especifican valores
válidos para toda la fila, aunque siempre tendrán preferencia los que aparezcan en los elementos TH y TD.
item 2 WIDTH=200
item 1 ALIGN=right item 3
ALIGN=center
item 4 HEIGHT=100, VALIGN=top
item 5 item 6
 Color de fondo de las celdas

El atributo BGCOLOR de los elementos TR, TH y TD permite especificar un color de fondo para la celda. En
el caso de TR, el color se aplica a toda la fila.

 Imagen de fondo de las celdas

El atributo BACKGROUND permite colocar una imagen de fondo en una fila de la tabla (si se aplica a TR) o
en una celda (si se aplica a TH o TD). En función del navegador utilizado la imagen puede fluir de una celda
a otra o comenzar de nuevo en cada una de ellas.

 Celdas vacías
Si una celda de una tabla está vacía no se dibujan los bordes a su alrededor.
no vacío no vacío no vacío no vacío no vacío

no vacío no vacío no vacío no vacío
Para evitar este efecto poco estético se suele colocar en la celda un espacio en blanco forzado,
no vacío no vacío no vacío no vacío no vacío

no vacío no vacío no vacío no vacío

4°
PRACTICA DE CLASE
GRADO
NIVEL ED. SECUNDARIA TEMA TABLAS CON MULTIFILAS/MULTICOLUMNAS
MARCO TEORICO
TABLAS CON MULTIFILAS Y MULTICOLUMNAS:
Las celdas de una tabla se pueden extender en la fila o en la columna. Para ello se utilizan los atributos
ROWSPAN y COLSPAN de los elementos TH y TD:
 ROWSPAN: extiende una celda a varias filas. Formato:
ROWSPAN=número de filas
 COLSPAN: extiende una celda a varias columnas. Formato:
COLSPAN=número de columnas
Cuando se utilizan estos atributos hay que tener especial cuidado de que el número de columnas de todas las
filas sea el mismo.
 Tabla con multicolumnas

<TABLE BORDER>
<TR><TH BGCOLOR=#FFBBBB COLSPAN=3>Primer curso</TH></TR>
<TR><TD>IP1</TD>
<TD>primero</TD>
<TD ALIGN=RIGHT>7,5</TD></TR>
<TR><TD>IP2</TD>
<TD>segundo</TD>
<TD ALIGN=RIGHT>7,5</TD></TR>
</TABLE>
Primer curso
IP1 primero 7,5
IP2 segundo 7,5
 Tabla con multifilas

<TABLE BORDER>
<TR BGCOLOR=#FFBBBB><TH>asignatura</TH>
<TR><TD>IP1</TD>
<TD>primero</TD>
<TD ALIGN=RIGHT ROWSPAN=2>7,5</TD></TR>
<TR><TD>IP2</TD>
<TD>segundo</TD></TR>
</TABLE>

IP1 primero
7,5
IP2 segundo
 Tabla con multifilas y multicolumnas

<TABLE BORDER>
<TR><TH BGCOLOR=#FFBBBB COLSPAN=3>Primer curso</TH></TR>
<TR><TD>IP1</TD>
<TD>primero</TD>
<TD ALIGN=RIGHT ROWSPAN=2>7,5</TD></TR>
<TR><TD>IP2</TD>
<TD>segundo</TD></TR>
</TABLE>
Primer curso
IP1 primero
7,5
IP2 segundo
4°
PRACTICA DE CLASE
GRADO
NIVEL ED. SECUNDARIA TEMA FORMATO DE TABLAS AVANZADO
MARCO TEORICO
APLICACIONES DE LAS TABLAS
Dentro de una celda puede haber de todo: párrafos, titulares, imágenes e incluso otras tablas. Esto permite
utilizar las tablas para dar formato al contenido de una página web.
Así por ejemplo, las tablas se utilizan para:

 Distribuir imágenes y textos.
 Crear texto en varias columnas.
 Colocar notas al margen.
 Crear menús laterales.
 Crear barras de navegación.
A pesar de estas facilidades, no conviene abusar de las tablas para formatear el contenido de las páginas web.
Existe una alternativa más ventajosa consistente en el uso de hojas de estilo en cascada (CSS). Una de sus
principales ventajas es que permite obtener páginas más accesibles.
TABLAS AVANZADAS
En el modelo de tabla más avanzado una tabla consta de tres partes:
 El encabezado de la tabla, THEAD
 El cuerpo de la tabla, TBODY
 El pie de la tabla, TFOOT
Las tres partes contienen elementos TR, que a su vez contienen elementos TH y TD. El encabezado y el pie
están pensados para actuar como partes fijas de la tabla, de forma que si ésta es mayor que la ventana donde
se muestra, el encabezado y el pie se mantienen, mientras que el resto de las filas se desplazan.
Entre las tres secciones se dibujan líneas más gruesas que las que separan dos filas normales.
 Agrupación de columnas
Las columnas de una tabla se pueden agrupar mediante los elementos COL y COLGROUP, que definen
propiedades tales como alineación y anchura de columnas particulares o grupos de columnas. Los
elementos COL y COLGROUP deben preceder a todas las filas de la tabla, ya que la información que
proporcionan debe ser conocida para formatear adecuadamente la misma.
 COL establece las propiedades de una columna o grupo de columnas. Sus atributos son ALIGN
(alineación horizontal), SPAN (número de columnas consecutivas a las que afecta el elemento
COL) y WIDTH (anchura de la columna).
 COLGROUP permite agrupar columnas. Normalmente consta de varios elementos COL en su
interior. Sus atributos son ALIGN y VALIGN, y afectan a todas las columnas del grupo.
Por tanto, una tabla puede constar de los siguientes elementos: CAPTION, COL, COLGROUP, THEAD,
TBODY y TFOOT. Estos tres últimos constan de elementos TR, y éste a su vez de elementos TH y TD.
Ejemplo: tabla con THEAD, TBODY, TFOOT, COL y COLGROUP.
<TABLE BORDER WIDTH=400>

<CAPTION>Título de la tabla</CAPTION>
<COLGROUP>
<COL ALIGN=left>
<COLGROUP>
<COL ALIGN=right SPAN=2>
<THEAD>
<TR BGCOLOR=#BBBBFF><TH COLSPAN=3>Encabezado de la tabla</TH></TR>
<TR BGCOLOR=#FFBBBB><TH ROWSPAN=2>Título de la fila</TH>
<TH COLSPAN=2>Columnas de datos</TH></TR>
<TR BGCOLOR=#FFFFBB><TH>Dato 1</TH>
<TH>Dato 2</TH></TR></THEAD>
<TBODY>
<TR><TD>Fila 1</TD>
<TD>Item 11</TD>
<TD>Item 12</TD></TR>
<TR><TD>Fila 2</TD>
<TD>Item 21</TD>
<TD>Item 22</TD></TR>
<TR><TD>Fila 3</TD>
<TD>Item 31</TD>
<TD>Item 32</TD></TR></TBODY>
<TFOOT>
<TR BGCOLOR=#CCCCCC><TH COLSPAN=3>Pie de la tabla</TH></TR></TFOOT>
</TABLE>
Título de la tabla
Encabezado de la tabla
Columnas de datos
Título de la fila
Dato 1 Dato 2
Fila 1 Item 11 Item 12
Pie de la tabla
 Atributos avanzados de las tablas
Además de los atributos ya estudiados, el modelo avanzado de tabla incluye los siguientes atributos:
 HSPACE=número. Especifica el espacio horizontal, en pixels, que se deja a la izquierda y a la
derecha de la tabla. Es útil para dejar espacio alrededor de tablas alineadas a la izquierda o a la
derecha.
 VSPACE=número. Especifica el espacio vertical, en pixels, que se deja encima y debajo de la
tabla.
 FRAME: Especifica cuáles de las líneas exteriores de la tabla deben mostrarse. Sus posibles
valores son:
o void: no dibuja bordes
o above: dibuja sólo el borde superior
o below: dibuja sólo el borde inferior
o hsides: dibuja sólo los bordes inferior y superior
o lhs: dibuja sólo el borde izquierdo
o rhs: dibuja sólo el borde derecho
o vsides: dibuja sólo los bordes izquierdo y derecho
o box (border): dibuja todos los bordes
 RULES: Especifica cuáles de las líneas interiores de la tabla deben mostrarse. Sus posibles
valores son:
o none: no dibuja las líneas interiores
o groups: dibuja líneas entre los grupos de la tabla. Los grupos vienen dados por los
elementos THEAD, TBODY, TFOOT y COLGROUP.
o rows: dibuja sólo las líneas horizontales
o cols: dibuja sólo las líneas verticales
o all: dibuja todas las líneas interiores
Ejemplo: tabla con atributos RULES y FRAME.
Título de la tabla
Encabezado de la tabla
Columnas de datos
Título de la fila
Dato 1 Dato 2
Pie de la tabla

4to Año - I Bim

Cargado por

Información del documento

Descripción 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

4to Año - I Bim

Cargado por

Copyright:

Formatos disponibles

UNIDAD DE GESTIÓN EDUCATIVA LOCAL ÁREA/SUB EPT - DISEÑO WEB - HTML

<MARCA ATRIBUTO="VALOR"> bloque de texto </MARCA>

 Distinción entre mayúsculas y minúsculas

ELEMENTOS BÁSICOS DE HTML

Fuente de máquina de escribir

<P>Texto del párrafo alineado a la izquierda</P>

 Espaciado vertical y horizontal

 Lista sin Numerar

 Resultado final de la página ejecutada

 Resultado final de la página ejecutada

PRESENTÓ SI NO NOTA FIRMA DEL PP.FF.

UNIDAD DE GESTIÓN EDUCATIVA LOCAL ÁREA/SUB EPT - DISEÑO WEB - HTML

<HR SIZE="20" WIDTH="300">

Curso de Diseño de Páginas web para Internet

 URL (UNIFORM RESOURCE LOCATOR)

Curso de diseño de páginas web

Elementos básicos de HTML

Inclusión de imágenes en una página web

Con borde Sin borde

<A HREF="url del documento#etiqueta">texto o imagen del enlace</A>

En un lugar del documento debe existir un ancla de la forma:

Inclusión de imágenes en una página web

<A HREF="cap0304.html#imagenes">Inclusión de imágenes en una página web</A>

En el comienzo de la sección a la que se quiere saltar se deberá colocar lo siguiente:

El URL puede omitirse si el enlace se refiere al propio documento:

<A HREF="#imagenes">Inclusión de imágenes en una página web</A>

Enlaces a otros documentos

<A HREF="imagenes/torreoro.jpg">La Torre del Oro de Sevilla</A>

<A HREF="MAILTO:dirección de correo">texto del enlace</A>

UNIDAD DE GESTIÓN EDUCATIVA LOCAL ÁREA/SUB EPT - DISEÑO WEB - HTML

<FONT FACE="tipo" SIZE="tamaño" COLOR="color">texto</FONT>

<FONT FACE="COURIER" SIZE="5" COLOR="RED">Courier, tamaño 5, color rojo</FONT>

<FONT SIZE="3" COLOR="RED">tamaño 3, color rojo</FONT>

<FONT SIZE="1" COLOR="RED">tamaño 1, color rojo</FONT>

ATRIBUTOS DE LAS IMÁGENES

Alineación superior: ALIGN="TOP"

La misma imagen, pero ahora alineada a la derecha. En este caso, la imagen

WIDTH=50 (la altura se calcula automáticamente)

<IMG SRC="imagenes/log.gif" ALT="Logo" WIDTH="178" HEIGHT="178">

PRESENTÓ SI NO NOTA FIRMA DEL PP.FF.

TIPOS ESPECIALES DE IMÁGENES

Imagen no transparente Imagen transparente

Imagen no entrelazada Imagen entrelazada

APLICACIONES DE LAS IMÁGENES

UNIDAD DE GESTIÓN EDUCATIVA LOCAL ÁREA/SUB EPT - DISEÑO WEB - HTML

 Ejemplo de una Tabla en HTML

II, ITIG, ITIS Primero 7,5

Ejemplo 1: Tabla que ocupa toda la anchura de la ventana.

item 1 item 2 item 3

 Ejemplo 2: ejemplo de tabla flotante alineada a la izquierda con el atributo

UNIDAD DE GESTIÓN EDUCATIVA LOCAL ÁREA/SUB EPT – DISEÑO WEB - HTML

 Resultado Final de Página Ejecutada:

 Resultado Final de Página Ejecutada:

PRESENTÓ SI NO NOTA FIRMA DEL PP.FF.

UNIDAD DE GESTIÓN EDUCATIVA LOCAL ÁREA/SUB EPT - DISEÑO WEB - HTML

 Tamaño de las celdas

item 1 WIDTH=200 item 2 WIDTH=40% item 3

item 4 HEIGHT=100 item 5 item 6

 Alineación del contenido de las celdas

 Color de fondo de las celdas

 Imagen de fondo de las celdas

no vacío no vacío no vacío no vacío no vacío

no vacío no vacío no vacío no vacío no vacío