CURSO DE H.T.M.L. Parte 1/4

Transcripción

1 CURSO DE H.T.M.L. Parte 1/4 Autor Luis Marco Giménez Agencia Tributaria Dpto. Informática Tributaria de de Madrid Colaboradores Javier Álvarez Eloy García Instituto de de Salud Carlos III III de de Madrid

2 Que es H.T.M.L.? HyperText Markup Language Lenguaje basado en el uso de etiquetas (tags). Es interpretado y multiplataforma. Un documento HTML está escrito en ASCII (texto plano) y no incluye ningún formato. Extensiones.htm o.html. Parte del SGML (Lenguaje de Marcado Generalizado Estándar)

3 Que es H.T.M.L.? Tecnologías SGML SGML XML HTML XSL SVG SMIL CSS DHTML XHTML

4 Que es H.T.M.L.? Versiones del HTML HTML 1.0: Sólo enlaces. HTML 2.0: Soporte de imágenes y formularios. HTML 3.2: Tablas, códigos internacionales, envío de ficheros locales, soporte JAVA y mapas de imágenes. HTML 4.0: Hojas de estilo en cascada (CSS). Mejoras de accesibilidad e internacionalización.

5 Herramientas web (I) Procesadores de texto Un editor de texto que no formatee el texto. Ej.: Notepad de Windows, vi o emacs de Unix/Linux, o SimpleText en Macintosh Editores avanzados. Ej.: UltraEdit, HomeSite, HotDog,... Herramientas WYSIWYG. Ej.:Microsoft FrontPage, Macromedia Dreamweaver, HotMetal Conversores de código: Microsoft Word, Excel,..

6 Herramientas web (II) Navegadores Un navegador web Ej.: Netscape Navigator, Microsoft Internet Explorer, Opera... Aplicación: Son programas cliente (agente de usuario) que proporcionan la interfaz para la navegación. Interpretan el código HTML y otras tecnologías según su DOM. Nos permiten gestionar ciertas características de la comunicación cliente-servidor (seguridad, presentación,...).

7 Herramientas web (III) Editores Gráficos Una herramienta gráfica Ej.: Adobe Photoshop, Macromedia Fireworks, Jasc Paint Shop Pro, Microsoft Photo Editor, Aplicación: Son básicas en el diseño web actual. Permiten definir la composición de las páginas y de sus elementos imagen de forma rápida y sencilla (maquetas, logos, botones,...) Deben admitir capas, paletas de color, generar formatos estándar web,...

8 Herramientas web (IV) Otras aplicaciones Adobe Acrobat, para la generación de PDF s para web. Macromedia Flash MX, generación de animaciones web.

9 Convenciones utilizadas en la presentación?, etiqueta desaconsejada en el estándar HTML 4.0, pero que aún sigue siendo muy utilizada. X, etiqueta obsoleta o en desuso. (IE), solo en Internet Explorer. (NC), solo en Netscape Navigator 4.

10 El documento HTML (I) Estructura de Etiquetas (tags) El Principio del lenguaje HTML es el uso de etiquetas: <xxx> Inicio de una etiqueta </xxx> Cierre de una etiqueta Válido usar etiquetas en mayúsculas o minúsculas, indistintamente Todo lo que hay dentro de ellas se ve afectado por su acción.

11 El documento HTML (II) Estructura general de un documento Todo el documento HTML debe estar contenido entre las etiquetas: <HTML>. </HTML> El documento se divide en dos zonas: Encabezamiento: <HEAD>... </HEAD> Parte de definición: <TITLE>,<META>,<STYLE>,<SCRIPT>,... Cuerpo: <BODY> </BODY> Parte visible: <TABLE>, <FORM>, <A>, <IMG>,...

12 El documento HTML (III) Esqueleto <!DOCTYPE... > <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>

13 El documento HTML (IV) Etiqueta <!DOCTYPE... > Tipo de documento HTML: Estricta (strict.dtd) De transición o blando (loose.dtd) De marcos (frameset.dtd) Se define previamente a la etiqueta <html>, no es obligatoria. Ejemplo: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

