Apuntes de HTML 1

CENTRO DE ESTUDIOS TECNOLOGICOS Industrial y de servicios No.
83
Torren, Coah.
Apuntes de:
Para la materia:
Ing. Adrin Contreras Marn

aconmar2001@hotmail.com
Agosto 2010
Introduccin
El lenguaje HTML significa Hyper Text Markup Langauage. Es un lenguaje para crear documentos mediante el uso de etiquetas, las cuales condicionan la representacin del texto. Las etiquetas son lo que podramos tomar como "comandos" Cada documento HTML contiene enlaces a otros documentos, a los cuales les sucede lo mismo, por lo que se va tejiendo como una tela de araa (World Wide Web o "red de redes"). Dentro de este lenguaje, se puede incluir texto, imgenes, elementos multimedia, enlaces a otras pginas y elementos diversos... El organismo que gestiona la especificacin del lenguaje HTML es W3C (Word Wide Web Consortium), el cual lo encontramos en http://www.w3c.org. Si bien en un principio se pens que el HTML fuese un lenguaje portable en su totalidad a diferentes maquinas, ya fuesen MAC, UNIX,... hoy en da cada empresa ha ido generando sus variaciones sobre los estndares, por lo que puede suceder que haya algunas etiquetas que no sean visualizados por algunos navegadores. Para desarrollar pginas mediante HTML lo podemos hacer mediante la edicin de un documento de texto, en cualquier procesador de textos, o bien utilizar algn programa para la edicin de pginas HTML, de los muchos que hay en el mercado como: el Dreamweaver, Front page, etc.
Definicin de etiquetas
Las etiquetas del lenguaje HTML van entre los smbolos menor y mayor: <Etiqueta> Tenemos dos tipos de etiquetas: Etiquetas Pareadas, aquellas que tienen un principio y un fin. El principio ser la etiqueta entre los smbolos menor y mayor y el final ser el mismo, pero delante de la etiqueta aadiremos una barra vertical. <etiquetaINICIO> ... </etiquetaFIN> Etiquetas Abiertas, aquellas que solo constan de una parte, por ejemplo la etiqueta de salto de prrafo. <etiquetaAbierta> Otro aspecto a tener en cuenta en el lenguaje HTML es el de los espacios en blanco. Si nosotros insertamos espacios en blanco dentro de un documento HTML, estos no sern interpretados como tales.
El documento HTML
Todo documento HTML empieza con la etiqueta <HTML> y acaba con etiqueta </HTML>. Dentro de estas etiquetas estar el cdigo HTML. Dentro del documento encontramos dos partes bien diferenciadas: La cabecera, va entre las etiquetas <HEAD> y </HEAD>. En esta parte encontraremos diferentes informaciones de la pgina, las cuales no sern visualizadas en el navegador. Dentro de la cabecera podremos encontrar las siguientes etiquetas:
El titulo, ir entre las etiquetas <TITLE> y </TITLE>. El texto que se encuentra entre estas etiquetas ser el que aparezca en la barra superior del navegador y que funcionar como titulo de la pgina web. Base del programa, se indica mediante la etiqueta <BASE>. Dicha etiqueta nos sirve para indicar cual es la direccin URL base para nuestra pgina y as poder realizar enlaces a pginas mediante direcciones relativas, las cuales tomarn como base la URL indicada en esta etiqueta. Meta-Tags, son unos elementos informativos que nos servirn para indicar informaciones relativas a la pgina como el autor, la herramienta con la cual ha sido diseada, el lenguaje de la pgina,.... Su estructura es <META http-equiv="-tipo--"content="--contenido--"> .
Los tipos de informaciones que nos podremos encontrar son:

Autor == "author" Herramienta de diseo == "authoring_tool" Lenguaje == Descripcin == "description" Palabras clave == "keywords" Tipo de distribucin == "distribution" Tipo de recurso == "resource-type"
Cdigo script, dentro de la cabecera tambin podemos encontrar cdigo script (javascript, vbscript,...). Si bien, dicho cdigo solamente realizar modificaciones de los elementos de la cabecera o sern funciones que podrn ser utilizadas dentro del cuerpo del programa. El cdigo script ir entre las etiquetas <SCRIPT> y </SCRIPT>.
Una cosa a tener muy en cuenta es que los "robots de bsqueda" de los principales buscadores funcionan leyendo las cabeceras de las pginas web, principalmente el titulo y las meta-tags, para indexarlas en sus bases de datos. Es por ello que es bastante importante incluir la cabecera dentro del diseo de nuestras pginas.
El cuerpo Dentro de l irn el resto de etiquetas, las que cargan las imgenes, las que
dan formato al texto, y aquellas que aaden los documentos multimedia,... Ir entre las etiquetas <BODY> y </BODY>. Entre estas etiquetas encontraremos el cdigo HTML, el cual ser el artfice del diseo de la pgina. Dentro del cuerpo, si queremos hacer algn comentario, lo haremos de la siguiente manera:
 As, por ejemplo, podramos tener el siguiente fichero HTML:
