Introducción a HTML

1. LOGO
“ Add your company slogan ”
L.I. María del Carmen Rivera
González

2. Contenido
Introducción al HTML1
Estructura de HTML2
Cuerpo de un Documento.3

3. CATEGORÍA COMPETENCIAS ATRIBUTOS
Piensa
crítica y
reflexivamen
te
1. Desarrolla innovaciones y
propone soluciones a problemas
a partir de métodos establecidos.
 Sigue instrucciones y
procedimientos de manera
reflexiva, comprendiendo como
cada uno de sus pasos
contribuye al alcance de un
objetivo.
 Ordena información de acuerdo a
categorías, jerarquías y
relaciones.
 Utiliza las tecnologías de la
información y comunicación para
procesar e interpretar
información.
1. Sustenta una postura personal
sobre temas de interés y
relevancia general, considerando
otros puntos de vista de manera
crítica y reflexiva.
 Elige las fuentes de información
más relevantes para un propósito
específico y discrimina entre
ellas de acuerdo a su relevancia
y confiabilidad.
 Reconoce los propios prejuicios,
modifica sus puntos de vista al
conocer nuevas evidencias, e
integra nuevos conocimientos y
perspectivas al acervo con el que
cuenta.

4. Conceptos Bàsicos
 ¿Qué es el HTTP?
HTTP de HyperText Transfer Protocol
(Protocolo de transferencia de hipertexto)
es el método más común de intercambio
de información en la world wide web, el
método mediante el cual se transfieren las
páginas web a un ordenador.

5. HTML
 ¿Que es HTML?
 El HTML, acrónimo inglés
de Hyper Text Markup
Language (lenguaje de
marcación de hipertexto),
es un lenguaje de marcas
diseñado para estructurar
textos y presentarlos en
forma de hipertexto, que
es el formato estándar de
las páginas web. Gracias
a Internet y a los
navegadores del tipo
Explorer o Netscape, el
HTML se ha convertido
en uno de los formatos
más populares que
existen para la
construcción de
documentos.

6.  ¿Que es
Javascript?
 Javascript (JS) es un
lenguaje de programación
utilizado para crear
pequeños programitas
encargados de realizar
acciones dentro del
ámbito de una página
web..

7.  ¿Que es applets?
 Los applets son pequeños
programas escritos en
lenguaje Java, diseñados
para ser ejecutados
desde internet, que
podemos colocar en
nuestro servidor, junto
con el resto de ficheros
que componen un sitio
Web (documentos HTML,
ficheros de imagen,
sonido, etc.) para lograr
múltiples efectos con
texto, imágenes, sonidos,
etc

8.  ¿Que es applets?
 Los applets son pequeños
programas escritos en
lenguaje Java, diseñados
para ser ejecutados
desde internet, que
podemos colocar en
nuestro servidor, junto
con el resto de ficheros
que componen un sitio
Web (documentos HTML,
ficheros de imagen,
sonido, etc.) para lograr
múltiples efectos con
texto, imágenes, sonidos,
etc

9.  ¿Que es ActiveX?
ActiveX es un conjunto de
tecnologías de Microsoft que
permiten incluir contenido
interactivo en la World Wide
Web.
Con ActiveX, los sitios
cobran vida utilizando
efectos multimedia, objetos
interactivos.

10.  ¿Que es Ajax?
JavaScript Asíncrono y XML (AJAX), es un término que
describe un nuevo modo de utilizar conjuntamente varias
tecnologías existentes. Esto incluye: HTML o XHTML,
CSS, JavaScript, DOM, XML, XSLT, y el objeto
XMLHttpRequest. Cuando estas tecnologías se
combinan en un modelo AJAX, es posible lograr
aplicaciones web capaces de actualizarse continuamente
sin tener que volver a cargar la página completa. Esto
crea aplicaciones más rápidas y con mejor respuesta a
las acciones del usuario.

