Edición Digital: HTML

1,076
-1

Published on

Edición Digital: lenguaje de marcado HTML

Published in: Education
1 Comment
0 Likes
Statistics
Notes
  • muy buena presentación
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
1,076
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Edición Digital: HTML

  1. 1. Edición Digital <ul><li>HTML: HyperText Markup Language </li></ul>
  2. 2. Etiquetas de documento <ul><li><HTML>… </HTML> </li></ul><ul><ul><li>Comienzo y final del documento </li></ul></ul><ul><li><HEAD>… </HEAD> </li></ul><ul><ul><li>Cabecera del documento </li></ul></ul><ul><ul><li><TITLE>… </TITLE> </li></ul></ul><ul><li><BODY>… </BODY> </li></ul><ul><ul><li>Cuerpo del documento </li></ul></ul><ul><ul><li>Opciones: BGCOLOR=, BACKGROUND= </li></ul></ul>
  3. 3. Etiquetas de párrafo y línea <ul><li><Hn>… </Hn> </li></ul><ul><ul><li>Cabeceras, de nivel 1 a 6: <H2>… </H2> </li></ul></ul><ul><li><P> … </P> </li></ul><ul><ul><li>Etiqueta de párrafo del texto </li></ul></ul><ul><ul><li>Opciones: ALIGN= LEFT, CENTER, RIGHT </li></ul></ul><ul><li><CENTER> … </CENTER> </li></ul><ul><li><BR> y <NOBR> </li></ul><ul><ul><li>Etiqueta de ruptura/no ruptura de línea </li></ul></ul>
  4. 4. Etiquetas de texto, 1 <ul><li>Estilos físicos </li></ul><ul><li><B> … </B> </li></ul><ul><li><I> … </I> </li></ul><ul><li><U> … </U> </li></ul><ul><li><SUB>… </SUB> </li></ul><ul><li><SUP>… </SUP> </li></ul><ul><li>Otros... </li></ul><ul><li>Estilos lógicos </li></ul><ul><li><STRONG>...</STRONG> </li></ul><ul><li><ADDRESS>… </ADDRESS> </li></ul><ul><li><CITE>…</CITE> </li></ul><ul><li><DFN>…</DFN> </li></ul><ul><li>Otros... </li></ul>
  5. 5. Etiquetas de texto, 2 <ul><li><FONT>… </FONT> </li></ul><ul><ul><li>Permite definir tipos de letra, su color y tamaño </li></ul></ul><ul><li>Atributos: </li></ul><ul><ul><li>FACE=ARIAL, tipo de letra </li></ul></ul><ul><ul><li>COLOR=RED, color de la letra </li></ul></ul><ul><ul><li>SIZE=+2, tamaño de la letra respecto al estándar </li></ul></ul>deprecated
  6. 6. Listas de elementos <ul><li>Listas numeradas </li></ul><ul><ul><li><OL> <LI> </li></ul></ul><ul><ul><li></OL> </li></ul></ul><ul><li>Listas sin numerar </li></ul><ul><ul><li><UL> <LI> </li></ul></ul><ul><ul><li></UL </li></ul></ul><ul><li>Opciones </li></ul><ul><ul><li>TYPE=square </li></ul></ul><ul><ul><li>START=3 </li></ul></ul><ul><li>Listas de definiciones </li></ul><ul><ul><li><DL> </li></ul></ul><ul><ul><ul><li><DT> </li></ul></ul></ul><ul><ul><ul><li><DD> </li></ul></ul></ul><ul><ul><li></DL> </li></ul></ul>
  7. 7. URLs: enlaces y anclajes, 1 <ul><li><A HREF=“bla, bla…”>bla</A> </li></ul><ul><li><A HREF=“http://www.micasa.es”>Mi casa</A> </li></ul><ul><li><A HREF=“http://tu.casa.es/hola.html”>Hola</A> </li></ul><ul><li><A HREF=“http://tu.casa.es/archivos/hola.html”> Hola</A> </li></ul><ul><li><A HREF=“archivos/hola.html”>Hola</A> </li></ul><ul><li><A HREF=“hola.html”>Hola</A> </li></ul>
  8. 8. URLs: enlaces y anclajes, 2 <ul><li><A HREF=“../hola.html”>Hola</A> </li></ul><ul><li><A HREF=“mailto:curso@correo.com”>Hola</A> </li></ul><ul><li><A NAME=“pardillo”> </li></ul><ul><li><A HREF=“hola.html#pardillo”>Pardillo</A> </li></ul><ul><li><A HREF=“#pardillo”>Pardillo</A> </li></ul>
  9. 9. Imágenes <ul><li><IMG SRC=“pardillo.gif”> </li></ul><ul><li><IMG SRC=“graficos/pardillo.gif”> </li></ul><ul><li>Opciones: </li></ul><ul><ul><li>ALIGN=left, right, top, middle, bottom </li></ul></ul><ul><ul><li>ALT= texto alternativo </li></ul></ul><ul><li><IMG ALIGN=“left” SRC=“pardillo.gif”> </li></ul><ul><li><HR> </li></ul><ul><ul><li>Opciones SIZE, WIDTH, ALIGN </li></ul></ul>
  10. 10. Tablas, 1 <ul><li><TABLE>…</TABLE> </li></ul><ul><ul><li>Opciones: </li></ul></ul><ul><ul><ul><li>BORDER </li></ul></ul></ul><ul><ul><ul><li>CELLSPACING </li></ul></ul></ul><ul><ul><ul><li>CELLPADDING </li></ul></ul></ul><ul><ul><ul><li>BGCOLOR </li></ul></ul></ul><ul><li><CAPTION>… </CAPTION> </li></ul>
  11. 11. Tablas, 2 <ul><li><TR>…</TR> </li></ul><ul><li>Opciones: </li></ul><ul><ul><li>ALIGN </li></ul></ul><ul><ul><li>VALIGN </li></ul></ul><ul><ul><li>BGCOLOR </li></ul></ul><ul><li>En HTML 4 se introducen nuevas etiquetas que pueden hacer variar la estructura de las tablas </li></ul>
  12. 12. Tablas, 3 <ul><li><TD>… </TD> </li></ul><ul><li>Opciones: </li></ul><ul><ul><li>WIDTH </li></ul></ul><ul><ul><li>ROWSPAN </li></ul></ul><ul><ul><li>COLSPAN </li></ul></ul><ul><ul><li>ALIGN </li></ul></ul><ul><ul><li>VALIGN </li></ul></ul><ul><ul><li>BGCOLOR </li></ul></ul>
  13. 13. Frames, 1 <ul><li>Las frames o marcos permiten dividr la ventana del cliente web en partes independientes, en cada una de las cuales se presentan páginas web diferentes. </li></ul><ul><li>Para crear frames, en la página web sólo incluimos el código necesario para definirlas, e indicamos que página web debe situarse en cada una de ellas. </li></ul>deprecated
  14. 14. Frames, 2 <ul><li><FRAMESET>… </FRAMESET> </li></ul><ul><li><FRAMESET ROWS=n> </li></ul><ul><ul><li>Establece número de líneas y tamaño </li></ul></ul><ul><li><FRAMESET COLS=n> </li></ul><ul><ul><li>Establece número de columnas y tamaño </li></ul></ul><ul><li><FRAME SRC=“hola.html”> </li></ul><ul><ul><li>Define la página que aparecerá en el frame </li></ul></ul>deprecated
  15. 15. Frames, 3 <ul><li><FRAME NAME=“A”> </li></ul><ul><ul><li>Identifica a la frame con un nombre “a”, que se usará para ver allí nuevas páginas </li></ul></ul><ul><li><A HREF=“hola.html” TARGET=“A”> </li></ul><ul><ul><li>Mostrará la página hola.html en la frame definida como “a” </li></ul></ul><ul><li>Otras opciones: </li></ul><ul><ul><li>TARGET=“_Top”, sale de las frames </li></ul></ul><ul><ul><li>RESIZE=“no”, impide mover los límites </li></ul></ul>deprecated
  16. 16. Imagemaps, 1 <ul><li>Son imágenes divididas en sectores, cuya pulsación ejecuta el acceso a diferentes páginas web. </li></ul><ul><li>Los más comunes para usuario final son los de tipo “cliente-side” </li></ul><ul><li><IMG SRC=“imagen1.gif” ISMAP USEMAP=“#areas”>, </li></ul><ul><li>Le dice al navegador que la imagen es un mapa, y que debe buscar las coordenadas en la misma página, en “#areas”. </li></ul>
  17. 17. Imagemaps, 2 <ul><li><MAP NAME=“areas”> <AREA SHAPE=CIRCLE COORDS=“25,72 28,97” HREF=“http://micasa.com/hola.html” ALT=“Inicio de Mi Casa”> </MAP> </li></ul><ul><li>Los imagemaps se crean con aplicaciones específicas para ello </li></ul>
  18. 18. Formularios, 1 <ul><li>Los formularios son mecanismos estándares para enviar información al servidor. </li></ul><ul><li>Su ejecución necesita de un programa especial en el servidor, un CGI. </li></ul><ul><li>La forma más sencilla de crear un formulario sin programación es mediante POST. </li></ul><ul><li><FORM METHOD=“POST” ACTION=“mailto: pardillo@micasa.com”>…</FORM> </li></ul>
  19. 19. Formularios, 2 <ul><li><INPUT NAME=“NOMBRE” SIZE=“30”> </li></ul><ul><li><INPUT TYPE=“radio” NAME=valor VALUE=“Estoy contento”> </li></ul><ul><li><INPUT TYPE=“checkbox” NAME=valor VALUE=“Estoy contento”> </li></ul><ul><li><TEXTAREA NAME=“comentarios” ROWS=4 COLS=60></TEXAREA> </li></ul>
  20. 20. Formularios, 3 <ul><li><SELECT NAME=“Opciones” SIZE=“1”> <OPTION SELECTED>Bueno <OPTION>Estupendo <OPTION>Mejor </SELECT> </li></ul><ul><li><INPUT TYPE=“submit” VALUE=“Enviar”> </li></ul><ul><li><INPUT TYPE=“reset” VALUE=“Borrar”> </li></ul>

×