<HTML> <HEAD> <TITLE>Mi primera pagina</TITLE> </HEAD> <BODY> <CENTER><H1>Mi Primera pagina</H1></CENTER> <HR> <P>Esta es mi primera pagina Por el momento no se que tendr, pero dentro de poco pondr aqu muchas cosas. </BODY> </HTML>
Texto en HTML
Para introducir texto dentro de un documento HTML, basta con introducirlo sin ms. Con esto obtendremos texto normal y corriente. Pero utilizaremos una serie de etiquetas para poder obtener texto con un determinado formato, los cuales veremos a continuacin:
Etiqueta <P> <CENTER> ... </CENTER> Utilidad Resultado
Sirve para delimitar un prrafo. Inserta una lnea Soy un prrafo en blanco antes del texto. Permite centrar todo el texto del prrafo. Yo soy normal Yo estoy centrado
<PRE WIDTH=x> ... </PRE>
Representa el texto encerrado en ella con un tipo de letra de paso fijo. Muy til a la hora de representar cdigo fuente. El parmetro WIDTH Estoy en paso fijo especifica el nmero mximo de caracteres en una lnea. Permite justificar el texto del prrafo a la Yo estoy a la izquierda izquierda (ALIGN=LEFT), derecha (RIGHT), al Yo al centro centro (CENTER) o a ambos mrgenes Y yo a la derecha (JUSTIFY) Para escribir direcciones (de esas donde vive la gente, no electrnicas). Para citar un texto ajeno. Se suele implementar dejando mrgenes tanto a izquierda como a Daniel Rodrguez Herrera C/Ecuador 9, 1B 28220 Majadahonda Me gustara reencarnarme en las
<DIV ALIGN=x> ... </DIV>
<ADDRESS> ... </ADDRESS> <BLOCKQUOTE> ... </BLOCKQUOTE>
derecha, razn por la que se usa habitualmente.
yemas de los dedos de Warren Beatty (Woody Allen)
Etiquetas de cabecera (Heading Tags)

