9
Cuaderno html Un documento HTML comienza siempre con la etiqueta <HTML>, que indica que el documento en cuestión esta construido con dicho lenguaje. La mayoría de las etiquetas son pareadas, es decir <…> corresponde al principio de la acción y </…> indica el fin de dicha acción. Por tanto, una pagina web estará siempre contenida entre las etiquetas <HTML> y </HTML>

Html

Embed Size (px)

Citation preview

Page 1: Html

Cuaderno html

Un documento HTML comienza siempre con la etiqueta <HTML>, que indica que el documento en cuestión esta construido con dicho lenguaje.

La mayoría de las etiquetas son pareadas, es decir <…> corresponde al principio de la acción y </…> indica el fin de dicha acción.

Por tanto, una pagina web estará siempre contenida entre las etiquetas <HTML> y </HTML>

Page 2: Html

Por otra parte, todo documento HTML consta de dos partes la cabecera (head) y el cuerpo del documento (body).

• La cabecera contiene básicamente información destinada al browser (o navegador), que queda oculta al usuario. Su etiqueta (pareada) es <HEAD>

• . El cuerpo es el documento que ve el usuario. Su etiqueta (pareda) es <BODY>

Page 3: Html

Ya estamos en condiciones de componer nuestra primera pagina web. Basta con escribir las siguientes etiquetas en nuestro editor de texto y salvar el resultado con la extensión “.HTML o .HTML

• • <hr>• Inserta una línea horizontal• Size= “valor numérico”• Indica el grosor de la línea• Width=”valor numérico”• Indica la anchura de la línea se puede dar en pixeles o en porcentaje• Align= “ left,” aling= “center”, aling=”right”• Alinea la barra en la pantalla del navegador.•

Page 4: Html

• •

• Estilos Físicos:• Se tata de la forma habituaL de escribir estilos en los programas de tratamiento de texto; el efecto de los

estilos se acumula, lo que quiere decir que dentro de un bloque de negritas, se puede incluir un bloque de texto en cursivas, de modo que el texto aparecería con dos etilos diferentes.

• <b>…</b>• Negrita• <i>…<i/>• Cursiva• <u>…</u>• Subrayado• <tt>…</tt>• Máquina de escribir• <big>…</big>• Letra grande• <small>…</small>• Letra pequeña• <s>…</s>• Letra tachada• <sub>…</sub>• Subíndice• <sup>…</sup>• Superíndice

Page 5: Html

• <front>…</front>• Cambia el tamaño de letra• Size=”valor numérico del tamaño de la letra”• Atributo• Color=”nombre o color hexadecimal”• Atributo• Face=”tipo de fuente”• La fuente debe de estar instalada en la computadora para poder visualizarla.• • Los atributos puedes incluirse cionjuntamente en la directiva front.• <basefrontsize= “Tamaño de letra”>• Cambia el tipo de letra en el documento completo, desde cualquier ditrectiva.• • <p>…</p>• Párrafo• Aling=”rigth,center,left”• Alinea el párrafo a la derecha, centro o izquierda• <body>…</body>• Cuerpo• Background=”se indica la ubicación de la imagen”• Coloca una imagen ya sea .gif o .jpg como fondo, siempre y cuando el navegador este con esta acción activada.• Bgcolor=”nombre del color o valor hexadecimal”• Coloca el color de fondo de pantalla• Text=”nombre del color o valor hexadecimal”• Modifica el color del texto dentro de la etiqueta body.• Link=”nombre del color o valor hexadecimal• Define el color de cualquier enlace que aparezca en el documento• Vlink=”nombre del color o valor hexadecimal• Define el color de cualquier enlace ya visitado.• Alink=”nombre del color o valor hexadecimal”• Define el color de cualquier enlace sobre el que mantengamos pulsado el ratón sin soltar.

Page 6: Html

• <Marquee>…</marquee>• Hace que se mueva la imageen en linea recta por la página• H• Cambia el tamaño de la letra• Alt=”texto”• Pone el texto al inicio de la página, sobre la imágen• Align=”top,bottom,left, middle, rigth”•  • Border=”numero”•  • Hspace=”numero”•  • Vspace=”numero”•  • Width=”numero”•  • Heigth=numero”• PRACTICA8• Marquee BEHAVIOR=”scroll”• =””slide”• =”alternate”• Marquee direction=”left”• =”right”• Marquee scrolldelay=”500• Marquee scrollamount=”50”• Marquee loop=2 behavior=”slide”• Marquee bgcolor=”yellow”• Marquee width=”25%”

Page 7: Html

Colores • <table>…</table>• Inserta una tabla• Align• Alinea horizontalmente la tabla con respecto a su entorno• Background• Nos permite colocar un foto para la tabla a partir de un enlace a una imagen• Bycolor• Da color de fondo a la tabla• Border• Define el numero de pixeles del border principal• Border color• Define el color del borde• Cellpadding• Define en pixeles el espacio entre los bordes de la celda & el contenido de la misma • Cellspacing• Define el espacio de los bordes (en pixeles)• Height• Define la altura de la tabla en pixeles o porcentaje• Width• Define la anchura de la tabla en pixeles o porcentaje• • <tr>…</tr>• • Align• Justifica el texto de la celda del mismo modo que si fuese el de un párrafo• Valign• Podemos elegir si queremos que el texto aparezca arriba (top), en el centro (middle), o abajo (bottom) de

la celda• Bordercolor• Define el color del borde• BgcoloR• Da color a la celda o linea elegida

Black --- #000000Silver --- #C0C0C0Gray --- #808080White---#FFFFFFMaroon---#800000Red---#FF0000Purple---#800080Fuchsia---#FF00FFGreen---#008000Lime---#00FF00Olive ---#808000Yellow---#FFFF00Navy---#000080Blue---#0000FFTeal---#008080Aqua---#00FFFF

Page 8: Html

Este es un ejemplo de una tabla creada con el cuaderno html

tabla 2.html

Page 9: Html

• • <embedsrc=”nombre audio o video”>• Audio: MP3. MIDI• Video:MPGE, WMV, AVI• AUTOSTART=FALSE, TRUE• Inicio automático• HIDDEN=TRUE• Esconder la consola• LOOP=FALSE, TRUE, #• Repeticiones de la música o video• CONTROLS=SMALLCONSOLE• Consola de controles de tamaño pequeño