3 septimo

TECNOLOGIA E INFORMATICA
http://sotocarlos.blogspot.com/ CARLOSSOTO@2015
COLEGIO HISPANOINGLES
AREA DE TECNOLOGIA E INFORMATICA
GUIA PERIODO No. 03 GRADO: SEPTIMO BASICA
INTENSIDAD HORARIA SEMANAL: 2 Horas TIEMPO DE DESARROLLO: 10 SEMANAS
DOCENTE: CARLOS ALBERTO SOTO CELIS
Desempeño 1. Aprende losconceptosbásicosparadiseñarydesarrollarpáginasWebutilizandoHTML 4.1. /
HTML 5.0.
REFRESCANDO LA MEMORIA… (PRECONCEPTOS)
Consultar: J.C.R. Licklider, Robert W. Taylor, Donald Davies, Paul Baran, Leonard Kleinrock, DanielKarrenberg, BenSenegal, LenBosack,
Robert Caillau, TimBerners Lee, Ted Nelson, Marc Andreesen, Paul Mockapetris, Steve Daniels, Tom Truscott, Douglas Engelbart,
William Gibson, Vinton Cerf , Robert Kahn, Lawrence Roberts y Ada Lovelace.
AMPLIANDO LA PERSPECTIVA Y AFIANZANDO LOS CONOCIMIENTOS
1.- INTRODUCCION A HTML 4
1.1.- ¿Qué es la WorldWide Web? La World Wide Web(Web), encastellano"TejidoMundial", es una red de recursos de información.
La Web se basa entres mecanismos para hacer que estos recursos estén listos y a disposición de la mayor audiencia posible:
 Un esquema uniforme de nombres para localiza r recursos en la Web (p.ej., URIs).
 Protocolos, para acceder a recursos con nombre en la Web (p.ej., HTTP).
 Hipertexto, para navegar fácilmente entre recursos (p.ej., HTML).
1.1.1.- Introducción a los URIs. Todos los recursos disponiblesenla Web -- documentos HTML, imágenes, videoclips, programas, etc. --
tienenuna direcciónque puede ser codificada mediante un Universal Resource Identifier, o "URI", es decir, un Identificador Universal de
Recursos.
Los URIs se componen normalmente de tres partes:
 El esquema de nombres del mecanismo usado para acceder al recurso.
 El nombre de la máquina que aloja el recurso.
 El nombre en sí del recurso, dado en forma de "path" o "ruta de acceso".
Consideremos el URI que designa la página de InformesTécnicos del W3C:http://www.w3.org/TR. Este URI puede leerse de la siguiente
manera:Hayundocumentodisponible a través del protocoloHTTPque se encuentra enla máquina www.w3.org, accesible a través de
la ruta "/TR".
1.1.2.- Identificadores de fragmento. Algunos URIsse refieren a una localizacióndentrode unrecurso. Este tipode URIs termina con un
"#" seguidode un identificador de vínculo(llamadoidentificador de fragmento). Por ejemplo, aquí tenemos un URI que apunta a un
vínculo llamando seccion_2: http://al gunsitio.com/html/superior.html#seccion_2
1.1.3.- URIs relativos. Un URI relativo nocontiene informaciónsobre el esquema de nombres. Suruta de acceso se refiere generalmente
a un recurso que está enla misma máquina que el documento actual. Los URIsre lativos puedencontener indicadores relativos de ruta
(p.ej., ".." significa un nivel superior enla jerarquía definida por la ruta de acceso), ypuede contener identificadores de fragmento. Los
URIs relativos se conviertenenURIs completos a partir de un URI base. Comoejemplode conversión de unURI relativo, supongamos
que tenemos el URI base "http://www.acme.com/soporte/intro.html". El URI relativode la siguiente línea de código de un víncu lo
hipertextual: <A href="proveedores.html">Proveedores</A>, s e expandiría al URI completo
"http://www.acme.com/soporte/proveedores.html", mientrasque el URI relativo de la siguiente línea de códigode una imagen: <IMG
src="../iconos/logo.gif" alt="logo">, se expandiría al URI completo "http://www.acme.com/iconos/lo go.gif".
En HTML, los URIs se usan para:
 Crear un vínculo a otro documento o recurso (A y LINK).
 Crear un vínculo a una hoja de estilo o script externos (LINK y SCRIPT).
 Incluir una imagen, objeto o aplicación en una página (IMG, OBJECT, APPLET e INPUT).
 Crear un mapa de imágenes (MAP y AREA).
 Enviar un formulario (FORM).
 Crear un documento con marcos (FRAME e IFRAME).
 Citar una referencia externa (Q, BLOCKQUOTE, INS y DEL).
 Hacer referencia a convenciones de metadatos que describen un documento (HEAD).
 Designar una imagen de fondo (BODY). Este es un uso desaprobado y deberían usarse hojas de estilo en su lugar.

