ࡱ > 8 ; 3 4 5 6 7 [ bjbjć . s s $ Q Q Q 2 X $ V 7 u 7 Q j j j r+ Q j j j 8 Q s[ S " 0 u " l D : , j 7 7 j s O : j $ HYPERLINK "http://www.monografias.com/trabajos30/manual-html/manual-html.shtml" \l "qprograma" Qu programa debo usar? HYPERLINK "http://www.monografias.com/trabajos30/manual-html/manual-html.shtml" \l "qhtml" Qu es Html? HYPERLINK "http://www.monografias.com/trabajos30/manual-html/manual-html.shtml" \l "estruct" Estructura y etiquetas HYPERLINK "http://www.monografias.com/trabajos30/manual-html/manual-html.shtml" \l "primera" Mi primer pgina HYPERLINK "http://www.monografias.com/trabajos30/manual-html/manual-html.shtml" \l "estilos" Estilos de prrafos HYPERLINK "http://www.monografias.com/trabajos30/manual-html/manual-html.shtml" \l "alineacion" Alineacin HYPERLINK "http://www.monografias.com/trabajos30/manual-html/manual-html.shtml" \l "encabez" Encabezados HYPERLINK "http://www.monografias.com/trabajos30/manual-html/manual-html.shtml" \l "formato" Formato de texto HYPERLINK "http://www.monografias.com/trabajos30/manual-html/manual-html.shtml" \l "atrib" Atributos del texto HYPERLINK "http://www.monografias.com/trabajos30/manual-html/manual-html.shtml" \l "atribbody" Atributos de
HYPERLINK "http://www.monografias.com/trabajos30/manual-html/manual-html.shtml" \l "tiposlistas" Tipos de Listas HYPERLINK "http://www.monografias.com/trabajos30/manual-html/manual-html.shtml" \l "enlaces" Enlaces - Links HYPERLINK "http://www.monografias.com/trabajos30/manual-html/manual-html.shtml" \l "rnlacinternos" Enlaces internos y locales HYPERLINK "http://www.monografias.com/trabajos30/manual-html/manual-html.shtml" \l "enlacremotos" Enlaces remotos, e-mail y archivos HYPERLINK "http://www.monografias.com/trabajos30/manual-html/manual-html.shtml" \l "imagenes" Imgenes HYPERLINK "http://www.monografias.com/trabajos30/manual-html/manual-html.shtml" \l "tablas" Tablas HYPERLINK "http://www.monografias.com/trabajos30/manual-html/manual-html.shtml" \l "marques" Marquesina HYPERLINK "http://www.monografias.com/trabajos30/manual-html/manual-html.shtml" \l "formularios" Formularios HYPERLINK "http://www.monografias.com/trabajos30/manual-html/manual-html.shtml" \l "frames" Frames HYPERLINK "http://www.monografias.com/trabajos30/manual-html/manual-html.shtml" \l "insertaraudio" Insertar audio/video En este HYPERLINK "http://www.monografias.com/trabajos13/mapro/mapro.shtml" manual aprenders a crear pginas en HYPERLINK "http://www.monografias.com/trabajos7/html/html.shtml" Html, desde qu tipo de HYPERLINK "http://www.monografias.com/Computacion/Programacion/" programas podemos usar para la creacin de nuestra HYPERLINK "http://www.monografias.com/trabajos5/laweb/laweb.shtml" pgina web hasta como usar frames, introducir HYPERLINK "http://www.monografias.com/Arte_y_Cultura/Musica/" msica o videos en una pgina HYPERLINK "http://www.monografias.com/trabajos5/laweb/laweb.shtml" web.Ten paciencia, ya que algunas cosas no son difciles de entender, pero requieren ms esfuerzo. Si no llegaras a entender algo, trata de leerlo nuevamente. Incluye algunas HYPERLINK "http://www.monografias.com/trabajos3/color/color.shtml" imgenes(carpeta Images) y ejemplos (carpeta Samples) para que comprendas mejor. Para no confundirse, los cdigos estn en HYPERLINK "http://www.monografias.com/trabajos5/colarq/colarq.shtml" color verde oscuro y las etiquetas en negrita. Este manual no es copiado, lo hice yo, as que si lo ves en otro lugar avsame.Espero que te sea til. 1. Qu HYPERLINK "http://www.monografias.com/Computacion/Programacion/" programa debo usar? Para empezar a programar con Html, se necesita un programa en el cual podamos introducir nuestro HYPERLINK "http://www.monografias.com/trabajos12/eticaplic/eticaplic.shtml" cdigo y as, crear nuestra web. Existen varios programas (editores web) con los cuales puedes ayudarte, entre los ms conocidos estn HYPERLINK "http://macromedia.com/la/t_blank" DreamWeaver, HYPERLINK "http://microsoft.com/" Frontpage y HYPERLINK "http://www.macromedia.com/software/homesite/t_blank" HomeSite. Sin embargo, el mejor sigue siendo HYPERLINK "http://www.monografias.com/trabajos7/html/html.shtml" DreamWeaver por ser tan completo.Existe tambin la posibilidad de usar el HYPERLINK "../../../../Windows/NOTEPAD.EXE"Bloc de Notas, el cual yo recomendara para que te aprendes las etiquetas y no te las escribe el programa (yo aprend con el bloc de notas), pero la decisin es tuya.Bueno, ya sabemos que programa podemos utilizar, ahora veremos qu es exactamente el Html. Qu es Html? Html es HYPERLINK "http://www.monografias.com/trabajos16/desarrollo-del-lenguaje/desarrollo-del-lenguaje.shtml" el lenguaje con el que al escribir eitquetas creamos pginas web. Las pginas se visualizan por medio de un navegador ( HYPERLINK "http://www.monografias.com/Computacion/Internet/" Internet Explorer, Netscape...). Con Html puedes crear tablas, colocar imgenes, reproducir audio y/o HYPERLINK "http://www.monografias.com/trabajos10/vire/vire.shtml" video, etc.El Html no es el nico HYPERLINK "http://www.monografias.com/trabajos35/concepto-de-lenguaje/concepto-de-lenguaje.shtml" lenguaje que existe, es simplemente el bsico, ya que los dems lenguajes como HYPERLINK "http://www.monografias.com/trabajos11/winnet/winnet.shtml" Php, HYPERLINK "http://www.monografias.com/trabajos53/violencia-familiar-asp/violencia-familiar-asp.shtml" Asp, HYPERLINK "http://www.monografias.com/trabajos16/java/java.shtml" Javascript... tambin requieren de algunos cdigos de Html para HYPERLINK "http://www.monografias.com/trabajos35/el-poder/el-poder.shtml" poder funcionar.Debido a que hay distintos HYPERLINK "http://www.monografias.com/trabajos15/introduccion-informatica/introduccion-informatica.shtml" \l "navegad" navegadores, a veces se pueden omitir o agregar cdigos para que otros navegadores puedan tambin visualizar una pgina.Tal vez te estars preguntando Qu extensin es para lo HYPERLINK "http://www.monografias.com/trabajos7/arch/arch.shtml" archivos HTML?, bueno pues pueden ser dos tipos .htm - .html, cualquiera de las dos extensiones nos sirven, ya ser tu decisin cual poner.Ahora, comencemos con las etiquetas de Html. 3. HYPERLINK "http://www.monografias.com/trabajos15/todorov/todorov.shtml" \l "INTRO" Estructura y etiquetas Como dijimos, el Html es un lenguaje (de HYPERLINK "http://www.monografias.com/Computacion/Programacion/" programacin) que contiene etiquetas, las cuales nos permiten configurar nuestra web. Las etiquetas se escriben entre < > y (la mayora) tienen la etiqueta de cierre < / >, que es la misma etiqueta solo que con la barra / despus de <. Lo que est entre las dos etiquetas recibe el efecto.Para qu una etiqueta de cierre?, bueno es para limitar nuestra etiqueta, o sea, como no queremos que todo este subrayado (por ejemplo) donde ya no queremos que sea as escribimos el cierre. La etiqueta y su etiqueta de cierre, , indica subrayar un HYPERLINK "http://www.monografias.com/trabajos13/libapren/libapren.shtml" texto. Ejemplo: Texto subrayado Texto Normal, el resultado es: Texto subrayado Texto Normal Las partes del documento: Los HYPERLINK "http://www.monografias.com/trabajos14/comer/comer.shtml" documentos deben empezar con la etiqueta principal, que es y terminar con su etiqueta de cierre .El encabezado, que es el ttulo de la pgina se escribe entre las etiquetas y . El ttulo se escribe entre las etiquetasindica salto de lnea (dejar una lnea de separacin).El cdigo es este:
Bienvenido,
Estas en la mejor pgina.
La mejor msica solo aqu.
Copia y pega este cdigo en tu editor y gurdalo con un nombre con extensin .htm - .html (pag.html, por ejemplo). Nota: Te recomiendo no usar espacios, maysculas o caracteres especiales (# $ % ) en el nombre de tu HYPERLINK "http://www.monografias.com/trabajos7/arch/arch.shtml" archivo, para evitar HYPERLINK "http://www.monografias.com/trabajos15/calidad-serv/calidad-serv.shtml" \l "PLANT" problemas de HYPERLINK "http://www.monografias.com/trabajos14/textos-escrit/textos-escrit.shtml" lectura con el navegador.Podras utilizar guiones ( - ) o guiones bajos ( _ ) para reemplazar a los espacios y nombrar a tu archivo algo as: pagina_1.htmlYa tenemos una sencilla pgina creada con texto en negritas y con espacios. Ahora vemos en la siguiente imgen lo que hemos puesto: INCLUDEPICTURE "http://www.monografias.com/trabajos30/manual-html/Image1884.gif" \* MERGEFORMATINET Si haces click con el botn derecho del HYPERLINK "http://www.monografias.com/trabajos37/el-mouse/el-mouse.shtml" mouse y seleccionas Ver Cdigo Fuente (o en el men seleccionas Ver | Cdigo Fuente) puedes ver el cdigo (con el bloc de notas) que has escrito para esa pgina. Importante: La pgina principal de tu sitio, osea la primer pgina que aparece, debemos nombrarla index seguida de un punto y el tipo d extensin (en este caso .htm o .html),as: index.html o index.htm Mi primer pgina Estilos de prrafos Resulta comn querer hacer espacios entre prrafos. Antes vimos que la etiquieta dejaba una lnea en blanco y despus se escriba el texto, pero esta no es la nica etiqueta que puede hacer esto. Existe tambin la etiqueta
que deja una linea de espacio. Podemos repetir la etiqueta para dejar dos lneas de espacio. Ejemplo:
Texto 1
Texto 2
Texto3, resultado:
Texto 1Texto 2Texto 3
Tambin podemos colocar una lnea para separar, con la etiqueta
, que adems de dejar espacio en blanco, puede alinear o
Texto Centrado
, resultado: Texto Centrado Tambin podemos hacerlo con la otra etiqueta,Pases distribuidores
Reglas
Ordenamos por numeros
Ordenamos por letras
Ordenamos por nmeros romanos empezando por el 10
Ordenamos por nmeros romanos empezando por el 10 (en romano)
Pases distribuidores
o la propiedad align dentro de la imgen, que justifica la imagen del lado que deseamos a la vez que ponemos texto en el lado opuesto:
Ejemplo del atributo align en una imgen: Texto a la derecha de la imgen, porque el valor de align es 'left'....... Aqu sigue el texto que se pone despus de la imgen.. Resultado: Texto a la derecha de la imgen, porque el valor de align es 'left'.......Aqu sigue el texto quese pone despus de la imgen.. INCLUDEPICTURE "http://www.monografias.com/trabajos30/manual-html/Image1887.gif" \* MERGEFORMATINET Podramos colocar una imagen como enlace, poniendo la imagen entre la etiqueta :, resultado (click en la imgen): HYPERLINK "http://microsoft.com/" INCLUDEPICTURE "http://www.monografias.com/trabajos30/manual-html/Image1888.gif" \* MERGEFORMATINET Consejo: Pon el valor de 0 a la propiedad border, porque si la imgen es un enlace tendr el borde de color de los enlaces de la pgina.16. Tablas Podemos pensar que las tablas no son necesarias porque no vamos a crear ninguna agenda, ni listas, ni nada por el estilo. Pero las tablas no solamente hacen esto, nos permiten colocar en partes de una pgina o de un espacio, diferentes objetos. Un ejemplo de esto es un men, como seguramente has visto en muchas pginas, el men est en una tabla.Esto se logra con la etiqueta (crea columnas). Vemos un ejemplo para entender mejor:
| , que sirve para crear columnas, adems de las propiedades de la tabla (bgcolor, background, width, height y align) tiene otras:
valign: Podemos escoger si queremos que el texto est alineado arriba (top), en medio (middle) o abajo (bottom) en la celda (alineacin verticalmente).colspan: Expande una celda horizontalmente.rowspan: Expande una celda verticalmente.
Veamos un ejemplo con todos estos atributos:
| y que en vez de que las columnas sean celdas, sern tablas:
|