El Lenguaje HTML

1
El Lenguaje HTML

• Algunas nociones

2
El Lenguaje HTML Introducción

• Empezaremos con una nota importante
• NO ES NECESARIO SABER ABSOLUTAMENTE NADA DE
  LENGUAJE HTML PARA CREAR UNA PÁGINA WEB.
• Simplemente aquí se dan unas nociones
  elementales sobre qué es realmente una página web
  y en qué consiste dicho lenguaje.
• Una página web no dista mucho de cualquier
  programa que podamos tener en nuestro ordenador,
  es decir, una página web es un conjunto de
  órdenes o instrucciones que le dicen a nuestro
  ordenador qué es lo que tiene que hacer o mostrar
  en pantalla.
• Como hoy en día un ordenador es incapaz de
  entender el lenguaje humano, se tuvo que buscar
  un lenguaje sencillo y potente para la creación
  de páginas web, este lenguaje es el HTML
  (Hipertext Mark-up Language) o lenguaje de
  etiquetas.

3

• En el lenguaje HTML existen una serie de
  convenciones que definen los aspectos generales
  de una página web, así como sus partes.
• La idea es muy sencilla cualquier cosa que se
  represente en una página web (texto, imágenes,
  tablas...) debe ir entre 2 "tags ltgt, la primera
  indica que empieza el elemento y la segunda
  indica que dicho elemento ha terminado.
•  
• Por ejemplo
• TEXTO Hola, este es el texto FIN DE TEXTO
• Lo que en lenguaje HTML quedaría
• ltTEXTOgt Hola, este es el texto lt/TEXTOgt
• Pero el nombre de las etiquetas nos lo hemos
  inventado. Cada etiqueta posee un nombre, este
  nombre suele ser el nombre del elemento en
  inglés.
• Por ejemplo, una tabla se representa con
  ltTABLEgtlt/TABLEgt.

4
A continuación presentamos un fragmento de código
HTML de una página web.
Pero como hemos mencionado anteriormente, no es
necesario saber HTML, ya que las herramientas de
creación de páginas web pondrán el HTML por
nosotros. Lo único que tendremos que hacer es
diseñar nuestra página tal y como se verá en
pantalla y la herramienta hará el resto.
5
Hagamos una páginaBásicamente una página web
esta formada por una cabecera o título de la
ventana y el cuerpo de la página situado
inmediatamente después de la cabecera, aquí se
definen todos los elementos que contiene la
página web, es decir, aquí insertaremos los
elementos de todos los objetos que aparecen (o
no) en pantalla.Como ejemplo, una página web
tipo sería ltHTMLgt /inicia lenguaje html
ltHEADgt /inicia la cabecera ltTITLEgt
/inicia el titulo Título de la página lt/TITLEgt /
termina el titulo lt/HEADgt /termina la
cabecera ltBODYgt /inicia el cuerpo de la
página Este mensaje está dentro del cuerpo del
documento. lt/BODYgt /termina el cuerpo
de la página lt/HTMLgt /termina lenguaje html
6
(No Transcript)
7
(No Transcript)
8
Observándose en pantalla lo siguiente
9
Partes de una página web

• Los elementos para crear una página web
  básicamente son Texto y todas sus propiedades
  
• Color, tamaño, tipo de letra, y todos los
  estilos cursiva, subrayado, negrita,
  justificación, etc.
• Imágenes.
• Sus propiedades son el nombre y el
• del archivo donde está contenida, su altura, su
  anchura, su justificación, la anchura del borde
  etc. También poseen una propiedad llamada alt
  al poner el cursor encima de la imagen, saldrá
  un recuadro de color amarillo con el texto que
  hayamos escrito.
• La imagen puede ser estática (una simple foto)
  o una animación (casi siempre un archivo en
  formato GIF).

