Computing"> para párrafos, 1 - Módulo HTML 1 - Módulo HTML 1 - Módulo HTML Los lenguajes HTML y CSS son los cimientos del funcionamiento de todos los sitios web. Cuando Probablemente estés pensando que manejar dos lenguajes va a ser doblemente complicado y Programación Web I 1 Hay de hecho un gran número de programas informáticos para el diseño de sitios web. ● Sublime Text Vamos a crear un archivo en Visual Studio Code con la extensión .html y comenzaremos a Etiquetas Las páginas HTML están llenas de las llamadas etiquetas. Aunque estas etiquetas no las pueden Las etiquetas son fáciles de identificar. Están rodeadas por «corchetes angulares» en otras ¿Para qué sirven? Indican el tipo de texto al que rodean. Quieren decir por ejemplo: «esto es el Etiquetas en pares Vas a ver una etiqueta que abre (<párrafo>) y una etiqueta que cierra ( </párrafo>) que indica Etiquetas huérfanas Estas son las etiquetas que se usan con más frecuencia para insertar un elemento en un punto Programación Web I 2 Los atributos son como las opciones de la etiqueta. Las complementan para proporcionar ¿Para qué sirve? Vamos a usar la etiqueta <imagen> que acabamos de ver. Por sí misma no tiene El navegador entonces entiende que tiene que mostrar la imagen que contiene el archivo En el caso de una etiqueta que funciona como una «pareja», los atributos únicamente se Volvamos a nuestro editor de texto y tipear el código fuente que está a continuación dentro del He añadido espacios al comienzo de algunas líneas para «cambiar» las etiquetas. Aunque esto Programación Web I 3 doctype La etiqueta</html> Esta es la etiqueta principal del código. Incluye el contenido completo de la página. ¡Como ven ● La cabecera <head>: esta sección proporciona información general sobre la página como La codificación ( charset) Este es el título de la página, ¡lo cual es probablemente el elemento más importante! Todas las Programación Web I 4 Insertar un comentario Lo pueden poner en la parte que quieras en el código fuente, no afecta a la página, pero lo Organizar el texto Vamos a conocer un buen número de etiquetas HTML. Algunas etiquetas se usan desde la Párrafos El contenido del sitio web entre las etiquetas <body></body>. Así que tenemos que poner Así que usaremos el mismo código del capítulo anterior y lo voy a añadir al párrafo: Programación Web I 5 En HTML si presionamos la tecla Enter no se crea una línea nueva en la forma en la que estamos ¡¡Todo el texto se muestra en la misma línea aunque haya un salto de línea en el código!! De hecho, si quieres escribir un párrafo solo necesitas usar una segunda etiqueta <p>. ¡Así que al final vuestro código HTML debería estar lleno de etiquetas de párrafos! Un ejemplo: Programación Web I 6 Es una etiqueta huérfana que solo se usa para indicar el salto de línea: <br>. La tienes que Títulos Ya que el contenido de tu página incluye varios párrafos, va a ser difícil que los visitantes se En HTML podemos seleccionar seis niveles de títulos diferentes. Con esto quiero decir que ● <h1> </h1>: significa «título muy importante". En general se usa para mostrar el título de Programación Web I 7 Crear una página web con títulos para ver cómo se ve: Programación Web I 8 Algunas palabras en los párrafos son algunas veces más importantes que otras y quieres que Enfatizar Es muy simple de usar, ¡todo lo que tienes que hacer es encerrar las palabras a enfatizar dentro Enfatizar considerablemente Para enfatizar considerablemente un texto, puedes usar la etiqueta <strong> que significa Sin lugar a dudas verás que el texto aparecerá en negrita. También en este caso la negrita es Programación Web I 9 La etiqueta <mark> se usa para resaltar visualmente una parte del texto. El extracto no se tiene Listas Listas no ordenadas ● Fresas Es un sistema que nos permite crear una lista sin ningún concepto de orden (no hay «primero» o Y ahora esto es lo que vamos a hacer: vamos a escribir cada elemento de la lista dentro de las Programación Web I 10 Lista ordenada Una lista ordenada funciona de la misma forma únicamente cambia la etiqueta: tienes que No cambies nada dentro de la lista: siempre tienes que usar las etiquetas <li></li> para Cómo es especialmente intuitivo este ejemplo (los resultados se muestran en la figura de abajo): Crear enlaces Como saben un sitio web está formado por varias páginas. ¿Cómo van de una página a otra? Estos enlaces se reconocen fácilmente en una página: están escritos de una forma diferente (de Programación Web I 11 Enlace a Google Para insertar un enlace, la etiqueta que vamos a usar es muy fácil de recordar: <a>. Sin embargo, Por ejemplo el código que está a continuación lleva a Google, localizado en la dirección Vamos a incluir este enlace en un párrafo. Entonces, así es cómo reproducir el ejemplo en la Por defecto el enlace se resalta en azul. Si ya abrieron la página el enlace se muestra en morado. Acabamos de aprender la forma de crear enlaces a sitios web que existen. Pero estoy seguro de Para empezar vamos a crear dos archivos que correspondan a dos páginas HTML diferentes. Programación Web I 12 Aquí tenemos el código que vamos a usar en nuestros archivos pagina1.html y pagina2.html. pagina1.html pagina2.html Las cosas se ponen un poco más difíciles si las páginas se encuentran en carpetas diferentes. Lo Un enlace a un hipervínculo Programación Web I 13 De hecho, pueden ser útiles para crear un enlace a un punto situado más abajo en la misma Para crear un hipervínculo nuevo, Puede ser cualquier etiqueta, por ejemplo un título. Para dar un nombre al hipervínculo, se utiliza el atributo id. Entonces podremos usarlo para Ahora solo tienes que crear un enlace como siempre, pero esta vez el atributo href incluirá Normalmente, si haces clic en el enlace, te llevará a un punto más abajo de la misma página Si no ocurre nada cuando hagamos clic sobre los enlaces, esto significa que no hay suficiente Programación Web I 14 La idea es crear un enlace que abra otra página Y que te lleve directamente a un hipervínculo En la práctica es muy fácil hacerlo: escribe el nombre de la página, seguido por una almohadilla Esta página contiene tres enlaces, cada uno de los cuales lleva a uno de los hipervínculos de la Un enlace se puede "obligar" a abrir una nueva ventana. Para hacer esto, se añade El procedimiento es exactamente el mismo que para enlazar a una página web, pero esta vez Por ejemplo, imaginemos que queremos descargar myfile.zip. Solo tenemos que colocar este Imágenes Programación Web I 15 Entonces, debes asegurarte de que tus páginas son legibles y rápidas de descargar. Formatos de imagen Cuando tienes "acceso" a una imagen, puedes guardarla en varios "formatos" diferentes. El JPEG Las imágenes en formato JPEG (Joint Photographic Expert Group) son muy comunes en la Red. Ten en cuenta que el formato JPEG reduce la calidad de la imagen ligeramente, de un modo Cuando se trata de una foto, normalmente no se detecta la pérdida de calidad. Si no es una foto, PNG PNG ( Portable Network Graphics) es el formato más nuevo de todos. Este formato es adecuado La compresión de fotos es más potente con JPEG. Una foto guardada en JPEG se cargará Si quieres evitarte problemas, acostúmbrate a guardar tus archivos con nombres en minúsculas, Puedes sustituir los espacios por un guión bajo ("_") como he hecho yo aquí. Programación Web I 16 ¿Cuál es la famosa etiqueta que utilizamos para insertar una imagen? ¡Es…<img />! Es una etiqueta huérfana (como<br />). Esto quiere decir que no tienes que introducir dos ● src: que indica la ubicación en la que quieres insertar la imagen. Puedes incluir una ruta Resumiendo, es muy fácil insertar una imagen siempre y cuando puedas indicar donde está Programación Web I 17 El atributo utilizado para mostrar una descripción emergente es el mismo que para los enlaces: Coloca el puntero del mouse sobre la foto para que aparezca la descripción emergente. Figuras ● imágenes Tomemos de nuevo el ejemplo de la captura de pantalla que vimos en el primer capítulo, que se Programación Web I 18 Una figura suele ir acompañada la mayoría de las veces de una leyenda. Para añadir una Por último, ten en cuenta que una figura puede tener varias imágenes. Este es un caso que lo Programación Web I 19 https://allthetags.com/ Estructurar tu página Estamos gradualmente llegando al punto. Si nuestra página web no se parece mucho a las En general, una página web consiste en un encabezamiento (parte superior derecha), menús de En este capítulo vamos a ver las nuevas etiquetas HTML para estructurar nuestra página. Estas De momento no vamos a hacer ningún diseño de página. De hecho, vamos a preparar nuestro Voy a mostrarte las nuevas etiquetas introducidas por HTML5 para estructurar nuestras páginas. <header>: el encabezado Programación Web I 20 Tu página puede contener varios encabezados. Si se divide en varias secciones, cada sección <footer>pie de página A diferencia del encabezado, el pie de página normalmente está en la parte inferior derecha del Programación Web I 21 La etiqueta <nav> tiene que incluir todos los enlaces de navegación principales de la página. Por El menú normalmente toma la forma de una lista con viñetas dentro de la etiqueta <nav>: En la figura siguiente, puedes ver el menú de navegación principal, que podría usar la etiqueta Etiqueta Nav Programación Web I 22 La etiqueta <section> incluye una porción del contenido según su tema. Generalmente cubre En la página de inicio de Wikipedia, hay varios bloques que podrían considerarse secciones de Etiqueta de sección Cada sección puede tener su nivel 1 título ( <h1>), y el encabezado puede también incluir el La etiqueta <aside> está diseñada para contener información adicional al documento visto. Esta Programación Web I 23 En Wikipedia, por ejemplo, el artículo que se está viendo a menudo tiene un bloque de Etiqueta aparte La etiqueta <article> se usa para cubrir una porción de la página que generalmente es Programación Web I 24 Programación Web I 25 Podías imaginar un segundo <header>, esta vez ubicado dentro de una <section>. En este Finalmente, una sección no tiene que contener necesariamente una etiqueta de <article> y Programación Web I 26 La primera etiqueta que te interesa es <table> </table>. Esta es la etiqueta que define el Es una etiqueta de bloque, así que tendrá que situarse fuera de un párrafo. Ejemplo: En HTML, las tablas se crean fila por fila. En cada fila (<tr>) se especifican los contenidos de las Contiene una etiqueta de fila (<tr>) que incluye un grupo de celdas (<td>) Por ejemplo, si quiero crear una tabla con dos filas y tres celdas por fila (tres columnas, por Programación Web I 27 La fila de encabezado Ahora que tenemos lo que buscábamos, vamos a añadir la fila de encabezado a la tabla. En el ● las celdas contienen etiquetas <th>, en lugar de las habituales etiquetas <td>; Programación Web I 28 Normalmente, todas las tablas deben tener título. El título informa rápidamente al visitante Programación Web I 29 Si la tabla es bastante grande, lo mejor es dividirla en varias partes. Para esto, las etiquetas HTML ¿Qué deberías poner en el pie de tabla? Si es una tabla larga, normalmente copiarás los 1. <thead> Programación Web I 30 Por lo tanto, este es el código que tienes que introducir para hacer una tabla en tres partes: Programación Web I 31 No tienes que utilizar necesariamente estas tres etiquetas (<thead>, <tbody>, <tfoot>) en todas En tablas «pequeñas», puedes mantener fácilmente la organización más simple que vimos al Combinar En la última película, puedes ver que las celdas se han combinado en una. Es exactamente el Para combinar, se añade un atributo a la etiqueta <td>. Hay dos tipos de combinar: ○ Combinar filas: en este caso, dos filas se combinan en una. Las celdas se Como sabes, tienes que darle un valor al atributo (ya sea colspan o rowspan). Tienes que Programación Web I 33 Aquí está el código HTML que combina las celdas correspondientes a la tabla de arriba Nota importante: puedes ver que la línea 19 solo contiene dos celdas en lugar de tres (solo hay Es un poco más complicado. En nuestro ejemplo, vamos a «revertir» el orden de nuestra tabla: Programación Web I 34 En resumen ● Una tabla se inserta con la etiqueta <table> y se define fila por fila utilizando la etiqueta Programación Web I 35 Sin embargo, estamos alcanzando los límites del lenguaje HTML, ya que después tienes que Mientras tanto, tenemos un gran número de etiquetas HTML por descubrir. Bienvenido al Crear un formulario Ten en cuenta que tienes que introducir etiquetas de bloque (como <p> </p>) dentro del Veamos un ejemplo para clarificar las cosas. Supón que un visitante acaba de incluir un Bien, ese es el problema o, más bien, esos son los problemas, que vamos a abordar: ● Problema n.º 1: ¿cómo enviar el texto introducido por el visitante? ¿De qué manera? Para aportar las soluciones a estos dos problemas, tienes que añadir dos atributos a la etiqueta ● method: este atributo especifica cómo se van a enviar los datos (solución al problema n.º Programación Web I 36 Por lo tanto, ahora vamos a completar la etiqueta <form> con los dos atributos que acabamos Para action, voy a introducir el nombre de una página ficticia en PHP (tratamiento.php). Esta Por el momento, no sabemos lo que pasa dentro de la página tratamiento.php: asumamos que Nuestra prioridad, por ahora, es descubrir en HTML/CSS cómo insertar campos de texto, botones Vamos a revisar varias etiquetas HTML que necesitamos para introducir texto en un formulario. ● El campo de texto de una línea: como su nombre sugiere, solo puedes introducir una Programación Web I 37 Para insertar un campo de texto en una línea, vamos a utilizar la etiqueta <input />. Encontraremos esta etiqueta varias veces más adelante del capítulo. En cada caso, el que Para dar un nombre a un elemento de formulario, se utiliza el atributo name. En este caso, vamos Así que vamos a intentar crear un formulario muy básico con nuestro campo de texto: Etiquetas Este campo de texto está muy bien, pero si tu visitante se lo encuentra, no sabrá lo que poner. Este código proporciona exactamente el mismo resultado que has visto en la imagen anterior. Programación Web I 38 Sí, de cierta manera. Personalmente, doy el mismo valor a name y a id; no supone ningún Para enlazar la etiqueta con el campo, se le tiene que dar un atributo for, que tiene el mismo En el siguiente ejemplo, el campo de texto contiene una indicación para entender lo que Prueba el resultado por ti mismo para ver cómo se comporta el campo. Mientras tanto, la Prueba el resultado por ti mismo para ver cómo se comporta el campo. Mientras tanto, la Programación Web I 39 Puedes hacer fácilmente que el campo de texto se comporte como un «campo de contraseña», Para crear un campo de texto de líneas múltiples, cambia la etiqueta: vamos a utilizar Como cualquier otro elemento de formulario, tienes que proporcionarle un nombre mediante Programación Web I 40 Como puedes ver, ¡es un poco pequeño! Afortunadamente, puedes cambiar el tamaño de ● En CSS: tan solo aplica las propiedades CSS width y height a <textarea>. Puedes prerrellenar <textarea> con un valor por defecto. En este caso, no utilizamos el atributo Programación Web I 41 ¡Así que te recomendamos usar estos nuevos campos de entrada desde ahora! En el mejor de Correo electrónico Puedes pedir a los visitantes que introduzcan una dirección de correo electrónico: El campo normalmente te parecerá el mismo, pero el navegador ahora sabe que el usuario Una URL Con el tipo url, puedes pedirle al visitante que escriba una dirección absoluta (normalmente Número de teléfono Número Programación Web I 42 El campo normalmente se muestra con unas pequeñas flechas para cambiar el valor (imagen Puedes personalizar la manera en la que funciona el campo con los siguientes atributos: Fecha Ejemplo: Opciones HTML incluye un montón de opciones que pueden usarse en el formulario. Son elementos que ● casillas de verificación; Programación Web I 43 ¿Cómo se crea una casilla de verificación? ¡No podría ser más fácil! Vamos a utilizar la etiqueta Casillas de verificación No olvides dar un nombre diferente a cada casilla de verificación. Más tarde, te permitirá Por último, recuerda que puedes tener una casilla marcada por defecto con el atributo checked: Todos los atributos normalmente tienen un valor. Sin embargo, en ese caso, añadir un valor no Campos de opciones. Programación Web I 44 La etiqueta que se utiliza siempre es <input />, esta vez con el valor radio en el atributo type. Botones de radio ¿Por qué pusiste el mismo nombre para cada opción? Solo para que el navegador sepa a qué Intenta eliminar los atributos name y verás que entonces puedes seleccionar todas las opciones. Te darás cuenta de que esta vez hemos elegido una id diferente al name. De hecho, dado que Si tienes dos campos de opciones diferentes, tienes que dar un name único a cada grupo, de esta Programación Web I 45 Las listas desplegables son otra manera elegante de seleccionar una opción a partir de varias Después, dentro de la etiqueta <select> </select>, vamos a insertar varias etiquetas <option> Programación Web I 46 Si quieres que una opción esté seleccionada por defecto, esta vez utiliza el atributo selected: También puedes agrupar las opciones con la etiqueta <optgroup> </optgroup>. En nuestro Programación Web I 47 Los grupos no pueden seleccionarse. Así que no podemos elegir «Europa» en nuestro ejemplo: Programación Web I 48 Programación Web I 49 Puedes situar el cursor automáticamente en uno de los campos del formulario con el atributo Entonces el navegador le indicará al usuario, si el campo está vacío cuando el formulario sea El botón de envío Así que ahora lo que nos queda por hacer es crear el botón de envío. De nuevo, la etiqueta ● type="submit": el botón de envío principal del formulario. Este es el que usarás más a Programación Web I 50 Puedes cambiar el texto mostrado dentro de los botones con el atributo value. Un botón de envío Cuando haces clic en el botón «Enviar», entonces el formulario te lleva a la página especificada El problema es que no puedes crear esta página exclusivamente en HTML. Tienes que Convenciones Para conocer las convenciones de uso de HTML5 ingresa al siguientes link -> Vídeo y audio De hecho, la manera en la que funcionan los vídeos es tan compleja que podría completar un Formatos de audio Programación Web I 51 ● MP3: ¡es imposible que no hayas oído hablar de él! Es uno de los más antiguos y también Ningún navegador maneja todos estos formatos al mismo tiempo. La compatibilidad con MP3 y Formatos de vídeo Programación Web I 52 ¿Qué códecs de vídeo son compatibles con qué navegadores? Una vez más, verás que es un http://www.mirovideoconverter.com/ Programación Web I 53 La etiqueta <audio> que vamos a descubrir la reconocen todos los navegadores nuevos, Si pruebas este código... ¡no verás nada! De hecho, el navegador solo descargará información Los navegadores para móviles, por ejemplo, nunca cargan música previamente para ahorrar Programación Web I 54 Te permite visualizar un mensaje o proporcionar una solución alternativa para los navegadores Los que tengan un navegador reciente no verán este mensaje. Sin embargo, los navegadores Tienes que incluir varias versiones del archivo de audio. En este caso, vamos a hacer nuestra Insertar un vídeo La etiqueta <video> que vamos a descubrir la reconocen todos los navegadores, incluyendo Solamente necesitas una única etiqueta <video> para insertar un vídeo en la página: Pero puede que te sientas de nuevo decepcionado si solo utilizas este código. ¡No hay controles Vamos a añadir algunos atributos (la mayoría de ellos son los mismos que para la etiqueta ● poster: se muestra otra imagen en lugar de la del vídeo hasta que se reproduzca. Por Programación Web I 55 No podemos forzar la carga previa del vídeo, siempre es el navegador el que decide. Las proporciones del vídeo siempre se preservan. Si fijas un ancho y un alto, el navegador se Aquí podéis ver algo de código que está un poco más completo: Programación Web I 56 ¿Cómo complacer a todos los navegadores si todos ellos reconocen diferentes formatos de Utilizas la etiqueta <source> dentro de la etiqueta <video> para incluir diferentes formatos. El Por el momento no es posible. De hecho, sí que hay una manera en Firefox, pero está un poco Bibliografía https://openclassrooms.com/en/courses/3339201-aprende-a-crear-tu-propio-sitio-web-con-html5 https://www.exasoluciones.com/inicio/tutoriales/html/guia-de-estilos-y-convenciones-de-codific Programación Web I 57
para saltos de línea. Finalmente, proporciona un ejemplo básico de código HTML para crear la estructura de una página.">
Cargado por
GastónMauricio Copyright:
Formatos disponibles
Cargado por
GastónMauricio Descripción original:
Derechos de autor
Formatos disponibles
Compartir este documento
Compartir o incrustar documentos
¿Le pareció útil este documento?
¿Este contenido es inapropiado?
Copyright:
Formatos disponibles
Cargado por
GastónMauricio Copyright:
Formatos disponibles
HTML
visitas un sitio web con un navegador deberías saber que detrás ruedas giran para permitir que
el sitio web se visualice.
va a llevar el doble de tiempo aprenderlos..., ¡pero no es así! Os puedo asegurar que si hay dos
lenguajes se diseñó así para hacer las cosas más fáciles. Estaremos lidiando con dos lenguajes
que se complementan entre ellos debido a tienen funciones distintas: ● HTML ( HyperText Markup Language (lenguaje de marcas de hipertexto)): apareció por
primera vez en 1991 cuando se lanzó la Red. Su función es gestionar y organizar el
contenido. Por lo tanto, usaremos el HTML para escribir lo que quieres que muestre la
página: texto, enlaces, imágenes, etc. Podes decir por ejemplo: «Este es el título, este es el
menú, aquí está el texto principal de la página, aquí está una imagen a mostrar, etc.».
● CSS( Cascading Style Sheets (hojas de estilo en cascada)): la función del CSS es
gestionar la apariencia del sitio web (trazado, posicionamiento, diseño, color, tamaño del
texto, etc.). Este lenguaje se introdujo para complementar al lenguaje HTML en 1996. Con o sin CSS
El editor de textoSe pueden usar los siguientes editores de texto entre otros:
● Atom
● Visual Studio CodeCrear una página web con el editor
aprender HTML.
ver aquellos que visiten vuestro sitio, ellas permiten que el navegador entienda que es lo que
tiene que mostrar.
palabras los símbolos < y >, como este: <etiqueta>
título de la página», «esto es una foto», «esto es un párrafo», etc.Hay dos tipos de etiquetas: etiquetas en pares y etiquetas huérfanas.
Se abren, contienen texto y se cierran posteriormente. Esta es la apariencia que tienen:
el final del párrafo. Para la computadora, esto significa que todo lo que no esté entre esas dos
etiquetas no es un párrafo.
determinado (por ejemplo una imagen). No es necesario definir el comienzo y el final de la
imagen. Solo tienes que decirle que «inserte una imagen aquí»Una etiqueta huérfana se escribe así:
Atributos
información adicional. El atributo se coloca después del nombre de la etiqueta que abre y
frecuentemente es un valor como este:
mucha utilidad. Podemos añadir un atributo que indique el nombre de la imagen a mostrar:
foto.jpg.
colocan en la etiqueta de apertura y no en la de cierre. Por ejemplo este código indica que la
cita es de Neil Armstrong y data del 21 de julio de 1969:Estructura básica de una página HTML5
editor. Este código corresponde a los fundamentos de una página web en HTML5:
no es obligatorio y no afecta a la forma en la que se muestra la página hace que el código fuente
sea más legible. Esto se llama indentación (sangría). En el editor simplemente presionando la
tecla Tab para obtener el mismo resultado.
Notarás que las etiquetas se abren y se cierran en un orden específico. Por ejemplo, la etiqueta
<html> es la primera que se abre y también la última que se cierra (al final del código con
</html>). Las etiquetas se tienen que cerrar en el orden inverso en el que se abrieron. Por
ejemplo: ● <html><body></body></html>: correcto. Una etiqueta que se abrió dentro de otra
etiqueta también se tiene que cerrar dentro de esa etiqueta.
● <html><body></html></body> : incorrecto, las etiquetas están entrecruzadas.La primera línea se denomina el doctype. Es fundamental porque indica que esto es
efectivamente una página web HTML.
No es realmente una etiqueta como las otras (empieza con un signo de exclamación) y se puede
considerar como una excepción que confirma la regla.
la etiqueta </html> de cierre está situada a la derecha del final del código!La cabecera <head> y el cuerpo <body>
Una página web se compone de dos partes:
su título, la codificación (para la gestión de caracteres especiales), etc. Esta sección suele
ser bastante corta. La información que contiene la cabecera no se muestra en la página y
es simplemente información general concebida para el ordenador. ¡Sin embargo, es muy
importante!
● El cuerpo<body>: es aquí donde se encuentra la parte principal de la página. Todo lo que
tecleamos aquí se mostrará en la pantalla. La mayor parte de nuestro código se escribirá
en el cuerpo.Esta etiqueta indica la codificación que se usa en el archivo .html.
Es lo que determina la forma en la que se van a mostrar los caracteres especiales (acentos,
caracteres japoneses y chinos, caracteres arábigos, etc.)El título principal de la página
páginas tienen que tener un título que describa lo que contienen.
Es aconsejable que el título se mantenga bastante corto (normalmente menos de 100
caracteres).El título no se muestra en la página sino en su parte superior (habitualmente en la pestaña del
navegador). Guardar la página web y abrirla en el navegador. Verán que el título se muestra en
la pestaña como se ve en la figura siguiente. El título de la página figura en la parte superior del navegador
Un comentario es una etiqueta HTML con un formato muy especial:
pueden usar como ayuda para que se situen en el código especialmente si es largo.
primera versión de HTML y otras se han introducido más recientemente en HTML5.El texto en una página web se escribe habitualmente en párrafos. En el lenguaje HTML la
etiqueta <p> se usa para delimitar los párrafos. ● <p> significa "comienzo del párrafo";
● </p>significa "fin del párrafo";
nuestro párrafo dentro de estas dos etiquetas y ¡finalmente tendremos nuestra primera página
web con texto!
Crear una línea nueva
acostumbrados. Prueben este código:
¡Hay una etiqueta que se llama «salto de línea»!
colocar dentro de un párrafo.Aquí tenemos la forma de usarla en un código:
sitúen. Es aquí donde los títulos ganan utilidad.
pueden decir «este es un título muy importante», «este es un título un poco menos importante»,
«este es un título mucho menos importante», etc. Por consiguiente, tienes seis etiquetas de
título diferentes:
la página al comienzo de la página.
● <h2> </h2>: significa "título importante".
● <h3> </h3>: asimismo, esto significa un título un poco menos importante (podéis decir
«subtítulo» si queréis).
● <h4> </h4>: el título es incluso menos importante.
● <h5> </h5>: el título no es importante.
● <h6> </h6>: el título no es nada importante.Un ejemplo de cómo usar los títulos en una página web
Resaltar
resalten. El HTML proporciona varias formas para resaltar el texto de la página.Para enfatizar el texto, tenéis que usar la etiqueta <em> </em>.
de estas etiquetas! Voy a volver a usar el ejemplo de hace un momento y a enfatizar algunas
palabras:
«énfasis fuerte» o si prefieres «importante». Se usa exactamente de la misma forma que <em>:
solo una consecuencia . El navegador eligió mostrar las palabras importantes en negrita para
hacer que destaquen más.La etiqueta <strong> no significa «negrita» sino «importante»
Marcado de texto
que considerar necesariamente importante, pero queréis que destaque del resto del texto. Esto
puede ser útil para resaltar texto que sea relevante, por ejemplo después de buscar en vuestra
página web.Por definición <mark> tiene el efecto de resaltar el texto.
Las listas normalmente nos permiten organizar el texto y ordenar la información.
Vamos a descubrir dos tipos de listas aquí:
● listas no ordenadas o listas con viñetas;
● listas ordenadas o listas numeradas.Una lista no ordenada tiene esta apariencia:
● Frambuesas
● Cerezas
«último»). Crear una lista no ordenada es muy sencillo. Simplemente usar la etiqueta <ul>
cerrada posteriormente con </ul>.Entonces, empezar introduciendo esto:
etiquetas <li></li>. Cada una de estas etiquetas tienen que estar situadas entre <ul> y </ul>.
Van a entender esto de inmediato con este ejemplo:
Una lista no ordenada
sustituir <ul></ul> por <ol></ol>.
delimitar los elementos de la lista.
¡Usando enlaces por supuesto!Un enlace a otro sitio web
forma predeterminada en azul y subrayados) y un cursor que se parece a una mano aparece
cuando se pone el mouse sobre ellos.
Sugiero que intenten codificar un enlace que los lleve a Google como se muestra en la figura
siguiente.
necesita un atributo, href, que indica la página a la que debería llevar el enlace.
http://www.google.com:
figura siguiente:
Veremos cómo cambiar este aspecto cuando estudiemos CSS.Un enlace a otra página de vuestro sitio web
que quisieran crear enlaces entre las páginas de vuestro sitio webDos páginas ubicadas en la misma carpeta
Como estoy inspirado os propongo que los llamemos pagina1.html y pagina2.html. Por tanto,
tendremos estos dos archivos en la misma carpeta (ver figura a continuación). Varios archivos HTML en la misma carpeta
¿Cómo hacer un enlace de la página 1 a la página 2 sin que tengamos una dirección en
http://? De hecho, si ambos enlaces están ubicados en la misma carpeta es fácil, simplemente
escribimos el nombre del archivo al que queremos movernos como el enlace de destino. Por
ejemplo: <a href="pagina2.html">. Esto se denomina enlace relativo.La página 2 (página de llegada) simplemente mostrará un mensaje que indicará que
efectivamente has llegado a la página 2:Dos páginas ubicadas en carpetas diferentes
ideal sería que no estuvieran muy lejos las unas de las otras (por ejemplo en una subcarpeta).Vamos a imaginar que la pagina2.html se encuentra en una subcarpeta denominada
contenido como en la figura siguiente. El archivo pagina2.html se encuentra en la carpeta contenido
En este caso el enlace debería estar escrito de esta forma:
Si hay varias carpetas deberíais escribir esto:
Un hipervínculo es una especie de punto de referencia que puedes incluir en tus páginas HTML
cuando son muy largas.
página para permitir a los visitantes saltar directamente a la parte que les interesa.
crear un enlace a este hipervínculo. Por ejemplo:
numeral (#) seguida del nombre del enlace. Ejemplo:
(siempre que la página contenga texto suficiente para que las barras de desplazamiento se
muevan automáticamente).
Este es un ejemplo de página con mucho texto que utiliza hipervínculos (he utilizado texto
antiguo para rellenar la página):
texto.
Enlace a un hipervínculo situado en otra página
situado más abajo de esta página.
( #), seguido del nombre del hipervínculo.Por ejemplo: <a href="anchors.html#rodillos">
... te llevará a la página anchors.html, directamente al hipervínculo llamado rodillos.
página del ejemplo anterior:Un enlace que abre una ventana nueva
target="_blank" a la etiqueta <a>.Un enlace para descargar un archivo
tenemos que indicar el nombre del archivo que queremos que se descargue.
archivo en la misma carpeta de nuestra página web (o en una subcarpeta) y crear un enlace a
este archivo:
En los sitios web se pueden utilizar varios formatos de imágenes diferentes y no debemos
elegirlos al azar. De hecho, a veces las imágenes son grandes y tardan mucho en descargarse, lo
que ralentiza el tiempo de carga de la página (¡mucho más que el texto!).¿Sabes qué es el formato de imagen?
tamaño de la imagen (en KB o incluso MB) variará dependiendo del formato seleccionado y la
calidad de la imagen cambiará.
Este formato está diseñado para reducir el tamaño de almacenamiento de las fotos (en otras
palabras, el tamaño del archivo asociado), que puede contener más de 16 millones de colores
diferentes. La siguiente ilustración es una imagen guardada en formato JPEG.Las imágenes JPEG se guardan con la extensión .jpg o .jpeg.
generalmente imperceptible. Esto es lo que le hace tan efectivo en la reducción del tamaño de
almacenamiento de las fotos.
la imagen puede parecer que está un poco borrosa. En este caso, es mejor usar el formato PNG.
para la mayoría de gráficos (me atrevería a decir que para "todo lo que no sea una foto"). El
formato PNG tiene dos grandes ventajas: puede ser transparente y no afectar a la calidad de la
imagen.
siempre más rápido que si se guarda en PNG. Por eso recomiendo que siempre mantengan el
formato JPEG en las fotos.Elige bien el nombre de tu imagen
sin espacios ni tildes, por ejemplo: mi_imagen.pngInsertar una imagen
Ahora volvamos al código HTML para descubrir cómo incluir imágenes en nuestras páginas
web.Insertar una imagen
etiquetas como en el caso de la mayoría de etiquetas que hemos visto hasta ahora. De hecho,
no tenemos que definir una porción de texto; lo único que queremos es colocar una imagen en
un punto específico.La etiqueta debe ir acompañada de dos atributos obligatorios:
absoluta (e.g.http://www.website.com/flor.png) o una ruta relativa (que es lo que suele
hacerse). Así que si la imagen está en la subcarpeta imagenes, tienes que introducir:
src="imagenes/flor.png"
● alt: que significa "texto alternativo". Un texto alternativo a la imagen, en otras palabras,
un texto corto que describe lo que contiene la imagen, debe indicarse siempre. Este
texto se mostrará en lugar de la imagen si esta última no se puede descargar (esto
ocurre), o en los navegadores de personas con discapacidad visual que
lamentablemente no pueden "ver" la imagen. También ayuda a los robots de motores de
búsqueda a buscar imágenes. Para la flor, por ejemplo, se debería escribir lo siguiente:
alt="Una flor"..Las imágenes deben colocarse obligatoriamente dentro de un párrafo (<p></p>) (No es
totalmente cierto, lo veremos más adelante). Aquí tenéis un ejemplo de imagen insertada:
ubicada, como aprendimos a hacer con los enlaces.
La mayor "dificultad" (si es que podemos llamarlo dificultad) es seleccionar el formato de
imagen adecuado. En este caso es una foto, por lo que obviamente se utiliza el formato JPEG.
Añadir una descripción emergente
title. Este atributo es opcional (al contrario que alt).Aquí tenemos un ejemplo:
Son elementos que realzan el texto para complementar la información de la página.
Las figuras pueden ser de diferentes tipos:
● código fuente;
● comillas;
● ...Crear una figura
muestra en la siguiente ilustración:
El programa NotepadEn HTML5, la etiqueta usada es<figure>. Aquí tenemos la forma de usarla:
leyenda, utiliza la etiqueta<figcaption>dentro de la etiqueta<figure>, así:La etiqueta<figure>tiene un papel principalmente semántico. Esto significa que le dice a la
computadora que la imagen tiene un significado y que es importante para la comprensión del
texto. Esto puede permitir a un programa recuperar todas las figuras del texto para
mencionarlas en una tabla de figuras, por ejemplo.
justifica:
Tabla periódica de HTML5
https://codepen.io/manz/pen/maVXvv
páginas que conocemos es porque aún no sabemos cómo diseñar la página.
navegación (en la parte superior o en los lados), varias secciones en el centro... y un pie de
página (abajo a la derecha).
etiquetas fueron introducidas por HTML5 (antes no estaban disponibles) y nos permitirán decir:
«Este es mi encabezado», «este es mi menú de navegación», etc.
documento HTML para ser capaces de hablar del diseño de la página web en los siguientes
capítulos.Etiquetas estructurales HTML5
Verás que no cambiará el aspecto de nuestra página mucho, pero estará bien construida y
perfecta para mostrar después.La mayoría de las páginas web normalmente tienen un encabezado. La mayoría suelen
contener un logo, un banner, el eslogan de tu web, etc.Tienes que colocar esta información dentro de la etiqueta <header>:
Etiqueta de encabezadoEl encabezado puede contener lo que quieras: imágenes, enlaces, textos, etc.
puede tener su propio <header>.
documento. Contiene información como enlaces de contacto, nombre del autor, informes
legales, etc.
Etiqueta de pie de página<nav>: enlaces de navegación principales
ejemplo, contendría el menú principal de tu página web.
<nav>.
<section>: una sección de la página
una porción del contenido en el centro de la página.
página (figura siguiente).
título <h1>. Cada uno de estos bloques es independiente de los demás, y es habitual encontrar
varios títulos <h1> en el código de la página web. Así «El título <h1> del <header>», «El título
<h1> de esta <section>», etc.<aside>: información adicional
información está normalmente situada en el lado (aunque no tiene que ser así).
La página podría contener varios bloques <aside>.
información adicional a la derecha. Así, la página que describe una estrella (siguiente figura)
contiene un bloque dando las características de la estrella (dimensiones, peso, etc.).<article>: un artículo independiente
independiente. Es una parte de la página que podría ser rechazada en otra página. Este es el
caso, por ejemplo, de las noticias (artículos en periódicos o blogs).
Etiqueta de artículo
Resumen Secciones de página identificadas por etiquetas
No cometas errores: este diagrama te ofrece un ejemplo de organización de página. Tú
decides si pones tu menú de navegación en la derecha, o en la parte de arriba, o tus etiquetas
<aside> arriba, etc.
caso, se consideraría la sección encabezado.
unas etiquetas <aside>. Usa solo estas etiquetas si las necesitas. Nada te impide crear
secciones que contengan sólo párrafos, por ejemplo.
TablasUna tabla simple
comienzo y final de una tabla.Aquí tienes dos etiquetas nuevas muy importantes:
● <tr> </tr>: define el comienzo y el final de una fila de la tabla.
● <td> </td>: define el comienzo y el final del contenido de una celda.
celdas (<td>).
Una tabla se construye básicamente tal y como se muestra en la siguiente ilustración.
tanto) tendré que escribir lo siguiente:
El resultado es un poco lúgubre (siguiente ilustración).
siguiente ejemplo, los encabezados son «Nombre», «Edad» y «País».
La fila de encabezado se ha creado con una etiqueta <tr> como hemos visto hasta ahora, pero
las celdas que contiene están esta vez enmarcadas por etiquetas <th> y no <td>.La fila de encabezado es fácil de reconocer por dos razones:
● es la primera fila de la tabla (hay que remarcarlo, aunque pueda parecer muy obvio).
Título de tabla
sobre el contenido de la tabla.
Nuestro ejemplo es tan solo una lista de gente.... pero ¿y qué? ¿Qué representa? Sin un título
para la tabla, estamos un poco perdidos, como puedes ver.Existe la etiqueta <caption>
Esta etiqueta se coloca al comienzo de la tabla, justo antes del encabezado. Es la etiqueta que
contiene el título de la tabla (imagen siguiente)
Una tabla estructuradaVamos a descubrir dos técnicas especiales:
● Las tablas grandes pueden dividirse en tres partes:
○ Encabezado;
○ Cuerpo de la tabla;
○ Pie de tabla.
● En algunas tablas, puede que necesites combinar celdas.Dividir una tabla grande
se utilizan para definir los tres «campos» de la tabla: ● el encabezado (al principio): se define con las etiquetas <thead></thead>;
● el cuerpo (en el centro): se define con las etiquetas <tbody></tbody>;
● el pie de tabla (al final): se define con las etiquetas <tfoot></tfoot>.
encabezados. Esto te permite ver a lo que se refiere cada columna, incluso al final de la tabla.
Fundamentalmente, una tabla se divide en tres partes como en el ejemplo siguiente.Es un poco confuso, pero es recomendable escribir las etiquetas en el orden siguiente:
2. <tfoot>
3. <tbody>
Por lo tanto, en el código, primero defines la parte superior, luego la parte final y, por último, la
parte principal (<tbody>). No te preocupes, el navegador se ocupará de mostrar cada elemento
en el lugar adecuado.
Programación Web I 32
IMPORTANTE
las tablas. De hecho, las utilizarás principalmente si la tabla es muy grande y necesitas
organizarla de forma más clara.
principio.En algunas tablas complejas, necesitarás «combinar» celdas.
¿Un ejemplo de combinar? El ejemplo de la tabla a continuación proporciona una lista de
películas y su audiencia prevista.
efecto que estamos intentando conseguir. ○ Combinar columnas: es lo que acabamos de hacer en este ejemplo. Las celdas se
combinan horizontalmente.Se utiliza el atributo colspan.
combinan verticalmente.Se utiliza el atributo rowspan.
especificar el número de celdas que quieres combinar. En nuestro ejemplo, hemos combinado
dos celdas: la celda de la columna «¿Para niños?» y la celda de la columna «¿Para
adolescentes?». De esta manera, tenemos que introducir:
que significa: «Esta celda es la combinación de dos celdas». Puedes combinar varias celdas a la
vez (tres, cuatro, cinco, etc. tantas como quieras).
dos etiquetas <td>). Es bastante normal, ya que he combinado las últimas dos celdas. <td
colspan="2"> especifica que esta celda ocupa el lugar de dos celdas a la vez.¿Y cómo se procede para combinar verticalmente con rowspan?
en lugar de poner los títulos de las películas a la izquierda, los pondremos arriba.Es otra forma de ver la tabla: en lugar de hacerla en altura, la hacemos en anchura.
En este caso colspan deja de ser adecuado y se debería usar rowspan:
Resultado: ¡las celdas se combinan verticalmente (ejemplo debajo)!
<tr>.
● Cada fila contiene celdas <td> (celdas normales) o<th> (celdas de encabezado).
● El título de la tabla se define mediante <caption>.
● Puedes añadir un borde a las celdas de la tabla mediante border. Para combinar bordes,
se usa la propiedad de CSS border-collapse.
● Una tabla puede dividirse en tres secciones: <thead> (encabezado), <tbody> (cuerpo) y
<tfoot> (pie de la tabla). El uso de estas etiquetas no es obligatorio.
● Puedes combinar celdas horizontalmente mediante el atributo colspan o verticalmente
con rowspan. Tienes que especificar cuántas celdas tienen que combinarse.
Formularios
Cualquier página HTML puede mejorarse con formularios interactivos que piden al visitante que
rellene información: introducir texto, seleccionar opciones, confirmar con un botón... ¡cualquier
cosa es posible!
analizar la información que el visitante ha introducido... y eso no se puede hacer en HTML. Como
vamos a ver, los resultados tienen que procesarse en otro lenguaje, como PHP, por ejemplo.
maravilloso mundo de los formularios. Un mundo en el que los botones, las casillas de
verificación y las listas desplegables coexisten en armoníaCuando tienes la repentina necesidad de insertar un formulario en tu página HTML, necesitas
empezar escribiendo una etiqueta <form> </form>. Esta es la etiqueta principal de los
formularios, y especifica su comienzo y su fin.
formulario si quieres incluir texto en él.
comentario en el formulario, como, por ejemplo, un mensaje que les gustaría publicar en el foro.
Este mensaje tiene que enviarse para que puedas recibirlo (lógico, ¿verdad?) y mostrarlo a otros
visitantes.
● Problema n.º 2: una vez que los datos se han enviado, ¿cómo los procesas? ¿quieres
recibir el mensaje automáticamente mediante correo electrónico, o prefieres un
programa que lo guarde en algún sitio y después lo muestre en una página que todo el
mundo lo pueda ver?
<form>:
1). Hay dos maneras de enviar datos a la Web:
○ method="get": este método normalmente es menos adecuado, ya que se limita a
255 caracteres. Esta particularidad proviene del hecho de que la información se
enviará a la dirección de la página (http://..., aunque este detalle en realidad
no tiene importancia por el momento. Te recomiendo que utilices la mayoría de
las veces el otro método: post.
○ method="post": es el método más usado en formularios, puesto que permite que
se envíe un montón de información. Los datos introducidos en el formulario no
van a través de la barra de direcciones.
● action: es la dirección de la página o programa que va a procesar la información
(solución al problema n.º 2). Esta página te enviará un correo electrónico con el mensaje
si eso es lo que quieres o, por otro lado, guardará el mensaje con todos los demás
mensajes en una base de datos.
Esto no se puede hacer en HTML y CSS, así que normalmente utilizamos otro lenguaje
sobre el que puede que hayas escuchado: PHP.
de ver.Para method, lo has adivinado, voy a introducir el valor post.
es la página que será solicitada cuando el visitante haga clic en el botón de envío en el
formulario.
esta página está lista y funcionando.
y casillas de verificación en nuestra página web. Y eso es lo que vamos a ver ahora.Campos de entrada básicos
Por lo tanto, regresemos a algo tangible.
Deberías saber que hay dos campos de texto diferentes.
única línea en él. Se utiliza para textos cortos, por ejemplo, un nombre de usuario.
● El campo de texto de líneas múltiples: este campo de texto permite introducir un gran
cantidad de texto en varias líneas, por ejemplo, una tesis sobre el uso de HTML en el
desarrollo de países del Sudeste de Asia (tan solo una sugerencia...).Campo de texto de una línea
Esta imagen a continuación muestra el aspecto de un campo de texto de una línea.
Un campo de texto de una línea
cambia es el valor de type.Para crear un campo de texto de una línea, tienes que introducir:
a asumir que al visitante se le ha pedido que vuelva a introducir su nombre de usuario:
Esta es exactamente la labor de la etiqueta <label>:Pero no es suficiente. Hay que enlazar la etiqueta con el campo de texto.
Para hacer esto, tienes que darle un nombre al campo de texto, no con el atributo name, sino con
el atributo id (que puede usarse con todas las etiquetas). ¿Un name y un id en el campo? ¿No sería redundante?
problema.
valor que el campo id... Lo mejor es verlo con un ejemplo:Algunos atributos adicionales
Puedes añadir varios atributos adicionales a la etiqueta <input/> para personalizar su
funcionamiento: ● Puedes aumentar el tamaño del campo con size.
● Puedes limitar el número de caracteres que pueden introducirse mediante maxlength.
● Puedes prerrellenar el campo con un valor por defecto con value.
● Puedes dar algún indicio de los contenidos del campo mediante placeholder. Esta
indicación desaparecerá tan pronto como el visitante haga clic dentro del campo.
debería escribirse; aunque el campo mide 30 caracteres, no puedes escribir más de 10 dentro:
siguiente imagen muestra el aspecto del campo en su estado inicial.
siguiente imagen muestra el aspecto del campo en su estado inicial. Un campo de texto con un indicador (marcador de posición)
Campo de contraseña
es decir, un campo donde no puedes ver en la pantalla los caracteres que se escriban. Para crear
este tipo de campo de entrada, utiliza el atributo type="password".Completaré mi formulario. Ahora le pide al visitante que escriba su nombre de usuario y su
contraseña:Verás que los caracteres de la contraseña no se visualizan en pantalla, como se muestra en la
siguiente imagen. Un campo de entrada de contraseña
<textarea> </textarea>.
name y utilizar label para explicar qué es.¡Y aquí está la imagen con el resultado (siguiente captura)!
Un campo de entrada pequeño de líneas múltiples
<textarea> de dos maneras distintas.
● Con atributos: puedes añadir los atributos rows y cols a la etiqueta <textarea>. El
primero especifica el número de líneas de texto que pueden mostrarse
simultáneamente y el segundo, el número de columnas. ¿Por qué abres la etiqueta <textarea> y la cierras de nuevo inmediatamente después?
value: simplemente escribimos el texto por defecto entre la etiqueta de apertura y la de cierre.La siguiente imagen muestra el resultado.
Un campo de entrada de líneas múltiples completado previamente
Campos de entrada mejorados
HTML5 incluye muchas características nuevas en los formularios. De hecho, han aflorado nuevos
tipos de campos con esta versión. Tan solo dale al atributo type de la etiqueta <input/> uno de
los nuevos valores disponibles. ¡Echemos un vistazo rápido! Todos los navegadores todavía no reconocen estos campos de entrada mejorados. En su
lugar, los navegadores antiguos mostrarán un campo de texto simple de una sola línea
(como si hubieras escrito type="text"). Que quede entre nosotros, no pasa nada: los nuevos
navegadores pueden disfrutar de las últimas funciones, mientras que los navegadores
antiguos muestran un campo de texto de sustitución que encaja igual de bien.
los casos, tus visitantes se beneficiarán de estas nuevas funciones y, en el peor, no verán
ningún problema.
tiene que escribir una dirección de correo electrónico. Puede dar una indicación si la dirección
no es un correo electrónico, que es lo que hace Firefox (ejemplo a continuación). Un correo electrónico escrito incorrectamente aparece enmarcado en rojo
comienza con http://):Mismo principio: si el campo no parece diferente en tu ordenador, ten en cuenta que ha
entendido eficazmente que se supone que el visitante debe escribir una dirección.Este campo se usa para escribir números de teléfono.
Este campo se utiliza para escribir un número entero:
siguiente). Campo de entrada de números
● min: valor mínimo permitido.
● max: valor máximo permitido.
● step: es el desplazamiento. Si especificas un «step» de 2, el campo solo aceptará valores
de 2 en 2 (por ejemplo: 0, 2, 4, 6, etc.).Hay varios tipos de campos de selección de fecha:
● date: para la fecha (05/08/1985, por ejemplo);
● time: para la hora (13:37, por ejemplo);
● week: para la semana;
● month: para el mes;
● datetime: para la fecha y la hora (con administración de zona horaria);
● datetime-local para la fecha y la hora (sin administración de zona horaria.Como puedes ver, ¡hay muchas opciones!
requieren que el visitante elija a partir de una lista de posibilidades. Vamos a repasar:
● campos de opciones;
● listas desplegables.
Casillas de verificación
<input />, pero esta vez especificando el tipo checkbox:¡Añade <label> en la posición correcta, ¡y ya lo tienes!
La siguiente imagen muestra el resultado.
identificar las que ha seleccionado el visitante.
es necesario: la presencia del atributo es suficiente para hacer que el ordenador entienda que
la casilla tiene que estar marcada.Si te molesta, recuerda que puedes asignar cualquier valor al atributo (algunos
administradores de páginas algunas veces escriben checked="checked", pero es un poco
redundante). La casilla se marcará sin orden.
Los campos de opciones te permiten elegir una (y solamente una) opción de una lista de
posibilidades. De alguna manera, parecen casillas de verificación pero hay una ligera dificultad
adicional: tienen que estar organizadas como grupos. Aunque las opciones en el mismo grupo
tienen el mismo (nombre), cada opción tienen que tener un (valor) diferente.El siguiente ejemplo lo aclarará:
Lo que nos da el resultado de la siguiente imagen.
«grupo» pertenece el botón.
Sin embargo, no es lo que queremos, por esa razón los «enlazamos» al darles el mismo nombre.
los valores de name son los mismos, no podríamos haber diferenciado las ids (¡y sabes muy bien
que una id tiene que ser única!). Por esta razón hemos elegido dar a id el mismo valor que a
value.
manera:
Listas desplegables
posibilidades. Funcionan de una manera ligeramente distinta. Vamos a utilizar la etiqueta
<select> </select>, que especifica el comienzo y el final de la lista desplegable. Añadimos el
atributo name a la etiqueta para darle un nombre a la lista.
</option> (una para cada opción posible). Añadimos un atributo value a cada uno de ellas para
identificar lo que el visitante ha elegido.Aquí podéis ver un ejemplo de uso:
El resultado se muestra en la siguiente imagen. Una lista desplegable
ejemplo, ¿por qué no separas países según su continente?
El resultado se muestra en la siguiente imagen. Opciones agrupadas por continente
solo los nombres de países pueden seleccionarse.
El resultado se muestra en la siguiente imagen.
Los campos están agrupadosSeleccionar un campo automáticamente
autofocus. Una vez que el visitante cargue la página, el cursor aparece en este campo.Por ejemplo, para situar el cursor por defecto en el campo name:
Hacer un campo obligatorio
Puedes hacer un campo obligatorio al asignarle el atributo required.
enviado, que necesita completarlo.
<input /> viene a nuestro rescate. Hay cuatro versiones:
menudo. El usuario será redireccionado a la página especificada en el atributo action
del formulario.
● type="reset": restablece el formulario
● type="image": equivalente al botón submit, pero esta vez mostrado como una imagen.
Añade el atributo src para especificar la URL de la imagen.
● type="button": botón genérico, que no tendrá efecto alguno (por defecto). En general,
este botón se maneja en JavaScript para desarrollar acciones en la página. No lo
utilizaremos aquí.Para crear un botón de envío, entonces escribimos, por ejemplo:
Lo que nos da el resultado de la siguiente imagen.
en el atributo action. Recuerda, imaginamos una página ficticia: tratamiento.php.
aprender un nuevo lenguaje, como PHP, para ser capaz de «recuperar» la información
introducida y decidir lo que hacer con ella.
https://www.exasoluciones.com/inicio/tutoriales/html/guia-de-estilos-y-convenciones-de-codific
acion-html5Se crearon dos nuevas etiquetas estándar en HTML5: <video> y <audio>
Formatos de vídeo y audio
Cuando hablamos de imágenes y de la etiqueta <img>, comenzamos rápidamente a repasar
varios formatos de imagen (JPEG, PNG, GIF, etc.) Para vídeo y audio, haremos lo mismo, pero es
más complicado.
curso entero. Pero aquí estamos hablando sobre HTML, no vamos a pasar las próximas noches
explorando la complejidad de la codificación de vídeo. Así que voy a simplificar las cosas y solo
voy a decirte lo que necesitas saber.
Para reproducir música o cualquier sonido, se pueden utilizar muchos formatos. La mayoría de
ellos son comprimidos (como lo son las imágenes en JPEG, PNG y GIF), lo que reduce su tamaño
de almacenamiento:
uno de los formatos más compatibles (todos los dispositivos pueden leer MP3), así que
aún se utiliza mucho hoy en día.
● AAC: lo utiliza principalmente Apple con iTunes, y es un formato de buena calidad. Los
iPod, iPhone y iPad pueden leerlo sin problemas.
● OGG: el formato Ogg Vorbis se utiliza ampliamente en el mundo del software libre y, en
particular, en Linux. El formato tiene la ventaja de ser libre, en otras palabras, de no estar
protegido por ninguna patente.
● WAV (formato sin comprimir): este formato debería evitarse cuando sea posible, puesto
que los archivos que utiliza son muy pesados. Es básicamente el equivalente a Bitmap
(BMP) en audio.
OGG es lo principal a tener en cuenta. ¿No hay un formato «ideal» que reconocen todos los navegadores?
¡Pues no! Afortunadamente, podemos proporcionar a los navegadores diferentes formatos y
dejarles que seleccionen el que puedan leer.El almacenamiento de vídeo es mucho más complejo. Necesitamos tres elementos:
● Un formato contenedor: de alguna manera es como una caja que se utiliza para
contener los dos elementos siguientes. El tipo de contenedor normalmente se puede
reconocer por la extensión del archivo. AVI, MP4, MKV, etc.
● Un códec de audio: es el formato de sonido del vídeo, que normalmente está
comprimido. Los hemos visto y vamos a utilizar los mismos: MP3, AAC, OGG, etc.
● Un códec de vídeo: es el formato que comprime las imágenes. Aquí es donde las cosas
se complican, dado que estos formatos son complejos y su uso no siempre es libre. Los
principales que hay que conocer para Internet son:
○ H.264: ahora es uno de los formatos más potentes y más utilizados... pero no es
100 % libre. De hecho, puede usarse de forma libre en algunos casos (como en
streaming de vídeo en una página web personal), pero la incertidumbre legal lo
hace arriesgado de utilizar a gran escala.
○ Ogg Theora: un códec que es libre y no está protegido por copyright, pero menos
potente que H.264. Aunque es bastante conocido en Linux, tienes que instalar
software para reproducirlo en Windows.
○ WebM: otro códec más reciente y libre, que no está protegido por copyright.
Provisto por Google, ahora es el principal competidor de H.264.
poco líoDe nuevo, ningún formato realmente destaca. Es recomendable proporcionar cada vídeo en
varios formatos para que se pueda reproducir en tantos navegadores como sea posible.Para convertir vídeo en estos formatos, recomiendo un programa gratuito,
Insertar un elemento de audio
incluido Internet Explorer desde la versión 9 (IE9) en adelante.En teoría, solo necesitas una etiqueta para reproducir un sonido en tu página:
En la práctica, es un poco más complicado.
general del archivo (llamados metadatos), pero no ocurrirá nada en particular.Puedes añadir los siguientes atributos a la etiqueta:
● controls: para añadir los botones de «Reproducir» y «Pausar» y la barra de
desplazamiento. Puede parecer fundamental, y puede que te preguntes por qué no lo
incluyen por defecto, pero algunas páginas web prefieren crear sus propios botones y
controlar la reproducción con JavaScript.
● width: para cambiar el ancho de la herramienta de reproducción de audio.
● loop: la música se reproducirá en bucle.
● autoplay: la música se reproducirá cuando la página esté cargada. No te excedas con
esto. ¡Una página web que reproduce música por sí misma cuando está cargada
normalmente es irritante!
● preload: especifica si la música puede precargarse cuando la página esté cargada o no.
Este atributo puede llevar los siguientes valores:
○ auto (por defecto): el navegador decide si cargar previamente toda la música, solo
los metadatos o nada.
○ metadata: solo carga los metadatos (duración, etc.).
○ none: no hay carga previa. Útil si no quieres malgastar ancho de banda de tu
página web. No puedes forzar la carga previa de música, siempre es el navegador el que decide.
ancho de banda (dado que el tiempo de carga es largo en un teléfono móvil).Estará mejor con controles, así que ¡vamos a añadirlos!
La apariencia del reproductor de audio varía de un navegador a otro. La siguiente imagen
muestra, por ejemplo, el reproductor de audio de Google Chrome
El reproductor de audio de Google Chrome ¿Por qué abrir la etiqueta si vas a cerrarla inmediatamente después?
que no soportan esta nueva etiqueta. Por ejemplo:
antiguos que no entienden la etiqueta mostrarán el texto. Hemos visto que algunos navegadores no soportan MP3. ¿Cuál es la solución?
etiqueta de esta manera:El navegador tomará automáticamente el formato que reconozca.
Internet Explorer desde la versión 9 (IE9).
para empezar el vídeo!
<audio>):
defecto, el navegador toma el primer fotograma del vídeo, pero como a menudo es un
fotograma negro o un fotograma que no representa el vídeo, te recomiendo crear uno.
Puedes hacer simplemente una captura de imagen de cualquier momento del vídeo.
● controls: para añadir los botones de «Reproducir» y «Pausar» y la barra de
desplazamiento. Puede parecer fundamental, pero algunas páginas web prefieren crear
sus propios botones y controlar la reproducción con JavaScript. En nuestro caso, ¡será
más que suficiente!
● width: para cambiar el ancho del vídeo.
● height: para cambiar la altura del vídeo.
● loop: el vídeo se reproducirá en bucle.
● autoplay: el vídeo se reproducirá cuando cargue la página. Una vez más, no te excedas
con esto. ¡Una página web que ejecuta algo por su cuenta cuando carga es, por lo
general, irritante!
● preload: especifica si el vídeo puede precargarse cuando la página cargue o no. Este
parámetro puede tener los siguientes valores:
○ auto (valor por defecto): el navegador decide si precargar el vídeo entero, solo los
metadatos o nada.
○ metadata: solo carga los metadatos (duración, tamaño, etc.).
○ none: no hay carga previa. Útil si quieres evitar malgastar ancho de banda de la
página web.
asegurará de que las dimensiones especificadas no se sobrepasen, pero mantendrá las
proporciones.La siguiente imagen muestra el resultado.
Un vídeo con las opciones de reproducción y un tamaño definido ¿Por qué abrir y cerrar inmediatamente después de la etiqueta?
La respuesta es la misma que para la etiqueta <audio>. Te permite visualizar un mensaje o
incluir una solución alternativa (en Flash) si el navegador no reconoce la etiqueta:
vídeos?
navegador elegirá el que reconozca. ¿Cómo se visualiza el vídeo en pantalla completa?
escondida: tienes que hacer clic con el botón derecho en el vídeo y seleccionar «Pantalla
completa».No hay ninguna forma de forzar la pantalla completa, ni siquiera en JavaScript. Es comprensible,
dado que algunas páginas web podrían perturbar considerablemente la navegación al mostrar
vídeos en pantalla completa sin preguntar antes al usuario si realmente lo quieren.
-y-css3/
acion-html5También podría gustarte