Publicado el 23 de Noviembre del 2018
952 visualizaciones desde el 23 de Noviembre del 2018
740,6 KB
36 paginas
Creado hace 10a (01/10/2013)
APLICACIONES WEB
APLICACIONES WEB
APLICACIONES WEB
APLICACIONES WEB
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
Objetivos
Introducir el lenguaje de presentación de contenidos HTML
Mostrar las diferencias básicas del XHTML respecto al HTML convencional
Introducir las hojas de estilo en cascada CSS
Índice: Tema 2.1
2.1 El idioma de Internet
2.1.1 El lenguaje HTML
2.1.2 El uso de marcas HTML
2.1.3 Componentes de los documentos HTML
Índice: Tema 2.1
2.1 El idioma de Internet
2.1.1 El lenguaje HTML
2.1.2 El uso de marcas HTML
2.1.3 Componentes de los documentos HTML
2.1
2.1.1
EL IDIOMA DE INTERNET
EL LENGUAJE HTML
¿Qué es una web?
Una página WEB no es un único objeto, está compuesto por múltiples ficheros
(imágenes, video, películas flash, JavaScript ).
Existe un fichero principal cuyo contenido es HTML y que describe el contenido de
la página, tanto texto como otros elementos.
Las WWWs es una combinación de 4 ideas básicas:
Las WWWs es una combinación de 4 ideas básicas:
• Hipertexto (enlaces a otros recursos).
•
Identificadores de Recursos (URLs).
• Modelo cliente‐servidor.
• Un lenguaje de marcado (HTML).
APLICACIONES WEB
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
4
2.1
2.1.1
EL IDIOMA DE INTERNET
EL LENGUAJE HTML
¿Qué es HTML?
HTML es una aplicación SGML (Standard Generalized Markup Language).
SGML es un metalenguaje creado para definir lenguajes de marcado específicos:
• Se usan para marcar la información con diferentes propósitos: señalar cómo debe
• Se usan para marcar la información con diferentes propósitos: señalar cómo debe
presentarse la información, indicar el significado de cada dato, etc…
,
y
• Para ello, los elementos de SGML se definen mediante marcas de apertura y cierre:
<nombre> ... </nombre>
p
HTML ha ido evolucionado en sucesivas versiones desde que Tim Berners‐Lee
HTML ha ido evolucionado en sucesivas versiones desde que Tim Berners Lee
propusiera la primera versión en 1991, estableciéndose estándares para cada una.
La versión estandarizada actual es HTML4.01 (HTML5 es aún experimental).
La versión estandarizada actual es HTML4.01 (HTML5 es aún experimental).
El organismo internacional encargado de la estandarización de las versiones de
HTML es el World Wide Web Consortium (W3C)
HTML es el World Wide Web Consortium (W3C).
APLICACIONES WEB
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
5
2.1
2.1.1
EL IDIOMA DE INTERNET
EL LENGUAJE HTML
Estructura básica de un documento HTML
Todo documento HTML consta de tres secciones:
• Declaración de la DTD utilizada.
• Cabecera con información general sobre el documento (entre las marcas <head>).
• Cuerpo con la descripción del contenido del documento (entre las marcas <body>).
Las tres secciones se han de encontrar en ese orden.
Las tres secciones se han de encontrar en ese orden.
La cabecera y el cuerpo se encuentran dentro del elemento HTML, pero la
declaración de versión no.
declaración de versión no.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<ht l>
<html>
<head> ... </head>
<body> ... </body>
</ht l>
</html>
html
head
body
title
p
p
APLICACIONES WEB
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
6
2.1
2.1.1
EL IDIOMA DE INTERNET
EL LENGUAJE HTML
Definición de Tipo de Documento (1)
Como todas las aplicaciones SGML, HTML está definido con una Definición de Tipo
de Documento (DTD).
Una DTD es un documento que recoge el conjunto de normas y restricciones que
Una DTD es un documento que recoge el conjunto de normas y restricciones que
deben cumplir los documentos de un determinado tipo.
La DTD para HTML establece la forma de construir marcas las marcas
La DTD para HTML establece la forma de construir marcas, las marcas
contempladas y sus atributos, las secuencias correctas, etc….
Para que una página HTML sea correcta y válida es imprescindible que incluya el
correspondiente DOCTYPE que indica el DTD utilizado.
Para HTML 4 están definidas tres tipos de DTD: estricta, transicional y para
documentos con marcos.
APLICACIONES WEB
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
7
2.1
2.1.1
EL IDIOMA DE INTERNET
EL LENGUAJE HTML
Definición de Tipo de Documento (2)
DTD estricta: Incluye las restricciones más severas.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
g
p
DTD transicional: Permite el uso de algunos atributos relacionados con el aspecto.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
DTD para páginas de marcos: Permite el uso de marcos (obsoleto).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/REC-html40/frameset.dtd">
APLICACIONES WEB
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
8
2.1
2.1.1
EL IDIOMA DE INTERNET
EL LENGUAJE HTML
Definición de Tipo de Documento (3)
La validación es el proceso que asegura que un documento escrito en un determi‐
nado lenguaje cumple con las normas y restricciones especificadas en su DTD.
Aunque la validación no es obligatoria y las páginas web se pueden ver bien sin
Aunque la validación no es obligatoria y las páginas web se pueden ver bien sin
que sean válidas, es un proceso que permite detectar errores.
Existen diferentes formas de validar una página creada de acuerdo a una
Existen diferentes formas de validar una página creada de acuerdo a una
determinada DTD:
• Algunos editores (como Dreamweaver) tienen el validador integrado en la propia
(
)
herramienta.
• Algunos navegadores (como Firefox) permite instalar un validador como complemento.
Algunos navegadores (como Firefox) permite instalar un validador como complemento
• El organismo W3C posee una herramienta que se puede utilizar gratuitamente a través de
Internet desde: http://validatorw3 org/
Internet desde: http://validator.w3.org/
APLICACIONES WEB
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
9
2.1
2.1.1
EL IDIOMA DE INTERNET
EL LENGUAJE HTML
Cabecera del documento (1)
La cabecera es el elemento de segundo nivel delimitado por las marcas <head>.
Contiene información general acerca del propio documento que no se considera
como parte del contenido del documento:
<head>
<!-- Zona de etiquetas META -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Zona de título -->
<title>El título del documento</title>
l d l d
/ i l
l í
i l
y
#
<!-- Zona de recursos enlazados (CSS, JavaScript, ...) -->
<link rel="stylesheet" href="#" type="text/css" media="screen" />
/
<style> p {color: blue;} </style>
<script src="#" type="text/javascript"></script>
yp
/
</h
d>
</head>
APLICACIONES WEB
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
10
2.1
2.1.1
EL IDIOMA DE INTERNET
EL LENGUAJE HTML
Cabecera del documento (2)
El elemento principal de la cabecera es <title>, que especifica el título del
documento:
• Este elemento es obligatorio.
• Su contenido sólo puede ser texto.
• El título suele aparecer en la barra superior de los navegadores.
p
p
g
Además puede contener otros elementos como metadatos.
La zona de recursos enlazados puede contener información relativa a la
utilización de:
• Estilos para dar formato al contenido de la página.
• Lenguajes de script para dotar de dinamismo a la página
Lenguajes de script para dotar de dinamismo a la página.
APLICACIONES WEB
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
11
2.1
2.1.1
EL IDIOMA DE INTERNET
EL LENGUAJE HTML
Cabecera del documento (3)
p
q
;
Los metadatos permiten incluir cualquier información relevante sobre la propia
yp
página mediante la etiqueta <meta>. Los metadatos más utilizados son:
• Autor del documento:
<meta name="author" content="Juan Pérez" />
• Codificación de caracteres del documento:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
/
• Copyright del documento:
<meta name="copyright" content="librosweb.es" />
• Comportamiento de los buscadores:
<meta name="robots" content="index, follow" />
• Palabras clave que definen el contenido del documento:
Palabras clave que definen el contenido del documento:
<meta name="keywords" content="diseño, css, web, html" />
• Breve descripción del sitio:
<meta name="description" content="Artículos sobre diseño web" />
/
APLICACIONES WEB
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
12
2.1
2.1.1
EL IDIOMA DE INTERNET
EL LENGUAJE HTML
Cuerpo del documento
El cuerpo es el elemento de segundo nivel, delimitado por las marcas <body>,
que describe el contenido de la página, es decir, lo que ha de mostrar el
navegador, y cómo lo ha de mostrar.
En el cuerpo del documento puede haber infinidad de elementos de muy diversos
tipos, anidados unos dentro de otros, y que son los que determinan el formato
del documento. Se dividen en dos tipos generales:
• A nivel de texto (inline), que pueden contener texto propiamente dicho y otros elementos
a nivel de texto. Son elementos que no definen estructuras y se utilizan para establecer
opciones de formato, crear hipervínculos o insertar objetos.
• A nivel de bloque (block‐level), que pueden contener elementos a nivel de texto y otros
elementos a nivel de bloque. Se utilizan para estructurar el contenido, organizando la
información en entidades tales como párrafos, epígrafes, tablas, listas o formularios.
información en entidades tales como párrafos, epígrafes, tablas, listas o formularios.
APLICACIONES WEB
TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO
13
2.1
2.1.1
EL IDIOMA DE INTERNET
EL LENGUAJE HTML
Resumiendo (1)
HTML es un Lenguaje de Marcas de HiperTexto.
Lenguaje de computadora de sintaxis muy sencilla.
• NO es un lenguaje de programación.
NO es un lenguaje de programación.
• Documentos en archivos de texto simple.
• Texto sin formato
Texto sin formato.
Diferenciación de los distintos elementos por marcas.
• Pares de marc
Crear cuenta
Comentarios de: Tema 2: Lenguajes de presentación y estilo (0)
No hay comentarios