14 El documento HTML (V) Cabecera Meta datos Se utiliza la etiqueta <META...> Permite identificar distintas propiedades del documento: name; Identificador del meta dato (Author, copyright, keywords, date,...) content; Valor asignado. Facilita la identificación del documento a los motores de busqueda Informan al servidor en la comunicación http mediante el atributo http-equiv: Ejemplos: <META content="mshtml " name=generator> <META http-equiv=content-type content="text/html; charset=iso ">

15 El documento HTML (VI) Cabecera: Título de una página Una página debe mostrar un título en la ventana del navegador que identifique su contenido. La etiqueta que lo implementa es <TITLE> titulo </TITLE>, dentro del bloque <HEAD>. Otras etiquetas comunes dentro de este bloque <HEAD> son: <STYLE> y <SCRIPT>

16 El documento HTML (VII) Cuerpo: La etiqueta <BODY> Define el cuerpo visible del documento Contiene los distintos elementos que componen la página: <TABLE>, <FORM>, <P>, <HR>, <IMG>,... Algunos atributos son: bgcolor= #XXXXXX ; background= fondo.jpg text, link, alink, vlink= #XXXXXX onload, onunload= javascript:... En los documentos de definición de marcos es sustituida por <FRAMESET>

17 El documento HTML (VIII) Un Ejemplo <HTML> <HEAD> <TITLE> Mi página de Ejemplo </TITLE> </HEAD> <BODY> <H1> <CENTER> Mi primera página </CENTER> </H1> <HR> Esta página es un ejemplo de código sencillo en HTML. Podemos visualizarla con un navegador cualquiera, como por ejemplo Netscape Navigator o Internet Explorer. <P> (C) Perico de los Palotes </BODY> </HTML>

18 El documento HTML (IX) Visualización del ejemplo

19 Reglas de estilo en desarrollo Se debe ser coherente en la notación de las etiquetas, mayúsculas o minúsculas. Los atributos siempre en minúsculas. Emparejar las etiquetas inicialmente (regla del contenedor). Nunca se ponen atributos en las etiquetas de cierre. Aconsejable indentar las etiquetas anidadas.

20 Práctica 1

21 Formato de texto (I) Gestión de párrafos Salto de líneas: <BR> Separación entre párrafos: <P> Atributos: class, style, align,... Múltiples líneas en blanco: <BR><P> Espacios en blanco:... Separador horizontal: <HR> Atributos: width, size, color,...

22 Formato de texto (II) Estilos y Efectos Negrita: <B> </B> o <STRONG>...</STRONG> Itálica o Cursiva: <I> </I> o <EM>...</EM> Subrayado: <U> </U> Tachado: <S>...</S> o <STRIKE>...</STRIKE> Superíndices: <SUP> </SUP> Subíndices: <SUB> </SUB> Centrado: <CENTER> </CENTER>?

23 Formato de texto (III) Estilos predefinidos Cita textual tabulada saltando una línea: <BLOCKQUOTE>...</BLOCKQUOTE> Cita literal cursiva: <CITE>...</CITE> Texto preformateado: <PRE> </PRE> (mantiene los espacios y saltos del texto) Cita textual modo teletipo: <CODE>...</CODE> y <TT>... </TT>,... Comentarios:

24 Formato de texto (IV) Tamaños y Fuentes Encabezados: <H1> </H1>, <H2>.. </H2>,, <H6> </H6> Definición general de fuentes: <BASEFONT>? Características de la fuente: <FONT>...</FONT>? Atributos: face, size, color,... Mayor tamaño del defecto: <BIG> Menor tamaño del defecto: <SMALL>

25 Práctica 2

26 Formato de texto (V) Fuentes Las fuentes de un documento HTML pueden cambiarse en tipo, tamaño y color. Los cambios pueden afectar a todo el documento o a zonas totalmente definidas. Las etiquetas de fuente son: <FONT> </FONT>?

