Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Guía Rápida de HTML

    Cargado por

    elizabeth-vargas-4122
    31 vistas12 páginas

    Título original

    Guía rápida de HTML

    Derechos de autor

    © Attribution Non-Commercial (BY-NC)

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    31 vistas12 páginas

    Guía Rápida de HTML

    Cargado por

    elizabeth-vargas-4122

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 12

    Gua rpida de HTML

    Este documento pretende ser una gua de referencia rpida del lenguaje HTML, no un tutorial. Esta gua abarca los estndares HTML 2.0 (H2) y HTML 3.2 (H3) as como las extensiones de los navegadores Netscape Navigator (N2, N3, N4) y Microsoft Explorer (E3, E4) en cada una de sus versiones. ltimamente he incluido las etiquetas ms importantes del estndar HTML 4.0 (H4) y segn se vaya asentando ir incluyendo todas sus etiquetas. Elementos bsicos

    Elementos principales
    <HTML></HTML> Declara que el documento es de tipo HTML. Deben estar en la primera y ltima linea respectivamente Cabecera del documento Estas etiquetas delimitan el contenido de la pgina Sonido de fondo

    <HEAD></HEAD> <BODY background="img" bgcolor, text, link, vlink, alink="#RRGGBB"> </BODY> <BODY BGSOUND="*.mid"> </BODY> E3

    Elementos de la cabecera
    <TITLE></TITLE> <STYLE TYPE="text/css" TITLE=""> Cdigo CSS</STYLE> <STYLE TYPE="JavaScript" TITLE=""> Cdigo JavaScript</STYLE> <SCRIPT></SCRIPT> <ISINDEX PROMPT="texto" ACTION="cgi"> <LINK HREF="" REL="" REV="" TITLE=""> <BASE HREF=""> <BASE TARGET=""> <META HTTP-EQUIV="" NAME="" CONTENT=""> H3 N3 H3 H3 Indicar el ttulo de la pgina Definir una hoja de estilo(no estn bien soportadas) Definir una hoja de estilo en JavaScript Programar un script El documento es un ndice-Debe existir un CGI (usado cuando no existan formularios) Establecer una relacin con otro archivo, hoja de estilo,... Especificar una direccin base Direccin base para los links de los distintos frames Insertar descripcin de la pgina, redirigir a otra pgina, refrescar...

    N2 H3

    Elementos formateadores de bloque Elementos principales


    <Hn></Hn> <Hn align="left|center|right"></Hn> <ADDRESS></ADDRESS> H3 Seis niveles de cabeceras (n es un n de 1 a 6) Alineamiento a la izquierda, centro o derecha. Para indicar autor, url...Renderizado con letra pequea Prrafo, </P> es optativo pero recomendado Alineacin del texto del prrafo Centrado Divisin (establece alineamiento y hoja de estilo) Texto justificado a dcha. e izda. Texto parafraseado Texto preformateado, width mal soportado Formulario (campos tratados ms adelante) Tipo mime si no esta especificado por el protocolo (method) Crea un letrero mvil. Aributos:alineamiento,color de fondo, accin(desaparecer al final, rebotar en bordes, alternar), direccin, altura, repetir N veces y moverse de n en n pixeles

    <P> Un texto </P> <P align="left|center|right></P> <CENTER></CENTER> <DIV align="left|right|center"></DIV> <DIV align="justify"></DIV> <BLOCKQUOTE></BLOCKQUOTE> <PRE WIDTH=N></PRE> <FORM ACTION="cgi" METHOD="get|post"></FORM> <FORM ENCTYPE=""></FORM> H3 H3 E4

    H2 N2

    E3 <MARQUEE ALIGN="" BGCOLOR="" BEHAVIOR="scroll|slide|alternate" DIRECTION="" HEIGHT="n|%" LOOP="N" SCROLLAMOUNT="n"></MARQUEE>

    Separadores
    <BR></BR> <BR clear="left|right|all"></BR> <HR></HR> <HR ALIGN="" SIZE="n" WIDTH="n|%" NOSHADE"></HR> <NOBR></NOBR> <WBR></WBR> &nbsp; <SPACER TYPE="horizontal|vertical" SIZE="n"></SPACER> <SPACER TYPE="block" WIDTH="n" HEIGHT="m" ALIGN=""></SPACER> H3 H3 Cambio de linea Para no bordear imgenes Inserta linea horiontal Alineamiento, grosor, ancho (pixels o porcentaje) y sin efecto 3D Evita cambio de linea Romper lnea aqu si es necesario Espacio en blanco Espaciado horizontal o vertical de n pixeles Bloque vacio de n x m pixeles

    N1 H3 N3 N3

    Listas
    <UL><LI></UL> <UL compact type="disc|circle|square"><LI type="disc|circle|square"></UL> <OL><LI></OL> <UL compact type="A|a|I|i|1" start=""><LI></UL> <DIR><LI></DIR> <MENU><LI></MENU> <DL><DT>termino<DD>definicin</DL> <DIR,MENU,DL compact></DIR,MENU,DL> H3 Lista no numerada Renderizado compacto y tipo de smbolo Lista numerada Renderizado compacto, tipo de numeracin y donde empezar Directorio (normalmente igual que <UL>) Menu (normalmente igual que <UL>) Menu (normalmente igual que <UL>) Renderizado compacto

    H3

    Tablas
    <TABLE BORDER=n CELLSPACING=m CELLPADDING=l WIDTH="n|%" ALIGN="right|left|center" VALIGN="top|middle|bottom"> Define una tabla (por defecto sin borde) con espacio entre celdas m y margen de celdas l, de ancho n pixeles o % de pgina (las tablas pueden anidarse) E3 Color del borde, color sin sombra y con sombra del efecto 3D. E3,N3 Color de fondo de la tabla H3 Titulo de la tabla H3 Nueva fila(</TR> optativo) H3

    <TABLE BORDERCOLOR="" BORDERCOLORLIGHT="" BORDERCOLORDARK=""> <TABLE BGCOLOR=""> <CAPTION align=top|bottom></CAPTION> <TR align="" valign="top|middle|bottom" BORDER=n CELLSPACING=m CELLPADDING=l WIDTH=n|%></TR> <TH></TH>

    H3

    <TD nowrap rowspan,colspan=N align,valign="" H3 widtn=n height=n></TD> <TD bgcolor="#RRGGBB"></TD> N3,E3 Celda con color de fondo <CAPTION align="top|bottom"></CAPTION> E3,N3 Titulo de la tabla Las tablas segn Microsoft: <THEAD></THEAD> E3

    Cabecera dentro de la fila actual(mismos atributos que <TD>) [negrita y centrada] Celda

    <CAPTION E3 align="top|bottom|centre|left|right"></CAPTION> <TBODY></TBODY> E3 <TFOOT></TFOOT> <COLGROUP ALIGN="" VALIGN="" SPAN="N"> <COL ALIGN="center|juestify|left|right" SPAN="N">

    Cabecera de informacin [no renderizada] Titulo con alineamiento

    Cuerpo. Aqu va el contenido estandar de la tabla E3,H4 Pie de tabla [no renderizado] H4 N columnas con las mismas propiedades H4 Similar al anterior

    Elementos formateadores de texto Estilo fsico


    <FONT SIZE="n|+n|-n"></FONT> Tamao de la fuente absoluto (0-7) o relativo al actual(+1,-1,-2,) H3 Color de la fuente N3,E3 Tipo de fuente (o familia) Tamao del texto para todo el documento N4 Tamao en puntos y muy negrita (900) o poco negrita (100) Teletipo o monoespaciado Cursiva Negrita H3 Subrayado H3 Tachado H3 Letra grande (igual que +1) H3 Letra pequea (igual que 1) H3 Subndice H3 Superndice N3 Texto que parpadea H3

    <FONT COLOR="#RRGGBB"></FONT> <FONT FACE="fuente,alternativa,,"></FONT> <BASEFONT SIZE=""> <FONT POINT-SIZE="n" WEIGHT="100|200|..|900"></FONT> <TT></TT> <I></I> <B></B> <U></U> <STRIKE></STRIKE> <S></S> <BIG></BIG> <SMALL></SMALL> <SUB></SUB> <SUP></SUP> <BLINK></BLINK>

    Estilo lgico
    <EM></EM> <STRONG></STRONG> <CODE></CODE> <SAMP></SAMP> <VAR></VAR> <CITE></CITE> <DFN></DFN> <KBD></KBD> Enfasis [cursiva] Fuerte [negrita] Codigo [monoespaciado] Scripts,... [monoespaciado] Texto escrito por el usuario [cursiva] Citas y referencias [cursiva] Definicion [cursiva] Input [monoespaciado]

    H3

    Caracteres especiales
    &#nnn; Caracter especial con cdigo ASCII nnn &[vocal]acute; Acentos. Ej. en maysculas y minsculas ej:&Aacute; &aacute; &lt; &gt; Smbolos < (menor que - Lower Than) y > (mayor que Greater Than) &amp; Ampersand [&] &quot; Dobles comillas ["] &reg; &copy; Marca registrada [] y Copyright [] respectivamente

    Links (enlaces hipertexto)


    Link a un archivo o a un ancla. Establecer relacin directa o inversa <A NAME="etiq"><A/> Definicin del ancla etiq <A HREF="" TARGET="nom| _blank| _self| N2,E3 Enlace con resultado en frame _parent| _top"> </A> <A HREF="" TITLE="mensaje"> </A> E4 Se muestra el mensaje al pasar el ratn. <A HREF="URL|URL#etiq" ></A> <A rel|rev=""></>

    Imgenes y objetos
    <IMG SRC="URL" ALT="texto"> <IMG WIDTH="n" HEIGHT="n"> <IMG BORDER="n"> <IMG VSPACE="n" HSPACE="n"> <IMG LOWSRC="URL"> <IMG SRC="URL" ALIGN="top|middle|bottom|left|right"> <IMG SRC="URL" ALIGN="texttop|absmiddle|baseline|absbottom"> <IMG DYNSRC="video.avi" SRC="alt" START="fileopen|mouseover" [CONTROLS] LOOPDELAY="n(msegs)" LOOP="-1|n"> <IMG VRML="mundo.vrml"> H3 H3 H3 N1.0 H3 N1.0 E3 Insertar imagen o poner texto alternativo Tamao Borde, slo si la imagen es un link Espaciado alrededor de la imagen Imagen de baja resolucin cargar antes de la SRC Alinear la imagen Alinear la imagen Insertar Video

    E3

    Insertar Mundo 3D (para

    visualizarlo es necesario ActiveVRML) <IMG SRC="URL" ISMAP> Imagen mapa con CGI(la imagen debe ser un link a dicho CGI) <IMG SRC="URL" USEMAP="URL|#nom"> H3 Imagen mapa (mapa definido en HTML) <MAP NAME="nom"></MAP> H3 Definicin del mapa <AREA SHAPE="rect" COORDS="x1,y1,x2,y2" H3 Define una seccin HREF="" TARGET=""> </AREA> rectangular en el mapa <AREA SHAPE="circle" NOHREF H3 Define una seccin COORDS="CentroX,CentroY,radio" ></AREA> circular en el mapa <AREA SHAPE="poly" COORDS="x1,y1,x2,y2,.." H3 Define una seccin HREF=""> </AREA> poligonal en el mapa <EMBED SRC="" AUTOSTART="true|false" N2,E3 Incrustar objeto (video, WIDTH="n" HEIGHT="n" vrml, sonido...) que ser PLUGINSPAGE=""></EMBED> usado por un plug-in <EMBED SRC="" E3 Si el usuario no tiene el PLUGINSPAGE="URL"></EMBED> plugin le redirigir al web indicado <OBJECT CLASSID="" ID="" E3 Insertar control ActiveX o CODEBASE="URL(.ocx)" WIDTH= cualquier otro objeto HEIGHT=></OBJECT>

    Elementos de formularios
    Estos elementos deben ir entre <FORM> y </FORM>. Todas deben incluir adems de sus atributos especificos el atributo NAME que servir para identificarlas. <INPUT TYPE="text|passwd" MAXLENGTH="M" SIZE="N" Caja de texto o text="texto por defecto"></INPUT> passwd(no se muestra lo escrito) <INPUT TYPE="checkbox|radio" CHECKED Caja de seleccin VALUE="></INPUT> o radio con el atributo optativo
    checked

    <INPUT TYPE="hidden"></INPUT> <INPUT TYPE="submit" ></INPUT> <INPUT TYPE="image"></INPUT>

    Variable oculta Enviar la informacin Enviar la info. y el punto de la imgen en que se puls

    <INPUT TYPE="reset"></INPUT> <INPUT TYPE="file"></INPUT> <SELECT SIZE=M MULTIPLE> <OPTION selected> </SELECT> <TEXTAREA ROWS=N COLS=M></TEXTAREA>

    <TEXTAREA WRAP="off|virtual|physical"></TEXTAREA>

    N2

    Resetear los campos Para bajarse un archivo Persiana de seleccin o caja combo (si n<M) Ventana de texto de N filas por M columnas Wrapping (virtual=aparenta pero no escribe CR/LF)

    Frames
    Los frames se dividen el navegador en pantallas independientes. Se crean usando la etiqueta <FRAMESET></FRAMESET> en vez de <BODY></BODY>. <FRAMESET ROWS="n|%|n*,,"> </FRAMESET> E3,N2 Dividir horizontalmente en frames (pixeles|porcentaje|fraccin del resto) <FRAMESET COLS="n|%|n*,,"> </FRAMESET> E3,N2 Dividir verticalmente en frames (pixeles|porcentaje|fraccin del resto) <FRAMESET BORDER=n> </FRAMESET> N3 Borde en pixeles <FRAMESET FRAMEBORDER="yes|no"> E3,N3 Frames con o sin borde </FRAMESET> <FRAMESET BORDERCOLOR="color"> N3 Color del borde, si hay </FRAMESET> <FRAMESET FRAMESPACING="n"> N3 Espacio entre frames en </FRAMESET> pixels <FRAME NAME= SRC="URL"></FRAME> E3,N2 Define el contenido del frame (.html,.gif,...) <FRAME marginwidth=m marginheight=n E3,N2 Espaciado y barra de scrolling="yes|no|auto" ></FRAME> desplazamiento <FRAME NORESIZE></FRAME> E3,N2 Frame no redimensionable <FRAME frameborder="yes|no"></FRAME> E3,N2 Quitar separacin(deben tenerlo 2 adyacentes) <FRAMESET FRAMEBORDER=0 border=no E3,N3, Con esta combinacin se framespacing=0> <FRAME garantiza que no se NORESIZE><FRAMESET> mostrarn los bordes en ningn navegador <NOFRAMES></NOFRAMES> E3,N2 Para navegadores sin frames <IFRAME NAME="contenido" WIDTH="n" E3 Frames flotantes HEIGHT="m" SRC="URL">Texto alternativo</IFRAME>

    Applets y Scripts
    <APPLET CODE="URL(.class)" WIDTH="n" HEIGHT="m"></APPLET> <APPLET codebase="URL" name="" align="" H3.2 Incluye el applet indicado reservandole un espacio de nxm Atributos optativos

    H3.2

    ALT="" vspace="i" hspace="j"></APPLET> <PARAM NAME="param1" VALUE="valor1"></PARAM> <APPLET>Cdigo HTML</APPLET>

    <APPLET ARCHIVE="fichero"></APPLET> <APPLET TITLE="mensaje"></APPLET> <SCRIPT LANGUAJE="javascript#.#"> Codigo</SCRIPT> <SCRIPT LANGUAJE="VBScript"> Codigo</SCRIPT>

    N4 E4.0 H3 E3

    Paso de parametros al applet (entre <APPLET></APPLET>) Cdigo alternativo para navegadores sin soporte Java Archivo con cosas auxiliares (comprimido) Mensaje al pasar el ratn Insertar codigo Javascript versin #.# (p.e:1.0, 1.1) Insertar codigo Visual Basic Script

    Varios
    <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN//3.2"> H3 Ejemplo de declaracin de tipo de documento (debe ser la 1 linea) Insertar comentarios Insertar comentarios Crea N columnas en un ancho total de n pixeles y m pixeles entre las columnas Actualizar pgina o cargar otra en 5 segs. Tipo de archivo mime y codigo de caracteres usado Informacion para los buscadores

    <!-- comentario --> <COMMENT></COMMENT> <MULTICOL COLS="N" WIDTH="n" GUTTER="m"></MULTICOL> E3 N3

    <META HTTP-EQUIV="refresh" CONTENT="5 ;URL=otro.html"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <META NAME="author" CONTENT="Nombre autor"> <META NAME="description" CONTENT="Descripcion"> <META NAME="url" CONTENT="http://..."> <META NAME="keywords" CONTENT="HTML, web, guia"> <META NAME="exclude" CONTENT="no|yes">

    <KDB></KDB> <LISTING></LISTING> <XPM></XPM> <KEY></KEY> <PLAINTEXT></PLAINTEXT>

    Elementos en desuso:No es recomendable utilizarlos

    CSS y HTML 4.0


    HTML 4.0 determina que todas las etiquetas tienen dos nuevos atributos: CLASS, para asignarle una clase y ID para darle un nombre nico. Adems hay dos nuevas etiquetas: <SPAN CLASS="" ID="">Texto</SPAN> H4 Permite darle nombre o definir como de una clase al texto entre sus instrucciones. <DIV CLASS="" ID=""> HTML </DIV> H4 Igual que SPAN pero puede aplicarse a bloques de cdigo grande. Introduce un salto de lnea al principio y al final.

    También podría gustarte