HTML, siglas de HyperText Markup Language (Lenguaje de
Anuncio
HTML HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>). Cada etiqueta tiene su apertura y cierre. La de apertura tiene la forma <etiqueta> y la de cierre </etiqueta> Códigos HTML básicos <html>: define el inicio del documento HTML, le indica al navegador que lo que viene a continuación debe ser interpretado como código HTML. <head>: define la cabecera del documento HTML, esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario. Como por ejemplo el título de la ventana del navegador. <body>: define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador; dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes. Dentro del cuerpo <body> podemos encontrar numerosas etiquetas. Podemos ver la mínima estructura de una página html: <html> <head> <title>Aquí va el titulo</title> </head> <body> </body> </html> A fin de ser estrictos utilizar el código HTML en minúsculas. Notar la tabulación al aparecer una etiqueta de menor jerarquía. Atributos de etiqueta Los atributos permiten personalizar las etiquetas HTML. Luego del atributo se agrega un signo igual (=) y entre comillas un valor. Por ejemplo cambiar el color de fondo del cuerpo de página. <body bgcolor=”red”> Atributos de etiqueta más utilizados align alt bgcolor border class color colspan height href name size type valign width maxlength value title readonly checked id style rows cols Etiquetas más utilizadas <!-- --> <!DOCTYPE> <a> <br/> <div> <form> <h1> Inserta comentarios ocultos Establece el tipo de documento Inserta vínculos o marcadores Salto de línea Define un bloque de contenido Inserta un formulario Encabezado de nivel 1 <h2> <h3> <h4> <h5> <h6> <hr> <i> Encabezado de nivel 2 Encabezado de nivel 3 Encabezado de nivel 4 Encabezado de nivel 5 Encabezado de nivel 6 Línea o regla horizontal Muestra texto en itálica <img> <input> <li> <meta> <option> <p> <script> <select> <style> Inserta una imagen Muestra controles de entrada Define un artículo en una lista Información sobre el documento Opción en un control select Define un párrafo Contiene scripts Crea un control select Hojas de estilo visual <table> <td> <textarea> <strong> <th> <title> <tr> <ul> Inserta una tabla Celda regular de una tabla Entrada de texto de líneas negrita Encabezado de una tabla Título del documento Inserta una fila en una tabla Inserta una lista sin orden Elementos más utilizados Tablas Una tabla puede verse como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Las tablas, así como toda estructura en documentos HTML, son definidas usando tags. Una tabla simple puede ser insertada en un documento HTML usando tres tags <table>, <tr> y <td>. Estructura genérica de una tabla <table> <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> Identificar filas y columnas Ejemplo más cercano de una tabla <table border="1" width="220px"> <tr> <th>Titulo 1</th> <th>Título 2</th> <th>Título 3</th> </tr> <tr> <td>F1C1</td> <td>F1C2</td> <td>F1C3</td> </tr> <tr> <td>F2C1</td> <td>F2C2</td> <td>F2C3</td> </tr> </table> Notar como se van agregando atributos Formularios Permiten a los autores recibir información provista por los visitantes. Estos formularios pueden ser útiles para recolectar información personal, información de contacto, preferencias u opiniones, o cualquier tipo de entrada por parte del visitante que el autor pueda necesitar. Un formulario puede ser insertado en un documento HTML mediante el tag HTML form el cual actúa como contenedor para todos los elementos de entrada (input). Toda la información recolectada por un formulario puede ser entregada a un agente procesador que es usualmente especificado en el atributo "action". También se puede especificar cómo la información será enviada en el valor del atributo "method": "post" (los datos son adjuntados al cuerpo del formulario) o "get" (los datos son adjuntados a la URL (localizador uniforme de recursos)). Se supone que el agente procesador conoce y maneja el método de envío del formulario. Elementos de entrada (input) La mayoría de los elementos de entrada son visuales y pueden interactuar con el usuario. Su uso depende del tipo de control y también del tipo de información que pueden recolectar. Los elementos de entrada de un formulario pueden ser definidos usando tres tags: el tag HTML input, el tag HTML select y el tag HTML textarea. El atributo "name" de cada control será el nombre utilizado para identificar los datos para el agente procesador, y el valor dependerá de la naturaleza del control (algunas veces, como en las casillas de verificación o botones radio, será el contenido del atributo "value"). <form method="post" action="manejador.php"> <p>Ingresa texto: <input name="textoentrada" type="text" /></p> <p>Ingresa contrase&ntilde;a: <input name="contrasena" type="password" /></p> <p>Ingresa tus comentarios:<br /><textarea name="comentarios" rows="2" cols="30">Comentarios</textarea></p> <p>Selecciona tus intereses:<br /> <input name="cbipeliculas" type="checkbox" />Pel&iacute;culas<br /> <input name="cbiinternet" type="checkbox" />Internet </p> <p>Selecciona tus intereses:<br /> <input name="intereses" type="radio" value="rbipeliculas" />Pel&iacute;culas<br /> <input name="intereses" type="radio" value="rbiinternet" />Internet </p> <p>Selecciona una sola opci&oacute;n, como en los botones radio:<br /> <select name="entradaselect"> <optgroup label="Entradas de texto"> <option>De una sola l&iacute;nea</option> <option>Contrase&ntilde;a</option> <option>Multil&iacute;nea</option> </optgroup> <optgroup label="Opciones"> <option>Casillas de verificaci&oacute;n</option> <option>Botones radio</option> <option>Listas select</option> </optgroup> </select> </p> <p>Selecciona opciones como manteniendo presionada la tecla "Ctrl":<br /> <select name="entradaselect[]" multiple="multiple"> <optgroup label="Entradas de texto"> <option>De una sola l&iacute;nea</option> <option>Contrase&ntilde;a</option> <option>Multil&iacute;nea</option> </optgroup> <optgroup label="Opciones"> <option>Casillas de verificaci&oacute;n</option> <option>Botones radio</option> <option>Listas select</option> </optgroup> </select> </p> <p><input name="boton" type="button" value=”Confirma” /></p> </form> Identificar los distintos inputs del formulario Imágenes Sin duda uno de los aspectos más vistosos y atractivos de las páginas web es el grafismo. La introducción en nuestro texto de imágenes puede ayudarnos a explicar más fácilmente nuestra información y darle un aire mucho más estético. El abuso no obstante puede conducirnos a una sobrecarga que se traduce en una distracción para el navegante, quien tendrá más dificultad en encontrar la información necesaria. El uso de imágenes también tiene que ser realizado con cuidado porque aumentan el tiempo de carga de la página, lo que puede ser de un efecto nefasto si nuestro visitante no tiene una buena conexión o si es un poco impaciente. Por ello es recomendable siempre optimizar las imágenes para Internet, haciendo que su tamaño en bytes sea lo mínimo posible, para facilitar la descarga, pero sin que ello comprometa mucho su calidad. Etiqueta y su uso <img src="0001.jpg" width="640" height="480" alt="logo" border=”0” /> Vínculos Un vínculo tiene dos extremos (llamados en inglés anchors, anclas), y una dirección. El vínculo comienza en el "ancla de origen" (origen del vínculo) y apunta al "ancla destino" (destino del vínculo), que puede ser cualquier recurso de la Web (p.ej., una imagen, un videoclip, un archivo de sonido, un programa, un documento HTML, un elemento dentro de un documento HTML, etc.). Visitar un recurso vinculado <p>Encontrarás mucho más en el <a href="capitulo2.htm">capítulo dos</a></p> Vincula desde un texto <p><a href="capitulo2.htm" title="clic en la imagen"><img src="0001.jpg" width="640" height="480" border="0"/></a></p> Vincula desde una imagen <p><a href="capitulo2.htm" title="clic en la imagen"><input type="button" value="Ir" /></a></p> Vincula desde un botón Ejercitación Armar una página Web en HTML que contenga un formulario dentro de una tabla, una imagen y un vínculo.
