CONCEPTOS BASICOS EN HTML

Ricardo DL Perez
Mind Map by Ricardo DL Perez, updated more than 1 year ago
Ricardo DL Perez
Created by Ricardo DL Perez about 6 years ago
39
0

Description

mmmmmmmmmmmmmmmmmmmmmmmmmmmm

Resource summary

CONCEPTOS BASICOS EN HTML
  1. IMAGENES
    1. Los documentos HTML se limitan a prever dentro de ellos un espacio en el que se insertan las imágenes solicitadas. La marca <IMG> no necesita cierre y su sintaxis correcta es: <IMG SRC="immagine.gif">
      1. El elemento <IMG> va acompañado de diversos atributos que facilitan su uso. Veamos ahora juntos cuáles son.
        1. ALT El uso de texto para comentar las imágenes es una regla fundamental que debemos observar en la creación de sitios web
          1. el uso de comentarios resuelve el problema y permite optimizar la página web. La sintaxis correcta de los comentarios es la siguiente: <IMG SRC="immagine.gif" ALT="Obra de K. Haring">
            1. WIDTH y HEIGHT En los ejemplos vistos hasta ahora, no hemos especificado las medidas de la imagen que el navegador se ha encargado de buscar automáticamente. Es posible definir la anchura y la altura de la imagen gracias a los atributos width y height, respectivamente: <IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 ALT="Obra de K. Haring">
              1. Mediante estos atributos podemos definir dimensiones diferentes de las que realmente tiene la imagen. En cualquier caso, es aconsejable insertar imágenes con su tamaño efectivo sobre todo si están en formato GIF, dado que, cuando se cambian las medidas, este formato pierde mucha calidad
                1. BORDER Con el atributo BORDER podemos aplicar un borde a la imagen. Los valores son numéricos y van expresados en píxel. Si impostamos el valor BORDER en 0, la imagen no va recuadrada. Cuando omitimos este atributo, el navegador no aplica ningún borde, pero si la imagen es también un enlace automáticamente se le asignará un BORDER=1. La sintaxis correcta es: <IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 ALT="Obra de K. Haring">
                  1. HSPACE y VSPACE Con estos dos atributos podemos establecer la distancia en píxel de la imagen a los objetos que se encuentran a los cuatro lados de la misma. HSPACE define la distancia de los lados derecho e izquierdo de la imagen a los objetos más cercanos (texto, imágenes, apliques, etc.). VSPACE define la distancia de los lados superior e inferior de la imagen a los objetos más cercanos (texto, imágenes, apliques, etc.). La sintaxis correcta es <IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 VSPACE=3 HSPACE=3 ALT="Obra de K. Haring"> Estos atributos resultan útiles cuando queremos distanciar la imagen de los objetos más cercanos.
                    1. ALIGN El atributo ALIGN define la posición de la imagen respecto al texto colocado inmediatamente antes o después de la misma. Existen varias opciones para el atributo ALIGN: ALIGN=top: alinea la primera línea de texto con la parte superior de la imagen. Para un ejemplo práctico, haz clic aquí. ALIGN=middle: alinea la primera línea del texto con el centro de la imagen. Para un ejemplo práctico, haz clic aquí. ALIGN=bottom: alinea la primera línea de texto con la parte inferior de la imagen. Para un ejemplo práctico, haz clic aquí. ALIGN=left: el texto se coloca a la derecha de la imagen empezando desde la parte superior de la misma. Para un ejemplo práctico, haz clic aquí. ALIGN=right: el texto se coloca a la izquierda de la imagen empezando desde la parte superior de la misma
    2. ALINEACION DE TEXTO
      1. Crear párrafos con <P> La marca <P> sirve para definir un nuevo párrafo de texto, indicando al navegador que el mismo debe empezar en una nueva línea y colocarse a la derecha, a la izquierda o centrado. Si no se especifica otra cosa, la marca <P> alinea el texto por defecto a la izquierda. Para indicar otros tipos de alineación, existen atributos específicos:
        1. <P ALIGN=left> Define un párrafo y alinea el texto a la izquierda(left). <P ALIGN=right> Define un párrafo y alinea el texto a la derecha (right). <P ALIGN=center> Define un párrafo y centra el texto (center).
          1. Salto de línea con <BR> <BR> es una marca de interrupción de línea. Tiene un funcionamiento similar a la marca de párrafo vista anteriormente, pero se diferencia porque no indica el inicio de un nuevo párrafo. Dicho de otro modo, su función es parecida a la de la tecla "enter" del teclado. Se usa sin marca de cierre.
            1. Disponer el texto con <DIV ALIGN> y <CENTER> El elemento <DIV> se utiliza para alinear horizontalmente el texto a la izquierda, a la derecha o en el centro de la página. El atributo ALIGN es fundamental a este respecto. <DIV ALIGN=left>Texto e imágenes a la izquierda</DIV> Mueve a la izquierda los elementos contenidos dentro de sus marcas. <DIV ALIGN=right>Texto e imágenes a la derecha</DIV> Mueve los elementos a la derecha. <DIV ALIGN=center>Texto e imágenes centrados</DIV> Centra los elementos.
              1. íneas horizontales con <HR> Las líneas horizontales constituyen un instrumento idóneo para dividir partes del documento y hacer más legible el texto. La sintaxis necesaria para su inserción en un documento HTML es la siguiente: <HR align="CENTER" size="2" width="400" color="Red" noshade> La marca HR (acrónimo de Horizontal Rule) no necesita cierre. Consta de diversos atributos: aling="CENTER": define la alineación de la línea (center, right, left). size="2": define el grosor, en píxel, de la línea. width="400": define la longitud horizontal, en píxel, de la línea. Puede también expresarse en tanto por cien respecto al espacio a disposición: width=80%. color="RED": define el color de la línea. noshade: si este atributo está presente, elimina el efecto 3D de la línea. Si no está presente, produce dicho efecto.
      2. FONDOS YCOLORES
        1. <BODY> El elemento <BODY> se coloca inmediatamente después del cierre de la marca </HEAD> y, en cualquier caso, dentro de los elemenos <HTML></HTML>; tiene una marca de apertura y una de cierre y delimitado por ellas figura el cuerpo del documento. Si el elemento <HEAD> contenía metainformación (es decir, datos no visualizados materialmente por el navegador) la función de la marca <BODY> es la de mostrar los objetos (texto, imágenes, sonidos, apliques, etc.) de la página. La sintaxis correcta del elemento <BODY> es la siguiente: <BODY> Contenido del documento </BODY>
          1. GCOLOR El atributo BGCOLOR imposta un fondo de un solo color. La sintaxis correcta es: <BODY BGCOLOR="red"> Es posible sustituir el nombre en inglés con valores hexadecimales. Por ejemplo, el color rojo (red) se sustituye de esta manera: <BODY BGCOLOR="#ff0000">
            1. BACKGROUND tiene una función similar a BGCOLOR, pero mientras el segundo muestra un tono único del color, el primero visualiza en el fondo una imagen en formato gráfico .gif o .jpg
              1. <BODY BACKGROUND="sfondo.gif"> El navegador visualiza la imagen sfondo.gif y la repite en todos los puntos disponibles de la pantalla. En otras palabras, no se limita a visualizar la imagen una sola vez, en el centro de la página por ejemplo, sino que llena todo espacio a disposición. Por esta razón, es absolutamente necesario crear un fondo que, si viene repetido, no presente interrupciones sino un aspecto lo más uniforme posible.
                1. TEXT Si no viene establecido diversamente, el color del texto del documento es el negro ya que los navegadores asignan este color por defecto. Gracias al atributo TEXT es posible asignar al texto un color distinto del negro. La sintaxis correcta es: <BODY BACKGROUND="sfondo.gif" TEXT="red">
                  1. LINK Si no viene establecido diversamente, el color de los enlaces (que todavía no se han visitado) es el azul. Gracias al atributo LINK podemos definir colores diferentes: <BODY BACKGROUND="sfondo.gif" LINK="red">
                    1. BGPROPERTIES Hablando del atributo BACKGROUND hemos resaltado el hecho de que las imágenes estén dispuestas ocupando toda la pantalla disponible.
                      1. Gracias a la propiedad BGPROPERTIES es posible hacer que el fondo permanezca inmóvil respecto al desplazamiento de página. La sintaxis correcta es: <BODY BACKGROUND="sfondo.gif" BGPROPERTIES="fixed">
        2. TABLAS
          1. La altura y anchura global de una tabla se indica dentro del atributo <TABLE>, que señala la apertura y cierre de una tabla. Las dimensiones se definen mediante WIDTH (ancho) y HEIGHT (alto) y pueden expresarse en píxel o en tantos por ciento respecto a la página: <TABLE WIDTH=500> </TABLE>
            1. El atributo <TABLE> genera la tabla, mientras que <TD> sirve para definir los campos presentes dentro de la tabla.
              1. <TABLE BORDER=1 WIDTH=300> <TD WIDTH=100> </TD> <TD WIDTH=100> </TD> <TD WIDTH=100> </TD> </TABLE>
                1. <TR>, que es una especie de "salto" de fila dentro de la tabla.
                  1. <TABLE BORDER=1 WIDTH=300> <TR> <TD WIDTH=100> </TD> <TD WIDTH=100> </TD> <TD WIDTH=100> </TD> </TR> <TR> <TD WIDTH=100> </TD> <TD WIDTH=100> </TD> <TD WIDTH=100> </TD> </TR> </TABLE>
                    1. El espacio entre los diversos campos de una tabla se define dentro de la marca </TABLE> con CELLSPACING=X y CELLPADDING=X (donde X es la distancia en píxel): <TABLE CELLPADDING=10 CELLSPACING=10> </TABLE>
          2. FORMULARIOS
            1. Elementos básicos para la realización de un formulario
              1. Abrir y cerrar un formulario <FORM ACTION="mailto:tulogin@tuservidor.pntic.mec.es" METHOD="post" ENCTYPE="text/plain"> ... </FORM>
                1. Entre las etiquetas anteriores deben ir todas las etiquetas que generan los botones, casillas, campos, etc. y también todas las etiquetas de HTML que permitan dar forma al formulario (tablas, colores, etc) El atributo ACTION nos indica la dirección de correo a la cual se van a enviar los datos del formulario. Así pues debes sustituir tulogin@tuservidor.pntic.mec.es por tu dirección de correo. Los atributos METHOD y ENCTYPE indican cómo se transferirán los datos (post, correo) y la codificación del texto El atributo HIDDEN no mostrará el campo en la página web, aunque sí enviará su contenido.
                  1. Entrada de texto de una línea <INPUT TYPE="text" SIZE="25" NAME="Nombre">
                    1. para introducir texto (en este caso el nombre)
                      1. Entrada de texto de varias líneas <TEXTAREA NAME="comentario" ROWS=3 COLS=50> Introduzca aquí sus comentarios </TEXTAREA>
                        1. Lista de opciones o menú desplegable <SELECT NAME="estudios"> <OPTION SELECTED> ESO <OPTION> Bachillerato <OPTION> Ciclos Formativos <OPTION> Garantía Social </SELECT>
                          1. Una variante de las listas de opciones son los menús con barras de desplazamiento <SELECT NAME="americanos" SIZE=6> <OPTION>España <OPTION>México <OPTION>Argentina <OPTION>Costa Rica <OPTION>Panamá <OPTION>Belice <OPTION>Honduras <OPTION>Bolivia <OPTION>Chile <OPTION>Paraguay </SELECT>
            2. MAPAS
              1. Los mapas sensibles son imágenes que presentan múltiples enlaces según la zona donde se sitúe el cursor. Para conseguir esto se divide la imagen en zonas mediante las coordenadas de las mismas.
                1. Primero conseguimos una imagen y la declaramos como mapa, en este caso con el nombre de directorio <IMG SRC="gifs/mapa.gif USEMAP="#directorio"
                  1. Abrimos el mapa recién creado <MAP NAME="directorio">
                    1. Definimos las zonas del mapa y los enlaces que le asignamos a cada una. <AREA SHAPE="forma de la zona" COORDS="coordenadas" HREF="URL asignada" ALT="comentario
                      1. el mapa Cerramos </MAP>
              2. ENLACES
                1. En general los enlaces tienen la siguiente estructura <A HREF="URL"> Texto del enlace</A>
                  1. En este caso la URL se sustituye por un marcador en la misma página. El marcador puede ser texto colocado en el lugar al que queremos saltar. No importa lo que sea ya que no se verá. Veamos un ejemplo para saltar al inicio de esta página. Escribiríamos en el lugar desde el que queremos saltar: <A HREF="#inicio"> Ir al Inicio</A> Y en el sitio exacto adonde queremos saltar, debemos poner la siguiente etiqueta: <A NAME="inicio"> </A>
                    1. Enlace a otra página local En este caso la URL se dará de forma relativa (igual que para poner un fondo a la página). Por ejemplo si tenemos dos páginas en el mismo directorio pagina1.htm y pagina2.htm y queremos poner un enlace desde la pagina1.htm a la pagina2.htm debemos escribir <a href="pagina2.htm">Ir a pagina2</a> Con esto es suficiente, no hay que crear ningún marcador a no ser que quieras ir a un sitio concreto de la pagina2.htm. En ese caso tendrías que poner en el sitio adonde quieres llegar de la pagina2.htm <a name="sitio"></a> y en la pagina1.htm <a href="pagina2.htm#sitio>Ir a sitio de la página 2</a>
                      1. Enlace a una dirección de Internet Ahora la URL debe darse de forma absoluta, tal como la ves en la ventana de dirección del navegador, es decir: <A HREF="http://centros4.pntic.mec.es/ies.de.cistierna">IES Cistierna</A> te llevaría a la página de entrada del IES Cistierna
                        1. Enlaces usando imágenes Para que una imagen sea un enlace a otra imagen se debe escribir: <a href="gifs/sky.jpg"><img src="gifs/ojo.gif" ></a>
                          1. Enlace con una dirección de correo Este es un enlace un poco diferente, veamos un ejemplo <A HREF="mailto: abercian@pntic.mec.es"> abercian@pntic.mec.es </A> que se ve como abercian@pntic.mec.es y que si lo pulsas se abre el programa de correo que tengas configurado, con la dirección en el campo correspo
                            1. Enlace que se abre en una nueva ventana Si quieres que la página que enlazas aparezca en una nueva ventana del navegador, solamente tienes que poner target="nombre" como atributo del enlace, es decir: <a href="index.htm" target="nueva">Indice</a> que se verá como Indice
                Show full summary Hide full summary

                Similar

                TEORIA DEL COLOR
                Maria Jose Espinoza
                Comunicación Social - Periodismo
                alexanderherrera
                k k
                rotce92
                URRACA
                Nuria Herrero
                Conocimiento científico
                Kharoll Sc
                MICOROORGANISMOS
                Jennifer Morales
                'The Merchant of Venice' - William Shakespeare
                cian.buckley
                Performance y Planificación de Vuelo
                Adriana Forero
                Linking Rossetti and A Doll's House
                Mrs Peacock
                mi mapa conceptual
                Magda Hernandez
                Sistema de procesamiento en Bases de datos
                Juan Manuel Ocampo Rodriguez