INSTITUTO TECNOLÓGICO DE

OSTUACAN

NOMBRE DEL ALUMNO

TEMAS

MAESTRO

MATERIA

GRADO

GRUPO

FECHA:
 INTRODUCCION

HTML es el lenguaje con el que se escribe el contenido de las páginas web. Las
páginas web pueden ser vistas por el usuario mediante un tipo de aplicación llamada
cliente web o más comúnmente "navegador". Podemos decir por lo tanto que el HTML
es el lenguaje usado por para especificar el contenido que los navegadores deben
representar a la hora de mostrar una página web.

Este lenguaje nos permite aglutinar textos, imágenes, enlaces... y combinarlos a

nuestro gusto. La ventaja del HTML a la hora de representar el contenido en un
navegador, con respecto a otros formatos físicos como libros o revistas, es justamente
la posibilidad de colocar referencias a otras páginas, por medio de los enlaces
hipertexto.

1
 INDICE

USO DE TABLAS ............................................................................................................................ 4

Definición de una tabla sencilla................................................................................................... 4

Definición de una tabla con combinación de columnas ............................................................ 6

GENERACION DE PÁGINA ........................................................................................................... 8

FORMATO DE TEXTO.................................................................................................................. 11

ESTRUCTURACIÓN ..................................................................................................................... 16

Estructura básica ........................................................................................................................ 16

Cabecera..................................................................................................................................... 17

Cuerpo ......................................................................................................................................... 17

PRESENTACION DE FONDO ..................................................................................................... 18

Color de fondo mediante códigos de color Hex ....................................................................... 18

Color de fondo mediante nombres de colores HTML ............................................................. 18

Color de fondo mediante valores de color RGB ...................................................................... 18

HSL color de fondo mediante valores de color ........................................................................ 19

GENERACION DE IMAGEN ........................................................................................................ 19

Insertar una imagen: El elemento img ...................................................................................... 20

Dimensiones de la imagen: width y height ............................................................................... 20

Texto alternativo de la imagen: el atributo alt y longdesc ....................................................... 21

Tipos de formatos de imágenes ................................................................................................ 21

MARQUESINA ............................................................................................................................... 22

AtributosSección......................................................................................................................... 22

Controladores de eventosSección ............................................................................................ 24

MétodosSección ......................................................................................................................... 24

EjemplosSección ........................................................................................................................ 24

2
MAPA DE IMAGEN ....................................................................................................................... 25

El tag map ................................................................................................................................... 25

Atributo área ............................................................................................................................... 25

Atributo shape............................................................................................................................. 25

Atributo coords............................................................................................................................ 26

Atributo href ................................................................................................................................ 26

usemap........................................................................................................................................ 26

ANIMACIONES .............................................................................................................................. 27

PROGRAMAS RELACIONADOS CON EL DISEÑO WEB ....................................................... 30

Tipos de plataformas de creación web ................................................................................. 31

GLOSARIO DE TERMINOS ......................................................................................................... 32

CONCLUSION ............................................................................................................................... 36

BIBLIOGRAFIA ............................................................................................................................. 37

3
 USO DE TABLAS

La etiqueta <table>, permite definir tablas.

Una tabla es una cuadricula de casillas o
celdas, divididas en filas y columnas
Las tablas para componerlas se hace uso
de otra s etiquetas, las cuales no tienen
sentido sino están situadas dentro de una
etiqueta de tabla. Estas etiquetas son las
siguientes.

Etiquetas Descripción

<table> Definición de una tabla.

<th> Definición de cabecera de tabla.

<tr> Define una fila en la tabla.

<td> Define una celda en la tabla.

<caption> Define el nombre o título de la tabla.

<colgroup> Especifica un grupo de una o más columnas para aplicar formato.

<col> Especifica las propiedades de una columna de las columnas

definidas en
un elemento colgroup

<thead> Define la cabecera de la tabla.

<tbody> Define el cuerpo de la tabla

<tfoot> Define el pie de la tabla

Definición de una tabla sencilla

4
Para crear una tabla sencilla se ha de utilizar en primer lugar la etiqueta <table>, la
cual define la tabla. Y dentro de ella se han de situar por cada fila una etiqueta <tr>,
mientras que por cada casilla o celda dentro de la fila, se puede utilizar una
etiqueta <th> o <td>, dependiendo de que sea una casilla de cabecera o normal.
El siguiente ejemplo muestra la definición de una tabla de dos filas por dos columnas.
Aunque en versiones anteriores de HTML, se pueden aplicar varios atributos a la
etiqueta <table>, actualmente solo está permitido uno, el atributo border, al cual se le
puede dar un valor de 0 o 1
De esta forma se visualiza un borde en la tabla, este atributo solo se ha de utilizar
cuando se está realizando el documento web por motivos de visualización del diseño,
siendo conveniente quitar el mismo cuando se publique el documento y establecer los
formatos de la tabla mediante hojas de estilo.
Para los ejemplos utilizados y con el fin de poder apreciar el resultado en el navegador
se ha establecido el atributo border con un valor de 1

<!DOCTYPE HTML5>
<html>
<head>
<title>Ejercicios prácticos HTML5</title>
<meta charset="utf-8">
<meta name="author" content="">
<meta name="description" content="Ejercicios prácticos HTML5">
<meta name="keywords" content="Ejercicios, Soluciones, Prácticas,
HTML5">
</head>
<body>
<table border="1">
<caption>Titulo de la tabla</caption>
<tr>
<th>Col.Cab.1</th>
<th>Col.Cab.2</th>
</tr>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
</tr>
</table>

5
 </body>
</html>

El ejemplo anterior ha de mostrar un resultado al que se muestra a continuación en la

imagen.

Tabla HTML con dos filas y columnas

Se ha de observar que para cada una de las filas de la tabla, se utiliza la etiqueta <tr>,
y como contenido de las mismas, se utilizan etiquetas <th> o <td>, dependiendo de
que se quiera establecer celdas de encabezado o normales. Las celdas o casillas de
encabezado se visualizan con una fuente fuerte a diferencia de las normales. Para
definir el título de tabla se ha utilizado la etiqueta <caption>
Definición de una tabla con combinación de columnas
Uno de los atributos que se pueden aplicar a las etiquetas de celda,
independientemente que sean de encabezado o normales. Es el atributo colspan, el
cual permite realizar la combinación de varias columnas en una sola.
Para especificar el valor del atributo, se ha de indicar el número de columnas sobre las
que se quiere realizar la combinación, utilizando un valor numérico encerrado entre
comillas dobles.
El siguiente ejemplo muestra el uso del atributo en una tabla que tiene celdas
combinadas aplicada la combinación sobre las columnas.

<!DOCTYPE HTML>
<html>
<head>
<title>Ejercicios prácticos HTML5</title>
<meta charset="utf-8">
<meta name="author" content="">

6
 <meta name="description" content="Ejercicios prácticos HTML5">
<meta name="generator" content=", Curso práctic HTML5">
<meta name="keywords" content="Ejercicios, Soluciones, Prácticas,
HTML5">
</head>
<body>
<table border="1">
<caption>Tabla con combinación de columnas</caption>
<tr>
<th colspan="2">Celda Combinada</th>
<th>Celda Normal</th>
<th colspan="2">Celda Combinada>/th>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
<td>C5</td>
</tr>
<tr>
<td>C6</td>
<td>C7</td>
<td>C8</td>
<td colspan="2">C9 Comb.</td>
</tr>
</table>
</body>
</html>

