diseÑo y creaciÓn de pÁginas web - iit.comillas.edu · etsi icai! departamento de sistemas...
TRANSCRIPT
![Page 1: DISEÑO Y CREACIÓN DE PÁGINAS WEB - iit.comillas.edu · ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios! Cristina Puente! DISEÑO Y CREACIÓN DE PÁGINAS WEB](https://reader031.vdocuments.co/reader031/viewer/2022021821/5b01a52f7f8b9ab9598ca3d2/html5/thumbnails/1.jpg)
ETSI ICAI!Departamento de Sistemas Informáticos!
Rafael Palacios!Cristina Puente!
DISEÑO Y CREACIÓN DE PÁGINAS WEB
Tema 2. Creación de la primera página web
![Page 2: DISEÑO Y CREACIÓN DE PÁGINAS WEB - iit.comillas.edu · ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios! Cristina Puente! DISEÑO Y CREACIÓN DE PÁGINAS WEB](https://reader031.vdocuments.co/reader031/viewer/2022021821/5b01a52f7f8b9ab9598ca3d2/html5/thumbnails/2.jpg)
• El protocolo HTTP (Hyper-Text Transfer Protocol) es un protocolo encargado de transmitir documentos a través de una conexión TCP/IP
• Se diferencia de otros protocolos como FTP en que es anónimo por definición
• La capa externa de los servidores WEB es HTTP
http://www.google.com http://www.iit.upcomillas.es/palacios/cursoweb/
protocolo
![Page 3: DISEÑO Y CREACIÓN DE PÁGINAS WEB - iit.comillas.edu · ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios! Cristina Puente! DISEÑO Y CREACIÓN DE PÁGINAS WEB](https://reader031.vdocuments.co/reader031/viewer/2022021821/5b01a52f7f8b9ab9598ca3d2/html5/thumbnails/3.jpg)
• HTML (Hyper-Text markup Language) es un lenguaje de descripción de páginas derivado de otro mayor y más antiguo (SGML)
• HTML no es más que una serie de instrucciones que permiten especificar las características visuales de un documento
• Se diferencia de otros lenguajes de descripción de página como PostScript o PDF en: – Tienes características hyper-texto (enlaces) – Se adapta a las preferencias del usuario (resolución, tamaño de
letra...). No pretende que el resultado sea idéntico.
http://www.iit.upcomillas.es/palacios/cursoweb/upload.html
Tipo de archivo
![Page 4: DISEÑO Y CREACIÓN DE PÁGINAS WEB - iit.comillas.edu · ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios! Cristina Puente! DISEÑO Y CREACIÓN DE PÁGINAS WEB](https://reader031.vdocuments.co/reader031/viewer/2022021821/5b01a52f7f8b9ab9598ca3d2/html5/thumbnails/4.jpg)
• Ejemplo de HTML: <HTML> <HEAD> <TITLE>Hola</TITLE> </HEAD> <BODY> <P>Hola mundo</P> <h1>Hola mundo</h1> </BODY> </HTML>
• Como regla general la sintaxis es: <nombre etiqueta> párrafo afectado </nombre etiqueta>
![Page 5: DISEÑO Y CREACIÓN DE PÁGINAS WEB - iit.comillas.edu · ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios! Cristina Puente! DISEÑO Y CREACIÓN DE PÁGINAS WEB](https://reader031.vdocuments.co/reader031/viewer/2022021821/5b01a52f7f8b9ab9598ca3d2/html5/thumbnails/5.jpg)
![Page 6: DISEÑO Y CREACIÓN DE PÁGINAS WEB - iit.comillas.edu · ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios! Cristina Puente! DISEÑO Y CREACIÓN DE PÁGINAS WEB](https://reader031.vdocuments.co/reader031/viewer/2022021821/5b01a52f7f8b9ab9598ca3d2/html5/thumbnails/6.jpg)
• Resulta sencillo pero engorroso escribir directamente en HTML.
• Un editor HTML es una aplicación tipo WYSISYG, que permite trabajar en modo gráfico o sobre el código HTML
Colorea la sintaxis
![Page 7: DISEÑO Y CREACIÓN DE PÁGINAS WEB - iit.comillas.edu · ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios! Cristina Puente! DISEÑO Y CREACIÓN DE PÁGINAS WEB](https://reader031.vdocuments.co/reader031/viewer/2022021821/5b01a52f7f8b9ab9598ca3d2/html5/thumbnails/7.jpg)
Editores Comerciales • Dreamweaver (Adobe) • Frontpage (Microsoft)
Editores Software Libre • Nvu (N-view). (www.nvu.com) • KompoZer. (www.kompozer.net)
![Page 8: DISEÑO Y CREACIÓN DE PÁGINAS WEB - iit.comillas.edu · ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios! Cristina Puente! DISEÑO Y CREACIÓN DE PÁGINAS WEB](https://reader031.vdocuments.co/reader031/viewer/2022021821/5b01a52f7f8b9ab9598ca3d2/html5/thumbnails/8.jpg)
![Page 9: DISEÑO Y CREACIÓN DE PÁGINAS WEB - iit.comillas.edu · ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios! Cristina Puente! DISEÑO Y CREACIÓN DE PÁGINAS WEB](https://reader031.vdocuments.co/reader031/viewer/2022021821/5b01a52f7f8b9ab9598ca3d2/html5/thumbnails/9.jpg)
Head
Body
Tipo de documento
Lo más importante de la sección Head es el título. También puede contener palabras clave, idioma, estilos…
El Body contiene toda la información que se presenta al usuario
![Page 10: DISEÑO Y CREACIÓN DE PÁGINAS WEB - iit.comillas.edu · ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios! Cristina Puente! DISEÑO Y CREACIÓN DE PÁGINAS WEB](https://reader031.vdocuments.co/reader031/viewer/2022021821/5b01a52f7f8b9ab9598ca3d2/html5/thumbnails/10.jpg)
• Títulos de secciones: – Título de la página (en head): <title>Mi página web</title> – Heading 1: <h1>1 Introcucción</h1> – Heading 2: <h2>1.2 Motivación</h2>
• Resaltar texto: – Negrita (bold): <b>negrita</b> – Cursiva (italics): <i>cursiva</i> – Anchura fija (Teletype): <tt>printf</tt>
• Tamaño (ojo: siempre relativo): – Pequeño: <small>pequeño</small> – Grande: <big>grande</big>
![Page 11: DISEÑO Y CREACIÓN DE PÁGINAS WEB - iit.comillas.edu · ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios! Cristina Puente! DISEÑO Y CREACIÓN DE PÁGINAS WEB](https://reader031.vdocuments.co/reader031/viewer/2022021821/5b01a52f7f8b9ab9598ca3d2/html5/thumbnails/11.jpg)
• Enlaces externos ó Links:
– Enlace relativo: Puede ver más información en la <a href=“doc/norma.pdf”>Norma</a>. Puede ver más información en la Norma.
– Enlace absoluto: El iPod está construido por <a href=“http://www.apple.com/”>Apple</a>.
El iPod está construido por Apple.
![Page 12: DISEÑO Y CREACIÓN DE PÁGINAS WEB - iit.comillas.edu · ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios! Cristina Puente! DISEÑO Y CREACIÓN DE PÁGINAS WEB](https://reader031.vdocuments.co/reader031/viewer/2022021821/5b01a52f7f8b9ab9598ca3d2/html5/thumbnails/12.jpg)
![Page 13: DISEÑO Y CREACIÓN DE PÁGINAS WEB - iit.comillas.edu · ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios! Cristina Puente! DISEÑO Y CREACIÓN DE PÁGINAS WEB](https://reader031.vdocuments.co/reader031/viewer/2022021821/5b01a52f7f8b9ab9598ca3d2/html5/thumbnails/13.jpg)
• Un documento HTML puede ser privado (reside en un ordenador personal) o público (reside en un servidor conectado a Internet).
• Ejemplo de documento privado: Manuales que vienen en un CD-ROM. – file:///D:/Docs/manual.html
• Ejemplo de documento público: Cualquier página web, accesible mediante un URI – http://www.iit.upcomillas.es/pdf/MemoIITIng0506.pdf
![Page 14: DISEÑO Y CREACIÓN DE PÁGINAS WEB - iit.comillas.edu · ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios! Cristina Puente! DISEÑO Y CREACIÓN DE PÁGINAS WEB](https://reader031.vdocuments.co/reader031/viewer/2022021821/5b01a52f7f8b9ab9598ca3d2/html5/thumbnails/14.jpg)
• Para publicar un documento hay que subirlo a un servidor Web.
• Ejemplo: Yahoo ofrece espacio web al crear una cuenta yahoo.com http://es.geocities.yahoo.com/
• Hay que subir la página y todos los directorios/archivos a los que hace referencia
• En cuanto la página HTML está cargada en el servidor, ya es accesible desde Internet (pública)