1.2 ¿Qué es el HTML? Para publicar informaciónydistribuirla globalmente, se necesita unlenguaje entendido universalmente, una
especie de lengua franca de publicaciónque todaslas computadoras puedancomprender potencialmente. El lenguaje de publicaci ón
usadopor la WorldWide Webes el HTML (acrónimode HyperText MarkupLanguage, Lenguaje para el Formato de Documentos de
Hipertexto).
El HTML da a los autores las herramientas para:
 Publicar documentos en línea con encabezados, textos, tablas, listas, fotos, etc.
 Obtener información en línea a través de vínculos de hipertexto, haciendo clic con el botón de un ratón.
 Diseñar formularios para realizar transacciones con servicios remotos, para buscar información, hacer reservas, pedir
productos, etc.
 Incluir hojas de cálculo, videoclips, sonidos, y otras aplicaciones directamente en sus documentos.
Consultar:
1.- Elaborar un mapa conceptual sobre la historia de HTML
2.- Consultar sobre HTML 4, HTML 4.01 y HTML 5.0
3.- A que se refiere la palabra Internacionalización en HTML 4
4.- ¿Qué es hojas de estilo?
5.- ¿Qué es un script?
6.- ¿Qué es sitio web o web site?
7.- ¿Qué es una página web?
2.- MI PRIMERA PÁGINA WEB
2.1.- Estructura de una página web. Veamos el código siguiente para saber cómo estructurar estas etiquetas:

<html>

<head>
</head>

<body>
</body>
</html>
Vemos que primero tenemos la etiqueta <html>, y que ésta engloba a las
otras dos. De esta forma, escribiendo la etiqueta <html> y su cierre,
declaramos al navegador que se trata de un documento html.
Posteriormente tenemos las etiquetas <head> y<body>. Lo que escribamos
dentro de la etiqueta <body> será loque muestre el navegador a nuestros
visitantes.
2.2.- Ejemplo. Digite el siguiente código, en editor Microsoft Expresión Web:
<html>
<head>
<title>Mi primera página</title>
</head>
<body>
Hola mundo
</body>
</html>
Este es el resultado, de la página web:
3.- ESTRUCTURA FUNDAMENTAL DE LOS TEXTOS
3.1.- Estilos de párrafo. Estos estilos o formatos actúan a nivel de párrafo.
 Sirve para delimitar un párrafo. Inserta una línea en blanco antes del texto.
… Justificar el texto delpárrafoa la izquierda (ALIGN=LEFT), derecha (RIGHT), al centro
(CENTER) o a ambos márgenes (JUSTIFY).
<center> ... </center> Permite centrar todo el bloque de texto encerrado.
<pre width=x> ... </pre> Representa el textoencerradoenella con untipode letra de paso fijo. El parámetro
WIDTH especifica el número máximode caracteres en una línea.

<blockquote> ... <blockquote> Mete sangrías de párrafo tanto a derecha como a izquierda. Suele usarse como
tabulador.
Inserte el siguiente código:
<html>
<head>
<title>Estilos de párrafo</title>
</head>
<body>
La etiqueta es inicio de párrado y final de párrafo. 
Sirve para delimitar un párrafo.
 
