UNIVERSIDAD DE EL SALVADOR
FACULTAD DE INGENIERÍA Y ARQUITECTURA ESCUELA DE
INGENIERÍA DE SISTEMAS INFORMÁTICOS
TÉCNICAS DE
PROGRAMACIÓN
PARA INTERNET
TPI-115
CICLO II
I-10515
TPI-115
UNIDAD II
DISEÑO, PUBLICACIÓN,
REGISTRO Y
OPTIMIZACIÓN SEO DE
SITIOS WEB.
UNIDAD II
Objetivos
• Conocer los antecedentes de los lenguajes de
marcas, que son los DTD, diferencias entre
SGML, XML y HTML
• Conocer las características del HTML
• Conocer el Lenguaje de marcado de
hipertexto - HTML
• Aprender a construir sitios web
“manualmente” y mediante el uso de
herramientas.
UNIDAD II
2.1 Introducción. El
HTML y sus
estándares.
INTRODUCCION
Papiro egipcio 🡸
🡸
Almacenamiento
de pergaminos
en la biblioteca
de un monasterio
INTRODUCCION
Antes de la invención de la imprenta el
conocimiento y su conservación estaban
reservados a los líderes políticos y
religiosos.
Solamente ellos tenían acceso a la
educación y el conocimiento.
INTRODUCCIÓN
Hasta que llegó la imprenta y
permitió el acceso al conocimiento a
muchas más personas,ya no sólo
políticos y religiosos.
ANTECEDENTES
La imprenta:
A Gutenberg se le debe distinguir por sus
avances en el uso de la imprenta "una técnica
para producción en serie con letras metálicas,
una nueva aleación metálica para los tipos y
la tinta de impresión con pintura.
ANTECEDENTES
También sería conveniente ubicar
a Gutenberg comoun símbolo
porque inauguró la industria
editorial en occidente con la
Biblia de 1455".
Artículo BBC.https://www.bbc.com/mundo/noticias-39230916
ANTECEDENTES
• Gutenberg construyó,
entre 1436 y 1450, un
aparato que logró
fundir
satisfactoriamente las
letras metálicas que usó
en sus primeros libros,
con las cuales imprimió
su famosa Biblia en
1455.
ANTECEDENTES
La imprenta
perfeccionada de
Gutenberg era un sencillo
invento en el que cada
página era compuesta
con letras o tipos
movibles, sobre los
cuales se untaba tinta.
Arriba de ellos se ubicaba
el papel que tenía que
ser prensado para fijar la
impresión
2.1 LENGUAJES DE MARCAS
Los lenguajes utilizados en informática se
pueden dividir en:
•Lenguajes de Programación
•Lenguajes de Marcado
***Los lenguajes de marcas son utilizados
desde que aparecieron los primeros
sistemas de tratamiento de textos.
2.1 LENGUAJES DE MARCAS
Primeras Ideas
Las primeras ideas ideas en la
utilización de las marcas en
documentos electrónicos se dieron
en la GCA:
Graphic
Communications
Association
2.1 LENGUAJES DE MARCAS
Primeras Ideas
La GCA (Graphic
Communications Association) dio
los primeros pasos en:
-Reconocer la importancia del
empleo de las marcas y
-Promover proyectos que
analizarán su utilización.
2.1 LENGUAJES DE MARCAS
Primeras Ideas
Es así como en 1967, Willian
Tunnicliffe indica la necesidad
de separar, dentro de un
documento, la información de
su formato.
2.1 LENGUAJES DE MARCAS
Inicios de los lenguajes de marcas
Problemas con los lenguajes de marcas:
Cada aplicación tiene sus propias
marcas para indicar el formato.
El formato de documento en una
aplicación es desconocido para otra
Lo anterior genera un enorme problema de
2.1 LENGUAJES DE MARCAS
En 1969 Charles Goldfarb junto a Edward
Mosher y Ray Lorie crearon un lenguaje
único de marcado que permitiese
entenderse con los diferentes documentos
generados por distintos sistemas y
plataformas, reuniendo en una misma
etiqueta el formato y la descripción del
contenido.
2.1 LENGUAJES DE MARCAS
A este desarrollo se le denominó marcado
generalizado, donde se adoptó el
término
Lenguaje de Marcas
• La solución utiliza etiquetas de
descripción de datos relacionadas con
plantillas de estilos de formato,
consiguiendo así los dos objetivos.
2.1 LENGUAJES DE MARCAS
• A este lenguaje se le denominó
GML(Generalized Markup Language)
(Lenguaje de Marcado Generalizado)
siglas que curiosamente coinciden con las
iniciales de sus autores (Goldfarb, Mosher,
Lorie)
2.1 LENGUAJES DE MARCAS
En 1978 gracias al comité de
procesamiento de la información de la
ANSI se dieron los primeros pasos
para crear SGML y convertirlo en
estándar. En 1985 se publicó el
borrador y en 1986 finalmente se
publico como norma ISO 8879:1986
2.1 LENGUAJES DE MARCAS
SGML fue diseñado para permitir
representar la información de
manera sencilla, y que esta pudiera
transferirse entre diferentes
sistemas manteniendo la
compatibilidad entre programas y
plataformas.
2.1 LENGUAJES DE MARCAS
SGML se basa en el concepto de
marca, que originalmente describía
una anotación u otros símbolos
para indicar a un maquetador de
imprenta como diseñaruna
determinada página: tamaño letra,
negritas, centrados, etc.
2.1 LENGUAJES DE MARCAS
El manual de estilo: The Chicago
Manual ofStyle define markup así:
“Es el proceso de marcar un
documento manuscrito con
instrucciones acerca de cómo se
deben utilizar los tipos de letra, los
tamaños, los espacios, etc.”
2.1 LENGUAJES DE MARCAS
Los lenguajes de marca son
hoy día unarealidad enel
ámbito documental.
Ejemplos: HTML, VRML,
MATHML, RTF, PDF,
etc.
2.1 LENGUAJES DE MARCAS
Los lenguajes de marca ofrecen
ventajas tales como:
• Representación del conocimiento,
• La creación de bibliotecas virtuales,
• Recuperación e intercambio de
información entre diferentes
plataformas.
2.2 FUNDAMENTOS
Fue a finales de los 80’s cuando
Tim Berners-Lee aplicó las normas
del SGML para diseñar el HTML
como solución para publicarlas
investigaciones de muy diversas
fuentes y autores que se producían
en el CERN.
2.2 LENGUAJE HTML
Tim denominó al lenguaje que creó
HTML(Hipertext Markup
Language) y dio el nombre WWW
a su sistema de hipertexto para la
red informática mundial. La
sencillez de los dos procesos ha
sido la clave principal de su éxito.
2.1b HTML y sus Estándares
Metalenguaje
SGML
ISO
8879:1986
3.2 LENGUAJE
HTML
MathML
VRML
RTF
HTML
H T
H
H TT M
M H
L LT
MML
WML
HL T
H
HT C
T
XHTML HHT
H
TT
H
M
MT LDM
TT
H
MML H
LH
HTML
M L
VARIACIONES
L T
L M
FL M L
Metalenguaje XML ISO 8879:1986
XML
HTM
HTM
HTM
HTM
XHTML
HTM
LLLHTM
HTM
HTM
LLLHTM
HTM
HTM
HTML
LLLHTM
L
2.1 HTML y sus Estándares
(Basado en SGML y basado en XML)
Relación entre SGML, XML y HTML
• SGML: es un lenguaje de marcado
general y extensible; esto significa que con
él podemos describir/definir cualquier
otro lenguaje de marcas(p.e. HTML)
• XML: adopta las principales
características de SGML, sigue siendo
general y extensible.
Relación entre SGML, XML y HTML
• HTML: es un lenguaje de
marcado concreto,(sería
un elemento del conjunto
de lenguajes definibles en
SGML o XML)
2.1 HTML y sus Estándares
2.1 HTML y sus Estándares
2.2 LENGUAJE HTML
Especificaciones del
HTML y XHtml
2.1 HTML y sus Estándares
(Especificaciones de HTML)
2.2 LENGUAJE HTML
CARACTERÍSTICAS
DEL HTML
CARACTERÍSTICAS
• Una página web o documento html es un archivo de
texto plano. Véase Lista de codificaciones caracteres
• En html 4 normalmente se usan los primeros 127
caracteres de la tabla de códigos ASCII.
ISO-8859-1, aunque se puede usar cualquier otra
codificación para texto siempre y cuando se guarde
usando la codificación correcta.
• En html 5 normalmente se usa codificación utf-8,
aunque se puede usar para la tabla unicode cualquier
otra codificación. Unicode-> +++
• Para caracteres especiales se recomienda usar la Tabla
de codigos HTML ó HACER USO utf-8
https://www.w3schools.com/html/html_charset.asp
CARACTERISTICAS
•
CARACTERISTICAS
https://prnt.sc/_tMEMOWc6fP9
CARACTERÍSTICAS
https://prnt.sc/9zWCSYZHGOSF
CARACTERISTICAS
•
CARACTERISTICAS
• Más información sobre codificación
• La extensión de una página web debe ser:
.html ó .htm(incluso para xhtml), en páginas
dinámicas la extensión depende de la
tecnología de servidor: .php .asp .aspx
.jsp .jsf .cfm .cgi .idc .ssi
• Las etiquetas (tags) afectan únicamente al
texto que encierran.
• Los navegadores cuando las etiquetas están
mal escritas no dan errores.
CARACTERISTICAS
• Una página web ó documento html es
interpretado por el navegador o browser
• Existen diferentes versiones (DTD’s) de
HTML. -> versiones DTDs
• Se pueden incluir comentarios al igual que en
los lenguajes de programación
• Es portable entre plataformas e
independiente del navegador y sistema
operativo.
• Los nombres de etiqueta no son case
sensitive
CARACTERÍSTICAS
• Las imágenes, applets y otros elementos
multimedia no están incluidos en la página sino
referencias a dichos objetos por URL’s, excepto
mediante DataURI algunos pueden estarlo.
• ***El navegador original solo podía mostrar texto y links, y desplazarse de una
página a otra pero solo textual, sin multimedia.
•
CARACTERÍSTICAS
•
• En principio una página web debe ser
vista con cualquier navegador, es decir,
que son multiplataforma (browser y S.O.)
• Corresponden a una DTD (Definición de
Tipo de Documento) en particular.
(Un paréntesis ….)
LA MARCA SE GOBIERNA MEDIANTE UNA DTD
• Internet y el World Wide Web
están constituidos sobre
estándares universalmente
aceptados. El World Wide Web
Consortium o W3C se creó para
asegurar que los estándares
que gobiernan Internet no
favorecieron a ninguna
empresa en particular.
Declaración de tipo documento
• La declaración de tipo de documento debe ir justo
antes del elemento raíz del documento SGML/XML
• El término !DOCTYPE debe ir en mayúsculas con
el siguiente formato:
<!DOCTYPE elemento_raíz SYSTEM ”nombreDTD” “direcciónDTD”>
• Existen dos tipos de DTD privada y publica, una
DTD externa publica se identifica con el termino
PUBLIC y la dirección DTD puede ser una URL
absoluta o relativa en el caso de DTD publica el
formato es:
<!DOCTYPE elemento_raiz PUBLIC “nombre_DTD” “dir_DTD”
Declaración de tipo documento
Formato DTD para DTD públicos:
<!DOCTYPE elemento_raiz PUBLIC “nombre_DTD” “dir_DTD”
el nombre DTD debe seguir el siguiente modelo:
“prefijo//propietario_DTD//Descripcion_DTD//idioma_iso-639”
El prefijo puede ser: ISO, + o EJEMPLO:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
</HTML>
Declaración de tipo documento
• Un documento HTML para ser
considerado como correcto debe de
iniciarse declarando qué versión
del lenguaje se está usando para
crearlo, EJEMPLO:
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN" "http://www.w3.org/TR/REChtml40/loose.DTD">
Declaraciones DOCTYPE, recomendadas por W3C
https://www.w3.org/QA/2002/04/valid-dtd-list.html
Declaración de tipo de documento
Declaraciones DOCTYPE, recomendadas por W3C
https://www.w3.org/QA/2002/04/valid-dtd-list.html
2.2.1 Estructura y Formato de
Páginas
ETIQUETAS TAG
ETIQUETAS TAG
• 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.
• ***Un tag corresponde a un elemento html, pero no es el
elemento, ya que este último es algo más complejo. Lo
estudiaremos en la unidad iii
ETIQUETAS TAG
• Las etiquetas describen el aspecto visual que
debe tener una página web.
• Las etiquetas indican al navegador la posición
relativa de los elementos de la página, su
tamaño, colores, etc.
Clases de Etiquetas
Etiquetas vacías
formato: <etiqueta>
Etiquetas contenedoras
formato: <etiqueta>. . .</etiqueta>
ARGUMENTOS
• La mayoría de etiquetas tienen parámetros
para indicar propiedades del “objeto” que
definen.
• Los argumentos o parámetros indican aspectos
del formato como: color, tamaño posición
Formato de Etiqueta con parámetros
<etiqueta parametro1=“valor1” parametro2=“valor2”...>
</etiqueta>
ESTRUCTURA BÁSICA DE UN
DOCUMENTO HTML
<!–Declaración Tipo de Documento DTD -->
<HTML>
Sustituir esta línea
por la DTD
<HEAD>
correspondiente, según
la versión de HTML
que se esté usando
</HEAD>
<BODY>
<!--...CUERPO DEL DOCUMENTO...-->
</BODY>
</HTML>
DOCUMENTOS HTML BIEN ESCRITOS
1. Deben poseer la declaración de tipo de
documento utilizada en la página antes
de la estructura de la misma.
2. Deben poseer encabezado y dentro de
este indicarse el título y las etiquetas
meta mínimas.
3.Debe poseer cuerpo de documento.
4.Debe apegarse al estándar su escritura.
Ejemplo de página web
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>
P&acute;gina Web m&aacute;s simple que se puede
construir
</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8">
</head>
<body>
<!-- ESTA ES UNA PÁGINA WEB VALIDA Y EN BLANCO -->
</body>
</html>
contrastar
XHTML (Quickreference w3c)
https://cscie12.dce.harvard.edu/lecture_notes/2009/20090128/slide42.html
•
•
•
•
•
Características:
Es la versión en XML de HTML(no SGML)
Es la versión 4 de HTML pero formalmente
estandarizada, en el futuro todas las páginas
deberían usar XHTML.
Es sensible a mayúsculas y minúsculas
El código XHTML se escribe en minúsculas
No existen etiquetas abiertas, las etiquetas
deben estar cerradas. Ej.: <hr></hr>, <br/>
XHTML
https://cscie12.dce.harvard.edu/lecture_notes/2009/20090128/slide31.html
<!DOCTYPE
html
PUBLIC version_dtd url_dtd>
<html>
<head>
<title>
T&iacute;tulo de la P&acute;gina Web
</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8"/>
<meta http-equiv="expires" content="0”/>
<meta http-equiv="cache-control" content="no-cache”/>
<meta http-equiv="pragma"
content="nocache”/>
<meta name="author" content="nombre del autor de la pagina”/>
<meta name="keywords"
content="palabra1, palabra2, palabran”/>
<meta name="description" content="breve descripcion de contenido”/>
</head>
<body>
<!-- contenido de la pagina -->
</body>
</html> Combinación de lenguajes: https://www.bonviveur.es/recetas/
Encabezado del Documento
Puede contener: (esta información no se
muestra al usuario, excepto el título)
•Título - etiqueta title
•Meta Información - Etiquetas meta
•Hojas de Estilos en Cascada- CSS
(unidad iv) Etiqueta style
•Código de programación - Scripts
(unidad iv) Etiqueta script
Encabezado del Documento
Título - etiqueta title
Indica el título de la página web y
representa el texto que aparece en la
barra de título de la ventana del
navegador.
2.2.1.c Metadata
Meta Información - Etiquetas meta
http://www.hipertexto.info/documentos/metadatos.htm
Use los metatags para conseguir los
siguientes efectos:
a)cambiar la url dela página actual tras n
segundos,
b)indicar las palabras clave de la página,
c)indicar la descripción de la página web,
d)indicar el autor de la página web,
http://www.hipertexto.info/documentos/norm_conten.htm
Encabezado del Documento
Meta Información - Etiquetas meta
-->Metadatos
e)indicar al browser que no guarde en la
caché la página web, es decir, que siempre
la cargue desde el servidor,
f) indicar la fecha de expiración,
g)indicar al proxy server que no guarde la
página en la caché,
h)indicar a los robots[buscadores] que solo
indexen la página actual, es decir, no sigan
los links de la página.
Encabezado del Documento
Meta Información - Etiquetas meta
Hay dos tipos de metainformación que
se puede colocar en el encabezado de
una página web:
•Información referente al protocolo
•Información referente a la página.
Encabezado del Documento
Meta Información - Etiquetas meta
Información referente al protocolo:
•Tipo de contenido y conjunto de
caracteres usado para codificar la página
•Actualización de página
•Lenguaje del contenido
•Fecha de expiración
•Cache del browser
•Caché del proxy
•Clasificación de la página
Encabezado del Documento
Meta Información - Etiquetas meta
Información referente a la página:
•Descripción del contenido de la página
•Palabras clave de la página
•Autor de la página
•Generador o Editor
•Información para los Robots
•Cualquier otro valor personalizado
Cuerpo del Documento
Tablas: usadas para
•Presentar información en forma tabular.
(objetivo original)
•Dar formato al contenido de la página (no
recomendado)
•Se puede anidar tablas dentro de tablas
Imágenes Pueden ser usadas como
enlaces(link)
•Pueden ser usadas como botones(form.)
Cuerpo del Documento
Definición de Colores:
•Código hexadecimal
•Nombre del color
Espaciados y saltos de línea
•Solo se toma en cuenta un espacio
•Los saltos de línea y retornos de carro
no se toman en cuenta.
Cuerpo del Documento
Caracteres Latinos y Especiales:
•Usar secuencia de escape con nombre
•Usar secuencia de escape con código
Cabeceras o encabezados (para títulos)
•Existen seis encabezados H1 a H6
•Aclaración SEO….
•EL tamaño no se puede modificar ya
está predefinido para cada browser
Cuerpo del Documento
Fuentes:
•Se puede cambiar tamaño (1 a 7 son
tamaños predefinidos)
•Se puede cambiar su color (usando
nombre o código)
Estilos (para dar formato al texto)
•Físicos: produce un cambio físico dado
•Lógicos: produce un cambio “lógico”
2.2.1d Validez de página web
La validez de una página
web se puede comprobar en
del W3C en
el sitio web
http://wwww.w3.org (busque
el link: html validator).
Otra opción en línea es:
https://www.freeformatter.com/
html-validator.html
2.2.1d Validez de página web
Extensión o plug-in de navegador
que permite validar páginas web.
sitio web
2.2.1d Validez de página web
Extensión o
plug-ins de
navegador
que permiten
validar
páginas web.
Validez de una página web
Existen en W3.org, tres
formas para validar código
de una página web que son:
•Dar la url de la página (cuando
esta ya está publicada)
•Subir el archivo (cuando lo
tenemos en nuestro equipo)
•Enviar el código a través de un
formulario web.
Validez de una página web
Ingresando la URL siguiente:
http://validator.w3.org/