DISEÑO Y CREACIÓN DE PÁGINAS WEB
Tema 2. Creación de la primera página web
Departamento de Sistemas Informáticos!
ETSI ICAI!
Rafael Palacios!
Cristina Puente!
• 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
• 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.
Tipo de archivo
http://www.iit.upcomillas.es/palacios/cursoweb/upload.html
• 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>
• 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
Editores Comerciales
• Dreamweaver (Adobe)
• Frontpage (Microsoft)
Editores Software Libre
• Nvu (N-view). (www.nvu.com)
• KompoZer. (www.kompozer.net)
Tipo de documento
Head
Body
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
• 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>
• 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.
• 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
• 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)
Crear cuenta
Comentarios de: Diseño y creación de páginas web: Tema2. Creación de la primera página web (0)
No hay comentarios