27 Formato de texto (VI) Tamaño de las fuentes El tamaño de la fuente se especifica con el atributo SIZE de FONT: <FONT size =5> Texto en tamaño 5 absoluto</font> <FONT size =-1> Texto menor en 1 relativo</font> <FONT size =+1> Texto mayor en 1 relativo</font> <FONT size =+2> Texto mayor en 2 relativo</font> Para todo el documento, al principio, después de <BODY>: <BASEFONT size=4>

28 Formato de texto (VII) Tipos de las fuentes Por defecto Times News Roman. Se puede forzar a que el texto se muestre con otro tipo de fuentes, siempre que esté instalada en el equipo cliente: <FONT face= fuente1, fuente2, fuente3,, fuenten > </FONT> Ejemplos de fuentes: Arial, Verdana, Impact, Estas fuentes suelen encontrarse en Windows en el directorio: C:\WINDOWS\FONTS o C:\WINNT\FONTS

29 Formato de texto (VIII) Color de las fuentes Se le añade a la etiqueta <FONT> el atributo COLOR, por: nombre del color valor hexadecimal RGB Ejemplos: <FONT COLOR=red> Texto en color rojo </FONT> <FONT COLOR= #FF0000 > Texto color rojo </FONT>

30 Formato de texto (IX) Formato actual Definiciones de estilo: <STYLE>...</STYLE>: Orientado al documento <DIV>...</DIV> : Orientada a párrafos Atributo <... style= >: En etiqueta Se potencia con las definiciones de clase (class= clase ) y algunos eventos (:hover,...).

31 Formato de texto (X) Etiqueta <STYLE> Se define en la zona de encabezamiento <HEAD> para todo el documento Se basa en el formato para definición de hojas de estilo CSS. Ejemplo: <STYLE> INPUT {text-align:center; font: bold 12pt Arial} </STYLE>

32 Formato de texto (XI) Etiqueta <DIV> Se define en el cuerpo del documento, creando secciones a las que se puede aplicar un formato de forma general. Se combina con el atributo style para asignar el formato. Utiliza la misma notación CSS. Puede englobar distintas etiquetas. Ejemplo: <DIV style= background:gold; color:blue > </DIV>

33 Formato de texto (XII) Etiqueta <SPAN> (IE) Se define en el cuerpo del documento, permite diferenciar elementos para asignarles un formato particular. Se combina con el atributo style utilizando la misma notación CSS. Ejemplo: <P>Esto es <SPAN style= background:gold; color:blue; fontweight:bold >muy </SPAN> Importante </P>

34 Formato de texto (XIII) Ejemplo de código <html> <head> </head> <body> <title>ejemplo de distintos formatos de texto</title> <style type="text/css"> h1, i {color:blue;font-size:22px}.arial {font-face:arial;color:blue} </style> <h1>cabecera DE PRIMER NIVEL</h1> <center> <h6>cabecera de último nivel centrada</h6> </center> Introducir un salto de línea <br> Separador de contenidos <hr width='80%' size='2'>

35 Formato de texto (XIV) Ejemplo de código <b>texto en negrita 1</b> <strong>texto en negrita 2</strong> <br> <i>texto en cursiva 1</i> <em>texto en cursiva 2</em> <p> <u>texto subrayado 1</u> <br> <strike>texto tachado 1</strike> <s>texto tachado 2</s> <br> Texto con superíndice la 1<sup>ra</sup> y subíndice la 2<sub>a</sub> <p><br> <pre> Este texto esta previamente formateado por lo que se mantienen los saltos de línea y espacios en blanco</pre> </body> </html>

36 Formato de texto (XV) Ejemplo de representación

37 Formato de texto (XVI) Listas HTML Existen tres tipos de listas en HTML: 1. Listas desordenadas (no numeradas) <UL> </UL> 2. Listas ordenadas (numeradas) <OL> </OL> 3. Listas de definición. <DL> </DL>