7
El ejemplo anterior ha de mostrar un resultado similar al que se muestra en la imagen
siguiente

Combinación de columnas en una tabla

Como se puede observar en el ejemplo, se ha realizado la combinación de las
columnas 1 y 2, de la primera fila, y también las columnas 4 y 5 de la misma fila.

GENERACION DE PÁGINA

Un documento HTML puede ser generado en un editor de textos simplemente

agregándole la extensión .html o .htm al archivo en cuestión , al utilizarse un editor
de texto el archivo es manipulado sin ningún tipo de formato implícito , esto es, toda
la información es legible y carente de formato al ser analizada, esto a diferencia de
procesadores de palabras como "Word" o "WordPerfect" que generan un
determinado formato explicito el cual únicamente puede ser interpretado por dicho
paquete. Algunos editores de texto son : "Notepad" para ambientes
Windows, Emacs y gedit para ambientes Unix/Linux.
Como se observará a lo largo de este curso, el hecho de generar elementos HTML
en un editor de textos puede resultar laborioso, por esta razón han surgido
herramientas especiales para editar exclusivamente HTML que permiten generar
documentos a través de iconos y ventanas ("Drag & Drop"), sin embargo, aunque
inicialmente estas herramientas pueden acelerar el desarrollo de documentos HTML,
en ocasiones su utilización entorpece el mismo desarrollo. Lo anterior se debe a que
utilizan símbolos propietarios, que aunque no afectan el despliegue en HTML, al
momento de intentar alterarse un documento de este tipo manualmente (En un editor
de textos) lo tornan casi imposible de leer; básicamente el uso de este tipo de Editores

8
 HTML dependerá tanto del presupuesto disponible así como el tipo de diseño que se
