Manual de Html Basico ¿Que es Html?
Anuncio
Manual de Html Basico INTRODUCCION El contenido de la pàgina que se muestra a continuaciòn, contiene informaciòn bàsica acerca de la creaciòn de documentos web, utilizando el editor de texto. Muestra una descripciòn de todos los paràmetros bàsicos y màs sencillos en la elaboraciòn de tu pàgina web. HTML es una herramienta muy bàsica y facil de utilizar, te recomiendo que la lo utilices, para crear tus documentos.Te lo recomiendo, asegurando que no te arrepentiras y te divertiràs creando una infinidad de pàginas web.. ¿Que es Html? Las siglas HTML significan Hiper Text Markup Language, el cual es un lenguaje muy sencillo de utilizar, que permite estructurar documentos para ser vistos desde los diversos visores de internet, entre los cuales se pueden mencionar: ° Microsoft Explorer ° Netscape ° Mosaic ° Mozilla Pero existe un pequeño problema en cuanto a los visores de internet, este consiste en que no todos los visores soportan la estructura de un documento, esto depende de las versiones de los visores, asi como del tipo de etiqueta que se ha utilizado en dicho documento. Html nos permite presentar texto de una forma ordenada, agradable y estructurada; esto a través de enlaces(links) los cuales nos conducen a otros documentos con información relacionada sobre algun tema específico. Consta de texto plano, además de contener una serie de etiquetas y marcas, las que nos permiten darle forma a los elementos que contienen el documento que estemos creando. Las etiquetas se encuentra dentro de directivas las cuales se representan así: <>. La estructura logica de un documento puede estar constituida por: ° Título ° Párrafos de Texto ° Tablas ° Efectos ° Otros Las especificaciones de los textos como: subrayado, parpadeo, negrita, otros; se hacen a través de las directivas, una de apertura ( < ) y la otra de cierre ( > ). A veces es necesario que las directivas posean parametros adicionales, para poder crear un enlace por ejemplo, estos parámetros son colocados en la directiva inicial; lo cual iremos viendo poco a poco, en el desarrollo de este manual. Estructura Básica de un Documento La estructura básica que debe de contener un documentos html es la siguiente: <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML> Inicio del documento Inicio de la cabecera del documento Inicio del título del documento Final del título del documento Final de la cabecera del documento Inicio del cuerpo del documeto Final del cuerpo del documento Final del documento Aunque esta estructura no es necesaria para la creación del documentos, se utiliza para obtener una forma más ordenada y entendible en el codigo fuente del documento. Se recomienda siempre utilizarla, porque en la parte de la cabecera es donde se define el titulo de nuestro documento o página. Listas Las listas representan datos de una forma ordenada y enumerada. Existen tres tipos de listas, las cuales son: numeradas, sin numerar y de definición. Las listas numeradas: son las que representan a los elementos de una lista anteponiendo algun tipo de viñetas como: números y letras. Las listas numeradas utilizan la directiva <OL></OL> las cuales utilizan dos parámetros esenciales como son: start type Este parámetro se utliza para indicar el número del primer elemento de la lista, si este se omite, se comprende que esta comenzará con el número uno. Este indica el tipo de numeración que se va a incluir en la lista, ya sean números romanos o letras, si no se utiliza este parámetro, se entiende que será indicada numéricamente. Ejemplo <OL> <LI>España <LI>Francia <LI>Italia <LI>Portugal </OL> Resultado 1.España 2.Francia 3.Italia 4.Portugal Las listas sin numerar: representan los elementos de la lista con marca que antecede a cada uno de ellos. Se utiliza la directiva <UL></UL> para delimitar la lista, y <LI>para indicar cada uno de los elementos. La directiva <UL> puede contener el parámetro type que indica la forma de la marca que antecede a cada elemento de la lista. Los valores que se pueden utilizar con el parámetro type son: disc (disco), circle (círculo) o square (cuadrado). Ejemplo <UL type=circle> <LI>España <LI>Francia <LI>Italia <LI>Portugal </UL> Resultado °España °Francia °Italia °Portugal Las listas de definición: estas listas son mas que todo utilizadas para la creación de glosarios(la mayoría e veces), porque son de tipo diccionario o definición de algun término.Se utiliza para ellas la directiva <DL></DL>. El elemento marcado como término se antecede de la directiva <DT>, el marcado como definición se antecede de la directiva<DD>. Ejemplo Resultado <DL> <DT>FTP FTP <DD> Protocolo de transferencia de archivos Abreviatura de File Transfer Protocol <DT>WWW WWW <DD>World Wide Web World Wide Web </DL> Existen otros dos tipos de listas menos comunes. Las listas de Menú o Directorio se comportan igual que las listas sin numerar. La lista de Menú utiliza la directiva <MENU></MENU> y los elementos se anteceden de <LI>. El resultado es una lista sin numerar más "compacta" es decir, con menos espacio interlineal entre los elementos. La lista de Directorio utiliza la directiva <DIR> </DIR> y los elementos se anteceden de <LI>. Los elementos tienen un limite de 20 caracteres. Imágenes Las imágenes en un documento dan una mejor visibilidad a la página con la cual estamos trabajando, a demás de ser interactivas con los usuarios ya que pueden servir como enlaces hacia otras página o mostra sobre ella cualquier información. Las extensiones o formatos que reconocen los navegadores modernos son: Gif y Jpg; cualquier otro tipo de formato que se utilice no será mostrado a no ser de que se disponga de un programa externo que permite su visualización. La etiqueta que utilizan las imágenes es la directiva <img>, esta directiva no posee directiva de cierre, pero si contiene parámetros que le dan una mejor visualización a la imagen que vamos a utilizar, entre ellas se mencionan: Parámetros src= Indica el nombre del fichero gráfico a mostrar. alt= Mostrará el texto indicado en el caso de que el navegador utilizado para ver la página no sea capaz de visualizar la imagen. align= Las imágenes, por defecto, se comportan como si fueran un carácter, alineándose en la misma línea que el texto que las precede o que las sigue. border= Indica el tamaño del "borde" de la imagen. height= Indica el alto de la imagen en puntos o en porcentaje. width= Indica el ancho de la imagen en puntos o en porcentaje. hspace= Indica el número de espacios horizontales, en puntos, que separarán la imagen del texto que la siga y la anteceda. vspace= Indica el número de puntos verticales que separaran la imagen del texto que le siga y la anteceda. Además las imágenes nos pueden servir de enlaces hacia otras páginas o hacia a otros páginas fuera de nuestro documento. Las directivas que se utilizan se mencionaron anteriormente, por lo que se le agrega unicamente el parámetro "href" antes de la directiva img. Tablas Las tablas son otra forma de agrupar los datos de nuestro documento en filas y columnas, para poder observar de forma ordenada los datos contenidas en ellas. Estas nos permiten introducir información de cualquier tipo, ya sean imagenes, texto, enlaces, entre otros. La directiva que utilizan las tablas son:<TABLA></TABLA>, estas tambien utilizan parámetros especiales que nos sirven para dar forma y estilo a las tablas. Entre los parámetros más utilizados se encuentran: * bgcolor Especifica el color de fondo del elemento de la Tabla. * colspan Indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna. * rowspan Indica el número de filas que ocupará la celda. Por defecto ocupa una sola fila. * width Indica la anchura de la columna en puntos o en porcentaje en función del ancho de la ventana del navegador. Si no se indica este parámetro, el ancho se adecuará al tamaño de los contenidos. Este parámetro solo funciona en los navegadores modernos. * height Indica la altura de la tabla en puntos o en porcentaje en función del alto de la ventana del navegador. Si no se indica este parámetro, la altura se adecuará a la altura de los contenidos de las celdas. * cellspacing Indica el espacio en puntos que separa las celdas que estan dentro de la tabla. * cellpadding Indica el espacio en puntos que separa el borde de cada celda y el contenido de esta. * align Indica como se debe alinear el contenido de la celda, a la izquierda (LEFT), a la derecha (RIGHT), centrado (CENTER) o justificado (JUSTIFY). * valign Indica la alineación vertical del contenido de la celda, en la parte superior (TOP), en la inferior (BOTTOM), o en el centro (MIDDLE). Para definir las celdas que componen la tabla se utilizan las directivas<TD> y <TH>. <TD> indica una celda normal, y <TH> indica una celda de "cabecera", es decir, el contenido será resaltado en negrita y en un tamaño ligeramente superior al normal. Mapas Los mapas son imagenes que permiten tener diferentes hiperenlaces hacia otras páginas a través de una misma imagen. Para poder obtener un mapa es necesario tener un fichero con la imagen que utilizaremos como mapa, y tener una serie de instrucciones donde se indicaran las coordenadas de las partes de la imagen que nos serviran como enlaces. Actualmente hay dos maneras de hacer los mapas: a través de un programa externo (CGI) que pueda "procesar" el fichero .map en el que habremos metidos las órdenes, o a través de la directiva que soportan los Navegadores a partir de su versión 2 y 3 de Netscape y Explorer, respectivamente. En el primer caso el mapa se dice que corre en el servidor, ya que tiene que hacer llamadas a el y a su CGI para que funcione, en el segundo, corre en el cliente. Para el segundo caso, se utilizan las directivas <MAP></MAP> y <AREA>. La directiva <MAP> identifica al mapa y tiene el parámetro name para indicar el nombre del mapa. La directiva <AREA> define las áreas sensibles de la imagen y tiene los siguientes parámetros obligatorios: shape coords href Indica el tipo de área a definir Indica las coordenadas de la figura indicada con shape Indica la dirección a la que se accede si se pulsa en la zona delimitada por el área indicada. Los tipos de áreas pueden ser los siguientes: rect poly circle Area rectangular, se especifica las coordenadas de la esquina superior izquierda y las de la esquina inferior derecha. Polígono. Se deben especificar las coordenadas de todos los vértices del polígono. Círculo. Se debe especificar en primer lugar las coordenadas del centro del círculo y a continuación el valor del radio (en puntos). Es importante definir una última área que abarque la totalidad del gráfico para direccionar a una URL "por defecto", con el objeto de contemplar el caso de que no se pulse sobre un área definida. Frames Los frames son llamados a veces marcos, estos se utilizan para dividir una ventana en diferentes zonas, lo cual resulta una técnica muy útil para la manipulación de marcos por separado, lo cual nos permitirá mostrar en cada zona una página diferente a la de otra zona. Para definir los frames se utiliza la directiva <frameset></frameset> estas se adinan con el objeto de realizar una subdivisión. Este utiliza los siguientes parámetros:rows y cols las cuales serviran para crear las divisiones respectivas, ya sean filas o columnas, estas a su vez van acompañadas de un conjunto de números los que indican el porcentaje de tamaño de cada marco. La etiqueta del frameset, utiliza algunos parámetros, que sirven para definir la imagen del frameset, entre las que se destacan: * noresize Si se indica este parámetro, el usuario no podrá "redimensionar" los marcos con el visor. * scrolling Indica si se aplica una barra de desplazamiento al marco en el caso de que la página que se cargue en ella no quepa en los límites del marco. El valor "yes" muestra siempre la barra de desplazamiento, "no" no la muestra nunca (la zona de la página que no quepa en el marco no la veremos), y "auto" la muestra sólo en caso de que sea necesario para poder ver la página. * border Permite cambiar o quitar (0) el borde entre los marcos. * framespacing Permite cambiar el espacio entre el borde del marco y la página. * name * src Indica el nombre por el que nos referiremos a ese marco. El marco mostrará en principio el contenido del documento HTML que se indique. * marginwidth Indica, en puntos, el margen izquierdo y derecho del marco. * marginheight Indica, en puntos, el margen superior e inferior del marco. Dentro de las etiquetas del marco se encuentran alguanas de los parametros mencionados anteriormente, como lo son: name, src, marginwidth, marginheigth, scrolling y noreize. Las etiquetas, cuales van dentro del frameset, y dentro de estas las propiedades que se mencionaron anteriormente son: <frame></frame>. Pero existen algunos navegadores, los cuales no soportan a los frames, pero para esto existe una directiva especial, que se utiliza para poner un mensaje o no tomar encuenta las directivas del frame; estas directivas son:<noframeset></noframeset>. Glosario HTML HEAD BODY PRE Hyper Text Markup Language, es un sistema para estructurar documentos. Delimita la cabecera del documento. Indica el inicio y final de nuestra pagina Web. Obliga al visor a visualizar el texto tal y como ha sido escrito, respetando tabulaciones, espacios, retornos de carro, etc.. pero se verá con una fuente tipo máquina. LISTAS NUMERADAS representarán los elementos de la lista numerando cada uno de ellos según el lugar que ocupan en la lista. LISTAS SIN NUMERAR representan los elementos de la lista con un "topo" o marca que antecede a cada uno de ellos. LISTAS DE DEFINICION muestran los elementos tipo Diccionario, o sea, término y definición. HYPERENLACE Es un elemento de la página que hace que el navegador acceda a otro recurso, otra página Web, un archivo, etc... TABLAS Nos permiten representar cualquier elemento de nuestra página (texto, listas, imágenes, etc...) en diferentes filas y columnas separadas entre sí. MAPA Es una imagen que permite realizar diferentes Hyperenlaces en función de la "zona" de la imagen que se pulse. MARQUEE crea una marquesina con un texto en su interior que se desplaza. FRAMES Son una técnica para dividir la ventana del visor en diferentes zonas. DIRECTIVAS Son las mismas etiquetas, que se utilizan para encerrar una instrucción.