11.  ¿Que es WWW?
(WWW) o Red informática mundial comúnmente
conocida como la web, es un sistema de distribución de
documentos de hipertexto interconectados y accesibles
vía Internet.
Con un navegador web, un usuario visualiza sitios web
compuestos de páginas web que pueden contener texto,
imágenes, vídeos u otros contenidos multimedia, y
navega a través de esas páginas usando hiperenlaces.

12. Aplicación web
Se denomina aplicación web a
aquellas aplicaciones que los usuarios
pueden utilizar accediendo a un
servidor web a través de Internet o de
una intranet mediante un navegador
(Internet Explorer, Firefox, Opera,
Chrome, etc).

14. HTML
 Características del
lenguaje HTML
 • El Web tenía que ser distribuido: La
información repartida en páginas no muy
grandes enlazadas entre sí.
 • El Web tenía que ser hipertexto y debía
ser fácil navegar por él.
 • Tenía que ser compatible con todo tipo de
ordenadores (PCs, Macintosh, estaciones
de trabajo...) y con todo
 tipo de sistemas operativos (Windows, MS-
DOS, UNIX, MAC-OS,...).
 • Debía ser dinámico: el proceso de cambiar
y actualizar la información debía ser ágil y
rápido.

15. Primeras herramientas
 Editor de Texto
 Navegador

16. Características principales del
HTML
Ejemplo: <BODY BGCOLOR="#9F5F9F" TEXT="#000000"> Contenido
</BODY>
El primer documento HTMLEl primer documento HTML

17. Las etiquetas
 El lenguaje HTML es un lenguaje de
marcas, estas marcas serán fragmentos
de texto destacado de una forma especial
que permiten la definición de las distintas
instrucciones de HTML, tanto los efectos a
aplicar sobre el texto como las distintas
estructuras del lenguaje.
 A estas marcas las denominaremos
etiquetas y serán la base principal del
lenguaje HTML.

18. Una etiqueta será un texto incluido entre los
símbolos menor que < y mayor que >.. El
texto incluido dentro de los símbolos será
explicativo de la utilidad de la etiqueta. Por
ejemplo:
<ETIQUETA>Elementos Afectados por la Etiqueta</ETIQUETA>
Existe normalmente una etiqueta de inicio y otra
de fin, la de fin contendrá el mismo texto que la de
inicio añadiéndole al principio una barra
inclinada /.

19. El primer documento HTML
 Las páginas HTML se dividen en dos partes: la cabecera y el
cuerpo.
La cabecera incluye información sobre la propia página, como
por ejemplo su título y su idioma.
El cuerpo de la página incluye todos sus contenidos, como
párrafos de texto e imágenes.

20. El primer documento HTML
 El cuerpo (llamado body en inglés)
contiene todo lo que el usuario ve en su
pantalla y la cabecera (llamada head en
inglés) contiene todo lo que no se ve (con
la única excepción del título de la página,
que los navegadores muestran como título
de sus ventanas).

21. El primer documento HTML
 A continuación se muestra el código HTML de una
página web muy sencilla:

22. En Notepad++ marcará de color azul las etiquetas
que utilizas para hacer tu página web.

23. Ubica el archivo creado con la extension .html y ábrelo con el
navegador de tu preferencia

24. El resultado es el siguiente:

25. Si quieres probar este primer ejemplo, debes hacer lo siguiente:
 Abre un editor de archivos de texto Notepad ++ y crea un archivo
nuevo
 Copia el código HTML mostrado anteriormente y pégalo tal cual en
el archivo que has creado.
 Guarda el archivo con el nombre de miPrimeraPaginaWeb, pero con
la extensión .html

26. Encabezados
 Los encabezados en HTML nos sirven
para indicar el nombre del tema principal
con el cual se estará trabajando en el
documento HTML (título del tema).

27.  Las etiquetas para encabezados son los
siguientes:
 <h1>Encabezado 1</h1>
 <h2>Encabezado 2</h2>
 <h3>Encabezado 3</h3>
 <h4>Encabezado 4</h4>
 <h5>Encabezado 5</h5>
 <h6>Encabezado 6</h6>