La etiqueta es inicio de párrado o titulo centrado y 
final de párrafo. Centra titulo o párrafo.
 
La etiqueta es inicio de párrado o titulo hacia la izquierda y 
final de párrafo. A la izquierda titulo o párrafo.
 
La etiqueta es inicio de párrado o titulo hacia la derecha y 
final de párrafo. A la derecha titulo o párrafo.
 
La etiqueta es inicio de párrado o titulo justificado y 
final de párrafo. Justificado titulo o párrafo. Esto es texto justificado. La única razón de que este
párrafo sea tan largo es provocar varios saltos de línea, a fin de que se pueda ver que, efectivamente, está
alineado tanto en el borde derecho como en el izquierdo. 
 
<PRE WIDTH=5>Representa el texto encerrado en ella con un tipo de letra de paso fijo.</PRE>
 
<BLOCKQUOTE>Si quieres ver el texto </BLOCKQUOTE>
<BLOCKQUOTE>indentado por ambos</BLOCKQUOTE>
<BLOCKQUOTE>márgenes usa el Blockquote.</BLOCKQUOTE>
</body>
</html>
3.2.- Los encabezados. El HTML nos ofrece seis etiquetas distintas para mostrar cabeceras o títulos.
<html>
<head>
<title>Los encabezados</title>
</head>
<body>
<h1>Cabecera de nivel 1</h1>
</body>
</html>
3.3.- Cambio el tipode letra. Todasestasetiquetas nos permiten cambiar de una manera u otra el aspectodel tipode letra que estemos
utilizando y se pueden utilizar dentro de un párrafo.
... Pone el texto en negrita.
... Representa el texto en cursiva.
... Para subrayar algo.
<s>...</s> Para tachar.
<tt>...</tt> Permite representar el texto en un tipo de letra de paso fijo.
... Letra superíndice.
... Letra subíndice.
<big>...</big> Incrementa el tamaño del tipo de letra.
... Disminuye el tamaño del tipo de letra.

<html>
<head>
<title>Cambio de tipo de letra</title>
</head>
<body>
Texto en negrita 
Texto en cursiva 
Texto subrayado 
<s>Texto tachado</s> 
e=mc2 
ai,j=bi,j+1 
<big>Texto grande</big> 
Texto pequeño 
</body>
</html>
3.4.- Otros elementos.
<html>
<head>
<title>Otros elementos</title>
</head>
<body>
Texto fuerte y en negrita 
Texto con énfasis 
Linea horizontal 
<hr>
</body>
</html>
3.5.- Caracteres especiales.
<html>
<head>
<title>Caracteres especiales</title>
</head>
<body>
vocales minúsculas con tilde 
a tildada   á 
e tildada   é 
i tildada   í 
0 tildada   ó 
u tildada   ú 
vocales mayúsculas con tilde 
a tildada   Á 
e tildada   É 
i tildada   Í 
0 tildada   Ó 
u tildada   Ú 
Otros caracteres 
Código     Resultado 
<tt>&#64</tt>        &#64 
<tt>&#191</tt>        &#191 
<tt>&#63</tt>        &#63 
</body>
</html>
3.6.- Formato de texto: tamaño, color y tipo de fuente.
<html>

<head>
<title>Texto: color, tamaño y tipo de fuente</title>
</head>
<body>
>>> COLOR DE TEXTO <<< 

Texto ROJO 
Texto AZUL 
Texto AZUL MARINO 
Texto VERDE 
Texto OLIVA 
Texto AMARILLO 
Texto LIMA 
Texto MAGENTA 
Texto PURPURA 
Texto CYAN 
Texto MARRON 
Texto NEGRO 
Texto GRIS 
Texto TEAL 
Texto BLANCO 