38 Formato de texto (XVII) Listas desordenadas Inicio de lista: <UL> Fin de lista: </UL> Elementos de lista (List Item): <LI> Atributos: class, type,... Cada elemento se marca con un punto Ejemplo: <U L> </U L> <LI> Elemento uno <LI> Elemento dos <LI> Elemento tres

39 Formato de texto (XVIII) Listas ordenadas Inicio de lista: <OL> o <OL start=n> Fin de lista: </OL> Elementos de lista (List Item): <LI> Cada elemento se numera. <OL type=x> indica el tipo de numeración, x puede ser: 1, a, A, i o I Ejemplo: <O L> <LI> Elemento uno <LI> Elemento dos <LI> Elemento tres </O L>

40 Formato de texto (XIX) Listas de definición Inicio y fin de lista: <DL> </DL> Elementos de definición: <DT> Elementos contenido: <DD> Cada elemento se autoindenta (tabulación). Ejemplo: <DL> <DT> Primera Elemento <DD> Definición uno <DD> Definición dos <DT> Segundo Elemento <DD> </DL>

41 Formato de texto (XX) Atributos de <LI> En una lista ordenada, <LI value=nn> se indica la numeración origen de la lista. Los siguientes i elementos continúan con el orden nn + i. <LI type={1,a,a,i,i}>, indica el tipo de numeración para cada ítem. (numérico, letras, romanos) En listas desordenadas <LI type=xxx> modifica el aspecto del elemento de lista, xxx puede ser: circle, square o disc (por defecto).

42 Caracteres especiales Existe un conjunto de caracteres especiales en HTML que se pueden escribir como parte de un texto: < para escribir < &gt: para escribir > & & " (espacio) á á Á Á é é É É í í Í Í ó ó Ó Ó ú ú Ú Ú ñ ñ Ñ Ñ

43 Práctica 3

44 Separadores horizontales (I) Permiten diferenciar claramente secciones dentro del documento, lo que facilita su legibilidad La etiqueta utilizada es <HR> (sin ningún atributo genera un separador gris de ancho 100% y grosor un píxel) También son comunes separadores imagen generados con editores gráficos

45 Separadores horizontales (II) Atributos Anchura del separador : <HR width=.. > En porcentaje: <HR width=nn%> En píxeles: <HR width =nn> Alineación respecto a la ventana: <HR width =nn% align=aaaa> left, right, center (defecto) Altura del separador: <HR size=ss> Color del separador: <HR color= > (IE) Eliminar sombra: <HR noshade>

46 Fondos (I) El fondo por defecto de una página html es el color blanco, o en su caso, el definido en el navegador por el usuario. Este fondo puede cambiarse: 1. Con un color uniforme. 2. Con una imagen. El fondo usado debe facilitar la legibilidad del texto, el contraste.

47 Fondos (II) Con color uniforme Se añade a la etiqueta <BODY> el atributo bgcolor: BGCOLOR=color, donde color puede ser: red, white, black, blue, aliceblue,... BGCOLOR=#rrggbb, donde rr: Cantidad de color rojo en hexadecimal. gg: Cantidad de color verde en hexadecimal. bb: Cantidad de color azul en hexadecimal.

48 Fondos (III) Colores básicos Colores primarios : Rojo (R): red o #FF0000 Verde (G): green o #00FF00 Azul (B): blue o #0000FF Otros usuales: Blanco: white o #FFFFFF Negro: black o # Amarillo: yellow o #FFFF00

49 Fondos (IV) Paleta de colores Paleta de color seguro web son 216 colores son comunes a distintas plataformas y navegadores

50 Fondos (V) Ejemplo con color uniforme Ejemplo 1: <BODY bgcolor=white> Ejemplo 2: <BODY bgcolor =#FF0000> <BODY bgcolor =#00FF00> <BODY bgcolor =#0000FF>

51 Fondos (VI) Con imagen Las imágenes pueden ser en formato GIF o JPEG. El atributo que se añade a <BODY> es background= fichero-imagen. El atributo bgproperties= fixed establece el fondo fijo (IE). Ejemplo: <BODY background= logo.gif >