La anchura y altura de las imágenes siempre son
medidas en píxel
10
Tablas. Sus propiedades son el número de
filas y de columnas, su tamaño y justificación,
la alineación del contenido de una celda, el
color o imagen fondo, la anchura del borde,
etc... Ver ejemplo. Hipervínculos, enlaces
o links. Es una propiedad especial que se aplica
al texto o a las imágenes. Consiste básicamente
en que al hacer clic con el ratón sobre el objeto
que posee esta propiedad, entramos
automáticamente en la dirección web que le
hayamos indicado previamente.Principalmente
existen 3 tipos de links 1. A una página web
de nuestro dominio 2. A una parte concreta de
nuestra página 3. A otra página web de otro
dominio Objetos de formularios. Estos
objetos no son tan corrientes como los
anteriores, son más bien propios de cualquier
aplicación Windows. Estos objetos son botones,
casillas de verificación, listas desplegables,
cuadros de texto...
11
Layers (Capas)   Una capa no es más que un
contenedor HTML, es decir, un elemento que agrupa
a otros elementos. Esta agrupación nos permite
tratar a todos los elementos como si fueran un
todo, y gracias a eso, podemos crear unos efectos
visuales interesantes. El recurso más usado es
show\hide layers (ocultar/mostrar capas) que
ocultaría a todos los elementos contenidos dentro
de la capa, cambiar su posición en pantalla, su
color o imagen de fondo, etc...   Las capas se
posicionan en la pantalla de manera absoluta, es
decir mediante coordenadas X, Y, Z, largo y
ancho. La tercera dimensión (la coordenada Z o
z-index), define la superposición de las capas.
Una capa de orden superior ocultará a otra de
orden inferior.   El posicionamiento absoluto
tiene un inconveniente la resolución de la
pantalla. Una capa colocada en unas determinadas
coordenadas, si la resolución con la que se
visualiza la página es más pequeña que la
resolución con la que la diseñamos (por ejemplo
640 x 480) puede quedarse fuera del ángulo de
visión. Para evitarlo, los navegadores
automáticamente activan el scroll de pantalla.
12
Frames Los Frames nos permiten presentar en una
página múltiples documentos en diferentes vistas.
Estas vistas nos permitirán, por ejemplo, fijar
en una de ellas el índice, el logotipo etc.,
mientras que en la otra mostramos el contenido
seleccionado. En realidad, una página web con
frames, no es más que un pequeño fragmento en
HTML que carga una página web en cada una de las
vistas que hayamos definido. Esto se puede ver
en el ejemplo A cada frame o marco le
decimos cual es la página tiene que mostrar. No
hay límite. Podemos crear las combinaciones que
queramos pero hay que recordar que cada frame
carga una página y excesivos frameset pueden
provocar lentitud al visualizarlas.
Frame superior
Frame inferior
13
Añadir música o documentos externos (QuickTime,
Flash, Shockwave, etc...)  Otros elementos
multimedia que podemos incluir en nuestras
páginas son las animaciones generadas fuera de la
programación html.Este tipo de recursos son muy
extensos y útiles, los más comunes son los
generados con Director y Flash. El sonido o
algún video (movie) que haya sido creada con
algún software externo, también puede integrarse
a una página html. Nota No es muy aconsejable
añadir música de fondo, ya que además de la
tarjeta de sonido, se necesita el uso de software
externo al navegador para poder escucharla.
Además, la inclusión de música hace más lenta la
carga de nuestra página, y no todos los
navegadores soportan su uso.
14
Comprobaciones finalesQue nuestra página esté
terminada no significa que esté lista para
colocarse en Internet. Antes de dar ese paso
debemos hacer las últimas comprobaciones para
tener la certeza de que todo funcionará
correctamente.Debemos asegurarnos que todos los
archivos que contienen cada uno de nuestros
documentos y todos aquellos a los que hagan
referencia nuestras páginas existen, como otras
páginas, imágenes, archivos etc.) Con esto
evitaremos situaciones tan corrientes como estas
15
Referencias en línea

• De creadores multimedia
• http//www.doubleyou.com/dyhome.html
• http//www.sapient.com/
• http//www.homewrecker.com/
• http//www.puntoblanco.com
• De películas
• http//www.foxhome.com/castaway/
• http//www.x-men-the-movie.com/xmen-dvd/flash/fram
  es-xmen.html

16
Proceso de desarrollo de un proyecto
on-linePrimera ParteAntes de empezar a
trabajar con Dreamweaver es importante
definir- El contenido Planteamiento del tema.
Definir el producto, estilo de diseño, usuario
al que esta dirigido etc.- Establecer el
diagrama de flujo o esquema de contenidos. No
importa que al ir elaborando el proyecto, este
diagrama inicial sufra modificaciones, lo
elemental es definir un primer trazado de las
propuestas de recorrido del proyecto. - Bocetos
de diseño de interfase- Recopilación de recursos
y/o generación del material Textos Imágenes Il
ustraciones Fotografías Animaciones (Gifs
animados, Flash, Shockwave, QuickTime, etc.)-
Referencias similares (otras páginas del tema y/o
semejantes a la nuestra)- Tiempo estimado de
desarrollo del proyecto
17
Segunda Parte Una vez definidos los contenidos,
recursos, materiales principales y tras haber
generado las primeras ideas del desarrollo y
estructura de la navegación de nuestro site
(sitio) empieza la etapa de producción e
integración en htm. En esta parte del proceso de
creación de un site se trabaja muy paralelamente
con los dos programas Photoshop - Image Ready y
Dreamweaver- Construir la interfase gráfica-
Elaborar un esqueleto de alguna de las páginas
htm principales Uso de tablas, textos e
hipertextos, links o enlaces, botones etc...-
Definición y creación del site desde
dreamweaver- Realizar el resto de las páginas
que componen en site- Comprobar la
navegación   Para ello construiremos en clase el
Proyecto guiado 1. l Imagen y diseño gráficol
HTML y Dreamweaver
18
Esquema de contenido
Proyecto guiado 1
Proceso de desarrollo
19
(No Transcript)
20
(No Transcript)
21
(No Transcript)