Fundamentos de html

347 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
347
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Fundamentos de html

  1. 1. Programación en Internet 2006-2007DLSI - Universidad de Alicante 1Departamento de Lenguajes ySistemas InformáticosFundamentos de HTMLProgramación en InternetCurso 2006-2007Programación en Internet – Curso 2006-2007Contenidos• Introducción• HTML• Etiquetas• Guía de estilo
  2. 2. Programación en Internet 2006-2007DLSI - Universidad de Alicante 2Programación en Internet – Curso 2006-2007Introducción• Qué es• Clasificación de las páginas• Qué necesito para diseñar con HTML• Editores HTML (gratuitos)• Editores HTML (pago)Programación en Internet – Curso 2006-2007Qué es• HyperText Markup Language (Lenguajede Marcas de Hipertexto)• Basado en Standard GeneralizedMarkup Language (SGML)• Define formato del texto:– Posición– Colores– Tamaños– …
  3. 3. Programación en Internet 2006-2007DLSI - Universidad de Alicante 3Programación en Internet – Curso 2006-2007Historia (1)• RFC 1630 Universal Resource Identifiersin WWW: A Unifying Syntax for theExpression of Names and Addresses ofObjects on the Network as used in theWorld-Wide Web. T. Berners-Lee. Junio1994.• RFC 1866 Hypertext Markup Language -2.0. T. Berners-Lee, D. Connolly. Noviembre1995.• RFC 1945 Hypertext Transfer Protocol --HTTP/1.0. T. Berners-Lee, R. Fielding, H.Frystyk. Mayo 1996.Programación en Internet – Curso 2006-2007Historia (y 2)• 1989 ... 1991: Tim Berners-Lee– URL + HTTP + HTML• 1994: World Wide Web Consortium (W3C)• Noviembre 1995: HTML 2.0• ...• Diciembre 1999: HTML 4.01• Enero 2000: XHTML 1.0• Mayo 2001: XHTML 1.1 Module-based XHTML• Agosto 2002:– XHTML 1.0 Second Edition Correcciones– XHTML 2.0 Working Draft Borrador propuesta
  4. 4. Programación en Internet 2006-2007DLSI - Universidad de Alicante 4Programación en Internet – Curso 2006-2007Programación en Internet – Curso 2006-2007
  5. 5. Programación en Internet 2006-2007DLSI - Universidad de Alicante 5Programación en Internet – Curso 2006-2007Programación en Internet – Curso 2006-2007
  6. 6. Programación en Internet 2006-2007DLSI - Universidad de Alicante 6Programación en Internet – Curso 2006-2007Clasificación de las páginas• Según como se generan (servidor):– Estáticas– Dinámicas• Según como se visualizan (cliente):– Estáticas– Dinámicas• Mejor: Dinámicas / DinámicasProgramación en Internet – Curso 2006-2007Qué necesito para diseñar conHTML• Editor ASCII estándar• Navegador• Ficheros: .htm o .html• Editores HTML:– ¿Por qué sí? ¿Por qué no?– Ventajas e inconvenientes
  7. 7. Programación en Internet 2006-2007DLSI - Universidad de Alicante 7Programación en Internet – Curso 2006-2007Editores HTML (gratuitos)• Netscape Composer• Microsoft FrontPage Express• http://tucows.ua.es– AceHTML 4Free– Arachnophilia– CoffeCup Free HTML– FirstPage 2000– W3e 2000– ...Programación en Internet – Curso 2006-2007Editores HTML (pago)• Adobe GoLive• Adobe PageMill• Claris Home Page• HotMetal Pro• Macromedia DreamWeaver• Microsoft FrontPage• NetObjects Fusion
  8. 8. Programación en Internet 2006-2007DLSI - Universidad de Alicante 8Programación en Internet – Curso 2006-2007Editores HTML• Ventajas:– Por productividad: ahorro de tiempo y esfuerzo– Por facilidad– Evita memorizar las etiquetas– Evita y ayuda a corregir errores• Desventajas:– Mala costumbre, se olvida la sintaxis o teacostumbras a una herramienta concreta– En casos de emergencia, necesitas a nivel decódigo– Las prestaciones de la herramienta te condicionanReducción de flexibilidad– Te condiciona a la versión de HTML que generaProgramación en Internet – Curso 2006-2007• Etiquetas• Diferencias con XHTML• Estructura de una página• MetadatosHTML
  9. 9. Programación en Internet 2006-2007DLSI - Universidad de Alicante 9Programación en Internet – Curso 2006-2007Etiquetas (1)• Etiqueta o marca (tag):– Individual: <…>– Por parejas: <…> … </…>• Estructura general:<ETIQUETAATRIBUTO1=“VALOR1”ATRIBUTO2=“VALOR2”... ... ...>Contenido</ETIQUETA>Programación en Internet – Curso 2006-2007Etiquetas (y 2)• Atributos– <IMG SRC=“a.gif”>– <FRAME NORESIZE>– <FONT SIZE=“5”>…</FONT>• Minúsculas/mayúsculas– <HTML>, <Html>, <html>– Claridad Mayúsculas– XHTML Minúsculas
  10. 10. Programación en Internet 2006-2007DLSI - Universidad de Alicante 10Programación en Internet – Curso 2006-2007Diferencias con XHTML• Etiquetas y atributos Minúsculas• Valores de los atributos Entrecomillas• No se admiten atributos sin valor• Etiquetas por parejas o etiquetasvacías:– Por parejas: <…> … </…>– Etiqueta vacía: <… />Programación en Internet – Curso 2006-2007Diferencias con XHTML• Tres versiones:–XHTML Strict–XHTML Transitional–XHTML Frameset• Los marcos usan Strict o Transitional<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  11. 11. Programación en Internet 2006-2007DLSI - Universidad de Alicante 11Programación en Internet – Curso 2006-2007Estructura de una página<!DOCTYPE HTML PUBLIC “.//W3C//DTD HTML4.0//EN”><HTML><HEAD>Cabecera de la página</HEAD><BODY>Cuerpo de la página</BODY></HTML>Programación en Internet – Curso 2006-2007Estructura de una página• <TITLE>…</TITLE>• <!-- Comentario -->• Saltos de línea y espacios enblanco Se ignoran– <BR>– &nbsp;
  12. 12. Programación en Internet 2006-2007DLSI - Universidad de Alicante 12Programación en Internet – Curso 2006-2007Metadatos• Información sobre los datos• Sección HEAD:– <META HTTP-EQUIV="propiedad"CONTENT="contenido">– <META NAME="propiedad"CONTENT="contenido">Programación en Internet – Curso 2006-2007Metadatos<HTML><HEAD><META HTTP-EQUIV="Refresh"CONTENT="5;URL=http://www.ua.es"><META NAME="Autor" CONTENT="Programaciónen Internet"></HEAD><BODY>En cinco segundos tiene que cambiar lapágina...</BODY></HTML>
  13. 13. Programación en Internet 2006-2007DLSI - Universidad de Alicante 13Programación en Internet – Curso 2006-2007Metadatos• <META NAME=“copyright” CONTENT=“Empresa,autor, diseñador”>• <META NAME=“keywords” CONTENT=“palabras,clave, relativas, al, contenido, del,sitio, web”>• <META NAME=“description”CONTENT=“Descripción del contenido delsitio web, frases importantesrelacionadas con la finalidad del sitio”>• <META NAME=“author” CONTENT=“Quién lo hahecho, persona o empresa”>• <META NAME="robots" CONTENT="index,follow">Programación en Internet – Curso 2006-2007Metadatos• <META HTTP-EQUIV=“Content-Type”CONTENT=“text/html;charset=iso-8859-1”>• <META HTTP-EQUIV="Content-Language" CONTENT="ES">• <META HTTP-EQUIV="Content-Script-Type"CONTENT="JavaScript">
  14. 14. Programación en Internet 2006-2007DLSI - Universidad de Alicante 14Programación en Internet – Curso 2006-2007Programación en Internet – Curso 2006-2007Etiquetas• Introducción• Categorías• Enlaces• Tablas• Imágenes• Formularios• Marcos
  15. 15. Programación en Internet 2006-2007DLSI - Universidad de Alicante 15Programación en Internet – Curso 2006-2007Introducción• Netscape Navigator ⇔ MicrosoftInternet Explorer• Estándar: W3C– HTML 4.01– XHTML 1.0Programación en Internet – Curso 2006-2007Categorías (1)• Etiquetas que definen la estructuradel documento: <HTML>, <HEAD> y<BODY>• Etiquetas que pueden ir en lacabecera: <TITLE>, <BASE>,<META>, <STYLE> y <LINK>
  16. 16. Programación en Internet 2006-2007DLSI - Universidad de Alicante 16Programación en Internet – Curso 2006-2007Categorías (2)• Etiquetas que definen bloques detexto: <ADDRESS>,<BLOCKQUOTE>, <DIV>,<H1>…<H6>, <P>, <PRE> y <XMP>• Etiquetas de listas: <DIR>, <DL>,<DT>, <DD>, <MENU>, <OL>, <UL>y <LI>Programación en Internet – Curso 2006-2007Categorías (3)• Etiquetas de características del texto: <B>,<BASEFONT>, <BIG>, <BLINK>, <CITE>,<CODE>, <EM>, <FONT>, <I>, <KBD>,<PLAINTEXT>, <SMALL>, <STRIKE>,<STRONG>, <SUB>, <SUP>, <TT>, <U>y <VAR>• Etiquetas de anclas y enlaces: <A>
  17. 17. Programación en Internet 2006-2007DLSI - Universidad de Alicante 17Programación en Internet – Curso 2006-2007Categorías (4)• Etiquetas de imágenes y mapas deimágenes: <IMG>, <AREA> y<MAP>• Etiquetas de tablas: <TABLE>,<CAPTION>, <TR>, <TD> y <TH>Programación en Internet – Curso 2006-2007Categorías (5)• Etiquetas de formularios: <FORM>,<INPUT>, <SELECT>, <OPTION>,<TEXTAREA>, <KEYGEN> y<ISINDEX>• Etiquetas de marcos: <FRAME>,<FRAMESET> y <NOFRAMES>
  18. 18. Programación en Internet 2006-2007DLSI - Universidad de Alicante 18Programación en Internet – Curso 2006-2007Categorías (6)• Etiquetas de situación de contenidos:<LAYER>, <ILAYER> y<NOLAYER>• Etiquetas de script: <SCRIPT>,<NOSCRIPT> y <SERVER>Programación en Internet – Curso 2006-2007Categorías (y 7)• Etiquetas de applets y plug-ins:<APPLET>, <PARAM>, <EMBED>,<NOEMBED> y <OBJECT>• Etiquetas de ajuste del texto: <BR>,<CENTER>, <HR>, <MULTICOL>,<NOBR>, <SPACER>, <SPAN> y<WBR>
  19. 19. Programación en Internet 2006-2007DLSI - Universidad de Alicante 19Programación en Internet – Curso 2006-2007Formato del texto• Encabezados de secciones: <H1>, ...,<H6>• Formatos físicos: <B>, <I>, ...• Formatos lógicos: <CITE>, <CODE>, ...• <FONT FACE=“” SIZE=“”>– Cuidado con los tipos de letra “exóticos”Programación en Internet – Curso 2006-2007Formato del texto• Tipos de letra serif:– Letra Courier New– Letra Georgia– Letra Times New Roman• Tipos de letra sans serif:– Letra Arial– Letra Tahoma– Letra Verdana
  20. 20. Programación en Internet 2006-2007DLSI - Universidad de Alicante 20Programación en Internet – Curso 2006-2007Programación en Internet – Curso 2006-2007
  21. 21. Programación en Internet 2006-2007DLSI - Universidad de Alicante 21Programación en Internet – Curso 2006-2007Listas• Listas de definición– <DL>, <DT>, <DD>• Listas ordenadas (numeradas)– <OL>, <LI>• Listas no ordenadas– <UL>, <LI>Programación en Internet – Curso 2006-2007
  22. 22. Programación en Internet 2006-2007DLSI - Universidad de Alicante 22Programación en Internet – Curso 2006-2007Colores• <FONT COLOR=“”>• <BODY BGCOLOR=“”>• <BODY TEXT=“” LINK=“” VLINK=“”ALINK=“”>• Color:– Componente RGB– Nombre de colorProgramación en Internet – Curso 2006-2007Sistema RGB• Coordenadas RGB:– R=Red, rojo. G=Green, verde y B=Blue, azul.– Combinaciones RRGGBB. Dos cifras para cadacomponente de color.– Cifras en hexadecimal: del 0 al 15, (0-9 i A-F)• A=10, B=11, C=12, D=13, E=14 i F=15.• Ejemplos:– 000000, todos los colores apagados, negro.– FFFFFF, todos los colores al máximo, blanco.– FF0000, el rojo al máximo y el verde y azulapagados, un rojo intenso– FFFF00, el rojo y verde al máximo, el azul a cero,el amarillo intenso.– CCCCCC, todas las coordenadas iguales, perocon una intensidad alta, un gris claro.
  23. 23. Programación en Internet 2006-2007DLSI - Universidad de Alicante 23Programación en Internet – Curso 2006-2007Programación en Internet – Curso 2006-2007Enlaces (1)• Enlace a un punto del mismodocumento (enlace intradocumental)– Enlace: <A HREF=“#nombre”>…</A>– Destino: <A NAME=“nombre”>…</A>
  24. 24. Programación en Internet 2006-2007DLSI - Universidad de Alicante 24Programación en Internet – Curso 2006-2007Enlaces (2)• Enlace a otro documento (enlaceextradocumental)– <A HREF=“pagina.html”>…</A>Programación en Internet – Curso 2006-2007Enlaces (3)• Enlace a un punto de otro documento– Enlace:<A HREF=“pagina.html#nombre”>…</A>– Destino: <A NAME=“nombre”>…</A>
  25. 25. Programación en Internet 2006-2007DLSI - Universidad de Alicante 25Programación en Internet – Curso 2006-2007Enlaces (y 4)• Peligro:– Mayúsculas y minúsculas– Caracteres extraños (sólo alfabeto inglés)– Rutas físicas (“file:///c:miwebgrupos.html”)Programación en Internet – Curso 2006-2007Tablas• <TABLE>…</TABLE>• <TR>…</TR>• <TH>…</TH>• <TD>…</TD>
  26. 26. Programación en Internet 2006-2007DLSI - Universidad de Alicante 26Programación en Internet – Curso 2006-2007Programación en Internet – Curso 2006-2007
  27. 27. Programación en Internet 2006-2007DLSI - Universidad de Alicante 27Programación en Internet – Curso 2006-2007Programación en Internet – Curso 2006-2007
  28. 28. Programación en Internet 2006-2007DLSI - Universidad de Alicante 28Programación en Internet – Curso 2006-2007Programación en Internet – Curso 2006-2007
  29. 29. Programación en Internet 2006-2007DLSI - Universidad de Alicante 29Programación en Internet – Curso 2006-2007Programación en Internet – Curso 2006-2007Imágenes (1)• <IMG>– SRC– WIDTH y HEIGHT– BORDER– ALT Recomendable• Imagen de fondo de una página– <BODY BACKGROUND=“”>
  30. 30. Programación en Internet 2006-2007DLSI - Universidad de Alicante 30Programación en Internet – Curso 2006-2007Imágenes (y 2)• Tipos de imágenes:– GIF, mapas de bits planos o pequeños.Paleta de colores variables (256 máximo)– JPG, mapas de bits complejos y conmucho pixelado. 16M colores, 3 bytes porpunto– PNG, mezcla entre GIF y JPG, tienecaracterísticas de los dos formatos,¿posible heredero?Programación en Internet – Curso 2006-2007
  31. 31. Programación en Internet 2006-2007DLSI - Universidad de Alicante 31Programación en Internet – Curso 2006-2007Programación en Internet – Curso 2006-2007
  32. 32. Programación en Internet 2006-2007DLSI - Universidad de Alicante 32Programación en Internet – Curso 2006-2007Formularios (1)• Cliente Servidor<FORM NAME=”nombre”ACTION=”pagina.html” METHOD=”metodo”>Controles del formulario</FORM>• Método:– POST: sin limitación de datos, mensaje máslargo– GET: limitación de datos, transacción mássencillaProgramación en Internet – Curso 2006-2007
  33. 33. Programación en Internet 2006-2007DLSI - Universidad de Alicante 33Programación en Internet – Curso 2006-2007Formularios (2)• Atributos NAME y VALUE• Botones (para enviar información, borrar yotras acciones): <INPUT TYPE=”SUBMIT”>,<INPUT TYPE=”RESET”>, <INPUTTYPE=”BUTTON”>• Imágenes que actúan como botones (paraenviar información): <INPUTTYPE=”IMAGE”>Programación en Internet – Curso 2006-2007Formularios (3)• Campos de verificación: <INPUTTYPE=”CHECKBOX”>• Campos excluyentes (botones de radio):<INPUT TYPE=”RADIO”>• Campos de texto: <INPUT TYPE=”TEXT”>
  34. 34. Programación en Internet 2006-2007DLSI - Universidad de Alicante 34Programación en Internet – Curso 2006-2007Programación en Internet – Curso 2006-2007Formularios (4)• Campos de contraseña (password): <INPUTTYPE=”PASSWORD”>• Campos ocultos: <INPUTTYPE=”HIDDEN”>• Envío de ficheros: <INPUT TYPE=”FILE”>
  35. 35. Programación en Internet 2006-2007DLSI - Universidad de Alicante 35Programación en Internet – Curso 2006-2007Formularios (y 5)• Listas de selección: <SELECT>, <OPTION>• Áreas de texto: <TEXTAREA>Programación en Internet – Curso 2006-2007
  36. 36. Programación en Internet 2006-2007DLSI - Universidad de Alicante 36Programación en Internet – Curso 2006-2007Programación en Internet – Curso 2006-2007
  37. 37. Programación en Internet 2006-2007DLSI - Universidad de Alicante 37Programación en Internet – Curso 2006-2007Marcos• División ventana en regiones que sonventanas• <FRAMESET>…</FRAMESET>– BORDER• <FRAME>– NORESIZE– SCROLLING• <A HREF=“” TARGET=“”>…</A>Programación en Internet – Curso 2006-2007Marcos• Valores predefinidos para TARGET:– _self– _blank– _parent– _top• Marco predeterminado (en la cabecera):– <BASE TARGET=“nommarco">
  38. 38. Programación en Internet 2006-2007DLSI - Universidad de Alicante 38Programación en Internet – Curso 2006-2007Programación en Internet – Curso 2006-2007
  39. 39. Programación en Internet 2006-2007DLSI - Universidad de Alicante 39Programación en Internet – Curso 2006-2007Programación en Internet – Curso 2006-2007
  40. 40. Programación en Internet 2006-2007DLSI - Universidad de Alicante 40Programación en Internet – Curso 2006-2007Programación en Internet – Curso 2006-2007
  41. 41. Programación en Internet 2006-2007DLSI - Universidad de Alicante 41Programación en Internet – Curso 2006-2007Programación en Internet – Curso 2006-2007
  42. 42. Programación en Internet 2006-2007DLSI - Universidad de Alicante 42Programación en Internet – Curso 2006-2007Programación en Internet – Curso 2006-2007
  43. 43. Programación en Internet 2006-2007DLSI - Universidad de Alicante 43Programación en Internet – Curso 2006-2007Programación en Internet – Curso 2006-2007
  44. 44. Programación en Internet 2006-2007DLSI - Universidad de Alicante 44Programación en Internet – Curso 2006-2007Programación en Internet – Curso 2006-2007
  45. 45. Programación en Internet 2006-2007DLSI - Universidad de Alicante 45Programación en Internet – Curso 2006-2007Guía de estilo (1)• Organizar el código HTML– Organizar, ordenar y tabular– Comentarios• Cuidado con los colores– Colores por defecto del navegador– Color oscuro, fondo claro– Color claro, fondo oscuro• Cuidado con los tipos de letra• Imágenes:– Texto alternativo (ALT)– No abusar de las animacionesProgramación en Internet – Curso 2006-2007Guía de estilo (2)• Cuidado con los valores absolutos• Cuidado con las barras dedesplazamiento– Barra horizontal ¡Evitar!• Cuidado con las imágenes de fondo– Contraste– Mosaico• Sacar partido al hipertexto
  46. 46. Programación en Internet 2006-2007DLSI - Universidad de Alicante 46Programación en Internet – Curso 2006-2007Guía de estilo (3)• Usar las capacidades multimedia– Velocidad de transferencia– Caché previa de los objetos– Imágenes de fondo• Identidad corporativa– Tipos de letra– Colores– ImágenesProgramación en Internet – Curso 2006-2007Guía de estilo (4)• Permitir que los usuarios secomuniquen• Facilitar las búsquedas– Índice– Buscador– Mapa del sitio web• Revisar las páginas periódicamente
  47. 47. Programación en Internet 2006-2007DLSI - Universidad de Alicante 47Programación en Internet – Curso 2006-2007Guía de estilo (5)• Los enlacesLa Concejalía de Turismo se encarga de gestionar elturismo rural y de playa... (<AHREF=”/concejalias/turismo”>haga click aquí paraver más información acerca de la Concejalía deTurismo</A>).La <A HREF=”/concejalias/turismo”>Concejalía deTurismo</A> se encarga de gestionar el turismorural y de playa...Programación en Internet – Curso 2006-2007Guía de estilo (y 6)• Shneiderman, B., Designing the User Interface,Addison-Wesley, 1987:“Para muchos usuarios de sistemas decomputadora de información, la frustración y laansiedad forman parte de la vida diaria.Se esfuerzan por aprender un lenguaje deórdenes o un sistema de selección de menúsque, se supone, les ayudará en su trabajo.Algunas personas sufren casos tan serios deshock con la computadora, de terror al terminalo de neurosis de red, que evitan utilizarsistemas de computadora”

×