52 Fondos (VII) Propiedades CSS para fondos Se definen con <STYLE> o <BODY style= > background-color:; color del fondo background-image: url(...); imagen de fondo background-attachment:; fijación del fondo imagen (scroll, fixed) background-repeat:; repetición de la imagen de fondo (repeat, no-repeat, repeat-x, repeat-y) background-position:; posición de la imagen (top center bottom left right).

53 Enlaces (I) Conceptos Pueden coexistir distintas formas de enlace dentro de una página html: 1. Enlaces hipertextuales 2. Enlaces por imágenes Existen tres tipos según el recurso al cual apuntan: 1. Locales (dentro de la misma página) 2. Enlaces URL (a otras páginas), absoluto o relativo 3. Enlaces con dirección de

54 Enlaces (II) Definiciones URL, Universal Resource Locator, Localizador de Recursos Universal, es el identificador único, o dirección de un documento u objeto en la web (URI) Partes de una URL absoluta Protocolo://dominio:puerto/recurso Protocolo: http, https, ftp, file, news, mailto Dominio: Nombre del host Puerto: Puerto TCP Recurso: con la ruta del documento html, imagen, objeto,...

55 Enlaces (III) Estructura de un enlace <A href= dirección-enlace > xxx </A> Donde: dirección-enlace: Es la página con la que deseamos enlazar. xxx: El texto visible del enlace, imagen o ambos.

56 Enlaces (IV) Enlaces en la misma página. Anclas Se utiliza en casos en los que la página es demasiado grande para proporcionar saltos dentro de ella: En este caso el elemento dirección-enlace se sustituye por #marca-página. Ejemplo: <A href= #indice > Ir al índice </A y en la zona del índice se pondrá: <A name= indice >. </A>

57 Enlaces (V) Enlaces con otra página Si la página se encuentra en nuestro servidor web: <A href= pagina1.html >Mi página 1</A> <A href = pagina2.html#indice >página 2</A> <A href = privado/página3.html >Mi página 3</A> <A href =../pub/index.html >Índice servidor</a> En otro servidor web: <A href= >Principal AEAT</A>

58 Enlaces (VI) Enlaces con En estos casos, sustituimos la dirección-enlace por: mailto:dirección-destinatario Ejemplo: <A href = mailto:cuenta@dominio > texto_identificador_cuenta</a>

59 Enlaces (VII) Atributos de un enlace href; referencia a otro recurso o ancla target; ventana o marco en el que se mostrara el recurso vinculado: _blank, _self, _parent, _top, nombre title; tip aclaratorio del enlace (IE) id, name; Identificador de referencia del enlace onclick, onmouseover,...; eventos para llamada a scripts Ejemplo: <A href =.. target= _blank name= enlace1 ></A>

60 Enlaces (VIII) Colores de los enlaces A la etiqueta <BODY> se le añaden los atributos LINK, VLINK y ALINK. link; Color de los enlaces. vlink; Color enlaces visitados. alink; Color enlaces activos. Ejemplo: <BODY bgcolor=#e8efff TEXT=#FFFFFF link=#ffff00 vlink=#ff0000 alink=#0000ec>

61 Enlaces (IX) Etiqueta <LINK> Se definen en el bloque de cabecera <HEAD> Proporcionan información a motores de búsqueda Permiten el enlace de otros documentos. p.ej.: hojas de estilo en cascada vinculadas <LINK type= text/css rel= stylesheet href= a.css >

62 Enlaces (X) Atributos de <LINK> type; define el tipo MIME del objeto enlazado: text/plain, text/html, text/css, image/gif, image/jpeg href; URL del recurso enlazado rel; define la relación establecida: stylesheet, alternate, start, next, prev, index, help, contents

63 Enlaces (XI) Etiqueta <BASE> Permite definir una base de referencia para los enlaces del documento (uso de URL relativas) Se define en el bloque de cabecera <HEAD> Atributos: href; define la URL base del documento target; marco de visualización

64 Práctica 4