>>> TAMAÑO DE TEXTO <<< 
Tamaño de texto/fuente es de 4 
Tamaño de texto/fuente es de 8 
Tamaño de texto/fuente es de 12 
>>> TIPO DE TEXTO (FUENTE) <<< 
Fuente Times New Roman 
Fuente Arial 
Fuente Courier New 
Fuente Courier 
Fuente Roman 
</body>
</html>
Desempeño 2. Aprende a crear vínculos de navegación mediante el uso de hipervínculos, mapas de imagen,
tablas y marcos.
AMPLIANDO LA PERSPECTIVA Y AFIANZANDO LOS CONOCIMIENTOS
4.- LISTAS
<html>
<head>
<title>Listas ordenadas y no ordenadas</title>
</head>
<body>
lista ordenada (numerada)
<ol>
<li>Primera línea
<li>Segunda línea
<li>Tercera línea
<li>Cuarta línea
</ol>
lista desordenada (no numerada)
<ul>
<li>Primera línea
<li>Segunda línea
<li>Tercera línea
<li>Cuarta línea
</ul>
lista ordenada (por letras mayúsculas)
<ol type=A>

<li>Primera línea
<li>Segunda línea
<li>Tercera línea
<li>Cuarta línea
</ol>
lista ordenada (por letras minúsculas)
<ol type=a>
<li>Primera línea
<li>Segunda línea
<li>Tercera línea
<li>Cuarta línea
</ol>
lista ordenada (por numero romanos en mayúsculas)
<ol type=I>
<li>Primera línea
<li>Segunda línea
<li>Tercera línea
<li>Cuarta línea
</ol>
lista ordenada (por número romano en minúsculas)
<ol type=i>
<li>Primera línea
<li>Segunda línea
<li>Tercera línea
<li>Cuarta línea
</ol>
</body>
</html>
5.- TABLAS
Las tablasson una de las etiquetas más útiles que podemos encontrar en HTML, ya que nos van a permitir "maquetar", darle la
apariencia externa a nuestra página, comoloverá el usuario. La técnica es dividiendola página en pequeñas celdase insertandoencada
celda de la tabla, el elemento y/o los elementos que compondrán nuestra página web.
5.1.- Estructura de una tabla:
Las tablas están formadas por celdas agrupadas en filas y columnas
Una fila está compuesta por uno o más espacios (celdas) alineados horizontalmente.
Una columna está compuesta por uno o más espacios alineados verticalmente.
Una celda es el espacio formado por la intersección de una fila y una columna
El número de celdas esta componen la tabla está definido por el diseñador de la pág ina.
Columna 1 Columna 2 Columna 3
Fila 1 Celda(1,1) Celda(2,1) Celda(3,1)
<html>
<head>
<title>Tabla</title>
</head>
<body>
Tabla de 3*2
<table border>
<tr><td>A</td> <td>B</td> <td>C</td></tr>
<tr><td>D</td> <td>E</td> <td>F</td></tr>
</table>
Tabla de fila expandida
<table border>
<tr><td>Item 1</td><td rowspan=2>Item 2</td>
<td>Item 3</td> </tr>
<tr><td>Item 4</td> <td>Item 5</td></tr>
</table>

<html>
<head>
<title>Tabla de las Vocales</title>
</head>
<body>
Tabla de las Vocales
<table border>
<tr><td colspan =5>LAS VOCALES</td></tr>
<tr><td>A</td><td>E</td><td>I</td><td>O</td><td>U</td></tr>
</table>
</body>
</html>
Tabla de columna expandida
<table border>
<tr><td>Item 1</td><td colspan=2><center>Item 2</center></td></tr>
<tr><td>Item 3</td> <td>Item 4</td> <td>Item 5</td></tr>
</table>
Tabla de columnas y filas expandidas
<table border>
<tr><td align=center rowspan=2>A</td> <td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
<tr><td>5</td> <td>6</td> <td>7</td></tr>
</table>
Tabla de columnas y filas expandidas
<table border>
<tr><td align=center rowspan=2>A</td> <td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr><tr><td>B</td><td align=center colspan=2>C</td></tr>
</table>
Tabla con cabeceras
<table border>
<tr><TH>Head1</TH> <TH>Head2</TH> <TH>Head3</TH></tr>
<tr><td>A</td> <td>B</td> <td>C</td></tr>
<tr><td>D</td> <td>E</td> <td>F</td></tr>
</table>
Tabla con todos los elementos y parámetros
<table border>
<tr><td><TH rowspan=2></TH> <TH colspan=2>Media</TH> </td> </tr>
<tr><td><TH>Altura</TH><TH>Peso</TH></td> </tr>
<tr><TH rowspan=2>Sexo</TH> <TH>Hombres</TH><td align=center>1.9</td><td align=center>85</td> </tr>
<tr> <TH>Mujeres</TH><td align=center>1.7</td><td align=center>60</td> </tr>
</table>
Tabla con las propiedades de los colores
<table border=1 bordercolor="silver" bgcolor="black"><td>
Tabla con borde de color plateado (silver) y fondo negro (black). El color de letra (font color) es blanco
</td></table>
</body>
</html>
6.- IMAGEN
<html>
<head>
<title>Imagenes</title>
</head>
<body>

