Uploaded on

Introducción al HTML

Introducción al HTML

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
656
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
21
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML Una Introducción
  • 2. Definiciones
    • WWW (World Wide Web).
    • Conjunto de ordenadores conectados a Internet que soportan el protocolo de nivel de aplicación HTTP.
    • HTTP (HyperText Transfer Protocol).
    • Protocolo usado por un cliente WWW para solicitar documentos a un servidor WWW (p.e. www.terra.es o www.elpais.es ), y transferir estos documentos desde el servidor.
    • Los documentos se visualizan en el navegador, p.e: Netscape o Internet Explorer.
  • 3. Proceso Servidor Web: contiene los documentos. Cliente Web Cliente Web Cliente Web Clientes web: visualizan los documentos en el navegador Petición de docuento
  • 4. Proceso Servidor Web: contiene los documentos. Cliente Web Cliente Web Cliente Web Transmisión del documento
  • 5. Definiciones
    • HTML : HyperText Markup Language.
    • Lenguaje de marcas usado para diseñar las páginas web.
    • Páginas web : textos ASCII escritos en el lenguaje HTML.
      • Una página web esta compuesta por distintos elementos: texto, dibujos, tablas, listas, etc. y permiten estructurar la información para mostrarla.
    • HTML facilita la interacción con el usuario a través de formularios con posibilidad de introducir datos.
    • Los documentos HTML tienen extensión “.html” o “.htm”
  • 6. Elementos de un documento HTML (I)
    • HTML ofrece un conjunto de etiquetas o marcas para incluir elementos en un página web.
    • Un documento HTML estará formado por:
      • Texto.
      • Caracteres especiales.
        • Valores simbólicos:
          • acute. Pe: á - &aacute
          • tilde. Pe: ñ - &ntilde
          • cedill Pe: ç - &ccedil
      • Etiquetas HTML (o directivas).
  • 7. Elementos de un documento HTML (II)
    • Etiquetas (directivas o comandos).
      • Situadas entre dos marcas:
        • Marca de apertura <
        • Marca de cierre >
      • Estructura: <etiqueta>.
      • Tipos :
        • Abiertas (unitarias o Sin parear ). Ej: <BR> ab ->salto de línea antes de ab
        • Delimitadoras (binarias o Pareadas ). Ej: <B> cde </B> -> pone en negrita cde
        • Opcionales (<P> </P>)
  • 8. Elementos de un documento HTML (III)
      • Atributos: las etiquetas tienen asociados atributos que modifican su significado o comportamiento.
        • Se incluyen dentro de la etiqueta de apertura:
        • <NOMBRE_ETIQUETA atributo1=“valor” atributo2=“valor”…>
        • Algunas etiquetas requieren el uso obligatorio de algún atributo.
        • P.ej.: <h1 align=“center”> Texto </h1>
    • Comentarios: <!-- .... -->
  • 9. Publicar una página web
    • Crear un documento HTML.
    • Situarlo en un directorio accesible dentro del servidor web.
    • Se accede a la página a través de su dirección URL:
    • http://maquina/camino/archivo.html
    • Ej: http//cachanilla.itmexicali.edu.mx/~pacois/
    • (si se omite el archivo, se supone index.html o index.htm)
  • 10.
    • Corrección sintáctica de los documentos:
      • Etiqueta desconocida se ignora
      • Etiqueta con atributo erróneo toma valor por defecto
      • Combinación de etiquetas no permitida se presenta si es posible o se presenta la primera solo
    Lenguaje HTML WORLD WIDE WEB
  • 11. Estructura general de un documento HTML WORLD WIDE WEB <HTML> </HTML>
    • Partes de un documento HTML:
    Etiquetas de inicio y final de documento. Documento HTML. Cabecera Etiquetas de inicio y final de la cabecera del documento. <HEAD> </HEAD> </BODY> Cuerpo Etiquetas de inicio y final del cuerpo del documento. <BODY>
  • 12. Estructura general de un documento HTML
    • <DOCTYPE HTML PUBLIC>
    • <HTML>
    • <HEAD>
    • <TITLE>Mi primera página de prueba HTML</TITLE>
    • </HEAD>
    • <BODY>
    • Aquí se pone la información que se desea que tenga el documento...
    • </BODY>
    • </HTML>
    WORLD WIDE WEB
  • 13. Etiquetas para estructurar el texto
    • <P>Aquí comienza un párrafo...
    • que termina en la misma línea.
    • <P>Sin embargo este párrafo...<BR>termina en otra línea.
    • <P ALIGN=left>Este párrafo va a la izquierda...
    • <P ALIGN=right>Este a la derecha...
    • <P ALIGN=center><BR><BR>Y este centrado y separado..
    WORLD WIDE WEB Párrafos
  • 14. Etiquetas para estructurar el texto
    • <H1>Este es el título 1</H1>
    • <H2>Y este el título 2</H2>
    • <H3 ALIGN=center>Y este el título 3 centrado</H3>
    • <H4><P>Y este es un título<BR>formado por varias líneas<P>Y por varios párrafos</H4>
    WORLD WIDE WEB Títulos
  • 15. Etiquetas para estructurar el texto
    • <CENTER>
    • <P>Este párrafo aparece centrado.<P>Y este también.
    • </CENTER>
    • <DIV ALIGN=right>
    • <P>Y este otro parrafo aparece a la derecha...<P>Junto con este.
    • </DIV>
    WORLD WIDE WEB Alineación de elementos
  • 16. Etiquetas para estructurar el texto
    • Etiqueta sin parear <HR>
    WORLD WIDE WEB Líneas horizontales
  • 17. Etiquetas para estructurar el texto
    • <P>Entre este parrafo</P>
    • <HR SIZE=5 WIDTH=80%>
    • <HR WIDTH=50% ALIGN=left NOSHADE>
    • <P>Y este hemos introducido varias líneas horizontales</P>
    WORLD WIDE WEB Líneas horizontales
  • 18. Etiquetas para estructurar el texto
    • <P>Este párrafo no esta sangrado</P>
    • <BLOCKQUOTE>
    • <P>Pero este párrafo si</P>
    • <BLOCKQUOTE>
    • <HR>
    • <P>Y este y la línea anterior más aún</P>
    • </BLOCKQUOTE>
    • </BLOCKQUOTE>
    WORLD WIDE WEB Sangrado de bloques
  • 19. Etiquetas para estructurar el texto
    • <PRE>
    • <P>
    • Este párrafo es preformateado
    • y por tanto saldrá exactamente
    • así.
    • </P>
    • </PRE>
    • <PRE WIDTH=40>
    • <BLOCKQUOTE>
    • <P>
    • Y este esta también preformateado y por
    • tanto también saldrá así...............
    • </BLOCKQUOTE>
    • </PRE>
    WORLD WIDE WEB Texto preformateado
  • 20. Etiquetas para estructurar el texto
    • <P>Este texto ha sido escrito por:</P>
    • <ADDRESS>
    • Pepe Pérez (<A HREF=&quot;mailto:Pepe.Perez@uv.es&quot;>
    • Pepe.Perez@uv.es</A>)
    • </ADDRESS>
    WORLD WIDE WEB Direcciones
  • 21. Etiquetas de formato del texto
    • Dos tipos:
    • Etiquetas de formato lógico . Clasifican el texto en una serie de clases predefinidas.
    • Etiquetas de formato físico . Fijan un estilo en la presentación.
    WORLD WIDE WEB
  • 22. Etiquetas de formato del texto WORLD WIDE WEB Formato lógico
  • 23. Etiquetas de formato del texto
    • <P><CITE>Este párrafo es CITE</CITE>
    • <P><VAR>Este párrafo es VAR</VAR>
    • <P><XMP>Este párrafo utiliza XMP y por ello sale <XMP> literalmente</XMP>
    WORLD WIDE WEB Formato lógico
  • 24. Etiquetas de formato del texto WORLD WIDE WEB Formato físico
  • 25. Etiquetas de formato del texto
    • <P><B><I>Este texto es negrita e itálica</I></B></P>
    • <P>Este es el elemento A<SUB>ij</SUB></P>
    • <P>Y esto es una potencia: 2<SUP>n</SUP></P>
    WORLD WIDE WEB Formato físico
  • 26. Aspecto de los caracteres
    • La etiqueta que permite fijar el aspecto de los caracteres es <FONT>
    • Podemos cambiar los tamaños de letra con el elemento <FONT > y el atributo VALOR , que puede tomar valores entre 1 y 7. El valor por defecto del texto es 3.
      • < FONT SIZE=3>A</font>< FONT SIZE=4>A</font>
      • < FONT SIZE=5>A</font> < FONT SIZE=6>A</font>
      • < FONT SIZE=7>A</font><FONT SIZE=6>A</font>
      • <FONT SIZE=5>A</font><FONT SIZE=4>A</font>
      • <FONT SIZE=3>A</FONT>
      • Dará como resultado: A A A A A A AA A
  • 27. Aspecto de los caracteres
    • Es posible utilizar en la etiqueta <FONT> el atributo FACE que permite elegir tipos de letra.
    • Este atributo permite forzar el tipo de letra que el diseñador de la página quiere que vea el cliente
    • El navegador mostrará el tipo de letra sólo si dicho tipo está disponible.
    • Por ejemplo:
      • <FONT FACE=&quot;times new roman&quot;>Prueba con TIMES NEW ROMAN</FONT>
      • Muestra:
      • Prueba con TIMES NEW ROMAN
  • 28. Aspecto de los caracteres
    • Si en la máquina cliente no está instalada una determinada fuente, ésta no se verá y en su lugar aparecerá la fuente por defecto del visualizador
    • En la etiqueta <FONT> puede usarse el atributo COLOR para definir el color de la fuente.
  • 29. Caracteres especiales WORLD WIDE WEB
  • 30. Listas
    • Cuatro tipos:
    • Desordenadas. Aparecen como una lista con puntos.
    • Ordenadas. Aparecen con un número o letra de orden.
    • Menús. Listas desordenadas mostradas de forma más compacta que las desordenadas.
    • De elementos cortos. El cliente WWW decide como las muestra.
    WORLD WIDE WEB
  • 31. Listas
    • <P><EM>Elige una opción:</EM></P>
    • <OL START=1 TYPE=&quot;A&quot;>
    • <LI>Comprar un producto</LI><BR>
    • <LI>Ver el estado de una compra</LI><BR>
    • <UL TYPE=circle>
    • <LI>De este mes</LI><BR>
    • <LI>De otros meses</LI><BR>
    • </UL>
    • <LI VALUE=10>Salir</LI>
    • </OL>
    WORLD WIDE WEB
  • 32. Listas (Glosario de términos)
    • <DL>
    • <DT>Termino 1</DT>
    • <DD>Definición termino 1</DD>
    • <DT>Termino 2</DT>
    • <DD>Definición termino 2</DD>
    • </DL>
    WORLD WIDE WEB
  • 33. Enlaces entre páginas
    • Dos tipos:
    • Enlaces de destino. Marcan un sitio en el documento al cual se puede ir.
    • Enlaces de origen. Indican una URL o enlace de destino.
    WORLD WIDE WEB
  • 34. Enlaces entre páginas
    • <P><A NAME=&quot;Capítulo1&quot;><B>Capítulo 1</B></P>
    • <P>...<BR>...<BR>...<BR>...<BR>...<BR>...</P>
    • <A HREF=&quot;http://www.uv.es&quot;>Web de la UV</A><BR><BR>
    • <A HREF=&quot;#Capítulo1&quot;>Capítulo 1</A>
    WORLD WIDE WEB
  • 35. Inclusión de imágenes
    • Mediante la etiqueta sin parear <IMG>
    WORLD WIDE WEB
  • 36. Inclusión de imágenes
    • <P>Vamos a insertar una imagen a continuación</P>
    • <P>< IMG SRC=&quot;imagen.gif&quot; ALT=&quot;logo&quot; ALIGN=left > Todo el texto de este párrafo
    • se colocara a la derecha de la imagen al estar esta alineada a la izquierda<BR><BR><BR>
    • Pero al sobrepasar la imagen continuara de forma normal</P>
    WORLD WIDE WEB
  • 37. Tablas
    • Insertadas con la etiqueta pareada
      • <TABLE> </TABLE>
    • Encabezado de tabla representado por
      • <CAPTION> </CAPTION>
    • Filas representadas por
      • <TR> </TR>
    • Columnas representadas por
      • <TD> </TD>
    • Encabezado de columnas representado por
      • <TH> </TH>
    WORLD WIDE WEB
  • 38. Tablas
    • <TABLE>
    • <CAPTION>Gastos del mes</CAPTION>
    • <TR><TH>Concepto</TH><TH>Importe</TH></TR>
    • <TR><TD>Alimentacion</TD><TD>20.000</TD></TR>
    • <TR><TD>Vestido</TD><TD>50.000</TD></TR>
    • </TABLE>
    WORLD WIDE WEB
  • 39. Tablas (Atributos de modificación) WORLD WIDE WEB
  • 40. Tablas (Atributos de modificación) WORLD WIDE WEB
  • 41. Tablas
    • <TABLE BORDER=2 BGCOLOR=&quot;green&quot;>
      • <CAPTION ALIGN=bottom>Gastos del mes</CAPTION>
      • <TR ALIGN=center BGCOLOR=&quot;yellow&quot;>
      • <TH>Concepto</TH><TH>Importe</TH><TH>Fecha</TH>
      • </TR>
      • <TR ALIGN=right>
      • <TD ALIGN=left>Alimentación</TD><TD>20.000</TD><TD>1/1/1990</TD>
      • </TR>
      • <TR ALIGN=right>
      • <TD ALIGN=left>Vestido</TD><TD>50.000</TD><TD>10/1/1990</TD>
      • </TR>
    • </TABLE>
    WORLD WIDE WEB
  • 42. Marcos (Frames)
    • <DOCTYPE HTML PUBLIC>
    • <HTML>
    • <HEAD>
    • ....................
    • </HEAD>
    • <FRAMESET>
    • ....................
    • </FRAMESET>
    • </HTML>
    WORLD WIDE WEB
  • 43. Marcos (Frames)
    • <DOCTYPE HTML PUBLIC>
    • <HTML>
    • <HEAD>
    • <TITLE>Marcos en HTML</TITLE>
    • </HEAD>
    • <FRAMESET COLS=&quot;25%,75%&quot;>
      • <FRAME SRC=&quot;imagen.gif&quot;>
      • <FRAME SRC=&quot;imagen.gif&quot;>
    • </FRAMESET>
    • </HTML>
    WORLD WIDE WEB
  • 44. Marcos (Frames) WORLD WIDE WEB
  • 45. Formularios y CGIs
    • Introducidos con la etiqueta pareada <FORM> </FORM>
    WORLD WIDE WEB
  • 46. Formularios y CGIs
    • Campos de entrada especificados con <INPUT> </INPUT>
    WORLD WIDE WEB
  • 47. Formularios y CGIs WORLD WIDE WEB (Atributo TYPE)
  • 48. Formularios y CGIs
    • <FORM METHOD=&quot;POST&quot; ACTION=&quot;cgi-bin/prueba.exe&quot;>
    • Nombre: <INPUT TYPE=&quot;text&quot; NAME=&quot;nombre&quot; SIZE=&quot;10&quot; MAXLENGTH=&quot;25&quot;> <BR>
    • Primer apellido: <INPUT TYPE=&quot;text&quot; NAME=&quot;apellido1&quot;, SIZE=&quot;10&quot; MAXLENGTH=&quot;25&quot;> <BR>
    • Segundo apellido: <INPUT TYPE=&quot;text&quot; NAME=&quot;apellido2&quot;, SIZE=&quot;10&quot; MAXLENGTH=&quot;25&quot;>
    • <BR><BR>Curso: <BR>
    • Primero <INPUT TYPE=&quot;radio&quot; NAME=&quot;curso&quot; VALUE=&quot;Primero&quot; CHECKED>
    • Segundo <INPUT TYPE=&quot;radio&quot; NAME=&quot;curso&quot; VALUE=&quot;Segundo&quot;>
    • Tercero <INPUT TYPE=&quot;radio&quot; NAME=&quot;curso&quot; VALUE=&quot;Tercero&quot;>
    • Cuarto <INPUT TYPE=&quot;radio&quot; NAME=&quot;curso&quot; VALUE=&quot;Cuarto&quot;>
    • Quinto <INPUT TYPE=&quot;radio&quot; NAME=&quot;curso&quot; VALUE=&quot;Quinto&quot;><BR><BR>
    • <INPUT TYPE=&quot;submit&quot; VALUE=&quot;Enviar&quot;>
    • <INPUT TYPE=&quot;reset&quot; VALUE=&quot;Borrar&quot;>
    • </FORM>
    WORLD WIDE WEB
  • 49. Formularios y CGIs
    • CGI es el programa encargado de procesar el formulario en el servidor.
    • Devuelve al cliente datos de dos formas:
      • Documento generado:
        • 1ª línea: Content-type: tipo/subtipo
        • 2ª línea: En blanco.
      • Referencia a otro documento
        • 1ª línea: Location: URL_doc
        • 2ª línea: En blanco.
    WORLD WIDE WEB
  • 50. Formularios y CGIs
    • printf(&quot;Content-type: text/html &quot;);
    • printf(&quot;<HTML>&quot;);
    • printf(&quot;<HEAD><TITLE>Ejemplo de CGI</TITLE></HEAD>&quot;);
    • printf(&quot;<BODY>Leidos %d caracteres<BR>&quot;,longitud);
    • printf(&quot;Caracteres leidos: %s</BODY>&quot;,datos);
    • printf(&quot;</HTML>&quot;);
    WORLD WIDE WEB
  • 51. Imágenes sensibles
    • Dos formas de procesamiento:
    • Procesadas en el servidor.
      • Incluidas con el atributo ISMAP de la etiqueta <IMG>
      • Formato del archivo de zonas: método URL c1,…,cN
      • Métodos validos son circle, rect y poly.
    • Procesadas en el cliente.
      • Incluidas con el atributo USEMAP=“nombre_mapa” de la etiqueta <IMG>
      • Formato y métodos de “nombre_mapa” iguales a los anteriores
    WORLD WIDE WEB