Diapo02
Upcoming SlideShare
Loading in...5
×
 
  • 1,039 views

Introducción al HTML

Introducción al HTML

Statistics

Views

Total Views
1,039
Slideshare-icon Views on SlideShare
1,039
Embed Views
0

Actions

Likes
0
Downloads
19
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Diapo02 Diapo02 Presentation Transcript

    • HTML Una Introducción
    • 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.
    • Proceso Servidor Web: contiene los documentos. Cliente Web Cliente Web Cliente Web Clientes web: visualizan los documentos en el navegador Petición de docuento
    • Proceso Servidor Web: contiene los documentos. Cliente Web Cliente Web Cliente Web Transmisión del documento
    • 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”
    • 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).
    • 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>)
    • 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: <!-- .... -->
    • 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)
      • 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
    • 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>
    • 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
    • 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
    • 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
    • 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
    • Etiquetas para estructurar el texto
      • Etiqueta sin parear <HR>
      WORLD WIDE WEB Líneas horizontales
    • 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
    • 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
    • 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
    • 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
    • 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
    • Etiquetas de formato del texto WORLD WIDE WEB Formato lógico
    • 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
    • Etiquetas de formato del texto WORLD WIDE WEB Formato físico
    • 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
    • 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
    • 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
    • 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.
    • Caracteres especiales WORLD WIDE WEB
    • 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
    • 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
    • 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
    • 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
    • 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
    • Inclusión de imágenes
      • Mediante la etiqueta sin parear <IMG>
      WORLD WIDE WEB
    • 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
    • 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
    • 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
    • Tablas (Atributos de modificación) WORLD WIDE WEB
    • Tablas (Atributos de modificación) WORLD WIDE WEB
    • 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
    • Marcos (Frames)
      • <DOCTYPE HTML PUBLIC>
      • <HTML>
      • <HEAD>
      • ....................
      • </HEAD>
      • <FRAMESET>
      • ....................
      • </FRAMESET>
      • </HTML>
      WORLD WIDE WEB
    • 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
    • Marcos (Frames) WORLD WIDE WEB
    • Formularios y CGIs
      • Introducidos con la etiqueta pareada <FORM> </FORM>
      WORLD WIDE WEB
    • Formularios y CGIs
      • Campos de entrada especificados con <INPUT> </INPUT>
      WORLD WIDE WEB
    • Formularios y CGIs WORLD WIDE WEB (Atributo TYPE)
    • 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
    • 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
    • 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
    • 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