28. Ejercicio
 Realiza un documento tipo html con el
nombre de Encabezados , a continuación
escribe el siguiente código.

30. Formato de Textos
 Etiquetas para dar forma al texto

31. Ejemplos

32. Realiza la siguiente página Web

33. La etiqueta FONT
La etiqueta FONT permite tener un gran
control sobre el tamaño de un texto. Este
tamaño se especifica con su atributo SIZE y
afectará al texto que encierren la instrucción
de inicio (<FONT SIZE="">) y de fin
(</FONT>).

34. Ejemplo en código

35. El resultado sería el siguiente

36. Código de
Colores en
Hexadecimal

37. La etiqueta Body y sus atributos
 Através de la etiqueta <body> es posible
establecer el color o la imagen de fondo
de la página.
 El color de fondo puede establecerse a
través del atributo bgcolor, al que es
posible asignarle un color representado en
hexadecimal o por un nombre predefinido.

38.  Por ejemplo, para hacer que el color de fondo de una
página sea de color azul, tendremos que escribir:
<body bgcolor="#0000FF">
Contenido del cuerpo ...
</body>
Sería equivalente a poner:
<body bgcolor="blue">
Contenido del cuerpo </body>
 </html>

39. Listas en HTML
 Una lista es un párrafo estructurado que
contiene una serie de elementos. HTML
define tres tipos de listas:
 Listas ordenadas;
 Listas no ordenadas;
 Listas de definiciones.

40. Listas en HTML
 Lista ordenada
Contenedor
<ol>
<li> ítem 1 </li>
<li> ítem 2 </li>
</ol>
Efecto visual
1.- ítem 1
2.- ítem 2

41. Listas en HTML
 Lista no ordenada
Contenedor
 <ul>
 <li> ítem 1 </li>
 <li> ítem 2 </li>
 </ul>
visual
 ítem 1
 ítem 2

42. Listas en HTML
 Lista de definiciones
Contenedor
 <dl>
 <dt>Término</dt>
 <dd>Definición</dd>
 </dl>
visual
Término
Definición

43. TABLAS EN HTML
 Tablas
 <TABLE> <TR> <TD>
 Las tablas surgieron con la versión HTML 3.0.
Las tablas nos permiten representar y ordenar
cualquier elemento de nuestra presentación en
diferentes filas y columnas de modo que
podamos resumir grandes cantidades de
información de una manera que puede
representarse rápida y fácilmente.
 El contenido de una tabla lo debemos
desarrollar entre las tags <table>.....</table>.

44. TABLAS EN HTML
 Tablas simples
 Una tabla HTML puede ser considerada de manera simple como un grupo de filas
donde cada una de ellas contiene un grupo de celdas. Las tablas, así como toda
estructura en documentos HTML, son definidas usando tags. Una tabla simple puede
ser insertada en un documento HTML usando tres tags: el tag HTML table (principal
contenedor), el tag HTML tr (fila contenedora) y el tag HTML td (celda simple).
Veamos un ejemplo:

46. TABLAS EN HTML
 Tipos de celdas
 Dos tipos de celda pueden ser definidos en una tabla HTML. Una de ellas es la celda
simple (tag HTML td) anteriormente utilizada en el ejemplo de "tabla simple", y la otra
es un tipo de celda especial (tag HTML th) que contiene información de encabezado
para todas las celdas en la columna (pertenecientes al mismo grupo horizontal). Los
navegadores pueden graficar el contenido de las celdas de encabezado en una
manera especial (usualmente, texto centrado y en negrita). Este tipo de celda es
comúnmente encontrado en el encabezado de una tabla.
 En el ejemplo siguiente la misma "tabla simple" es definida pero esta vez con celdas
de encabezado:

48. TABLAS EN HTML
 Unificando celdas
 Para algunas tablas puedes necesitar unificar dos o más celdas en una sola que
