HTML HyperText Markup Language 1 HTML HyperText (lenguaje hipertexto) Markup Language de marcas de <ETIQUETA ATRIBUTO “VALOR”> <html> <head> <title>Nombre de la página</title> </head> <body> . . (líneas de código) . </body> </html> <h1>… </h1> <hr> (cabecera y cuerpo) Estructura básica para escribir el lenguaje html, la mayor parte del código irá dentro de las etiquetas <body> Posteriormente guardar el archivo con la extensión “.html” ó “.htm” Prioriza el texto como título; Siendo <h1> el de mayor rango y <h7> el de menor rango. Dibuja línea horizontal simple (Horizontal Rule) <hr size= 5> Controla el grosor de la línea (Por lo general el valor del atributo debería estar siempre entre comillas “5”) <hr align= “…”> “center”, “left”, “rigth” <hr noshade> que en inglés significa sin sombra, existe porque algunos navegadores gráficos como Navigator™ o Explorer™ muestran las líneas horizontales con un efecto tridimensional con sombra. <hr width=”90%”> <br> <p>… </p> (párrafo) <p align= “center”>…</p> (atributo en negrita y cursiva) <p align= “left”>…</p> <p align= “right”>…</p> <blockquote>…</blockquote> <address>…</address> <center>…</center> Extraído de: Curso completo de HTML por Jorge Ferrer por Víctor García por Rodrigo García Cambiar la alineación de la línea Elimina el efecto sombra que algunos navegadores incluyen automáticamente a la línea. Especifica el ancho horizontal de la línea con respecto a la pantalla Salto de línea (interlineado 1.0) Salto de línea (párrafo – inter. 2.0) Centra el texto del párrafo Alinea el texto a la izquierda Alinea el texto a la derecha Agrega al párrafo margen a la izquierda y derecha. Para escribir alguna dirección, información relacionada a la página, etc. Centra todo lo que está dentro de ellas: texto, imágenes, etc. Profesor. Juan Víctor Reyes Rojas 2020 HTML HyperText Markup Language 2 INSERCIÓN DE IMÁGENES <img> <img src ="IMG-20180408-WA0010.jpg"> <img src="D:\JUAN VICTOR/Pictures/2019-08/IMG20190814-WA0017.jpg"> CREAR ENLACE HIPERTEXTO <a>…</a> <a href="dirección_URL"> Texto que será sensible (hipertexto) </a> <a name="nombreAncla"> El formato elegido en el World Wide Web es el formato GIF (.gif), JPG, JPEG, todos los navegadores son capaces de mostrar las imágenes incluidas en este formato Manera correcta de insertar una imagen, utilice el atributo “src” para ingresar la dirección de la imagen, más la extensión del archivo (.jpg) en el ejemplo. Estructura del link Crea un ancla Comienzo </a> ... <a name="S"> </a> Salud Santa Claus Seguridad ... Ejemplo para referirse a un ancla <a href="#S">S </a> Linck que nos llevará al ancla anterior (el bloque de las palabras con “S”) Para especificar que el enlace apunta a un ancla se ha incluido un signo # seguido del nombre del ancla. <a href="http://www.ozu.es/a-.html#S">Letra S</a> Enlace ancla en otra página web Title Es aconsejable usar ’title’ siempre. De esta manera aquellos usuarios (que visiten la página) con navegadores que entiendan este atributo (como Explorer™) disfrutarán de una información extra. <a href= “dirección de enlace” title = “texto que aparecerá al pasar el mouse en el linck”>…</a> <a rel= “…”> … </a> Relaciona paginas enlazadas entre si, como un “ir a:” (relation) <a rev= “…”>…</a> (reverse relation) Relaciona páginas enlazadas entre sí, como un “volver ó atrás” Ejemplo 1: <a href="Bajista.html" rev="SUIGUIENTE">IR A BAJISTA</a> (enlaza a la página Bajista) <a href="Guitarrista.html" rel="anterior">IR A GUITAR 1</a> Ejemplo 2: <a href="capitulo3.html" rev="anterior"> Capítulo 3 </a> <a href="capitulo5.html" rev="siguiente"> Capítulo 5</a> Extraído de: Curso completo de HTML por Jorge Ferrer por Víctor García por Rodrigo García Profesor. Juan Víctor Reyes Rojas 2020 HTML HyperText Markup Language FORMATO DE TEXTO Y CARACTERES ESPECIALES Etiquetas de estilo físico 3 Indica al navegador como tiene que mostrar al texto (cuestionado por puristas por descontextualizar al lenguaje descriptivo de html) <b>… </b> <i>…</i> <tt>…</tt> <strike>…</strike> <big>…</big> Texto en negrita (bold) Itálica, cursiva Monoespaciado (Tele Type) Tachado Aumenta el tamaño de la letra o texto que este dentro de la etiqueta. (etiqueta de estilo intermedio entre lógico y físico) Ejemplo: Esto es texto normal, <BIG> este es grande <BIG> y este es mayor </BIG> </BIG> <small>…</small> Ejemplo: Reduce el tamaño del texto que se encuentra dentro de la etiqueta. Esto es texto normal, <SMALL> este es pequeño <SMALL> y este es menor </SMALL> </SMALL> <sub>…</sub> <sup>…</sup> <u>…</u> Etiquetas de estilo lógico Cambia texto a sub índice Cambia texto a super índice Texto Subrayado (Underline ) Describen que características deberá tener el texto (texto importante, esto es un dirección, etc) <strong>…</strong> <em>…</em> <code>…</code> <samp>…</samp> <var>…</var> <cite> … </cite> <dfn> … </dfn> <kbd> … </kbd> Fuerte o grueso, indica que el texto dentro de las etiquetas es un texto de importancia (negrita) EMphasize, enfatiza al texto (cursiva) Texto como instrucciones , “código” de ordenador (teletipo, monotype) Del inglés SAMple (muestra) igual a <code> Delimita el texto insertado por el usuario (cursiva) Cita textual (cursiva) Definición de algún texto (cursiva) Monotype ETIQUETA FONT – TAMAÑO, COLOR, TIPO DE TEXTO <Font SIZE = “ 7 ”> … </font> Con el atributo size (indica el tamaño) <Font SIZE = “+3”> … </font> size =“+n ó –n” número siempre entre comillas. Extraído de: Curso completo de HTML por Jorge Ferrer por Víctor García por Rodrigo García Estructura de la etiqueta (sintáxis) dentro de las comillas irá el tamaño del texto del 1 al 7, el texto más pequeño irá con el número 1. Por defecto html coloca el número 3 Indica un tamaño relativo con respecto al que lo rodea. No será mayor a 7 o menor a 1 Profesor. Juan Víctor Reyes Rojas 2020 HTML HyperText Markup Language <basefont size = “n”> 4 n =número del 1 al 7 Permite modificar el tamaño por defecto de la página web, desde su inclusión. Solamente los encabezados mantienen su tamaño En general cuando se usa esta etiqueta se introduce como la primera después de <BODY>, no usarla es lo mismo que usar <BASEFONT SIZE="3">. <font color = “#RR,GG,BB”> …</font> Con la combinación de RGB se puede crear hasta 16 millones de colores. <font color = “nombre del color”> TEXTO PREFORMATEADO <pre> … </pre> Ejemplo: <pre> Cambia el color del texto: RR = Red - rojo GG = Green – verde BB = Blue - azul Por cada letra un número, posibilidad de combinar colores. 00 = usencia de color FF = máxima intensidad del color. Otro método de cambiar el color del texto, más fácil para algunos. Los colores tendrán que estar en inglés. (red, blue, Green. Etc) Permite que el formato dado en la programación se mantenga, sin sufrir modificaciones. Si no hubiera la etiqueta <pre> el texto previamente formateado se vería asi: (@ @) -----oo00o---o00oo------------- | Juan Víctor Reyes | | Profesor y programador | | e-mail. [email protected] | | | ----------------0ooo.-------------- .ooo0 ( ) ( ) ) / \ ( (__/ \__) </pre> CARACTERES ESPECIALES &copy; Partes del símbolo: & = ampersand copy =nombre del símbolo ; = punto y coma &#reg; Sintaxis literal, se pueden escribir símbolos que no encontramos en el teclado u otro carácter especial Código para el símbolo © Código para el símbolo ® Partes del símbolo: & = ampersand # = numeral reg =nombre del símbolo ; = punto y coma &#169; Símbolo de “copy” pero escrito de manera numeral. © &#174; Símbolo de “registrado” pero escrito de manera numeral. ® Extraído de: Curso completo de HTML por Jorge Ferrer por Víctor García por Rodrigo García Profesor. Juan Víctor Reyes Rojas 2020 HTML HyperText Markup Language https://ascii.cl/es/codigos-html.htm 5 Revise la página para ver más símbolos https://www.kreatibu.com/recursos-gratisdisenadores/herramientas/caracteres-raros-con-altcodigos-ascii/ Non breaking space – espacio que no puede ser roto. Especial para espacios que necesariamente tienen que estar ahí, sin la posibilidad que el navegador lo excluya. &nbsp; LISTAS Y COMENTARIOS Yo practico: Lista no ordenada, (unordered list) con viñetas no numeradas. Se suele llamar a la etiqueta <li> subetiqueta. <UL> <LI>Fútbol <LI>Baloncesto <LI>Tenis <LI>etc. </UL> Mi PC necesita: <OL> <LI>Disco duro de 1 terabit <LI>Memoria ram de 1 Gb <LI>Altavoces <LI>cámara hd Lista ordenada, (ordered list) crea una lista enumerada </OL> Ejemplo: <DL> <DT>Hipertexto <DD>Se llama documento hipertexto a aquel que tiene zonas activas donde el usuario puede pulsar con el ratón para acceder a otro documento. Estas zonas pueden ser imágenes o texto. <DT>Ancho de banda de una red <DD>Es, en pocas palabras, la Lista de glosario, (Definition List) Lista de definición <dl> <dt> subtítulo (Definition Term) <dd>párrafo (Definition, Description) Existe la posibilidad de anidamiento, en listas como en menús y directorios capacidad de transmisión que soporta y está muy relacionada con la velocidad de transmisión que se puede alcanzar. <DT> <DD> HTML HiperText Markup Language, Lenguaje de marcas hipertexto. Lenguaje para diseñar páginas del World Wide Web. </DL> Menú, lista sin viñetas <MENU> <LI>Canción <LI>Canción <LI>Canción <LI>Canción <LI>etc. 1: 2: 3: 4: Tranquilo majete Lluvia en soledad La mujer barbuda Madera de colleja </MENU> Extraído de: Curso completo de HTML por Jorge Ferrer por Víctor García por Rodrigo García Profesor. Juan Víctor Reyes Rojas 2020 HTML HyperText Markup Language <DIR> <LI>Juegos <LI>Gráficos <LI>Internet <LI>Programación 6 Directorio, lista sin viñetas, pero útil para indicar al navegador que se trata de una carpeta (directorio), y para distinguirlo en la programación. </DIR> <!-- crea un comentario --> IMÁGENES Y COLOR <BODY BGCOLOR = “#RRGGBB”> Escribe un comentario en la programación para indicar algo importante, anotaciones etc. Pero no se mostrará en el resultado. Se recomienda usar un comentario por línea de código. Cambia el color de fondo de la página. Se agrega el atributo a la etiqueta <body> del inicio. Otra opción: <body bgcolor = “blue”> <body bgcolor="#000000" text="#FFFFFF" link="#00FF00" vlink="#008080" alink="#FF0000"> <body background = “dirección de la imagen.jpg”> Donde los atributos: bgcolor = color de pantalla negro, text = texto blanco, link = enlaces verdes vlink = enlaces visitados verde azulado alink = enlaces activos rojos Inserta una imagen como fondo en la página web Nota. Tener cuidado en el tipo de extensión del archivo: jpg, jpeg, gif, etc. ó si está escrito en mayúsculas o minúscula. <img src = “nombre del archivo + extensión”> Inserta una imagen. Ejemplo: <img src="img.gif"> arriba Align = “top” <img src ="direccción de la imagen+extensión" Align="top"> Ejemplo: <img src="C:\Users\JUAN VICTOR\Pictures/partitura.jpg" Align="top"> Align = “middle” medio <img src ="direccción de la imagen+extensión" Align="middle"> Ejemplo: <img src="C:\Users\JUAN VICTOR\Pictures/partitura.jpg" Align="middle"> Extraído de: Curso completo de HTML por Jorge Ferrer por Víctor García por Rodrigo García Profesor. Juan Víctor Reyes Rojas 2020 HTML HyperText Markup Language Align = “bottom” 7 Abajo <img src ="direccción de la imagen+extensión" Align="bottom"> Ejemplo: <img src="C:\Users\JUAN VICTOR\Pictures/partitura.jpg" Align="bottom"> Align = “right” <img src ="direccción de la imagen+extensión" Align="right"> Derecha Ejemplo: <img src="C:\Users\JUAN VICTOR\Pictures/partitura.jpg" Align="right"> Align = “left” <img src ="direccción de la imagen+extensión" Align="left"> izquierda Ejemplo: <img src="C:\Users\JUAN VICTOR\Pictures/partitura.jpg" Align="left"> <br clear> <br clear = “left”> <br clear = “right> Termina el texto envolvente Provoca un salto de línea hasta el primer margen libre a la izquierda Provoca un salto de línea hasta el primer margen libre a la derecha Pasa a la siguiente linea libre despúes de la imagen <br clear = “all”> MARGENES, BORDES ALREDEDOR DE …Y TAMAÑO DE LAS IMÁGENES vspace = “n” hspace = “n” <IMG src ="C:\Pictures/1071725.jpg" IMG align ="left" Vspace="40" Hspace="50"> Vspace. Genera un margen Vertical entre el borde de la imagen y el texto Hspace. Genera un margen Horizontal entre el borde de la imagen y el texto Ejemplo de utilización, por lo general siempre irá con la etiqueta de imagen IMG, las mayúsculas son para reforzar el ejemplo. <a href="index.htm"> dirección de enlace <img src="img/izda.gif"> imagen </a> <a href="otra.htm"> <IMG SRC="izda.gif" border=0> </a> Extraído de: Curso completo de HTML por Jorge Ferrer por Víctor García por Rodrigo García Convierte a la imagen en enlace, combinación de las etiquetas <a> y <img> nótese que la imagen está en el centro de la etiqueta <a> Border = 0 Elimina el borde de la imagen Profesor. Juan Víctor Reyes Rojas 2020 HTML HyperText Markup Language <img src="izda.gif" border=10> <img src="izda.gif" width=20> 8 Borde=10 aumenta el ancho del borde de la imagen, puede variar de número Width = ancho de la imagen en pixeles Height = alto de la imagen en pixeles. Alt="Fotografía de unas montañas nevadas delos Alpes"> oscila entre 20 y 600 p. habitualmente. Tanto para width como para height. Al escribir solamente uno de los atributos, el navegador deduce lógicamente la otra dimensión de manera proporcional. Es preferible escribir los dos atributos dimensionales para ahorrar tiempo de espera en el navegador. El atributo Alt permite mostrar el texto escrito entre comillas, en el lugar de la imagen cuando esta no ha podido cargarse en el navegador. <a href = “dirección imangen.jpg”> Imagen externa <a> Thumbnails, utiliza una imagen retocada como vista previa en el texto o donde se desee, y la imagen original o de alta definición, la muestra de manera externa mediante un enlace. <img src="izda.gif" height=20> <img src="izda.gif" width=300 height = 225> <img src ="montañas.gif" IMÁGENES MAPA Convierte a una imagen en imagen mapa. usemap <IMG SRC="imagen.gif" USEMAP="#mapa1"> <IMG SRC="imagen.gif" USEMAP="index.htm#mapa1"> <MAP NAME="mapa1"> ... </MAP> Para crear una imagen mapa seguiremos cuatro pasos. 1. Definir a la imagen como mapa <!-- dirección de la imagen + etiqueta USEMAP + símbolo #--> Para el caso que la imagen este en otra página web 2. Definimos con la etiqueta “map” las zonas que serán los puntos de enlace. (link) 3. Definimos la forma del área que tendrá los puntos de enlace, con la etiqueta “area" AREA HREF: Este atributo es idéntico al del mismo nombre de la etiqueta <a>. Con él debemos indicar la página o dirección URL a la que saltaremos cuando pulsemos sobre esta zona activa. ALT: Sirve para incluir un texto alternativo. SHAPE: Define la forma de la zona, puede tener tres valores: rect (zona rectangular), circle (zonacircular) y poly (zona poligonal). COORDS: Coordenadas de la zona, su valor depende de la forma de esta. Extraído de: Curso completo de HTML por Jorge Ferrer por Víctor García por Rodrigo García Profesor. Juan Víctor Reyes Rojas 2020 HTML HyperText Markup Language <html> <head> <title> Etiqueta USEMAP </title> </head> <body> <u> <h2>utilización de imagen mapa</h2> </u> <!--paso 1 dirección de la imagen + etiqueta USEMAP + símbolo #--> <img src="C:\Users\JUAN VICTOR\Documents\LearnHTML/cuadrado.gif" USEMAP="#cuadrado"> 9 Ejemplo: Para el ejemplo se ha utilizado la forma “rect” (rectangular) y para que se vuelva más fácil la ubicación de los puntos del rectángulo se ha utilizado un sistema de Coordenadas cartesianas. Al dar clic en cada color del cuadrado nos llevará a la página que contiene el color respectivo <!--paso 2, dentro de la etiqueta Map y su atributo Name="nombre imagen "--> <!--2.1 definimos la forma (etiqueta AREA y atributo"SHAPE")--> <!--2.2 con la etiqueta HREF="la dirección a donde nos dirigirá"--> <!--2--> <map name="cuadrado"> <!--2.1--> <!--para cada color una programación indiviudal--> <!--primera fila--> <area shape= "rect" COORDS="5,4,83,82" href="C:\Users\direccion\colores/rojo.html" title ="rojo"> <area shape= "rect" COORDS="95,4,173,80" href="C:\Users\dirección \colores/anaranjado.html" title ="anaranjado"> <area shape= "rect" COORDS="185,4,263,82" href="C:\Users\JUAN VICTOR\Documents\LearnHTML\colores/amarillo.html" title ="amarillo"> <!--segunda fila--> <area shape= "rect" COORDS="5,94,83,170" href="C:\Users\JUAN VICTOR\Documents\LearnHTML\colores/azul.html" title ="azul"> <area shape= "rect" COORDS="95,94,173,170" href="C:\Users\JUAN VICTOR\Documents\LearnHTML\colores/verde.html" title ="verde"> <area shape= "rect" COORDS="185,94,263,170" href="C:\Users\JUAN VICTOR\Documents\LearnHTML\colores/verde limón.html" title ="verde limón"> <!--tercera fila--> <area shape= "rect" COORDS="5,184,83,260" href="C:\Users\JUAN VICTOR\Documents\LearnHTML\colores/lila.html" title ="lila"> <area shape= "rect" COORDS="95,184,173,260" href="C:\Users\JUAN VICTOR\Documents\LearnHTML\colores/rosa.html" title ="rosa"> <area shape= "rect" COORDS="185,184,263,260" href="C:\Users\JUAN VICTOR\Documents\LearnHTML\colores/turquesa.html" title ="turquesa"> </map> </body> </html> CREACIÓN DE TABLAS <table> … </table> <TH> Extraído de: Curso completo de HTML por Jorge Ferrer por Víctor García por Rodrigo García Crea una tabla, entre ellas se escribirá otras que estructuren la tabla y su contenido (Table header) Encabezado de columna de tabla, si no está dentro de la etiqueta tabla se observará un texto ampliado en la parte superior Profesor. Juan Víctor Reyes Rojas 2020 HTML HyperText Markup Language <TR>…</TR> <TD> <border> <table border= “1”> <TABLE> <CAPTION> Titulo de la tabla </CAPTION> ... Código de la tabla ... </TABLE> <TABLE> <CAPTION ALIGN="bottom"> Pie de la tabla </CAPTION> ... Código de la tabla ... </TABLE> < TABLE ALIGN = “left”> < TABLE ALIGN = “right”> < TABLE ALIGN = “center”> <BR CLEAR="all"> ALIGN VALIGN <TR ALIGN="right" VALIGN="bottom"> ... Etiquetas para crear las celdas ... </TR> ALINEAMIENTO DE CELDAS Y FILAS - <TR> y <TD> Align Extraído de: Curso completo de HTML por Jorge Ferrer por Víctor García por Rodrigo García 10 (Table Row) Nos permitirá insertar filas en la tabla, por cada etiqueta una fila, la etiqueta de cierre o final </tr> es optativa. Al utilizarlo sin contenido <td> se posicionará como título (Table Date) Agrega datos a la tabla estos datos pueden ser: texto, imágenes u otra tabla, etc. Nota: tanto <tr> como <td> se mantienen en una solo fila la diferencia que <tr> se resalta en negrita. Agrega borde a la tabla “0” sin borde, de 1 en adelante indica el grosor en píxeles. Su uso va como atributo en la etiqueta <table> <CAPTION>…</CAPTION> Agrega título a la tabla. Etiqueta <caption> con atributo ALIGN = puede tomar los atributos, TOP y BOTTOM, ubica al título de la tabla según align, top=arriba y bottom = abajo. Alinea la tabla con respecto a la página left = izquierda Alinea la tabla con respecto a la página right = derecha Alinea la tabla con respecto a la página center = centro nota: para asegurar que la tabla se vea centrada en cualquier navegador, inclúyase la etiqueta <center> Permite agregar texto después de la tabla, al igual que con las imágenes. Atributo de alineación que usa valores: “right, left, center, bottom y up” Atributo de alineación que usa valores = “up”, “bottom” Ejemplo de ALIGN y VALIGN Alinea el contenido de una celda en un plano Horizontal usando valores, vistos anteriormente “left, center, right”´ Profesor. Juan Víctor Reyes Rojas 2020 HTML HyperText Markup Language Valign 11 Alinea el contenido de una celda en un plano Vertical usando valores, vistos anteriormente “up, bottom” ANCHO DE TABLAS Y FILAS <TABLE WIDTH="500"> ... Código de la tabla ... </TABLE> <TABLE WIDTH="50%"> ... Código de la tabla ... </TABLE> TAMAÑO DE LAS CELDAS <table> <TR> <TD WIDTH="50" HEIGHT="50"> <IMG SRC="img.gif" WIDTH="100" HEIGHT="100"> </TD> </TR> </table> Nowrap <td nowrap>…</td> COMBINAR DE CELDAS Colspan <td colspan = “3”>…</td> Rowspan <td rowspan = “4”>…</td> Atributo width que indica el ancho de la tabla en píxeles, pero si una imagen tiene mayor tamaño que el valor, el navegador ignora el valor asignado y se adapta al tamaño de la imagen. Atributo width con el valor mostrado en cantidad porcentual, en este caso mitad de la ventana. Celda <td> ancho width 50 p. por alto height 50 p. La imagen tiene un alto y un ancho mayores, por lo tanto, el navegador no respetará los valores asignados a <td> y se adecuará a la imagen. Del inglés (wrap) no envolver, obliga al texto a permanecer en una línea, obligando al navegador a utilizar la barra de desplazamiento inferior (cuidado con su uso) Atributo que puede ir en <td> <tr> o <th> indicando cuantas columnas horizontales puede ocupar la celda Atributo que indica a <td> cuantas celdas en vertical puede combinar. Estos atributos pueden combinarse para ocupar varias columnas y varias filas. MÁRGENES Y SEPARACIÓN DE CELDAS Cellspacing <table cellspacing= “10”> Código de tabla Atributo Separación de celda, permite aumentar o disminuir el borde de las celdas, por defecto el tamaño es 1 píxeles </table> Cellpadding Código de tabla Atributo tamaño de las celdas, permite aumentar o disminuir el tamaño de todas las celdas, por defecto el tamaño se adecúa al contenido. Tamaño en píxeles. </table> Estos dos atributos también pueden ir juntos. <table cellpadding= “10”> Extraído de: Curso completo de HTML por Jorge Ferrer por Víctor García por Rodrigo García Profesor. Juan Víctor Reyes Rojas 2020 HTML HyperText Markup Language 12 HTML – AVANZADO Para que una página de HTML sea compatible con XHTML y a su vez con XML se requiere usar las siguientes condiciones. la primera línea de código tendrá que ser <?xml version="1.0"?> Todas las etiquetas de inicio deberán tener su <p> … </p> correspondiente etiqueta de final Las etiquetas de una sola instrucción deberán <img src="img.gif"/> terminar con /> Todos los valores de los atributos deberán ir, definitivamente entre comillas <td align = “…”/> El W3C ha puesto un servicio público que permite - recursos ver si una determinada página cumple los estándares o no. Está disponible en - las etiquetas vistas hasta este nivel corresponden a http://validator.w3.org/ la versión de HTML 2.0 Y HTML 3.2 su uso asegura También hay un programa, llamado Tidy™ que permite hacer la validación en un archivo local, sin tener que publicarlo en Internet. Este programa es software libre y está disponible en que cualquier navegador web pueda mostrarlo sin problemas. http://tidy.sourceforge.net/ EXTENCIONES A LAS LISTAS - HTML 3.2 <UL TIPE= “…”> <li>…</li> </UL> - (257 pág.) Añade una viñeta específica a las listas no ordenadas: circle (círculo) Square (cuadrado) Disk (disco) Cinco opciones de numeración para listas ordenadas, con el atributo TYPE <OL START = “n”> <li> … </li> </Ol> Extraído de: Curso completo de HTML por Jorge Ferrer por Víctor García por Rodrigo García Atributo que permite especificar desde que número o letra se quiere empezar la numeración Profesor. Juan Víctor Reyes Rojas 2020 HTML HyperText Markup Language COMPACT 13 Este atributo puede ser usado en cualquiera tipo de lista: UL, OL, MENU, DIR y DL, y su función es decirle al navegador que intente comprimir el tamaño que ocupa la lista al máximo, por lo general es ignorado, no causa mayor efecto. (pág. 266) DIV Crea divisiones en las páginas, de manera que podamos indicar las propiedades de cada una de estas divisiones por separado (su uso no es muy frecuente según el libro) <DIV ALIGN="CENTER"> ... Cualquier etiqueta ... </DIV> Ejemplo, es necesario notar que la etiqueta se usa con el ya conocido atributo align ALIGN="justify" <META> <META HTTP-EQUIV="Refresh" CONTENT="5" URL="http://es.gnome.org"> Valor que justifica el alineamiento del texto, introducido por Internet Explorer y luego adoptado por NetScape sirve para describir las características de la página web Cuando una página tenga esta línea de código cargará la página es.gnome.org [http://es.gnome.org] pasados 5segundos de la carga de dicha página. (hacer un estudio aparte para etiqueta META) <META NAME="author" CONTENT="WebMaster de Los Alpes"> <META NAME="keywords" CONTENT="viajes, ofertas, Los Alpes, Orlando, Nueva Zelanda"> <META NAME="description" CONTENT ="La agencia de viajes Los Alpes tiene un gran prestigio en el mundo de las empresas y combina una gran calidad con unos excelentes precios."> Etiqueta meta con el uso del atributo NAME y CONTENT Si incluimos en nuestra página cierta información es muy probable que incluya nuestra página en la base de datos del buscador. Entre la información que puede necesitar el webbot está el autor de la página, una breve descripción de la misma, palabras clave que la definan, etc. La etiqueta META tiene tres atributos HTTP-EQUIV, NAME y CONTENT. HTTP-EQUIV Sirve para insertar información relacionada con el protocolo HTTP EL DESCRIPTOR DE TIPO DE DOCUMENTO Hace referencia a una declaración que según el estándar todas las páginas web deben tener para ser consideradas como HTML. Esta declaración ocupa una sola línea e incluirá también información sobre la versión de HTML que hemos usado. Si no se hace, el navegador procesara la página en modo Quirks (modo de compatibilidad) pudiendo no interpretar correctamente el código de la página Extraído de: Curso completo de HTML por Jorge Ferrer por Víctor García por Rodrigo García Profesor. Juan Víctor Reyes Rojas 2020 HTML HyperText Markup Language <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> 14 No es necesario incluir este descriptor en nuestras páginas para que los navegadores la interpreten como HTML, sin embargo, incluirlo no causa demasiado trabajo, y estaremos cumpliendo con el estándar <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <HTML> <HEAD>...</HEAD> <BODY> Ejemplo: El doctype puede variar según la versión del HTML ... Código ... </BODY> FRAMES Ventanas en una sola ventana documentos HTML Pág. 277 TARGET TARGET significa diana u objetivo, se utiliza en la etiqueta <a> como herramienta de vínculo a las ventanas del Frame. <A HREF="URL" TARGET="nombre_ventana"> ... </A> <BASE> <HEAD> ...Más código... <BASE HREF="http://freek.jorgeferrer.com/"> </HEAD> CREACIÓN DE PÁGINAS CON FRAMES Ejemplo Utiliza una dirección de en enlace de todos los hipervínculos. Los hipervínculos con <a> se buscarán solamente en la dirección que contiene la etiqueta BASE. Obsérvese que su uso es dentro de la etiqueta <head> Aviso Las direcciones que pongamos como valor del atributo HREF de la etiqueta BASE deben ser siempre absolutas (completas). Nota La etiqueta BASE existe desde la primera versión del estándar HTML: el HTML 2.0. Sin embargo, hemos preferido no comentarla hasta ahora porque, como enseguida veremos, es con los frames donde realmente su uso es importante, casi imprescindible. - pág.286 Las Webs con frames constarán de varios documentos HTML. En este ejemplo al haber tres frames serán necesarios 4 documentos HTML. Extraído de: Curso completo de HTML por Jorge Ferrer por Víctor García por Rodrigo García Profesor. Juan Víctor Reyes Rojas 2020 HTML HyperText Markup Language FRAMESET 15 etiqueta clave en la creación de los frames La estructura de las páginas con frames son diferente a las que no tienen. La principal diferencia es la sustitución de BODY por FRAMESET. COLS <FRAMESET COLS="ancho_col1, ancho_col2, ..."> <HTML> <HEAD> </HEAD> <FRAMESET COLS="20%,80%"> </FRAMESET> Atributo que nos permitirá dividir la ventana en columnas Ejemplo (procure escribir las etiquetas con letras minúsculas, al igual que los atributos, el ejemplo con letras mayúsculas es para fines didácticos) Ejemplo de cómo usar frameset y el atibuto COLS con indicación en porcentaje para las columnas de izquierda 20% y el de la derecha 80% </HTML> <FRAMESET COLS="100,300,*"> <FRAMESET COLS="*,*"> <FRAMESET COLS="100,*,*"> <FRAMESET COLS="200,2*,*">: <FRAMESET COLS="100,50%,*">: DIVISIÓN EN FILAS <frameset ROWS="alto_fila1, alto_fila2, ..."> <frameset ROWS="200,*,100">: <frameset ROWS="15%,*,3*">: <frameset COLS="*,*" ROWS="*,*"> … </frameset> Extraído de: Curso completo de HTML por Jorge Ferrer por Víctor García por Rodrigo García El asterisco indica que el resto de la pantalla se designa a otra columna, las columnas al no llevar porcentaje se indican en píxeles. Divide la pantalla en partes iguales. (“*,*”) Divide la ventana en tres columnas. La primera de 100 pixeles y entre las otras dos divide a partes iguales el espacio sobrante (700 pixeles) con lo que, (suponiendo el ancho total de 800 pixeles) cada una tendrá un ancho de 350 pixeles. La columna central es el doble que la columna izquierda La primera columna ocupa 100 pixeles, la segunda la mitad del ancho de la pantalla (400 pixeles) y la tercera el resto, que en este caso será 300 pixeles Rows (fila en inglés) El uso del asterisco es más frecuente para indicar el alto de fila superior de 200 pixeles en la que se podría poner un encabezado; una inferior de 100 pixeles en la que puede ponerse una coletilla o una barra de navegación; y una central que ocupa el espacio sobrante y donde se podría situar el contenido principal Se divide la ventana en una primera fila que ocupa el 15% de la altura; la siguiente fila ocupará un cuarto del resto y la tercera tres cuartos. Ejemplo Profesor. Juan Víctor Reyes Rojas 2020 HTML HyperText Markup Language 16 <frameset COLS="100,50,*,*" ROWS="15%,*,3*"> ... Más código ... Combinación de filas y columnas utilizando COLS y ROWS </frameset> <Frame> <FRAME SRC="docum.htm"> <FRAME SRC="docum.htm" Agrega contenido a las divisiones generadas por frameset El atributo SRC indicará el documento HTML dónde queramos insertar el contenido. Atributo name, que utilizaremos con TARGET para referirnos a el NAME="primer_frame"> <A HREF="otro.htm" Si posteriormente queremos crear un enlace a este frame desde otro de la misma página TARGET="primer_frame"> ATRIBUTOS DE LA ETIQUETA FRAME HTML 4.0 SCROLLING SCROLLING="auto" Usando este atributo podemos controlar la aparición o no de barras de desplazamiento Este es el valor por defecto y provoca que el navegador sólo inserte barras de desplazamiento si el contenido del frame ocupa más del espacio dedicado para él. Muestra las barras de desplazamiento siempre SCROLLING= “yes” SCROLLING= “no” NORESIZE MARGINHEIGHT MARGINWIDTH No muestra la barra de desplazamiento aun así el contenido no se muestre en su totalidad. No permite que las ventanas se puedan ajustar a criterio del usuario Ajusta el margen superior que debe respetar el contenido de ese frame. El tamaño debe ser dado en pixeles. Ajusta el margen lateral que debe respetar el contenido del frame. Al igual que antes, el margen debe ser dado en pixeles. NOFRAME <FRAMESET COLS="200,*"> <FRAME SRC="f1.htm"> <FRAME SRC="f2.htm"> <NOFRAME> <BODY> <P>Esta página usa frames y su navegador no los soporta, por favor vaya a <A HREF="sinframe.htm"> Ejemplo que prevé la dificultad que, un navegador no pueda mostrar frames. Utilización necesaria de la etiqueta <NOFRAME> y la etiqueta <BODY> Se recomienda usar en el caso que se tenga que enlazar a una página sin frames, la etiqueta <meta> para cargar automáticamente las páginas sin frames después de breves segundos nuestras páginas sin frames Extraído de: Curso completo de HTML por Jorge Ferrer por Víctor García por Rodrigo García Profesor. Juan Víctor Reyes Rojas 2020 HTML HyperText Markup Language 17 </A> </BODY> </NOFRAME> </FRAMESET> ANIDAMIENTO DE FRAMESETS Extraído de: Curso completo de HTML por Jorge Ferrer por Víctor García por Rodrigo García Pág. 304 Profesor. Juan Víctor Reyes Rojas 2020 HTML HyperText Markup Language <frame BORDERCOLOR= “red”> <frame FRAMEBORDER= “0”> <FRAMEBORDER BORDER="20"> ... </FRAMEBORDER> 18 Cambia el color del borde del frame También podría usarse los colores de RRGGBB (#ccffcc) Oculta los bordes, su valor por defecto es “1” Cambia el grosor del borde, tamaño del borde en píxeles Atributos especiales de la etiqueta TARGET TARGET="_blank" TARGET="_self" TARGET="_parent" TARGET="_top" Extraído de: Curso completo de HTML por Jorge Ferrer por Víctor García por Rodrigo García Fuerza que el documento referenciado por el enlace sea mostrado en una nueva ventana Usando este valor el documento enlazado será mostrado en el mismo frame o ventana donde está el enlace. Este valor es especialmente útil cuando se ha usado la etiqueta BASE para especificar un frame destino por defecto distinto del actual. Este valor provoca que el documento sea mostrado en el FRAMESET padre del frame actual. Fuerza a que el enlace sea mostrado usando todo el espacio de la ventana del navegador destruyendo toda estructura de frames. Este valor debe ser usado siempre que creemos un enlace a una página externa a nuestro sitio web. Profesor. Juan Víctor Reyes Rojas 2020 HTML HyperText Markup Language FRAMES FLOTANTES <iframe> … </iframe> <IFRAME ...> ...Código alternativo... dirección de la página.html </IFRAME> <HTML> <HEAD> <TITLE>Frames flotante</TITLE> </HEAD> <BODY> <H2>A continuación vemos un ejemplo de un frame flotante:</H2> 19 Pág. 328 Definición: inserta en medio de un documento HTML el contenido de otro documento HTML en un área del tamaño que indiquemos. Etiqueta que permitirá insertar un frame flotante, inline frame por similitud a las imágenes en línea. Código necesario para crear frames flotante, entre ello existirá un código alternativo, para aquellos navegadores que no soporte frames flotantes, mientras los que sí lo hagan ignorarán dicho código. Observación: los puntos suspensivos de la etiqueta indica que se usará atributos. Ejemplo: El uso del atributo “src” es de uso obligatorio y toma como valor la dirección URL absoluta o relativa <iframe src="doc.htm"> Tu navegador no soporta frames flotantes, para ver el contenido ve a <A HREF="doc.htm">doc.htm</A> </iframe> Pág. 330 </BODY> </HTML> <iframe name= “…”> <iframe width = “…” eight= “…”> <iframe frameborder= “…”> <iframe scrolling= “yes” ó “no”> <iframe vspace= “…” marginheight= “…”> <iframe align= “…”> <iframe border= “…” <iframe bordercolor= “#RRGGBB” Extraído de: Curso completo de HTML por Jorge Ferrer por Víctor García por Rodrigo García Este atributo nos permitirá asignarle un nombre al frame de manera que podamos referirnos a él por ejemplo para usarlo como destino de enlace usando el atributo target. Indica el ancho y el alto del frame flotante, al igual que con las imágenes o las tablas vistas con anterioridad. Agrega o quita el borde del frame flotante, “0” para desaparecerlo. Por defecto el valor de scrolling es (value = “yes”) mostrará las barras de desplazamiento cuando el contenido no se pueda mostrar en su totalidad. Altura en pixeles del margen del frame Alinea al frame flotante con respecto a la ventana, toma los valores “left ” y “ right” Aumenta el borde en píxeles como con las imágenes o como visto con los frames Color del border, no aceptada por el estándar HTML 4.0i Profesor. Juan Víctor Reyes Rojas 2020 HTML HyperText Markup Language 20 VIDEOS SONIDOS Y MULTIMEDIA Multimedia inline Multimedia externa QuickTime [.mov] de 200 Kb de la <a href=" dumbo3.mov"> escena del elefante rosa </a> de la película Dumbo. <a href = “dirección del contenido.mov”> texto hipertexto considerado </a> <a href = “dirección del contenido.wav”> Pág. 335 Contenido multimedia que se muestra junto con el contenido de la página, (sin enlaces externos) como una imagen Contenido multimedia que se mostrará fuera del sitio web, el navegador web recurrirá a una aplicación fuera de él para poder mostrarlo. Norma de ética. Ejemplo. los creadores de páginas del WWW deben incluir tanto el formato de los archivos como su tamaño en el texto que sirve como enlace o en un texto. De esta manera el navegante podrá decidir si le merece o no la espera de cargar el archivo. Enlaza un contenido multimedia externo El navegador reproducirá contenido de audio en formato wav, pero en una aplicación fuera del sitio web Se probó con audio mp3 y no lo reproducía. (2020), también sugiere el formato .au, .aiff, .aif, .mp2 <a href=" dumbo3.mov"> Los mismo sucederá para los formatos de audio y video, los más conocidos y difundidos son los formatos MPEG (.mpeg, mpg); AVI (.avi); QuickTime (.mov) VIDEO IN LINE Las etiquetas hasta aquí aprendidas, han servido de mucho en nuestro aprendizaje en el mundo de HTML 4.0 sin embargo ya muchas de ellas han sido reemplazadas por etiquetas de la versión actual HTML5, por lo que se recomienda su estudio. <img dynsrc="baile.avi" SRC="baile.gif" ALT="[Un baile]"> Dynsrc atributo necesario para agregar video in line, utilícese de manera conjunta con el el atributo SRC para imágenes. En el ejemplo el valor (.avi para video) (.gif para la imagen) EN DESUSO. Atributos para etiqueta de video, sin probar puesto que la etiqueta <img dynsrc = “…”> no se pudo poner a prueba. Extraído de: Curso completo de HTML por Jorge Ferrer por Víctor García por Rodrigo García También es posible usar el resto de atributos de la etiqueta IMG como ALIGN, VSPACE, HSPACE, WIDTH, HEIGHT, etc. • CONTROLS: Este es un atributo que no toma ningún valor. Si es incluido, muestra el vídeo AVI junto con una serie de controles para que el usuario pueda parar y reproducir el vídeo a su antojo. • LOOP: Toma como valor un número que determina el número de veces que el vídeo será mostrado. Por ejemplo con LOOP="5" el vídeo volverá a reproducirse desde el principio 5 veces y luego parará. Con un valor LOOP="1" el vídeo será repetido infinitas veces. • START: Determina cuando debe empezar a reproducirse el vídeo. Puede tomar dos valores: con START="FILEOPEN" (valor por defecto) el vídeo se reproducirá tan pronto como la página y el fichero de Profesor. Juan Víctor Reyes Rojas 2020 HTML HyperText Markup Language 21 vídeo lleguen al ordenador; con START="MOUSEOVER" el vídeo no empezará a reproducirse hasta que el usuario sitúe el cursor sobre él. El atributo LOWSRC <IMG SRC="alta_calidad.gif" LOWSRC="baja_calidad.gif"> Sonido in line <BGSOUND SRC="dirección+extención del archivo"> • LOOP controla el número de veces que el fichero de sonido será reproducido. Si usamos LOOP="-1" se reproducirá repetidamente hasta que el navegante abandone la página. • BALANCE: (Sólo Internet Explorer 4.0™ o posterior) Este atributo permitirá al programador Web cambiar el balance de sonidos estéreo. Puede tomar un valor entre -10000 y 10000. El efecto de cada uno de los dos extremos dependerán de la configuración del navegante, pero en cualquier caso ambos significarán que el sonido se oirá únicamente por uno de los dos altavoces. Con los valores intermedios controlamos el balance en uno u otro. • TITLE: (Sólo Internet Explorer 4.0™ o posterior). Con este atributo damos un título al sonido. Este título es solo informativo y no se mostrará ningún indicativo visual. • VOLUME: (Sólo Internet Explorer 4.0™ o posterior). El volumen con el que se reproducirá el sonido puede ser controlado gracias a este atributo que puede tomar un valor entre -10000 y 0. Si usamos VOLUME="0" (máximo volumen) el sonido se reproducirá al 100% de la configuración actual del usuario. Usando un valor menor el volumen bajará, no hay ninguna forma usando HTML de aumentar el volumen por encima de la configuración elegida en su ordenador por cada persona. • LOOPDELAY: [Solo Internet Explorer 4.0™] Con este atributo podemos especificar el retardo en milisegundos que el navegador esperará tras acabar antes de empezar a reproducir el vídeo de nuevo. Atributo que permite mostrar una imagen de menor calidad como pre visualización Ejemplo. Se mostrará la acción de este atributo siempre y cuando el navegador entienda e interprete el atributo. NO INCLUIDO EN EL ESTANDAR 4.0 Pág. 347 Reproduce un sonido de fondo sin control, la etiqueta solamente es soportada por InternetExplorer Atributos para <bgsound src> es necesario, tener encueta la extensión del sonido a colocar, ya que no todos los navegadores lo podrían reproducir. También podría ocurrir que el sonido que coloquemos no sea del agrado del visitante y de esta manera podríamos obligarlo abandonar nuestra página. MARQUESINAS ANIMADAS Crea movimiento en el valor asignado, letras, imágenes y utiliza los siguientes atributos: <marquee> “…” </marquee> Extraído de: Curso completo de HTML por Jorge Ferrer por Víctor García por Rodrigo García • BGCOLOR: Especificando un color en código RGB (#RRGGBB) o por nombre (blue, red, etc.) cambiaremos el color de fondo de la marquesina. • HEIGHT y WIDTH: Determinan la altura y anchura respectivamente de la marquesina. Ambos atributos pueden tomar un valor en pixeles o bien como porcentaje de la ventana del navegador. Por ejemplo EIGHT="50%" Profesor. Juan Víctor Reyes Rojas 2020 HTML HyperText Markup Language 22 provocará que la marquesina tenga una altura mitad de la de la ventana del navegador. Estos atributos no afectan al tamaño del texto. • HSPACE y VSPACE: Determinan los márgenes entre los bordes de la marquesina y el texto u otros elementos de la página. HSPACE determina el margen a cualquiera de los lados y VSPACE los márgenes superior e inferior. • ALIGN: Este atributo controla el alineamiento vertical del texto que bordea la marquesina. Puede tomar cinco valores diferentes: ALIGN="top" (arriba), ALIGN="middle" (centro), ALIGN="bottom" (abajo), ALIGN="left" (izquierda) ALIGN="right" (derecha) que tienen un comportamiento idéntico al que tenían con las imágenes. Este atributo no modifica la posición del texto en el interior de la marquesina, ya que este esta siempre en la parte superior Otros atributos para la etiqueta <marquee> </marquee> <marquee BEHAVIOR> <marquee DIRECTION> <marquee LOOP> <marquee SCROLLAMOUNT> <maquee SCROLLDELAY> <blink> … </blink> AUDIO CON LA ETIQUETA EMBED Extraído de: Curso completo de HTML por Jorge Ferrer por Víctor García por Rodrigo García : Este atributo nos permite cambiar el comportamiento del texto y puede tomar tres valores. BEHAVIOR="scroll" es el valor por defecto y consiste en el efecto de desaparecer por un lado y aparecer por el otro. Si usamos BEHAVIOR="slide" el texto tiene un comportamiento similar pero para en cuanto llega al borde derecho. La última opción es BEHAVIOR="alternate", en este caso el texto aparecerá igualmente por la derecha, pero una vez llegue al borde izquierdo rebotará y volverá hacia la derecha donde volverá a rebotar repitiendo este comportamiento indefinidamente. Con este atributo podemos controlar la dirección de desplazamiento del texto cuando este es de tipo SCROLL. Puede tomar dos valores: LEFT (izquierda) y RIGHT (derecha) siendo el primero el valor por defecto (movimiento de derecha a izquierda). Determina cuantas veces se repetirá el desplazamiento del texto por la pantalla. Por ejemplo con SCROLL="4" el texto se desplazará por la pantalla únicamente 4 veces, mientras que si usamos SCROLL="-1" o bien SCROLL="infinity" seguirá desplazándose indefinidamente. Aunque haya sensación de movimiento el texto se desplaza a pequeños saltos. Este atributo determina el número de pixeles que debe desplazarse el texto en cada uno de ellos. Junto con el siguiente atributo podemos controlar la velocidad del movimiento. Si ponemos un valor alto el texto se moverá más rápidamente pero con saltos más bruscos (ejemplos 8 y 9) Determina el tiempo de espera entre cada uno de los saltos. Este tiempo debe estar dado en milisegundos. Valores mayores también provocan mayor rapidez y brusquedad. Experimentando con SCROLLAMOUNT y SCROLLDELAY encontraremos la combinación con la que satisfacemos nuestras necesidades de velocidad y suavidad de desplazamiento En desuso: Se suponía hacía parpadear al valor que contenía, es su momento, los programadores desaconsejaban su uso. PLUG – IN permite que navegadores adapten sus recursos para poder reproducir sonido que anteriormente no lo hacían Profesor. Juan Víctor Reyes Rojas 2020 HTML HyperText Markup Language <EMBED SRC="D:\Atahualpa Yupanqui - Los ejes de mi carreta.wav" WIDTH="150" HEIGHT="70" AUTOSTART="true"> 23 Ejemplo con botones de control, <NOEMBED> <BGSOUND SRC="D:\ Atahualpa Yupanqui - Los ejes de mi carreta.wav"/> </NOEMBED> APPLETS JAVA <applet>…</applet> <APPLET CODE="nombre_applet.class" WIDTH="ancho" HEIGHT="alto"> </APPLET> Es necesario empezar desde este apartado, a estudiar HTML5, si lo ha hecho antes mejor. Etiquete que permitirá la inserción de programación java (específicamente applets, aplicaciones) Atributos obligatorios para que se pueda ejecutar nuestra applet, code , width, height La inserción de Applets amerita un estudio aparte. El nuevo estándar: la etiqueta OBJECT. <OBJECT DATA= "flores.avi" TYPE="video/avi" WIDTH=100 HEIGHT=100> <IMG SRC="flores.gif" WIDTH=100 HEIGHT=100 ALT="[FLORES]"> Con la nueva etiqueta <Object> y el atributo Data <OBJECT DATA= “…”> se puede agregar por convención cualquier tipo de recurso multimedia. </OBJECT> CONTROLES ActiveX TM FORMULARIOS Estudiarlo por separado, en el ejemplo visto en el libro solamente se puede ver su funcionalidad cargando la página en Internet Explorer. Pág. 387 <form>…</form> <form> Introduzca su nombre: <INPUT TYPE="Text"> </form> Etiqueta para formularios <input type = “botón, caja de texto, etc” Cualidad del botón a mostrar o caja de texto “TEXT” Caja de texto “submit” Botón enviar “search” Value = “nombre que se quire mostrar” <input type=”…” value=”…” Caja de texto exclusivo para búsqueda Name = “…” Ejemplo: Para mostrar el cuadro de texto necesitamos agregar la etiqueta de control ActiveX <input type= “text”> Value, atributo que permite cambiar el texto que se muestra en un botón Name, atributo que se utiliza para distinguir a cada botón para un envío específico. CONTROLES DE FORMULARIO <input type =“atribuo”> <form> <input type="text" name="mitexto"> Extraído de: Curso completo de HTML por Jorge Ferrer por Víctor García por Rodrigo García Los valores que puede tomar el atributo type son: - text, password, radio, checkbox, submit, image, reset, file y hidden. - Name (para indicar el nombre del botón) - Align (para alinear el texto que ingresa usuario) En el caso que se quiera introducir más de un control Profesor. Juan Víctor Reyes Rojas 2020 HTML HyperText Markup Language 24 </form> Sice Maxlength <input type="text" size="20" maxlength="20"> <input type="text" size="20" maxlength="5"> <input type="text" size="20" maxlength="40"> align="top" align="bottom" align="middle": align="left": align="right": Cajas de texto para claves. <INPUT TYPE="text" NAME="nombre"> <INPUT TYPE="password" NAME="clave"> BOTONES DE ELECCIÓN <form> <input type="radio" value= “nomb.des”> </form> <form> <input type="checkbox" value= “nomb.des”> </form> Atributo que permite especificar el tamaño de la caja de texto, por defecto 20 caracteres Se limita el número máximo de caracteres que pueden ser escritos en una caja de texto Ejemplos: 1. Tamaño de caja 20 caracteres, y se podrá ingresar 20 caracteres. 2. Tamaño de caja 20 caracteres, y se podrá ingrsar solamente 5 caracteres 3. Tamaño de caja 20 caracteres pero, se podrá ingresar 40 caractes. Los tamaños de estas cajas de texto son iguales, pero con restricciones en la cantidad de texto que se puede ingresar en ellas. se cuenta los espacios. Si no se utiliza el atributo maxlength la caja de texto admitirá ilimitados caracteres. - Alinea verticalmente el control con la parte superior de la línea en que es insertado. - Alinea verticalmente el control con la parte inferior de la línea. Sitúa el control a una altura media entre el resto de elementos de la línea. Contraseñas, password Obsérvese y créese un ejemplo de prueba. Botón radio de selección. Agregue el atributo CHECKED, para que por defecto aparezca seleccionado. Botón caja de selección. Resumen: <INPUT TYPE="checkbox" NAME="Nombre" ALIGN="alineamiento" VALUE="valor_que_debe_enviarse"> <form> <!-- ... --> <input type="image" NAME="envio" SRC="envio.gif"> </form> En el caso que se quiera usar un botón personalizado (una imagen creada) se utilizará el valor “image” y “src” para definir la dirección. <input type="reset"> Si se quiere que el usuario borre todo lo que ha ingresado con el valor “reset” del atributo “type” <input type="button" value="texto del botón" onclick="código de script"> <form> <input type="button" value="cerrar ventana" Extraído de: Curso completo de HTML por Jorge Ferrer por Víctor García por Rodrigo García Botón genérico sin una especificación, que se tendrá que programar con Java script u otro. Ejemplo de lo mencionado anteriormente. En este caso el botón cerrará la ventana del navegador, funciona sólo con Internet Explorer Profesor. Juan Víctor Reyes Rojas 2020 HTML HyperText Markup Language 25 onclick="window.close();"> </form> Botón con hipervínculo a otra página html. <form> <input type="button" value="cargar otra ventana" onclick="window.location.replace (’button2.html’);"> </form> El nuevo estándar HTML 4.0 introduce una nueva etiqueta para insertar botones en nuestra página: BUTTON. Esta etiqueta tiene un atributo, llamado TYPE, que nos permitirá elegir entre los tres tipos de botones disponibles: envío (TYPE=submit), borrado (TYPE=reset) o genérico (TYPE=button). La gran innovación de esta etiqueta es que podemos insertar en el botón imágenes o texto formateado con código HTML. <FORM> <P>1) Introduzca su nombre: <INPUT TYPE="text" NAME="nombre" TABINDEX="1"> <P> 3) Introduzca una clave para su identificación (4 letras): <INPUT TYPE="password"NAME="clave" TABINDEX="3"> <P>4) Dirección <INPUT TYPE="text" NAME="direccion" NOTAB> <P> 2) Tipo de habitación Ejemplo para indexar el tabulador no necesariamente con el siguiente sino con el que se especifica, se utiliza para ello el atributo “tabindex” y valor a la caja o botón según se desee y “notab” (validado para internet Explorer) </P> <INPUT TYPE="Radio" NAME="tipoHabitacion" VALUE="individual" TABINDEX="2"> Individual <INPUT TYPE="Radio" NAME="tipoHabitacion" VALUE="doble" CHECKED TABINDEX="2">Doble </FORM> <form> <textarea name="texto" rows="10" cols="50"> Textarea, caja de textos para escritura de textos amplios es la mejor que he visto nunca. </textarea> </form> CUADRO DE SELECCIÓN <FORM> Elija un color:<BR> <SELECT NAME="color"> <OPTION>Verde <OPTION SELECTED>Negro <OPTION>Rojo <OPTION>Azul </SELECT> </FORM> Extraído de: Curso completo de HTML por Jorge Ferrer por Víctor García por Rodrigo García selected, indica que el color por defecto seleccionado de la lista es “negro” Profesor. Juan Víctor Reyes Rojas 2020 HTML HyperText Markup Language 26 <FORM> Lista de la compra:<BR> <CENTER> <SELECT NAME="compra" SIZE="6"> <OPTION <OPTION <OPTION <OPTION <OPTION <OPTION otra forma de mostrar las listas VALUE="Fruta"> Fruta VALUE="Verdura"> Verdura VALUE="Ternera"> Ternera VALUE="Mantequilla"> Mantequilla VALUE="Salchichas"> Salchichas VALUE="Pasta"> Pasta </SELECT> </CENTER> <P> <INPUT TYPE="submit" VALUE="Enviar lista de la compra"> </FORM> <FORM> Lista de la compra:<BR> <CENTER> <SELECT NAME="compra" SIZE="6" MULTIPLE> <OPTION VALUE="Fruta"> Fruta <OPTION VALUE="Verdura"> Verdura <OPTION VALUE="Ternera"> Ternera <OPTION VALUE="Mantequilla"> Mantequilla <OPTION VALUE="Salchichas"> Salchichas <OPTION VALUE="Pasta"> Pasta </SELECT> </CENTER> cuando se pretende que el usuario pueda seleccionar varias opciones, importante la NOTA descrita. NOTA (usuarios de Windows): Para seleccionar varias opciones mantengan pulsada la tecla <CODE>Control </CODE> y selecciónenlas con el ratón. <P> <INPUT TYPE="submit" VALUE="Enviar lista de la compra"> </FORM> <SELECT NAME="nombre" SIZE="nº_elementos_visibles" MULTIPLE ALIGN="alineamiento" TITLE="texto_bocadillo" TABINDEX="n" DISABLED> <OPTION SELECTED VALUE="nombre de esta opción" TITLE="texto_bocadillo"> ... </SELECT> Resumen, pónga en práctica lo que ha aprendido, para que no olvide con facilidad. La utilización de tablas para insertar nuestros formularios es un buen recurso para lograr resultados profesionales. i Libro consultado: “Curso completo de HTML” por: Jorge Ferrer, Víctor García, Rodrigo García Licencia de Documentación Libre GNU, Versión 1.1 Free Software Foundation http://www.gnu.org/copyleft/fdl.html Extraído de: Curso completo de HTML por Jorge Ferrer por Víctor García por Rodrigo García Profesor. Juan Víctor Reyes Rojas 2020