Scribd Logo
Carica

Benvenuto in Scribd!

  • Etiquetas HTML - Doc 0

    Caricato da

    Fernando Leon
    19 visualizzazioni5 pagine

    Titolo originale

    Etiquetas HTML.doc 0

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    ODT, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato ODT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    19 visualizzazioni5 pagine

    Etiquetas HTML - Doc 0

    Caricato da

    Fernando Leon

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato ODT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 5

    HTML

    ETIQUETAS BSICAS
    <html> </html> Abre y cierra documento html <head></head> Cabecera de la pgina web <title></title> Ttulo de la pgina web que aparece en la barra superior del navegador. <meta> Contenido no visible del documento html que proporciona informacin til sobre el propio documento, hay varios usos disponibles de esta etiqueta , los ms comunes son: <meta name="keywords" content="X, Y, Z"> Con keywords proporcionamos palabras clave para la meta-informacin que usa un buscador como Google para posicionar la pgina web, donde X, Y, Z son distintas palabras clave. <meta name="description" content="..."> Aqu indicaremos una descripcin del contenido de nuestro documento html , en el caso de ser el html principal , podriamos definir el contenido de todo el sitio web. <meta name="author" content="..."> Aqu indicamos el nombre del Autor. <meta name="copyright" content="..."> Aqu indicamos el copyright del documento. <body></body> Cuerpo de la pgina web <br> Salto de lnea <p></p> Prrafo <strong> </strong> Letra negrita <em></em> Letra sobresaltada (cursiva) <h1><h2><h3><h4><h5><h6> Ttulos predefinidos por el navegador, h1 el ms grande, h6 el ms pequeo. <a href=></a> Crear un hipervnculo o enlace a otro documento/imagen/video etc , se ha de escribir el enlace en el espacio entre comillas , dentro de esta etiqueta tambin podemos especificar donde queremos abrir el vnculo , si lo dejamos tal cual se abrira en la misma ventana cerrando el html actual , pero si ponemos [ target="_blank" ] se abriria en una nueva ventana , este atributo se colocara despus de cerrar comillas al definir el enlace quedando asi : <a href= target=_blank></a> si en vez de una ventana nueva deseamos abrir un vinculo en un marco predefinido , pondremos en nombre del marco en lugar de _blank. <img src="..." alt="..."> Define un archivo de imagen en el documento html , el atributo alt sirve para poner una descripcin de texto alternativa, otra cosa a tener en cuenta es que podemos usar una imagen para crear un enlace , simplemente embutiendo la etiqueta img dentro de la etiqueta a , de tal manera que quede asi : <a href=""><img src="" alt="..."></a> <a href="mailto:...>...</a> Enlace a un cliente de correo electrnico, tras mailto se pone la direccin de correo, despus podemos definir un cuerpo de mensaje y copias o copias ocultas por defecto al pinchar en el enlace , para eso ponemos el signo de interrogacin ? despus de la direccin de correo seguido de los siguientes atributos: subject es el ttulo del mensaje , cc es copia , bcc es copia oculta y body es el cuerpo del mensaje , para separar estos valores se hace con un smbolo & and y se coloca el atributo quedando as la etiqueta : <a href="mailto:...?subject=...&cc=...&bcc=...&body=...">...</a> <a href="#..."></a> Definir cadenas, en un mismo documento html , podemos crear enlaces que nos sitan en determinados sitios , por ejemplo cuando un texto es muy extenso , para definir el objetivo , usaremos la etiqueta <a name="...">...</a> que ha de ser el mismo nombre que pongamos en la etiqueta de vinculo donde se define, esta etiqueta tambin puede combinarse con la de hipervnculo para abrir un nuevo documento html e ir a la cadena en el mismo, de tal manera que quede asi : <a href=---.html#...">...</a> <ol>...</ol> Lista ordenada , para definir una lista ordenada , cada item de la lista se definir con <li>...</li>

    <ul>...</ul> Lista desordenada , funciona igual que la lista ordenada , muestra un puntito en cada item en lugar de un numero. Cabe destacar que podemos crear una lista dentro de otra y crear as una lista anidada, solo hay que colocar de manera ordenada las etiquetas. <dt>...</dt> Lista de definiciones , una lista con un sangrado que el navegador interpreta automticamente , usaremos la etiqueta <dd>...</dd> para definir los tems. <!--..............--> Comentarios , sirve para escribir cualquier cosa que el navegador no interpretara como cdigo , son notas del autor para si mismo o para otros desarrolladores.

    TABLAS
    <table></table> Crea una tabla en el documento html ,admite atributos como border que sirve para definir el grosor del borde de la tabla , quedando asi : <table border="...">, para aadir filas en la tabla creada usaremos la etiqueta <tr></tr>,para aadir celdas con informacin usaremos la etiqueta <td>...</td>,para crear un encabezado de tabla , usamos la etiqueta <th>...</th>,para crear un ttulo de tabla , usaremos la etiqueta <caption>...</caption> este se creara fuera de la tabla en la parte superior, las etiquetas <th> y <td> aceptan 2 tipos de atributos que sirven para unir celdas bien el columnas o bien en filas , si queremos unir varias celdas de filas quedara <th rowspan="X"> para unir columnas seria <td colspan="X"> donde X es el nmero de celdas que se unirn.

    CARACTERES ESPECIALES
    Estos son caracteres que el navegador interpreta como trozos de cdigo , y por lo tanto para ser representados como texto debemos ponerlos en su forma codificada como se puede observar en la siguiente tabla. CARACTER < > & (espacio en blanco) CDIGO &lt ; &gt; &amp; &quot; &nbsp; &copy; &euro;

    FORMULARIOS
    <form action="/X" method="Y"> Para crear un formulario , empezamos con la etiqueta form pero esta siempre ha de constar de un mnimo de atributos , en este caso el atributo action indica el nombre del documento donde van a ser registrados los datos introducidos (X) , mientras que el atributo method (Y) admite 2 valores , post o get , Normalmente un formulario se enva mediante post (los datos se envan con el cuerpo del formulario) En caso de utilizar get los datos se envan en la cabecera de la peticin de la pgina, utilizando el mtodo get estamos limitados en la cantidad de datos a enviar, no es as con el mtodo post. Una vez especificado el documento donde se guardaran los datos y el tipo de envo, creamos los recuadros donde se van a introducir los datos: <input type="text" name="..." size="X"> La etiqueta input permite crear un cuadro de texto, y el atributo type define de que tipo de cuadro de texto ser , para texto se utiliza text , el atributo name es para definir el nombre del recuadro de texto y el atributo size (X) es el nmero de caracteres mximos que se visualizaran en el registro , hay que tener muy en cuenta que el atributo name es necesario que sea diferente en cada etiqueta que creemos , ya que es el nombre que recoger mas tarde el sistema captor de los datos, si le aadimos el atributo value podemos crear un texto predefinido por defecto dentro del cuadro de texto , si deseamos aadir un orden especifico de foco, usaremos el atributo tabindex="X" donde X es un nmero comprendido entre 0 y 32767, el orden de foco es un orden que interpreta el navegador sobre los recuadros de texto al presionar la tecla tab. El atributo type de la etiqueta input tiene otros usos: <input type="submit" value="..."> En este caso el atributo type tiene el valor submit que define un botn que al pulsar enviar los datos , y el atributo value es el texto que aparecer escrito en dicho boton.

    <input type="password" name="" size="x"> En este caso el atributo type tiene el valor password que define que se trata de una contrasea personal por lo que aparecern asteriscos en lugar de los caracteres que escribamos. <input type="reset" value=""> En este caso el atributo type tiene el valor "reset" que define un boton que resetear todo lo que hayamos escrito previamente en cualquiera de los recuadros de texto. <input type="checkbox" name=""> En este caso el atributo type tiene el valor "checkbox" que define una casilla remarcable. <input type="radio" name="" value="X"> En este caso el atributo type tiene el valor radio que define una casilla remarcable de seleccin , esto quiere decir que cuando tengamos ms de 1, solo podremos seleccionar una al mismo tiempo siempre que estas tengan el mismo valor en name, se seleccionar la ultima casilla donde cliqueemos.

    <input type="button" name="..." value=" X "> En este caso el atributo type tiene el valor "button", que crea otro tipo ms de botn , pero este est diseado para trabajar con lenguaje Java, con el cual se le podr programas ciertas acciones. <input type="file" name="..."> En este caso el atributo type tiene el valor "file", Define un recuadro de upload o subida de archivos al servidor, para que esta etiqueta funcione, se debe haber colocado previamente el atributo enctype="multipart/form-data" en la etiqueta form de creacin de formulario. <textarea name="..." rows="X" cols="Y">...</textarea> Define un recuadro de texto o textarea donde podemos definir el tamao por defecto en columnas (X) y filas (Y). <select name=" ..."></select> Define un recuadro de seleccin de distintas opciones que podemos predefinir , para definir estas opciones , usaremos la etiqueta <option value="X">...</option> donde X es el nmero de posicin en la lista de valores, hay que tener en cuenta que todas las etiquetas <option> van dentro de la etiqueta <select> por lo que cerraremos esta despus de aadir todas las opciones, si queremos que salga alguna opcin marcada por defecto , pondremos selected detras de value antes de cerrar corchete , de tal forma que quede asi :<option value="X" selected>. <select name="...[]" size="X" multiple> Otro tipo de recuadro de seleccin pero esta vez nos permite escoger mltiples opciones de la lista , donde X es el nmero mximo visible de opciones al mismo tiempo , para aadir opciones volvemos a usar la etiqueta <option value="X">...</option> de igual forma que en el caso anterior. <optgroup label="..."> </optgroup> Define un grupo dentro de una lista de seleccin de objetos , podemos crear tantos grupos como deseemos. <button type="submit">...</button> Crea un botn , similar a la etiqueta <input type="submit" value="..."> que mencionamos antes , pero con la diferencia de que todo lo que escribamos en ... aparecer dentro del boton , incluida una imagen. <fieldset>...</fieldset> Esta etiqueta sirve para agrupar los controles de un formulario que deseemos dentro de un pequeo margen , todas las etiquetas de controles de formulario que se quiera que estn dentro de dicho cuadro , deben estar dentro de esta etiqueta. <legend>...</legend> Aade un ttulo al cuadro-margen creado por <fieldset>, esta etiqueta ira dentro de la etiqueta <fieldset>.

    ATRIBUTOS Y PROPIEDADES
    Atributo disabled , se puede aplicar en los elementos button, input, optgroup, option, select y textarea, sirve para desabilitar una opcion de la lista , es muy util si es aplicado con javascript para desabilitar ciertas opciones en funcion de los datos que disponga el usuario. Atributo value , se puede aplicar a varias de las etiquetas vistas anteriormente , genera un texto de titulo si se trata de un botn o un texto predefinido por defecto en el caso de recuadros de texto , textareas etc. Los controles de tipo text y password pueden limitar la cantidad de caracteres que puede ingresar el usuario a partir de la propiedad maxlength. Otra propiedad que podemos asignarle a los controles que creamos con el elemento input y tambin el elemento textarea es readonly, si definimos la propiedad readonly a un control el mismo es de solo lectura y no podemos modificar su contenido. Esta propiedad tiene uso cuando mediante un lenguaje de script (generalmente javascript) modificamos el control cambindolo de estado ante ciertos eventos, cuando un control tiene la propiedad readonly el

    control toma foco pero no se puede cambiar su contenido, la diferencia con la propiedad disabled es que con esta no toma foco el control y generalmente aparece con un color que indica que el control est deshabilitado. Hasta ahora siempre configuramos la propiedad action de la marca <form> con el nombre de un archivo que procesa los datos en el servidor, conociendo solo HTML la solucin es enviar los datos mediante el programa cliente de mail que est configurado en la computadora. Para esto inicializamos la propiedad action de la siguiente forma: <form action="mailto:X" method="post" enctype="text/plain"> donde X es un correo electrnico. Una ltima etiqueta relacionada con los formularios es la label. Hasta este momento siempre que queramos disponer un mensaje antes o despus de un control de formulario lo escribamos sin ms. Existe en HTML un elemento que permite asociar un texto con un control de formulario. Esto ser muy til si se accede desde un navegador no grfico o una persona ciega que utiliza un programa que lee en voz alta el contenido de la pgina, utilizando el elemento label podemos hacer una referencia entre el texto y el control de entrada de datos: <label for="nombre">Ingrese su nombre:</label> <input type="text" name="nombre" size="20" id="nombre"> Veamos que hemos agregado: Hemos definido la propiedad id a la marca input. El elemento label tiene su marca de comienzo y fin, entre medio se dispone el texto a mostrar. Para vincular esta label con el elemento input debemos inicializar la propiedad for con el nombre asignado a la propiedad id del elemento input. Ms adelante veremos que la propiedad id la pueden tener todos los elementos HTML y es de vital importancia para CSS (Hojas de Estilo) y JavaScript

    FRAMES
    Una pgina web echa por frames muestra ms de un archivo HTML en la misma ventana del navegador al mismo tiempo, estos se definen mediante columnas cols o filas rows y el tamao de estos puede definirse en nmero de pixeles o en un porcentaje % de la pantalla real que visualice el archivo HTML. <frameset cols="X"> Con esto definimos un archivo HTML con 3 frames que se dividen en columnas , segn el nmero de frames que queramos definir, se pondrn valores dentro del atributo cols , por ejemplo , si queremos tres frames de columnas, donde X debemos poner tres valores separados por coma, quedando cols="200,500,*" , esto nos indica que la primera columna tiene 200 pixels de ancho, la segunda tiene 500 pixels y la tercera que es un asterisco, rellena el espacio total que queda disponible, una cosa a tener en cuenta es que se pueden mezclar ambas maneras de definir el tamao, por ejemplo cols=200,50%,* de esta manera el primer frame tendr siempre 200 pixeles de ancho, el frame central tendra el 50% del tamao total de la pantalla y el tercero adoptar el nmero de pixeles restantes. <frameset rows="X"> Funciona igual que la etiqueta que acabamos de ver pero en este caso el atributo es rows por lo que en lugar de columnas el frame est definido en filas, la forma de definir el tamao tambin es similar al metodo que hemos visto. <frame src="X"> Esta etiqueta indica el documento que se abrir en los frames, debemos poner esta etiqueta tantas veces como frames tenemos definidos, el orden es el mismo al que dispusimos los frames, si por ejemplo hemos creado 3 frames, la primera etiqueta dispondr el documento en el primer frame empezando por la izquierda, la segunda etiqueta el segundo frame y la tercera etiqueta el tercer frame. Es posible crear un documento HTML de frames que combine columnas y filas, vamos a poner por ejemplo que queremos crear un documento con 2 columnas y que la segunda columna este dividida al mismo tiempo en 2 filas , para ello se definir primero un frameset a dos columnas y despus definiremos el contenido de la primera columna con un src, despus definiremos otro frameset, esta vez con dos filas, y por ultimo definiremos los contenidos de la primera y segunda fila consecutivamente. <noframes>...</noframes> Esta etiqueta dispone un texto que podemos definir en caso de que el navegador con el que el usuario esta accediendo a nuestra web no acepte frames. </frameset> Una vez definido el tipo de frames y su contenido , cerramos con esta etiqueta A la hora de crear un hipervinculo entre frames , es necesario atribuir el atributo name a la etiqueta <frameset> especificando as un nombre que luego usaremos como valor del atributo target definiendo de esta manera donde se mostrar el documento.

    Otros atributos de la etiqueta frame adems de name y src son:

    noresize Este atributo provoca que el frame no pueda ser redimensionado con el raton por ningn usuario de la web. Por ejemplo si disponemos un men de enlaces en un frame ubicado a la izquierda es muy probable que definamos la propiedad noresize ya que poca utilidad tiene agrandar o contraer esta regin de pantalla. frameborder Determina si los frames poseen borde o no , puede ser 0 1, por defecto tiene el valor 1, hay que tener en cuenta que aunque desactivemos los bordes, esto no desactiva el redimensionado del frame. scrolling Sirve para activar la barra de navegacin del frame, hay 3 posibles valores que son yes , no y auto , yes indica que siempre este visible la barra de navegacin , no indica que nunca estar visible y auto indica que el navegador la activar solo en caso de que sea necesario debido a su extensin , de no ser necesario la desactivar.

    <iframe></iframe> Es un tipo especial de frame que se define dentro de un documento HTML ya creado como si fuese una imagen , esta etiqueta tiene los siguientes atributos posibles : src Archivo a mostrar dentro del iframe. width Ancho en pxeles. height Alto en pxeles. frameborder Podemos asignarle los valores 1 o 0. Si vale 0 el borde no se muestra. scrolling Los valores posibles de esta propiedad son: "auto","yes","no". Por defecto est inicializada con el valor "auto". El valor auto significa que el navegador decide si se debe mostrar la barra de scroll. La mostrar solo si algn contenido del iframe no se ve. Si definimos el valor "yes" estamos indicando que siempre debe estar visible la barra de navegacin y por ltimo si asignamos el valor "no" estaremos indicando que nunca debe aparecer la barra de navegacin para dicho iframe. name Nombre del iframe si queremos acceder desde otra pgina. Por ejemplo si queremos actualizar su contenido desde un enlace ubicado en otra pgina.

    Potrebbero piacerti anche