Son etiquetas con el aspecto <Hx> donde x va entre 1 y 6. Siendo <H1> la mayor cabecera de todas y <H6> la ms pequea. Estas etiquetas son del tipo pareado, es decir, el principio ser <Hx> y el final </Hx>. Veamos las diferentes cabeceras:
Etiqueta
<H1> ... </H1> <H2> ... </H2> <H3> ... </H3> <H4> ... </H4> <H5> ... </H5> <H6> ... </H6>
Resultado
Cabecera de nivel 1
Cabecera de nivel 2
Cabecera de nivel 3
Cabecera de nivel 4
Cabecera de nivel 5
Cabecera de nivel 6
Fuentes (Font)
Sirven para poder formatear el texto y sus propiedades, como son su color, el tipo de fuente, el tamao en el que se presentan,... Para poder realizar esto lo haremos mediante las etiquetas <FONT> y </FONT> dentro de las cuales incluiremos el texto. Un ejemplo de esto seria poniendo el cdigo:
<FONT SIZE=6 COLOR="red" FACE="Comic Sans Ms"> Esto es una prueba </FONT>,
Los diferentes atributos que presenta son:
Tamao (Size), lo haremos mediante la etiqueta <FONT SIZE=x> donde la x representa el tamao del texto. La x tomara valores entre -2 y 4, siendo el valor por defecto 3. Color, lo haremos mediante la etiqueta <FONT COLOR="color"> donde "color" ser uno de los colores. Bien mediante su traduccin al ingls. Por ejemplo "yellow", "red", "blue", "green". O por su valor RBG, es decir, su valor en hexadecimal, entonces se har mediante el formato <FONT COLOR=#rrbbgg>
Tipo (Face), indica el tipo de fuente en la que queremos que se represente el texto, esta ser una fuente que tengamos pre-instalada en nuestro ordenador. Como por ejemplo: "Comic Sans Ms", "New Times Roman", "Bertram", "New Gothic",...
Todas estas etiquetas nos permiten cambiar de una manera u otra el aspecto del tipo de letra que estemos utilizando y se pueden utilizar con tiras de caracteres dentro de un prrafo.
Etiqueta
<B> ... </B> <I> ... </I> <U> ... </U> <S> ... </S><imagenenlinea direccion="graficos/32.gif" descripcion="HTML 3.2"/> <TT> ... </TT> <SUP> ... </SUP> <SUB> ... </SUB> <BIG> ... </BIG> <SMALL> ... </SMALL> <BLINK> ... </BLINK>
Utilidad Pone el texto en negrita. Representa el texto en cursiva. Para subrayar algo.
Resultado Soy un texto negro como el tizn Estoy ladeado Como soy muy importante estoy subrayado A m, en cambio, nadie me quiere No soy variable E=mc2 ai,j=bi,j+1 Soy GRANDE Cre ver un lindo gatito Molesto?
Para tachar. Permite representar el texto en un tipo de letra de paso fijo. Letra superndice. Letra subndice. Incrementa el tamao del tipo de letra. Disminuye el tamao del tipo de letra. Hace parpadear el texto. Resulta algo irritante.
Retornos de carro y Saltos de prrafo. Para insertar un salto de carro al final de una lnea utilizaremos la etiqueta <BR>, para generar un salto de prrafo utilizamos el comando <P>.
Texto centrado. Para poder centrar un texto en pantalla, este, le encerraremos entre las
etiquetas: <CENTER> Este Texto Aparece Centrado </CENTER>
Colores en HTML
Una forma de dar una buena presentacin a nuestro documento HTML es con los colores que en l podemos definir. En primer lugar tenemos que saber las dos formas que hay de definir un color: una es mediante su cdigo RGB (red, green, blue), ya que todo color se forma a partir de estos colores. Entonces segn el valor que le demos a cada uno de estos colores obtendremos un color diferente. El valor que le demos vendr expresado en hexadecimal por cuatro dgitos y antepuesto por el smbolo de almohadilla ( # ). Por ejemplo: Rojo = #ff0000
Verde = #00ff00 Azul = #0000ff Otra forma de referirnos al color es mediante su nombre en ingles, por ejemplo: Rojo = "red" Verde = "green" Azul = "blue" Dentro del documento hay varias partes de las que podemos definir sus colores, estas son:

Color de fondo (bgcolor) Texto del documento (text) Color de un enlace (link) Color de un enlace no visitado (vlink) Color de un enlace activo o hacia el cual vamos (alink)
Dnde configuramos los colores

Los colores se declaran al principio del cuerpo del documento, o sea, en la zona de inicio del body, para hacerlo seguiremos la siguiente sintaxis: <body bgcolor="#ffffff" "pink"></FONT> text="yellow" link="#0000ff" vlink="#00ff00" alink=
Adems de declarar los colores en el inicio del cuerpo, lo podemos hacer cuando vamos a introducir un texto formateado mediante el comando <font>. Esto lo haremos de la siguiente manera: <font color="red"> HOLA </font> Esta sintaxis solo afectar al texto que se encuentra entre el comando <font>. Los colores por defecto se configuran en el navegador. Por ejemplo los que vienen por defecto en el Internet Explorer son el fondo gris, el texto negro, el enlace azul, el enlace activo rojo y el enlace visitado morado.
Colores y su valor hexadecimal

Muy recomendable es que cuando diseemos una pgina web utilizemos los colores mediante sus valores hexadecimales y no mediante su nombre. Esto es debido a que puede haber navegadores que no soporten dichos nombres. Esta tabla nos ayudar a buscar el valor hexadecimal que necesitamos.
Aliceblue F0F8FF Azure F0FFFF Blanchedalmond FFEBCD Burlywood DEB887 Antiquewhite FAEBD7 Beige F5F5DC Blue 0000FF Cadetblue 5F9EA0 Aqua 00FFFF Bisque FFE4C4 Blueviolet 8A2BE2 Chartreuse 7FFF00 Aquamarine 7FFFD4 Black 000000 Brown A52A2A Chocolate D2691E
Coral FF7F50 Cyan 00FFFF Darkgray A9A9A9 Darkolivegreen 556B2F Darksalmon E9967A Darkturquoise 00CED1 Dimgray 696969 Forestgreen 228B22 Gold FFD700 Greenyellow ADFF2F Indigo 4B0082 Lavenderblush FFF0F5 Lightcoral F08080 Lightgrey D3D3D3 Lightskyblue 87CEFA Lime 00FF00 Maroon 800000 Mediumpurple 9370D8 Mediumturquoise 48D1CC Mistyrose FFE4E1 Oldlace FDF5E6 Orangered FF4500 Paleturquoise AFEEEE Peru CD853F Purple 800080 Saddlebrown 8B4513 Seashell FFF5EE Slateblue 6A5ACD Steelblue 4682B4 Tomato FF6347
Cornflowerblue 6495ED Darkblue 00008B Darkgreen 006400 Darkorange FF8C00 Darkseagreen 8FBC8F Darkviolet 9400D3 Dodgerblue 1E90FF Fuchsia FF00FF Goldenrod DAA520 Honeydew F0FFF0 Ivory FFFFF0 Lawngreen 7CFC00 Lightcyan E0FFFF Lightpink FFB6C1 Lightslategray 778899 Limegreen 32CD32 Mediumauqamarine 66CDAA Mediumseagreen 3CB371 Mediumvioletred C71585 Moccasin FFE4B5 Olive 808000 Orchid DA70D6 Palevioletred D87093 Pink FFC0CB Red FF0000 Salmon FA8072 Sienna A0522D Slategray 708090 Tan D2B48C Turquoise 40E0D0
Cornsilk FFF8DC Darkcyan 008B8B Darkkhaki BDB76B Darkorchid 9932CC Darkslateblue 483D8B deeppink FF1493 Firebrick B22222 Gainsboro DCDCDC Gray 808080 Hotpink FF69B4 Khaki F0E68C Lemonchiffon FFFACD Lightgoldenrodyellow FAFAD2 Lightsalmon FFA07A Lightsteelblue B0C4DE Linen FAF0E6 Mediumblue 0000CD Mediumslateblue 7B68EE Midnightblue 191970 Navajowhite FFDEAD Olivedrab 688E23 Palegoldenrod EEE8AA Papayawhip FFEFD5 Plum DDA0DD Rosybrown BC8F8F Sandybrown F4A460 Silver C0C0C0 Snow FFFAFA Teal 008080 Violet EE82EE
Crimson DC143C Darkgoldenrod B8860B Darkmagenta 8B008B Darkred 8B0000 Darkslategray 2F4F4F Deepskyblue 00BFFF Floralwhite FFFAF0 Ghostwhite F8F8FF Green 008000 Indianred CD5C5C Lavendar E6E6FA Lightblue ADD8E6 Lightgreen 90EE90 Lightseagreen 20B2AA Lightyellow FFFFE0 Magenta FF00FF Mediumorchid BA55D3 Mediumspringgreen 00FA9A Mintcream F5FFFA Navy 000080 Orange FFA500 Palegreen 98FB98 Peachpuff FFDAB9 Powderblue B0E0E6 Royalblue 4169E1 Seagreen 2E8B57 Skyblue 87CEEB Springgreen 00FF7F Thistle D8BFD8 Wheat F5DEB3
White FFFFFF
Whitesmoke F5F5F5
Yellow FFFF00
YellowGreen 9ACD32
Imgenes en un documento HTML

Una forma de dar una buena impresin en nuestro documento es aadiendo imgenes, ya sean GIF o JPG (JPEG). Al mismo tiempo tenemos la posibilidad de utilizarlas como fondo del documento.
La etiqueta IMG
Para cargar una imagen en un documento HTML utilizaremos la etiqueta IMG con la siguiente sintaxis: <img src="dibujo.jpg"> Despus del parmetro SRC debemos indicar el Path en el cual se encuentra la imagen, este Path puede hacer referencia a una direccin relativa a la maquina en que se encuentra el documento, incluso a otra maquina. Los parmetros que nos encontramos en la etiqueta IMG son:
Align, indica la alineacin que va a tomar la imagen dentro del documento, esta puede ser: right, left, top, bottom, texttop, middle, absmiddle, baseline, bottom, absbottom. Width, es la anchura que tiene la imagen, si ponemos una anchura mayor de la que tiene, perderemos parte de la resolucin de la imagen. Height, es la altura que tiene la imagen, si ponemos una altura mayor de la que tiene, perderemos parte de la resolucin de la imagen. Alt, aqui asignamos un nombre a la imagen, y usualmente se aade tambin su tamao. Esto se hace por si alguien accede al documento en modo texto. Border, este parmetro ira seguido de un valor x, el cual indicara el tamao del borde que rodeara a la imagen. Vpace, indica la separacin en vertical con el texto que le precede, este parmetro ira precedido de un valor x que indicara dicha separacin. Hpace, indica la separacin en vertical con el texto que le precede, este parmetro ira precedido de un valor x que indicara dicha separacin.
Un ejemplo de utilizacin de esta etiqueta es el siguiente: <img src="ace.jpg" alt="ace.jpg - 6214,0 K" width=233 height=223>
La etiqueta FIG
Es una etiqueta que no es tan utilizada como la IMG, su sintaxis el la misma que la del comando IMG, lo nico que varia son sus parmetros.
Imgenes como fondo de documento

Para utilizar una imagen como fondo de documento lo haremos en la parte de declaraciones del cuerpo del programa, o sea, en la parte del <body>. Esto lo haremos de la siguiente manera: <body background = "dibujo.jpg"> Tenemos los siguientes ejemplos: Fondo Salchichas Fondo Tablero de pino Fondo Persiana Dependiendo del tamao de la imagen que queramos insertar como fondo as variara el tiempo que tarde en cargarse el documento.
Un buen consejo
Si al insertar una imagen en el documento ponemos su tamao, es decir, definimos las caractersticas de HEIGHT y WIDTH se cargar todo el texto del documento y posteriormente las imgenes, cosa que facilitar la vision del documento para la gente que quiera obviar las imgenes. En caso de no definir su altura y ancho el documento se ira cargando paso a paso. Cosa que en un documento con muchas imgenes puede hacerlo muy pesado.
Links
Son lo que llamamos enlaces. Una parte importante del documento HTML son los links, ya que estos nos permiten desplazarnos de unas pginas a otras e incluso dentro de una misma pgina. Los colores por defecto de los links son los que haya establecidos en el navegador. Por ejemplo en el IExplorer son el azul cuando el link no ha sido accedido y rojo cuando no lo ha sido, aunque esto se puede variar como ya vimos en el capitulo de colores. La forma genrica de utilizar un enlace es mediante las etiquetas <A> y </A>. Dependiendo de como sea el enlace tenemos:
Enlace a otra pgina

El cdigo para realizar esto es: <a href="pgina de destino"> texto </a> La pgina de destino puede estar dentro del mismo servidor, por ejemplo: <a href="/graficos/bitmaps.htm"> texto </a> o puede estar en otro servidor: <a href="protocolo://servidor/pgina de destino"> texto </a> Dependiendo del protocolo tendremos un tipo de conexin u otro. Los ms utilizados son http (HyperText Transfer Protocol), ftp (File Transfer Protocol), mailto, luego tenemos otros como gopher, telnet, news,... Nos podramos encontrar con: <a href = "http://www.greenpeace.org> GreenPeace </a><br> <a href = "ftp://ftp.gui.uva.es"> Informtica (UVA) </a> Cuyo resultado sera: GreenPeace Informtica (UVA) Uno de los ms utilizados es el que se utiliza para enviar correo electrnico. Es tpico de toda pgina HTML el aadir al final de pgina la direccin de nuestro correo electrnico para que al pulsar sobre ella podamos enviar un mensaje en el momento y evitarnos el
usar un programa que mande estos mensajes. Esto lo haremos mediante el siguiente cdigo: <a href="mailto:vcuervo@iname.com">vcuervo@iname.com</a> El resultado sera el siguiente: vcuervo@iname.com
Enlace a una misma pgina

En primer lugar, para poder acceder a otras partes de la pgina hay que sealarlas, esto lo hacemos mediante la etiqueta: <a name="nombre"> texto </a> Posteriormente tenemos que crear el enlace hacia esa parte de la pgina, mediante la siguiente sintaxis: <a href="#nombre"> texto del enlace </a> Incluso podemos acceder a una parte de otro documento HTML distinto, por ejemplo: <a href="http://www.microsoft.com#vbasic"> texto del enlace </a>
Enlaces en la parte superior de la pgina

Una de las cosas que ms se suelen hacer es, la de en una parte determinada del documento, aadir todos los enlaces del documento, ya sean en la misma pgina o en distinta. El cdigo podra ser: <a href = "#">Ir Arriba</a> | <a href="html/img/documento_img.htm">Imgenes</a> | <a href="html/img/documento_img.htm#img">Comando IMG</a> El resultado sera el siguiente: Ir Arriba | Imgenes | Comando IMG
Enlaces que nos importan o muestran cosas

Si queremos crear un enlace que nos importe una cosa, lo ms comn es una imagen, aunque podremos traer cualquier cosa, utilizaremos el cdigo similar al que sigue:
<a href="ace.jpg">Foto de Ace Ventura</a> Foto de Ace Ventura
Enlaces con imgenes

Si bien lo que hemos visto hasta ahora han sido enlaces mediante textos, tambin podemos hacer enlaces mediante imgenes. Para conseguir esto lo nico que deberemos hacer es sustituir el espacio dedicado para el texto por la sintaxis que carga la imagen, por ejemplo: <a href="imagenes.htm"><img src="imagen.jpg"></a> Lo ms normal es utilizar imgenes como enlaces para visualizar una imagen ms grande, por ejemplo: <a href="dino.gif"><img src="dino2.gif"></a> Su resultado es el siguiente:
Al introducir este cdigo, la imagen saldr rodeada de un borde, del color del enlace (link), el tamao de este borde lo podemos modificar mediante el parmetro border, de la siguiente forma: <a href="dino.gif"><img src="dino2.gif" border=0></a> Su resultado es el siguiente:
O bien: <a href="dino.gif"><img src="dino2.gif" border=4></a> Su resultado es el siguiente:
Listas en HTML
Las listas son unos elementos que nos permiten crear vietas dentro del documento HTML. Los tipos de listas que tenemos son:

Listas Ordenadas Listas Desordenadas Listas de Definiciones Mens Listas de Directorios
Listas Ordenadas
Las listas ordenadas nos sirven para presentar los elementos numerados de las listas. Para poder llevar esto acabo utilizaremos la etiqueta <OL> lista </OL>. Dentro de la lista, cada tem de ella ira precedido de la etiqueta <LI>, esto suceder en todos los tipos de listas. Un ejemplo sera: <OL> <LI> <LI> <LI> <LI> </OL> Juan Pilar Hctor Sara
El resultado de ese cdigo sera: 1. 2. 3. 4. Juan Pilar Hctor Sara
Para dar un nombre a la lista, lo haremos dentro de la etiqueta OL, con la etiqueta: <LH> Nombre de la lista </LH> Dentro de las listas ordenadas, podemos escoger el tipo de numeracin que queremos, podemos elegir entre:

Letras (a, b, c,...) Letras en mayscula (A, B, C,...) Nmeros decimales (1, 2, 3,...) Nmeros romanos (i, ii, iii,...) Nmeros romanos en mayscula (I, II, III,...)
Para elegir esto lo haremos mediante el parmetro TYPE=tipo situado detrs de la etiqueta OL. El tipo ser la primera letra del tipo escogido, por ejemplo si escogemos el tipo de letras sera:
<OL TYPE=a> <LI> Juan <LI> Pilar <LI> Hctor <LI> Sara </OL> En pantalla visualizaramos: a. b. c. d. Juan Pilar Hctor Sara
Otros parmetros que podemos elegir en las listas ordenadas son: START = numero, ser el nmero en el que empezar la lista. SKIP = numero, avanzar la lista en cantidades de nmero. CONTINUE, ndica que contina la lista en el nmero de la anterior lista del documento. Dentro de cada tem podemos indicar que haya un salto hasta el numero x. Esto lo haremos mediante el parmetro: VALUE= nmero. Este comando ira situado detrs de la etiqueta LI. Veamos el siguiente ejemplo: <OL TYPE = I START = 2> <LH> Nombres de personas </LH> <LI> Pilar <LI> Hctor <LI VALUE = 9> Maria <LI> Vctor </OL> El resultado en pantalla sera el siguiente: II. III. IX. X. Nombres de personas Pilar Hctor Sara Vctor
Listas Desordenadas
Las listas desordenadas nos sirven para presentar los elementos de la lista en diferentes lneas, antecedidos de un tem o grafico, ms conocido como vieta. Para poder llevar esto acabo utilizaremos la etiqueta <UL> lista </UL>. Dentro de la lista, cada tem de ella ira precedido de la etiqueta <LI>, como vimos anteriormente. Un ejemplo sera:
<UL> <LI> <LI> <LI> <LI> </UL>
F.C. Barcelona R. Madrid Betis Balompi At. Madrid
El resultado que saldra por pantalla sera el siguiente:

Para dar un nombre a la lista, lo haremos dentro de la etiqueta UL, con la etiqueta: <LH> Nombre de la lista </LH> Los tem que precedern a los elementos de la lista los especificaremos mediante el parmetro TYPE = tipo situado detrs de la etiqueta UL. Los tipos que tenemos dentro de las listas desordenadas son:

Crculos (circle) Discos (disc), al fin y al cabo son crculos rellenos. Cuadrados (square)
La diferencia de un tipo a otro se aprecia mejor con el navegador NetScape Navigator. Un ejemplo de la utilizacin del tipo sera: <UL TYPE = square> <LI> F.C. Barcelona <LI> R. Madrid <LI> Betis Balompi <LI> At. Madrid </UL> El resultado del cdigo sera:

Pero podemos hacer que cada elemento de la lista aparezca con un tem diferente, como en el ejemplo que sigue: <UL> <LI <LI <LI <LI </UL> type type type type = = = = square> F.C. Barcelona disc> R. Madrid circle> Betis Balompi disc> At. Madrid
La representacin del cdigo sera:

o
Otros parmetros que podemos elegir en las listas desordenadas son: PLAIN, lo que hace es eliminar el tem (dibujito) que nos aparece delante de cada nombre de la lista. COMPACT, reduce el espacio entre los elementos de la lista. WRAP = ( horizontal | vertical ), nos permite disponer de los elementos de forma horizontal o vertical. Veamos el siguiente ejemplo: <UL TYPE = square COMPACT> <LH> Nombres de equipos de ftbol </LH> <LI type = circle> F.C. Barcelona <LI> R. Madrid <LI> Betis Balompi <LI type = disc> At. Madrid </UL> En pantalla veramos: Nombres de equipos de ftbol
o o
En este ejemplo podemos percibir que al cambiar el tipo del tem (en este caso de cuadrado a crculo) los siguientes elementos de la lista aparecen con el nuevo tipo de tem.
Listas de definiciones
Para poder crear una lista de definiciones usamos la lista <DL> lista </DL>. Que entendemos por lista de definiciones?. Pues un ejemplo muy claro es el de un diccionario, por ejemplo nos sirve para hablar de trminos y dar su definicin. La estructura de una lista de definicin es:
<DL> <DH> Titulo de la lista </DH> <DT>Nombre del termino <DD> Definicin del termino </DL> Un ejemplo de la utilizacin de listas de definicin sera el siguiente: <DL> <DH> Siglas de Organizaciones </DH> <DT>HP <DD> Hewlett Packard <DT>UVI <DD> Unidad de Vigilancia Intensiva <DT>CEE <DD> Comunidad Econmica Europea </DL> Mediante este cdigo visualizaramos por pantalla: Siglas de Organizaciones HP Hewlett Packard UVI Unidad de Vigilancia Intensiva CEE Comunidad Econmica Europea Para que la definicin aparezca en la misma lnea del termino utilizaremos el parmetro COMPACT como en el ejemplo siguiente:
<DL COMPACT>
<DH> Siglas de Organizaciones </DH> <DT>HP <DD> Hewlett Packard <DT>UVI <DD> Unidad de Vigilancia Intensiva <DT>CEE <DD> Comunidad Econmica Europea </DL> Mediante este cdigo visualizaramos por pantalla: Siglas de Organizaciones HP Hewlett Packard UVI Unidad de Vigilancia Intensiva CEE Comunidad Econmica Europea
Mens
Ciertamente son parecidas a las listas desordenadas, incluso puede que no lleguemos a percibir la diferencia, aunque los trminos aparecen ms compactos. Cada tem o elemento aparece en una lnea diferente. El cdigo sera como el que sigue: <MENU> <LI> Primer elemento <LI> Segundo elemento </MENU> Un ejemplo de su utilizacin sera: <MENU> <LI> Color Rojo <LI> Color Verde <LI> Color Magenta </MENU> En pantalla veramos: Color Rojo Color Verde Color Magenta
Lista de Directorios
La lista de directorio se utiliza para presentar elementos de ms de 20 caracteres cada uno. Los elementos se representan en columnas, normalmente de 24 caracteres de ancho. La estructura a seguir es la siguiente: <DIR> <LI> Primer elemento <LI> Segundo elemento </DIR> Un ejemplo de utilizacin sera: <DIR> <LI> A-H <LI> I-M <LI> M-R <LI> S-Z </DIR> En pantalla veramos: A-H I-M M-R S-Z
Para finalizar hay que decir que los dos ltimos tipos de listas (mens y directorios), en la actualidad, no se suelen utilizar.
Formularios en HTML
Los formularios nos sirven para solicitar informacin al usuario y procesarla. El formulario se compondr de diferentes componentes como campos de texto, botones de opcin, listas desplegables,... La informacin del usuario deber de ser procesada por un programa del servidor. Estos programas son CGI's (Common Gateway Interface) y suelen estar escritos en Perl, C,... Tambin existe la posibilidad de que estos programas estn escritos en ASP, PHP,..., es decir, lenguajes ISS (Include Server Sides). Los formularios irn delimitados por las etiquetas <FORM> y </FORM>, la cual tiene dos parmetros:
action = "programa"
Indica el programa al cual se enviar la informacin introducida en el formulario (action="programa.cgi"). En el caso de que no contemos con ningn programa que procese la informacin tenemos la posibilidad de enviarla va e-mail (action="mailto:email").
method = "POST | GET"

Nos sirve para indicar la forma en la cual se va a enviar la informacin. Existen dos formas de enviar la informacin:
Mtodo Post, Este mtodo solo esta accesible desde los formularios. Se envan los parmetros de forma implcita junto a la pgina, es decir, al pasar los parmetros, nosotros no vemos reflejado en ningn sitio qu parmetros son y cual es su valor. Mtodo Get, Este mtodo enva los parmetros de forma explicita junto a la pgina, mostrando en la barra de navegacin los parmetros y sus valores. Son esas largas cadenas que aparecen en algunas pginas en nuestra barra de navegacin, del estilo: buscar?id=189006&valor=0987&texto='todo'&.......
Las cadenas toman el aspecto: parametro1=valor1&parametro2=valor2&....&parametroN=valorN. Es decir es una concatenacin a travs de & de pares parmetro-valor. Dentro del formulario podemos tener los siguientes campos: campos de entrada | campos de seleccin | reas de texto
Campos de Entrada
Se introducirn mediante la etiqueta: <INPUT TYPE="tipo" NAME="nombre" VALUE="valor" SIZE="tamao"> Podemos conseguir diferentes tipos de campos de entrada modificando el valor del campo type. Tenemos los siguientes tipos: Text Este campo nos servir para recoger cadenas de texto.
<INPUT TYPE="text" SIZE="30" VALUE="texto por defecto">
Si usamos un campo de entrada de tipo text. Adems de los parmetros de la etiqueta INPUT podremos usar otro parmetro maxlenght, mediante el cual indicamos la mxima longitud que puede tener la cadena a introducir. Password Es igual que el campo text, pero en vez de visualizar el texto, aparecer el smbolo *, impidiendo as que se visualice el texto introducido por el usuario. Su uso es bsicamente para recoger contraseas. <INPUT TYPE="password" SIZE="30" VALUE="texto por defecto"> Checkbox Representa a una casilla de marcado. Da la posibilidad de marcar varias casillas. Este tipo tiene la posibilidad de que una casilla aparezca marcada. Para ello incluiremos el parmetro CHECKED dentro de la etiqueta INPUT. <INPUT TYPE="checkbox" VALUE="html">HTML
<INPUT TYPE="checkbox" VALUE="JavaScript">JavaScript <INPUT TYPE="checkbox" VALUE="xml" CHECKED>XML <INPUT TYPE="checkbox" VALUE="asp">ASP <INPUT TYPE="checkbox" VALUE="vrml" CHEKED>VRML
HTML JavaScript XML ASP VRML
Radio Representa a un botn de seleccin. La diferencia con los campos checkbox es que, en este caso, solo podremos seleccionar una de las opciones. Para este tipo tambin existe la posibilidad de utilizar el parmetro CHECKED, si bien solo podremos ponerlo en un campo.
Deberemos de agrupar los botones en grupos. Un grupo se crea utilizando el mismo campo name para todos los botones del grupo.
Lenguajes de etiquetas: <INPUT TYPE="radio" NAME="etiquetas" VALUE="html" CHECKED>HTML <INPUT TYPE="radio" NAME="etiquetas" VALUE="xml">XML <INPUT TYPE="radio" NAME="etiquetas" VALUE="vrml">VRML <br> Lenguajes Script: <INPUT TYPE="radio" NAME="script" VALUE="JavaScript">JavaScript <INPUT TYPE="radio" NAME="script" VALUE="VBScript">VBScript
Lenguajes de etiquetas: HTML XML VRML Lenguajes Script: JavaScript VBScript
Image Incorpora una imagen al formulario. Al pulsar sobre la imagen se enva al programa que recibe la informacin las coordenadas en las cuales se pulso.
<INPUT TYPE="image" NAME="imagen" SRC="ordenador.gif">
Hidden Sirve para incluir campos en el formulario que no se visualizan. Por ejemplo un campo que contenga la hora a la que se rellena el formulario. Esta informacin es relevante para el programa que procesa la informacin, pero no es relevante para el usuario, es por ello que se le oculta.
<INPUT TYPE="hidden" VALUE="17/Abril/2001">
Button Representa un botn normal. Al presionar el botn no suceder nada a no ser que capturemos el evento onClick sobre el botn e indiquemos que se realicen una serie de acciones.
<INPUT TYPE="button" VALUE="Botn Normal">
Submit Representa a un botn de envo. Su diferencia con el botn normal es que cuando se pulsa este botn se invoca el mtodo submit() que enva la informacin al programa indicado en el parmetro action del formulario.
<INPUT TYPE="submit" VALUE="Enviar">
Reset Es un tipo de botn que sirve para borrar todos los valores de los campos del formulario.
<INPUT TYPE="reset" VALUE="Enviar">
Campos de Seleccin Nos permiten el uso de listas desplegables. Las etiquetas para su uso son: <SELECT NAME="nombre" SIZE="valor" MULTIPLE> <OPTION VALUE="valor"> Opcin 1 <OPTION> Opcin 2 <OPTION SELECTED> Opcin 3 </SELECT> Dentro de la etiqueta SELECT deberemos de darle un nombre (name) para que los programas que reciban el dato sepan de que elemento del formulario procede la informacin Mediante el parmetro size indicaremos cuantos elementos de la lista desplegable se mostrarn. Y si queremos que la seleccin de elementos sea multiple deberemos de aadir el parmetro MULTIPLE. Dentro de los campos OPTION podremos asignarles un valor mediante el campo VALUE, sino tendrn como valor el texto de la opcin. Si queremos que una de las opciones este seleccionada deberemos de aadir el parmetro SELECTED.
<SELECT NAME="grupo" SIZE="2"> <OPTION> Oasis <OPTION> Gorilaz <OPTION SELECTED> Weezer <OPTION> Blur <OPTION> Pearl Jam </SELECT>
reas de Texto Las reas de texto son campos de entrada de texto de mltiples lneas. Dentro de estas reas podemos indicar el nmero de columnas COLS y el nmero de filas ROWS que lo configurarn. Para poder aadir un rea de texto al formulario deberemos de utilizar el siguiente cdigo: <TEXTAREA COLS="valor" ROWS="valor"></TEXTAREA>
<TEXTAREA COLS=20 ROWS=10> Texto dentro del rea de texto </TEXTAREA>
Cdigos y entidades Debido a que existen pases que utilizan juegos de caracteres diferentes al ASCII, HTML nos permite tres formas de definir los caracteres especiales utilizando el cdigo ASCII de 7 bits. Estas tres formas son:

carcter, incluyendo directamente el carcter. cdigo ascii, podemos aadir un carcter especial mediante &#nmero_ascii
entidad, podemos utilizar la entidad que define el lenguaje HTML para el carcter especial. Las entidades son de la forma &nombre_entidad;
Veamos una tabla con las principales entidades : Carcte Cdig Entida Carcte Cdig Entidad r o d r o ! # % ' ) + / ; = ? [ ] _ { } ! -# -% -' -) -+ -- -/ -; -= -? -[ -] -_ -&#123 -; &#125 -; &#160 nbsp ; &#162 cent ; &#164 curren ; &#166 brvbar ; &#168 uml ; &#170 ordf ; &#172 not ; &#174 reg ; " $ & ( * , . : < > @ \ ^ ` | ~ " -$ -& -( -* -, -. -: -< -> -@ -\ -^ -` -&#124 -; &#126 -; &#161 iexcl ; &#163 pound ; &#165 yen ; &#167 sect ; &#169 copy ; &#171 laquo ; &#173 shy ; &#175 macr ;
&#176 deg ; &#178 sup2 ; &#180 acute ; &#182 para ; &#184 cedil ; &#186 ordm ; &#188 frac14 ; &#190 frac34 ;
&#177 plusmn ; &#179 sup3 ; &#181 micro ; &#183 middot ; &#185 sup1 ; &#187 raquo ; &#189 frac12 ; &#191 iquest ; &#193 Aacute ; &#195 Atilde ; &#197 Aring ; &#199 Ccedil ; &#201 Eacute ; &#203 Euml ; &#205 Iacute ; &#207 Iuml ; &#209 Ntilde ; &#211 Oacute ; &#213 Otilde ; &#215 times ; &#217 Ugrave ; &#219 Ucirc
&#192 Agrave ; &#194 Acirc ; &#196 Auml ; &#198 AElig ;
&#200 Egrave ; &#202 Ecirc ; &#204 Igrave ; &#206 Icirc ; &#208 ETH ;
&#210 Ograve ; &#212 Ocirc ; &#214 Ouml ; &#216 Oslash ;
&#218 Uacute
; &#220 Uuml ;
; &#221 Yacute ; &#223 szlig ; &#225 aacute ; &#227 atilde ; &#229 aring ; &#231 ccedil ; &#233 eacute ; &#235 euml ; &#237 iacute ; &#239 iuml ; &#241 ntilde ; &#243 oacute ; &#245 otilde ; &#247 divide ; &#249 ugrave ; &#251 ucirc ; &#253 yacute ; &#255 yuml ;
&#222 THORN ; &#224 agrave ; &#226 acirc ; &#228 auml ; &#230 aelig ;
&#232 egrave ; &#234 ecirc ; &#236 igrave ; &#238 icirc ; &#240 eth ;
&#242 ograve ; &#244 ocirc ; &#246 ouml ; &#248 oslash ;
&#250 uacute ; &#252 uuml ; &#254 thorn ;
Por ejemplo la frase " Vctor Cuervo" puede escribirse de la siguiente manera: © Víctor Cuervo
Es por ello que si deseamos que cualquier visor de pginas Web pueda visualizar las letras acentuadas de nuestro documento debemos utilizar sus correspondientes entidades o cdigos para representarlas.
Mapas de imgenes
Los mapas de imgenes sirven para representar mltiples enlaces dentro de una imagen dependiendo de la zona. Lo primero que debemos de hacer es declarar la imagen como mapa. Para ello utilizaremos el atributo usemap para indicar el mapa a usar sobre la imagen. <IMG SRC=imagen.gif USEMAP=#mapa1> Posteriormente deberemos de codificar el mapa. Los mapas se definen mediante la etiqueta MAP que tiene la siguiente estructura: <MAP NAME=nombreDelMapa>
<AREA SHAPE="formaZona" COORDS="coordenadas" HREF="enlace" ALT="comentario">
</MAP> Los posibles formas del parmetro SHAPE y COORDS son:
RECT, rectngulo o cuadrado. Sus coordenadas son COORDS=x1,y1,x2,y2. Vrtice superior izquierdo y vrtice inferior derecho.
CIRCLE, circulo. Sus coordenadas son COORDS=x1,y1,r. Centro y radio.
POLY, polgono. Sus coordenadas son COORDS=x1,y1,x2,y2,...,xn,yn. Todos los vrtices del poligono.
DEFAULT, zona no referenciada por ninguna de las otras zonas del mapa.

Apuntes de HTML 1

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Apuntes de HTML 1

Încărcat de

Drepturi de autor:

Formate disponibile

CENTRO DE ESTUDIOS TECNOLOGICOS Industrial y de servicios No.

Ing. Adrin Contreras Marn

Los tipos de informaciones que nos podremos encontrar son:

<PRE WIDTH=x> ... </PRE>

<DIV ALIGN=x> ... </DIV>

<ADDRESS> ... </ADDRESS> <BLOCKQUOTE> ... </BLOCKQUOTE>

derecha, razn por la que se usa habitualmente.

yemas de los dedos de Warren Beatty (Woody Allen)

Etiquetas de cabecera (Heading Tags)

Los diferentes atributos que presenta son:

etiquetas: <CENTER> Este Texto Aparece Centrado </CENTER>

Dnde configuramos los colores

Colores y su valor hexadecimal

Imgenes en un documento HTML

Imgenes como fondo de documento

Enlace a otra pgina

Enlace a una misma pgina

Enlaces en la parte superior de la pgina

Enlaces que nos importan o muestran cosas

<a href="ace.jpg">Foto de Ace Ventura</a> Foto de Ace Ventura

Enlaces con imgenes

O bien: <a href="dino.gif"><img src="dino2.gif" border=4></a> Su resultado es el siguiente:

Listas Ordenadas Listas Desordenadas Listas de Definiciones Mens Listas de Directorios

El resultado de ese cdigo sera: 1. 2. 3. 4. Juan Pilar Hctor Sara

<UL> <LI> <LI> <LI> <LI> </UL>

F.C. Barcelona R. Madrid Betis Balompi At. Madrid

El resultado que saldra por pantalla sera el siguiente:

F.C. Barcelona R. Madrid Betis Balompi At. Madrid

F.C. Barcelona R. Madrid Betis Balompi At. Madrid

La representacin del cdigo sera:

F.C. Barcelona R. Madrid Betis Balompi At. Madrid

F.C. Barcelona R. Madrid Betis Balompi At. Madrid

method = "POST | GET"

<INPUT TYPE="text" SIZE="30" VALUE="texto por defecto">

HTML JavaScript XML ASP VRML

Lenguajes de etiquetas: HTML XML VRML Lenguajes Script: JavaScript VBScript

<INPUT TYPE="reset" VALUE="Enviar">

&#192 Agrave ; &#194 Acirc ; &#196 Auml ; &#198 AElig ;

&#210 Ograve ; &#212 Ocirc ; &#214 Ouml ; &#216 Oslash ;

&#242 ograve ; &#244 ocirc ; &#246 ouml ; &#248 oslash ;

&#250 uacute ; &#252 uuml ; &#254 thorn ;

</MAP> Los posibles formas del parmetro SHAPE y COORDS son:

CIRCLE, circulo. Sus coordenadas son COORDS=x1,y1,r. Centro y radio.

S-ar putea să vă placă și