Una imagen desde la unidad c:/mis documentos/mis imagenes 
<img alt="Esto es una imagen" src="math004.jpg" width="226" height="261">
 
Una imagen ubicada a la derecha 
<img alt="Esto es una imagen ubicada a la derecha" src="math004.jpg" width="226" height="261" align=right>
 
Una imagen ubicada a la izquierda 
<img alt="Esto es una imagen ubicada a la izquierda" src="math004.jpg" width="226" h eight="261" align=left>
 
<img alt="Estoes una imagen" src="math004.jpg" width="226" height="261" align="middle">Texto en la mitad. Esto es una
imagen
 
<img alt="Estoes una imagen" src="math004.jpg" width="226" height="261" align="top">Texto arriba. Esto es una imagen
 
<img alt="Estoes una imagen" src="math004.jpg" width="226" height="261" align="bottom">Texto abajo. Estoes una imagen
 
</body>
</html>
7.- VIDEO
<html>
<head>
<title>Multimedia VIDEO</title>
</head>
<body>
Videode YouTube comoObject
<object width="425" height="344"><param name="movie"
value="http://www.youtube.com/v/h7MuFDVEUro&hl=en_US&fs=1&"></param>
<paramname="allowFullScreen" value="true"> </param><paramname="allowscriptaccess" value="always"></param>
<embedsrc="http://www.youtube.com/v/h7MuFDVEUro&hl=en_US&fs=1&" type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true" width="425" height="344"> </embed></object>
video MP4
<embedsrc= "Simpsons_mp4.mp4" type="video/mp4"autostart="false" width="165" height="140"></embed>
video WMV
<embedsrc= "THE SIMPSONS_wmv.wmv" type="video/wmv" autostart="false" width="165" height="140"></embed>
</body>
</html>
8.- SONIDO
<html>
<head>
<title>Multimedia SONIDO</title>
</head>
<body>
Musica de fondo
<bgsound src="Star_Wars.mid" loop="-1">
Musica MP3
<embedsrc= "beyonce feat. ladygaga - telephone.mp3" type="audio/mp3" autostart="false" width="165" height="140"></embed>

Musica MIDI
<embed src= "A_day_in_the_life.mid" type="audio/mid" autostart="false" width="165" height="140"></embed>
Musica WAV
<embed src= "free_breakbeat.wav" type="audio/wav" autostart="false" width="165" height="140"></embed>
Musica WMA
<embed src= "Symphony.wma" type="audio/wma " autostart="false" width="165" height="140"></embed>
Media Player: wma, mp3
<object id="MediaPlayer" height=46 classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" standby="Loading Windows Media
Player components..."
type="application/x-oleobject"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112">
<param name="filename" value="Symphony.wma">
<param name="Showcontrols" value="True">
<param name="autoStart" value="False">
<embed type="application/x-mplayer2" src="Symphony.wma" name="MediaPlayer"></embed>
</object>
</body>
</html>
…- SONIDO DE FONDO (para todas las páginas)
<html>
<head>
<title>Sonido de fondo página web</title>
<bgsound src="Symphony_No_3.wma" loop="-1">
</head>
<body>
Sonido de fondo página web
</body>
</html>
9.- COLOR DE FONDO Y/O IMAGEN
Color de fondo:
<html>
<head>
<title>Color de fondopágina web</title>
</head>
<bodybgcolor=cyan>
Color de fondo de la página web es cyan
</body>
</html>
Imagencomofondo:
<html>
<head>
<title>Imágende fondopágina web</title>
</head>
<bodyimg background="ASTEROIDE.jpg">
Imágende fondopágina web
</body>
</html>
10.- INSERTAR UN ARCHIVO DE FLASH .SWF
<html>
<head>
<title>Archivo de Flash .SWF – ejemplo 1</title>

