como crear una pagina web y manual html kit

Texto normal

(y la etiqueta de cierre). Ul proviene de las palabras en inglés unorder list (lista desordenadas). Cada elemento se pone con la etiqueta
• , sin etiqueta de cierre. Ejemplo:

  Países distribuidores

  • México
  • Estados Unidos
  • Canadá
  Resultado: Países distribuidores • México • Estados Unidos • Canadá También podemos cambiar el tipo de viñeta (el punto), hay tres tipos: o circle  square • disc Estos se pueden poner con el atributo type, ya sea en la etiqueta
  o
  • :
    • México
    • Estados Unidos
    • Canadá
    Resultado:  México o Estados Unidos  Canadá Listas Ordenadas: Se hacen con la etiqueta
    (y su etiqueta de cierre). Ol proviene de la palabra en inglés Ordered List (lista ordenada). Como la otra lista, cada elemento se pone con
    1. :

       Reglas

       1. No fumar
       2. No gritar
       3. Tener paciencia
       Resultado: Reglas 1. No fumar 2. No gritar 3. Tener paciencia Así como para la listas desordenadas se puede cambiar el tipo de viñeta, en listas ordenadas se puede cambiar el tipo de numeración que se indique en el atributo type y pueden ser: 1 Ordena con números a Ordena alfabéticamente en minúsculas A Ordena alfabéticamente en mayúsculas i Ordena con números romanos en minúsculas I Ordena con números romanos en mayúsculas

       Ordenamos por numeros

       1. Elemento 1
       2. Elemento 2

       Ordenamos por letras

       1. Elemento a
       2. Elemento b
       Resultado: Ordenamos por números I. Elemento I II. Elemento II Ordenamos por letras A. Elemento A B. Elemento B Si queremos que empiece a contar desde otro número, por ejemplo 10 o X en vez de 1 o I, lo haríamos con el atributo start seguido del número o letra por el que queramos empezar:

       Ordenamos por números romanos empezando por el 10

       10. Elemento 10
       11. Elemento 11

       Ordenamos por números romanos empezando por el 10 (en romano)

       10. Elemento x
       11. Elemento xi
       Resultado: Ordenamos por números romanos empezando por el 10 10. Elemento 10 11. Elemento 11 Ordenamos por números romanos empezando por el 10 (en romano) x. Elemento x xi. Element xi Podemos juntar los estilos y hacer una lista mixta:

       Países distribuidores

       • Candadá
         1. Toronto
         2. Calgary
       • Estados Unidos
         1. Nueva York
         2. Los Angeles
         3. Miami
       Resultado: Países distribuidores • Candadá 1. Toronto 2. Calgary • Estados Unidos 1. Nueva York 2. Los Angeles 3. Miami 12. Enlaces – Links Un enlace (o link) puede ser para ver otra página, descargar archivos o ir a otro sitio. Los enlaces se pueden identificar si el texto es de otro color o al pasar el mouse se produce un efecto (cambia de color, se subraya...). También podemos enlazar una imágen, es decir, que una imágen nos sirva como enlace y al presionar sobre esta nos lleve a otra página. Para hacer un enlace se usa la etiqueta (y la etiqueta de cierre), seguida de la propiedad href, que su valor será el enlace. Como dijimos, existen varios tipos de enlaces: • Internos: Nos llevan a otras partes dentro de la misma página. • Locales: Son los enlaces que nos dirigen a otras páginas del mismo sitio. • Remotos: Nos dirigen a otro sitio o a una página de otro sitio (sitio externo al nuestro). • E-Mail: Como dice, envía un mensaje a un e-mail. • Archivos: Sirven para descargar o ver archivos (exe, doc, pdf, mp3...). 13. Enlaces internos y locales Internos: Este tipo de enlaces nos manda a una parte de la página en la que estamos. Normalmente, se usan cuando una página es muy grande y se necesita ir a una parte específica. Esto se hace con la etiqueta , la propiedad href, después el signo de número ( # ) y el nombre que colocaremos en la parte donde queramos que vaya el visitante. Ejemplo: Ir al texto y en la parte donde queramos ir Ver el resultado. Locales: Los sitios web están formados de páginas, que muestran diferentes contenidos. Las propiedas de la etiqueta son las mismas que en los enlaces internos, pero sin el signo de número (a menos que en la otra página queramos abrirla e ir a una parte específica). Se tendría que escribir el nombre del archivo seguido de un punto y la extensión. Entre la etiqueta se deberá escribir el texto que aparecerá. Ejemplo: Ir al ejemplo de Body, resultado: Ir al ejemplo de Body. Si hay páginas en otro directorio (o carpeta), deberemos poner el nombre ce la carpeta, despúes una barra ( / ) y la página. Ejemplo: Ver logo del manual, resultado: Ver logo del manual. Si tenemos un archivo (cualquier tipo) en una subcarpeta y queremos enlazar a una imágen (o cualquier otro tipo de archivo) que está en la carpeta principal u otra subcarpeta, deberíamos poner en la ruta dos puntos ( .. ), seguida de la carpeta que contiene el archivo y después el nombre del archivo. Podemos ver en la siguiente imágen (ejemplo de con este manual): Para enlazar desde indice.html a excavando.gif, pones Enlace Para enlazar desde body.html a excavando.gif, pones Imagen Para ir a otra página e ir a una parte en específico, pones el nombre de la página seguido del signo de número y el nombre de la sección. Ejemplo: Ir al indice Existe un atributo más, que al pasar el mouse por algún enlace, aparezca un texto. El atributo es title y el valor es el texto que se quiera mostrar: Enlace Resultado (pon el mouse sobre el texto): Enlace 14. Enlaces remotos, e-mail y archivos Remotos: Este tipo de enlaces son para acceder a páginas que están fuera de nuestros sitios. Es igual que un enlace local, pero el URL (nombre del sitio) debe empezar por http://. Ejemplo: Microsoft, resultado: Microsoft. Pero también tiene 4 propiedades, junto con el atributo target para abrir de distintas formas un enlace: blank: Esta propiedad hace que la ventana se abra en una página por aparte, una ventana nueva. top: Se abre a pantalla completa, sin frames (páginas independientes, que veremos en los últimos capítuos). self: Esta propiedad abre el enlace en la misma página en la que está, es la propiedad por defecto. parent: El enlace se abre sobre su padre, si no hay un padre se abre en la misma página. E-mail: Estos enlaces nos dirigen a una dirección de mail. Se coloca el atributo mailto: después del href, seguido del mail. Ejemplo: [email protected], resultado: [email protected]. También se puede agregar el asunto y una copia para que se envíe a otro mail, con las propiedades subject?= y &cc. Ejemplo: [email protected], el resultado es el mismo aparentemente, pero pon el mouse sobre el siguiente enlace y ve la barra de estado (abajo donde normalmente dice Listo): [email protected] Importante: Este método no es muy común para enviar un e-mail, en el capítulo 18 se detalla más sobre esto. Archivos: Este tipo de enlace se usa para ver o descargar un archivo. Si es ZIP o EXE, al hacer click se muestra un cuadro de diálogo para ver o descargar, otros formatos, como de audio y/o video (mp3, mpg, avi, wav, mov, wmv...) abren el programa predeterminado del usuario para reproducirlo. Para evitar esto, podrías poner un mensaje que diga "Haz click con el botón derecho del mouse y selecciona 'Guardar destino como...' para descargar el archivo". Vamos a ver cual es el código para decargar el Msn Plus! (por ejempo): Descargar Msn Plus!, resultado: Descargar Msn Plus! 15. Imágenes Sin duda lo mejor de una página web son las imágenes. Como dijimos hay varios tipos de imágenes: JPG, BMP, GIF y PNG. La etiqueta para insertar una imágen es (no tiene etiqueta de cierre) y sus propiedades son: src: El nombre completo (con la extensión) de la imágen. border: El tamaño de borde para la imágen. alt: El texto que se muestra al pasar el mouse sobre la imágen. width: Ancho de la imágen (en pixeles o en porcentaje). height: Alto de la imágen (en pixeles o en porcentaje). vspace - hspace: Indica el espacio (en pixeles) libre de la imágen y lo que la rodea (texto, otra imágen...) Hagamos un ejemplo con todas estas propiedades: , resultado: Consejo: Intenta no agrandar tanto la imágen (especialmente con GIF) de su tamaño original, esto puede ocasionar que pierda un poco de resolución y calidad. Podemos alinear una imágen agregando un
       -

       o la propiedad align dentro de la imágen, que justifica la imagen del lado que deseamos a la vez que ponemos texto en el lado opuesto:

       

       

       Ejemplo del atributo align en una imágen: Texto a la derecha de la imágen, porque el valor de align es 'left'....... Aquí sigue el texto que se pone después de la imágen.. Resultado: Texto a la derecha de la imágen, porque el valor de align es 'left'....... Aquí sigue el texto que se pone después de la imágen.. Podríamos colocar una imagen como enlace, poniendo la imagen entre la etiqueta : , resultado (click en la imágen): Consejo: Pon el valor de 0 a la propiedad border, porque si la imágen es un enlace tendrá el borde de color de los enlaces de la página. 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 página o de un espacio, diferentes objetos. Un ejemplo de esto es un menú, como seguramente has visto en muchas páginas, el menú está en una tabla. Esto se logra con la etiqueta , la etiqueta (crea filas) y la etiqueta

       (crea columnas). Veámos un ejemplo para entender mejor: Celda 1, fila 1- -Celda 2, fila 1 Celda 1, fila 2- -Celda 2, fila 2 Resultado: Celda 1, fila 1- -Celda 2, fila 1 Celda 1, fila 2- -Celda 2, fila 2 Para la creación de una tabla hay varios atributos importantes: border: Indica el tamaño (en pixeles) del borde de la tabla (0 es sin borde). cellspacing: Indica el espacio entre las celdas y filas (en pixeles). cellpadding: El espacio desde el borde de la celda (en pixeles). bgcolor: El color de la tabla. background: Imagen de fondo de la tabla. width: Ancho de la tabla (en pixeles o porcentaje). height: Alto de la tabla (en pixeles o porcentaje), no es necesario ponerlo porque la tabla se hace tan alta como se necesita. bordercolor: Color del borde (si se puso un valor mayor o igual a 1 en border). align: Alinea el texto de una celda (right o center). Puedes ver la diferencia de cellpadding y cellspacing en la siguiente imagen: La etiqueta

       , que sirve para crear columnas, además 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 (alineación verticalmente). colspan: Expande una celda horizontalmente. rowspan: Expande una celda verticalmente. Veamos un ejemplo con todos estos atributos: Celda con colspan 2 Celda 1 Celda 2 Celda con rowspan="2" y valign="top" Fila 1 Fila 2 , resultado: Podemos crear tablas dentro de otras, dentro de un

       y que en vez de que las columnas sean celdas, serán tablas: 2 Tablas en dentro de un td Fila 1 Fila 2 Fila 3 Fila 4 Fila 1 Fila 2 , resultado: 17. Marquesina Las marquesinas son palabras o textos que se desplazan de un lado a otro, ya sea horizontal (izquierda a derecha o viceversa) o vertical (arriba hacia abajo o viceversa). Lo podemos usar para noticias, imágenes, enlaces... La etiqueta para esto es , pero también podemos agregar diferentes atributos: direction: Indica la dirección hacia donde se desplazará el texto, up (hacia arriba), down (abajo), left (izquierda) o right (derecha). width: Indica el ancho de la marquesina (en pixeles o porcentaje). height: Indica el alto de la marquesina (en pixeles o porcentaje). scrollAmount: Velocidad a la que se desplaza el texto. Ejemplo: Texto desplazado hacia arriba Ver el resultado. Hay un atributo más, que sirve para mover el texto de derecha a izquierda y de izquierda a derecha, pero con este el texto no desaparece: alternate=behavior, ejemplo: Texto de derecha a izquierda y de izquierda a derecha Ver el resultado. 18. Formularios Mediante el envío de formularios se pueden enviar datos de un artículo, de una encuesta o normalmente para enviar un mensaje a un e-mail. Para hacer esto deberíamos saber un poco sobre los lenguajes de tipo servidor, ASP o PHP, pero por el momento seguiremos con html. La etiqueta para un formulario, es , y sus atributos son los siguientes: method: Indica el método por el que se enviarán los datos. Existen 2: • POST: Envía datos por la entrada estándar STDIO (utilizado normalmente). • GET: Envía datos por medio de un URL (enlace). action: Indica el mail a donde se enviarán los datos o el nombre del archivo .php o .asp – Ejemplo: o ELEMENTOS: Para enviar datos en un formulario se necesitan cuadros de texto. La etiqueta que se usa es (no tiene etiqueta de cierre) y tiene varios atributos: type: Define el tipo de texto que se introduce en el cuadro, sus valores pueden ser: • text: Cualquier tipo de texto como el nombre, e-mail, dirección... • password: Se usa para ocultar las claves o datos confidenciales (al escribir en este, muestra *******. • hidden: Datos escondidos, asunto, e-mail de destino... • button: Crea un botón. • image: Hace que una imagen sea el enlace (la imagen se muestra con el atributo src). • submit: Envía el formulario. • reset: Borra los campos del formulario. value: Indica el valor de un atributo o el nombre que se mostrará (en el cuadro). name: Nombre del campo. maxlength: Indica el número de caracteres máximo para escribir. size: Indica el tamaño del cuadro de texto. Ejemplo: Nombre Password Resultado: Si queremos que una persona envíe algún comentario o sugerencia, ponemos un cuadro de texto grande, con la etiqueta . Sus atributos son: rows: Filas que tendrá el cuadro. cols: Columnas que tendrá el cuadro. Ejemplo: <textarea cols="30" rows="4" name="comentario"> Resultado: Lista de Opciones: Son listas en las que se pueden especificar una o varias opciones. Podríamos poner páises, asuntos... y que el usuario seleccione la adecuada. La etiqueta para hacer esto es , y cada opción se define por la etiqueta . Además, deben contener los atributos value y name, ejemplo: Argentina Brasil Chile Estados Unidos México Venezuela Resultado: Se puede seleccionar una opción por defecto, con el atributo selected en la opción que queramos. Podemos cambiar la lista de opciones, para que se pueda seleccionar más de una opción. Esto se hace con el atributo multiple y size (indica el número de valores a mostrar): Argentina Brasil Chile Estados Unidos México Venezuela Resultado: Nota: Manteniendo presionada la tecla Ctrl o Shift se puede seleccionar más de una opción de la lista. Botones de círculo: Si queremos que solo se pueda seleccionar una opción, además de las listas desplegables, tenemos los botones en forma de círculo. Se usa la etiqueta input, pero con el valor radio en el atributo type. Para seleccionar una opción por defecto, es el atributo checked: Argentina Brasil Chile E.U. México Venzuela Resultado: Cuadros de selección: Además de poner el valor multiple en las listas desplegables para poder seleccionar más de una opción, podemos utilizar el valor checkbox en el atributo type, y con el atributo checked se selecciona una (o varias) opción(es): Argentina Brasil Chile E.U. México Venezuela Resultado: Un ejemplo de un formulario: Nombre: E-Mail: País: Argentina Brasil Chile Estados Unidos México Venezuela Sexo: Hombre Mujer Urgente: Sí Comentario: Resultado: Y en nuestro e-mail recibiríamos algo asi: nombre: Leo email: pais: Mx sexo: hombre prioridad=on comentario: hola, quiero información. Nota: Si está activada un cuadro de selección, el valor al recibir el mail será on, si no se activó el valor será off. Consejo: Para alinear la descripción de los campos y los campos, podrías crear una tabla con dos columnas. Importante: En esta ocasión se abrirá el programa de envíos de mail por defecto de la computadora del usuario (suele ser Outlook Express). Si queremos que envíe los datos a un mail sin tener que abrir el programa, debemos crear un archivo PHP y en el atributo action poner el valor del archivo (esto lo puedes ver en el manual de PHP). 19. Frames Los frames (páginas independientes) son una manera de partir (o dividir) la página en distintos espacios (o áreas) independientes unos de los otros, de modo que en cada espacio se coloca una página distinta que se codifica en un fichero (.html en este caso) distinto. Cada frame contiene dentro, la página que le indiquemos, como cada uno es indepediente, tiene sus barras de desplazamiento (flechas de la derecha). Generalmente se usan los frames para poner el menú y que al presionar en algún enlace, siempre quede visible (el menú) y no desaparezca ni por unos segundos. Los frames pueden ser en columnas, en filas o de los dos. Un ejemplo de frames, es como se puede ver en las siguientes imágenes, la página está dividida en 3 frames y a la derecha explico lo que podría estar en cada frame: Para indicar en cuantas partes dividiremos la página, debemos indicar el tamaño de cada parte separado de una coma ( , ). Por ejemplo, si van a ser solo dos frames, indicaríamos así: 40%,60%. Así, el primer frame ocupará el 40% de la página, y el segundo el 60% de la página. La etiqueta principal es y sus atributos son: cols: Indica el tamaño de las columnas (en pixeles o porcentaje). rows: Indica el tamaño de las filas (en pixeles o porcentaje). framespacing: Indica el tamaño (en pixeles) entre cada frame. border: Indica el ancho del borde (en pixeles). frameborder: Indica si los frames tendrán bordes (Yes - No). Y la etiqueta donde debemos indicar la página que va a contener el frame es (no tiene etiqueta de cierre). Sus atributos son: src: Aquí escribimos la página que contiene el frame. name: Indicamos el nombre del frame. scrollbar: Indicar si el frame contiene las barras de desplazamiento o no (Yes o No). noresize: Bloquea el frame para que no podamos achicarlo o expandirlo. Debemos crear un archivo principal, que es el que contiene frames, y el título que se ponga en este, sera el que se mostrará. Los valores del atributo cols o rows podemos indicarlos en pixeles o en porcentaje, pero si se indica en pixeles, debido a que existen varios tipos de resoluciones, como 800x600 - 1024x78 (las más usadas), podemos utilizar un comodin ( * ) para cubrir el espacio que sobra. Veamos unos ejemplos para entender mejor: Creamos el archivo principal (index.html -por ejemplo), con dos frames que estarán en dos columnas, la primera ocupará el 20% y la segunda el 80%. Código: index.html: Ahora creamos los otros 2 archivos (pagina1.html y pagina2.html) que estarán en la página principal (index.html). En este caso solo pondremos unas palabras y cambiamos el color de fondo: pagina1.html: Texto de la p1 pagina2.html: Texto de la p2 El resultado lo puedes ver aquí. Como puedes ver, en el frame de la izquierda (rojo), no tiene barras de desplazamiento porque el valor del atributo scrolling (en el archivo principal) fue no. El de la derecha si tiene, porque el valor fue yes. Ahora vamos a poner 3 frames, pero en filas y el tamaño lo pondremos en pixeles, también eliminamos el borde entre frames. La primer fila ocupará 43 pixeles (de alto), la segunda colocamos un * (comodin) para que ocupe el espacio que sobre, y la tercer fila 200 pixeles. Creamos el archivo principal (frames.html -en este caso) que contiene las 3 páginas: frames.html frame1.html Texto de la p1 frame2.html Texto de la p2 Ir a la página del ejemplo de BODY frame3.html Texto de la p3 El resultado lo ves aquí. Importante: En el archivo principal (el que contiene los frames) no debe contener la etiqueta . Si queremos abrir una página en otro frame, debemos poner el nombre del frame (con el atributo name) igual que el valor del atributo target del enlace. Ejemplo: frames.html (archivo principal) frame2.html Texto de la p2 Ir a la página del ejemplo de BODY Ver resultado. Ahora un ejemplo de como hacer una página con 3 frames, dos de ellos son columnas y uno es fila. Ponemos 2 , en el de la fila, el segundo valor será el comodín ( * ) y cerraremos los dos hasta el final: Código: 3frames.html (archivo principal) Ver resultado. Hay otro tipo de frames que son para incluir una página dentro de otra. La etiqueta es Resultado: 1. Insertar audio/video A veces, es bueno que pongamos música en nuestra página web para que se vea mejor. También podemos también compartir algún video de nosotros o alguna película. Debemos colocar el archivo (de audio o video) en el mismo directorio (o carpeta) que está el archivo de la página (html -en este caso). Los códigos aquí escritos, son para reproducir solo con el Reproductor de Windows Media y visualizarlos con Internet Explorer. Debemos tener en cuenta varias cosas: • No toda la gente tiene internet de banda ancha, para cargar rápido el archivo. • Al subir un archivo a la web vía FTP (ve el manual de FTP), generalmente tarda unos minutos, a menos que tengas internet de 512Kbps (o más). • Si comprimes mucho un archivo (de audio o video), puede ser que al escucharlo (o verlo) esté con mala calidad. Existen 2 formas para colocar audio-video en una página web: bgsound: Con esta etiqueta (y los siguientes atributos) colocamos solamente archivos de audio, ésta etiqueta se pone entre la etiqueta .... Lo único que tenemos que hacer es indicar algunos valores. Es importante saber que con esta etiqueta, se reproduce un sonido y se puede repetir, pero no hay un botón en específico que detenga el sonido (aunque con Esc se detiene). Atributos: → src: Indica la ruta (donde está el archivo) y el nombre del archivo (por ej: musica.mp3). → loop: Indica si se repite o no el sonido, y si se repite indica cuantas veces se repite (el valor -1 indica reproducir infinitamente). → volume: El volúmen que se escuchará el sonido (mínimo -10,000 y máximo 0). Código: Ver el resultado. object: Con esta etiqueta se reproduce un tipo de archivo (audio y video). Podemos indicar que empiece la reproducción automáticamente o manualmente, el tamaño del "reproductor" que aparece en la página, mostrar u ocultar la barra del reproductor (botones de reproducir, detener...). Atributos: → classid="identificador del objeto": Indica la ruta del objeto o un componente para reproducir el archivo. → type="tipo de archivo": Indica el tipo de archivo. → width: Indica el ancho del reproductor. → standby: Muestra un mensaje mientras se carga el archivo. → height: Indica la altura del reproductor. Existen algunos parámetros para indicar el aspecto del reproductor y mostrar u ocultar objetos (aquí pongo los más importantes). El código de un parámetro es: → autostart: Reproducir automáticamente o no. → filename: Indica la ruta y nombre del archivo. → ShowStatusBar: Muestra u oculta la barra de estado del reproductor. Un ejemplo de un archivo de audio, mira los valores que están en negrita. Código: Ve el resultado. Ahora, un ejemplo de un video (Trailer de Harry Potter y El Cáliz de Fuego). Mira los valores que están en negrita: Ve el resultado. Fin del manual Autor: Leo Juszkiewicz [email protected] fuente:www.monografias.com Datos archivados del Taringa! original 0puntos 83visitas 0comentarios Actividad nueva en Posteamelo 0puntos 4visitas 0comentarios Dar puntos:+1+2+3+5+10 Dejá tu comentario Nombre PaísOtroArgentinaMéxicoChileColombiaEspañaVenezuelaUruguayPerúEcuador Comentario (usa **negrita** y *cursiva*) 0/2000 Publicar comentario Comentarios Archivados (0)Comentarios Nuevos (0) Autor del Post m mmetalhell🇦🇷 Usuario Puntos0 Posts3 Ver perfil →