tomará el lugar de aquellas afectadas. Estas unificaciones pueden lograrse mediante
los atributos "rowspan" (para unificar verticalmente) y "colspan" (para unificar
horizontalmente), ambos disponibles para celdas (tag HTML td y tag HTML th).

50. Observa en el ejemplo anterior como una definición de celda unificando dos
celdas, es el equivalente unificado de dos definiciones de celda simple. Esto
también funciona para unificar verticalmente con una pequeña diferencia
debida a la naturaleza de las tablas HTML. Al unificar celdas verticalmente,
las definiciones de celda en la columna afectada deberán ser omitidas.
Observa el siguiente ejemplo, donde el campo 1, 4 y 7 son unificadas

51. ATRIBUTOS

53. valign
Especifica la alineación vertical del contenido de una celda. Funciona
exactamente como el atributo "align" pero para el espacio vertical. Los valores
posibles son (insensibles a mayúsculas/minúsculas):
top: El contenido es alineado arriba.
middle: La información es centrada verticalmente. Este es el valor
predeterminado.
bottom: El contenido es alineado abajo.
baseline: Todas las celdas en una fila que tienen esta alineación deberían tener
su primera línea de texto en una línea base común a todas las celdas de una
fila.

54. MANIPULAR IMÁGENES Y ANIMACIONES EN UNA PAGINA
WEB.
Los formatos más utilizados son el GIF y el JPG, que a pesar de ser imágenes
de menor calidad que las imágenes BMP, son más recomendables debido a
que ocupan menos memoria.
Formato GIF:
Utilizan un máximo de 256 colores, y son recomendables para imágenes con
grandes áreas de un mismo color o de tonos no continuos. Suelen utilizarse
con gran frecuencia, ya que permiten contener transparencias y animación.
Formato JPG:
Las imágenes son de mayor calidad que las GIF, al poder contener millones de
colores, pero el
tamaño de la imagen es mayor y tarda más en descargarse.

55. Formato GIF:

56. Formato JPG:

57. <img src="imagen.jpg">
En ésta instrucción se da por defecto que la imagen que se inserta tiene la
extensión JPG.
Para insertar otro tipo de imagen sólo deberá especificar la extensión
correspondiente. Las imágenes pueden ser adquiridas de la galería de
imágenes de Microsoft, o de cualquier otra imagen digitalizada.
Incluso se pueden crear iconos animados desde algún programa de
animación, y usarlos en una página Web.
Selección del formato
Uno de los grandes dilemas a la hora de incluir gráficos en sus páginas Web
es elegir el formato adecuado para cada tipo de imagen, vamos a intentar
guiarle en la selección de cada formato.
Para insertar una imagen, debe utilizar la siguiente sintaxis:

58. Imágenes fotográficas
Imágenes obtenidas a través de fotografías de personas o lugares.
Para este tipo de imágenes el formato más recomendado es el JPEG porque
consigue una gran compresión con una mínima perdida de calidad.

59. Imágenes renderizadas
Este tipo de imágenes son las obtenidas por un programa de generación
de imágenes sintéticas mediante algún proceso de trazado de rayos o
similar. Se caracterizan por degradados suaves y líneas muy bien
definidas.
Para este tipo de imágenes es recomendable usar el formato PNG. Tenga
presente que el formato PNG es el más reciente y puede no estar
soportado en todos los navegadores..

60. Imágenes sencillas
Para las imágenes sencillas con pocos colores y con formas muy
delimitadas, el formato más recomendado es el GIF, ya que se puede
adaptar al número de colores de una imagen.
Con el paso del tiempo puede que el formato PNG desbanque al GIF ya
que el primero es más avanzado, pero como su uso todavía no está muy
extendido recomendamos el formato GIF.

61. instrucción para insertar una
imagen en el documento pero
en la imagen se puede colocar
un texto alternativo.
<IMG SRC="sugeren.gif"
ALT="AQUI VA UNA IMAGEN">

62. Instrucción para que
aparezca una imagen en el
fondo del documento.
<BODY
BACKGROUND="yellow_r.gif">