</head>
<body>
Archivo de Flash .swf
<object CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="250" height="100"
codebase="http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0">
<param name="MOVIE" value="Demo.swf">
<param name="PLAY" value="true">
<param name="LOOP" value="true">
<param name="QUALITY" value="high">
<embed SRC="Demo.swf" width="250" height="100" play="true" loop="true" quality="high"
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash">
</embed>
</object>
</body>
</html>
11.- INSERTAR UN ARCHIVO DE FLASH .SWF
<! "file:///C:/Users/juanca/Documents/Mis%20sitios%20Web/" >
<html>
<head>
<title> Archivo de Flash .SWF – ejemplo 2</title>
</head>
<body>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
width="420" height="420">
<param name="movie" value="file:///C:/Users/juanca/Documents/Mis%20sitios%20Web/naves.swf" />
<param name="quality" value="high" />
<embed src="naves.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-
shockwave-flash" width="420" height="420"></embed>
</object>
</body>
</html>
12.- INSERTAR APPLET DE JAVA
<html>
<head><title>applet de java - juego</title></head>
<body>
<applet code="ufo_attack.class" width=200 height=450> </applet>
</body>
</html>
http://www.w3schools.com/
http://www.tutorialspoint.com/html5/html5_editor.htm

<html>
<head>
<title>Listas ordenadas (no numerada)</title>
</head>
<body>
The days of the week
<ol>
<li>Sunday
<li>Monday
<li>Tuesday
<li>Wednesday
<li>Thursday
<li>Friday
<li>Saturday
</ol>
</body>
</html>
<html>
<head>
<title>Listas ordenadas (no numerada)</title>
</head>
<body>
Months ofthe year
<ul>
<li>January
<li>February
<li>March
<li>April
<li>May
<li>June
</ul>
</body>
</html>
<html>
<head>
<title>Listas ordenadas en Mayúscula</title>
</head>
<body>
El esqueleto humano
<ol type=A>
<li>Es el conjunto totaly organizadodepiezas óseas.
<li>Proporciona alcuerpo humanouna firme estructura multifuncional.
<li>El esqueleto deun ser humano adultotiene, aproximadamente, 206
huesos.
</ol>
</body>
</html>
<html>
<head>
<title>Listas ordenadas en Minúscula</title>
</head>
<body>
El petróleo
<ol type=a>
<li>Es una mezcla homogénea decompuestos orgánicos
<li>Se produce en elinterior dela Tierra.
<li>Es de origen fósil, fruto dela transformaciónde materia orgánica.
</ol>
</body>
</html>
<html>
<head>
<title>Listas ordenadas por nro. romano en minúsculas</title>
</head>
<body>
El gas
<ol type=i>
<li>Las moléculas deun gas seencuentran prácticamentelibres.
<li>Los gases ocupan completamenteel volumen del recipientequelos
contiene.
<li>Los gases no tienenforma definida,adoptandola de los recipientes
que las contiene.
</ol>
</body>
</html>
<html>
<head>
<title>Listas ordenadas por nro. romano en mayúsculas</title>
</head>
<body>
El gas
<ol type=I>
<li>La principalcaracterística delos gases, es queno pueden verseni
tocarse.
<li>Cualquiergas seconsidera comoun fluido.
<li>Un gas no tieneforma ni volumen fijo.
</ol>
</body>
</html>