desee realizarse.
Algunos editores HTML:
 Notetab ( http://www.notetab.com )
 Adobe GoLive ( http://www.adobe.com/products/golive/featurelist.html )
 Microsoft FrontPage ( http://www.microsoft.com/frontpage )
Un documento básico HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title> Documento Básico en HTML </title>
</head>

<body>
<h2> Este es el Titulo </h2>

<!-- Este es un comentario de recordatorio que no aparecerá desplegado-->

<a href=mailto:webmaster@osmosislatina.com> Comuniquese </a>

</body>
</html>
Como se puede observar en el fragmento anterior, HTML se encuentra compuesto
por Tags que se encuentran definidos entre < y > , este tipo de sintaxis cumple con
la propia definición de HTML que se denomina lenguaje de marcación, esto es,
cada Tag marca cuando se inicia determinada definición así como su terminación.
El Tag inicial empleado en un documento HTML es precisamente <html>, dentro de
este Tag son anidados los diversos Tags que componen un documento, nótese que
el último elemento del fragmento es </html>, es a través del carácter "/" que se esta
indicando la terminación del elemento.
Seguido del elemento <html> se encuentra otro Tag que lleva por
nombre <head> donde radican otros elementos que describen datos generales del
documento, en este ejemplo se encuentra el elemento <title>empleado para definir

9
 el titulo del documento que será desplegado en la parte superior del "Browser",
además del elemento <title> existen otros elementos que pueden ser anidados dentro
del elemento <head>los cuales serán descritos en las siguientes secciones de este
curso.
Es dentro de los Tags <body> donde se encuentra definido, como su nombre lo
indica, el cuerpo del documento HTML, anidado en este elemento se encuentran la
serie de Tags HTML que llevarán a conformar la página en sí; en este fragmento son
definidos los siguientes Tags: Un Titulo (<h2>) , un Comentario <!-- --> y una liga
hacia un correo electrónico.

DTD's ("Data Type Definitions") : Declaración y Uso.

La declaración en la parte superior del fragmento anterior que inicia con <! DOCTYPE
> no es propiamente HTML, sino una declaración SGML denominada DTD ("Data
Type Definition"); SGML ("Standard Generalized Markup Language") es el lenguaje
de donde proviene HTML y a través de un DTD se define la estructura que éste debe
tener, en este caso, el orden de los Tags declarados en un documento HTML.
La versión 4.01 de HTML define 3 posibles DTD's que pueden ser empleados al
momento de diseñarse un documento :
 HTML Transitional [loose.dtd] : Define la estructura más flexible para un diseñar
HTML.
 HTML Strict [strict.dtd] : Como su nombre lo implica, este DTD contiene diversas
restricciones sobre el anidamiento y declaración de sus Tags. La principal
diferencia con HTML Transitional se encuentra en la prohibición de elementos de
estilo en Tags y concentración en el uso de CSS ("Cascading Style Sheets"), temas
que serán descritos a lo largo de este curso.
 HTML Frameset [frameset.dtd] : Similar a HTML Transitional, sin embargo, permite
la declaración de los elementos <frame> y <frameset> en un documento, tema
también descrito en otra sección de este curso.
Aunque la declaración de un DTD es un requerimiento para conformar un documento
HTML apegado al estándar, hoy en día, la mayoría de los navegadores ("Browsers")
del mercado se encuentran equipados para aceptar documentos aunque estos no
cumplan con este pequeño requisito.
De inicio puede pensarse que apegarse a un DTD es un proceso complicado, sin
embargo, como regla general el despliegue final de un documento HTML puede ser
una fuerte pista sobre la conformidad con un DTD. Si la interfase final resulta extraña,
es muy probable que el código HTML no se encuentre apegado a ningún DTD.

10
 FORMATO DE TEXTO
Vamos a ver una serie de etiquetas y
atributos básicos para la creación de páginas
webs. No entraremos a describir una a una
todas las etiquetas y atributos de que HTML
dispone. Simplemente indicaremos las que
han sido más utilizadas en el pasado, aunque
algunas se consideren deprecated (no
recomendadas).

Las primeras etiquetas que veremos son las que se usaban en el pasado para dar
formato al texto. Para ello tenemos una serie de etiquetas que escribimos en HTML
envolviendo la palabra o el texto y que transforman ese texto en el formato que
nosotros le hayamos querido dar. Algunas de estas etiquetas están no recomendadas
(deprecated) por lo que no debemos emplearlas. Otras etiquetas han adquirido un
nuevo significado en las últimas versiones de HTML, pero no vamos a entrar a definir
este nuevo significado. Debido a su amplia difusión en el pasado conviene conocer los
que fueron usos tradicionales de estas etiquetas, a medida que avances en el
conocimiento de HTML podrás comprobar cómo para algunas etiquetas se consideran
hoy día nuevos significados.
ETIQUETA USO OBSERVACIONES

<b>…</b> Poner texto en negrita Puede ser sustituido por CSS.

<strong>…</strong> Poner texto en negrita Puede ser sustituido por CSS.

<i>…</i> Poner texto en cursiva Puede ser sustituido por CSS.

<em>…</em> Poner texto en cursiva Puede ser sustituido por CSS.

Deprecated. Sustituir por

<u>…</u> Poner texto subrayado
CSS.

<small>…</small> Poner texto más pequeño Puede ser sustituido por CSS.

<big>…</big> Poner texto más grande Puede ser sustituido por CSS.

_… Poner texto subíndice Puede ser sustituido por CSS.

^… Poner texto superíndice Puede ser sustituido por CSS.

11
 Poner texto como Deprecated. Sustituir por
<strike>…</strike>
tachado CSS.

Poner texto como Deprecated. Sustituir por

<s>…</s>
tachado CSS.

Poner texto como

<del>…</del> Puede ser sustituido por CSS.
tachado

Como verás, algunas de las etiquetas que vamos a explicar están obsoletas
(deprecated en inglés). Estas etiquetas en principio no deben de ser usadas porque
dejarán de existir en las nuevas versiones a partir de HTML 5 y los navegadores es
posible que dejen de reconocerlas en un futuro. Los motivos para incluirlas en este
curso son:
- Son etiquetas que han sido muy populares en el pasado y te puedes encontrar
muchas páginas webs que hacen uso de ellas.
- Son etiquetas reconocidas por prácticamente todos los navegadores actuales.
- Son una buena forma de introducirnos en los lenguajes propios de desarrollos webs
desde el punto de vista didáctico. Una vez se entiendan estos conceptos, es más fácil
abordar aspectos más avanzados como las hojas de estilo CSS.

Las etiquetas deben rodear al texto. Es decir, la etiqueta debe abrirse y cerrarse,
conteniendo el texto o la palabra que queramos transformar en su interior. Por ejemplo:
<b>Este texto aparecerá escrito en negrita</b>. Se pueden combinar diferentes
formatos, o sea, diferentes etiquetas. Por ejemplo, si queremos que un texto esté en
negrita y en cursiva escribiríamos esto: <b><i>Este texto aparecerá escrito en negrita
y en cursiva</i></b>.
Cuando combines, ten cuidado a la hora de cerrar las etiquetas. Debes cerrar las
etiquetas por orden, de la más interior a la más exterior.
Veamos las etiquetas que hemos citado en la tabla anterior.

NEGRITA
Existen dos etiquetas que hacen que nuestro texto se convierta en negrita. La
utilización de cualquiera de ellas es en principio indiferente (aunque pueda
atribuírseles un significado diferente a cada una de ellas no vamos a prestarle atención

12
a esto ahora). La primera es la etiqueta <b> y la otra es la etiqueta <strong>. Aquí va
un ejemplo de código y lo que veríamos en pantalla:

Esta palabra la vamos a poner en <b>negrita</b> y esta

otra <strong>también</strong>

Esta palabra la vamos a poner en negrita y esta otra también

Normalmente se preferirá usar técnicas CSS en lugar de esta etiqueta, pero es una
etiqueta que debemos conocer.

CURSIVA
Para escribir un texto en cursiva se ha utilizado mucho en el pasado la etiqueta <i>
(que por supuesto debes cerrarla con la etiqueta </i>). También se ha utilizado la
etiqueta <em>. Como en el caso de la negrita, aunque podrían atribuírseles distintos
significados no vamos a prestarle atención a esta cuestión ahora. Aquí presentamos
un ejemplo:

Esta palabra la vamos a poner en <i>cursiva</i> y esta

otra <em>también</em>

Esta palabra la vamos a poner en cursiva y esta otra también

SUBRAYADO U (DEPRECATED)
Para que la palabra o el texto quedara subrayado se usó en el pasado el rodearlo con
la etiqueta <u> y cerrarlo con su correspondiente etiqueta </u>. Así se subrayaría una
frase:

<u>Así subrayaríamos una frase importante</u>

Así subrayaríamos una frase importante

Está etiqueta está obsoleta (deprecated), lo que significa que ya no se recomienda su

uso. Para lograr el resultado deseado se deben usar hojas de estilo CSS como
veremos más adelante.

PALABRAS MÁS GRANDES O MÁS PEQUEÑAS

Puede que en una frase queramos destacar un palabra por medio de una variación de
tamaño sin necesidad de utilizar los encabezados (los encabezados son etiquetas

13
especiales que explicaremos más adelante). La variación de tamaño se podía
conseguir gracias a las etiquetas <big> y <small>. Sus propios nombres en inglés nos
indican cuáles eran sus funciones: <big> agrandará el texto y <small> lo disminuirá.
No recomendamos su uso ya que las nuevas versiones de HTML no van a admitir esta
etiqueta. La modificación del tamaño del texto se debe hacer a través de técnicas CSS.
Cada vez que se escribe una etiqueta big, se hace el texto un punto más grande. Estas
etiquetas también se podían combinar, por lo que si escribimos dos veces la etiqueta
<big>, haremos crecer la palabra dos puntos. Un ejemplo sería el siguiente:

Esta palabra se va a escribir <small>pequeñita</small>, esta se va a

escribir <big>más grande</big> y ésta <big><big>más grande aún</big></big>.

Esta palabra se va a escribir pequeñita, esta se va a escribir más grande y ésta más
grande aún.

SUPERÍNDICES Y SUBÍNDICES

Mediante HTML también podemos escribir expresiones con símbolos matemáticos.

Gracias a las etiquetas siguientes podrás escribir subíndices y superíndices fácilmente.
La etiqueta <sub> te servirá para escribir un subíndice y <sup> será la etiqueta para
un superíndice. Así nos queda un ejemplo como el siguiente:

Gracias a estas etiquetas podemos escribir cualquier expresión con símbolos

matemáticos como esta: H₂O o números elevados a potencias
7³.

Gracias a estas etiquetas podemos escribir cualquier expresión con símbolos

matemáticos como esta: H2O o números elevados a potencias 73.

Los subíndices y superíndices con estas etiquetas pueden ser sustituidos por técnicas
de CSS, pero muchas personas prefieren usar estas etiquetas.

TEXTO TACHADO

Existen tres etiquetas que se han venido usando para conseguir que un texto quede
tachado. Hablamos de las etiquetas <strike>, <s> y <del>. Todas ellas ofrecen el
mismo resultado. Aquí presentamos una muestra:

14
 Puedo proceder a tachar una palabra <strike>así</strike>,
<s>así</s> o <del>así</del>

Puedo proceder a tachar una palabra así, así o así

La etiqueta strike está deprecated, lo que significa que ya no se recomienda su uso.

La etiqueta s también fue deprecated, aunque a partir de HTML 5 se ha redefinido su
significado. Para lograr el tachado de un texto se recomienda usar técnicas CSS (hojas
de estilo) como veremos más adelante.

EJERCICIO
En el siguiente código hay elementos que en las versiones más recientes de HTML se
consideran deprecated o not supported. Escribe el código en un editor de textos como
el bloc de notas o Notepad++, guárdalo con un nombre como ejemplo.html y visualízalo
en tu navegador.
Responde a las siguientes preguntas:
¿Qué etiquetas de las empleadas sería recomendable no utilizar y reemplazar
mediante uso de técnicas CSS?
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo 01 del curso HTML - aprenderaprogramar.com</title>
</head>
<body text="green" bgcolor="white">
<pre>
Ejemplo básico: uso de etiquetas de formato y atributos básicos para la
etiqueta body.
<strong>negrita</strong>
<em>Cursiva</em>
<del>Subrayado</del>
<big>Grande</big>
<small>pequeño</small>
Esto es un_subíndice
Y esto un^superíndice
</pre>
</body>

15
</html>

Ejemplo de resultado que se puede obtener en algunos navegadores. Ten en cuenta

que al usarse atributos deprecated la respuesta de diferentes navegadores puede no
ser la misma.

Nota 1: Hemos utilizado la etiqueta <pre> que comentaremos más adelante.

Nota 2: si estás utilizando Notepad++ y obtienes una visualización extraña de las tildes,
por ejemplo “Ejemplo básico” en lugar de “Ejemplo básico” recuerda elegir como
codificación UTF-8 sin BOM. También añade la etiqueta <meta charset="utf-8"> dentro
de la cabecera del código para indicar el juego de caracteres que se debe emplear.

ESTRUCTURACIÓN
Estructura básica
 Cada página comienza con: < HTML > .
 A continuación viene la cabecera, delimitada por < HEAD > y < /HEAD > .
 Después, el comando < BODY >, que indica el comienzo del cuerpo de la
página. Las instrucciones HTML se escribirán a continuación, y finalizarán con <
/BODY >.
 La página acabará con < /HTML > .
Es decir:
<HTML>
<HEAD>
Definiciones de la cabecera
</HEAD>
<BODY>
Instrucciones HTML

16
 </BODY>
</HTML>

Cabecera
La cabecera de un documento está delimitada
por las etiquetas < HEAD > y </HEAD > Sus
componentes son opcionales. El más
importante es <TITLE> , que permite escribir el
título del documento. El título no se muestra en
la página, sino en la parte superior de la
ventana del visualizador, como identificador en
los bookmarks y en la history list. Se utiliza de
la siguiente forma:
<HEAD>
<TITLE>Título del documento HTML</TITLE>
</HEAD>
Cuerpo
Es la parte delimitada por <BODY> y < /BODY > . Puede llevar los siguientes atributos:
 BACKGROUND="imagen": define el fondo. Más adelante veremos más
sobre imágenes.
 BGCOLOR="######": c olor del fondo (sólo si no se define una imagen de
fondo, o si ésta imagen no puede obtenerse.. Más adelante veremos más
sobre colores. Por ahora nos basta saber que para los colores básicos se puede
utilizar su nombre en inglés: white, blue, red, green ...
 TEXT="######": color del texto. Por defecto será negro.
 LINK="######": color de los links. Por defecto será azul.
 VLINK="######": color de los links visitados. Por defecto será violeta.

17
 PRESENTACION DE FONDO

Color de fondo mediante códigos de color Hex

Colorear un fondo de página web es en realidad bastante simple. La primera y más
popular forma es mediante el uso de un código de color Hex con la propiedad color de
fondo. Aquí aplicamos un color Hex directamente en el HTML <body> elemento
usando el atributo de estilo.

HTML

<body style="background-color:#FF0000;">
</body>

DEMO EN CODEPEN
Este mismo método se puede utilizar para el estilo de casi cualquier elemento HTML,
pero tenga en cuenta su comportamiento puede variar en función de si son elementos
en línea o nivel de bloque. Utilice nuestros selector de color o tabla de colores de
encontrar un código de color Hex.
Color de fondo mediante nombres de colores HTML
Los códigos de color Hex puede ser el más popular, pero son sólo uno de los muchos
métodos disponibles para color un elemento HTML. Una segunda forma es utilizar un
nombre de color HTML; basta con sustituir el código Hex con uno de los 140 nombres
de colores compatibles y listo.

HTML
<body style="background-color:red;">
</body>
DEMO EN CODEPEN
Aquí está una lista útil de los 140 nombres de colores HTML con sus correspondientes
valores Hex y RGB para referencia.
Color de fondo mediante valores de color RGB
Valores RGB también se puede utilizar para agregar un color de fondo a los elementos
HTML. Utilizando el mismo atributo de estilo al igual que antes, sustituir el código Hex
o nombre de color con un formato correcto valor RGB (asegúrese de que se ha de
encerrar entre paréntesis y prefijo con una minúscula 'rgb').

HTML
<body style="background-color:rgb(255,0,0);">

18
</body>

DEMO EN CODEPEN
Cuando se utilizan valores RGB en HTML tiene la opción adicional de especificar el
nivel de opacidad. Con el prefijo rgba() - la 'a' para el canal alfa, que controla la
transparencia, puede insertar un cuarto valor entre 0 y 1, 0 para totalmente
transparente y 1 para totalmente opaca (utilizar valores decimales para los niveles
entre).

HTML
<body style="background-color:rgba(255,0,0,0.5);">
</body>

DEMO EN CODEPEN
HSL color de fondo mediante valores de color
Menos populares pero igualmente potente, HSL valores ahora son compatibles con
muchos los exploradores modernos. Si no está familiarizado con HSL (que significa de
tono, saturación y luminosidad) dirígete a Wikipedia para ver un resumen de las
razones por las que es tan increíble. Si desea usar HTML para un color de fondo, siga
la misma sintaxis que los valores RGB, pero utilizando el hsl() prefijo.

HTML
<body style="background-color:hsl(0,100%,50%);">
</body>

DEMO EN CODEPEN
Al igual que sus hermanos RGB, HSL también se puede transmitir un canal alfa para
controlar la opacidad. Utilice los aceros hsla() prefijo e insertar un cuarto valor entre 0
y 1.

HTML
<body style="background-color:hsla(0,100%,50%,0.5);">
</body>

GENERACION DE IMAGEN

19
Si solo insertamos texto en nuestras
páginas webs, estas quedarán muy
sencillas y poco lucidas. Es por ello que
en HTML tenemos la capacidad de insertar
imágenes.
Las imágenes podrán ser elementos
representativos de página web o elementos
decorativos. Si bien, en el caso de ser
elementos decorativos deberíamos de
utilizar CSS para insertarlos en nuestra
página web.
El uso de imágenes dentro de una página web tiene que hacerse con cautela, ya que
cada imagen que pongamos en nuestra web incrementará el tamaño (peso) de la
página. Por lo cual se verá afectado el tiempo de descarga de la página.
Insertar una imagen: El elemento img
Para insertar una imagen en HTML tenemos el elemento img, cuya sintaxis básica es:

<img src="nombreimagen.jpg" alt="" />

Como podemos comprobar, el elemento img es un elemento sencillo, con lo cual no

tiene elemento de cierre y termina con la barr a invertida.
El atributo principal del elemento img es src nos indica la ruta de la imagen que
queremos cargar. Así, si la imagen se encuentra en la misma ruta que nuestra página
web pondremos:

<img src="foto.jpg" alt="" />

En el caso de que la imagen esté en otro directorio, por ejemplo

en “/multimedia/imagenes” pondremos lo siguiente:

<img src="/multimedia/imagenes/foto.jpg" alt="" />

Incluso la imagen puede residir en otro servidor. En ese caso la URL que contenga la
imagen deberá de indicar el protocolo y el servidor que alberga la imagen. Por ejemplo
podremos tener el siguiente código:

<img src="http://lineadecodigo.com/imagenes/logo.jpg" alt="" />

Dimensiones de la imagen: width y height

Si no indicamos más sobre el elemento img, la imagen que le hayamos pasado en su
campo src se cargará con su tamaño original.

20
Si bien disponemos de los atributos width para el ancho de la imagen y height para el
alto de la imagen. De esta forma, si queremos que nuestra imagen se vea en 100x100
pixels, podemos insertar el siguiente código:

<img src="”foto.jpg”" alt="" width="”100”" height="”100”" />

El tamaño de la imagen puede ser especificado en pixels o en porcentajes. En caso

de omitir la unidad se utilizará el pixel.

<img src="foto.jpg" alt="" width="100" height="100" />

<img src="foto.jpg" alt="" width="100px" height="100px" />
<img src="foto.jpg" alt="" width="50%" height="50%" />

Por cuestiones de rendimiento en la carga de las webs siempre es bueno el indicar sus
valores width y height.
Los valores del alto y el ancho que indiquemos en la elemento img no tienen porqué
coincidir con el tamaño real de la imagen. Por ejemplo, reduciendo los valores de estos
atributos podremos conseguir una previsualización de la misma, lo que se conoce
como thumbnail.
Texto alternativo de la imagen: el atributo alt y longdesc
Sobre una imagen podemos indicar un texto alternativo o descriptivo de la misma. Para
ello tenemos el atributo alt.

<img src="foto.jpg" alt="texto" />

Pero, ¿por qué quiero poner un texto, cuando realmente es una imagen gráfica?
Piensa que esto es útil en varios casos. Por ejemplo, si por algún problema técnico no
se puede cargar la imagen, el navegador mostrará en su espacio el texto alternativo,
lo cual dará al usuario una idea de lo que iba en ese sitio.
Otra cosa útil es para cuando nuestra página sea utilizada por personas discapacitadas
con problemas de visibilidad. En este caso estas personas disponen de herramientas
que le van leyendo la página y cuando llegan a una imagen leen el contenido que
encuentran en el atributo alt.
Es por ello que el texto alternativo que insertemos en la imagen debe de ser bastante
descriptivo de la misma. En algunos casos se llega hasta indicar el tamaño de la
imagen.

<img src="foto.jpg" alt="Fotografía" />

Tipos de formatos de imágenes

21
Hemos aprendido mucho de cómo podemos insertar nuestras imágenes en el
documento HTML. Pero a la hora de insertar imágenes, qué tipo de imágenes puedo
insertar en el documento HTML.
En este punto tenemos un pequeño problema y es que los estándares de HTML no
definen los tipos de formato de imagen que se pueden ver en un navegador web.
Los formatos de imágenes más comúnmente aceptados son:
 JPEG, son imágenes digitales comprimidas con pérdida de información. Pero
que nos permiten tener imágenes digitales que ocupen poco espacio.
 GIF, es un formato para imágenes de mapas de bits las cuales soportan 8 bits
por pixel. El formato GIF soporta imágenes animadas.
 PNG, es un formato de imagen en mapa de bits que emplea compresión de
datos sin pérdida de información. No requieren de licencia de patente. Es un
formato creado para utilizar imágenes en Internet con un tamaño adecuado.
Otros formatos que también son aceptados:
 APNG, son imágenes PNG animadas. Intenta evolucionar los gráficos
animados en GIF.
 SVG, gráficos vectoriales escalables. Son gráficos especificados mediante
texto, lo cual hace que sean interpretables por los dispositivos y puedan escalar
a través de diferentes resoluciones.
 BMP, son imágenes de mapas de bits. Se pueden encontrar con extensión .bmp
y .dib
 BMP ICO y PNG ICO, formato para representar iconos en el sistema operativo
Windows. Los iconos suelen contener diferentes tamaños y densidad de pixels.
De esta forma pueden ser escalados.

MARQUESINA

La etiqueta html <marquee> se utiliza para insertar un area de texto en

movimiento. También se la conoce como marquesina.

AtributosSección
behavior
Establece cómo se desplazará el texto en la etiqueta marquee. Los valores
posibles son scroll, slide, y alternate. Si no hay un valor especificado, el valor
por defecto establecido es scroll.
Scroll: Hara que lo que este en la marquesina se mueva de derecha a izquierda,
de manera ininterrumpida.

22
 Slide: Una vez que completa el recorrido de derecha a izquierda(por defecto) se
detiene.

Alternate: Se movera de una esquina a la otra, dando el efecto de rebote.

bgcolor
Establece el color de fondo, puede utilizarse el nombre, o su valor hexadecimal.
direction
Establece la dirección en la que el texto contenido se desplazará. Los valores
posibles son left (para moverse hacia la izquierda), right (para moverse a la
derecha), up (hacia arriba) y down (hacia abajo). Si no se especifica un valor,
por defecto será left.
height
Establece la altura de la etiqueta e n pixeles, o en un valor porcentual.
hspace
Establece el margen horizontal.
loop
Establece el número de veces que la marquesina realizará el desplazamiento.
Sino se especifica esta propiedad, por defecto es -1, lo que quiere decir que la
marquesina se desplazará continuamente.
scrollamount
Establece el valor de movimiento para cada intervalo en pixeles. Por defecto su
valor es 6.
scrolldelay
Establece el intervalo entre cada desplazamiento, en milisegundos. El valor por
defecto es 85. Nota: Cualquier valor inferior a 60 será ignorado, (puesto que el
valor minimo es 60) y se establecerá 60 en su lugar. Salvo que se
especifique truespeed.
truespeed

23
 Por defecto, si los valores de scrolldelay son inferiores a 60 serán ignorados.
Pero si truespeed está presente, esos valores inferiores a 60 serán aceptados.
vspace
Establece el margen vertical en pixeles o en un valor porcentual.
width
Establece el ancho de la etiqueta en pixeles o un valor porcentual.
Controladores de eventosSección
onbounce
Este evento se lanza cuando la marquesina llegó al final del desplazamiento.
Ésto solo se activa cuando el atributo behavior está establecido en alternate.
onfinish
Este evento se lanza cuando la marquesina repitió el desplazamiento la
cantidad de veces establecidas en el atributo loop. El evento se lanza solo si el
atributo loop tiene un valor mayor a 0.
onstart
Este evento se lanza cuando la marquesina comienza su desplazamiento.
MétodosSección
start
Comienza el desplazamiento de la marquesina.
stop
Para el desplazamiento de la marquesina
EjemplosSección

<marquee>Este texto se mueve de derecha a izquierda</marquee>

<marquee direction="up">Este texto se mueve de abajo hacia arriba</marquee>

<marquee direction="down" width="250" height="200" behavior="alternate"

style="border:solid">
<marquee behavior="alternate">
Este texto rebotará dentro de la marquesina.
</marquee>
</marquee>

24
 MAPA DE IMAGEN

HTML nos permite la opción de

crear diferentes enlaces url dentro
de una misma imagen. Es decir,
podemos hacer que diferentes
partes de una imagen tengan
enlaces que nos permitan ir a
diferentes destinos.
Las fotos en las que queramos
introducir un mapa de imágenes
deberán ser de uno de estos tres formatos: .jpg, .gif o .png, que son los tres formatos
recomendables para todos los navegadores.
A continuación vamos a explicarte como podemos crear este tag html y los diferentes
atributos que posee este tag. Como veremos a lo largo del artículo, lo difícil de crear
un mapa de imágenes no es el mapa en sí, sino encontrar las coordenadas en la
imagen. Aunque existen programas de edición de imágenes que nos ayudarían en esa
tarea.
El tag map
Cómo ya podemos suponer, <map> es el tag necesario para poder crear un mapa de
imágenes en html. Por supuesto, posee un cierre: </map>.
Este tag debe ir acompañado del atributo name= “x”, para indicar el nombre del mapa.
Por tanto si queremos hacer un mapa que se llame ejemplo 1, escribiremos: <map
name= “ejemplo1”>
Atributo área

El mapa de imágenes lleva un área dentro de la cual podremos pinchar para dirigirnos
al destino que hayamos preestablecido. Pero, por supuesto, esa área se la tenemos
que indicar al navegador para que la interprete.
La zona del enlace se indica dentro de la etiqueta, estableciendo las coordenadas de
dicha área. También podemos escribirle un texto alternativo, un “alt”, al área.
Existen tres tipos de áreas. Vamos a explicártelas a continuación.
Atributo shape
Este atributo nos indicará el tipo de área que es. Como hemos dicho existen tres tipos:
rectangular (rect), poligonal (poly) o circular (circle) y cada una de ellas tiene unas
características diferentes. Vamos a profundizar un poco más en ellas.

25
  shape=“rect” : Este tipo de área crea un mapa de imagen rectangular. Para definir
la zona que incluirá ese mapa deberemos definir la esquina superior izquierda
del área y la esquina inferior derecha.
 shape=“circle” : Este tipo de área crea un mapa de imagen circular. Nosotros sólo
debemos indicarle el centro de la circunferencia y el radio del mismo.
 shape=“poly” : Este tipo de área es la más versátil de todas, la que más
posibilidades nos ofrece, ya que nos permite crear una zona personalizada. Para
crearla debemos indicarle los diferentes puntos del polígono que hagamos y de
una forma ordenada, siguiendo el camino que nosotros hemos trazado para
hacerlo.
Bien, pero…¿y cómo indicamos las coordenadas? Gracias al siguiente atributo.
Atributo coords
El atributo coords se escribe de la siguiente forma: coords= “x,x,x,x”, entendiendo que
cada “x” representa un punto en la imagen. Cada coordenada debe ir separada por
comas.
Y el dónde nos dirigirá esa área nos lo indicará el atributo “href”
Atributo href
Aquí deberemos indicar el destino del área.
usemap
Hasta ahora te habíamos indicado cómo podías escribir un mapa de imágenes y cómo
definir su área, pero no te habíamos dicho cómo indicar qué imagen es la que llevará
el mapa. Esta acción se hace gracias al atributo usemap.
Este atributo se escribe de la siguiente forma: usemap=“#x”, siendo x el nombre del
mapa de imágenes que queramos utilizar.
Nosotros hemos querido hacerte un ejemplo con la imagen que puedes ver más abajo.
Dentro de estas bolas de billar, nosotros hemos hecho un mapa de imágenes con un
área circular que coincide con la bola amarilla. Nuestra “href” es la página de inicio de
este tutorial. También hemos hecho un área poligonal en la bola negra del fondo que
te llevará al inicio del tutorial de css y otro área rectangular en el centro de la imagen,
que te redirigirá al inicio del tutorial de php.
El código nos ha quedado de la siguiente manera:

<img src="/imagenes/prueba-mapa.jpg" alt="Prueba de mapa de imágenes"

width="300" height="214" border="0" usemap="#billar">

<map name="billar">

26
 <area alt="Si clícas aquí irás a la página de inicio del tutorial de html" shape="circle"
coords="148,154,44" href="/curso-de-html/">

<area alt="Si clías aquí irás a la página de inicio del tutorial de css" shape="poly"
coords="148,59,142,49,135,41,128,38,121,34,125,25,135,16,155,11,177,19,188,27,1
87,36,177,39,168,46,162,52,160,61" href="/curso-de-css/">

<area alt="Si clías aquí irás a la portada" shape="rect" coords="11,77,288,105"

href="/">

</map>

ANIMACIONES

La etiqueta marquee puede servirnos

para hacer animaciones en páginas
sencillas, sin ningún conocimiento de
lenguajes de programación ni otras
complicaciones semejantes. Para los
que sólo conocen HTML es una
herramienta perfecta si desean hacer
que un elemento de la página se mueva.

Pero atención, aunque esté comentando este truco para mover texto por la página o
imágenes, tenemos que utilizar el marquee con mucha prudencia, puesto que tiene
desventajas:
 Marquee no está comprendido en los estándar HTML
 Utilizar Marquee puede tener pro blemas de accesibilidad, es decir, se puede
hacer difícil de leer para determinadas personas con discapacidades.
 El hecho de animar elementos de una página favorece el dinamismo y ayuda a llamar
la atención sobre determinados mensajes o imágenes, pero si utilizas marquee en
muchos lugares puede provocar confusión y marear al usuario.
Para utilizar marquee, simplemente colocamos dentro de la etiqueta los contenidos
que queremos que se muevan, ya sean texto, imágenes o cualquier otro tipo de
contenido. Algo como esto:

27
<marquee>texto que se mueve</marquee>

Pero también podríamos meter algo como esto:

<marquee>
<table align="center" width="100"border="1">
<tr>
<td>Esta tabla se desplaza , con todo el contenido de la tabla</td>
</tr>
</table>
</marquee>

Marquee soporta una serie de atributos para modificar su comportamiento o su

aspecto. Son los siguientes:

WIDTH
Anchura de la marquesina. Si no marcamos altura, se colocará en la siguiente línea,
como en un párrafo distinto. Si marcamos una anchura, la marquesina intentará
mostrarse en la misma línea donde la hayamos colocado. Si no hay espacio para ella
se realizará el consiguiente salto de línea para mostrarla un poco más abajo.

DIRECTION
Hacia donde queremos que se displace el contenido del marquee. Los posibles valores
son "LEFT" y "RIGHT".

BEHAVIOR
Es el comportamiento de la marquesina, de entre los posibles: SCROLL (el
comportamiento por defecto) indica que tiene que hacer el desplazamiento siempre en
una misma dirección y ALTERNATE, que indica que el desplazamiento se hace a un
lado y al otro de manera alternada.

SCROLLDELAY
Es el tiempo en milisegundos que tiene que pasar entre cada cambio de la posición de
lo que hay desplazándose. Es decir, cuanto mayor sea el valor, más milisegundos
tardará la marquesina en moverse. El valor por defecto es 85, pero si por ejemplo

28
ponemos un valor 500 la marquesina cambiará de estado (desplazará el contenido)
cada medio segundo.

SCROLLAMOUNT
Es la cantidad de pixel que tiene que desplazarse el contenido de la marquesina cada
vez que se mueve. A mayor scrollamount, más se desplazará la marquesina en cada
movimiento y por tanto la animación será más rápida. El valor por defecto es 6.
Podemos probar a colocar un valor mayor y veremos que el movimiento será más "a
golpes".

LOOP
El número de ciclos que va a moverse el texto o lo que quiera que haya dentro de la
marquee. Este atributo sólo funciona en Internet Explorer. Por defecto es INFINITE,
que quiere decir que se desplazará todo el tiempo sin parar. Pero si por ejemplo
colocamos un valor como 3, querrá decir que la marquesina sólo realizará tres ciclos
o movimientos y luego parará.

BGCOLOR
El color de fondo de la marquesina. Acepta el nombre de un color HTML o bien un
valor RGB de dicho color.

HSPACE y VSPACE
Estos dos atributos sirven para definir el número de píxel que debe aparecer entre la
marquesina y otros contenidos de la página, en horizontal y vertical.

Algunos ejemplos de marquee:

<marquee width=200 direction=right>

Marquesina a la derecha y con ancho
</marquee>

<marquee behaviour=alternate scrolldelay=500 bgcolor="#ff8833">texto que se

mueve</marquee>

29
 PROGRAMAS RELACIONADOS CON EL DISEÑO WEB

Un programa de diseño de
páginas web es un programa
de computadora utilizado para
crear, editar y actualizar
las páginas web sitios web. El
propósito de un programa de
este tipo es hacer que sea más
fácil para el diseñador trabajar
con sitios y páginas de elementos a través de una interfaz gráfica de usuario que
muestra los resultados deseados, por lo general de una manera WYSIWYG, mientras
que la eliminación de la necesidad de que el diseñador a tener que trabajar con el
código real que produce esos resultados (que
incluye HTML o XHTML, CSS, Javascript, Photoshop y otros). Ejemplos de un
programa de diseño web incluyen iWeb, Microsoft FrontPage, Adobe
Dreamweaver y NetObjects Fusion, que son programas comerciales, y Amaya, el cual
es un programa de código abierto. Muchos programas, como Microsoft Word que no
se dedican al diseño web también tienen la capacidad de funcionar como un paquete
de diseño web.
También existen los llamados content management system (CMS), como por ejemplo
Wordpress, Joomla y Drupal. Mediante Themes o Plantillas permiten la rápida creación
y edición de páginas web.
Los creadores de sitios web son herramientas que permiten la creación de páginas
web sin conocimientos de programación. Estas se ayudan de un editor visual
(WYSIWYG) para poder añadir contenido y adaptar el diseño. Típicamente se trata de
herramientas online como Wix, Jimdo o Weebly, pero también existen herramientas
offline que se pueden usar.

Aquí los programas que tienes que tener en cuenta:

1. Wix – Para los más creativos
2. Webnode – Sitios web en varios idiomas
3. Jimdo – El todo en uno
4. Weebly – Realmente fácil de usar
5. Ionos – Variedad de plantillas
6. One.com – El más económico
7. WordPress.com – El WordPress limitado
8. Shopify – El mejor para un ecommerce

30
9. Webs.com – Venido a menos
10. Mobirise – Creación offline
11. Adobe Muse – El creador de Adobe
12. Website X5 – Solo para Windows

Tipos de plataformas de creación web

Existen dos tipos de plataformas de creación web: soluciones online y soluciones
offline.
Creadores web online: estas se encuentran en línea y podrás acceder mediante
cualquier navegador y dispositivo. Incluso algunas de ellas tienen apps para que
puedas crear o editar tu sitio web en tu smartphone. Tienes que tener en cuenta que
necesitarás conexión a internet para usarlas. Ofrecen hosting integrado por lo que todo
resulta más simple de gestionar.
Creadores web offline: Se trata de aplicaciones que tienes que descargar en tu PC o
Mac. Mediante un editor, más o menos, visual podrás crear un sitio web y lo podrás
subir a tu servidor mediante FTP. Estas herramientas son, por lo general, menos
actuales, sus diseños y funcionalidades son peores y resultan más difíciles de utilizar.

VENTAJAS DE LAS VENTAJAS DE LAS SOLUCIONES

SOLUCIONES ONLINE OFFLINE

 No hace falta que instales  Podrás trabajar en tu sitio web sin

nada en tu ordenador. tener conexión a internet.
 Puedes trabajar desde  Puedes acceder al servidor donde tu
cualquier lugar (con internet) sitio web está alojado. Esto da mayor
y con cualquier dispositivo. flexibilidad, pero también puedes
 Las actualizaciones son desbaratar tu sitio web si no sabes lo
automáticas. que haces.
 Puedes olvidarte de usar  No dependes tanto del proveedor del
clientes FTP (para subir creador de sitio web.
archivos al servidor), esto no
es necesario.
 Incluyen el hosting para tu
sitio web.
 No hay que comprar ningún
software.

31
 GLOSARIO DE TERMINOS

ADSL: abreviatura de Asymmetric Digital Subscriber Line. Se trata de un método de

transmisión de datos a través de la línea telefónica de cobre tradicional a velocidad
alta. Los datos pueden ser descargados a distinta velocidad que son cargados, esta
es la razón por la cual se le denomina asimétrico. Esta tecnología es adecuada para
la Web, ya que es mucho mayor la cantidad de datos que se envían del servidor a un
ordenador personal, que a la inversa. Existen distintas velocidades y en diferentes
países se han implantado tecnologías como ADSL 2 y ADSL+2 que permiten un gran
ancho de banda con capacidades para la transmisión de televisión y vídeo de alta
calidad.

Agente: tipo de software programado para rastrear Internet y realizar una función
específica para el usuario. También se denomina robot. Los tipos más comunes de
agentes son los programas llamados spiders y worms (arañas y gusanos), que
transitan por Internet, recolectan la información e indizan los contenidos para crear sus
propias bases de datos. Existen también agentes inteligentes con funciones más
complejas, que son capaces de reconocer las preferencias de los usuarios para
ayudarles de forma inteligente.

Ancla/anclaje: en un hipertexto, es el punto de partida y de destino de un enlace.

ANSI: American National Standards Institute. El banco de datos para el desarrollo

voluntario de estándares en los EE.UU.

Applet: pequeño programa hecho en lenguaje Java que se introduce en un archivo

HTML.

Archie: permite la búsqueda de información en los servidores de FTP anónimos. Se

basa en la arquitectura cliente/servidor y da un nombre a ambos.

ARP: Address Resolution Protocol. Protocolo que realiza la conversión de direcciones

IP a direcciones de hardware de los dispositivos asociados.

Base de datos: formato estructurado para organizar y mantener informaciones que

pueden ser fácilmente recuperadas.

BIT: dígito binario. Unidad mínima de almacenamiento de la información cuyo valor

puede ser 0 ó 1; o bien verdadero o falso.

BICI: Book Item and Contribution Identifier. Un estándar que está desarrollando la
NISO con el fin de identificar a los autores de obras en línea.

Blog: también denominado bitácora o weblog. Es un sitio web con anotaciones hechas
en forma cronológica y escritas por una persona o un grupo de personas. Se trata de
un diario o registro discontinuo de notas y opiniones sobre los temas más variados:

32
personales (opiniones, impresiones, pensamientos, sucesos, etc.) o grupales (hay
blogs referentes a todo tipo de materias: tecnológicos, literarios, políticos, sociales,
informativos, etc.) y que abarcan desde aspectos muy generales hasta los sumamente
especializados.

Consorcio W3 (W3C): Organización apadrinada por el MIT y el CERN cuyo propósito

es el establecimiento de los estándares relacionados al WWW. Fue promovida por el
creador del WWW, Tim Berners-Lee.

Dato: unidad mínima que compone cualquier información.

DejaNews: uno de los índices más completos de los grupos de noticias de la WWW.

DHTML o HTML Dinámico: extensiones del lenguaje HTML que permiten crear
páginas web más animadas y expresivas.

Dirección de Correo Electrónico (e-mail address): Serie de caracteres, numéricos

o alfanuméricos, por medio de los cuales se puede enviar un mensaje al correo
electrónico de un usuario dado. Dicha dirección es única para cada usuario y se
compone por el nombre (log in) de un usuario, arroba y el nombre del servidor de
correo electrónico (socios@hipertexto.info).

Extensibilidad: se suele usar en programación para definir la facultad de flexibilidad

para el cambio que posee un programa para soportar nuevas funcionalidades cuando
se produzcan cambios o se incorporen nuevos elementos, sin que se alteren los
elementos o bases existentes (o alterando mínimamente los existentes). En un
hipertexto es la cualidad que permite ir de lo secuencial a lo reticular, de la línea a la
red con ramificaciones no jerárquicas ni lineales, sino asociativas y multilineales
horizontales.

Flash: tecnología creada por Macromedia, que permite el diseño y la creación de

animaciones utilizando menos ancho de banda que otros formatos, como AVI o MPEG.

GNU: La Fundación para el Software Libre (Free Software Foundation-FSC) se dedica

a eliminar las restricciones de uso, copia, modificación y distribución del software.
Promueve el desarrollo y uso del software libre y ofrece un sistema de software libre
llamado GNU.

GOPHER: sistema de entrega de información distribuido, ya casi no se utiliza en la

red.

Hipermedia: Hipertexto + Multimedia. Hipertexto e hipermedia se suelen usar como

sinónimos, pero la hipermedia, además de texto incluye gráficos, audio, vídeo, etc. Son
hipermedia las páginas web que integran información en distintas morfologías: texto,
gráficos, sonidos y vídeo, etc.

33
Hipervínculo, vínculo o enlace: vínculo existente en un documento hipertexto que
apunta o enlaza a otro documento que puede ser o no otro documento hipertexto.

Hoja de Estilo en Cascada (CSS): conjunto de instrucciones HTML que definen la

apariencia de uno o más elementos de un conjunto de páginas web con el objetivo de
uniformizar su diseño.

internet: en minúsculas, es un grupo de redes conectadas juntas.

Internet: con mayúsculas, es la Red de Redes. Conexión global de redes a través del
mundo.

Internet2: proyecto que trata de crear una nueva Internet de mayores y mejores
prestaciones en el ámbito de las universidades norteamericanas y al que se han unido
otros países y diferentes empresas del sector informático y de las telecomunicaciones.

Internet Explorer (IE): programa navegador o visualizador del WWW desarrollado por
Microsoft.

Metáfora: representación analógica de la estructura de un hipertexto.

Microsoft: compañía creadora de los sistemas operativos Windows, de los controles

Active X y desarrolladora del navegador Internet Explorer para la WWW.

Modem: modulador/demodulador. Dispositivo que convierte señales digitales

(binarias) desde un ordenador en señales analógicas para transmitirlas sobre la línea
telefónica, y al revés.

Netscape: Fundado en 1994 por Jim Clark y Mark Andreessen, Netscape desarrolló
el primer navegador de éxito comercial, Netscape Navigator. El navegador, basado en
el navegador Mosaic del National Center for Supercomputing, alentó al crecimiento de
la World Wide Web.

News/Grupos de noticias: tablón de anuncios en la red que permite al usuario

participar en grupos de discusión por medio de mensajes o acceder a la información.
Los mensajes se clasifican por temas y se integran por grupos (newsgroups) o grupos
de noticias y se distribuyen por todo el mundo.

Recurso: cualquier elemento en la Web que puede ser descrito de forma

independiente (una página web, un archivo de audio, un correo electrónico, etc.).

Robot: programa diseñado para navegar y buscar por Internet con un propósito
específico. Los robots que guardan y catalogan todos los contenidos de la red para
crear bases de datos a partir de las cuales realizar búsquedas se conocen por spiders
(arañas) o worms (gusanos).

34
Router: dispositivo para dirigir paquetes de información entre dos áreas separadas de
una red.

URI: Universal Resource Identifier. Una cadena algorítmica que se usa para identificar
un documento o recurso en la Web.

URL: Uniform Resource Locator. Sistema de direccionamiento estándar de archivos y

funciones en Internet, especialmente en la WWW. El URL está formado por el
protocolo de servicio (http: ftp: gopher: mailto), el nombre del servidor u ordenador que
contiene el recurso, la ruta de acceso al recurso y el recurso buscado.

WWW o la WEB o World Wide Web: medio más popular de comunicación en Internet.
Sistema de distribución y recuperación de información hipermedia
(hipertexto+multimedia) almacenada en los diferentes nodos de Internet. Este
protocolo fue desarrollado por Tim Berners-Lee en 1990 para ayudar a los
desarrolladores del CERN a compartir información a través de los diversos
ordenadores de la red y se ha extendido a nivel mundial.

XML: Lenguaje Extensible de Marcado. Lenguaje desarrollado por el W3 Consortium

para permitir la descripción de información contenida en el WWW a través de
estándares y formatos comunes, de manera que tanto los usuarios de Internet como
programas específicos (agentes) puedan buscar, comparar y compartir información en
la red. El formato de XML es muy parecido al del HTML aunque no es una extensión
ni un componente de éste.

35
 CONCLUSION

Sin HTML no existiría el Internet que hoy conocemos, si no se hubiera inventado,

seguiríamos con el aburrido FTP (Protocolo de Transferencia de Ficheros)
mandándonos o bajando archivos que a veces ni sabíamos lo que eran. Ahora por
medio de una página llena de colores y botones por la cual se puede navegar, se
puede tener acceso a bastante información y archivos.

El lenguaje de HTML abrió una puerta al mundo permitiéndoles a las personas

expresar sus ideas por medio de páginas y mostrárselas a todas las personas de todos
los países.

Con el HTML se logró un gran movimiento económico ya que muchísimas empresas

publican, venden, y ofrecen sus productos, sus servicios y sus ofertas atrayendo a
mayor cantidad de personas. También gracias al HTML nacieron muchas empresas
que ofrecen diversos servicios como Yahoo, Altavista, HotMail, Terra, Yupi,
Mercadolibre, De Remate, etc.

Infinitas son las posibilidades que te brindan las páginas WEB ya que no solo te dan
la posibilidad de pasar el tiempo navegando, sino que también hasta se puede
comprar.

Todo el universo de Internet se lo debemos al HTML, ya que todas las páginas con las
que se compone la World Wide Web están hechas con el lenguaje de programación
HTML.

36
 BIBLIOGRAFIA

https://www.hostingexperto.es/programas-para-crear-paginas-web/
https://desarrolloweb.com/articulos/anmacion-html-con-marquee.html
https://es.wikipedia.org/wiki/Programa_de_diseño_web
https://www.hazunaweb.com/curso-de-html/mapas-de-imagenes/
https://developer.mozilla.org/es/docs/Web/HTML/Elemento/marquee
https://www.hazunaweb.com/curso-de-html/imagenes/
http://www.mclibre.org/consultar/htmlcss/html/html-imagenes.html
https://htmlcolorcodes.com/es/tutoriales/html-color-de-fondo/
https://www.eluniverso.com/2009/03/18/1/1380/7BEEE4C504C140F3A2726B3FA17
D1AA4.html
https://desarrolloweb.com/articulos/1384.php
http://html5facil.com/tutoriales/estructura-basica-documento-html5/
http://platea.pntic.mec.es/~abercian/guiahtml/estructura.htm
http://platea.pntic.mec.es/~abercian/guiahtml/formatos.htm

37