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