<html>
<head>
<title>Tabla de1 columna *1 fila</title>
</head>
<body>
Tabla de 1 columna *1 fila
<table border>
<tr><td>A</td></tr>
</table>
</body>
</html>
<html>
<head>
<title>Tabla de1 columna *2 filas</title>
</head>
<body>
Tabla de 1 columna *2 filas
<table border>
<tr><td>A</td></tr>
<tr><td>A</td></tr>
</table>
</body>
</html>
<html>
<head>
<title>Tabla delas Vocales</title>
</head>
<body>
<table border>
<tr><td colspan =5>LAS VOCALES</td></tr>
<tr><td>A</td><td>E</td><td>I</td><td>O</td><td>U</td></tr>
</table>
</body>
</html>
<html>
<head>
</head>
<body>
<table border>
<tr><td rowspan=6>LAS VOCALES</td></tr>
<tr><td>A</td></tr>
<tr><td>E</td></tr>
<tr><td>I</td></tr>
<tr><td>O</td></tr>
<tr><td>U</td></tr>
</table>
</body>
</html>
<html>
<head>
</head>
<body>
<table bgcolor="#F80A32"bordercolor ="F8F805"border="1"cellpadding="1"cellspacing="1">
<tr><td rowspan=6>LAS VOCALES</td></tr>
<tr><td>A</td></tr>
<tr><td>E</td></tr>
<tr><td>I</td></tr>
<tr><td>O</td></tr>
<tr><td>U</td></tr>
</table>
</body>
</html>
<html>
<head>
<title>Tabla de las Vocales</title>
</head>
<body>
<table border="1">
<tr><td bgcolor= "#FDFD04">AMARILLO</td></tr>
<tr><td bgcolor= "#1C04FD">AZUL</td></tr>
<tr><td bgcolor= "#FD0404">ROJO</td></tr>
</table>
</body>
</html>
http://html-color-codes.info/codigos-de-colores-hexadecimales/

ADOBE DREAMWEAVER CS6
Anclas
Sirve para definir posiciones dentro de undocumentoyse puede usar comodestinode hiperenlaces.
Para crear unancla(anchor)se procede de la siguiente manera:
<A NAME="nombre_etiqueta">Textodel elemento ancla</A>
Visualmente este elementonotiene ningunefecto, pero si lo tiene enforma interactiva con el usuario.
Para hacer referenciaal ancla o posiciónse hace el siguiente tipode hiperenlace:
<A HREF="#nombre_etiqueta">Texto delhiperenlace</A>
Color de Fondo de página
<head>
body{background-color:#F00;}
</head>
Imagende fondode página.
<head>
<title>Documento sintítulo</title> body{background-image: url(file:///C:/Users/soto/Documents/IMG_0415.JPG);}
</head>

Taller.- SUDOKU.
Las reglasbásicas para jugar al SUDOKU son muysencillas. Tienesque completar todaslascasillas existentes, teniendoencuenta que no
puedencoincidir 2 números iguales enla misma fila o enla misma columna. O sea, que no puedes tener 2 números idénticos en
horizontal y/o vertical. Tan solo puedes rellenar números del 1 al 6.
3 2 4 1 4
4 2 1 2 3
1 5 6 5 2
6 4 1 2 1 2
5 3 5 4 3 5
2 3 3 2 4
Taller.- MATH.
Trate de llenar los números que faltan. Utilicelos números del 1 al 9 para completar las ecuaciones. Cada número sólo se
utiliza una vez. Cada fila es una ecuación matemática. Cada columna es una ecuación matemática. Recuerde que la
multiplicación y división se realizan antes de la suma y resta.
- * = -5 + - = 8 / + = 6
- * * - / - - - +
- - = -7 / + = 9 - - = 1
+ - - + * * * *
* - = 2 - + = 12 + - = 3
= = = = = = = = =
-4 11 19 8 15 -14 -57 -7 12
Taller.-Puzzle.

3 septimo

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a 3 septimo

Similar a 3 septimo (20)

Último

Último (20)

3 septimo