UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz [email protected].
-
Upload
marina-montes-reyes -
Category
Documents
-
view
232 -
download
0
Transcript of UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz [email protected].
![Page 2: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/2.jpg)
• 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.
ObjetivosObjetivos
![Page 3: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/3.jpg)
INTRODUCCION
Papiro egipcio
Almacenamiento de pergaminos en la biblioteca de un monasterio
![Page 4: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/4.jpg)
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 realmente acceso a la educación y el conocimiento.
INTRODUCCION
![Page 5: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/5.jpg)
Hasta que llego la imprenta y permitió el acceso al conocimiento a muchas más personas, ya no sólo políticos y religiosos.
INTRODUCCION
![Page 6: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/6.jpg)
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 aliación metálica para los tipostipos y la tinta de impresión con pintura.
ANTECEDENTES
![Page 7: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/7.jpg)
También sería conveniente ubicar a Gutenberg como un símbolo porque inauguró la industria editorial en occidente con la Biblia de 1455".
ANTECEDENTES
![Page 8: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/8.jpg)
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.
![Page 9: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/9.jpg)
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
![Page 10: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/10.jpg)
3.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.
![Page 11: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/11.jpg)
Primeras IdeasPrimeras IdeasLas primeras ideas ideas en la utilización de las marcas en documentos electrónicos se dieron en la GCA:
Graphic
Communications
Association
3.1 LENGUAJES DE MARCAS
![Page 12: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/12.jpg)
Primeras IdeasPrimeras IdeasLa 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.
3.1 LENGUAJES DE MARCAS
![Page 13: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/13.jpg)
Primeras IdeasPrimeras Ideas
Es así como en 1967, Willian Tunnicliffe indica la necesidad de separar, dentro de un documento, la información de su formato.
3.1 LENGUAJES DE MARCAS
![Page 14: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/14.jpg)
Inicios de los lenguajes de marcasInicios de los lenguajes de marcasProblemas 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 incompatibilidad.
3.1 LENGUAJES DE MARCAS
![Page 15: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/15.jpg)
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.
3.1 LENGUAJES DE MARCAS
![Page 16: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/16.jpg)
A este desarrollo se le denominó marcado generalizado, donde se adopto el término
Lenguaje de Marcas• La solución utilizaba etiquetas de
descripción de datos relacionadas con plantillas de estilos de formato, consiguiendo así los dos objetivos.
3.1 LENGUAJES DE MARCAS
![Page 17: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/17.jpg)
• 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)
3.1 LENGUAJES DE MARCAS
![Page 18: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/18.jpg)
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 publico el borrador y en 1986 finalmente se publico como norma ISO 8879:1986
3.1 LENGUAJES DE MARCAS
![Page 19: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/19.jpg)
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.
3.1 LENGUAJES DE MARCAS
![Page 20: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/20.jpg)
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ñar una determinada página: tamaño letra, negritas, centrados, etc.
3.1 LENGUAJES DE MARCAS
![Page 21: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/21.jpg)
El manual de estilo: The Chicago Manual of Style define markup así:
“Es el proceso de marcar un documento manuscrito con instrucciones acerca de como se deben utilizar los tipos de letra, los tamaños, los espacios, etc.”
3.1 LENGUAJES DE MARCAS
![Page 22: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/22.jpg)
Los lenguajes de marca son hoy día una realidad en el ámbito documental.
Ejemplos: HTML, VRML, MATHML, RTF, PDF, etc.
3.1 LENGUAJES DE MARCAS
![Page 23: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/23.jpg)
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.
3.1 LENGUAJES DE MARCAS
![Page 24: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/24.jpg)
3.2 LENGUAJE HTML 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 publicar las investigaciones de muy diversas fuentes y autores que se producían en el CERN.
![Page 25: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/25.jpg)
Tim denominó HTML(Hipertext Markup Language), al lenguaje que creo 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.
3.2 LENGUAJE HTML
![Page 26: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/26.jpg)
Relación entre SGML, XML y HTMLRelació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
• HTML: es un lenguaje de marcado concreto,(sería un elemento del conjunto de lenguajes definibles en SGML o XML)
![Page 27: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/27.jpg)
HTMLRTFMathML
CDF
HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLVARIACIONES
VRMLXHTML
WML
3.2 LENGUAJE HTML3.2 LENGUAJE HTML
![Page 28: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/28.jpg)
XMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML
XHTML
3.2 LENGUAJE HTML
![Page 29: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/29.jpg)
CARACTERISTICAS DEL HTML
3.2 LENGUAJE HTML
![Page 30: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/30.jpg)
CARACTERISTICAS DEL HTML
3.2 LENGUAJE HTML
![Page 31: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/31.jpg)
• Una página web ó documento html es un archivo de texto plano
• Utiliza los primeros 127 caracteres de la tabla de códigos ASCII. ISO-8859-1
• La extensión de una pagina web debe ser: .html ó .htm
• Las etiquetas (tags) afectan únicamente al texto que encierran.
• Las etiquetas mal escritas no dan errores
CARACTERISTICASCARACTERISTICAS
![Page 32: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/32.jpg)
• Una página web ó documento html es interpretado por el navegador o browser
• Existen diferentes versiones (DTD’s) de HTML.
• Se pueden incluir comentarios igual que en los lenguajes de programación
• Es independiente del navegador y sistema operativo.
• Los nombres de etiqueta no son case sensitivos.
CARACTERISTICASCARACTERISTICAS
![Page 33: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/33.jpg)
CARACTERISTICASCARACTERISTICAS• Las imágenes, applets y otros elementos
multimedia no están incluidos en la página sino referencias a dichos objetos mediante URL’s
• En principio una pagina web debe ser vista con cualquier navegador, es decir, que son multiplataforma (browser y S.O.)
• Poseen una DTD (Definición de Tipo de Documento)
![Page 34: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/34.jpg)
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 favorecieran a ninguna empresa en particular.
![Page 35: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/35.jpg)
• La declaración de tipo de documento debe ir justo antes del elemento raíz del documento SGML/XML
• El termino !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 documentoDeclaración de tipo documento
![Page 36: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/36.jpg)
Declaracion de tipo documentoDeclaracion de tipo documentoFormato 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>
![Page 37: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/37.jpg)
Declaracion de tipo documentoDeclaracion 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/REC-html40/loose.DTD">
![Page 38: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/38.jpg)
3.3 Estructura y Formato de Paginas
![Page 39: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/39.jpg)
• 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.
ETIQUETAS TAGETIQUETAS TAG
![Page 40: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/40.jpg)
ETIQUETAS TAGETIQUETAS 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 EtiquetasClases de Etiquetas
Etiquetas vacíasformato: <etiqueta>
Etiquetas contenedorasformato: <etiqueta>. . .</etiqueta>
![Page 41: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/41.jpg)
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ámetrosFormato de Etiqueta con parámetros<etiqueta parametro1=“valor1” parametro2=“valor2”...>
</etiqueta>
![Page 42: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/42.jpg)
ESTRUCTURA BASICA DE UN DOCUMENTO HTML
Sustituir esta línea por la DTD
correspondiente, segúnla versión de HTMLque se este usando
<!–Declaración Tipo de Documento DTD --><HTML> <HEAD>
</HEAD> <BODY>
<!--...CUERPO DEL DOCUMENTO...--> </BODY></HTML>
![Page 43: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/43.jpg)
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 estandar su escritura.
![Page 44: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/44.jpg)
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
![Page 45: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/45.jpg)
Encabezado del Documento
Título - etiqueta title
Indica el titulo de la página web y representa el texto que aparece en la barra de título de la ventana del navegador.
![Page 46: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/46.jpg)
Encabezado del Documento
Meta Información - Etiquetas meta
Use los metatags para conseguir los siguientes efectos: a) cambiar la url de la 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,
![Page 47: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/47.jpg)
Encabezado del Documento
Meta Información - Etiquetas meta
e) indicar al browser que no guarde en la cache la pagina 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 cache, h) indicar a los robots[buscadores] que solo indexen la pagina actual, es decir, no sigan los links de la página.
![Page 48: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/48.jpg)
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.
![Page 49: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/49.jpg)
Encabezado del Documento
Meta Información - Etiquetas metaInformació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•Cacheo del browser•Cacheo del proxy•Clasificación de la página
![Page 50: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/50.jpg)
Encabezado del Documento
Meta Información - Etiquetas metaInformació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
![Page 51: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/51.jpg)
![Page 52: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/52.jpg)
Ejemplo de pagina web
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> <head> <title> P´gina Web más simple que se puede construir </title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <!-- ESTA ES UNA PAGINA WEB VALIDA Y EN BLANCO --> </body></html>
![Page 53: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/53.jpg)
![Page 54: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/54.jpg)
Validez de una página web
La validez de una página web se puede comprobar en el sitio web del W3C en http://wwww.w3.org (busque el link: html validator).
![Page 55: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/55.jpg)
Validez de una página web
Existen tres formas para validar el 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.
![Page 56: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/56.jpg)
![Page 57: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/57.jpg)
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 linea y retornos de carro no se toman en cuenta.
![Page 58: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/58.jpg)
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•EL tamaño no se puede modificar ya está predefinido para cada browser
![Page 59: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/59.jpg)
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”
![Page 60: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/60.jpg)
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.)
![Page 61: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/61.jpg)
ELABORACION DE PAGINAS WEB
TIPOS DE URL» URL ABSOLUTO» URL RELATIVO» URL ABSOLUTO A MARCADOR INTERNO» URL RELATIVO A MARCADOR INTERNO» URL ABSOLUTO A MARCADOR EXTERNO» URL RELATIVO A MARCADOR EXTERNO
![Page 62: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/62.jpg)
ELABORACION DE PAGINAS WEB
TIPOS DE ENLACES
URL ABSOLUTO Y URL RELATIVO
![Page 63: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/63.jpg)
ELABORACION DE PAGINAS WEB
TIPOS DE ENLACES
URL ABSOLUTO Y RELATIVO A MARCADOR INTERNO
![Page 64: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/64.jpg)
ELABORACION DE PAGINAS WEB
TIPOS DE ENLACES: URL ABSOLUTO Y RELATIVO A MARCADOR EXTERNO
ENLACES
![Page 65: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/65.jpg)
XHTML 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/>
![Page 66: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/66.jpg)
XHTML<!DOCTYPE html PUBLIC version_dtd url_dtd>
<html> <head> <title> Título de la P´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>
![Page 67: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/67.jpg)
Hosting en Internet
Hosting:
Es un “servicio” proporcionado por proveedores de servicios de Internet (ISP) y consiste en hospedar un sitio del servicio web, ftp u otro servicio de Internet en un espacio asignado para ello dentro de un determinado servidor, anfitrión o host.
![Page 68: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/68.jpg)
Hosting en Internet
De acuerdo al tipo de servicio que se ha contratado se ven involucrados los factores:
* Espacio en disco.
* Ancho de banda ó tasa de transferencia:(Mbps)
* Volumen de Transferencia(MB)
* Conexiones concurrentes
* Acceso a disco - Sistema de Ficheros (texto)
* Acceso a bases de datos - SGBD
* Programación del lado del servidor
![Page 69: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/69.jpg)
Tipos de Hosting
Un sitio web puede ser atendido por:
Carpeta (sin nombre propio, hw y sw compartido)
Servidor virtual (hw y sw compartido):
Servidor individual (sw) compartido (hw)
Servidor privado (hw y sw) en ISP
Servidor privado (hw y sw) en la organización
![Page 70: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/70.jpg)
Tipos de Hosting
Sitio Web Atendido por Carpeta: Este tipo de hosting consiste en conceder
espacio en una carpeta dentro del servidor web por lo general dentro de la carpeta raíz del servicio web, pero puede estar fuera (carpeta virtual).
Se caracteriza porque:• No posee un nombre propio• Todos los sitios atendidos comparten el mismo
nombre de servidor o host y su dirección ip.
![Page 71: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/71.jpg)
Tipos de Hosting
Sitio Web Atendido por Servidor Virtual:
Este tipo de hosting consiste en conceder espacio en una carpeta dentro del servidor web la cual debe estar fuera de la carpeta raíz del servicio web.
Se caracteriza porque:
• Cada sitio posee un nombre propio
• Todos los sitios atendidos comparten la misma dirección ip del servidor o host.*
![Page 72: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/72.jpg)
Tipos de Hosting
Atendido por Servidor Individual Compartido: Consiste en conceder al propietario del sitio la
administración de su propio servidor web (sw) lo cual incluye espacio en disco duro y otros privilegios.
Se caracteriza porque:• Cada sitio posee un servidor web(sw) y
nombre propio, pero comparten el Hardware• Todos los sitios atendidos comparten la misma
dirección ip del servidor o host.*
![Page 73: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/73.jpg)
Tipos de Hosting
Atendido por Servidor Individual - ISP: Consiste en conceder al propietario del sitio la
administración de su propio servidor web (hw y sw), es decir, el propietario tiene la administración exclusiva del servidor web.
Se caracteriza porque:• El sitio posee un servidor web(hw y sw)
exclusivo y nombre propio, pero el equipo esta con el ISP, quien lo resguarda y da mtto.
• El sitio tiene dirección ip propia además de servidor o host propio.
![Page 74: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/74.jpg)
Tipos de Hosting
Atendido por Servidor Individual - Propio: El propietario del sitio administra su propio
servidor web (hw y sw) y depende del ISP solo para conectar su servidor a Internet.
Se caracteriza porque:• El sitio posee un servidor web(hw y sw)
exclusivo y nombre propio.• El sitio tienen dirección ip propia además de
servidor o host propio.• El ISP solo vende la conexión a Internet*
![Page 75: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/75.jpg)
PUBLICACION DE PAGINAS WEB
INSTALACION Y CONFIGURACION
BASICA DEL SERVIDOR WEB
APACHE
![Page 76: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/76.jpg)
SECCIONES ARCH. CONFIG.
Sección 1: Global Enviroment - Entorno Global
Sección 2: Main Server Configuration - Configuración del Servidor “Principal”
Sección 3: Virtual Hosts
![Page 77: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/77.jpg)
Sección 1: Global Enviroment - Entorno Global
ServerRoot: este es el directorio donde esta instalado el servidor web Apache.
![Page 78: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/78.jpg)
Sección 2: Configuración del Servidor Principal
Port: este es el numero de puerto que estará escuchando el servidor principal.
ServerAdmin: esta es la dirección de corre-e del administrador del servidor.
ServerName: este es el nombre del servidor como esta registrado en el dns sin subdominio
DocumentRoot: Directorio raíz del servicio web
![Page 79: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/79.jpg)
Sección 3: Configuración Servidor Virtual
Formato:NameVirtualHost NumeroIP:Puerto
<VirtualHost NumeroIP:Puerto> ServerAdmin [email protected] DocumentRoot RutaDirectorioWebRaíz ServerName www.subdominio.dominio ErrorLog RutaArchivo CustomLog RutaArchivo</VirtualHost>
![Page 80: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/80.jpg)
Sección 3: Configuración Servidor Virtual
Ejemplo:
NameVirtualHost 127.0.0.2:80
<VirtualHost 127.0.0.2:80>
ServerAdmin [email protected]
DocumentRoot c:/tpi115/wwwroot
ServerName www.tpi115.eisi
</VirtualHost>
![Page 81: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/81.jpg)
PUBLICACION DE PAGINAS WEB
INSTALACION Y CONFIGURACION
DE APACHE
DEMOSTRACION
![Page 82: UNIDAD III DISEÑO y PUBLICACION DE SITIOS WEB Ing. Balmore Ortiz balmore.ortiz@fia.ues.edu.sv.](https://reader036.fdocument.pub/reader036/viewer/2022081421/5665b4cc1a28abb57c93c324/html5/thumbnails/82.jpg)
PUBLICACION DE PAGINAS WEB
Puede bajar el software apache desde la url:
http://www.apache.org